本文详细介绍了CSS的文档流、盒模型概念，包括元素在文档流中的特点、盒模型的组成部分（内容区、边框、内边距和外边距）、水平和垂直布局规则，以及行内元素、边框样式、轮廓、圆角等特性。深入讲解了外边距折叠和不同元素显示模式，最后涉及了默认样式、尺寸计算和常见样式调整技巧。
目录
01.文档流
1.1 文档流（normal flow）
网页是一个多层的结构，一层摞着一层
通过css可以分别为每一层设置样式
作为用户来说只能看到最顶上一层
这些层中最底下的一层称为文档流，文档流是网页的基础
我们所创建的元素默认都是在文档流中进行排列
1.2 元素状态
元素状态：
在文档流中
不在文档流中
1.3 元素在文档流中特点
块元素:
*在页面中独占一行
默认宽度是父元素的宽度
默认高度被内容撑开
行内元素:
不会独占页面一行，只占自身大小
在页面中从左向右水平排列，如果一行放不下，会换到第二行
默认宽度和高度都被内容撑开
02.盒模型
2.1 内容区
内容区（content），元素中的所有子元素和文本内容都在内容区中排列
内容区的大小由width和height两个属性来设置
width设置内容区的宽度，height设置内容区高度
2.2 边框
边框（border），边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
边框的大小会影响到整个盒子的大小
要设置边框，需要至少设置三个样式：
边框宽度
边框颜色
边框样式
2.3 盒模型
盒模型
css将页面中所有元素都设置为一个矩形的盒子
将元素设置为矩形盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
每一个盒子都由以下几个部分组成
内容区(content)
内边距（padding）
边框(border)
外边距（margin）
03. 盒子模型-边框
3.1 边框宽度 border-width
border-width: 10px 20px 30px 40px;
上 右 下 左
border-方向-width:
border-top-width: 10px;
3.2 边框颜色 border-color
如果border-color不写，则自动使用color的颜色值
3.3 边框风格 border-style
solid是实线
dotted 点状虚线
dashed 虚线
double 双线
none 无
3.4 border简写
border简写属性,没有顺序要求
除了border以外还有四个 border-xxx
border-top
border-right
border-bottom
border-left
border: 10px orange solid;04.盒子模型-内边距
内边距（Padding）
内容区和边框之间的距离是内边距
一共有四个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
同理 padding和border一样可以简写
内边距的设置会影响到盒子大小
背景颜色会延伸到内边距上
一个盒子可见框的大小，由内容区 内边距 和 边框共同决定
所以计算盒子大小时，需要将这三个区域加到一起计算
padding-top: 100px;05.盒子模型-外边距
外边距（margin）
不会影响盒子可见框的大小
但会影响盒子的位置
四个方向
margin可以设置负值、简写
margin-top: -150px;06.盒子水平布局
6.1 元素水平方向的布局
元素在其父元素下的水平布局由以下几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中，水平布局必须满足以下的等式
margin-left + border-left +padding-left + width +padding-right + border-right +margin-right
= 其父元素内容区的宽度（必须满足）
0+0+0+200+0+0+0 = 800
以上等式必须满足，如果等式不成立，则称为过度约束，则等式会自动调整
调整的情况
如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right的值使等式成立
这七个值中有三个值可以设置为auto（默认设置）
width
margin-left
margin-right
如果某个值为auto，则会自动调整auto那个值使等式成立
如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
如果将三个值设置为auto，则外边距都是0，宽度最大
如果两个外边距设置为auto，宽度值固定，则会将外边距设置为仙女共同的值
-->使一个元素在其父元素中水平居中
07.盒子垂直布局
子元素大小超过父元素，从父元素中溢出
使用overflow属性来设置父元素如何处理溢出的子元素
可选值：
visible：默认值 子元素会从父元素中溢出并在父元素外的位置显示
hidden：溢出的内容会被裁剪不会显示
scroll: 生成两个滚动条
auto：根据需要生成滚动条
·默认情况下父元素高度被内容撑开
08.外边距的折叠
8.1垂直外边距的折叠
“相邻的” “垂直” 方向外边距会发生重叠现象
兄弟元素
相邻的垂直外边距会取两者之间的较大值（都是正值时）
特殊情况：
一正一负时：取两者的和
都是负时：取绝对值较大值
兄弟元素间外边距的重叠，对开发有利的，不需要处理
父子元素
父子元素间间相邻外边距，子元素会传递给父元素（上外边距）
父子外边距的折叠会影响到页面的布局，必须处理
09.行内元素盒模型
9.1 行内元素的盒模型
不支持设置宽度和高度
行内元素可以设置padding，但垂直方向padding不会影响布局
行内元素可以设置border，但垂直方向border不会影响布局
行内元素可以设置margin，但垂直方向margin不会影响布局
9.2 display 用来设置元素显示的类型
可选值：
inline 将元素设置为行内元素
block 将元素变为块元素
inline-block 将元素设置为行内块元素
行内块，既可以设置宽度和高度又不会独占一行
table 将元素设置成表格
none 元素不在页面中显示----人间蒸发，不占据位置
9.3 visibility 用来显示元素的显示状态
可选值：
visible 默认值，元素在页面中显示
hidden 元素在页面中隐藏,但依然占页面的位置---隐形斗篷，占据位置
display: inline-block;
visibility: none;
width: 100px;
height: 100px;
background-color: orange;10.默认样式
重置样式表：
reset.css 直接去除了浏览器的默认样式
normalize.css 对默认样式进行了统一
<link rel="stylesheet" href="./css/normalize.css">11.盒子的尺寸
默认情况下，盒子可见框的大小由内容区，内边距和边框共同决定
box-sizing 用来设置盒子尺寸的计算方式(设置width和height的作用)
可选值：
content-box 默认值，宽度和高度用来设置-内容区的大小 往外扩
border-box 宽度和高度用来设置-盒子可见框的大小 往内挤
12.轮廓和圆角
12.1 阴影偏移量 box-shadow
水平偏移量 ：正值右移 负值左移
垂直偏移量 ：正值下移 负值上移
阴影模糊半径
阴影颜色 一般用rgba 带点透明效果
/* 用来设置元素的阴影效果，不会影响到页面布局 */
box-shadow:10px 10px 20px rgba(170, 161, 161,.7);12.2 轮廓线 outline
用法和border一样 区别在于轮廓不会影响到可见框的大小
outline: 10px red solid;
/* border: 10px red solid; */12.3 圆角 border-radius
border-radius:用来设置圆角 圆的半径大小
border-top-left-radius: ;
border-top-right-radius: ;
border-bottom-left-radius: ;
border-bottom-right-radius: ;
border-top-left-radius: 50px;
/* border-top-left-radius: 50px 100px;
椭圆 ： x轴 y轴
*/
/*
border-radius 从左上开始 顺时针
*/
border-radius: 50px / 100px;
/* 横向 / 纵向 */
border-radius: 50%;
/* 变成圆形 */
扫一扫
5170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
