重庆SEO前端技术博客

重庆SEO前端技术博客

当前位置: 主页 > CSS >

css 的display属性详解

时间:2020-10-30 22:36来源:未知 作者:点击:
display 属性规定元素应该生成的框的类型。 none 此元素不会被显示。 block 此元素将显示为块级元素,此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素,元素前后没有
display 属性规定元素应该生成的框的类型。
css 的display属性详解

none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。

 
  <style type="text/css">
  .x1 {
  display: inline;
  margin-left: 10px;
  }
  /* 把块级元素转为行内元素  也是display的默认值,宽度随元素的内容而变化。*/
  .x2 {
  display: none;
  }
  /* 隐藏该元素 */
  i {
  display: block;
  }
  /*把a标签变为块级元素*/
  .x3 {
  display: inline-block;
  margin-left: 100px;
  margin-top: 100px;
  }
  /*块级元素变为行内块元素*/
  .x4 {
  display: list-item;
  }
  /* 作为列表显示,需要其他css属性 ,也是快应用容器组件*/
  span{
  display:run-in;
  }
  .x5{
  display:run-in;
  }
  </style>
 
  <body>
  <div class="x1">第一个div</div>
  <div class="x1">第二个div</div>
  <div class="x2">第三个div</div>
  <i>我是一个行内元素</i>
  <div class="x3">我是第四个div</div>
  <div class="x4">我是用css list-item</div>
  </body>
  </html>
  说下inline和inline-block它门区别在哪里:
  inline元素使其变为行内元素,对它制定的width与height是没有效果,而且它对应margin和
pading属性的上下方向也没有效果

其他的一些元素,对于我们来说使用的不是很多就不为大家一一介绍:也可以到  https://www.w3school.com.cn/cssref/pr_class_display.asp  查看资料
 
------分隔线----------------------------