display属性用来在行内元素,块元素,行内块元素之间进行转化。
常用的属性有:
1、none :元素隐藏且不占位置,相当于不存在,一般用在动态展示效果;
2、block :元素以块元素显示,有些行内元素需要使其具备块元素的特征,需要转化;
3、inline :元素以行内元素显示,块元素有时需要具备行内元素的特征;
4、inline-block :元素以行内块元素显示,同时具备行内元素和行内块元素的特征,支持所有的属性;
一、行内元素:
标签:a、span、em、i、b、strong;
特点:
- 不支持宽、高、margin上下、padding上下;
- 宽高由内容决定;
- 所有盒子并在一行,自动换行;
- 编写代码如果换行,盒子之间会产生间距;
- 子元素如果也是行内元素,父元素可以用text-align属性设置子元素水平对齐方式,用line-height属性值设置垂直对齐方式,一般用来做居中属性;
注意点:由于盒子之间产生了间距,一般需要去除间隙。
方法一:去掉行内元素编写代码之间的换行,会使得代码不美观,一般不适用;
方法二:将行内元素的父级设置font-size为0,行内元素自身再设置font-size,注意权重的问题;
二.块元素。
标签:div p ol ul h1-h6 li dl dt dd form;
特点:
- 支持全部的样式
- 如果没有设置宽度,默认的宽度等于父级元素的宽度;
- 独占一行,即使内容不足一行,剩下的也被空白占据;
注意点:块元素的标签很多含有默认的边框,内外边距,字体大小,还有可能产生塌陷,一般需要初始化处理,去掉默认和清除塌陷;
三、行内块元素
这个元素种类其实是不存在的,只是为了便于理解拆分出来。
特点:
- 支持全部样式;
- 如果没有设置宽高,宽高由内容决定;
- 所有盒子并在一行,自动换行;
- 编写代码如果换行,盒子之间会产生间距;
- 子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式。
实际开发的套路是如果当前元素属性不能满足要求,直接将其转化为行内块元素。