佈局-float-margin-padding

佈局

佈局從上到下，而後再從左右；先用div進行佔位，便是設置框架，而後Css美化

PS：注意設置長和寬 再設置float ； id不能數字命名

 

 Float

不用浮動的話，div默認會上下排列（塊狀元素）

使用float，讓該div浮起，沒加float的div會在 浮起的div下面（由於浮上去了）；若是不想被蓋住，下面的div可使用clean進行聲明（老子不想被你遮住）；總之，至關分爲2層，而且互不干擾

一、 使用左浮動的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上下邊距值非相加，而是取最大的邊距值