這個只是我學習過程中從各處找資料整理的筆記，如果有不對的或者不準確的說法還希望各路大神能幫我指正，在此謝過！
尺寸
1. 百分比 (相對于父物件)
2. auto(塊級水平方向的auto，塊級元素的margin border padding content寬度之和等於父元素width)
3. 包裹性(元素被設定為浮動，width變成內容的寬度，此時width：auto不管用)
浮動
* 元素脫離文件流
* 使用width/height，margin/padding將元素定位
example聖杯布局普通流布局dom1. left:寬度固定，高度可固定也可由內容撐開2. right：寬度固定，高度可固定也可由內容撐開
3. center：可以自適應瀏覽器寬度，高度可固定也可由內容撐開
樣式centeerleft
right
左右側欄定寬並浮動，中部內容區放最前不浮動width：100%並設定父物件內邊距,讓左右側邊欄浮動到上面，再將其相對定位出去注意
子元素設定為浮動之後，父物件的高度會坍塌，需要設定父物件後的元素清除浮動，這樣父物件的高度才能被浮動子元素撐起來。
撐起方法：
example雙飛翼布局1. 讓父物件也脫離文件流，浮動(但是這樣就不能實現寬度自適應)2. 將浮動元素的邊框邊界拉下來，就是在後面的元素裡加clear語句（clear與bfc）
dom
css樣式centerleft
right
其中：總結1. html中要讓center放前面，然而left要跑到center的前面，所以center必須浮動否則由於他們都是塊元素會分兩行2. 浮動之後要讓center寬度自適應，則width：100%，在父物件中設width：auto；也就是說，讓父物件寬度自適應，center只是繼承con的寬度
3. 對left、right使用負的margin讓它們浮動到上面
使用浮動進行布局時清除浮動可以用偽類after來清除；
在元素較多而且元素高度尺寸不一的情況下，單純使用浮動只能實現上端對齊，對於適應多種裝置的布局不太好用。
display:inline-block;絕對定位ps : inline-block元素會有4px左右的空隙，這是因為寫**時的換行符所致
解決辦法：
inline-block預設是基線對齊的，而inline-block基線又跟文字基線一致，所以在內容不同的時候不能水平對齊。只需要用vertical-align顯示宣告一下top/bottom/middle對齊即可。1. 在inline-block的父元素設定樣式font-size：0；letter-spacing：-4px；2. 設定inline-block的所有兄弟元素 font-size：值；letter-spacing：值px；
3. 恢復正常的顯示
基線：
問題：1. 無文字：容器的margin-bottom下邊緣，與容器內部的元素無關；2. 有文字：最後一行文字的下邊緣，和文字塊(即p/h等)的margin、padding無關
為什麼內聯元素的層疊順序要比浮動元素和塊狀元素要高？
總結
相比浮動inline-block更加容易理解，對於元素高度不同的情況，目前浮動布局的做法都是將元素做成等高元素進行展現；但是inline-block有vertical-align屬性，可以解決元素高度不同而帶來的布局問題。
position : absolute;單純使用絕對定位進行自適應布局的情況很少，一般絕對定位都用在尺寸固定的元素定位上
自適應布局
請你說一說你知道的所有web布局方式？1.浮動 float left right 2.inline block display inline block 行內塊級 3.flexible box 彈性盒子 display flex 4.grid display grid 5.絕對 相對布局 posit...
CSS布局 自適應布局
網易雲課堂學習筆記二 自適應布局 1.float absolute margin left right2.float overflow left right 產生bfc3.table left,right 預設均分 left margin失效 4.flex left right 由 定寬 自適應 類...
右邊自適應 左右布局 css左右自適應布局
如果有這麼乙個表單需求，前面是乙個名稱，中間是乙個表單，右側是乙個按鈕或者乙個字串。需要自適應布局，名稱為固定長度，右側也是固定，中間部分自適應整個width。先來看看html標籤1 6 年齡歲 首先，我想到的有這麼幾種display，乙個是inline block。於是css就變成這樣1.name...