css学习笔记之display

来源：互联网发布：2017年php好找工作吗编辑：程序博客网时间：2024/05/20 19:32

转自：http://www.cnblogs.com/zhuzhenwei918/p/6058457.html

基本是摘抄这位大佬的总结但是精简了一部分想看全文的可以戳上面链接然后加了些自己的笔记

　display属性是我们在前端开发中常常使用的一个属性，其中，最常见的有：

none
block
inline
inline-block
inherit

第一部分：display:none

　　none隐藏元素并脱离文档流。

应用：

它还可以用于二级下拉菜单的制作中将二级下拉菜单先设置位display:none;,当鼠标滑过一级菜单时，再显示出来（详见《如何实现导航菜单中的二级下拉菜单》）。还可以用于登陆模态框的制作等等。

第二部分：display:block

块级元素特点：

不设宽度时，默认为100%，即父级宽度。默认高度为子元素高度。
支持宽高。
独占一行
块级元素中可以容纳其他块级元素或行内元素。
支持上下左右的margin和padding。
不支持vertical-align。
常见的块级元素由<p><div><h1><li><ul><ol><dl>等等。

注意：p h1 h2 h3 h4 h5 h6 dt 标签不能再嵌套块标签包括自身否则设置css样式将无效

a标签不能再嵌套自身　　

　　通过对一个行内元素设置display:　block;可以将行内元素设置为块级元素，进而设置它的宽高和上下左右的padding和margin。　

应用：

　如果我们经常会制作导航栏，这时就要使用ul li 和a组合的方式，但是<a>是行内元素，我们无法设置它的宽和高，这时，就可以在<a>的样式表中，将之设置为display：block。这样就可以设置它的宽和高，以及上下左右的margin和padding以达到我们想要的效果了。

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{padding: 0;margin:0;list-style: none;}
        ul li{float: left;}
        a{display:block;width: 30px;height: 30px;background: yellow;margin: 5px; text-decoration: none;text-align: center;line-height: 30px;}
    </style>
</head>
<body>
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
    </ul>
</body>
</html>

　　效果如下：

第三部分：display:inline

行内元素特点：

不支持宽高。
其高度一般由其字体的大小来决定，其宽度由内容的长度控制。
只支持左右margin和padding。因此我们可以通过设置左右的padding值来改变行内元素的宽度。
行内元素一般不可以包含块级元素。
换行被解析程才能空格。
非独占一行。
不支持background-position，clear，overflow等等。
常见的行内元素由<a><em><img><span><strong>等等。

第四部分：display：inline-block

对象呈递为内联对象，但是对象的内容作为块对象呈递。

不设置宽度时，内容撑开宽度。
非独占一行，块在一行显示。
行内支持宽高。
代码换行被解析成空格
不支持clear

IE6 IE7-浏览器不支持给块级元素设置inline-block样式。原因和解决方法戳兼容那篇博客。

　　举例说明，我们之前在做横向导航菜单的时候，一般是用ul li a组合，然后将li设置为float，这样就可以得到横向的导航标签了。而现在我们可以通过li和display:inline-block;来实现。

　　代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul,li,a,*{padding:0; margin:0;list-style: none;text-decoration: none;}
        li{display: inline-block;border: thin solid red;}
    </style>
</head>
<body>
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
    </ul>
</body>
</html>

　　效果图如下：

　　但是将padding和margin的值都设置为0，他们之间还会有距离这就是inline元素换行被解析成空格的属性。如果将上述例子中的a标签写成一行，空白符消失，菜单之间也就紧凑起来了。

　　解决方法：我们要明白空白符归根结底是一个字符，只要我们将ul中的字符的大小设置位０，那么空白符也就不会存在了，但是这是a的字体大小也会继承ul的字体大小，那么就不见了，该怎么办，只需要将a中再设置一个字体不为0的大小覆盖

即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       <strong> ul{font-size: 0;}</strong>
        ul,li,a,*{padding:0; margin:0;list-style: none;text-decoration: none;}
        li{display: inline-block;border: thin solid red;<strong>font-size: 15px;</strong>}
    </style>
</head>
<body>
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
    </ul>
</body>
</html>

　　最终得到的效果图如下：

　　我们还可以通过inline-block完成一个常见的三列布局。

　　html代码如下：

1
2
3
4
5
6
7
<div id="header">我是header</div>
<div id="content">
    <div id="left">我是left</div>
    <div id="center">我是center</div>
    <div id="right">我是right</div>
</div>
<div id="footer">我是footer</div>

　　css代码如下：

1
2
3
4
#header,#footer{height: 50px;width:800px;margin:0 auto;background: #ccc;text-align: center;line-height: 50px;}
#content{width:800px;height: 500px;margin: 0 auto;background: #aaa;<strong>font-size: 0;</strong>}//解决inline元素产生的空白符问题
#left,#right{display: inline-block;width: 200px;height: 500px;background: #fadaac;font-size: 30px;}
#center{display: inline-block;width: 400px;height: 500px;background: #dadada;<strong>font-size: 30px;</strong>}//这里一定要重新设置font-size。

　　最终效果图如下：

第五部分：display:inherit

　　规定应该从父元素继承 display 属性的值。举例如下：