008 CSS盒子模型

文章目录

盒子模型

盒子模型

因为盒子有四边，所以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并非必须是四个值

边框-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%时，就变成一个圆

css 复制代码

.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 复制代码

<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 复制代码

<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

css 复制代码

margin: 0 auto;

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

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

外轮廓-outline

css 复制代码

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

css 复制代码

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 复制代码

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

背景色有设置到border下面，前景色会在border没有设置颜色的情况下，显示出color颜色

CSS属性-box-sizing

box-sizing用来设置盒子模型中的宽高的行为

content-box

padding、border都布置在width、height外边

border-box

padding、border都布置在width、height里边