1.行级元素(inline)
span、strong、em、a、del
内容决定元素所占位置,不可以通过css改变宽高
<span>123</span>123
span{
background-color:red;
width:100px;
height:100px;
}
运行页面:
2.块级元素(block)
div、p、ul、li、ol、form、address
独占一行,可以通过css改变宽高
<div>123</div>123
div{
background-color:red;
width:100px;
height:100px;
}
运行页面:
3.行级块元素(inline-block)
img
内容决定元素所占位置,可以通过css改变宽高
<img src="nn.jpeg">123
img{
width:100px;
}
图片的宽高一般只设一个,另一个值会根据所设的值等比列缩放。
运行页面:
几张图片排列在一起有时会有空隙
<img src="nn.jpeg">
<img src="nn.jpeg">
<img src="nn.jpeg">
像这样:
解决的方法:
- 凡是带有inline的元素,都有文字特性。所以去掉空格就可以。
<img src="nn.jpeg"><img src="nn.jpeg"><img src="nn.jpeg">
img{
margin-left:-4px;
}
将代码打包放到服务器上要压缩代码,压缩的一种手段是会把单词用一个字母代替,另一种手段是会去掉空格和回车。所以写好的代码往服务器上上传的时候会自动的把空格和回车去掉。
用这种手段处理图片,在传到线上之后就和测试结果不一样。所以这种方法不好。
元素的性质可以通过 display 更改
元素都会有一个隐形的css属性:
行级元素 display:inline; 、块级元素 display:block; 、行块级元素 display:inline-block;
改变display的值就可以改变这个元素的性质
<span>123</span>123
运行页面:
span
的inline属性改为block属性
span{
display:block;
}
运行页面:
元素嵌套
行级元素只能嵌套行级元素、块级元素可以嵌套任何元素
特殊的: p标签不能嵌套div、a标签不能套a标签
p标签嵌套div,在网页中会被砍开
<p>
<div></div>
</p>
如图: