008 CSS盒子模型

news2025/1/16 18:07:10

文章目录

盒子模型
- 内容-宽度和高度
- 内边距-padding
- 边框-border
- - 圆角-border-radius
- 外边距-margin
- - 上下margin的传递
  - 上下margin的折叠
  - 块级元素的水平居中
  - 行内级元素(包括inline-block元素)的水平居中
- 外轮廓-outline
- 盒子阴影-box-shadow
- 文字阴影-text-shadow
- 行内非替换元素的特殊性
- CSS属性-box-sizing

盒子模型

盒子模型
因为盒子有四边，所以margin/padding/border都包括top/right/bottom/left四个边

内容-宽度和高度

设置内容是通过宽度和高度设置的:
宽度设置:width
高度设置:height
注意:对于行内级非替换元素来说，设置宽高是无效的

另外还可以设置如下属性:
min-width:最小宽度，无论内容多少，宽度都大于或等于min-width
max-width:最大宽度，无论内容多少，宽度都小于或等于max-width
移动端适配时，可以设置最大宽度和最小宽度
不常用的两个属性:
min-height:最小高度，无论内容多少，高度都大于或等于min-height
max-height:最大高度，无论内容多少，高度都小于或等于max-height

width不设置时默认为auto，交给浏览器来决定，块级元素独占父元素的一行，行内级元素包裹内容

内边距-padding

padding属性用于设置盒子的内边距，通常用于设置边框和内容之间的间距
padding有四个方向:padding-top、padding-right、padding-bottom、padding-left

padding缩写是上右下左

padding并非必须是四个值
padding其他值

边框-border

border用于设置盒子的边框
边框具备宽度width、样式style、颜色color
边框宽度
border-top-width、border-right-width、border-bottom-width、border-left-width
border-width是简写属性
边框颜色
border-top-color、border-right-color、border-bottom-color、border-left-color
border-color是简写属性
边框样式
border-top-style、border-right-style、border-bottom-style、border-left-style
border-style是简写属性
边框的样式

圆角-border-radius

border-radius用于设置盒子的圆角
常见的值
数值:通常用来设置小的圆角
百分比:通常用来设置一定的弧度或圆形

如果一个元素是正方形，设置border-radius大于或等于50%时，就变成一个圆

.box{
	width: 100px;
	height: 100px;
	border: 5px solid #0f0;
	border-radius:50%
}

border-radius事实上是一个缩写属性
将border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius简写为一个属性

外边距-margin

margin属性用于设置盒子的外边距，通常用于元素和元素之间的间距
margin包括四个方向:margin-top、margin-right、margin-bottom、margin-left

<html>
	<head>
		<style>
			.box {
				width: 300px;
				height: 300px;
				background-color: #f00;

				padding-left: 30px;
				box-sizing: border-box;
			}
			
			.container {
				width: 100px;
				height: 100px;
				background-color: #0f0;
			}
		</style>
	</head>

	<body>

		<div class="box">
			<div class="container"></div>
		</div>
	</body>

</html>



<html>
	<head>
		<style>
			.box {
				width: 300px;
				height: 300px;
				background-color: #f00;
				
				overflow: auto;
			}
			
			.container {
				width: 100px;
				height: 100px;
				background-color: #0f0;

				margin-left: 30px;
				margin-top: 30px;
			}
		</style>
	</head>

	<body>

		<div class="box">
			<div class="container"></div>
		</div>
	</body>

</html>

上下margin的传递

margin-top传递
如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
margin-bottom传递
如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素

如何防止出现传递问题
给父元素设置padding-top\padding-bottom
给父元素设置border
触发BFC:设置overflow为auto

建议
margin一般用来设置兄弟元素之间的间距
padding一般用来设置父子元素之间的间距

上下margin的折叠

垂直方向上相邻的2个margin(margin-top、margin-bottom)有可能会合并为1个margin，这种现象叫做collapse(折叠)
水平方向上的margin(margin-left、margin-right)永远不会collapse
折叠后最终值的计算规则
两个值进行比较，取较大的值
如何防止:只设置其中一个元素的margin

两个兄弟块级元素之间上下margin的折叠
父子块级元素之间margin的折叠

块级元素的水平居中

block box width = width + padding + border + margin

margin: 0 auto;

行内级元素(包括inline-block元素)的水平居中

在父元素中设置text-align:center

外轮廓-outline

a {
	outline: none;
}
/*
a:focus {
	outline: none;
}
*/

outline表示元素的外轮廓
不占用空间
默认显示在border的外面
outline相关属性
outline-width:外轮廓的宽度
outline-style:取值跟border的样式一样，比如solid、dotted等
outline-color:外轮廓的颜色
outline:outline-width、outline-style、outline-color的简写属性

应用:
去除a元素、input元素的focus轮廓效果

盒子阴影-box-shadow

box-shadow属性可以设置一个或者多个阴影
每个阴影用<shadow>表示
多个阴影之间用逗号,隔开，从前到后叠加

<shadow>的格式
none .|. <shadow># <shadow> = inset? && <length>{2,4}. && <color>?

第1个<length>:offset-x，水平方向的偏移，正数往右偏移
第2个<length>:offset-y，垂直方向的偏移，正数往下偏移
第3个<length>:blur-radius，模糊半径
第4个<length>:spread-radius，延伸半径
<color>:阴影的颜色，如果没有设置，就跟随color属性的颜色
inset:外框阴影变成内框阴影
测试网站:
https://html-css-js.com/css/generator/box-shadow

文字阴影-text-shadow

text-shadow: 5px 5px 5px orange,10px 10px 5px blue,15px 15px 5px green;

<shadow>的常见格式
none .|. <shadow-t># <shadow-t> = [ <length>{2,3} && <color>? ]
相当于box-shadow，它没有spread-radius的值
测试网站:
https://html-css-js.com/css/generator/text-shadow

行内非替换元素的特殊性

以下属性对行内级非替换元素不起作用
width、height、margin-top、margin-botton

以下属性对行内级非替换元素的效果比较特殊
padding-top、padding-bottom、上下方向的border

<html>
	<head>
		<style>
			.content {
				background-color: #f00;
				color: white;
			/*内容: width/height压根不生效*/
			width: 300px;
			height: 300px;
			
			/*内边距: padding*/
			/*特殊: 上下会被撑起来，但是不占据空间*/
			padding: 50px;


			/*边框: border*/
			/*特殊: 上下会被撑起来，但是不占据空间*/
			border: 50px solid orange;
			
			/*外边距:margin*/
			/*特殊: 上下的margin是不生效的*/
			margin: 50px;

			}
		</style>
	</head>

	<body>
		<span class="content">
			span元素
		</span>
		aaa
		<div>bbb</div>
	</body>


</html>