css筆記–css中需要注意的知識點

css尺寸

css的尺寸屬性

尺寸屬性可以設定為具體的畫素單位，也可以設定為相對父元素尺寸的百分比

max-height和max-width屬性是當圖片的高和寬超過了設定的最大值時，按最大值顯示，若沒有超過最大值，則最大值不影響大小。

display屬性

display屬性用於設定元素的狀態

display:none或設定visibility:hidden，使元素不可見。但是這兩個方法是有區別的，display:none設定後元素不再佔用空間，而visibility:hidden設定後，元素還會佔用空間，即使它不再顯示。

內聯元素和塊級元素

• 塊級元素：獨佔一行，比如：<div>div1</div><div>div2</div>會顯示成兩行。塊級元素的width、height、padding、margin屬性都是可控制的。即，我們可以給這些屬性指定具體的值。
• 內聯元素：相鄰的內聯元素將顯示在同一行，比如：<span>span1</span><span>span2</span>會顯示在同一行。內聯元素的width、height、padding、margin等都不可改變。

元素分類：

• 塊級元素有：address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul, li
• 內聯元素：a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, txtarea, tt, u, var
• 可變元素：applet, button, del, iframe, ins, map, object, script

雖然元素有其分類，但是我們可以用display元素修改它們的預設分類。

• dispaly:block 顯示為塊級元素
• display:inline 顯示為行級元素
• display:inline-block 顯示為內聯元素，但是可以修改其高寬、邊距等

display:inline-block常常用在<ul>元素，使ul變成水平顯示，而且可以調整它的盒子模型

position定位

position屬性有5個值

• static 使用html預設
• relative 相對該元素正常位置的重新定位
• fixed 相對瀏覽器視窗是固定的
• absolute 絕對定位，相對父元素的定位
• sticky(粘性的) 基於使用者的滾動位置來定位。常見的網頁中有header，下面有navbar，向上滾動時，navbar會固定在瀏覽時上方，這種便用到的sticky屬性。

sticky屬性詳細說明

元素定義了sticky之後必須指定閾值top，right，bottom，left四個中的一個，以指定固定在瀏覽器的哪個方向上。否則不會生效。

舉例：

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

當為元素指定了position後，有如下的定位屬性可選擇。

• bottom
• right
• left
• top
• clip 裁剪一個絕對定位的元素，有三個值:shape,auto,inherit; shape(只有一個形狀rect,使用clip:rect (top, right, bottom, left));auto 表示預設值,inherit 從父元素繼承
• cursor 顯示游標移動到指定的型別 參考>http://www.runoob.com/css/css-positioning.html
• overflow 設定當元素的內容溢位其區域時發生的事情。
• overflow-y 指定如何處理頂部/底部邊緣的內容溢位元素的內容區域
• overflow-x
• z-index 設定元素的堆疊順序

該部分參考 >http://www.runoob.com/css/css-positioning.html

float浮動

會使元素向左或向右移動，其周圍的元素也會重新排列。
Float（浮動），往往是用於影象，但它在佈局時一樣非常有用。

float:left/right/none/inherit

clear:left/right/both/none/inerit 清除指定元素周圍的浮動

設定背景圖

background: url(圖片地址) 0 0; 後面兩個引數表示從什麼位置開始裁剪