css里布局有三種方式
1.使用盒子模型，涉及到的css屬性：width/height/padding
margin/border/display。。。。屬性
這種布局方式我們稱之為文檔流或者標(biāo)準(zhǔn)流
標(biāo)準(zhǔn)流里display這個(gè)屬性非常重要
有兩種顯示方式：block==>塊級(jí)元素? inline==>行級(jí)元素
塊級(jí)元素是獨(dú)占一行，高度有內(nèi)容來(lái)填充，能夠設(shè)置寬高
行家元素大小由內(nèi)容來(lái)填充設(shè)置寬高無(wú)效
2.浮動(dòng)：脫離了標(biāo)準(zhǔn)流，所有的元素都能設(shè)置寬高都不獨(dú)占一行了
3.定位：絕對(duì)定位，相對(duì)定位，固定定位
盒子模型

width? 數(shù)字
用來(lái)設(shè)置元素的寬度

height? 數(shù)字
用來(lái)設(shè)置元素的高度

padding? 數(shù)字
用來(lái)設(shè)置內(nèi)邊距

margin? 數(shù)字
用來(lái)設(shè)置外邊距

margin和padding一樣都有上下左右四個(gè)選項(xiàng)

border? 數(shù)字? 樣式? 顏色
用來(lái)設(shè)置邊框的線寬? 顏色? 和樣式，樣式有實(shí)線和虛線等

display? 塊級(jí)或者行級(jí)? block? 或者 line
用來(lái)設(shè)置時(shí)行級(jí)還是塊級(jí)元素

box-sizing
用來(lái)規(guī)定邊框和padding時(shí)否會(huì)撐大盒子

float
left? 和right 這是向左浮動(dòng)還是向右浮動(dòng)
注意浮動(dòng)的規(guī)律是拼命的向左或者向右來(lái)移動(dòng)知道前方有元素或者到邊界了? 他不會(huì)換行值只會(huì)在空間不足的情況下?lián)Q行但是有時(shí)候是換行到最近滿足空間的方式

清除浮動(dòng)
是給浮動(dòng)的父元素添加一個(gè)after偽類
設(shè)置這幾個(gè)屬性
cleart：both：比對(duì)左右浮動(dòng)的最大px值然后建立一個(gè)滿足最大的元素div

visibility：hidden：隱藏這個(gè)創(chuàng)建的div

content：“：這個(gè)創(chuàng)建的div內(nèi)容是空的

這個(gè)是防止浮動(dòng)使父級(jí)邊框塌陷

外邊距的塌陷問(wèn)題
margin塌陷問(wèn)題:

1. 兩個(gè)元素的垂直margin會(huì)塌陷，并不會(huì)相加，而是取最大值。左右的margin會(huì)疊加
2. 給子元素設(shè)置margin-top會(huì)直接作用到父元素。
?給父元素加border-top 或者 給父元素加padding-top