CSS渡一教程学习笔记(八)--行级元素、块级元素、行级块元素。

最新推荐文章于 2024-11-26 18:00:00 发布

zhou_shadow

最新推荐文章于 2024-11-26 18:00:00 发布

阅读量346

点赞数 1

分类专栏： css

本文链接：https://blog.youkuaiyun.com/zhou_shadow/article/details/91981266

版权

css 专栏收录该内容

20 篇文章

订阅专栏

本文深入解析了CSS中的三种主要元素类型：行级元素、块级元素及行级块元素的特征与应用。详细介绍了每种元素如何通过display属性进行转换，并探讨了在实际开发中如何避免常见问题，如图片之间的默认间距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、行级元素: 也被称为内联元素 inline

feature:
1.内容决定元素所占的位置
2. 不可以通过css改变宽高
3.span,strong,em,a,del

2、块级元素: 也被称为block

feature:
1.独占一行
2.可以通过css改变宽高
3.div,p,ul,li.ol,form,address

3、行级块元素: 称为inline-block

feature:
1.内容决定大小
2.可以改变宽高
3.img

注意:
**notice: **
span,div,img,内部具有隐式的属性display,其默认值分别对应如上style,
之所以能展示不同样式是完全由其具有的css中display属性值决定的.可以通过改变
display属性的值，
span{
display:block;
}
来将span变成块级元素，或者行级块元素,可以修改width和height
将div变成内联元素
div{
display:inline;
}
就不可以修改width和height.
notice:
凡是css中的display属性的属性值中带有inline的元素，都带有文字特性，故而img标签中的图片之间都有间距约为4px

  <style>
        img{
            height:100px;
            height:100px;
        }
    </style>

<div style="width:800px;height:800px;">
<img src="finance.jpg"/>
<img src="finance.jpg"/>
<img src="finance.jpg"/>
<img src="finance.jpg"/>
</div>
</body>

结果：
在这里插入图片描述
具有文字属性，而我们都知道html中的默认文字间隔符，无论有多少空格都算作一个文字间隔符，也就是4px;
解决方法也是利用文字属性,写成如下形式

<body>
<div style="width:800px;height:800px;">
<img src="finance.jpg"/><img src="finance.jpg"/><img src="finance.jpg"/><img src="finance.jpg"/>
</div>
</body>

结果:
在这里插入图片描述
图片之间就不会有4px的文字间隔符
notice:
项目开发完成之后，每个标签名会被一个字母代替,也就是压缩，打包会把空格和回车都去掉，也是压缩，故而img标签中可能会出现测试时，样式可以，但
一旦上线之后，就会出错。
例如采用如下方式
img{
margin-left:-4px;//往回硬嵌套
}
虽然在测试时可以消除间隔，但一旦到生产环境，极有可能出错。故而，一般还是采用行样式，也就是把所有的图片写成一行
notice:
图片可以只设置宽或者高，这样页面上就会自动等比例缩小或者扩大，这样就不会变形。
故而，在实际开发中，图片的宽和高通常只设置一个