1. 程式人生 > >CSS的再一次深入(更新中···)

CSS的再一次深入(更新中···)

區別 無序 type 正方形 png 需要 有一種 選中 -h

全面我們學了6個選擇器,今天再來學習兩個選擇器,分別是通配符選擇器和並集選擇器:

1.通配符選擇器:

  *{

}

表示body裏所有的標簽都被選中

2.並集選擇器:

技術分享圖片

選中的標簽之間用逗號隔開,表示這幾個標簽都被選中

*選擇器 有好處也有弊端

好處 就是省事,弊端,就是因為太省事了,加大了瀏覽器的負荷。

解決辦法 按需選擇。

再來學習幾個列表標簽

1.無序列表 ul

(1)內部必須有子標簽<li></li>

(2)ul天生自帶內外邊距(天生自帶內外邊距的還有p,hi-h6,ol)

2.有序列表 ol

(1)內部也必須有子標簽<li></li>

(2)ol天生也自帶內外邊距

無序列表前面符號是形狀,有序列表前面符號是序號

ul和ol不同之處就在前面符號的區別

ul想改前面的形狀要用list-style:circle(空心圓)/disc(實心圓)/square(正方形)/none(空);

ol想改前面的序號要用標簽屬性 type 修改,無法使用樣式標簽修改

3.自定義列表 dl

dl中要用dt和dd(dt是小標題,dd是內容)

列表能做什麽?

做二級菜單 做導航

備註

marginpadding問題的探討

margin:200px;設置一個值 說明top right bottom left 都是200px

margin

200px 100p;設置兩個值 上下是200px 左右是100px

margin200px 50px 100px 上是200px 左右是50px 下是100px

margin:200px 50px 100px 50px; 上是200 右是50px 下是100px 左是50px

padding同上

實際占用的空間大小

通過分析我們發現 一個標簽元素實際占用的空間是

width+border*2+padding*2+margin*2

一個標簽元素的實際高度是

height+padding-top+padding-bittom+2 x border

同時還有一種情況需要註意:

margin的塌陷現象,即:

相鄰兩個塊級元素同時設置margin是他們的外邊距不會疊加,會取最大的外邊距的值,這種現象叫做margin塌陷。

CSS的再一次深入(更新中···)