display属性是我们写css代码,做css布局经常会用到的属性,把display用熟练了,写起css布局得心应手。
首先,所有主流浏览器都支持 display 属性。其次,我们都知道display 属性规定元素应该生成的框的类型。默认值:inline
我们常用的display属性值有:
- inline
- block
- inline-block
- none
下面我就详细讲讲有关display的知识点:
NO.1: display:none和visibility:hidden的区别
CSS display:none;
使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;
visibility:hidden;
使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。
NO.2:display:inline、display:block和display:inline-block有什么区别呢?
inline特性
常用的inline就是文字和图片,而且给它设置属性height和width是没有用的,inline
不单独占一行,其它元素会紧跟其后。“`如何把inline元素转换成“块”元素?可用display:block,这样就可以添加宽高了。(display:table也可以使其变成块元素)
block特性
块对象
block
是可以设置宽高的,block
要单独占一行。然而,当我们即需要div有宽高,又不希望它独占一行怎么办?往下看。
inline-block特性
这个时候我们就需要使用inline-block了,
inline-block既具有block的宽高特性又具有inline的同行元素特性。
也就是说,当我们想要让一个元素既不独占一行,又可以设置其宽高属性的时候,我们就可以选择inline-block了。在IE6/7下padding对inline的宽高是对其没影响的。
总结:
行内元素特点
1、和其他元素都在一行上;
2、元素的高度、宽度、行高及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
块级元素特点
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
常见的块状元素有:
<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,
<address>,<blockquote>,<form>
常见的内联元素有:
<a>,<span>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>,
<img>,<input>,<select>,<textarea>,<button>
以下来源于别人的博客总结:
常用display
1、div{display:block} 有换行作用。
案例:图片做背景,隐藏图片上文字http://www.divcss5.com/jiqiao/j55.shtml
2、div{display:None } 隐藏对象及对象内容。
案例:CSS隐藏HTML内容 http://www.divcss5.com/jiqiao/j55.shtml
3、div{display:Inline } 在一排显示。
代表案例,对li列表默认一排显示li{display:Inline }