CSS属性display的浅略探讨
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;
} <div class="wrap">
<div class="inline">
inline
</div>inline
<div class="block">
block
</div> block
<div class="inline-block">
inline-block
</div>inline-block
</div>

这里提及下内联元素和块级元素的一些特点:
内联元素:
和其他元素都在一行上;
元素的高度、宽度及顶部和底部边距不可设置;
元素的宽度就是它包含的文字或图片的宽度,不可改变。
<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 中删除。
CSS属性display的浅略探讨的更多相关文章
- 基于CSS属性display:table的表格布局的使用
项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...
- CSS属性Display(显示)和Visibility(可见性)
隐藏一个元素可以通过把display属性设置为“none”,或把visibility属性设置为“hidden”.但是请注意,这两种方法会产生不同的效果. Visibility:hidden可以隐藏某个 ...
- CSS属性中Display与Visibility的不同
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.visibility属性用来确定元素是显示还是隐藏,这用visibility=&qu ...
- CSS的display属性
网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 内联,内嵌,行内属性标签: 1.默认同行可以继续跟同类型标签: 2.内容撑开宽度 3.不支持宽高 4.不支持 ...
- css的display属性小实验
div与span是常用的盒子模型; 区别: div默认是垂直分布(独占一行) span默认是水平分布(一行可以有多个) 通过float属性可以改变div容器的分布方式达到span容器的效果; 下面 ...
- !!!css如何让img图片居中?css的display属性实现图片居中(代码实例)
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...
- css 可继承属性 display:inline-block 历史
1. css 可继承属性 1.1 font font-family:规定元素的字体系列font-weight:设置字体的粗细font-size:设置字体的尺寸font-style:定义字体的风格fon ...
- HTML CSS 属性大全
CSS 属性大全 文字属性 「字体族科」(font-family),设定时,需考虑浏览器中有无该字体. 「字体大小」(font-size),注意度量单位.<绝对大小>|<相对大小&g ...
- 《Head First HTML与CSS》的CSS属性
关于继承的结论. 1.元素选择器的作用强于继承的作用:用户定义强于浏览器默认(详见(3)<Head First HTML与CSS>学习笔记---CSS入门的2) 2.基于类的选择器> ...
随机推荐
- 如何解决liunx链接远程数据库10038错误提示
关于在windows下链接liunx系统下远程数据库报错2003--提示10038的解决方案如下: 在liunx系统中安装配置mysql数据库默认是没有对外开启3600端口,如果出现10038: 1, ...
- 直接插入排序实现(Java)
直接插入排序介绍 直接插入排序的基本操作是将一个记录插入到已经排好序的有序表中,从而得到一个新的.记录数增1的有序表. 怎么理解呢?就是将n个待排序的元素看成一个有序表和一个无序表,开始时有序 ...
- Ubuntu Cannot run program "../SDK/build-tools/xxx/aapt": erro = 2 No such file or directory
64位ubuntu Android Studio Gradle编译时出现如下报错: java.io.IOException: Cannot run program "/home/king/ ...
- Inno Setup入门(二十三)——Inno Setup类参考(9)
今天就简单说一下ProgressBar. TNewProgressBar = class(TWinControl) property Min: Longint; read write; pro ...
- Opserver 初探二《exceptions配置》
上一节主要介绍Opserver的搭建以及redis.sqlserver监控的配置,本节主要介绍异常日志的记录和监控.要实现异常日志的监控我们需要在项目中引入StackExchange.Exceptio ...
- C# 点击打开浏览器
System.Diagnostics.Process.Start("网址");//默认浏览器打开网页System.Diagnostics.Process.Start(@" ...
- Android Studio打开项目提示找不到sdk路径的问题。
问题如图: 这是由于所打开的项目不是本机创建的,所使用的sdk路径不一致所导致. 解决方案: 打开项目所在目录,找到local.properties文件并打开,发现sdk.dir=D\:\\Andro ...
- gensim学习笔记
1.词向量建模的word2vec模型和用于长文本向量建模的doc2vec模型 在Gensim中实现word2vec模型非常简单.首先,我们需要将原始的训练语料转化成一个sentence的迭代器:每一次 ...
- Windows 8.1 硬盘安装 Ubuntu14.04 双系统参考教程及注意事项
硬盘安装,无需光盘.U盘:Win8.1为主,Ubuntu14.04为辅,可将Windows或Ubuntu设置为开机默认启动项:在Ubuntu下可查看.操作Windows系统下的文件:适用于安装和14. ...
- springboot-18-springboot的参数封装
springboot的参数封装, 和springmvc相识 简单参数的封装 1.直接把表单的参数写在Controller相应的方法的形参中,适用于get方式提交,不适用于post方式提交. /** * ...