浮動
元素的浮動是指設定了浮動屬性的元素會脫離標準普通
流的控制，移動到其父元素中指定位置的程序，
語法: float :
left
right
none(默認)
注意:
1. 浮動的元素要有父元素
2. 浮動后的元素類似元素行內塊元素,即使行內元
素浮動后也可以設定寬高.(類似不代表是,浮動后的盒子可以設定寬高，但是不能用行內塊的方式讓盒子居中，比 如：給浮動的盒子父元素添加 text-algin ：center ；是不起作用的；需要給盒子margin才能調整其位置)
3. 浮動的元素會脫離檔案流,但是沒有脫離文本流
浮動帶來的影響：
父元素高度塌陷 : 子元素浮動,父元素沒有設定高,子元素
不能把父元素的高給撐開,導致父元素沒有高度,這種現
象叫父元素高度塌陷 .
清除浮動
1.加固定的高
缺點:不靈活
2.額外標簽法
在父元素的末尾加一個空div, 給父元素設定
clear:left/right/both
優點： 通俗易懂，書寫方便
缺點： 添加許多無意義的標簽，結構化較差，
3.父級添加overflow屬性方法
在父元素身上設定 : 除了visible以外的其他overflow
的值都可以 , overflow:hidden/scroll/ auto
原因: 是overflow觸發了BFC, 在計算BFC高度的時
候,浮動的子元素的高度也計算在內
優點:代碼簡潔
缺點 :無法顯示需要溢位的元素
4.使用after偽元素清除浮動
優點 : 結構語意化正確
缺點 : 由于IE67不支持:after，使用 zoom:1
1 .clearfix:after { 2 content: ""; 3 display: block; 4 clear: both; 5 } 6 .clearfix { 7 zoom: 1; 8 }
定位
1.postion: static 默認值 靜態定位
2.postion : relative : 相對定位
特點 : 不脫離檔案流 ,以自身的位置來定位的
應用場景 :
微調元素
做絕對定位的參考，子絕父相
3.position:fixed : 固定定位
不管怎么滾動滾動條,始終固定在某個位置
特點 : 脫離了檔案流,以瀏覽器視窗來定位的
4.position:absolute : 絕對定位
特點 : 脫離了檔案流, 以最近已定位的”父元素”的位置來
說的,如果父元素都沒有定位,以html的位置來說的
備注 : 已定位的”父元素”可以是 絕對定位/ 相對定位/固
定定位,子絕父相用的最多
方向關鍵字
left : 正值是向右走的 負值往左走
top : 正值是向下走的 負值往下走
right : 正值是向左走的 負值往右走
bottom : 正值是向上走的 負值往下走
注意: static定位身上不能用方向關鍵字
脫離檔案流的元素
1.固定定位
2.絕對定位
3.浮動
特點 : 類似于行內塊元素,如果不設定寬高,它的寬高是由
內容撐開的,即使是行內元素,可以設定寬高
如何讓定位的盒子垂直居中:
1 { 2 left:50%; 3 top:50%; 4 margin-left:-盒子寬度的一半; 5 margin-top:-盒子高度的一半; 6 } 7 8 { 9 left:50%; 10 top:50%; 11 <!--向左移動自己寬度的一半--> 12 transform: translateX(-50%); 13 <!--向上移動自己高度的一半--> 14 transform: translateY(-50%); 15 }
浮動定位區別
CSS2中能夠使標簽脫離檔案流的屬性有：
float:left/right?
postion:absolute/fixed?
float脫離檔案流時，其他盒子會無視這個標簽，但其他
盒子內的文本、圖片、表單標簽依然會為這個標簽讓出
位置，環繞在周圍( 脫離檔案流，不脫離文本流 )，
position脫離檔案流的標簽，其他盒子完全無視它，包括
標簽內部的文本、圖片、表單標簽（ 既脫離檔案流，又脫離文本流 ）
注意：所有的標簽都能夠使用以上屬性，脫離檔案流之后
1. 不再區分塊級和行內標簽，類似行內塊元素，
2. 寬高默認由內容撐開，可以設定width和height及所有
盒模型屬性,即使行內元素也可以設定寬高
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/11098.html
標籤：Html/Css
下一篇：奇妙的 CSS MASK