理解与应用css中的display属性

其他 2018-08-17 21:04:22 阅读次数: 0

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

  • none
  • block
  • inline
  • inline-block
  • inherit

　　下面，我将按照顺序将上述几种属性做一个完整的讲解。

第一部分：display:none

　　none这个值表示此元素将不被显示。比如，当我们在浏览网页时，如果看到了某个烦人的广告遮挡了我们的实现，更为可气的是，它还没有关闭的选项，这时（以chrome为例），我们就可以按下F12，打开开发者工具，点击element，然后使用左上角的选择工具选中想要删除的广告，可以看到element中会有高亮的一行或几行代码，右键，点击Add Attribute，然后输入：style="display:none"，这时就可以发现广告不见啦！ 当然display:none的用法绝不是专门用于这里的，它还可以用于二级下拉菜单的制作中将二级下拉菜单先设置位display:none;,当鼠标滑过一级菜单时，再显示出来（详见《如何实现导航菜单中的二级下拉菜单》）。还可以用于登陆模态框的制作等等。

第二部分：display:block

　　使用了display：block;之后， 此元素将显示为块级元素，此元素前后会带有换行符。我们先来回顾以下块级元素是什么，他有什么特点。

　　既然要区分块级元素和行内元素，就得先说说标准文档流了。标准文档流：简称标准流，指的是在不使用其他的与排列和定位相关的css规则时，各种元素的排列规则。于是，我们将“各种元素”分为块级元素和行内元素。（注：实际上还有空元素，如<br>用于换行，<hr>为一条水平线，这里对空元素不做过多讨论）

　　块级元素特点：

  • 总是以一个块的形式表现出来，占领一整行。若干同级块元素会从上之下依次排列（使用float属性除外）。
  • 可以设置高度、宽度、各个方向外补丁（margin）以及各个方向的内补丁（padding）。
  • 当宽度（width）缺省时，它的宽度时其容器的100%，除非我们给它设定了固定的宽度。
  • 块级元素中可以容纳其他块级元素或行内元素。
  • 常见的块级元素由<p><div><h1><li>等等。
  • 块级元素的display属性值默认为block。

　　行内元素特点：

  • 它不会单独占据一整行，而是只占领自身的宽度和高度所在的空间。若干同级行内元素会从左到右（即某个行内元素可以和其他行内元素共处一行），从上到下依次排列。
  • 行内元素不可以设置高度、宽度，其高度一般由其字体的大小来决定，其宽度由内容的长度控制。
  • 行内元素只能设置左右的margin值和左右的padding值，而不能设置上下的margin值和上下的padding值。因此我们可以通过设置左右的padding值来改变行内元素的宽度。
  • 常见的行内元素由<a><em><img>等等。
  • 行内元素一般不可以包含块级元素。
  • 块级元素的display属性值默认为inline。

　　ok!简单回顾了块级元素和行内元素之后，我们就可以进行下一步讲解了。

　　通过对一个行内元素设置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

　　此元素会被显示为内联元素，元素前后没有换行符。在第二部分中，我们介绍了行内元素和块级元素。显然，display:inline的作用即可以将一个块级元素转换成行内元素，那么这个块级元素将不能再设置宽和高以及上下方向的margin和padding。

　　

第四部分：display：inline-block

　　display:inline-block是什么呢？大家对这个属性一定是不陌生的。根据名字，实际上我们就可以才出来它是结合了inline和block的特性于一身。即设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性，又保持了inline元素不换行的特性。

　　举例说明，我们之前在做横向导航菜单的时候，一般是用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元素自身出现的问题，而inline-block结合了inline和block属性，当然也就存在这个问题了。这些空隙是空白符，在浏览器中，空白符是不会被浏览器忽略的，多个连续的空白符浏览器会自动将其合并成一个。我们编写代码时写的空格，换行都会产生空白符。所以自然而然的两个元素之间会有空白符，如果将上述例子中的a标签写成一行，空白符消失，菜单之间也就紧凑起来了。

　　解决方法：我们要明白空白符归根结底是一个字符，只要我们将ｕｌ中的字符的大小设置位０，那么空白符也就不会存在了，但是这是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 属性的值。举例如下：

html代码如下：

1
2
3
4
< div id="parent">
     < div id="first_son"></ div >
     < div id="second_son"></ div >
</ div >  

css代码如下：

1
2
3
#parent{ < strong >display: inline-block;</ strong > font-size: 0; background: #cadafa;width: 400px;height: 300px;}
#first_son{< strong >display: inherit;</ strong > background: #eaedac;width: 200px;height: 100px;}
#second_son{< strong >display: inherit;</ strong > background: #da5dd8;width: 200px;height: 100px;}

效果图如下：

　　

　　即我们先设置了id为parent的元素的display属性值为inline-block，然后将其子元素的display属性值设置为inherit（继承），于是，子div的display属性值继承了父元素的display属性值为inline-block。（注意，我在id为parent的div元素中设置了font-size:0px;这样可以有效解决由inline元素带来的空白符问题。）


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


display的所有属性

{/* CSS 1 */
display: none;
display: inline;
display: block;
display: list-item;
/* CSS 2.1 */
display: inline-block;
display: table;
display: inline-table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;
display: table-caption;
/* CSS 2.1 */
/* CSS 3 */
display: inline-list-item;
display: flex;
display: box;
display: inline-flex;
display: grid;
display: inline-grid;
display: ruby;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;
/* CSS 3 */
/* Experimental values */
display: contents;
display: run-in;
/* Experimental values */
/* Global values */
display: inherit;
display: initial;
display: unset;}

下面就display的重要属性进行讲解，并配合一些相关的例子

基本属性

display: none

none 是 CSS 1 就提出来的属性，将元素设置为none的时候既不会占据空间，也无法显示，相当于该元素不存在。

该属性可以用来改善重排与重绘，同时我也经常用它来做模态窗等效果。

display: inline

inline也是 CSS 1 提出的属性，它主要用来设置行内元素属性，设置了该属性之后设置高度、宽度都无效，同时text-align属性设置也无效，但是设置了line-height会让inline元素居中


同时从上图可以看到两个inline标签之间出现了奇怪的间隔，改间隔的原因是div换行产生的换行空白，解决办法

  • 将两个inline标签写到一行

<body>
  <div class="test">123</div><div class="test">123</div>
</body>

  • 或者使用一点技巧

<div class="main">
    <div class="test">zhan</div>
    <div class="test">123</div>
  </div>

<style>
html{
  -webkit-text-size-adjust:none;/* 使用webkit的私有属性，让字体大小不受设备终端的调整，可定义字体大小小于12px */
}
.main{
  font-size:0;
  *word-spacing:-1px;/* 使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙，减少单词间的空白（即字间隔） */
}
.test{
  display:inline;
  width: 10000px;
  height:10000px;
  border:1px solid;
  font-size:12px;
  letter-spacing: normal;/* 设置字母、字间距为0 */ 
  word-spacing: normal; /* 设置单词、字段间距为0 */
}
</style>

实测chome49浏览器只用设置父元素的font-size为0即可。
目前有很多原生的元素都是inline的，span、a、label、input、 img、 strong 和em就是典型的行内元素元素。
链接：http://www.css88.com/archives...

display: block

设置元素为块状元素，如果不指定宽高，默认会继承父元素的宽度，并且独占一行，即使宽度有剩余也会独占一行，高度一般以子元素撑开的高度为准，当然也可以自己设置宽度和高度。

在设计的过程中有时需要设计一个div宽高都是整个屏幕，整个时候宽度很好设置，可是高度一般很难设置，因为页面一般都是可以滚动的，所以高度一般可变，所以这个时候可以使用一个小技巧，如下。

 <div class="main">
  </div>
<style>
html{
  height: 100%;
}
body{
  height: 100%;
  padding: 0;
  margin:0;
}
.main{
  background: red;
  width: 100%;
  height: 100%;
}
</style>

基本原理：div继承的是父元素body的高度，body是继承html的高度，html是继承的浏览器屏幕的高度。

display: list-item

此属性默认会把元素作为列表显示，要完全模仿列表的话还需要加上 list-style-position，list-style-type

<div>
  <span>111111</span>
  <span>222222</span>
  <span>333333</span>
</div>

<style>
div{
  padding-left:30px;
}
span{ 
  display:list-item;
  list-style:disc outside none;
}
</style>

效果图如下：

通过上面样式设置，就能仿出一个类似的列表，一定要在div上加padding，因为默认的列表之前的·在box外面

display: inline-block

inline-block为 CSS 2.1 新增的属性。 inline-block既具有block的宽高特性又具有inline的同行元素特性。 通过inline-block结合text-align: justify 还可以实现固定宽高的列表两端对齐布局，如下例子：

<div class="main">
  <div class="col col1">111111</div>
  <div class="col col2">222222</div>
  <div class="col col3">333333</div>
  <div class="col col1">111111</div>
  <div class="col col2">222222</div>
  <div class="col col3">333333</div>
  <div class="col fix">&nbsp;</div>
  <div class="col fix">&nbsp;</div>
  <div class="col fix">&nbsp;</div>
  <div class="col fix">&nbsp;</div>
  <div class="col fix">&nbsp;</div>
</div>

<style>
body{
  margin:0;
  padding:0; 
}
.main{
  text-align:justify;
}
.col{ 
  display: inline-block;
  margin-top:10px;
  width:100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}
.col1{
  background: red;
}
.col2{
  background: green;
}
.col3{
  background: blue;
}
.fix{
  height:0; 
  padding:0; 
  overflow:hidden;
}
</style>

效果图如下：


text-align: justify 属性会使行内元素两端对齐，但是要求这些行内元素总宽度至少占满一行，所以在总宽度不足一行的时候这个属性没用，因此在最后需要加上一些占位符。
详情可以查看 张鑫旭老师的博客
Tip: inline-block会形成一个BFC

display: table

table 此元素会作为块级表格来显示（类似table），表格前后带有换行符。CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如，display:table的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式， 而不会产生因为使用了table那样的制表标签所导致的语义化问题。

利用table的特性，我们能够轻易的实现三栏布局，并且能够兼容IE8，如下是使用table属性，实现三栏布局的例子：

<div class="main">
  <div class="tr tr1">
    <div class="td">head1</div>
    <div class="td">head2</div>
    <div class="td">head3</div>
  </div>
  <div class="tr tr2">
    <div class="td">123</div>
    <div class="td">123</div>
    <div class="td">123</div>
  </div>
</div>

<style>
.main{
  display: table;
  width:100%;
  border-collapse: collapse;/*为表格设置合并边框模型：*/
}
.tr{
  display: table-row;
  border-color: inherit;
}
.tr1 .td{
  height:50px;
  vertical-align: middle;
}
.td{
  display: table-cell;
  border: 1px solid;
}
.td:nth-of-type(1){
  width: 100px;
}
.td:nth-of-type(3){
  width: 100px;
}
</style>

效果如下图：

CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table-cell的三层嵌套关系。

所以在一般情况下我们也可以不写外面的table-row元素以及table元素。

display: inline-list-item

我在MDN上面看到有这个属性，但是我实际尝试发现这个属性是不能使用的，在 http://caniuse.com/#search=in... 上面也没有找到这个元素的兼容性，所以应该是不能使用的，支持度全无

display: flex

flex是一种弹性布局属性
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
主要属性有两大类：容器属性和项目的属性

容器属性

  • flex-direction: 属性决定主轴的方向（即项目的排列方向）。

  • flex-wrap: 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

  • flex-flow: 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

  • justify-content: 属性定义了项目在主轴上的对齐方式。

  • align-items: 属性定义项目在交叉轴上如何对齐。

  • align-content: 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

项目属性

  • order: 定义项目的排列顺序。数值越小，排列越靠前，默认为0。

  • flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

  • flex-shrink: 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

  • flex-basis: 属性定义了在分配多余空间之前，项目占据的主轴空间（main
    size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

  • flex: 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

  • align-self:
    属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

以上关于flex的基础知识基本是从阮一峰老师那copy过来的，有兴趣的同学，可以到阮一峰老师的博客深入阅读
http://www.ruanyifeng.com/blo...
http://www.ruanyifeng.com/blo...

实例：实现一个固定宽度但内容可变的列表

目前我有一个需求，有一个列表页，左侧固定，右侧固定，总宽度固定，但是左侧的内容可能会增加，右侧的内容也可能会增加，要求平时一行展示，增加的时候两行展示，左侧两行，右侧还是一行，并且都居中。

先上效果图，不然可能会迷糊：

为了实现上述效果，代码如下

 <div class="main">
    <ul>
      <li>
        <span class="col1">累积的分为：123</span>
        <div class="col2">
          <span>123</span>
          <span>x 10</span>
          <button>submit</button>
        </div>
      </li>
      <li>
        <span class="col1">累积的分为：1234</span>
        <div class="col2">
          <img src="http://7xltvd.com1.z0.glb.clouddn.com/css1.png" alt="">
          <span class="col2-span">x 10</span>
          <button>submit</button>
        </div>
      </li>
    </ul>
  </div>
<style>
.main{
  height: 200px;
  width: 300px;
  border: 1px solid;
}
ul{
  padding: 0px;
  margin-top: 10px;
}
li{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  margin-bottom: 10px;
  border: 1px solid;
}
button{
  height: 20px;
  vertical-align: middle;
  border:0;
  background: green;
  outline:none;
}
img{
  width:30px;
  vertical-align: middle;
}
.col2-span{
  vertical-align: middle;
}
.col1{
  width: 130px;
  padding-left:8px;
}
.col2{
  padding-right: 8px;
  vertical-align: middle;
}
</style>

display: -webkit-box

由于某X5浏览器某些版本还不支持最新版的flex布局，所以为了保证良好的运行，建议还是使用display: box，box和flex布局的主要差别如下:

容器属性

  • display: box 该显示样式的新值可将此元素及其直系子代加入弹性框模型中。Flexbox 模型只适用于直系子代。

  • box-orient 值：horizontal | vertical | inherit
    框的子代是如何排列的？还有两个值：inline-axis（真正的默认值）和 block-axis，但是它们分别映射到水平和垂直方向。

  • box-pack 值：start | end | center | justify 设置沿 box-orient
    轴的框排列方式。因此，如果 box-orient 是水平方向，就会选择框的子代的水平排列方式，反之亦然。

  • box-align 值：start | end | center | baseline | stretch 基本上而言是 box-pack
    的同级属性。设置框的子代在框中的排列方式。如果方向是水平的，该属性就会决定垂直排列，反之亦然。

项目属性

  • box-flex 值：0 | 任意整数 该子代的弹性比。弹性比为 1 的子代占据父代框的空间是弹性比为 2 的同级属性的两倍。其默认值为0，也就是不具有弹性。

用box改造上述例子
基本只修改了容器元素li的属性，如下所示

li{
  display: -webkit-box;
  -webkit-box-orient:horizontal;
  -webkit-box-pack: justify;
  -webkit-box-align: center;
  padding: 10px 0;
  margin-bottom: 10px;
  border: 1px solid;
}

display: inline-flex

我发现在chrome条件下设置了inline-flex，其子元素全部变成了inline模式，设置flex并没有什么用，不知道是不是我写的有问题，目前没找到这个属性的用法

<div class="main">
    <div class="sp1">123</div>
    <div class="sp1">123</div>
  </div>
<style>
.main{
  display: -webkit-inline-flex;
  justify-content: center;
}
.sp1{
  flex:1;
}
</style>

其他

以下属性是实验性质的，支持度都很低，不建议使用，知道就行。

  • run-in: 此元素会根据上下文作为块级元素或内联元素显示；

  • grid: 栅格模型，类似block

  • inline-grid: 栅格模型，类似inline-block

  • ruby, ruby-base, ruby-text, ruby-base-container,ruby-text-container

  • contents

转自：CSS display 属性详解 作者: zhanfang


猜你喜欢

转载自blog.csdn.net/Liuqz2009/article/details/79315667
今日推荐
周排行
django中south支持多数据库
2、实时同步项目
http协议状态码解析
codeup 又一版 A+B(C++)
js三座大山之外的其他知识点
正向代理VS反向代理 总结
规范的测试流程 （转自51testing）
3、python-连接sql server
转~Jenkins pipeline：pipeline 使用之语法详解
cookie与sessio系列（一）：基本知识入门
每日归档
更多
2024-06-11(0)
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(10)
2024-06-03(52)
2024-06-02(4)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022