Web第二次方向考核復盤

一、簡答題

1. （1）為什么要清除浮動？

????????答：當子元素浮動時會脫離文檔流，父元素無法正確計算子元素高度導致高度、邊框異常顯示。同時會影響后續文檔流布局。

<style>.box1 {border: solid 2px #000;}.child1 {float: left;height: 200px;width: 200px;background-color: aqua;}.child2 {float: left;height: 200px;width: 200px;background-color: blue;}.box2 {height: 200px;width: 300px;background-color: pink;}</style><body><div class="box1">box1<div class="child1">child1</div><div class="child2">child2</div></div><div class="box2">box2</div>
</body>

1.（2）清除浮動的方法有哪些？?

額外標簽法，給父盒子添加標簽：<div class="clear"></div>>，標簽定義為
```
.clear{
clear:both;
}
```
該標簽必須是塊級元素。清除后，父盒子可以根據子盒子的高度調整高度。
父級添加-overflow

overflow：hidden/auto/scroll;

注意：無法清除溢出部分

after偽元素-額外標簽法升級版

.clearfix:after{content:"";display: block;height:0;clear:both;visibility:hidden;}
.clearfix{ /* IE6、7 專有 */   *zoom：1;}

再給父元素增加類型clearfix即可

雙偽元素

.clearfix:before,.clearfix:after {content:"";display:table;}
.clearfix:after {clear:both;}
.clearfix {*zoom:1;}

再給父元素增加類型clearfix即可

2.怎么實現左邊寬度固定右邊寬度自適應的布局？

傳統布局：左固定高度+右margin（不推薦）
flex布局：給父盒子添加display:flex;屬性，為其左邊的子元素設置好固定寬度，為右邊子元素設置flex:1屬性

grid布局（更現代）

.container {display: grid;grid-template-columns: 200px 1fr; /* 第一列固定，第二列自適應 */
}
.left { background: #f00; }
.right { background: #0f0; }

3.?講講flex:1;

????????答：flex:1為該項目在含有display:flex屬性的父盒子內，在主軸上在剩余空間（父盒子寬/高-主軸固定寬/高）所占有的份數為1。

<style>.box1 {display: flex;height: 500px;border: solid 2px #000;}.child1 {height: 200px;width: 200px;ackground-color: aqua;}.child2 {height: 200px;flex: 1;background-color: blue;}
</style><body><div class="box1"><div class="child1">child1</div><div class="child2">child2</div></div>
</body>

child1固定寬度，child2占主軸剩余空間1份：?

        .child3{flex:2;height: 200px;background-color: pink;}
<body><div class="box1"><div class="child1">child1</div><div class="child2">child2</div><div class="child3">child3</div></div>
</body>

?child2占據主軸剩余空間1份，child3占據兩份。

4.怎么實現移動端適配不同設備？

方案1：媒體查詢+rem布局

????????1. 設置基準（以750px為例）

????????假設設計稿寬度為?750px，約定?1rem = 100px（LESS）：

/* 默認基準（適用于320px~750px屏幕） */
html {font-size: calc(100vw / 7.5); /* 750px設計稿：100px = 1rem */
}

????????2. 媒體查詢

/* 超小屏幕（小于320px） */
@media screen and (max-width: 320px) {html {font-size: 42.6667px; /* 320/7.5 */}
}/* 大屏幕（大于750px）限制最大縮放 */
@media screen and (min-width: 750px) {html {font-size: 100px; /* 固定最大值 */}
}

????????3. 尺寸設置使用rem

.header {height: 0.88rem;  /* 設計稿88px → 0.88rem */font-size: 0.32rem; /* 設計稿32px → 0.32rem */margin: 0 0.2rem;  /* 設計稿20px → 0.2rem */
}

方案2：Viewport單位（vw/vh）（使用LESS）

/* 設計稿750px下：1vw = 7.5px */
.box {width: 13.333vw; /* 100px / 7.5 */font-size: calc(16 / 7.5 * 1vw); /* 16px */
}

方案3：媒體查詢（Media Queries）

@media screen and (max-width: 320px) {body { font-size: 12px; }
}
@media screen and (min-width: 414px) {body { font-size: 18px; }
}

二、實踐題

1.題目：

代碼：?

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.w {margin: 0 auto;}ul {padding: 0;}li {list-style: none;}.box {width: 960px;height: 400px;}header {color: #fff;font-size: 15px;width: 100%;height: 40px;background-color: #313531;border-radius: 6px;line-height: 40px;}.test {float: left;margin-left: 20px;}.imfor ul li {float: right;margin-right: 25px;}section {display: flex;justify-content: space-between;}.content {padding: 15px;background-color: #fff;height: 252px;width: 275px;border-radius: 10px;margin: 20px 0;box-shadow: 1px 2px 5px #9d9d9d;}.pic {box-sizing: border-box;height: 120px;width: 270px;background-color: #c9cdc9;border-radius: 6px;}.word {font-size: 13px;width: 270px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;line-clamp: 2;overflow: hidden;}.date {margin-top: 10px;font-size: 10px;color: #9d9d9d;}footer {line-height: 49px;text-align: center;width: 100%;height: 49px;background-color: #ecf0ec;border-radius: 12px;color: #898989;font-size: 13px;}</style>
</head><body><div class="box w"><header><div class="test">考核</div><div class="imfor"><ul><li>關于我們</li><li>文章</li><li>首頁</li></ul></div></header><section><div class="content"><div class="pic"></div><h1>標題1</h1><div class="word">這是一段摘要內容，描述當前文章的簡要信息。這是一段摘要內容，描述當前文章的簡要信息。這是一段摘要內容，描述當前文章的簡要信息。</div><div class="date">發布于2026-06-01·閱讀123</div></div><div class="content"><div class="pic"></div><h1>標題1</h1><div class="word">這是一段摘要內容，描述當前文章的簡要信息。這是一段摘要內容，描述當前文章的簡要信息。這是一段摘要內容，描述當前文章的簡要信息。</div><div class="date">發布于2026-06-01·閱讀123</div></div><div class="content"><div class="pic"></div><h1>標題1</h1><div class="word">這是一段摘要內容，描述當前文章的簡要信息。這是一段摘要內容，描述當前文章的簡要信息。這是一段摘要內容，描述當前文章的簡要信息。</div><div class="date">發布于2026-06-01·閱讀123</div></div></section><footer>web第一次方向考核</footer></div>
</body></html>

效果：

注意點：

頭部盒子使用左右浮動
中間盒子使用flex布局更易使內容居中對齊

?文本溢出文字省略號顯示:

單行

       .word{/*先強制一行內顯示文本*/white-space: nowrap;/*超出部分隱藏*/overflow:hidden;/*省略號代替超出部分*/text-overflow:ellipsis;}

多行

 .word {text-overflow:ellipsis;overflow: hidden;/*彈性伸縮盒子模型顯示*/display: -webkit-box;/*設置或檢索伸縮盒子的子元素的排列方式*/-webkit-box-orient: vertical;/*限制在一個塊元素的文本行數*/-webkit-line-clamp: 2;line-clamp: 2;}

2.題目：

?代碼：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {top: 0;height: 100px;width: 70px;background-color: aquamarine;border-radius: 6px;text-align: center;font-size: 60px;overflow: hidden;}.content{position: relative;top: 0;transition: all 1s;}.box:hover .content{position: relative;top: -690px;}</style>
</head><body><div class="box"><div class="content"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div></div>
</body></html>

?效果：

思路：

? ? ? ? 大盒子套小盒子，小盒子里裝數字，并為小盒子添加過渡屬性。當光標移至大盒子處時，小盒子向上走。

3.題目：

代碼：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@keyframes change {0% {transform: scaleY(0.08);}50% {transform: scaleY(1);}100% {transform: scaleY(0.08);}}.box {display: flex;justify-content: center;align-items: center;margin: 100px auto;height: 200px;width: 100px;background-color: #fff;}div {margin-left: 2px;height: 100px;width: 5px;background-color: blue;border-radius: 3px;transition: all 1s;animation: change 2s linear infinite;}div:nth-child(n+2) {animation-delay: 0.2s;}div:nth-child(n+3) {animation-delay: 0.4s;}div:nth-child(n+4) {animation-delay: 0.6s;}div:nth-child(n+5) {animation-delay: 0.8s;}div:nth-child(n+6) {animation-delay: 1s;}div:nth-child(n+7) {animation-delay: 1.2s;}div:nth-child(n+8) {animation-delay: 1.4s;}div:nth-child(n+9) {animation-delay: 1.6s;}div:nth-child(n+10) {animation-delay: 1.8s;}div:nth-child(n+11) {animation-delay: 2s;}div:nth-child(n+12) {animation-delay: 2.2s;}</style>
</head><body><header class="box"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></header>
</body></html>

效果：

思路：

? ? ? ? 給所有子盒子添加縮放動畫，并按照順序添加animation-delay屬性，若要圖像向右走，則delay隨盒子順序遞增，若要圖像向左走，delay隨盒子順序遞減。

4.題目：

代碼：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.w {margin: 0 auto;}div:nth-child(1) {transition-delay: 0s;}div:nth-child(2) {transition-delay: 0.2s;}div:nth-child(3) {transition-delay: 0.4s;}div:nth-child(4) {transition-delay: 0.6s;}div:nth-child(5) {transition-delay: 0.8s;}div:nth-child(6) {transition-delay: 1s;}div:nth-child(7) {transition-delay: 1.2s;}div:nth-child(8) {transition-delay: 1.4s;}div:nth-child(9) {transition-delay: 1.6s;}section {display: flex;justify-content: center;align-items: center;height: 200px;width: 200px;background-color: aqua;}div {margin-left: 5px;height: 5px;width: 5px;background-color: blue;border-radius: 3px;transition: all 0.5s;}section:hover div:nth-child(1) {height: 15px;}section:hover div:nth-child(2) {height: 30px;}section:hover div:nth-child(3) {height: 45px;}section:hover div:nth-child(4) {height: 45px;margin-top: 10px;}section:hover div:nth-child(5) {height: 50px;margin-top: 25px;}section:hover div:nth-child(6) {height: 45px;margin-top: 10px;}section:hover div:nth-child(7) {height: 45px;}section:hover div:nth-child(8) {height: 30px;}section:hover div:nth-child(9) {height: 15px;}</style>
</head><body><section class="w"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></section>
</body></html>

?效果：

思路：

????????要求元素做到hover響應，并在光標移開時相應元素也有相應的延遲過渡，如果響應設置為動畫并添加到hover偽類中，光標移開動畫屬性即撤銷，要做到撤銷后仍保留動畫還原的推遲，這是html和css范圍內的基礎動畫無法實現的，考慮使用過渡。

? ? ? ? 我們知道光標移開后hover屬性撤銷，想要實現撤銷后仍然有延遲過渡，我們需要該元素本身就有延遲過渡的屬性，所以先為各元素設置其自身的延遲過渡：

        div:nth-child(1) {transition-delay: 0s;}div:nth-child(2) {transition-delay: 0.2s;}div:nth-child(3) {transition-delay: 0.4s;}div:nth-child(4) {transition-delay: 0.6s;}div:nth-child(5) {transition-delay: 0.8s;}div:nth-child(6) {transition-delay: 1s;}div:nth-child(7) {transition-delay: 1.2s;}div:nth-child(8) {transition-delay: 1.4s;}div:nth-child(9) {transition-delay: 1.6s;}

? ? ? ? 然后設置hover的變化：

        section:hover div:nth-child(1) {height: 15px;}section:hover div:nth-child(2) {height: 30px;}section:hover div:nth-child(3) {height: 45px;}section:hover div:nth-child(4) {height: 45px;margin-top: 10px;}section:hover div:nth-child(5) {height: 50px;margin-top: 25px;}section:hover div:nth-child(6) {height: 45px;margin-top: 10px;}section:hover div:nth-child(7) {height: 45px;}section:hover div:nth-child(8) {height: 30px;}section:hover div:nth-child(9) {height: 15px;}

? ? ? ? ?效果實現，針對想要的特殊情況再進行特別修改即可。