布局
使用塊元素搭建網頁結構,改變預設文件流的方式，讓其在一行中顯示多列。【讓塊在一行中顯示】
float (為了讓塊元素在一行顯示)
float:left 向左浮動
right 向右浮動
可以使塊元素脫離當前的文件流
1) 寬度如果沒有手動指定那麼就由內容決定
2) 多個浮動元素在乙個浮動流中併排顯示，如果一排放不下就會自動換行
3) 浮動元素失去了對父元素的支撐
clear（清理浮動）
clear:left
right
both
清理左邊/右邊/左右兩邊的浮動元素，一般使用這個特性強制子元素換行，達到支撐父元素的目的
一行多列：
全部浮動
ul>li方法一：
兩列都浮動
.left
.right
一列浮動，一列新增margin-left
.left
.right
overflow-x
overflow-y
auto/none/visible/scroll
當父元素的寬/高固定，子元素的寬/高超過了父元素就可以使用這個特性
display
block/inline/inline-block/…
塊/行內/行內塊
行內塊可以與其他行內元素共享一行空間
可以指定寬高
定位布局
position
static 靜態（預設） 非定位元素
relative 定位元素（相對定位）
參照點：原先所在的位置
特性：不脫離文件流（寬度預設為為100%，原來在文件流的位置不會被搶占），但是可以覆蓋在其他元素上
absolute 定位元素（絕對定位）
參照點：距離它最近的父定位元素，如果沒有，參照視口
特性：脫離文件流（寬度由內容決定，原來在文件流的位置被其他元素搶占）
fixed 定位元素（固定定位）
特性：脫離文件流
參照點：相對於瀏覽器視口，並且不會隨著網頁的滾動而滾動
sticky 定位元素（粘滯定位 【css3新特性】）
特性：不脫離文件流
是relative與fixed的集合，使用top/left/right/bottom設定過渡點，當超過了這個臨界點，就提現fixe固定在網頁中的特性
只能定位元素才能使用定位屬性
top 、left、bottom、right
改變定位元素在z軸中的位置
z-index
預設為0，值越小越靠下
伸縮盒作用：主要應用在響應式(網頁可以隨著終端的螢幕尺寸合理調整布局)布局中
應用：1. 父元素(寬高都需要明確)
display:flex
flex-direction:row/column
flex-wrap:nowrap/wrap
2. 子元素
flex-basic
flex-grow:
flex-shrink:
flex:grow shrin basic;
flex:grow;
CSS 浮動布局與定位布局
布局常用的方法 用float設計浮動布局 float預設值為none,可根據頁面需要設定為左浮動left，或右浮動right 瀏覽器中效果 因為 div 是區塊元素，每個 div 獨佔一行，要想讓三個 div 在同一行裡顯示，就需要給三個子元素設定浮動，但浮動會使元素脫離文件流，父元素高度崩塌，所以...
css浮動於定位 布局的基礎
浮動 div是塊級元素，塊級元素獨自占用一行，除非新增display為inline block或者float left right 浮動可以讓塊級元素脫離標準文件流 定位 定位可以分為四種 relative 相對定位 absolute 絕對定位 fixed 固定定位 static。當我們不對元素應用...
css浮動布局
float 是 css 的定位屬性。在傳統的印刷布局中，文字可以按照需要圍繞。一般把這種方式稱為 文字環繞 在網頁設計中，應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對 定位的頁面元素相比是乙個明顯的不同。絕對定位的頁面元素被...