博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS display属性的值及作用
阅读量:4682 次
发布时间:2019-06-09

本文共 2289 字,大约阅读时间需要 7 分钟。

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-column-group|table-column|table-cell|table-caption|inherit

其中常用的的有none、inline、block、inline-block。分别的意思是:

1、none: 元素不会显示,而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden, 是保留元素的空间的。

2、inline: display的默认属性。将元素显示为内联元素,元素前后没有换行符。我们知道内联元素是无法设置宽高的,所以一旦将元素的display 属性设为 inline, 设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度(font-size)和padding。

3、block: 将元素将显示为块级元素,元素前后会带有换行符。设置为block后,元素可以设置width和height了。元素独占一行。

4、inline-block:行内块元素。这个属性值融合了inline 和 block 的特性,即是它既是内联元素,又可以设置width和height。

看例子

.inline{    display:inline;     width:100px;     height:100px;     padding:10px;     background-color:red;}.block{    display:block;     width:100px;     height:100px;     padding:10px;    background-color:green;}.inline-block{    display:inline-block;     width:100px;    height:100px;     padding:10px;    background-color:blue;}
inline
inline
block
block
inline-block
inline-block

这里提及下内联元素和块级元素的一些特点:

内联元素:

  和其他元素都在一行上;

   元素的高度、宽度及顶部和底部边距不可设置;
   元素的宽度就是它包含的文字或图片的宽度,不可改变。

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

块级元素:

   每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行);

   元素的高度、宽度、行高以及顶和底边距都可设置。
   元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

常用的块状元素有:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form

内联块状元素:

   和其他元素都在一行上;

   元素的高度、宽度、行高以及顶和底边距都可设置。

常用的内联块状元素有:

<img>、<input>

 

其他display的属性值不是很常用,其具体的含义如下:

list-item:     此元素会作为列表显示。

run-in:     此元素会根据上下文作为块级元素或内联元素显示。
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 属性的值。
另外有两个已经废除的属性值:
compact     CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker     CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。

 

转载于:https://www.cnblogs.com/thislbq/p/5914210.html

你可能感兴趣的文章
open_basedir restriction in effect,解决php引入文件权限问题
查看>>
微信小程序获取用户信息解密AES并且注意如何获取unionid
查看>>
JavaScript设计模式----1
查看>>
Qt实现半透明遮罩效果
查看>>
erlang调优方法
查看>>
Mysql linux -N命令
查看>>
daily scrum 12.5
查看>>
linux-ftp install
查看>>
NetXray
查看>>
局域网基本工作原理
查看>>
让历史告诉我们未来
查看>>
UVa540 Team Queue
查看>>
android 练习之路 (八)
查看>>
tp5 中 model 的聚合查询
查看>>
android wear开发之:增加可穿戴设备功能到通知中 - Adding Wearable Features to Notifications...
查看>>
几种内核对象的受信与非受信状态
查看>>
压缩文件函数库(转载)
查看>>
【转】ubuntu12.04没有/var/log/messages解决
查看>>
几种队列
查看>>
Oracle EBS 初始化用户密码
查看>>