CSS选择器——伪元素选择器之处理父元素高度及外边距溢出

Jason_Geng 发布于2019-08-30 15:55 / 1420人阅读

摘要：子元素浮动导致父元素高度不够问题描述最小高度为的父元素，嵌套一个高度的子元素，当子元素浮动时，父元素高度并不随之升高。

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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