. 浮動布局
1.1 特點
1）加了浮動的標簽會超出文檔流，不占頁面位置；
2）浮動的排列優(yōu)先級比正常文本流排列方式高；
3）非浮動塊級元素在浮動元素后面產(chǎn)生重疊時，該塊級元素在浮動元素下顯示，只有內(nèi)容不在浮動元素下
1.2 參數(shù)
1）float:left; 左浮動
2）float:right; 右浮動
3）float:none; 不浮動
4）float:inherit; 從父元素繼承
1.3 清除浮動
1）給其父元素設置一個高度
2）給父元素加上overflow:hidden;
3）給浮動元素后面添加一個同級的.clear
<style>
.clear{
clear:both;
}
</style>
<body>
<div class="clear"></div>
</body>
1.4 clear參數(shù)
1）clear:left；在左側(cè)不允許浮動元素
2）clear:right;在右側(cè)不允許浮動
3）clear:both;在左右兩側(cè)不允許浮動
4）clear:none;默認值，允許兩側(cè)浮動
5）clear:inherit;規(guī)定應該從父元素繼承clear屬性的值
單行文字超出
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;-
多行文字超出
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; 數(shù)字為行數(shù)
-
position 定位 一個元素蓋在一個元素可用定位
-
相對定位 relative
不會脫離文檔流
不管你怎么設置位置 他原先所占的位置 一直都在
如果給元素設置margin的時候 依舊會影響正常文檔流的排列
只想對其本身做移動 不影響其他元素 但是元素設置margin會影響
-
絕對定位 absolute
- 會脫離文檔流
- 誰有relative 誰就是參考點 向上查找 如果其父元素 設置了相對定位 則其父元素為參照物 如何沒有 不斷向上查找 知道找到其設置相對定位的祖先元素 如果祖先元素沒有 則以body為參照物
- 不能以祖先元素的兄弟元素參照我 必須是直系祖先元素
- 如果不止一個祖先元素設置了相對定位那么就以最近的元素為參照物
-
fixed 固定定位
會脫離文檔流
直接以窗口為參照物
不管窗口 怎么滾 他都是以固定的位置存在
-
