前端開發css_day05

１定位

Position: left | right | top | bottom

１.1 靜態定位

Position:static; 標準流。

１.2 絕對定位(看臉型)

Position:absolute;

特點：

◆自身從瀏覽器出發。

◆絕對定位之後，元素不佔位置，會脫標。

◆嵌套的盒子，父元素沒有給自身絕對定位，子元素絕對定位，子元素從瀏覽器出發設置自身位置。

◆

嵌套的盒子，父元素絕對定位，子元素絕對定位，子元素從父元素出發設置自身位置。

◆行內元素轉成行內塊。（不推薦使用）

１.3 相對定位（自戀型）

Position:relative;

◆位置從自身出發。

◆設置相對定位之後，還佔據原來的位置。

◆子絕父相，子元素絕對定位，父元素相對定位。

◆嵌套的盒子，父元素相對定位，子元素絕對定位，子元素從父元素出發設置自身位置。

◆不能將行內元素轉成行內塊。

2.4固定定位

Position:fixed;

特點:

◆位置從瀏覽器出發。

◆不佔據原來的位置，會脫標

◆可以將行內元素轉換為行內塊。（不推薦使用）

２定位的盒子居中顯示

★:margin:0 auto; 只能讓標準流的盒子居中對齊。

★定位的盒子居中：先左右走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:負值。)

３標籤包含規範

◆div可以包含所有的標籤。

◆p標籤不能包含div h1等標籤。

◆h1可以包含p，div等標籤。

◆行內元素儘量包含行內元素，行內元素不要包含塊元素。

４規避脫標流

◆儘量使用標準流。

◆標準流解決不了的使用浮動。

◆浮動解決不了的使用定位。

５圖片和文字垂直居中對齊

vertical-align對inline-block最敏感。默認屬性是:vertical-align:baseline;

６Css可見性

overflow:hidden; 溢出隱藏

visibility:hidden; 隱藏元素 隱藏之後還佔據原來的位置。

display:none; 隱藏元素 隱藏之後不佔據原來的位置。

Display:block; 元素可見

Display:none 和display:block 常配合js使用。

７css之內容移除（網頁優化）

◆使用text-indent:-5000em;

◆將元素高度設置為0,使用內邊距將盒子撐開，給盒子使用overflow:hidden;將文字隱藏。

８Css精靈圖

９屬性選擇器

１０ emmet快捷鍵：

emmet是我們在sublime中的一個插件在這個插件中集成很多的快捷鍵。

１１html:

１１.1生成結構的快捷鍵：

！+ tab,可以生成html5的結構代碼。

１１.2生成id名和類名

標籤名.類名#id名+tab

沒有標籤名.類名+tab ==>div

１１.3生成同級元素：

標籤名+標籤名+標籤名 “+”tab

１１.4生成子類標籤

標籤名>子標籤名>子標籤名>子標籤名+tab

標籤名>子標籤名>子標籤名>子標籤名^^子標籤名+tab

１１.5帶固定數量的標籤:

ul>li*5+tab

１１.6帶有序號名稱

ul>li.abc$*3 + tab

１１.7生成帶有內容的標籤：

ul>li>a{item}*5

１２css

width:30px==>w30+tab

Height:30px==>h30+tab

Margin:30px==>mg30+tab

Padding:30px==> pd30+tab

Line-height:12px==>lh12px+tab

Background==>bg+tab