css display属性的用法笔记

原创 国哥笔记  2018-11-16 20:14  阅读 917 views 次

display属性定义及用法

display属性在网页布局中用的非常之多,它的属性值也比较多,但是用的多的就block、inline-block、inline和none属性值,其它属性值很少见,所有在这就重点介绍一下常用的这几个属性值的用法;

在css中,display属性是用来定义元素应该生成的框的类型,经常用来将块状元素转换为内联元素、将内联元素转换为块状元素或者将块状元素/内联元素转换为inline-block元素,inline-block元素既有块状元素的特性已有内联元素的特性。

display属性语法格式

css语法:display:none/inline/block/inline-block/list-item/run-in/table/inline-table/table-row-group/table-header-group/table-footer-group/table-row/table-colume-group/table-column/table-cell/table-caption/inherit;
JavaScript 语法: object.style.display="inline";

display属性值说明

  • none:设置元素不显示;
  • block:设置元素为块级元素;
  • inline:设置元素为内联元素;
  • inline-block:行内块元素,既有块状元素的特性已有内联元素的特性;
  • list-item:设置元素为列表;
  • run-in:根据上下文作为块级元素或内联元素显示;
  • compact / 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属性的值;

以上属性值除了none、block、inline和inline-block以外都很少使用,以下就具体说一下这四个属性值的用法,其余不常用的属性值就省略不介绍了;

 

display属性的none属性值

元素的display属性的属性值设置为none时,该元素将隐藏不显示,而其会脱离文档流,不占据网页空间;非常相关:css隐藏元素之display和visibility属性的用法笔记

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>display属性的none属性值</title>
<style type="text/css">
body{background-color: #aaa;}
.div{width:400px;height:60px;border:1px solid;margin-top:10px;}
.none{display:none;}
</style>
</head>
<body>
<div class="div">元素1</div>
<div class="div none">元素2</div>
<div class="div">元素3</div>
</body>
</html>

运行结果:

display属性的none属性值

说明:

元素2的display属性设置了none后,元素消失不见了。该属性值在网页布局中经常用到,比如网页中的一些模块,需要点击后显示/隐藏,当然需要结合js一起才能实现这样的效果。

display属性的block属性值和inline属性值

一、block(块状元素)特点

  1. 元素不设置宽度的时候,宽度会撑满一行;
  2. 元素单独占据一整行,第二个元素从第二行开始;
  3. 元素可以设置宽高;

二、Inline(内联元素)特点

  1. 元素内容决定宽度和高度;
  2. 设置宽度和高度是没有效果的;
  3. 代码换行被解析成空格;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>display属性的block属性值和inline属性值</title>
<style type="text/css">
body{background-color: #aaa;}
.div{width:400px;height:150px;border:1px solid;margin-top:8px;}
.block{display:block;height:30px;}
.inline{display:inline;height:30px;width: 200px;}
.border{border:1px solid red;margin-top:15px;}
</style>
</head>
<body>
<div class="div">
<div class="border block">块状元素1</div>
<div class="border block">块状元素2</div>
<div class="border inline">内联元素1</div>
<div class="border inline">内联元素2</div>
</div>
</body>
</html>

运行结果:

display属性的block属性值和inline属性值

说明:

1、div默认是块状元素,块状元素会独占一行;常见的块状元素标签:div标签、p标签、h1~h6标签、form标签、table标签、dl标签、ol标签、ul标签、li标签等。

2、内联元素设置宽高没效果,紧紧围绕着元素内容,设置外边距也没效果;常见的内联元素标签:a标签、b 标签、br标签、img标签、input标签、select标签、span标签、textarea标签等。

display属性的inline-block属性值

inline-block属性值兼具了块状元素和内联元素的特点,所有被叫作内联块状元素;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>display属性的inline-block属性值</title>
<style type="text/css">
body{background-color: #aaa;}
.div{width:400px;height:150px;border:1px solid;margin-top:8px;}
.ib{display:inline-block;height:50px;width:100px;}
.border{border:1px solid red;margin-top:15px;}
</style>
</head>
<body>
<div class="div">
<div class="border ib">内联块状元素1</div>
<div class="border ib">内联块状元素2</div>
<div class="border ib">内联块状元素3</div>
<div class="border ib">内联块状元素4</div>
</div>
</body>
</html>

运行结果:

display属性的inline-block属性值

说明:内联块状元素不会单独占据一整行,设置宽高也会有效;

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-display.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情