搜索

首页  >  文章  >  web前端  >  布局display

布局display

高洛峰
高洛峰原创
2016-11-01 15:16:551627浏览

什么是布局： 浏览器以正确的大小将元素摆放在正确的位置上。

布局：元素摆放的模式。

影响元素大小和位置的css属性： display  position   float  flex


display

设置元素的显示方式 ，包括 大小和位置 , display的取值有：

block

inline

inline-block

none

 

display : block

block元素又称为『块级元素』

QQ图片20161101114531.png

display : inline

QQ图片20161101114531.png

display: line的特性：

1.默认宽度为内容宽度

2.不可设置宽高  ，因为行级元素是不可设置宽高的

3.同行显示。  如果 前序元素和后续元素都是 display:inline  (行级元素) ，那么他们是同行显示的。可以在元素内部换行。

默认display: inline 元素  span , a , label, cite , em, …

 

举个栗子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>display_inline</title>
    <style type="text/css">
    .sample{
        background-color: pink;
    }

    /* 行级元素设置宽高无效 */
    .sample{
        width: 200px;
        height: 200px;
    }

    /* 指定em为块级元素 ，块级元素换行显示（自身相对前序元素是换行的）*/
    em{
        display: block;
    }

    </style>
</head>
<body>

<span>before inline</span>
<span class="sample">display : inline;</span>
<em>after inline</em>
</body>
</html>

QQ图片20161101114531.png

声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：CSS Reset下一篇：CSS Float 以及相关布局模式

相关文章

查看更多