1. 圖片下方會(huì)產(chǎn)生幾像素的空白

代碼：

// html <div class="zls"><img src="../imgs/zls.jpg" /> </div> // css .zls {border: 1px solid #f00 } .zls img {width: 200px;height: 200px; }

顯示結(jié)果如下所示：在div包裹的img中，img下面會(huì)產(chǎn)生幾像素的空白，原因是img是一種類似text的元素，在結(jié)束的時(shí)候，會(huì)在末尾加上一個(gè)空白符

解決辦法：

設(shè)置img樣式為 `vertical-align: middle;` 或者 `display: block;`

設(shè)置父級(jí)元素為`display: flex;`

2. 超鏈接的顏色設(shè)置順序

a:link{color:#03c;} a:visited{color:#666;} a:hover{color:#f00;} a:active{color:#ccc;}

速記：LOVE、HATE

3. 讓超出部分文本顯示為省略號(hào)

.test {width: 50px;height: 50px; } .test {// 添加如下代碼 white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }

4. 浮動(dòng)

參考：

1. https://www.zhangxinxu.com/wordpress/2010/01/css-float%e6%b5%ae%e5%8a%a8%e7%9a%84%e6%b7%b1%e5%85%a5%e7%a0%94%e7%a9%b6%e3%80%81%e8%af%a6%e8%a7%a3%e5%8f%8a%e6%8b%93%e5%b1%95%e4%b8%80/

2. https://www.w3school.com.cn/css/css_positioning_floating.asp

• 浮動(dòng)的原始意義：只是用來(lái)讓文字環(huán)繞圖片而已，僅此而已。
• 浮動(dòng)的本質(zhì)：包裹與破壞。浮動(dòng)（無(wú)論左浮還是右浮）某種意義與 `display: inline-block;`屬性的作用一樣，差別在于float有左右的區(qū)分。
• 浮動(dòng)的框可以左移或者右移，直到外邊緣遇到包含框或者另一個(gè)浮動(dòng)框的邊框?yàn)橹?/li>
• 浮動(dòng)框不在文檔的普通流中，所以普通流中浮動(dòng)的框就好像脫離了文檔流一樣存在，如下圖所示：

我們給盒子2加了浮動(dòng)以后，盒子2就脫離了文檔流，盒子3就回到往上走，但盒子1仍然占據(jù)一行。

• 當(dāng)我們給每個(gè)盒子都設(shè)置 `float: left;` 之后，盒子會(huì)橫向排列，當(dāng)高度超出一定距離后，會(huì)對(duì)浮動(dòng)造成一定的影響

所以平時(shí)練習(xí)中，如果出現(xiàn)了，浮動(dòng)框無(wú)法到達(dá)指定位置，可以考慮邊界的影響。

• 現(xiàn)在我們給露思妹妹加上浮動(dòng)，然后取消盒子1的浮動(dòng)，會(huì)有如下的效果：這就是創(chuàng)建浮動(dòng)框可以使文本圍繞圖像

我們把文本框當(dāng)做行框，露思妹妹當(dāng)做浮動(dòng)框，則利用clear屬性就可以阻止行框圍繞浮動(dòng)框，設(shè)置的值 left/right/both/none就表示框的哪些邊不應(yīng)該挨著浮動(dòng)框，這句話很重要！

在盒子1上添加屬性 `clear: left/both;`，就可以產(chǎn)生下面的效果，此時(shí)盒子1是沒有浮動(dòng)設(shè)置的，是在正常的文檔流，由于清除了左邊的浮動(dòng)，所以向下一行。

但如果此時(shí)盒子1也有了向右的浮動(dòng)，即浮動(dòng)元素脫離了文檔流，則包裹他們的div由于沒有文檔流中的內(nèi)容，所以無(wú)法被撐開，效果如下：

這時(shí)候沒有元素去清除它周圍的浮動(dòng)了，即使給包裹的div添加 `clear: both;`，也無(wú)動(dòng)于衷，因?yàn)閮蓚€(gè)浮動(dòng)元素是包裹在其中。

方法一：這時(shí)候我們就可以在后面添加一個(gè)div，添加一個(gè)可以施加浮動(dòng)的幫手。代碼如下：

<div class="test"><img class="zls" src="../imgs/zls.jpg" /><div class="box1">趙露思趙露思趙露思趙露思趙露思趙露思趙露思趙露思趙露思趙露思趙露思趙露思</div><div class="clear"></div> </div>

設(shè)置樣式如下：

.clear {border: 1px dashed #000;clear: left; }

這時(shí)候它就會(huì)清楚左邊的浮動(dòng)，讓露思妹妹回歸文檔流

如果是 `clear: right;`，那么它就會(huì)讓盒子1回歸正常的文檔流。

當(dāng)然，設(shè)置 `clear: both;`，它就會(huì)讓包裹的父級(jí)div被撐開，如下：

方法二：當(dāng)然，如果這場(chǎng)戀愛中，三個(gè)人已經(jīng)足夠，不想小四的插足，那么，也可以采取在包裹的父級(jí)元素后面（::after）加點(diǎn)東西，解決問(wèn)題

.test::after {display: block;clear: both;content: '';/* visibility: hidden; *//* height: 0; */ }

其中，非注釋的在谷歌瀏覽器中是必須項(xiàng)

方法三：如果覺得后面加?xùn)|西有時(shí)候有點(diǎn)困難，那也有別的浪漫方式，直接在父級(jí)元素身上搞事情

.test {display: block;overflow: hidden;/* zoom: 1; */ }

其中，非注釋的在谷歌瀏覽器中是必須項(xiàng)，zoom可以換成固定的寬高。

總結(jié)

以上是生活随笔為你收集整理的css设置一个div显示在另一个div的上层_CSS工程中常见问题-1的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。