1.結(jié)構(gòu)樣式
- width 寬度
- height 高度
- background 背景
- border 邊框
- padding 內(nèi)邊距
- margin 外邊距
2.文本設(shè)置
- font-size 文字大腥鼻啊（一般均為偶數(shù)）
- font-family 字體（中文默認宋體）
- color 文字顏色（英文蚂子、rgb玉掸、十六位進制色彩值）
- line-height 行高
- text-align 文本對齊方式
- text-indent 首行縮進（em縮進字符）
- font-weight 文字著重
- font-style 文字傾斜
- text-decoration 文本修飾
- letter-spacing 字母間距
- word-spacing 單詞間距（以空格為解析單位）
3.復(fù)合屬性
- background
- border
- padding
- margin
- font：font-style | font-weight | font-size/line-height | font-family
4.常見樣式
width 寬度 height 高度
background 背景 border 邊框
padding 內(nèi)邊距 margin 外邊距
font-size 文字大小 font-family 字體
color 文字顏色 line-height 行高
text-align 文本對齊方式 text-indent 首行縮進
font-weight 文字著重 font-style 文字樣式
text-decoration 文本修飾 letter-spacing 字母間距
word-spacing 單詞間距
5.常見標簽
- div 塊
- img 圖片（單標簽）
- a 鏈接亿柑、下載帚桩、錨點
- h1-h6 標題
- p 段落
- strong 強調(diào)（粗體）
- em 強調(diào)（斜體）
- span 區(qū)分樣式
- ul 無序列表
- ol 有序列表
- li 列表項
- dl 定義列表
- dt 定義列表標題
- dd 定義列表項
6.css reset
body,dl,dd,p,h1,h2,h3,h4,h5,h6 {
margin:0;
font-size:12px;
}
ol,ul {
margin:0;
padding:0;
list-style:none;
}
a {
text-decoration:none;
}
img {
border:none;
}
7.css選擇符優(yōu)先級
同級樣式覆蓋前者;
樣式優(yōu)先級
類型(1) < class(10) < id(100) < style(行內(nèi)樣式)(1000) < js
8.內(nèi)嵌(內(nèi)聯(lián)赏酥、行內(nèi))的特征
1砂蔽、同排可以繼續(xù)跟同類的標簽
2尔苦、內(nèi)容撐開寬度
3奕纫、不支持寬高
4提陶、不支持上下的margin和padding
5、代碼換行被解析
- a
- img
- span
- strong
- em
9.塊元素的特征
1匹层、默認獨占一行
2隙笆、沒有寬度時，默認撐滿一排
3又固、支持所有css命令
- div
- p
- h1-h6
- ul
- ol
- dl
10.Inline-block的特點和問題
1仲器、塊在一行顯示；
2仰冠、行內(nèi)屬性標簽支持寬高乏冀；
3、沒有寬度的時候內(nèi)容撐開寬度
11.前端規(guī)范
- 所有書寫均在英文半角狀態(tài)下的小寫洋只；
- id辆沦，class必須以字母開頭；
- 所有標簽必須閉合识虚；
- html標簽用tab鍵縮進肢扯；
- 屬性值必須帶引號；
- /* css注釋 */
- ul,li/ol,li/dl,dt,dd擁有父子級關(guān)系的標簽担锤；
- p,dt,h標簽 里面不能嵌套塊屬性標簽蔚晨；
- a標簽不能嵌套a；
- 內(nèi)聯(lián)元素不能嵌套塊；
12.浮動：left/right/none
1.使塊元素在一行顯示
2.使內(nèi)嵌支持寬高
3.不設(shè)置寬度的時候?qū)挾扔蓛?nèi)容撐開
4.脫離文檔流
5.浮動層級提升半層clear left/right/both/none 元素的某個方向不能有浮動元素
清浮動
- 1.給父級也加浮動
- 2.給父級加 display: inline-block;
- 3.在浮動元素下面加一個空的<div class="clear"></div>, .clear {height: 0;background: blue;font-size: 0;clear: both;}
- 4.在浮動元素下面加<br clear="all" />
- 5.給浮動元素的父級加:after {content: "";display: block;clear: both;}
- 6.給浮動元素的父級加overflow
- 在IE6,7下浮動元素的父級有寬度就不用清浮動
13.overflow
- auto 溢出顯示滾動條
- scroll 默認就顯示滾動條
- hidden 溢出隱藏
14.position: relative 相對定位
a铭腕、不影響元素本身的特性银择；
b、不使元素脫離文檔流累舷；
c浩考、如果沒有定位偏移量，對元素本身沒有任何影響被盈；
定位元素位置控制
top/right/bottom/left
15.position: absolute 絕對定位
a析孽、使元素完全脫離文檔流；
b只怎、使內(nèi)嵌支持寬高袜瞬；
c、塊屬性標簽內(nèi)容撐開寬度尝盼；
d吞滞、如果有定位父級相對于定位父級發(fā)生偏移佑菩，沒有定位父級相對于整個文檔發(fā)生偏移盾沫；
e、相對定位一般都是配合絕對定位元素使用殿漠；
定位元素位置控制
top/right/bottom/left定位元素默認后者層級高于前者
z-index:[number]赴精； 定位層級
16.position: fixed 固定定位
與絕對定位的特性基本一致，差別是始終相對整個文檔進行定位绞幌；
IE6不支持固定定位蕾哟；
17.opacity：不透明度
標準瀏覽器 opacity: 0.5;
IE8以下私有 filter: aplpha(opacity=50);
18.table 表格
table的標簽特性就是display: table;
colspan 屬性規(guī)定單元格可橫跨的列數(shù)；
rowspan 屬性規(guī)定單元格可橫跨的行數(shù)莲蜘；
table css reset:
th, td {
padding: 0;
}
table {
border-collapse: collapse;
}
table 表格
thead 表格頭部
tr 行
th 表格標題
tbody 表格主體
tr 行
td 單元格
tfoot 表格尾部
注意事項：
1谭确、不要給table,th,td以外的表格標簽加樣式
2、單元格默認平分table的寬度
3票渠、th里面的內(nèi)容默認加粗并且左右上下居中顯示
4逐哈、td里面的內(nèi)容默認上下居中左右居左顯示
5、table決定了整個表格的寬度
6问顷、table里面的單元格寬度會被轉(zhuǎn)換成百分比
7昂秃、表格里面的每一列必須有寬度
8、表格同一豎列繼承最大寬度
9杜窄、表格同行繼承最大高度
19.flex 彈性盒
display: flex display: box的進化版但是兼容性flex-direction設(shè)置主軸方向
- row 從左向右排列（默認值）
- row-reverse 從右向左排列
- column 從上往下排列
- column-reverse 從下往上排列
justify-content 主軸對齊
- flex-start（默認）元素在開始位置 富猿β妫空間占據(jù)另一側(cè)
- flex-end 富裕空間在開始位置 元素占據(jù)另一側(cè)
- center 元素居中 富匀空間平分左右兩側(cè)
- space-between 富允赐龋空間在元素之間平均分配
- space-around 富裕空間在元素兩側(cè)平均分配
align-items 側(cè)軸對齊
- flex-satrt （默認值）元素在開始位置 富陨ㄍ猓空間占據(jù)另一側(cè)
- flex-end 富岳蚋疲空間在開始位置 元素占據(jù)另一側(cè)
- center 元素居中 富陨醋ⅲ空間平分左右兩側(cè)
flex-wrap 換行
- nowwrap（默認）
- wrap 換行
- wrap-reverse 反向換行
align-content 堆棧伸縮行
- align-content會更改flex-wrap的行為。它和align-items相似胆胰，
- 但是不是對齊伸縮項目狞贱，它對齊的是伸縮行
- flex-start（默認）元素在開始位置 富裕空間占據(jù)另一側(cè)
- flex-end 富允裾牵空間在開始位置 元素占據(jù)另一側(cè)
- center 元素居中 富韵规遥空間平分左右兩側(cè)
- space-between 富裕空間在元素之間平均分配
- space-around 富院窳空間在元素兩側(cè)平均分配
- space-evenly 富匝踉妫空間平均分配，所有元素之間空間相等
flex-flow
- flex-flow是flow-direction和flex-wrap的縮寫
- flex-flow:[flex-direction] [flex-wrap]
flex子元素相關(guān)屬性
-
order 顯示順序
- 數(shù)字越大别垮，顯示越考后
- 支持負數(shù)
- margin:auto
-
align-self 子元素側(cè)軸對齊
- flex-start（默認值）元素在開始位置 富员慵啵空間占據(jù)另一側(cè)
- flex-end 富裕空間在開始位置 元素占據(jù)另一側(cè)
- center 元素居中 富蕴枷耄空間平分左右兩側(cè)
- flex 伸縮性
- flex:auto
- flex:none
