一、前言
想要实现卡片布局、导航栏、弹窗效果，布局知识是重中之重。本篇学习盒子模型、边距居中、浮动塌陷、定位、层级透明度这些开发高频知识点，也是面试常考的核心内容。
二、盒子模型、边框圆角、背景渐变与阴影
1、盒子模型
所有HTML元素都是一个盒子，由四部分组成：
·内容区 content
·内边距 padding
·边框 border
·外边距 margin
掌握盒子模型，就掌握了页面留白和尺寸控制的根本。
2、边框与圆角
-通过border设置边框粗细、颜色、样式
-通过border-radius实现圆角卡片（顺时针方向）、圆形头像效果
3、背景样式background
background用来给盒子设置背景颜色、背景图片、图片平铺、位置、大小。
① background-color：背景纯色
.box{
background-color: skyblue;
}
② background-image：设置背景图片
.box{
background-image: url("图片地址");
}
③ background-repeat：图片平铺方式
-repeat：默认，铺满整个盒子
-no-repeat：图片只显示一次（最常用）
-repeat-x：水平平铺
-repeat-y：垂直平铺
④ background-position：背景图位置
可以写方位词：center、left top；也可以写像素：20px 10px
background-position: center; /*图片居中*/
⑤ background-size：控制背景图片大小
-cover：图片铺满盒子，超出部分裁剪（做banner大图常用）
-contain：完整显示整张图片，不会裁剪
4、CSS渐变（不用图片，直接生成渐变背景）
渐变属于背景图片的一种，分为线性渐变、径向渐变
① 线性渐变 linear-gradient
从一个方向平滑过渡颜色
语法：linear-gradient（方向，颜色1，颜色2……）
/*从上到下，红色过渡到蓝色*/
.box{
background: linear-gradient(red, blue);
}
/*从左到右*/
background: linear-gradient(to right, pink, orange);
/*斜向渐变*/
background: linear-gradient(45deg, #fff, #ccc);
② 径向渐变 radial-gradient
从中心向外扩散的圆形渐变，适合做按钮、光斑效果
background: radial-gradient(red, yellow);
5、盒子阴影 box-shadow
作用：给盒子（卡片、按钮）添加投影，让页面更立体，不会占用页面空间
语法：
box-shadow: 水平偏倚 垂直偏移 模糊距离 阴影大小 颜色 内阴影
参数依次说明：
-水平偏移：正数向右，负数向左
-垂直偏移：正数向下，负数向上
-模糊值：越大阴影越柔和，不能是负数
-阴影大小（可选）：扩大/缩小阴影
-阴影颜色
-insert（可选）：加上就是内阴影，不加默认外阴影
三、内外边距、div居中、display与浮动
1、内外边距padding和margin
一个盒子由内容、内边距、边框、外边距组成
① padding 内边距
/*四个方向统一*/
div{
padding: 10px;
}
/*上 右 下 左 （顺时针）*/
padding: 10px 20px 30px 40px;
特点：写背景时，padding区域会带上背景
② margin 外边距
margin: 20px;
常见问题：
·垂直方向margin会合并塌陷，两个盒子上下间距取最大值，不是相加
·margin：0 auto; 专门用来实现块级盒子水平居中
区分：padding自己内部留白，margin和别人拉开距离
2、元素居中
① 文字/行内元素水平居中
text-align: center;
作用在父标签上，文字、图片、行内块居中
② 块级盒子整体居中（盒子居中）
div{
width:300px;
margin:0 auto;
}
注意❗必须设置宽度才生效
③ 垂直居中（简单了解）
单行文字：line-height=盒子高度
3、display属性
HTML标签默认分为两种：
-块级元素div p h1：独占一行，可以设置宽高
-行内元素span a：并排显示，宽高设置无效
display用来切换类型：
① display：block 转为块级，独占一行，可以设置宽高
② display：inline 转为行内，不能设置宽高
③ display：inline-block 行内块：并排显示+可以设置宽高（做按钮、导航很常用）
④ display：none 隐藏元素，位置直接消失
4、浮动
作用：让块级元素横向并排排列，原本div都是独占一行，浮动之后可以实现多列布局、横向导航栏。
float:left; /*向左靠齐排列*/
float:right; /*向右靠齐排列*/
浮动特点：
① 元素脱离标准文档流，原本的位置空出来，后面的元素会往上挤
② 浮动只会在父盒子内部横向排列，不会跑到父盒子外面
③ 经典问题：高度塌陷
如果父盒子不写高度，子元素全部浮动后，父盒子高度变为0，布局乱掉，需要清除浮动
四、overflow溢出处理、清楚浮动塌陷
1、overflow属性
当盒子里面内容的宽高，大于盒子本身宽高，就会发生内容溢出，overflow用来控制溢出内容怎么显示
4个常用值：
① visible 默认值：溢出内容直接显示在盒子外面
② hidden：溢出部分直接裁剪隐藏，看不见
③ scroll：永远显示滚动条，内容可滚动查看
④ auto：内容溢出才出现滚动条，不溢出就没有滚动条
2、浮动塌陷（高度塌陷）
父盒子没有设置固定高度，子元素全部设置了float浮动。
浮动元素脱离标准文档流，父盒子检测不到子元素高度，父盒子高度变为0，后面的布局全部乱掉，这就是浮动塌陷。
四种清除浮动塌陷的方案：
① 给父盒子设置固定高度
简单粗暴，但不适合高度适应的页面，实际开发很少用
.father{
height:100px;
}
② 父元素开启BFC
给父盒子加上overflow：hidden；触发BFC，父盒子可以识别浮动子元素高度
.father{
border:2px red solid;
overflow:hidden;
}
缺点：盒子内部如果有需要溢出显示的内容，会被裁剪掉
③ 伪元素清除浮动（推荐）
给父类加一个类名例如clearfix，写公共css，不会裁剪内容
.clearfix::after{
content:"";
display:block;
clear:both: /*清除左右两侧浮动影响*/
visibility:hidden;
height:0;
}
④ 额外空div标签
在父盒子最后，新增一个空div，设置clear：both；
<div class="father">
<div class="son"></div>
<div class="son"></div>
<div style="clear:both;"></div>
</div>
clear属性简单说明：
-clear：both：清除左右两边浮动带来的影响
-clear：left：清除左边浮动
-clear：right：清除右边浮动
五、相对/绝对/固定定位与z-index层级透明度
1、相对定位
position：relative；
不脱离标准流，相对于自己原本位置偏移，常用于微调元素位置
2、绝对定位
position：absolute；
脱离标准流，相对于最近的定位父级，常用于：弹窗、角标、悬浮小图标
3、固定定位
position：fixed
相对于浏览器窗口固定，页面滚动位置不变，常用于固定顶部导航、返回顶部按钮
4、z-index层级与透明度
多个定位元素重叠时，通过z-index控制上下层级
通过opacity设置元素透明效果，实现遮罩层、淡入效果
六、结语
至此整套CSS基础内容全部学习完毕。我们从简单的文字美化，一步步掌握了网页主流布局方案，现在已经可以独立编写静态页面，后续可以结合HTML表单完成完整的网页实战项目。
