浅谈CSS的display属性

最新推荐文章于 2022-02-12 23:10:05 发布
最新推荐文章于 2022-02-12 23:10:05 发布
阅读量262 收藏
点赞数
分类专栏： web前端

display可能的属性值：

值描述
none
缺省值。像行内元素类型一样显示
block 
块类型。默认宽度为父元素宽度，可设置宽高，换行显示
inline
行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示
inline-block
默认宽度为内容宽度，可以设置宽高，同行显示
list-item 
像块类型元素一样显示，并添加样式列表标记
inherit 
规定应该从父元素继承 display 属性的值
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>)


display:block、display:inline、display:inline-block等都是很常见的。

1）display:block

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。

block元素可以设置width和height属性，即使设置了宽度，仍然是独占一行。

block元素可以设置margin和padding属性。

2）display:inline

inline元素不会独占一行，多个相邻的inline元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

inline元素设置width和height属性无效。

inline元素的margin和padding属性，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果；但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom不会产生边距效果。

3）display:inline-block

将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内，可以设置width和height属性，也可以设置margin和padding属性。
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>    
  4.     <style type="text/css">    
  5.         #span1 {  
  6.             display:list-item;  
  7.             list-style-position:inside;  
  8.         }  
  9.         #span2 {  
  10.             display:list-item;  
  11.             list-style:square;  
  12.             list-style-position:inside;  
  13.         }  
  14.         #main {   
  15.             display: table;   
  16.             border-collapse: collapse;  
  17.         }   
  18.         #row1 {   
  19.             display: table-row;   
  20.             border: 1px solid grey;  
  21.         }   
  22.         #row2 {   
  23.             display: table-row;   
  24.             border: 1px solid grey;  
  25.         }   
  26.         #col1 {   
  27.             display: table-cell;   
  28.             border: 1px solid grey;  
  29.         }   
  30.         #col2 {   
  31.             display: table-cell;   
  32.             border: 1px solid grey;  
  33.         }   
  34.     </style>    
  35. </head>    
  36. <body>    
  37.     <span id="span1">first</span>  
  38.     <span id="span2">second</span>  
  39.     <div id="main">   
  40.         <div id="row1">  
  41.             <div id="col1">one</div>   
  42.             <div id="col2">two</div>   
  43.         </div>   
  44.         <div id="row2">  
  45.             <div id="col1">three</div>   
  46.             <div id="col2">four</div>   
  47.         </div>   
  48.     </div>   
  49. </body>  
  50. </html>  
注意：

设置display:list-item时，默认list-style为disc，可以设置list-style为square或circle，但一定要设置list-style-position：inside，否则list-style显示不出来。

浅谈CSS的Display属性可能的值
12-13
 compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 table 此元素会作为块级表格来显示（类似 ...
浅谈CSS中display/float/position属性值的相互影响
12-13
有3个属性和布局以及box的创建有关：’display’, ‘position’ 和 ‘float’，彼此交互作用如下： 如果’display’值为’none’，则’position’ 和 ‘float’无作用。这种情况下，不生成box。 否则，如果’...
css中display的属性解析
weixin_30555753的博客
08-22 196
display 属性规定元素应该生成的框的类型。 他有很多属性值，见如下表格： none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会...
css的display属性
chaoguo1234的专栏
03-03 126
css的display属性如下: none: 元素不会生成框，元素不显示，且在页面中不占据位置。 inline: 元素被当成内联元素(行内元素)对待，内联元素的默认值。 inline-block: 块级元素一方面被当成内联元素，因此可以使块级元素和内联元素可以同一行显示，但是另一方面这个元素却可以应用块级元素上的属性比如设置宽高，设置上下边距: 未设置inline-block属性...
CSS display属性
weixin_30826761的博客
04-27 71
问题描述： 修改css的时候本来是想要将1一个input和一个button放到一行上，但是修改完成之后的效果是input在第一行，button在第二行 问题分析： css写的有问题 .int-button-auto{ background: url("../images/btn-open.gif") no-repeat scroll center center tra...
细说CSS中的display属性
在路上
09-25 3109
相信大部分
浅谈CSS3中display属性的Flex布局的方法
01-21
最近在学习微信小程序，在设计首页布局的时候，新认识了一种布局方式display:flex .container { display: flex; flex-direction: column; align-items: center; background-color: #b3d4db; } 编译之后的效果...
CSS的display属性
zhiyinweini3的博客
02-19 146
背景：学习前端知识，自己做页面 目的：学习前端知识 组网图：不涉及 工具：vscode1.41.0 简介：CSS的display属性； css提供的display属性可以设置任意标签为块级，内联或行内块级元素： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
css-display属性
洪海洋的博客
01-17 191
资料： https://www.cnblogs.com/linfangshuhellowored/p/4934406.html https://www.cnblogs.com/zhuzhenwei918/p/6058457.html http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html http://
css display属性
zs19940220的专栏
12-05 1333
在CSS中，使用display属性可以定义盒的类型，如：div、span 盒的类型大致分为两种：inline和block。如：div默认为block（一整行，类似块级），span默认inline ，内容有多少，占用空间就是多少。不过可以通过display来修改默认表现方式。我曾使用过的， display=“none”将元素隐藏 inline-block类型：属于block盒类型
CSS-display属性
CyberPlayer的博客
02-12 492
display 属性规定了 是否/如何 显示元素 每个元素都有一个默认 display 值，并且可以覆盖它 例如，可以将垂直的列表修改为水平列表，原理是将li这个块级元素修改为行内元素 li { display: inline; } 还可以有 span { display: block; } a { display: block; } 此外，通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中。 visibility
css中的display属性
weixin_43800477的博客
08-17 96
改变元素的显示方式 none 不显示 block 将行内元素转换为块元素 inline 将块元素转换为行内元素 inline-block 行内块元素（与其他行内元素共享一行空间，可以指定宽高） ...
CSS——display属性
ShyuDai的博客
10-15 281
div,span { background-color: #00aaee; border: 1px #666 solid; } div{display: inline;} /*使块级元素变为内联元素 就不能设置宽高了,同时也没有上下外边距，但可以设置左右margin*/ span{display: block;} /*使行内元素变成块级元素*/ ...
CSS--display属性
jl381169437的博客
03-15 404
适用于所有元素none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 inline： 指定对象为内联元素。 block： 指定对象为块元素。 list-item：
CSS中的display属性
sinat_36713319的博客
12-16 1572
CSS中的display 属性规定元素应该生成的框的类型，几乎所有的主流浏览器都支持这个属性。 可能的值包括（摘自W3S） 简要说明几个常用的属性 1、none属性 将元素设置为none属性后，元素将不予显示.none属性 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。 1、inline属性： 元素生成行内框，对于该行内框设置属性height和width是没有
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值