行级元素、块级元素、行级块元素

275 阅读2分钟

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">

像这样:

解决的方法:

  1. 凡是带有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>

如图: