1. 圖片下方會產生幾像素的空白

代碼：

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

顯示結果如下所示：在div包裹的img中，img下面會產生幾像素的空白，原因是img是一種類似text的元素，在結束的時候，會在末尾加上一個空白符

解決辦法：

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

設置父級元素為`display: flex;`

2. 超鏈接的顏色設置順序

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

速記：LOVE、HATE

3. 讓超出部分文本顯示為省略號

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

4. 浮動

參考：

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

• 浮動的原始意義：只是用來讓文字環繞圖片而已，僅此而已。
• 浮動的本質：包裹與破壞。浮動（無論左浮還是右浮）某種意義與 `display: inline-block;`屬性的作用一樣，差別在于float有左右的區分。
• 浮動的框可以左移或者右移，直到外邊緣遇到包含框或者另一個浮動框的邊框為止
• 浮動框不在文檔的普通流中，所以普通流中浮動的框就好像脫離了文檔流一樣存在，如下圖所示：

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

• 當我們給每個盒子都設置 `float: left;` 之后，盒子會橫向排列，當高度超出一定距離后，會對浮動造成一定的影響

所以平時練習中，如果出現了，浮動框無法到達指定位置，可以考慮邊界的影響。

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

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

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

但如果此時盒子1也有了向右的浮動，即浮動元素脫離了文檔流，則包裹他們的div由于沒有文檔流中的內容，所以無法被撐開，效果如下：

這時候沒有元素去清除它周圍的浮動了，即使給包裹的div添加 `clear: both;`，也無動于衷，因為兩個浮動元素是包裹在其中。

方法一：這時候我們就可以在后面添加一個div，添加一個可以施加浮動的幫手。代碼如下：

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

設置樣式如下：

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

這時候它就會清楚左邊的浮動，讓露思妹妹回歸文檔流

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

當然，設置 `clear: both;`，它就會讓包裹的父級div被撐開，如下：

方法二：當然，如果這場戀愛中，三個人已經足夠，不想小四的插足，那么，也可以采取在包裹的父級元素后面（::after）加點東西，解決問題

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

其中，非注釋的在谷歌瀏覽器中是必須項

方法三：如果覺得后面加東西有時候有點困難，那也有別的浪漫方式，直接在父級元素身上搞事情

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。