CSS属性之display

display属性用来设置或检索对象是否及如何显示

默认值:对于HTML文档来说,这取决于你使用的标签

继承性:不继承

支持动画:否

display是一个很重要的CSS属性,设定的值会对一个HTML元素的内部和外部表现造成影响

值列表:

none:不显示该元素

    给display设置none,浏览器就不会渲染该元素,虽然元素存在DOM中,可以通过JS访问,但是从视觉上,是完全消失。

block:块级元素

    最常用的值了,设置block会让元素变得如DIV那样,独占一行

inline:内联元素

    <span>等标签的默认值,内联元素总是一个接一个的排列,没法设置width和height属性,边距的表现也和block不同

inline-block:内联块级元素

    从名字上就可以看出来,该值复合inline和block的一些特性,可以这么说,inline-block,就是不独占一行的block

flex:伸缩盒

    对于其他元素来说,一个display为flex的元素和block没有任何区别,但对设置了该值的元素内部,就很有趣了

inline-flex:伸缩盒

    同于flex,对其他元素来说,设置了display为inline-flex的元素和一个正常的inline没有区别,影响仅仅在元素的内部

list-item:列表项目

    如同<li>标签那样子

接下来是table系列

table:表格

    如同<table>标签那样

inline-table

    table值的inline-block版本

table-row:行

    类似<tr>

table-cell:单元格

    类似<td>

table-row-group:指定对象作为表格行组。

    类似于标签<tbody>

table-column:表格列。

    类似于标签<col>

table-column-group:表格列组显示。

    类似于标签<colgroup>

table-header-group:表格标题组。

    类似于l标签<thead>

table-footer-group:表格脚注组。

    类似于<tfoot>

对display属性的一些理解:

    display属性对元素有两个方面的影响

    一是元素外在表现,也就是说,对兄弟元素和父元素的影响

    二是元素的内在表现,也就是说,不同的display值,元素是如何对待它的子元素的。

    比如说,把一个元素的display设置为flex,那么对于元素内在表现来说,渲染方式完全变了,而对于其他的兄弟元素,父元素来说,该元素和block,table没有任何区别。

    所以说,这么多的属性值,最基本的就是inline,block,inline-block这三个值,内在表现各有千秋,但是外在表现都由这三个来表现的。

时间: 2024-12-07 18:26:20

CSS属性之display的相关文章

CSS属性中Display与Visibility的不同

大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.visibility属性用来确定元素是显示还是隐藏,这用visibility="visible|hidden"来表示,visible表示显示,hidden表示隐藏.当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置.例: <script language="JavaScript"

CSS属性:display详解

display在w3c上的定义是:display 属性规定元素应该生成的框的类型. display有许多值,这里详细讲block,inline-block,inline,table-cell. block:此元素将显示为块级元素,此元素前后会带有换行符 inline:默认.此元素会被显示为内联元素,元素前后没有换行符. inline-block:行内块元素.(CSS2.1 新增的值) table-cell:此元素会作为一个表格单元格显示(类似 <td> 和 <th>) block元

Day49:CSS属性操作(文本、背景、边框、列表、display、边距)

一.CSS属性操作 1.CSS text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如:  red p { color: rebeccapurple; } 水平对齐方式 text-align 属性规定元素中的文本的水平对齐方式. left       把文本排列到左边.默认值:由浏览器决定. right     把文本排列到右边. center 把文

CSS布局 ——从display,position, float属性谈起

页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Mastery>后总结一下. 让我们从基础的CSS知识谈起,相信很多初学者和小弟一样不明白CSS原理,一味追求效果,结果页面漏洞百出,错误匪夷所思,关于盒模型我就不多说了,网上很多,注意一下IE和其他浏览器(W3C规范)的区别就好了. 块级元素与行内元素 首先谈谈人们经常提及的块级元素和行内(内联)元素 p, ul

CSS布局 ——从display,position, float属性谈起(转)

CSS布局 ——从display,position, float属性谈起 页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Mastery>后总结一下. 让我们从基础的CSS知识谈起,相信很多初学者和小弟一样不明白CSS原理,一味追求效果,结果页面漏洞百出,错误匪夷所思,关于盒模型我就不多说了,网上很多,注意一下IE和其他浏览器(W3C规范)的区别就好了. 块级元

css中如何使用border属性与display属性

原文:css中如何使用border属性与display属性 border属性介绍# border属性设置元素边框. 边框3个要素如:粗细.线型.颜色. 边框线型属性值说明表如:# 属性指 描述 none 定义无边框. hidden 与 "none" 相同.不过应用于表时除外,对于表,hidden 用于解决边框冲突. dotted 定义点状边框.在大多数浏览器中呈现为实线. dashed 定义虚线.在大多数浏览器中呈现为实线. solid 定义实线. double 定义双线.双线的宽度等

CSS属性选择器

属性选择器 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" type="text/css" href="./css/属性选择器.css&qu

CSS属性

CSS样式属性 一.字体 1.font-family:Tahoma,Arial,"Hiragino Sans GB";字体,第一种字体不能显示时,用第二种字体 2.font-size:xx-small or 10px字体大小:绝对大小:xx-small.x-small.medium.large.x-large.xx-large.x-large.xx-l相对大小:large smaller 使用数字和度量单位绝对单位:px:显示器像素个数mm.cm.in:毫米 厘米 英寸,使用这类单位,

CSS深入研究:display的恐怖故事解密(2) - table-cell

上集<CSS深入研究:display的恐怖故事解密(1) - display-inline>已经把display的属性列表拉出来溜了,发现在这个属性恐怖面貌其实都是脆弱的伪装.除了部分常用属性外,其他的都是传说哥.既然是传说哥,请不要迷恋.就让传说继续传说着吧.这次我们来搞定table-cell这个货.(table-cell:IE6.7不支持) table-cell这个家伙在国外的网站中偶有露头,天朝由于IE6.7这两个货泛滥成灾,难有发挥,那么,这个家伙到底能干些什么呢?先让我们来研究下ta