調(diào)查問卷在哪個網(wǎng)站做子域名在線查詢
CSS真題合集（一）
- 1. 盒子模型
- 1.1 盒子模型的基本組成
- 1.2 盒子模型的實際大小
- 1.3 盒子模型的兩種類型
- 1.4 設(shè)置盒子模型
- 1.5 彈性盒子模型
- 2. BFC
- 2.1 主要用途
- 2.2 觸發(fā)BFC的方法
- 2.2 解決外邊距的塌陷問題（垂直塌陷）
- 3. 響應(yīng)式布局
- 3.1 原理
- 4. 元素水平垂直居中的方法
- 5. 實現(xiàn)兩欄布局右側(cè)自適應(yīng)？三欄布局中間自適應(yīng)？
- 5.1 常用實現(xiàn)兩欄布局右側(cè)自適應(yīng)的方法
- 5.2 常用實現(xiàn)三欄布局中間自適應(yīng)的方法
- 5.3 可使用CSS 的浮動（float）、負(fù)邊距（margin）和 calc() 函數(shù)可以實現(xiàn)兩欄和三欄布局
- 6. [css選擇器](https://blog.csdn.net/m0_56144469/article/details/127853236?spm=1001.2014.3001.5502)
- 7. 隱藏頁面元素方法和區(qū)別
- 8. 實現(xiàn)單行/多行文本溢出的省略樣式
- 9. 畫三角形
- 10. css完成視差滾動效果
1. 盒子模型
盒子模型是CSS技術(shù)中一種重要的思維模型，用于描述HTML頁面元素的布局和尺寸。
1.1 盒子模型的基本組成
- 內(nèi)容（Content）：這是盒子模型的核心部分，即元素的實際內(nèi)容，例如文本、圖片等。內(nèi)容的寬度和高度由width和height屬性定義。
- 內(nèi)邊距（Padding）：內(nèi)邊距是內(nèi)容與其邊框之間的空間。它可以是上、下、左、右四個方向上的，每個方向上的內(nèi)邊距可以單獨(dú)設(shè)置。
- 邊框（Border）：邊框是包裹在內(nèi)邊距和內(nèi)容外面的線條。邊框的粗細(xì)、樣式和顏色可以通過CSS屬性進(jìn)行設(shè)置。
- 外邊距（Margin）：外邊距是邊框與其他元素之間的空間。與內(nèi)邊距類似，外邊距也可以是上、下、左、右四個方向上的，每個方向上的外邊距可以單獨(dú)設(shè)置。
1.2 盒子模型的實際大小
盒子模型在頁面中所占的實際大小（寬高）是內(nèi)容、內(nèi)邊距、邊框和外邊距之和。
1.3 盒子模型的兩種類型
- 標(biāo)準(zhǔn)盒模型（W3C 盒模型）
在標(biāo)準(zhǔn)盒模型中，一個元素的寬度（width）和高度（height）僅包含內(nèi)容區(qū)域（content）的尺寸，而不包括padding（內(nèi)邊距）、border（邊框）和margin（外邊距）。因此，如果你為一個元素設(shè)置了width和height屬性，這些屬性僅定義了內(nèi)容區(qū)域的尺寸。padding和border會額外增加元素的尺寸，而margin則用于控制元素與其他元素之間的間距。
.box { width: 300px; /* 內(nèi)容區(qū)域的寬度 */ height: 200px; /* 內(nèi)容區(qū)域的高度 */ padding: 10px; /* 內(nèi)邊距，會增加元素的總寬度和總高度 */ border: 5px solid black; /* 邊框，也會增加元素的總寬度和總高度 */ margin: 20px; /* 外邊距，不會影響元素的總尺寸，但會影響元素在文檔流中的位置 */
}// 在標(biāo)準(zhǔn)盒模型中，.box元素的總寬度將是 300px（內(nèi)容） + 20px（左側(cè)內(nèi)邊距） + 20px（右側(cè)內(nèi)邊距） + 10px（左側(cè)邊框） + 10px（右側(cè)邊框） = 360px，總高度類似地計算。
- IE盒模型（或稱為怪異盒模型）
在IE盒模型中，元素的width和height屬性包含了內(nèi)容區(qū)域、padding（內(nèi)邊距）和border（邊框）的尺寸，但不包括margin（外邊距）。這意味著，如果你為一個元素設(shè)置了width和height屬性，這些屬性實際上定義了元素的總尺寸（內(nèi)容、內(nèi)邊距和邊框）。
在CSS3中，可以通過 box-sizing 屬性來分別設(shè)置盒模型類型。
box-sizing: content-box; // 標(biāo)準(zhǔn)盒模型；
box-sizing: border-box; // IE盒模型；
1.4 設(shè)置盒子模型
通過CSS的box-sizing屬性可以設(shè)置盒子模型。該屬性有兩個值可選：
- content-box：使用標(biāo)準(zhǔn)盒模型（W3C盒模型）。
- border-box：使用IE盒模型。
1.5 彈性盒子模型
彈性盒子模型不屬于IE盒模型或標(biāo)準(zhǔn)盒模型中的任何一個。實際上，它是一個獨(dú)立的布局模式。是CSS3中引入的一種新的布局模式，旨在提供一種更加有效的方式來對容器中的子元素進(jìn)行排列、對齊和分配空白空間。
彈性盒子模型包括：彈性容器和彈性子元素。為父容器也就是彈性容器設(shè)置屬性display：flex就可以聲明該父容器為一個彈性盒子，它里面的各種元素會自動布局。開啟flex模式后，所有元素都會默認(rèn)橫著擺放，即使是塊級元素也會橫著放。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox 布局示例</title>
<style> .flex-container { /* 設(shè)置為彈性容器 */ display: flex; /* 設(shè)置主軸方向為水平（從左到右） */ flex-direction: row; /* 當(dāng)子元素超出容器時，換行顯示 */ flex-wrap: wrap; /* 子元素在主軸上的對齊方式（居中） */ justify-content: center; /* 子元素在交叉軸上的對齊方式（居中） */ align-items: center; /* 設(shè)置容器寬度，這里為了示例設(shè)為固定值 */ width: 600px; height: 300px; border: 1px solid black; /* 邊框以便觀察容器大小 */ } .flex-item { /* 子元素寬高，這里為了示例設(shè)為固定值 */ width: 100px; height: 100px; /* 設(shè)置背景色以便觀察 */ background-color: lightblue; /* 設(shè)置子元素之間的間隔 */ margin: 10px; /* 可以設(shè)置子元素的排列順序、放大/縮小比例等屬性 */ /* order: 1; */ /* flex-grow: 1; */ /* flex-shrink: 1; */ }
</style>
</head>
<body> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div>
</body>
</html>
2. BFC
在CSS中是一個重要的概念，它指的是塊級格式化上下文。在CSS布局中，元素會根據(jù)其類型（如塊級元素、內(nèi)聯(lián)元素、內(nèi)聯(lián)塊級元素等）進(jìn)行渲染，但有時候我們需要更精細(xì)地控制這些元素的布局和渲染方式，這時候BFC就派上了用場。
2.1 主要用途
- 防止外邊距折疊：在塊級上下文中，相鄰的塊級元素的垂直外邊距會折疊成一個外邊距。但是，如果這兩個元素中的一個或兩個創(chuàng)建了BFC，那么就不會發(fā)生外邊距折疊。
- 清除浮動：當(dāng)容器內(nèi)部有浮動元素時，容器的高度可能會塌陷。通過為容器創(chuàng)建BFC，可以清除浮動，使容器能夠正確地包含其浮動的子元素。(overflow：hidden)
- 避免元素的上下外邊距重疊：在某些情況下，兩個元素的上下外邊距可能會重疊在一起。通過為其中一個元素創(chuàng)建BFC，可以避免這種重疊。
2.2 觸發(fā)BFC的方法
- 根元素（<html>）
- 浮動元素（元素的 float 屬性不為 none）
- 絕對定位元素（元素的 position 屬性為 absolute 或 fixed）
- 彈性盒子元素（display: flex 或 display: inline-flex）
- 網(wǎng)格容器（display: grid 或 display: inline-grid）
- overflow 值不為 visible 的塊級容器
- display 值為 flow-root 的元素
- display 值為 table-cell、table-caption、inline-block、table、inline-table 或 flex 的元素
- position: run-in 的元素（但此值在CSS3中已被廢棄）
- 包含 width/height 屬性（不是 auto）的塊級元素
<div class="container"> <div class="float-child">我是一個浮動的子元素</div>
</div> <style>
.container { /* 觸發(fā)BFC的方法之一 */ overflow: hidden;
} .float-child { float: left; width: 100px; height: 100px; background-color: #f00;
}
</style>
2.2 解決外邊距的塌陷問題（垂直塌陷）
外邊距的塌陷（垂直塌陷）是CSS中一個常見的布局問題，特別是當(dāng)涉及到塊級元素時。當(dāng)一個塊級元素的上外邊距與其父元素的上外邊距或上一個同級塊級元素的下外邊距相遇時，它們可能會合并成一個外邊距，而不是兩者之和。這被稱為外邊距的塌陷或合并。
- 使用BFC
通過為父元素或受影響的元素之一創(chuàng)建BFC，可以防止外邊距的塌陷。常見的觸發(fā)BFC的方法包括：- 為元素設(shè)置overflow屬性（如overflow: auto或overflow: hidden）。
- 為元素設(shè)置display屬性為flex或grid。
- 為元素設(shè)置position屬性為absolute或fixed（但這會改變元素的定位方式）。
- 使用內(nèi)邊距（Padding）代替外邊距（Margin)
- 使用透明邊框
在受影響的元素上添加一個透明的邊框也可以防止外邊距的塌陷。邊框會阻止外邊距的合并，但不會影響元素的可見布局。
.child { border-top: 1px solid transparent; /* 透明邊框 */
}
- 使用偽元素
通過在父元素中添加一個偽元素（如::before或::after），并為其設(shè)置content和display屬性，可以間接地觸發(fā)BFC，從而解決外邊距塌陷問題。 - 避免在空的塊級元素上使用外邊距加粗樣式
空的塊級元素（即沒有內(nèi)容或只有內(nèi)聯(lián)內(nèi)容的元素）上的外邊距更容易導(dǎo)致外邊距的塌陷。確保這些元素具有可見的內(nèi)容或至少有一個非透明的邊框或背景。 - 使用CSS的min-height屬性
為父元素設(shè)置一個min-height值可以確保父元素至少有一個最小的高度，從而防止其高度塌陷到0。
3. 響應(yīng)式布局
響應(yīng)式布局是一種網(wǎng)頁設(shè)計和開發(fā)技術(shù)，旨在使網(wǎng)站能夠自動適應(yīng)不同屏幕尺寸和分辨率的設(shè)備，從而提供一致的用戶體驗。
3.1 原理
- 媒體查詢：這是CSS3中的一個特性，允許開發(fā)者根據(jù)設(shè)備的特性（如寬度、高度、分辨率等）來應(yīng)用不同的CSS樣式。通過媒體查詢，可以為不同的設(shè)備或屏幕尺寸設(shè)置特定的布局和樣式。
- 基本語法：使用@media關(guān)鍵字，后面跟上查詢條件，再定義相應(yīng)的樣式規(guī)則。
- mediatype：表示媒體類型，如all(適用于所有設(shè)備)、screen(主要用于屏幕設(shè)備)、print(主要用于打印預(yù)覽模式)、speech(主要用于語音合成器)。
- mediafeature：表示設(shè)備特性，如min-width（最小寬度）、max-width（最大寬度）、orientation（屏幕方向）等。
@media mediatype and|not|only (media feature) { /* CSS樣式規(guī)則 */
}@media screen and (min-width: 768px) { /* 當(dāng)屏幕寬度大于等于768像素時應(yīng)用的樣式 */ body { background-color: lightblue; }
}
- 流式布局：網(wǎng)頁元素的寬度使用相對單位（如百分比）來定義，而不是固定的像素值。這樣，網(wǎng)頁元素的大小就會根據(jù)屏幕大小進(jìn)行調(diào)整，以適應(yīng)不同屏幕尺寸。
- 設(shè)置容器寬度：通常，流式布局的根容器的寬度會被設(shè)置為相對單位，如width: 100%;，以確保容器能夠充滿整個瀏覽器窗口。
- 使用百分比定義元素寬度：頁面內(nèi)的元素（如導(dǎo)航欄、內(nèi)容區(qū)域、側(cè)邊欄等）的寬度也被設(shè)置為百分比，以便它們能夠根據(jù)容器的大小自動調(diào)整。
- 配合媒體查詢：為了在不同屏幕尺寸下提供更精細(xì)的布局調(diào)整，流式布局通常會與媒體查詢結(jié)合使用。通過媒體查詢，開發(fā)者可以為不同的屏幕尺寸定義不同的樣式規(guī)則，從而實現(xiàn)更靈活的布局效果。
/* 設(shè)置根容器寬度 */
body { width: 100%; margin: 0; padding: 0;
} /* 設(shè)置導(dǎo)航欄和內(nèi)容區(qū)域的寬度 */
.nav { width: 20%; /* 左側(cè)導(dǎo)航欄寬度為容器寬度的20% */ float: left;
} .content { width: 80%; /* 右側(cè)內(nèi)容區(qū)域?qū)挾葹槿萜鲗挾鹊?0% */ float: right;
} /* 使用媒體查詢調(diào)整小屏幕下的布局 */
@media (max-width: 600px) { .nav, .content { width: 100%; /* 當(dāng)屏幕寬度小于600px時，導(dǎo)航欄和內(nèi)容區(qū)域都變?yōu)閱涡酗@示 */ float: none; }
}
// 當(dāng)瀏覽器窗口或屏幕寬度大于600px時，導(dǎo)航欄和內(nèi)容區(qū)域?qū)⒎謩e占據(jù)容器寬度的20%和80%，并水平排列。當(dāng)屏幕寬度小于600px時，媒體查詢將應(yīng)用新的樣式規(guī)則，使導(dǎo)航欄和內(nèi)容區(qū)域都變?yōu)閱涡酗@示，占據(jù)整個容器寬度。
- 彈性盒模型：這是CSS3中的新功能，可以更靈活地控制網(wǎng)頁元素的布局。通過設(shè)置彈性容器和彈性項目的屬性，可以實現(xiàn)根據(jù)屏幕大小進(jìn)行動態(tài)改變布局的效果。
4. 元素水平垂直居中的方法
- 利用定位 + margin:auto
使用定位和 margin: auto; 可以在某些情況下實現(xiàn)元素的水平居中，但這種方法通常用于塊級元素，并且只能實現(xiàn)水平居中，而不是垂直居中。同時，對于水平居中，元素需要有一個已定義的寬度。
.container { position: relative; /* 或 static，因為 margin: auto; 在非定位元素上也能工作 */ width: 100%; /* 容器寬度根據(jù)需要設(shè)置，但通常設(shè)置為100%來占據(jù)整個父元素寬度 */ height: 300px; /* 設(shè)置容器高度以展示效果 */
} .item { display: block; /* 確保是塊級元素 */ width: 200px; /* 設(shè)置元素寬度 */ height: 100px; /* 設(shè)置元素高度，僅用于示例 */ margin: 0 auto; /* 水平居中，上下外邊距為0，左右外邊距自動 */ background-color: #f00; /* 設(shè)置背景色以便觀察 */
} /* HTML 結(jié)構(gòu) */
<div class="container"> <div class="item"></div>
</div>
在上面的示例中，.item 是一個塊級元素，它有一個固定的寬度，并且設(shè)置了 margin: 0 auto; 使其水平居中。但請注意，這種方法只能實現(xiàn)水平居中，而不能實現(xiàn)垂直居中。
如果你想要實現(xiàn)元素的垂直居中，并且不設(shè)置元素的寬高，那么你需要使用其他方法，如 Flexbox、Grid、CSS Transform 或其他技巧。以下是一個使用 Flexbox 實現(xiàn)水平和垂直居中的示例，即使不設(shè)置元素的寬高也能工作：
.container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 300px; /* 設(shè)置容器高度以展示效果 */
} .item { background-color: #f00; /* 設(shè)置背景色以便觀察 */ /* 不需要設(shè)置寬高，Flexbox 會自動處理 */
} /* HTML 結(jié)構(gòu) */
<div class="container"> <div class="item">我是一個塊級元素，沒有設(shè)置寬高，但使用Flexbox實現(xiàn)了水平和垂直居中</div>
</div>
- 利用定位 + margin:負(fù)值
當(dāng)使用定位和 margin 負(fù)值來實現(xiàn)元素居中時，這通常涉及到絕對定位（position: absolute;）和通過調(diào)整元素的 top、left、margin-top 和 margin-left 屬性來實現(xiàn)居中。這種方法尤其適用于已知元素尺寸的情況，因為負(fù)邊距的值通常是元素寬度或高度的一半。
.container { position: relative; /* 相對于此元素進(jìn)行定位 */ height: 300px; /* 設(shè)置容器高度以展示效果 */ width: 100%; /* 根據(jù)需要設(shè)置寬度 */
} .item { position: absolute; /* 絕對定位 */ top: 50%; /* 將元素的頂部邊緣移動到其父元素垂直居中的位置 */ left: 50%; /* 將元素的左邊緣移動到其父元素水平居中的位置 */ width: 200px; /* 設(shè)置元素的寬度 */ height: 100px; /* 設(shè)置元素的高度 */ margin-top: -50px; /* 負(fù)外邊距，值等于元素高度的一半 */ margin-left: -100px; /* 負(fù)外邊距，值等于元素寬度的一半 */ background-color: #f00; /* 設(shè)置背景色以便觀察 */
} /* HTML 結(jié)構(gòu) */
<div class="container"> <div class="item"></div>
</div>
.item 元素被絕對定位到其父元素 .container 的中心。通過將 top 和 left 屬性設(shè)置為 50%，元素的左上角將被放置在父元素的中心。然后，我們使用負(fù)的外邊距（margin-top 和 margin-left）來將元素本身向上和向左移動其寬度和高度的一半，從而實現(xiàn)真正的中心和居中。
- 利用定位 + transform
當(dāng)使用定位和 transform 屬性來實現(xiàn)元素居中時，這是一種非常靈活且常用的方法，因為它不需要知道元素的具體尺寸，并且可以同時實現(xiàn)水平和垂直居中。transform 屬性的 translate 函數(shù)可以用來相對于元素自身進(jìn)行位置移動。
.container { position: relative; /* 或 position: absolute/fixed，取決于你的布局需求 */ height: 300px; /* 設(shè)置容器高度以展示效果 */ width: 100%; /* 根據(jù)需要設(shè)置寬度 */
} .item { position: absolute; /* 絕對定位 */ top: 50%; /* 將元素的頂部邊緣移動到其父元素垂直居中的位置 */ left: 50%; /* 將元素的左邊緣移動到其父元素水平居中的位置 */ transform: translate(-50%, -50%); /* 通過translate函數(shù)移動元素自身的50%寬度和高度 */ /* 無需設(shè)置具體的寬度和高度，可以按需自適應(yīng) */ background-color: #f00; /* 設(shè)置背景色以便觀察 */
} /* HTML 結(jié)構(gòu) */
<div class="container"> <div class="item">我是一個元素，使用定位和transform實現(xiàn)了水平和垂直居中</div>
</div>
.item 元素使用 position: absolute; 相對于其最近的已定位祖先元素（在這個例子中是 .container）進(jìn)行定位。通過設(shè)置 top: 50%; 和 left: 50%;，我們首先將 .item 的左上角定位到其父元素的中心。但是，這只會將元素的左上角移動到中心，而不是整個元素。
- table布局
設(shè)置父元素為 display:table-cell ，子元素設(shè)置為 display:inline-block 。
利用 vertical 和 text-align 可以讓所有的行內(nèi)塊級元素水平垂直居中
<div class="table-cell"> <div class="inline-block">內(nèi)容1</div> <div class="inline-block">內(nèi)容2</div>
</div>
<style>.table-cell { display: table-cell; vertical-align: middle; /* 垂直居中（對table-cell有效）*/ text-align: center; /* 水平居中（但僅對inline或inline-block元素中的文本和inline元素有效）*/ /* 還需要設(shè)置寬度和高度 */ width: 300px; height: 200px; border: 1px solid black; /* 可視化邊界 */ } .inline-block { display: inline-block; /* 對于inline-block元素，vertical-align仍然有效，但僅當(dāng)它們是行內(nèi)元素或inline-block的直接子元素時 */ vertical-align: middle; /* 如果需要確保內(nèi)容垂直對齊，可以添加 */ margin: 0 10px; /* 添加一些間距以便看到每個塊 */ }
</style>
- flex布局
flex布局可以非常簡單的實現(xiàn)垂直水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Example</title>
<style> .container { display: flex; flex-direction: row; justify-content: space-around; align-items: center; height: 200px; border: 1px solid black; } .item { background-color: lightblue; padding: 10px; margin: 5px; text-align: center; }
</style>
</head>
<body> <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div>
</div> </body>
</html>
- grid布局
Grid 布局也提供了水平和垂直居中的功能。
.container { display: grid; place-items: center; /* 簡寫屬性，相當(dāng)于 justify-items: center; 和 align-items: center; */ height: 100vh; /* 如果需要容器占滿全屏，可以設(shè)置為視口高度 */
} .item { /* 不需要設(shè)置寬高，Grid 會自動處理 */
}
- 不知道元素寬高大小仍能實現(xiàn)水平垂直居中的方法有：
- 利用定位 + margin:auto
- 利用定位 + transform
- flex布局
- grid布局
- 根據(jù)元素標(biāo)簽的性質(zhì)分為：內(nèi)聯(lián)元素居中布局、塊級元素居中布局
- 內(nèi)聯(lián)元素居中布局
- 水平居中
- 文本內(nèi)的內(nèi)聯(lián)元素：text-align: center;
- 使用flexbox：display: flex; justify-content: center; /* 水平居中 / align-items: center; / 垂直居中（如果容器是單行）*/
- 使用grid：display: grid; justify-items: center; /* 水平居中 / align-items: center; / 垂直居中 */
- 垂直居中
- 行高 (line-height)：你可以通過設(shè)置父元素的line-height等于其height來使文本垂直居中。
- 垂直對齊屬性 (vertical-align)：雖然通常用于表格單元格或行內(nèi)元素（如、等），但它并不總是能提供完美的垂直居中效果，特別是當(dāng)它與非表格元素一起使用時。然而，對于行內(nèi)元素（如圖片）來說，它仍然是一個選項。vertical-align: middle;
- 使用偽元素 (::before 或 ::after)
- 水平居中
- 塊級元素居中布局
- 水平居中
- 使用margin: auto：塊級元素可以通過設(shè)置左右外邊距為auto來水平居中，但前提是元素有一個指定的寬度。
- 使用flexbox： display: flex; justify-content: center; /* 水平居中 */
- 垂直居中
- 使用flexbox
- 使用grid
- 使用定位（position）： position: absolute; top: 50%; transform: translateY(-50%); /* 垂直居中 / left: 50%; transform: translateX(-50%); / 水平居中 */
- 水平居中
- 內(nèi)聯(lián)元素居中布局
5. 實現(xiàn)兩欄布局右側(cè)自適應(yīng)？三欄布局中間自適應(yīng)？
5.1 常用實現(xiàn)兩欄布局右側(cè)自適應(yīng)的方法
在兩欄布局中，通常我們想要左側(cè)欄有一個固定的寬度，而右側(cè)欄則自適應(yīng)剩余的寬度。這可以通過多種方式實現(xiàn)，但使用 CSS 的 Flexbox 或 Grid 布局系統(tǒng)可以使這個過程變得更加簡單。
.container { display: flex;
} .left-column { width: 200px; /* 左側(cè)欄固定寬度 */ background-color: #f0f0f0;
} .right-column { flex-grow: 1; /* 右側(cè)欄自適應(yīng)剩余空間 */ background-color: #ddd;
} /* HTML 結(jié)構(gòu) */
<div class="container"> <div class="left-column">左側(cè)內(nèi)容</div> <div class="right-column">右側(cè)自適應(yīng)內(nèi)容</div>
</div>
5.2 常用實現(xiàn)三欄布局中間自適應(yīng)的方法
在三欄布局中，左側(cè)和右側(cè)欄通常有固定的寬度，而中間欄則自適應(yīng)剩余的寬度。這同樣可以使用 Flexbox 或 Grid 布局來實現(xiàn)。
.container { display: flex;
} .left-column, .right-column { width: 150px; /* 左右兩側(cè)固定寬度 */ background-color: #f0f0f0;
} .center-column { flex-grow: 1; /* 中間欄自適應(yīng)剩余空間 */ background-color: #ddd;
} /* HTML 結(jié)構(gòu) */
<div class="container"> <div class="left-column">左側(cè)內(nèi)容</div> <div class="center-column">中間自適應(yīng)內(nèi)容</div> <div class="right-column">右側(cè)內(nèi)容</div>
</div>
5.3 可使用CSS 的浮動（float）、負(fù)邊距（margin）和 calc() 函數(shù)可以實現(xiàn)兩欄和三欄布局
- 浮動
// 兩欄
<div class="container"> <div class="left-column">左側(cè)內(nèi)容</div> <div class="right-column">右側(cè)自適應(yīng)內(nèi)容</div>
</div>
// 三欄
<div class="container"> <div class="left-column">左側(cè)內(nèi)容</div> <div class="center-column">中間自適應(yīng)內(nèi)容</div> <div class="right-column">右側(cè)內(nèi)容</div>
</div>
.container { overflow: hidden; /* 清除浮動影響 */
} .left-column { float: left; width: 200px; /* 其他樣式 */
}
// 兩欄
.right-column { margin-left: 200px; /* 左側(cè)欄寬度 */ /* 其他樣式 */
}.center-column { margin-left: 150px; /* 左側(cè)欄寬度 */ margin-right: 150px; /* 右側(cè)欄寬度 */ /* 其他樣式 */
}
// 三欄
.right-column { float: right; /* 右側(cè)欄浮動到右側(cè) */ /* 其他樣式 */
}
- 負(fù)邊距
- calc() 函數(shù)
// 三欄
.container { display: flex; /* 或者其他布局方式，保證子元素不會換行 */
} .left-column, .right-column { width: 150px; /* 其他樣式 */
} .center-column { width: calc(100% - 300px); /* 100% 減去兩側(cè)欄寬度 */ /* 其他樣式 */
}
6. css選擇器
7. 隱藏頁面元素方法和區(qū)別
- display屬性
- display: none; 可以將元素完全從頁面布局中移除，使其在頁面上徹底消失。
- visibility屬性
- visibility: hidden; 可以使元素不可見，但仍然占據(jù)頁面上的空間。
- opacity屬性
- opacity:0;設(shè)置元素的透明度為0可以使元素完全透明，看起來像是隱藏了。
- position:absolute將元素移出可視區(qū)域
- clip-path
- 通過裁剪的形式，使用clip屬性來限制元素的顯示區(qū)域
- hidden屬性
- 在HTML元素中添加hidden屬性來隱藏元素。
8. 實現(xiàn)單行/多行文本溢出的省略樣式
- 單行文本溢出省略
.ellipsis-single-line { /* 強(qiáng)制文本在一行內(nèi)顯示 */ white-space: nowrap; /* 隱藏溢出的文本 */ overflow: hidden; /* 當(dāng)文本溢出時，顯示省略號 (...) */ text-overflow: ellipsis;
}<div class="ellipsis-single-line">這是一段很長的文本，當(dāng)超出容器寬度時，將會顯示省略號...</div>
- 多行文本溢出省略
ellipsis-multi-line { /* 設(shè)置最大行數(shù) */ display: -webkit-box; -webkit-line-clamp: 3; /* 這里設(shè)置3行，你可以根據(jù)需要調(diào)整 */ -webkit-box-orient: vertical; overflow: hidden;
}
9. 畫三角形
創(chuàng)建了一個div元素，并通過設(shè)置邊框來繪制一個紅色的等邊三角形。
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>繪制三角形</title> <style> .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } </style>
</head>
<body> <div class="triangle"></div>
</body>
</html>
倒三角形
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>倒三角形</title> <style> .triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; } </style>
</head>
<body> <div class="triangle-down"></div>
</body>
</html>
向左傾斜的三角形
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>向左傾斜的三角形</title> <style> .triangle-left { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; transform: rotate(-90deg); /* 旋轉(zhuǎn)角度可以根據(jù)需要調(diào)整 */ transform-origin: bottom; /* 旋轉(zhuǎn)的基點(diǎn)設(shè)置為底部 */ margin-left: 50px; /* 根據(jù)需要調(diào)整位置 */ } </style>
</head>
<body> <div class="triangle-left"></div>
</body>
</html>
向右傾斜的三角形
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>向右傾斜的三角形</title> <style> .triangle-right { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; transform: rotate(90deg); /* 旋轉(zhuǎn)角度可以根據(jù)需要調(diào)整 */ transform-origin: bottom; /* 旋轉(zhuǎn)的基點(diǎn)設(shè)置為底部 */ margin-left: -25px; /* 根據(jù)需要調(diào)整位置，使三角形居中 */ } </style>
</head>
<body> <div class="triangle-right"></div>
</body>
</html>
10. css完成視差滾動效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parallax Scrolling Example</title>
<style> html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; } body { /* 3D 視圖效果 */ perspective: 1px; transform-style: preserve-3d; overflow-y: auto; /* 允許垂直滾動 */ overflow-x: hidden; } #app { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; height: 100vh; /* 使用視口高度的100% */ overflow-y: auto; /* 如果需要的話，可以允許內(nèi)部滾動 */ } .parallax-layer { width: 100%; /* 占據(jù)全屏寬度 */ height: 200px; /* 設(shè)置每層的高度 */ margin-bottom: 50px; /* 你可以根據(jù)需要調(diào)整這個值 */ text-align: center; line-height: 200px; /* 使文本垂直居中 */ font-size: 2em; color: white; } .one { background: #409eff; transform: translateZ(0); } .two { background: #67c23a; transform: translateZ(-1px) scale(1.1); /* 增加一點(diǎn)縮放效果 */ } .three { background: #e6a23c; transform: translateZ(-2px) scale(1.2); /* 更多的縮放效果 */ }
</style>
</head>
<body> <div id="app"> <div class="parallax-layer one">one</div> <div class="parallax-layer two">two</div> <div class="parallax-layer three">three</div> </div>
</body>
</html>
CSS真題合集（二）