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

更新日期: 2019-02-20阅读: 2k标签: 边距

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>

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

CSS外边距折叠引发的问题

CSS外边距折叠:第一种:两个块级元素的上下边距折叠。第二种:父元素和子元素(或者最后一个元素)的外边距。第三种:空的块级元素的上下外边距

CSS 外边距(margin)重叠及防止方法

边距重叠解决方案(BFC),首先要明确BFC是什么意思,其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”,外边距的重叠只产生在普通流文档的上下外边距之间,这个看起来有点奇怪的规则,其实有其现实意义。

html元素间的边距重叠问题与BFC

BFC即块级格式化上下文,创建了 BFC 的元素是一个独立的容器,里面无论如何布局都不会影响到外面的元素;设置 overflow 属性,除了 visible 以外的值(例如 hidden、auto)

js获取网页相对边距

getBoundingClientRect 用于获取某个元素相对于视窗的位置集合。集合中有 top, right, bottom, left 等属性。注意: availLeft/availTop 大多数情况下,返回 0。获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的属性

页面直接导出为PDF文件,支持分页与页边距

将WEB页面直接导出为pdf文件是经常会用到的一个功能,尤其是各种报表系统。总结了一下目前几种主流的做法:在后端用代码生成pdf文件,比如iText一类;在后端抓取页面并生成pdf文件,比如phantomjs一类;

Js获取滚动的头部距离和左边距离

Js获取滚动的头部距离和左边距离:在js中,经常会用到需要获取头部距离和左边距离的小功能,在这里封装一下,以后可以直接调用即可:

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