1、盒子模型的第一層到第五層:
border、padding content、background-image、background-color、margin
2、清除浮動。對受到浮動影響的標簽作以下操作:
???? 1、clear: both;
???? 2、clear: right; ?clear: left;
???? 3、設置寬度width: 100%(或者固定寬度) overflow: hidden;
???? 1、clear: both;
???? 2、clear: right; ?clear: left;
???? 3、設置寬度width: 100%(或者固定寬度) overflow: hidden;
3、兩種清除浮動方法的使用場景:
1、當子元素設置了浮動,父元素沒有設置浮動而導致的父元素高度不能自動擴展,縮成一條線,子元素從父元素中溢出時,適合使用同時設置width:100%(或固定寬度值) overflow:hidden的方式來清除浮動;此法可同時去除緊鄰的塊級受到的浮動影響,而不需要再對受到浮動影響的緊鄰塊級元素設置去除浮動。 ??
2、如果是緊鄰的塊級元素受到浮動影響,對該受到影響的塊級設置clear:both或者clear:left,clear:right更為合適。
注意:width設置為100%就是繼承父容器的寬度。左右撐滿整個容器,為自己清除浮動創建條件。再加溢出隱藏,就可以把包裹 浮動的部分去除。
4、絕對定位特點:
- 建立了以包含塊位基準的定位
- 完全脫離標準文檔流
- 隨即擁有偏移屬性跟z-index屬性
- 未設置偏移量時:(left、top)
???? 無論是否存在已經定位的祖先元素,都保持在元素初始位置 脫離標準文檔流 - 設置偏移量時:偏移參照的基準:
? ???無已定位的祖先元素:以<html>為偏移參照基準;
? ???有已定位的祖先元素:以距其最近的已定位的祖先元素為偏移參照基準。
?? ?注意:當一個元素設置了絕對定位,沒有設置寬度時,元素的寬度根據內容進行調節。
?
練習題:已知一個設置了絕對定位的元素b,位于其父元素a中,a元素為靜態元素,則b元素將以(html)為基準進行偏移。
答案是因為a為靜態位置,所以要以根元素為基準進行偏移,也就是html元素(靜態定位是position:static,是元素的默認定位屬性。只有設置了absolute或relative或fixed才算已定位的父級元素。
5、隱藏按鈕文字的小技巧:
text-indent: -999px;
overflow: hidden;
先使用text-indent:-999px;語句把被設置元素“擠出去”了,然后設置溢出的元素都隱藏起來,也就是被擠出去的元素隱藏起來。
6、媒體查詢:
可被用于css中的@media和@import規則上,也可被用在HTML和XML中。
1)@media screen and (width: 800px){...}
2)@import url(example.css) screen and (width: 800px);
3)<link media="screen and (width: 800px)" rel="stylesheet" href="example.css"/>0
?
本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=hcc01j&title=網頁布局基礎