display属性 :盒子模型可通过display属性来改变默认的显示类型。
根据CSS可以把HTML标签分为三大元素类型(块状元素、内联元素、内联块元素):
1、块状元素:
a:块状元素是独占一行的,不能与其他元素并排显示。
b:块状元素可以直接定义自己的宽高。
c:块状元素严格遵循盒模型的显示规则的,即都可以应用padding、margin、border这些属性。
d:块状元素一般是可以当做容器来使用,里面可以放文本,也可以放其他的块状元素和内联元素。(但是:p标签和h1-h6,他们也属于块状元素,但是他们的标签里面不能容那其他的块状元素包括自己本身也不可以。)
注:
常见的块状元素:
div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
li
fieldset - 表单字段集
colgroup-col - 表单列分组元素
table-tr 表格及行-单元格
…
2、内联元素
a、像文本一样,自左向右一次排列。知道边缘或者碰到br标签时,才会折行。
b、不能直接定义宽度和高度的。他们的宽高是以自身的内容的大小、多少来决定的。
c、内联元素也遵循盒模型的显示规则,也可以设置padding、margin、border这些属性,但是部分元素在显示的时候会有特殊情况,会显示的不正确;
d、补充:所有不是块状的可见元素,都可以称之为是内联元素。
注:
常见的内联元素:
a –超链接(锚点)
b - 粗体(不推荐)
br - 换行
i - 斜体
em - 强调
img - 图片
input - 输入框
label - 表单标签
span - 常用内联容器,定义文本内区块
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
u - ins下划线
select - 项目选择
…
3、display属性
a:block: 元素类型为块状元素,(大部分的块状元素类型的display值都是block。)
特点:他能让元素的类型转变成块状元素,从而拥有块状元素的特点。
b:inline: 元素的类型为内联元素,(大不部分的内联元素的display值都是inline。)
特点: 能让元素的类型转换成内联元素,从而拥有内联元素的特点。
c:list-item:此元素会作为列表显示。(他是的li的元素类型的值,加了display:list-item以后,会让元素转换成列表类型)
d:none: 隐藏元素(让元素不显示在浏览器里)
f:inline-block:行内块元素
特点:极具有块状元素的特点,又有内联元素的特点
特点:inline-block 支持 使用垂直对齐的属性/vertical-align: top/middle/bottom/baseline/
注:行内块元素,也是属于内联元素。