CSS盒模型的認識

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-transform

    • 2.2塊級元素
      text-indent text-align

  • 3.元素的可見性
    visbility

  • 4.表格布局屬性
    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)入即可

list-style : 復(fù)合屬性油坝,用于把位置 類型 圖片三個屬性寫在一個聲明里赁咙。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市免钻,隨后出現(xiàn)的幾起案子彼水,更是在濱河造成了極大的恐慌,老刑警劉巖极舔,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件凤覆,死亡現(xiàn)場離奇詭異,居然都是意外死亡拆魏,警方通過查閱死者的電腦和手機盯桦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來渤刃,“玉大人拥峦,你說我怎么就攤上這事÷糇樱” “怎么了略号?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我玄柠,道長突梦,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任羽利,我火速辦了婚禮宫患,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘这弧。我一直安慰自己娃闲,他們只是感情好,可當我...
    茶點故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布匾浪。 她就那樣靜靜地躺著皇帮,像睡著了一般。 火紅的嫁衣襯著肌膚如雪户矢。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天殉疼,我揣著相機與錄音梯浪,去河邊找鬼。 笑死瓢娜,一個胖子當著我的面吹牛挂洛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播眠砾,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼虏劲,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了褒颈?” 一聲冷哼從身側(cè)響起柒巫,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎谷丸,沒想到半個月后堡掏,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡刨疼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年泉唁,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片揩慕。...
    茶點故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡亭畜,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出迎卤,到底是詐尸還是另有隱情拴鸵,我是刑警寧澤,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站宝踪,受9級特大地震影響侨糟,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜瘩燥,卻給世界環(huán)境...
    茶點故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一秕重、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧厉膀,春花似錦溶耘、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至企软,卻和暖如春庐扫,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背仗哨。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工形庭, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人厌漂。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓萨醒,卻偏偏與公主長得像,于是被迫代替她去往敵國和親苇倡。 傳聞我的和親對象是個殘疾皇子富纸,可洞房花燭夜當晚...
    茶點故事閱讀 45,037評論 2 355

推薦閱讀更多精彩內(nèi)容