上一篇整理了下css中举足轻重的margin,今天再整理另一个网页中必不可少的属性——display
什么是display
display,英文直译,展览,显示,顾名思义,它就是元素在页面上显示的方式
display怎么用
display: none; //不显示
display: inline; //按行内元素显示
display: block; //按块元素显示
display: inline-block; //置换元素,即按行内元素显示又有块元素属性
行内元素(内联元素)和块级元素
行内元素有以下几个特点:
1,和其他元素都在一行上
2,宽度只与内容有关
3,高、行高及上下内外边距不可改变
4,行内元素只能容纳文本和其他行内元素
比如:a,img,input,label,strong,span等元素
块级元素有以下特点:
1,总是在新行上开始
2,宽度可设置,在没有设置的时候,是它的容器的100%
3,高、行高及上下内外边距都可控制
4,块级元素里可容纳块级元素、文本和其他行内元素
比如:div,form,h1,h2,ul,ol,p,table等元素
上面将元素类型分为了行内元素和块级元素,但是这种分类也不是绝对的,可以利用css中的display将行内元素转变为块级元素,也可将块级元素转变为行内元素。另外,从元素本身的特点来说,元素还有一种分类方式,就是替换(置换)和非替换(非置换)元素。
替换(置换)和非替换(非置换)元素
替换(置换)元素就是在(x)html中看不到实际内容,浏览器会根据元素的标签和属性来决定元素的具体显示内容
比如:<img>在(x)html中看不到图片的实际内容,但浏览器会根据<img>标签的src属性来读取图片信息并显示出来
input、select、textarea、object等都是替换元素,大多数的替换元素都是行内元素,但是拥有块级元素的属性,可以设置宽高等
非替换(非置换)元素就是将其内容直接表现给用户端(例如浏览器),(x)html的大多数元素都是非替换(非置换)元素。段落<p>是一个非替换元素,段落内容全被显示在<x>html中。
display:inline-block
其他都容易理解和使用,这里重点介绍下display: inline-block;
display:inline-block是将对象呈递为内联对象,但是对象的内容作为块对象呈递,简单点说就是又有行内元素的特点又有块级元素的特点
什么时候用display:inline-block
很多时候我们需要将几个块元素在一行显示,很多时候我们第一想到的是用float,但是float有很多的隐患和bug,比如:在IE下会出现margin边距加倍的bug、必须清除浮动、限高等问题,所以这时候我们就可以使用display:inline-block
IE下块元素如何实现display:inline-block效果
虽然大多数浏览器都已实现了display:inline-block属性,但是在IE6和IE7不能支持,使用display:inline-block在这两个浏览器会触发layout,使得块元素此时虽然是行布局,却不会呈递为内联对象
两种方法:
1,先用display: inline-block触发块元素,再用display: inline呈递为内联对象(display:inline-block和display:inline需写在两个不同的css)
div {display: inline-block;}
div {display: inline;}
2,先用display:inline直接将块元素设置为内联对象呈递,再用zoom:1触发layout
div {display: inline: zoom:1;}