文章目录
盒子模型
因为盒子有四边，所以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%时，就变成一个圆
.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>
背景色有设置到border下面，前景色会在border没有设置颜色的情况下，显示出color颜色
CSS属性-box-sizing
box-sizing用来设置盒子模型中的宽高的行为
content-box
padding、border都布置在width、height外边
border-box
padding、border都布置在width、height里边