display的属性值测试

标签：蓝色   技术   渲染   元素   back   测试   块级元素   颜色   分享   

　　由于在学习CSS的display的属性值只针对block、inline、inline-block和flex进行过了解，并且自己观察得知列表中li的display属性是list-item，而想要触发BFC可以将容器类型定义为table-cell、tabble-caption和inline-block，所以本文将基于自己的测试和资料对display的属性值进行了解。首先创建一个ul>li>p的嵌套结构，并在元素对应位置添加名称的元素内容，如下：

　　<ul>ul
        <li>li
            <p>p</p>
        </li>
    </ul>

　　为方便观察和判断，设置颜色和宽高如下：

ul{
    width: 300px;
    height: 300px;
    background: yellowgreen;
}
li{
    width: 200px;
    height: 200px;
    background: greenyellow;
}
p{
    width: 100px;
    height: 100px;
    background: aquamarine;
}

　　在浏览器中查看，ul和p都是block元素，li是list-item元素，文字排列方式如下：

　　上图为查看ul盒模型时的展现形式。可以看出块级元素和列表元素都是独占一行，并且对宽高和边距敏感，这里p上下有着默认的外边距，所以p和li上部没有贴紧，并且可以看出list-item的默认样式是显示在li的border之外。前面的部分是ul的padding-left，所有的元素的内容都显示在content的区域，也就是图中有蓝色覆盖的一层。

　　下图为li的盒模型图片：

　　下图为p的盒模型图片：

　　这样便于下面变换样式的比较。首先对ul设置为inline，结果如图所示：

　　ul的宽度和高度显示仍然是按照li和p的内容来计算的，但是其盒模型只有本身的content和padding-left，将其设置为inline元素后，元素的大小只包括内容本身的大小，设置的宽高将会失效，但是任然可以使用padding和margin来调整元素位置。如果一个行内元素内部有块级元素，这样本身是不允许的，但是浏览器显示时会按照元素的特性（行内元素的特性）进行渲染，但是行内元素的宽高应包含内部块级元素。这里对li和p设置为inline也是类似的效果，就不再测试了。

　　对ul设置inlin-block元素：

　　inline-block行内块元素，

display的属性值测试

标签：蓝色   技术   渲染   元素   back   测试   块级元素   颜色   分享   

原文地址：http://www.cnblogs.com/zzmiaow/p/7785060.html