css網(wǎng)頁布局的知識點有哪些

這篇文章給大家分享的是有關(guān)css網(wǎng)頁布局的知識點有哪些的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站制作經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有槐蔭免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

1、盒子模型的第一層到第五層：

border、padding+content、background-image、background-color、margin

2、清除浮動。對受到浮動影響的標(biāo)簽作以下操作：

clear: both;
clear: right; clear: left;
設(shè)置寬度width: 100%(或者固定寬度)+overflow: hidden;

3、兩種清除浮動方法的使用場景：

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

4、絕對定位特點：

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

未設(shè)置偏移量時(left、top)：
無論是否存在已經(jīng)定位的祖先元素，都保持在元素初始位置脫離標(biāo)準(zhǔn)文檔流

設(shè)置偏移量時：偏移參照的基準(zhǔn)：
無已定位的祖先元素：以<html>為偏移參照基準(zhǔn)；
有已定位的祖先元素：以距其最近的已定位的祖先元素為偏移參照基準(zhǔn)。

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

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

5、隱藏按鈕文字的小技巧：

設(shè)置text-indent: -999px;和overflow: hidden;

原理：先使用text-indent:-999px;語句把被設(shè)置元素“擠出去”了，然后設(shè)置溢出的元素都隱藏起來，也就是被擠出去的元素隱藏起來。

6、媒體查詢：

可被用于css中的@media和@import規(guī)則上，也可被用在HTML和XML中。

@media screen and (width: 800px){...}
@import url(example.css) screen and (width: 800px);
<link media="screen and (width: 800px)" rel="stylesheet" href="example.css"/>0

感謝各位的閱讀！關(guān)于“css網(wǎng)頁布局的知識點有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁名稱：css網(wǎng)頁布局的知識點有哪些
鏈接URL：http://chinadenli.net/article22/gieojc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、定制網(wǎng)站、軟件開發(fā)、營銷型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、ChatGPT

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

css網(wǎng)頁布局的知識點有哪些