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.没有设置高度，子元素是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: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特殊属性

时间： 2024-08-04 14:14:11

css中display常用属性详解之Block（一）的相关文章

关于css中的align-content属性详解

align-content 作用: 会设置自由盒内部各个项目在垂直方向排列方式. 条件:必须对父元素设置自由盒属性display:flex;,并且设置排列方式为横向排列flex-direction:row;并且设置换行,flex-wrap:wrap;这样这个属性的设置才会起作用. 设置对象: 这个属性是对她容器内部的项目起作用,对父元素进行设置. 取值:stretch:默认设置,会拉伸容器内每个项目占用的空间,填充方式为给每个项目下方增加空白.第一个项目默认从容器顶端开始排列. <!DOCTYP

Ext.form.ComboBox常用属性详解

Ext.form.ComboBox常用属性详解 标签: Extjs js combo js 代码 var combo = new Ext.form.ComboBox({ store : new Ext.data.SimpleStore({ fields : ['value', 'text'], data : [['1001', '小儿迪巧'], ['1002', '成人迪巧'], ['1003', '秀源']] }), hiddenName:'product_code',//提交到后台的inpu

css动画-animation各个属性详解（转）

CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①animation-name,②animation-duration,③animation-timing-function, 以下是各属性详解: 1.animation-name:指定要绑定到选择器的关键帧的名称. 2.animation-duration:定义动画完成一个周期需要多少秒或毫秒 3.a

CSS position overflow float 属性 详解

position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. fixed 生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过

CSS padding margin border属性详解

图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次.关系和相互影响.

转-CSS padding margin border属性详解

原文链接:http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,background-color,b

CSS中的变量使用详解

CSS中的变量给了我们诸多优点:方便.代码重用.更可靠的代码库和提升防错能力. 示例 :root { --base-font-size: 16px; --link-color: #6495ed; } p { font-size: var( --base-font-size ); } a { font-size: var( --base-font-size ); color: var( --link-color ); } 基础 当使用CSS变量时,你应该了解的三个主要组成: 自定义属性 var()

CSS padding margin border属性详解【转载】

本文转载自:http://www.cnblogs.com/linjiqin/p/3556497.html ,感谢相关博主. 图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,backgro

android中xmlns:tools属性详解

第一部分 安卓开发中,在写布局代码的时候,ide可以看到布局的预览效果. 但是有些效果则必须在运行之后才能看见,比如这种情况:TextView在xml中没有设置任何字符,而是在activity中设置了text.因此为了在ide中预览效果,你必须在xml中为TextView控件设置android:text属性 <TextView android:id="@+id/text_main" android:layout_width="match_parent" and