1、块元素
常见的块元素有:<h1> ~ <h6> <p> <div> <ul> <ol> <li>等,其中<div>是经典的块元素
块元素的特点:
1、自己独占一行
2、宽度,高度,外边距,内边距都可以设置
3、宽度默认跟随父一级宽度的100%
4、是一个容器及盒子,里面可以放行内元素或者块元素
文字类元素内不能再放盒子!!!
2、行内元素
常见的行内元素:<a> <strong> <em> <i> <span>等,其中<span>是经典的行内元素
行内元素的特点:
1、一行上可以显示多个行内元素
2、不可以直接对其设置高度、宽度
3、默认的宽度就是其本身内容的宽度
4、行内元素只能容纳文本或其他的行内元素
特殊情况下链接<a>里面可以放块级元素,但是尽量给<a>转换一下模式,以确保正常显示
3、行内块元素
在行内元素中有几个特殊的标签<img><input><td>,他们同时具有行内元素和块元素的特点,有些资料称他们为行内块元素
行内块元素的特点:
1、和相邻行内元素在一行上,但是他们之间会有空白间隙,一行可以显示多个
2、默认宽度、高度就是它本身内容的宽度、高度
3、宽度,高度,外边距,内边距都可以设置
4、元素显示模式的转换
特殊情况下,我们需要元素显示模式的转换,比如我们想要增加链接<a>的触发范围
(1)转换为块元素
display: block;
a {
weight: 200px;
height: 200px;
background-color: blue;
display: block;
}
(2)转换为行内元素
display: inline;
div {
dispaly: inline;
}
(3)转换为行内块元素
display: inline-block;
span {
weight: 200px;
height: 200px;
background-color: blue;
display: inline-block;
}