當前位置：首頁 > news >正文

調查問卷在哪個網站做互換鏈接的方法

news 2025/7/12 17:16:29

調查問卷在哪個網站做,互換鏈接的方法,電商類網站有哪些,magento網站制作CSS真題合集（一） 1. 盒子模型1.1 盒子模型的基本組成1.2 盒子模型的實際大小1.3 盒子模型的兩種類型1.4 設置盒子模型1.5 彈性盒子模型 2. BFC2.1 主要用途2.2 觸發(fā)BFC的方法2.2 解決外邊距的塌陷問題（垂直塌陷） 3. 響應式布局3.1…

CSS真題合集（一）

- 1. 盒子模型
- - 1.1 盒子模型的基本組成
  - 1.2 盒子模型的實際大小
  - 1.3 盒子模型的兩種類型
  - 1.4 設置盒子模型
  - 1.5 彈性盒子模型
- 2. BFC
- - 2.1 主要用途
  - 2.2 觸發(fā)BFC的方法
  - 2.2 解決外邊距的塌陷問題（垂直塌陷）
- 3. 響應式布局
- - 3.1 原理
- 4. 元素水平垂直居中的方法
- 5. 實現兩欄布局右側自適應？三欄布局中間自適應？
- - 5.1 常用實現兩欄布局右側自適應的方法
  - 5.2 常用實現三欄布局中間自適應的方法
  - 5.3 可使用CSS 的浮動（float）、負邊距（margin）和 calc() 函數可以實現兩欄和三欄布局
- 6. [css選擇器](https://blog.csdn.net/m0_56144469/article/details/127853236?spm=1001.2014.3001.5502)
- 7. 隱藏頁面元素方法和區(qū)別
- 8. 實現單行/多行文本溢出的省略樣式
- 9. 畫三角形
- 10. css完成視差滾動效果

1. 盒子模型

盒子模型是CSS技術中一種重要的思維模型，用于描述HTML頁面元素的布局和尺寸。

1.1 盒子模型的基本組成

內容（Content）：這是盒子模型的核心部分，即元素的實際內容，例如文本、圖片等。內容的寬度和高度由width和height屬性定義。
內邊距（Padding）：內邊距是內容與其邊框之間的空間。它可以是上、下、左、右四個方向上的，每個方向上的內邊距可以單獨設置。
邊框（Border）：邊框是包裹在內邊距和內容外面的線條。邊框的粗細、樣式和顏色可以通過CSS屬性進行設置。
外邊距（Margin）：外邊距是邊框與其他元素之間的空間。與內邊距類似，外邊距也可以是上、下、左、右四個方向上的，每個方向上的外邊距可以單獨設置。

1.2 盒子模型的實際大小

盒子模型在頁面中所占的實際大小（寬高）是內容、內邊距、邊框和外邊距之和。

1.3 盒子模型的兩種類型

標準盒模型（W3C 盒模型）
在標準盒模型中，一個元素的寬度（width）和高度（height）僅包含內容區(qū)域（content）的尺寸，而不包括padding（內邊距）、border（邊框）和margin（外邊距）。因此，如果你為一個元素設置了width和height屬性，這些屬性僅定義了內容區(qū)域的尺寸。padding和border會額外增加元素的尺寸，而margin則用于控制元素與其他元素之間的間距。

.box {  width: 300px; /* 內容區(qū)域的寬度 */  height: 200px; /* 內容區(qū)域的高度 */  padding: 10px; /* 內邊距，會增加元素的總寬度和總高度 */  border: 5px solid black; /* 邊框，也會增加元素的總寬度和總高度 */  margin: 20px; /* 外邊距，不會影響元素的總尺寸，但會影響元素在文檔流中的位置 */  
}// 在標準盒模型中，.box元素的總寬度將是 300px（內容） + 20px（左側內邊距） + 20px（右側內邊距） + 10px（左側邊框） + 10px（右側邊框） = 360px，總高度類似地計算。

IE盒模型（或稱為怪異盒模型）
在IE盒模型中，元素的width和height屬性包含了內容區(qū)域、padding（內邊距）和border（邊框）的尺寸，但不包括margin（外邊距）。這意味著，如果你為一個元素設置了width和height屬性，這些屬性實際上定義了元素的總尺寸（內容、內邊距和邊框）。
在CSS3中，可以通過 box-sizing 屬性來分別設置盒模型類型。
box-sizing: content-box; // 標準盒模型；
box-sizing: border-box; // IE盒模型；

1.4 設置盒子模型

通過CSS的box-sizing屬性可以設置盒子模型。該屬性有兩個值可選：

content-box：使用標準盒模型（W3C盒模型）。
border-box：使用IE盒模型。

1.5 彈性盒子模型

彈性盒子模型不屬于IE盒模型或標準盒模型中的任何一個。實際上，它是一個獨立的布局模式。是CSS3中引入的一種新的布局模式，旨在提供一種更加有效的方式來對容器中的子元素進行排列、對齊和分配空白空間。

彈性盒子模型包括：彈性容器和彈性子元素。為父容器也就是彈性容器設置屬性display：flex就可以聲明該父容器為一個彈性盒子，它里面的各種元素會自動布局。開啟flex模式后，所有元素都會默認橫著擺放，即使是塊級元素也會橫著放。

<!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 {  /* 設置為彈性容器 */  display: flex;  /* 設置主軸方向為水平（從左到右） */  flex-direction: row;  /* 當子元素超出容器時，換行顯示 */  flex-wrap: wrap;  /* 子元素在主軸上的對齊方式（居中） */  justify-content: center;  /* 子元素在交叉軸上的對齊方式（居中） */  align-items: center;  /* 設置容器寬度，這里為了示例設為固定值 */  width: 600px;  height: 300px;  border: 1px solid black; /* 邊框以便觀察容器大小 */  }  .flex-item {  /* 子元素寬高，這里為了示例設為固定值 */  width: 100px;  height: 100px;  /* 設置背景色以便觀察 */  background-color: lightblue;  /* 設置子元素之間的間隔 */  margin: 10px;  /* 可以設置子元素的排列順序、放大/縮小比例等屬性 */  /* 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布局中，元素會根據其類型（如塊級元素、內聯元素、內聯塊級元素等）進行渲染，但有時候我們需要更精細地控制這些元素的布局和渲染方式，這時候BFC就派上了用場。

2.1 主要用途

防止外邊距折疊：在塊級上下文中，相鄰的塊級元素的垂直外邊距會折疊成一個外邊距。但是，如果這兩個元素中的一個或兩個創(chuàng)建了BFC，那么就不會發(fā)生外邊距折疊。
清除浮動：當容器內部有浮動元素時，容器的高度可能會塌陷。通過為容器創(chuàng)建BFC，可以清除浮動，使容器能夠正確地包含其浮動的子元素。(overflow：hidden)
避免元素的上下外邊距重疊：在某些情況下，兩個元素的上下外邊距可能會重疊在一起。通過為其中一個元素創(chuàng)建BFC，可以避免這種重疊。

2.2 觸發(fā)BFC的方法

- 根元素（<html>）
- 浮動元素（元素的 float 屬性不為 none）
- 絕對定位元素（元素的 position 屬性為 absolute 或 fixed）
- 彈性盒子元素（display: flex 或 display: inline-flex）
- 網格容器（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中一個常見的布局問題，特別是當涉及到塊級元素時。當一個塊級元素的上外邊距與其父元素的上外邊距或上一個同級塊級元素的下外邊距相遇時，它們可能會合并成一個外邊距，而不是兩者之和。這被稱為外邊距的塌陷或合并。

使用BFC
通過為父元素或受影響的元素之一創(chuàng)建BFC，可以防止外邊距的塌陷。常見的觸發(fā)BFC的方法包括：
- 為元素設置overflow屬性（如overflow: auto或overflow: hidden）。
- 為元素設置display屬性為flex或grid。
- 為元素設置position屬性為absolute或fixed（但這會改變元素的定位方式）。
使用內邊距（Padding）代替外邊距（Margin)
使用透明邊框
在受影響的元素上添加一個透明的邊框也可以防止外邊距的塌陷。邊框會阻止外邊距的合并，但不會影響元素的可見布局。

.child {  border-top: 1px solid transparent; /* 透明邊框 */  
}

使用偽元素
通過在父元素中添加一個偽元素（如::before或::after），并為其設置content和display屬性，可以間接地觸發(fā)BFC，從而解決外邊距塌陷問題。
避免在空的塊級元素上使用外邊距加粗樣式
空的塊級元素（即沒有內容或只有內聯內容的元素）上的外邊距更容易導致外邊距的塌陷。確保這些元素具有可見的內容或至少有一個非透明的邊框或背景。
使用CSS的min-height屬性
為父元素設置一個min-height值可以確保父元素至少有一個最小的高度，從而防止其高度塌陷到0。

3. 響應式布局

響應式布局是一種網頁設計和開發(fā)技術，旨在使網站能夠自動適應不同屏幕尺寸和分辨率的設備，從而提供一致的用戶體驗。

3.1 原理

媒體查詢：這是CSS3中的一個特性，允許開發(fā)者根據設備的特性（如寬度、高度、分辨率等）來應用不同的CSS樣式。通過媒體查詢，可以為不同的設備或屏幕尺寸設置特定的布局和樣式。
- 基本語法：使用@media關鍵字，后面跟上查詢條件，再定義相應的樣式規(guī)則。
- mediatype：表示媒體類型，如all(適用于所有設備)、screen(主要用于屏幕設備)、print(主要用于打印預覽模式)、speech(主要用于語音合成器)。
- mediafeature：表示設備特性，如min-width（最小寬度）、max-width（最大寬度）、orientation（屏幕方向）等。

@media mediatype and|not|only (media feature) {  /* CSS樣式規(guī)則 */  
}@media screen and (min-width: 768px) {  /* 當屏幕寬度大于等于768像素時應用的樣式 */  body {  background-color: lightblue;  }  
}

流式布局：網頁元素的寬度使用相對單位（如百分比）來定義，而不是固定的像素值。這樣，網頁元素的大小就會根據屏幕大小進行調整，以適應不同屏幕尺寸。
- 設置容器寬度：通常，流式布局的根容器的寬度會被設置為相對單位，如width: 100%;，以確保容器能夠充滿整個瀏覽器窗口。
- 使用百分比定義元素寬度：頁面內的元素（如導航欄、內容區(qū)域、側邊欄等）的寬度也被設置為百分比，以便它們能夠根據容器的大小自動調整。
- 配合媒體查詢：為了在不同屏幕尺寸下提供更精細的布局調整，流式布局通常會與媒體查詢結合使用。通過媒體查詢，開發(fā)者可以為不同的屏幕尺寸定義不同的樣式規(guī)則，從而實現更靈活的布局效果。

/* 設置根容器寬度 */  
body {  width: 100%;  margin: 0;  padding: 0;  
}  /* 設置導航欄和內容區(qū)域的寬度 */  
.nav {  width: 20%; /* 左側導航欄寬度為容器寬度的20% */  float: left;  
}  .content {  width: 80%; /* 右側內容區(qū)域寬度為容器寬度的80% */  float: right;  
}  /* 使用媒體查詢調整小屏幕下的布局 */  
@media (max-width: 600px) {  .nav, .content {  width: 100%; /* 當屏幕寬度小于600px時，導航欄和內容區(qū)域都變?yōu)閱涡酗@示 */  float: none;  }  
}
// 當瀏覽器窗口或屏幕寬度大于600px時，導航欄和內容區(qū)域將分別占據容器寬度的20%和80%，并水平排列。當屏幕寬度小于600px時，媒體查詢將應用新的樣式規(guī)則，使導航欄和內容區(qū)域都變?yōu)閱涡酗@示，占據整個容器寬度。

彈性盒模型：這是CSS3中的新功能，可以更靈活地控制網頁元素的布局。通過設置彈性容器和彈性項目的屬性，可以實現根據屏幕大小進行動態(tài)改變布局的效果。

4. 元素水平垂直居中的方法

利用定位 + margin:auto
使用定位和 margin: auto; 可以在某些情況下實現元素的水平居中，但這種方法通常用于塊級元素，并且只能實現水平居中，而不是垂直居中。同時，對于水平居中，元素需要有一個已定義的寬度。

.container {  position: relative; /* 或 static，因為 margin: auto; 在非定位元素上也能工作 */  width: 100%; /* 容器寬度根據需要設置，但通常設置為100%來占據整個父元素寬度 */  height: 300px; /* 設置容器高度以展示效果 */  
}  .item {  display: block; /* 確保是塊級元素 */  width: 200px; /* 設置元素寬度 */  height: 100px; /* 設置元素高度，僅用于示例 */  margin: 0 auto; /* 水平居中，上下外邊距為0，左右外邊距自動 */  background-color: #f00; /* 設置背景色以便觀察 */  
}  /* HTML 結構 */  
<div class="container">  <div class="item"></div>  
</div>

在上面的示例中，.item 是一個塊級元素，它有一個固定的寬度，并且設置了 margin: 0 auto; 使其水平居中。但請注意，這種方法只能實現水平居中，而不能實現垂直居中。

如果你想要實現元素的垂直居中，并且不設置元素的寬高，那么你需要使用其他方法，如 Flexbox、Grid、CSS Transform 或其他技巧。以下是一個使用 Flexbox 實現水平和垂直居中的示例，即使不設置元素的寬高也能工作：

.container {  display: flex;  justify-content: center; /* 水平居中 */  align-items: center; /* 垂直居中 */  height: 300px; /* 設置容器高度以展示效果 */  
}  .item {  background-color: #f00; /* 設置背景色以便觀察 */  /* 不需要設置寬高，Flexbox 會自動處理 */  
}  /* HTML 結構 */  
<div class="container">  <div class="item">我是一個塊級元素，沒有設置寬高，但使用Flexbox實現了水平和垂直居中</div>  
</div>

利用定位 + margin:負值
當使用定位和 margin 負值來實現元素居中時，這通常涉及到絕對定位（position: absolute;）和通過調整元素的 top、left、margin-top 和 margin-left 屬性來實現居中。這種方法尤其適用于已知元素尺寸的情況，因為負邊距的值通常是元素寬度或高度的一半。

.container {  position: relative; /* 相對于此元素進行定位 */  height: 300px; /* 設置容器高度以展示效果 */  width: 100%; /* 根據需要設置寬度 */  
}  .item {  position: absolute; /* 絕對定位 */  top: 50%; /* 將元素的頂部邊緣移動到其父元素垂直居中的位置 */  left: 50%; /* 將元素的左邊緣移動到其父元素水平居中的位置 */  width: 200px; /* 設置元素的寬度 */  height: 100px; /* 設置元素的高度 */  margin-top: -50px; /* 負外邊距，值等于元素高度的一半 */  margin-left: -100px; /* 負外邊距，值等于元素寬度的一半 */  background-color: #f00; /* 設置背景色以便觀察 */  
}  /* HTML 結構 */  
<div class="container">  <div class="item"></div>  
</div>

.item 元素被絕對定位到其父元素 .container 的中心。通過將 top 和 left 屬性設置為 50%，元素的左上角將被放置在父元素的中心。然后，我們使用負的外邊距（margin-top 和 margin-left）來將元素本身向上和向左移動其寬度和高度的一半，從而實現真正的中心和居中。

利用定位 + transform
當使用定位和 transform 屬性來實現元素居中時，這是一種非常靈活且常用的方法，因為它不需要知道元素的具體尺寸，并且可以同時實現水平和垂直居中。transform 屬性的 translate 函數可以用來相對于元素自身進行位置移動。

.container {  position: relative; /* 或 position: absolute/fixed，取決于你的布局需求 */  height: 300px; /* 設置容器高度以展示效果 */  width: 100%; /* 根據需要設置寬度 */  
}  .item {  position: absolute; /* 絕對定位 */  top: 50%; /* 將元素的頂部邊緣移動到其父元素垂直居中的位置 */  left: 50%; /* 將元素的左邊緣移動到其父元素水平居中的位置 */  transform: translate(-50%, -50%); /* 通過translate函數移動元素自身的50%寬度和高度 */  /* 無需設置具體的寬度和高度，可以按需自適應 */  background-color: #f00; /* 設置背景色以便觀察 */  
}  /* HTML 結構 */  
<div class="container">  <div class="item">我是一個元素，使用定位和transform實現了水平和垂直居中</div>  
</div>

.item 元素使用 position: absolute; 相對于其最近的已定位祖先元素（在這個例子中是 .container）進行定位。通過設置 top: 50%; 和 left: 50%;，我們首先將 .item 的左上角定位到其父元素的中心。但是，這只會將元素的左上角移動到中心，而不是整個元素。

table布局
設置父元素為 display:table-cell ，子元素設置為 display:inline-block 。
利用 vertical 和 text-align 可以讓所有的行內塊級元素水平垂直居中

<div class="table-cell">  <div class="inline-block">內容1</div>  <div class="inline-block">內容2</div>  
</div>
<style>.table-cell {  display: table-cell;  vertical-align: middle; /* 垂直居中（對table-cell有效）*/  text-align: center; /* 水平居中（但僅對inline或inline-block元素中的文本和inline元素有效）*/  /* 還需要設置寬度和高度 */  width: 300px;  height: 200px;  border: 1px solid black; /* 可視化邊界 */  }  .inline-block {  display: inline-block;  /* 對于inline-block元素，vertical-align仍然有效，但僅當它們是行內元素或inline-block的直接子元素時 */  vertical-align: middle; /* 如果需要確保內容垂直對齊，可以添加 */  margin: 0 10px; /* 添加一些間距以便看到每個塊 */  }
</style>

flex布局
flex布局可以非常簡單的實現垂直水平居中

<!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; /* 簡寫屬性，相當于 justify-items: center; 和 align-items: center; */  height: 100vh;      /* 如果需要容器占滿全屏，可以設置為視口高度 */  
}  .item {  /* 不需要設置寬高，Grid 會自動處理 */  
}

不知道元素寬高大小仍能實現水平垂直居中的方法有：
- 利用定位 + margin:auto
- 利用定位 + transform
- flex布局
- grid布局
根據元素標簽的性質分為：內聯元素居中布局、塊級元素居中布局
- 內聯元素居中布局
  - 水平居中
    - 文本內的內聯元素：text-align: center;
    - 使用flexbox：display: flex; justify-content: center; /* 水平居中 / align-items: center; / 垂直居中（如果容器是單行）*/
    - 使用grid：display: grid; justify-items: center; /* 水平居中 / align-items: center; / 垂直居中 */
  - 垂直居中
    - 行高 (line-height)：你可以通過設置父元素的line-height等于其height來使文本垂直居中。
    - 垂直對齊屬性 (vertical-align)：雖然通常用于表格單元格或行內元素（如、等），但它并不總是能提供完美的垂直居中效果，特別是當它與非表格元素一起使用時。然而，對于行內元素（如圖片）來說，它仍然是一個選項。vertical-align: middle;
    - 使用偽元素 (::before 或 ::after)
- 塊級元素居中布局
  - 水平居中
    - 使用margin: auto：塊級元素可以通過設置左右外邊距為auto來水平居中，但前提是元素有一個指定的寬度。
    - 使用flexbox： display: flex; justify-content: center; /* 水平居中 */
  - 垂直居中
    - 使用flexbox
    - 使用grid
    - 使用定位（position）： position: absolute; top: 50%; transform: translateY(-50%); /* 垂直居中 / left: 50%; transform: translateX(-50%); / 水平居中 */

5. 實現兩欄布局右側自適應？三欄布局中間自適應？

5.1 常用實現兩欄布局右側自適應的方法

在兩欄布局中，通常我們想要左側欄有一個固定的寬度，而右側欄則自適應剩余的寬度。這可以通過多種方式實現，但使用 CSS 的 Flexbox 或 Grid 布局系統(tǒng)可以使這個過程變得更加簡單。

.container {  display: flex;  
}  .left-column {  width: 200px; /* 左側欄固定寬度 */  background-color: #f0f0f0;  
}  .right-column {  flex-grow: 1; /* 右側欄自適應剩余空間 */  background-color: #ddd;  
}  /* HTML 結構 */  
<div class="container">  <div class="left-column">左側內容</div>  <div class="right-column">右側自適應內容</div>  
</div>

在這里插入圖片描述

5.2 常用實現三欄布局中間自適應的方法

在三欄布局中，左側和右側欄通常有固定的寬度，而中間欄則自適應剩余的寬度。這同樣可以使用 Flexbox 或 Grid 布局來實現。

.container {  display: flex;  
}  .left-column, .right-column {  width: 150px; /* 左右兩側固定寬度 */  background-color: #f0f0f0;  
}  .center-column {  flex-grow: 1; /* 中間欄自適應剩余空間 */  background-color: #ddd;  
}  /* HTML 結構 */  
<div class="container">  <div class="left-column">左側內容</div>  <div class="center-column">中間自適應內容</div>  <div class="right-column">右側內容</div>  
</div>

在這里插入圖片描述

5.3 可使用CSS 的浮動（float）、負邊距（margin）和 calc() 函數可以實現兩欄和三欄布局

浮動

// 兩欄
<div class="container">  <div class="left-column">左側內容</div>  <div class="right-column">右側自適應內容</div>  
</div>
// 三欄
<div class="container">  <div class="left-column">左側內容</div>  <div class="center-column">中間自適應內容</div>  <div class="right-column">右側內容</div>  
</div>

.container {  overflow: hidden; /* 清除浮動影響 */  
}  .left-column {  float: left;  width: 200px;  /* 其他樣式 */  
}  
// 兩欄
.right-column {  margin-left: 200px; /* 左側欄寬度 */  /* 其他樣式 */  
}.center-column {  margin-left: 150px; /* 左側欄寬度 */  margin-right: 150px; /* 右側欄寬度 */  /* 其他樣式 */  
}  
// 三欄
.right-column {  float: right; /* 右側欄浮動到右側 */  /* 其他樣式 */  
}

負邊距
calc() 函數

// 三欄
.container {  display: flex; /* 或者其他布局方式，保證子元素不會換行 */  
}  .left-column, .right-column {  width: 150px;  /* 其他樣式 */  
}  .center-column {  width: calc(100% - 300px); /* 100% 減去兩側欄寬度 */  /* 其他樣式 */  
}

6. css選擇器

7. 隱藏頁面元素方法和區(qū)別

display屬性
- display: none; 可以將元素完全從頁面布局中移除，使其在頁面上徹底消失。
visibility屬性
- visibility: hidden; 可以使元素不可見，但仍然占據頁面上的空間。
opacity屬性
- opacity:0;設置元素的透明度為0可以使元素完全透明，看起來像是隱藏了。
position:absolute將元素移出可視區(qū)域
clip-path
- 通過裁剪的形式，使用clip屬性來限制元素的顯示區(qū)域
hidden屬性
- 在HTML元素中添加hidden屬性來隱藏元素。

8. 實現單行/多行文本溢出的省略樣式

單行文本溢出省略

.ellipsis-single-line {  /* 強制文本在一行內顯示 */  white-space: nowrap;  /* 隱藏溢出的文本 */  overflow: hidden;  /* 當文本溢出時，顯示省略號 (...) */  text-overflow: ellipsis;  
}<div class="ellipsis-single-line">這是一段很長的文本，當超出容器寬度時，將會顯示省略號...</div>

多行文本溢出省略

ellipsis-multi-line {  /* 設置最大行數 */  display: -webkit-box;  -webkit-line-clamp: 3; /* 這里設置3行，你可以根據需要調整 */  -webkit-box-orient: vertical;  overflow: hidden;  
}

9. 畫三角形

創(chuàng)建了一個div元素，并通過設置邊框來繪制一個紅色的等邊三角形。

<!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); /* 旋轉角度可以根據需要調整 */  transform-origin: bottom; /* 旋轉的基點設置為底部 */  margin-left: 50px; /* 根據需要調整位置 */  }  </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); /* 旋轉角度可以根據需要調整 */  transform-origin: bottom; /* 旋轉的基點設置為底部 */  margin-left: -25px; /* 根據需要調整位置，使三角形居中 */  }  </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; /* 如果需要的話，可以允許內部滾動 */  }  .parallax-layer {  width: 100%; /* 占據全屏寬度 */  height: 200px; /* 設置每層的高度 */  margin-bottom: 50px; /* 你可以根據需要調整這個值 */  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); /* 增加一點縮放效果 */  }  .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>