1.盒模型
盒模型又叫“框模型”墩剖。它假設(shè)任何一個HTML標簽都存在一個元素框甘有。它規(guī)定了HTML的元素顯示
- 在元素框中央是內(nèi)容區(qū)
- 在內(nèi)容區(qū)外是內(nèi)邊距
- 在內(nèi)邊距外是邊框
- 在邊框外是外邊距
2.用途
盒模型用于計算元素在文檔中占據(jù)的內(nèi)容大小,通過box-sizing屬性的兩個屬性值有兩種計算方式:
- content-box :默認值內(nèi)容盒
- border-box :邊框盒
3.怎么辦?
在移動端的項目中摧莽,我們經(jīng)常使用邊框盒模型挑社,因為它的計算方法更方便陨界,適合移動斷靈活多變的特點。
css三大特點
1.繼承性 :把元素屬性值傳遞給后代的機制叫做繼承性痛阻。
不能繼承的屬性如下:
盒模型:寬高內(nèi)邊距外邊距背景
布局模型:浮動菌瘪,定位,flexbox阱当,gird
- 1.display:規(guī)定元素應(yīng)該生成的框的類型.
- 2.文本屬性: vertical-align text-decoration
- 3.盒子模型的屬性 : width height margin border padding
- 4.背景屬性: background background-color background-image
- 5.定位屬性 float-clear position top right bottom left min-width min-height max-width max-height overflow clip
能繼承的屬性如下:
字體屬性組
文本屬性組
列表屬性
1.字體系列屬性:
font font-family font-weight font-size font-style-
2.文本系列屬性
2.1內(nèi)聯(lián)元素
color line-height word-spacing letter-spacing text-transform2.2塊級元素
text-indent text-align
3.元素的可見性
visbility4.表格布局屬性
caption-side border-collapse border-spacing empty-cells table-layout
2.層疊性:
3.特殊性:
一.列表是什么俏扩?
列表是相關(guān)項目的集合。
二.HTML中有幾種列表
1.無序列表:不強調(diào)列表項目順序的列表 ul默認有40px左內(nèi)邊距弊添,上下16的外邊距
2.有序列表:強調(diào)列表項目順序的列表 ol默認有40px左內(nèi)邊距录淡,上下16的外邊距
3.定義列表:
dl:定義列表
dt:定義列表標題 title
dd:定義列表項 默認有40px左外邊距
三.列表屬性
list-style-position 規(guī)定列表項符號的位置
語法:
ul{
list-style-position:inside | outside
}
屬性值:
- outside: 把列表的項目符號放在里元素外部
- inside: 把列表的項目符號放在里元素內(nèi)部
list-style-type 規(guī)定列表符號的類型
單詞:lower (小寫)
語法:
ul{
list-style-type:disc | square | circle | none | lower-roman | lower-greek | lower-alpha | lower-latin | decimal | decimal-leading-zero
}
屬性值:
- disc: 實心圓體 (默認)
- square :實體方心
- circle: 空心圓
- none:無
- lower-roman;古羅馬
- lower-greek;希臘排序
- lower-alpha;字母排序
- lower-latin;字母排序
- decimal;數(shù)字排序,默認
- decimal-leading-zero;01開頭的排序
list-style-lmage 使用圖片設(shè)置列表項符號
.td{
list-style-image: url(./542be893253d06a70f666c4cc10a92e.jpg);
}
用url()屬性導(dǎo)入即可