網(wǎng)頁布局基礎(chǔ)

WalkerXu 發(fā)布于2019-04-23 13:22 / 1538人閱讀

摘要：左右撐滿整個(gè)容器，為自己清除浮動(dòng)創(chuàng)建條件。練習(xí)題已知一個(gè)設(shè)置了絕對(duì)定位的元素，位于其父元素中，元素為靜態(tài)元素，則元素將以為基準(zhǔn)進(jìn)行偏移。答案是因?yàn)闉殪o態(tài)位置，所以要以根元素為基準(zhǔn)進(jìn)行偏移，也就是元素靜態(tài)定位是，是元素的默認(rèn)定位屬性。

1、盒子模型的第一層到第五層： ? ? ?border、padding+content、background-image、background-color、margin

2、清除浮動(dòng)。對(duì)受到浮動(dòng)影響的標(biāo)簽作以下操作：
???? 1、clear: both;
???? 2、clear: right; ?clear: left;
???? 3、設(shè)置寬度width: 100%(或者固定寬度)+overflow: hidden;

3、兩種清除浮動(dòng)方法的使用場(chǎng)景： ???? 1、當(dāng)子元素設(shè)置了浮動(dòng)，父元素沒有設(shè)置浮動(dòng)而導(dǎo)致的父元素高度不能自動(dòng)擴(kuò)展，縮成一條線，子元素從父元素中溢出時(shí)，適合使用同時(shí)設(shè)置width:100%（或固定寬度值）+overflow:hidden的方式來清除浮動(dòng)；此法可同時(shí)去除緊鄰的塊級(jí)受到的浮動(dòng)影響，而不需要再對(duì)受到浮動(dòng)影響的緊鄰塊級(jí)元素設(shè)置去除浮動(dòng)。 ?? ???? 2、如果是緊鄰的塊級(jí)元素受到浮動(dòng)影響,對(duì)該受到影響的塊級(jí)設(shè)置clear:both或者clear:left,clear:right更為合適。 ? ?????注意：width設(shè)置為100%就是繼承父容器的寬度。左右撐滿整個(gè)容器，為自己清除浮動(dòng)創(chuàng)建條件。再加溢出隱藏，就可以把包裹浮動(dòng)的部分去除。

4、絕對(duì)定位特點(diǎn)：

建立了以包含塊位基準(zhǔn)的定位
完全脫離標(biāo)準(zhǔn)文檔流
隨即擁有偏移屬性跟z-index屬性

未設(shè)置偏移量時(shí)：(left、top)
???? 無論是否存在已經(jīng)定位的祖先元素，都保持在元素初始位置脫離標(biāo)準(zhǔn)文檔流
設(shè)置偏移量時(shí)：偏移參照的基準(zhǔn)：
? ???無已定位的祖先元素：以為偏移參照基準(zhǔn)；
? ???有已定位的祖先元素：以距其最近的已定位的祖先元素為偏移參照基準(zhǔn)。

?? ?注意：當(dāng)一個(gè)元素設(shè)置了絕對(duì)定位，沒有設(shè)置寬度時(shí)，元素的寬度根據(jù)內(nèi)容進(jìn)行調(diào)節(jié)。

? 練習(xí)題：已知一個(gè)設(shè)置了絕對(duì)定位的元素b，位于其父元素a中，a元素為靜態(tài)元素，則b元素將以(html)為基準(zhǔn)進(jìn)行偏移。 ???? ??答案是因?yàn)閍為靜態(tài)位置，所以要以根元素為基準(zhǔn)進(jìn)行偏移，也就是html元素（靜態(tài)定位是position:static，是元素的默認(rèn)定位屬性。只有設(shè)置了absolute或relative或fixed才算已定位的父級(jí)元素。 ?

5、隱藏按鈕文字的小技巧： ???? ???? ??text-indent: -999px; ???? ??????overflow: hidden; ???? 先使用text-indent:-999px;語句把被設(shè)置元素“擠出去”了，然后設(shè)置溢出的元素都隱藏起來，也就是被擠出去的元素隱藏起來。

6、媒體查詢： ? ? ?可被用于css中的@media和@import規(guī)則上，也可被用在HTML和XML中。 ? ? ?1）@media screen and (width: 800px){...} ? ? ?2）@import url(example.css) screen and (width: 800px); ? ? ?3）0