布局
布局從上到下,然后再從左右;先用div進行占位,即是設置框架,然后Css美化
PS:注意設置長和寬 再設置float ; id不能數字命名
Float
不用浮動的話,div默認會上下排列(塊狀元素)
使用float,讓該div浮起,沒加float的div會在 浮起的div下面(因為浮上去了);如果不想被蓋住,下面的div可以使用clean進行聲明(老子不想被你遮住);總之,相當分為2層,並且互不干擾
1、 使用左浮動的div就會從最左邊開始浮,依次從左到右排序直到最右,就會換行又從左到右;
2、左浮和右浮都是在同一個層次,所以左浮和右浮不會重疊。
問題:父容器中有兩個子容器,如果定義了父容器的寬度,沒有定義高度;兩個子容器都浮動,父容器沒有清除,那么父容器有多高?
答: 父容器高度為0,因為子容器都浮在上面,沒有把父容器撐大。如果去除兩個子容器的浮動則高度等於子容器
清楚浮動的問題
當div上面有另一個div的float遮擋時,使用clear:left等清除,則添加清除的div會在下面(類塊狀)
當屬性設置float(浮動)時,他所在的物理位置已經脫離文檔流了,但是大多時候我們希望文檔流能識別float(浮動),或者是希望float(浮動)后面的元素不被float(浮動)所影響,這個時候我們就需要用clear:both;來清除。
Clear屬性一般使用在緊鄰后面的元素的清除浮動
Margin Padding div
div也被叫做盒子;div是塊元素,所以會自己占1行;使用spin是行內元素能設置樣式(不能設置豎直方向的內外邊距)
一般同級盒子與盒子之間的距離叫做外邊距margin(如果寫四個就從上逆時針;,)
內邊距是內容與盒子邊的距離padding
如果一組div具有相似的屬性我們可以用class 表示一類(名可以一樣)
盒子的border的三要素:寬、形狀、顏色;
border :寬 樣式 顏色 ;另外直接可以僅某條邊進行設置(詳情見CSS完全參考手冊)
實戰:利用css控制border 和div和做出三角。因太粗的邊是三角形狀的,類門框
內邊距的問題 :一個div設置了border和長寬之后,再添加padding的大小,會讓div形狀變大,變大的部分就是padding的值;原來的div大小是不變的,能夠添加內容的空間還是那么大(magin不會)
增加padding注意總長度,可以通過修改width的長度調節
實際的height = height + margin-top + margin-bottom + padding-top + padding-bottom + 2 border
margin重疊:相鄰的div上下邊距值非相加,而是取最大的邊距值