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

时间: 2019-02-20阅读: 1027标签: 选择器

1. 子元素浮动导致父元素高度不够

问题描述:最小高度为100px的父元素,嵌套一个300px高度的子元素,当子元素浮动时,父元素高度并不随之升高。
问题视图:


期望视图:

待解决代码

<!DOCTYPE html>
<html>
<head>
    <title>1</title>
    <meta charset="utf-8">
    <style type="text/css">
        .d0{width: 300px;background: #336;min-height: 100px;}
        .d1{float: right;width: 200px;background: #289;height: 200px;opacity: 0.5}
    </style>
</head>
<body>
    <div class="d0">
        <div class="d1">我是浮动的子元素</div>
    </div>
</body>
</html>

解决方案:父元素底部追加一个内容为空的子元素,class为clear,对其添加样式.clear:after{content:"";display:block;clear:both;}

已解决代码

<!DOCTYPE html>
<html>
<head>
    <title>1</title>
    <meta charset="utf-8">
    <style type="text/css">
        .d0{width: 300px;background: #336;min-height: 100px;}
        .d1{float: right;width: 200px;background: #289;height: 200px;opacity: 0.5}
        /*解决问题的代码*/
        .clear:after{content:"";display:block;clear:both;}
    </style>
</head>
<body>
    <div class="d0">
        <div class="d1">我是浮动的子元素</div>
        <div class="clear"></div>
    </div>
</body>
</html>


2.子元素浮动导致外边距溢出

问题描述:
在某些特殊的条件下,为子元素设置上外边距时,有可能会作用到父元素上。
问题视图:

期望视图:

待解决代码:

<!DOCTYPE html>
<html>
<head>
    <title>2</title>
    <meta charset="utf-8">
    <style type="text/css">
        .d1{width: 300px;height: 100px;background: #336}
        .d2{width: 300px;height: 100px;background: #289}
        .d2son{width: 150px;height: 50px;background: #caa;opacity: 0.5;margin-top: 50px;}
    </style>
</head>
<body>
    <div class="d1">上面的div</div>
    <div class="d2">
        <div class="d2son">下面的div的子元素</div>
    </div>
</body>
</html>

解决方案:
在d2中的第一个子元素位置处(!!!必须是空子元素)生成内容为空显示方式为table(!!!必须是table元素)
d2中添加第一个子元素,对其添加样式:.d2:before {content:"";display:table;}


已解决代码:

<!DOCTYPE html>
<html>
<head>
    <title>2</title>
    <meta charset="utf-8">
    <style type="text/css">
        .d1{width: 300px;height: 100px;background: #336}
        .d2{width: 300px;height: 100px;background: #289}
        .d2son{width: 150px;height: 50px;background: #caa;opacity: 0.5;margin-top: 50px;}
        /*解决问题的代码*/
        .d2:before {content:"";display:table;}
    </style>
</head>
<body>
    <div class="d1">上面的div</div>
    <div class="d2">
        <div class="d2son">下面的div的子元素</div>
    </div>
</body>
</html>
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/2062

css3选择器归类整理_基本选择器和属性选择器

CSS3选择器分类如下图所示,通配选择器*选择文档中所有HTML元素;类选择器选择指定class属性值为class的任意类型的任意多个元素

css怎么选择父元素下的某个元素?

css可以通过一些选择器来实现选择父元素下某个元素的效果。:first-child p:first-child(first第一个 child子元素)(找第一个子元素为p):last-child p:last-child(last倒数 child子元素)(找倒数第一个子元素为p)

javascript选择器有哪些?

JavaScript选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()。

微信小程序文档没写支持, 但是实际支持的选择器有哪些?

目前支持的选择器有,在实践中我发现, 除了文档上说的几种选择器, 经过测试发现其实还有几种支持的选择器没有列举!还支持哪些选择器?

vue中能穿透组件的css选择器

如果父组件style设置了scoped,除了全局样式与子组件内部修改样式以外不受外部样式的影响,但要是父组件想修改子组件某个地方的样式但又不想为了这么一点变动去添加个全局样式该怎么做呢?

css 选择器符号

空格:后代选择器,表示div元素里面所有的p元素。> 子选择器:表示div元素里面所有的子代(不含孙代及以后)p元素,~兄弟元素选择器:表示.cls元素往后的同级的p元素

CSS选择器及优先级

!important > 内联 > ID选择器 > 类选择器 > 标签选择器。优先级是由A、B、C、D的值来决定的,其中它们的值计算规则如下:如果存在内联样式,那么A = 1, 否则A = 0;B的值等于ID选择器出现的次数;

jQuery :eq() 选择器

:eq() 选择器选取带有指定 index 值的元素。 index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1)。经常与其他元素/选择器一起使用,来选择指定的组中特定序号的元素

jquery的选择器有哪些?如何对元素取值和设置值

jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作, Jquery 选择器包括:基本选择器、层叠选择器 、基本过滤选择器 、内容过滤选择器、可视化过滤选择器.....

CSS中的focus-within伪类选择器

在CSS中 :focus-within 是一个伪类,CSS中伪类:focus-within能非常方便处理获取焦点状态, 当元素本身或其后代获得焦点时,:focus-within伪类的元素就会有效。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!