CSS選擇器——偽元素選擇器之處理父元素高度及外邊距溢出

Jason_Geng 發布于2019-08-30 15:55 / 1440人閱讀

摘要：子元素浮動導致父元素高度不夠問題描述最小高度為的父元素，嵌套一個高度的子元素，當子元素浮動時，父元素高度并不隨之升高。

1. 子元素浮動導致父元素高度不夠

問題描述：最小高度為100px的父元素，嵌套一個300px高度的子元素，當子元素浮動時，父元素高度并不隨之升高。
問題視圖：

期望視圖：

待解決代碼：




    1
    
    


    
        我是浮動的子元素

解決方案：父元素底部追加一個內容為空的子元素，class為clear，對其添加樣式.clear:after{content:"";display:block;clear:both;}

已解決代碼：




    1
    
    


    
        我是浮動的子元素

2.子元素浮動導致外邊距溢出

問題描述：
在某些特殊的條件下，為子元素設置上外邊距時，有可能會作用到父元素上。
問題視圖：

期望視圖：

待解決代碼：




    2
    
    


    上面的div
    
        下面的div的子元素

解決方案：
在d2中的第一個子元素位置處（！！！必須是空子元素）生成內容為空顯示方式為table（！！！必須是table元素）
d2中添加第一個子元素，對其添加樣式：.d2:before {content:"";display:table;}
已解決代碼：




    2
    
    


    上面的div
    
        下面的div的子元素

云服務器 GPU云服務器元素選擇器 js 子類元素選擇器 css選擇器基礎選擇器css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117401.html

知識整理之CSS篇

摘要：如對知識點感興趣，可移步至知識整理之篇就是針對不同的瀏覽器或不同版本瀏覽器寫特定的樣式達到讓瀏覽器兼容的過程。對于偽元素的定義偽元素在中創建了一些抽象元素，這些對象不存在與常文檔流中。隱藏元素的幾種方法該屬性隱藏元素，單元素在文檔流中仍占據 CSS篇主要從CSS兼容、CSS3新特性、CSS選擇器、高頻屬性、高頻布局、高頻知識點、性能優化等方面進行歸納。如對HTML知識點感興趣，可移步至...

ermaoL 2019-08-30 15:55 評論0 收藏0
前端知識點總結——CSS

摘要：父元素沒有上邊框為子元素設置上外邊距時在中嵌套一個子元素設置其尺寸為，并設置其背景顏色設置的上外邊距為觀察其結果。前端知識點總結——CSS 1.CSS的概述 1.什么是CSS? CSS：Cascading Style Sheets層疊樣式表，級聯樣式表（簡稱：樣式表） 2.作用設置HTML網頁元素的樣式 3.HTML與CSS的關系 HTML：負責內容的展示 CSS：負責內容（元素）...

nicercode 2019-08-30 14:01 評論0 收藏0
css基礎

摘要：在元素之后添加內容控制表單控件的禁用狀態。生成相對定位的元素，相對于其正常位置進行定位。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現得就像浮動框不存在一樣。 CSS display: none; 與 visibility: hidden; 的區別聯系：它們都能讓元素不可見區別： display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間；vi...

JinB 2019-08-30 14:21 評論0 收藏0
【css】常見問題

摘要：將元素顯示為內聯元素，元素前后沒有換行符。我們知道內聯元素是無法設置寬高的，所以一旦將元素的屬性設為，設置屬性和是沒有用的。這個屬性值融合了和的特性，即是它既是內聯元素，又可以設置和。 CSS 中 inline 元素可以設置 padding 和 margin 嗎？行內元素設置width,height無效。但是設置margin和padding是有效的。行內非替換元素的外邊距不會改變一個...

renweihub 2019-08-29 16:25 評論0 收藏0