简单介绍css盒子模型的概念和特点，掌握css盒子模型:一站式指南下载
掌握CSS盒子模型：一站式指南- CSDN博客
盒模型01-选择器结构伪类选择器基本功能：根据结构关系查找元素。
选择器
解释
E: 第一个孩子
匹配父元素E的第一个子元素
E: 最后一个孩子
匹配父元素E的最后一个子元素
E:第一个孩子(n)
匹配父元素E的第n个子元素
E:第n个最后一个孩子(n)
匹配父元素E下数第n个子元素
E:第一型
匹配父元素下面相同类型元素的第一个E。
E: 最后类型
匹配父元素下面相同类型元素的最后一个E。
E:n型(n)
匹配父元素下面相同类型的第n 个E 元素。
E:第n个最后一个类型(n)
匹配父元素下同类型元素中从底部算起的第n 个E。
:nth-child（表达式） 下表解释了：nth-child() 伪类的表达式。
功能
公式
匹配第n个子元素
:第一个孩子(n)
匹配偶数的子元素
: 个孩子(2n)
匹配奇数个子元素
: 第一个孩子(2n+1)
匹配前n 个子元素
第： 个孩子(-n+3)
匹配后的n个子元素
:倒数第n个孩子(n)
匹配倒数第n 个子元素。
: 第n 个最后一个孩子(-n)
匹配从第n个开始的子元素
: 第n 个孩子(n+x)
匹配以nth 结尾的子元素
: 第n 个最后一个孩子(n+x)
您可以使用这些公式来选择满足特定条件的子元素并对它们应用样式。
伪元素选择器功能：创建虚拟元素（伪元素）以放置装饰内容。
p:before { content: '伪元素之前';} p:after { content: '伪元素之后';} 注意：
要设置伪元素的内容，必须设置content: "" 属性。如果没有内容，请将引号留空。伪元素默认为内联显示模式。权重与标签选择器相同。扩展：PxCook（Pixel Chef）是一款刀具图形设计工具软件。
02 - 盒子模型的作用：网页布局、盒子和内容放置。
盒子模型- 由内容区域组成- 宽度高度填充- 填充（出现在内容和盒子边缘之间） 边框- 边框边距- 边距（出现在盒子外部） p { margin: 50px; border: 5px 纯棕色； padding: 20px; width: 200px; height: 200px;background-color: Pink;} 边框的四个方向属性名：border(bd) 属性值：边框粗细线型颜色（排名不分先后） 表格边框表格如下。属性：
属性值
线条样式
没有任何
没有任何
隐
隐藏
疏散
虚线
虚线
虚线
坚硬的
实线
双倍的
双实线
槽
凹槽效应
洋脊
提升效果
插入
内阴影效果
抵消
外阴影效果
您可以使用这些属性值来控制表格边框的样式，以实现不同的外观。
p { border: 5px Solid Brown; width: 200px; height: 200px; background-color: Pink;} 尝试我们的在线编辑器初学者教程
单向边框属性名：边框位置名词（bd+位置名词首字母，如bdl） 属性值：边框粗细、线型、颜色（不区分顺序）
p { border-top: 2px 纯红色； border-right: 3px 绿色虚线； border-bottom: 4px 虚线蓝色； border-left: 5px 纯橙色； width: 200px； 框边缘之间的距离。
属性名称： padding /padding-position noun p { /* 4个方向相同的padding */padding: 30px; /* 单独设置一个方向的padding */padding-top: 10px; padding-right: 20px; padding-bottom: 40px; padding -提示：添加内边距会使框变大。
Padding 多值写入方式值个数
例子
意义
1
内边距： 10px；
将所有4 个方向的填充设置为10 像素。
2
内边距： 10px 20px；
将顶部和底部内边距设置为10 像素，将左侧和右侧内边距设置为20 像素。
3
内边距： 10 像素20 像素15 像素；
将顶部内边距设置为10 像素，左右内边距设置为20 像素，底部内边距设置为15 像素。
四
内边距： 10 像素20 像素15 像素25 像素；
将顶部、右侧、底部和左侧内边距分别设置为10、20、15 和25 像素。
这些多值符号允许您同时设置不同方向的填充。
提示：从上往下按顺时针方向赋值。如果当前方向没有值，则与相反方向的值相同。
默认大小计算：框大小=内容大小+ 边框大小+ 填充大小底线：向框添加边框/填充使其变大。
手动减法，减去border/padding大小内减模式：box-sizing: border-box margin 功能：增加两个box之间的距离属性名称：margin 提示：padding属性值的写法和含义是一样的。
页面中心水平居中，边距值是自动的（盒子必须有宽度）。
p { margin: 0 auto; width: 1000px; height: 200px; background-color: Yellow;} 清除默认样式清除标签的默认样式，包括默认的内边距和外边距。
/* 清除默认的内外边距*/* { margin: 0; padding: 0; box-sizing: border-box;}/* 清除列表项目符号*/li { list-style: none; } 元素溢出功能：控制内容和设置溢出元素的显示模式。属性名称：溢出
属性值
影响
出现
默认显示溢出内容，不显示滚动条。
隐
溢出内容被隐藏且不显示。
滚动
溢出内容被隐藏，但滚动条可见。
自动的
如果内容溢出，就会显示滚动条；如果内容没有溢出，则不会显示滚动条。
这些属性值用于控制元素内容溢出时的行为，例如是否显示滚动条以及如何处理溢出的内容。
合并边距问题场景：垂直对齐的同级元素，顶部和底部边距合并：两个边距中较大的一个生效。
.one { margin-bottom: 50px;}.two { margin-top: 20px;} 边距折叠场景：父子标签，为子标签添加上边距会导致折叠问题，父级随之向下移动。
.son { margin-top: 50px; width: 100px; height: 100px; background-color: 橙色；} 解决方案：
取消子margin，设置父padding 设置父overflow: 设置隐藏父border-top 提示：设置子集display: inline-block，这个问题也可以解决，请注意多个子集控件的情况。
尝试新手教程在线编辑器
内联元素- 内部和外部边距问题场景：向内联元素添加边距和填充不会更改元素的垂直位置解决方案：向内联元素添加行高允许更改垂直位置。
span { /* margin 和padding 属性，垂直位置不可改变*/margin: 50px; padding: 20px; /* 行高可以改变垂直位置*/line-height: 100px;} 圆角：元素外部设置圆角边框。属性名称：border-radius 属性值：数字+ px/百分比
提示：该属性值为圆角半径框的阴影（展开）。
如何写入多个值来获取值的个数
例子
意义
1
边框半径： 10px;
将所有四个角的半径设置为10 像素。
2
边框半径： 10px 20px;
将水平角半径设置为10 像素，将垂直角半径设置为20 像素。
3
边框半径： 10px 20px 15px;
将左上角和右下角的圆角半径分别设置为10 像素，将右上角和左下角分别设置为20 和15 像素。
四
边框半径： 10px 20px 15px 25px；
将左上角、右上角、右下角和左下角半径分别设置为10、20、15 和25 像素。
提示：从左上角开始按顺时针方向赋值。如果当前角没有值，它将与对角相同。
完美圆形：将方形盒子的圆角属性值设置为宽度和高度的一半/50% img { width: 200px; height: 200px; border-radius: 100px; border-radius: 50%;} 胶囊形状：设置圆角为矩形box 属性值为盒子高度的一半p { width: 200px; height: 80px; background-color: Orange; border-radius: 40px;} 盒子阴影功能：设置元素的阴影效果属性名称：box -shadow 属性值：X 轴offset Y 轴偏移模糊半径漫反射半径颜色内阴影和外阴影注意：
您需要写入X 轴偏移和Y 轴偏移。默认为外部阴影。我们需要添加内部阴影。 insetp { width: 200px; height: 80px; 背景颜色：橙色； box-shadow: 2px 5px 10px 0 rgba(0, 0, 0, 0.5) 插图；}
