css基础 块级元素嵌套发生的外边距合并问题

礼悟:
     公恒学思合行悟,尊师重道存感恩。叶见寻根三返一,江河湖海同一体。
          虚怀若谷良心主,愿行无悔给最苦。读书锻炼养身心,诚劝且行且珍惜。


               ide:visual studio 2017  
            browser:Chrome
                     os:win7

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content="https://www.cnblogs.com/jizuiku"/>
    <title></title>
    <style type="text/css">

        .father {
            width:200px;
            height:200px;
            background-color:crimson;
            margin-top:50px;
        }

        .son {
            width:100px;
            height:100px;
            background-color:rebeccapurple;
            margin-top:40px;
        }

    </style>
</head>
<body>
    <!--
        在视频中是这样说明的:
        对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,
        则父元素的上外边距会与子元素的上外边距发生合并,
        合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。 

        解决方法:http://www.cnblogs.com/jizuiku/p/8440850.html
        -->
    <div class="father">
        <div class="son">

        </div>
    </div>
</body>
</html>

效果



CSS3优秀,值得学习。
学习资源: www.w3cschool.cn + itcast和itheima视频库 + 清净的心地。
如果您有公开的资源,可以分享给我的话,用您的资源学习也可以。
博文是观看视频后,融入思考写成的。博文好,是老师讲得好。博文坏,是 给最苦 没认真。

原文地址:https://www.cnblogs.com/jizuiku/p/8440834.html

时间: 2024-08-12 23:29:00

css基础 块级元素嵌套发生的外边距合并问题的相关文章

CSS中块级元素水平格式化

CSS中块级元素的(width+padding+marninig+border)因该等于其包含块的width.其中margin可能为负值,其他均为正值. 如果width和margin-left和margin-right都设置为auto的话,浏览器代理会默认将margin-left和margin-right设为0,将width设为包含块的width. 如果width与margin-left.margin-right其中一个为auto,而另一个margin设为固定值的话,浏览器代理会把为auto的那

浅谈css(块级元素、行级元素、盒子模型)

一.块级元素的特点 1.默认显示在父标签的左上角 2.默认占满一行(占满整个文档流) 文档流是将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 二.行内元素(内联元素)的特点 1.大小受到文字区域的影响,不受到width.height影响. 2.行内元素不会独自占满一行. 例: 1 <div id="d1"> 2 这是块级元素 3 </div> 4 <span id="d2"> 5 这是行内元素 6 &

CSS中块级元素和行内元素

文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理><). 浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流

深度理解CSS中块级元素与行内元素的区别(个人易错点)

区别一: 块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度 行内:行内元素不会独占一行,相邻的行内元素会排在同一行.其宽度随内容的变化而变化. 区别二: 块级:块级元素可以设置宽高 行内:行内元素不可以设置宽高 区别三: 块级:display:block; 行内:display:inline; 可以通过修改display属性来切换块级元素和行内元素. 区别四: 块级:块级元素可以设置margin,padding 行内:行内元素水平方向的margin-left; margin-righ

css实现块级元素水平垂直居中的方法?

父级给相对定位,子级给绝对定位,margin设置为auto,上下左右值设为0. 父级给相对定位,子级给绝对定位,设置left和top为50%,再向左和向上移动负的子级一半. 父级设置display:flex;justify-content: cneter;align-items: center; 父级设置display: table-cell;vertical-align: middle;text-align: center;子级设置display: inline-block; 原文地址:htt

CSS设置行内元素和块级元素的水平居中、垂直居中

CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-height:30px} /*DIV内的行内元素均会垂直居中*/ PS:当然,如果既要水平居中又要垂直居中,那么综合一下 div{text-align:center; height:30px; line-height:30px} CSS设置块级元素的水平居中 div p{margin:0 auto; widt

行内元素和块级元素水平及垂直居中

首先,介绍一下行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,而有的正好相反,在一定的情况下,它们也可以相互转换,比如用display来进行设置. 行内元素: ①不占据一整行,随内容而定,有以下特点: ②不可以设置宽高,也不可以设置行高,其宽度随着内容增加,高度随字体大小而改变. ③内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用. ④也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用. 常用的内联元素有: a - 锚点,b - 粗体(不推荐),

CSS外边距合并问题

今天无意中碰到了外边距合并的问题,于是便研究了一下.这里做个笔记. 所谓外边距合并,指的是当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 例如,这里有这样两个块元素: <div class="box1"></div> <div class="box2"></div> 这里给的样式是: .box1{ width:150px; height:150px; bac

css基础 行内元素 块级元素

1.行内元素(内联元素 inlineElement) 特点:不占据一行,无法设置宽高及行高,其宽度随着内容增加,高度随字体大小而改变,margin只对左右起作用,上下无效. 常见有: a - 锚点,b - 粗体(不推荐),br - 换行,em - 强调,font - 字体设定(不推荐),i - 斜体,img - 图片,input - 输入框,label - 表格标签, select - 项目选择,small - 小字体文本,span - 常用内联容器,定义文本内区块,strike - 中划线,s