大话css之display的Block未解之谜（一）

用了几年的css了，css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析，网上的分析文章也很多，零散。

今天有空，就在这做一下整理分析

block

　　解释：指定对象为块元素（占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样）

　　特点：1.处于常规流中时，如果width没有设置，会自动填充满父容器
　　　　　 2.可以应用margin/padding
　　　　　 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素
　　　　　 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间）
5.忽略vertical-align

常见问题:1.父子情况下的block元素，在大部分浏览器会垂直外边距合并问题（margin-top，margin-bottom会发生合并）

2.垂直上下排列的block盒子外边距合并问题（margin-top，margin-bottom会发生合并）

　　　　　　　3.没有设置高度，子元素是float的，结果auto的height设置无用　　　　

　　代表标签：block元素（块元素）大致有：P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | 　　　　　　 ADDRESS(随着html5标准的推进，一些元素将被废除，而一些新的元素将被引入)注意的是并非所有的block元素的默认display属性都是block，像table这种display:table的元素也是block元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        html,body{

            padding:0px;

            margin:0px;

            width:100%;

            height:100%;

        }

           .parent1{

             width:300px;

             height:300px;

              background:yellow;

        }

        .block1{

            height:200px;

            background:red;

        }

    </style>

</head>

<body >

<div class="parent1">

    <div class="block1"  >

           占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样

    </div>

</div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        html,body{

            padding:0px;

            margin:0px;

            width:100%;

            height:100%;

        }

        .parent2{

             width:400px;

             height:400px;

             margin:10px;

             /*display:block;*/

             /*margin:0px;*/

             vertical-align:center;

             background:yellow;

        }

        .block2{

            height:100px;

            background:red;

            padding:20px;

            margin:30px;

            display:block;

        }

        .block1{

            height:100px;

            background:blue;

        }

    </style>

</head>

<body >

<div class="parent2">

    <div class="block2"  >

           占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样

    </div>

    <div class="block1"  >

           占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样

    </div>

</div>

</body>

</html>

例子包含了1.处于常规流中时，如果width没有设置，会自动填充满父容器

　　　　　2.在没有设置高度的情况下会扩展高度以包含常规流中的子元素

　　　　　　2.可以应用margin/padding

　　　　　3.处于常规流中时布局时在前后元素位置之间（独占一个水平空间）

4.忽略vertical-align

如何解决上面的重叠了，有两种方法，让重叠的div任意一个变成BFC模型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        html,body{

            padding:0px;

            margin:0px;

            width:100%;

            height:100%;

        }

        .parent2{

             width:400px;

             margin:10px;

             border:5px yellow solid;

        }

        .block2{

            height:50px;

            background:red;

            padding:20px;

            overflow:hidden;

            margin:30px;

            display:block;

        }

        .block1{

            height:100px;

            background:blue;

        }

    </style>

</head>

<body >

<div class="parent2">

    <div class="block2"  >

           占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样

    </div>

    <div class="block1"  >

           占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样

    </div>

</div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        html,body{

            padding:0px;

            margin:0px;

            width:100%;

            height:100%;

        }

        .parent2{

             width:400px;

             margin:10px;

             overflow:hidden;

             border:5px yellow solid;

        }

        .block2{

            height:50px;

            background:red;

            padding:20px;

            margin:30px;

            display:block;

        }

        .block1{

            height:100px;

            background:blue;

        }

    </style>

</head>

<body >

<div class="parent2">

    <div class="block2"  >

           占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样

    </div>

    <div class="block1"  >

           占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样

    </div>

</div>

</body>

</html>

原理：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        html,body{

            padding:0px;

            margin:0px;

            width:100%;

            height:100%;

        }

        .parent2{

             width:400px;

             margin:20px;

             /*如果设置外dom设置了border，子集外边距不会和父的外边距重叠*/

             border:5px yellow solid;

        }

        .block2{

            height:50px;

            background:red;

            margin:30px;

             border:5px yellow solid;

        }

        .block1{

            height:100px;

            margin:40px;

            background:blue;

            border:5px yellow solid;

        }

    </style>

</head>

<body >

<div class="parent2">

    <div class="block2"  >

           占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样

    </div>

    <div class="block1"  >

           占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样

    </div>

</div>

</body>

</html>

原理：出现这种现象原因Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        html,body{

            padding:0px;

            margin:0px;

            width:100%;

            height:100%;

        }

        .parent2{

             width:400px;

             margin:20px;

             /*如果设置外dom设置了border，子集外边距不会和父的外边距重叠*/

             border:5px yellow solid;

        }

        .block2{

            height:50px;

            background:red;

            margin:30px;

            overflow:hidden;

            border:5px yellow solid;

        }

        .wrap{

            overflow:hidden;

        }

        .block1{

            height:100px;

            margin:40px;

            background:blue;

            border:5px yellow solid;

        }

    </style>

</head>

<body >

<div class="parent2">

    <div class="block2"  >

           占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样

    </div>

    <div class="wrap">

        <div class="block1"  >

           占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样

    </div>

    </div>

</div>

</body>

</html>

原理：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        html,body{

            padding:0px;

            margin:0px;

            width:100%;

            height:100%;

        }

        .parent2{

             width:400px;

             margin:10px;

             border:5px yellow solid;

        }

        .block2{

            height:50px;

            background:red;

        /*    padding:20px;

            margin:30px;*/

            float :left;

        }

        .block1{

            height:100px;

            background:blue;

        }

    </style>

</head>

<body >

<div class="parent2">

    <div class="block2"  >

           占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样

    </div>

<!--     <div class="block1"  >

           占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样

    </div> -->

</div>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        html,body{

            padding:0px;

            margin:0px;

            width:100%;

            height:100%;

        }

        .parent2{

             width:400px;

             margin:10px;

             overflow:hidden;

             border:5px yellow solid;

        }

        .block2{

            height:50px;

            background:red;

            float :left;

        }

        .block1{

            height:100px;

            background:blue;

        }

    </style>

</head>

<body >

<div class="parent2">

    <div class="block2"  >

           占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样

    </div>

<!--     <div class="block1"  >

           占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样

    </div> -->

</div>

</body>

</html>

原理：1.BFC的区域不会与float box重叠

　　　2.计算BFC的高度时，浮动元素也参与计算

大多数情况下我们都知道p|H3|div标签是block，但是我们往往忽略了table和form是block

　　时间原因，加上自己的懒惰，下一篇我为大家继续分析display这个css特殊属性

大话css之display的Block未解之谜（一）的更多相关文章

CSS包含块containing block详解
“包含块(containing block)”,W3c中一个很重要的概念,今天带大家一起来好好研究下. 初步理解在 CSS2.1 中,很多框的定位和尺寸的计算,都取决于一个矩形的边界,这个矩形,被称 ...
Css中display:inline-block用法详解
display:block就是将元素显示为块级元素 block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div&g ...
谷歌浏览器chrome与firefox的冲突（未解之谜）
那年,公司开发了一套在线制作电子书的系统 e-textbook. 我负责小学电脑科教材在线题目的制作. 利用 ps制作剪裁好图片,导入系统,制作题目,并通知同事添加代码. 检测时,却发现有一道图片拖放 ...
iOS 点击返回键崩溃的未解之谜
1. iOS8出现. 2.点击进去下一层View,然后返回,再返回上一级的视图的时候奔溃. 3.只有点击进去一下层View的时候才出现. 4. 报错的是给一个未知对象发送这个消息 gestureRec ...
Robot Framework中的未解之谜
今天在写测试用例的时候偶然发现了一个问题: 一.看脚本逻辑上没有问题,但是在引用变量的时候不能成功引用,脚本截图如下: 这个是关键字A的截图,没有参数. 此时在case中引用${phonesign}和 ...
acm未解之谜-洛谷P1109学生分组
把每一组的学生个数调度到一个给定区间范围内: 看了一圈题解,大佬都对原因避而不答: #include <iostream> #include <algorithm> using ...
GF学习未解之谜
1.很奇怪事件管理器里面的用到的订阅事件里面的ID是通过typeof(xxx).GetHashCode()得到的,怎么解决id重复的问题? 2.log系统里面是不是直接全部当做多参数解决问题比较好?
CSS——display（Block none inline等）属性的用法
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
css 浅析display属性
继续开始我的css之旅吧.今天我们来说什么啊.构思了两天还是没有什么思路,但是学习的步伐我们不能停止下来.还是按照之前的计划来讲讲display,在讲这个之前我们还是按照老规矩来扯扯蛋,步子不能够迈大 ...

随机推荐

影响postgresql性能的几个重要参数
转载一篇蛮老的文章了,但是还是很有用,可参考修补. PG的配置文件是数据库目录下的postgresql.conf文件,8.0以后的版本可支持K,M,G这样的参数,只要修改相应参数后重新启动PG服务就 ...
10、代码块、构造代码块、静态代码块及main方法之间的关系
1.普通代码块: 在方法或语句中出现在{}之间的类容就称为普通代码块,简称代码块.普通代码块和一般的语句执行顺序由他们在代码中出现的次序决定--“先出现先执行”,即顺序执行. /*下面第一个类时合法的 ...
现代软件工程作业 github使用
Github使用版本库的创建与同步第一步:创建远程版本库并同步到本地创建远程版本库在地址栏输入www.github.com 并sign in 进入到个人主页,如下图示: 创建远程版本库:点击N ...
adb install INSTALL_FAILED_ALREADY_EXISTS
安装时候碰到的一个问题:已经签名的包,重新通过adb install 会提示安装错误.提示:Failure [INSTALL_FAILED_ALREADY_EXISTS] 为啥eclipse自己就可以 ...
记一次Suse下的Django环境配置——第一弹
一.安装Python 由于原有Suse自带的Python版本只有2.4,因此首先需要安装Python的高版本,在这里我选择使用Python2.7.9.PS:之前选择使用2.7.11版本,由于没有zli ...
jquery easyui tree动态加载子节点
1.前端tree绑定时,使用onBeforeExpand事件:当节点展开时触发加载子节点,自动会向服务端发送请求:url为绑定url,参数为当前节点id this.tree = { method: ' ...
SEO之title优化
作者:andyrat,联系方式:andyrat@qq.com
iOS的一像素线
文/stark_yang(简书作者)原文链接:http://www.jianshu.com/p/b83dca88ef73著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 时常总结以前学过 ...
项目vue2.0仿外卖APP（六）
goods 商品列表页开发布局编写除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...
ip地址转换
通常,我们用点分十进制字符串表示ipv4地址(192.168.1.1),用十六进制字符串表示ipv6地址(fe80::20c:29ff:fee9:4bcc). ipv4转换函数 #include &l ...

大话css之display的Block未解之谜（一）

大话css之display的Block未解之谜（一）的更多相关文章

随机推荐

热门专题