理解CSS盒子模型与布局-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41496127/article/details/89466461

本文详细介绍了CSS中的盒子模型，包括盒子的组成部分：大小、边框、内边距和外边距。讲解了边框的宽度、样式和颜色设置，以及内边距和外边距的用法。同时，讨论了块级元素和行内元素的区别，以及display属性在控制元素显示方式中的应用。最后提到了实现图像透明的方法——opacity属性。

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

CSS盒子模型：

1.什么是盒子，盒子长什么样？

盒子就是放内容的容器，包括：
（1）大小（width、height）
（2）边框（border）
（3）内边距（padding）
（4）外边距（margin）
在这里插入图片描述

2.边框：border（top,right,bottom,left）

1.边框的宽度：border-width:5px;
2.边框的样式：border-style:solid;
3.边框的颜色：border-color:red;
（1）边框颜色分别设置：

<style type="text/css">
	p:hover{
		border-top-color: red;
		border-right-color: blue;
		border-bottom-color: yellow;
		border-left-color: green;
		}
</style>

（2）颜色综合设置

<style type="text/css">
	p:hover{
		border-color:red yellow green blue;/*顺时针*/
</style>

（3）边框综合设置：

<style type="text/css">
	p:hover{
		border:2px dashed green;
</style>

（4）边框线对照表：
在这里插入图片描述

3.内边距：padding（top,right,bottom,left）

与边框原理基本相同，举一反三即可

4.外边距：margin（top,right,bottom,left）

与边框原理基本相同，举一反三即可

5.块级元素与行内元素：

1.块级元素：元素在显示时会独占一行，并同时具有宽、高、内外边距特征，如ul，li，p标签等
2.行内元素：在显示时通常不会以新行开始，横向排列，到最右端自动折行，如a，img标签等
3.< div >< /div >：块级元素容器
4.< span >< /span >：行内元素容器，常用于分隔设置一个元素内部单行的部分元素

6.display属性：用于指定HTML标签的显示方式

常用属性：
在这里插入图片描述

7.图像透明的实现：

使用opacity属性，参数范围（0-1）

<style type="text/css">
	img{
		opacity: 0.5;		//透明度50%
	}
</style>