以下是个人学习笔记,仅供学习参考。

1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题。

在给没有margin-top-border父元素中的子元素添加margin-top时,发现没有直接表现出来,而是作用到父元素身上,就会导致子元素的margin-top溢出。

条件:
1、父元素没有上边框
2、为第一个子元素设置上外边距时
解决方案:
1、为父元素增加上边框
弊端:父元素会变高
2、通过为父元素设置上内边距来取代子元素的上外边距
弊端:也会增加父元素的高度
3、在父元素中,增加一个空 <table>元素
弊端:页面中多一个空元素而已

4.使用内容生成:before,完美!

<!-- 解决上边距溢出问题:before使用代码 -->
html部分:
<div id="container">
    <div id="item"></div>
</div>
css部分:
 #item{
           width:200px;
            height:200px;
            background:pink;
            /*子元素的上外边距作用到父元素*/
            margin-top:20px;
        }
        #container:before{
            content:"";
            display:table;
        }

2.关于浮动元素父元素高的问题:

条件:

父元素中有子元素float的话,可能就会影响父元素的高度,从而影响布局;

解决方案:

1.直接给父元素定高;

弊端:必须知道父元素的高;

2. 使用overflow属性值为hidden解决;

弊端:会隐藏溢出的内容,(当需要隐藏时使用,按需使用)

3.在父元素中最后面未知添加一个块级元素或table属性元素,并加clear属性值为both;

弊端:页面中多了一个空元素(影响不大,算是很nice)

4.使用内容生成:after解决,完美!

/*解决浮动高问题*/

html部分:
<!-- 解决浮动元素高的问题 -->
<div id="df">
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</div>
css部分:
 /*解决浮动高问题*/
        #df{
            background:yellow;
        }
        #d1,#d2,#d3{
            width:200px;
            height:200px;
        }
        #d1{
            background:red;
            float:left;
        }
        #d2{
            background:green;
            float:left;
        }
        #d3{
            background:blue;
            float:left;
        }
        #df:after{
            content:"";
            display:block;
            clear:both;
        }

关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案的更多相关文章

  1. float浮动导致父元素高度坍塌的原因及清除浮动方法

        一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...

  2. 解决 css 浮动后 父元素高度失效问题

    应用场景 子元素标签使用 浮动后,会出现浮在父元素上层,脱离了.导致父元素没办法根据子元素的高度而变化,提供以下解决方案. 解决代码 把 '.clearfix ' Class 样式添加到 父元素即可. ...

  3. css 添加伪元素 消除浮动 对父元素高度产生的影响

  4. 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。

    设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...

  5. CSS 实现:父元素包含子元素,子元素垂直居中布局

    ☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...

  6. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  7. ss 如何解决margin-top使父元素margin失效

    给子元素设置margin-top的时候父元素的也会受影响.会产生子元素和父元素margin合并的问题. 解决办法: 给父元素设置padding.或者border把父子的margin之间隔开. 一般来说 ...

  8. 子元素margin-top属性传递给父元素的问题 转!

    问题描述:一个父包含框包含一个子元素.给正常流的子元素一个垂直外边距margin-top就会使得父元素跟着往下走,而子元素和父元素的边距则没有发生变化. html结构:<div class=&q ...

  9. 子元素用margin-top 为什么反而作用在父元素上?对使用margin-top 的元素本身不起作用?

    在这个说明中,“collapsing margins”(折叠margin)的意思是:2个或以上盒模型之间(关系可以是相邻或嵌套)相邻的margin属性(这之间不能有非空内容.padding区域.bor ...

随机推荐

  1. 【learning】 扩展lucas定理

    首先说下啥是lucas定理: $\binom n m \equiv \binom {n\%P} {m\%P} \times \binom{n/P}{m/P} \pmod P$ 借助这个定理,求$\bi ...

  2. spring cloud(服务注册中心及服务提供者——初学一)

    Eureka是Netflix开源的一款提供服务注册和发现的产品,它提供了完整的Service Registry和Service Discovery实现.也是springcloud体系中最重要最核心的组 ...

  3. SpringBoot + docker + neo4j

    下拉镜像 docker pull neo4j 启动镜像 docker run -d -p 7473:7473 -p 7687:7687 -p 7474:7474 neo4j 打开浏览器:http:// ...

  4. CSS动画原理及硬件加速

    一.图层 图层即层叠上下文,具体概念和应用大家可以看我之前转自张鑫旭大神博客的<CSS层叠上下文和层叠顺序>,这里我们简单复习一下产生层叠上下文的原因. 1.根层叠上下文 指的是页面根元素 ...

  5. Vue源码翻译之组件初始化。

    废话不多说. 我们先来看看Vue的入口文件. import { initMixin } from './init' import { stateMixin } from './state' impor ...

  6. [Python学习笔记-003] 使用PyOTP获取基于OTOP算法的动态口令

    建立安全的VPN连接,不仅需要输入用户名和密码,还需要输入动态口令(token).作为一个懒人,我更喜欢什么手工输入都不需要,既不需要输入password,也不需要输入token.也就是说,只需一个命 ...

  7. -bash: warning: setlocale: LC_CTYPE: cannot change locale (zh_US.UTF-8): No such file or directory -bash: warning: setlocale: LC_COLLATE:

    前几天登录服务器发现出现了这些个警告,一直没时间去处理他,今天难得有空,处理一下并记录下来,希望可以帮助到有需要的朋友. 警告信息如下: Last :: from 10.0.0.1 -bash: wa ...

  8. JavaScript核心基础语法

    1 什么是JavaScript? 是一种嵌入在网页中的程序段. 是一种解释型语言,被浏览器解释执行. 由Netscape发明,ECMA(欧洲计算机制造商协会)将其标准化. JavaScript借用了J ...

  9. 【React 资料备份】React Hook

    Hooks是React16.8一个新增项,是我们可以不用创建class组件就能使用状态和其他React特性 准备工作 升级react.react-dom npm i react react-dom - ...

  10. Spring Aop AfterReturning接收返回值

    包结构: Spring.xml UserDao.java 测试类Main方法 LogAspect.java 测试结果: @AfterReturning标签属性分析: value值: 可以写Aop的表达 ...