一、浮动与定位
1、浮动的基本概念
浮动的最本质功能:用来实现并排。
浮动的使用：
浮动使用要点:要浮动，并排的盒子都要设置浮动。
父盒子要有足够的宽度，否则子盒子会掉下去。
浮动的顺序贴靠特性：（贴靠前一个）
子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素。
浮动的元素一定能设置宽高：
浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标签等。
float:right;即可设置右浮动。较少使用。
2、使用浮动实现网页布局
注意事项：
垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动!
“大盒子带着小盒子跑”，一个大盒子中，又是一个小天地，内部可以继续使用浮动
超市售卖的塑料袋0.3元一个，div是免费的!不要节约盒子!
3、BFC规范和浏览器差异
BFC (Box Formatting Context，块级格式化上下文)是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
从一个现象开始说起：一个盒子不设置height，当内容子元素都浮动时，无法撑起自身。
原因：这个盒子没有形成BFC。
如何创建BFC
方法①: float的值不是none
方法②: position的值不是static或者relative
方法③: display的值是inline-block、flex或者inline-flex
方法④: overflow:hidden;
什么是overflow:hidden？
overflow:hidden;表示溢出隐藏，溢出盒子边框的内容将会被隐藏
overflow:hidden;是非常好用的让盒子形成BFC的方法
BFC的其他作用：
BFC可以取消盒子margin塌陷
BFC可以可以阻止元素被浮动元素覆盖
4、清除浮动
清除浮动:浮动一定要封闭到一个盒子中，否则就会对页面后续元素产生影响。
清除浮动方法1:让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动。此时最好的方法就是overflow:hidden属性。
div {height: 100px;margin-bottom: 10px;overflow: hidden;}
<div><p></p><p></p></div><div><p></p><p></p></div>
清除浮动方法2:给后面的父盒子设置clear:both属性。clear表示清除浮动对自己的影响，both表示左右浮动都清除。
<div><p></p><p></p></div><div> <!-- 添加clear: both; --><p></p><p></p></div>
清除浮动方法3:使用::after伪元素给盒子添加最后一个子元素，并且给::after设置clear:both。
.clearfix::after {/*记得写content*/content: '';clear: both;/*转为块级元素*/display: block;}
<div><p></p><p></p></div><div><p></p><p></p></div>
清除浮动方法4:在两个父盒子之间“隔墙”，隔一个携带clear:both的盒子
.cl {clear: both;}
<div class="clearfix"><p></p><p></p></div><div class="cl h20"></div><div class="clearfix"><p></p><p></p></div>
5、相对定位
相对定位:盒子可以相对自己原来的位置进行位置调整，称为相对定位
位置描述词：left向右移动; right向左移动;top向下移动;bottom向上移动。
值可以为负数，即往规定方向相反移动
相对定位的性质：
相对定位的元素，会在“老家留坑”，本质上仍然是在原来的位置，只不过渲染在新的地方而已，渲染的图形可以比喻成“影子”，不会对页面其他元素产生任何影响
相对定位的用途：
相对定位用来微调元素位置
相对定位的元素，可以当做绝对定位的参考盒子
6、绝对定位
绝对定位:盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置。
位置描述词：
left到左边的距离; right到右边的距离; top到上边的距离; bottom到下边的距离
绝对定位脱离标准文档流：
绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对它们进行压盖
脱离标准文档流的方法:浮动、绝对定位、固定定位。
绝对定位的参考盒子
绝对定位的盒子并不是永远以浏览器作为基准点
绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点。这个盒子通常是相对定位的，所以这个性质也叫作“子绝父相”
绝对定位的盒子垂直居中
绝对定位的盒子垂直居中是一个非常实用的技术，
position: absolute;
top: 50%;
margin-top: -自己高度一半;
*{margin: 0;padding: 0;}div{width: 400px;height: 300px;border: 1px solid #000;margin: 40px auto;position: relative;}p {/* 脱离标准文档流，不能使用margin: 40px auto; */width: 80px;height: 80px;background-color: orange;position: absolute;top: 50%;left: 50%;margin-top: -40px;margin-left: -40px;}
<div><p></p></div>
堆叠顺序z-index属性：
z-index属性是一个没有单位的正整数，数值大的能够压住数值小的。
.box1{width: 300px;height: 300px;background-color: orange;position: absolute;top: 100px;left: 100px;z-index: 999;}.box2{width: 300px;height: 300px;background-color: blue;position: absolute;top: 200px;left: 200px;z-index: 9999;/* 蓝色压住橘色 */}
绝对定位的用途
绝对定位用来制作“压盖”、“遮罩”效果
绝对定位用来结合CSS精灵使用
绝对定位可以结合JS实现动画
7、固定定位
固定定位:不管页面如何卷动，它永远固定在那里。
固定定位注意事项：
固定定位只能以页面为参考点，没有子固父相这个性质
固定定位脱离标准文档流
固定定位的用途:“返回顶部”、“楼层导航”。
8、课程重点
使用浮动要注意什么?浮动有哪些性质?
如何清除浮动?
定位有哪几种?分别是什么功能?
9、课程难点
什么是BFC?如何创建BFC? BFC有哪些作用?
绝对定位如何实现垂直居中?
top=50%margin-top=-自己高的一半
二、边框与圆角
1、边框
border属性需要三个要素
border: 1px solid red ;
1px：线宽度；solid：线型；red：线颜色。
线型
| 线型 | 意义 |
|---|---|
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点状线 |
边框三要素可以拆分为小属性
| 小属性 | 意义 |
|---|---|
| border-width | 线宽 |
| border-style | 线型 |
| border-color | 线颜色 |
四个方向的边框
| 属性 | 意义 |
|---|---|
| border-top | 上边框 |
| border-right | 右边框 |
| border-bottom | 下边框 |
| border-left | 左边框 |
四个方向边框的三要素小属性
| 属性 | 意义 | 属性 | 意义 | |
|---|---|---|---|---|
| border-top-width | 上边框宽度 | border- bottom-width | 下边框宽度 | |
| border-top-style | 上边框线型 | border - bottom-style | 下边框线型 | |
| border-top-color | 上边框颜色 | border- bottom-color | 下边框颜色 | |
| border-right -width | 右边框宽度 | border-left-width | 左边框宽度 | |
| border-right-style | 右边框线型 | border-left-style | 左边框线型 | |
| border-right-color | 右边框颜色 | border- left- color | 左边框颜色 |
去掉边框
border-left: none;属性即可去掉左边框，以此类推。
利用边框制作三角形
.box1 {width: 0;height: 0;/* transparent 透明色 *//* 顶角向下的三角形 */border:20px solid transparent;border-top-color: red;}
2、圆角
border-radius属性的值通常为px单位,表示圆角的半径。数值越大圆角越大。
border-radius属性可以单独设置四个圆角。
border-radius: 10px 20px 30px 40px;分别为左上， 右上，右下，左下。
border-radius有三个值的话，第一个值表示对左上角的设置，第二个值表示对右上角和左下角的设置，第三个值表示对右下角的设置。
border-radius有两个属性值的话，第一个值表示左上角和右下角，第二个值表示右上角和左下角。
也可以使用小属性：
| 属性 | 意义 |
|---|---|
| border-top-left-radius | 左上角 |
| border-top-right-radius | 右上角 |
| border-bottom-left-radius | 左下角 |
| border-bottom-right-radius | 右下角 |
border-radius属性的值也可以用百分比做单位,表示圆角起始于每条边的哪里。
.box8 {width: 400px;height: 200px;border: 1px solid #000;border-radius: 50%}
正圆形：
正方形盒子如果设置的border-radius属性为50%，就是正圆形。
border-radius : 50%;
3、盒子阴影
box-shadow属性用来实现盒子的阴影：
| border-shadow: | 10px | 20px | 30px | rgba(0,0,0,.4); |
|---|---|---|---|---|
| x偏移 | y偏移 | 模糊量 | 颜色 |
阴影延展：
| border-shadow: | 10px | 20px | 30px | 40px | rgba(0,0,0,.4); |
|---|---|---|---|---|---|
| 阴影延展 |
内阴影：
box-shadow属性值前加inset单词，表示内阴影
| border-shadow: | inset | 10px | 20px | 30px | 40px | rgba(0,0,0,.4); |
|---|---|---|---|---|---|---|
| 内阴影 |
多阴影：
box-shadow属性值可以用逗号隔开多个,表示携带多个阴影
.box4 {width: 200px;height: 200px;background-color: white;border: 1px solid #000;box-shadow: 2px 2px 30px red, 4px 4px 4px 40px blue,6px 6px 50px green;margin-bottom: 10px;}
4、课程重点
边框有哪三个要素?如何分别设置三个要素?常用线型有哪几种?
圆角如何设置?正圆形如何设置?
阴影如何设置?
5、课程难点
如何用盒子制作三角形?
三、背景与渐变
1、背景颜色基础知识
background-color属性：
background-color属性表示背景颜色。
背景颜色可以用十六进制、rgb()、rgba()表示法表示。
padding区域是有背景颜色的。
background-image属性：
background-image属性用来设置背景图片,图片路径要写到url()圆括号中，可以是相对路径，也可以是http://开头的绝对路径。
background-image: url(images/bg1.jpg);
如果样式表是外链的，那么要书写从CSS出发到图片的路径，而不是从html出发。
.box2 {width: 400px;height: 400px;border: 1px solid #000;background-image: url(../images/archer.png);
}
2、background-repeat属性用来设置背景的重复模式：
| 值 | 意义 |
|---|---|
| repeat; | x、y均平铺（默认) |
| repeat-x; | x平铺 |
| repeat-y; | y平铺 |
| no-repeat; | 不平铺 |
3、背景尺寸：
background-size属性
background-size属性用来设置背景图片的尺寸，兼容到IE9。
background-size: 100px 200px; 100px：宽度。200px：高度。
值也可以用百分数来设置，表示为盒子宽、高的百分之多少。
需要等比例设置的值，写auto。
contain和cover：
contain和cover是两个特殊的background-size的值。
contain表示将背景图片智能改变尺寸以容纳到盒子里。
cover表示将背景图片智能改变尺寸以撑满盒子。
4、背景裁切
background-clip 属性用来设置元素的背景裁切到哪个盒子。兼容到IE9。
| 值 | 意义 |
|---|---|
| border-box | 背景延伸至边框（默认值) |
| padding-box | 背景延伸至内边(padding)，不会绘制到边框处(仅在dotted、dashed边框可察觉) |
| content-box | 背景被裁剪至内容区 |
5、背景固定
background-attachment属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
| 值 | 意义 |
|---|---|
| fixed | 自己滚动条不动，外部滚动条不动 |
| local | 自己滚动条动，外部滚动条动 |
| scroll | 自己滚动条不动，外部滚动条动（默认值) |
6、背景图片位置
background-position属性可以设置背景图片出现在盒子的什么位置。可以用top、bottom、center、left、 right描述图片出现的位置。
background-position: 100px 200px;
CSS精灵:将多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个，这样的技术叫做CSS精灵技术，也叫作CSS雪碧图。
CSS精灵可以减少HTTP请求数，加快网页显示速度。缺点也很明显:不方便测量、后期改动麻烦。
.money {position: absolute;top: 300px;left: 300px;width: 34px;height: 32px;border: 1px solid #000;background-image: url(images/sprites.png);background-position: -66px -488px;}
<i class="money"></i>
7、background综合属性
—些常用的背景相关小属性，可以合写到一条background属性中。
background: white url(images/archer.png) no-repeat center center;
white ：颜色；url(images/archer.png)：背景图片；no-repeat:背景重复;center center:背景位置.
8.线性渐变
盒子的background-image属性可以用linear-gradient()形式创建线性渐变背景
background-image: linear-gradient(to right, blue,red);
渐变方向：to right；开始颜色：blue；结束颜色：red
渐变方向也可以写成度数；deg表示度数
bckground-image: linear-gradient( 45deg，blue，red);
可以有多个颜色值，并且可以用百分数定义它们出现的位置
linear-gradient(to bottom，blue，yellow 20%，red);
中间色：yellow；中间色出现的位置：20%
9、浏览器私有前缀(需要背下来，面试可能会考)
不同浏览器有不同的私有前缀，用来对试验性质的CSS属性加以标识。
| 品牌 | 前缀 |
|---|---|
| Chrome | -webkit- |
| Firefox | -moz- |
| IE、Edge | -ms- |
| 欧朋 | -o- |
10、径向渐变（工作中较少用到）
盒子的background-image属性可以用radial-gradient()形式创建径向渐变背景。
background-image: radial-gradient(50% 50%,red,yellow,blue);
background-image: radial-gradient(50% 50%,rgba(211,211,211),white);
11、课程重点
透彻理解每一个background系列属性,你能不重不漏地说出它们么?
如何实现渐变背景?
使用background-position属性实现CSS精灵
四、2D与3D转换
1、旋转变形
将transform属性的值设置为rotate()，即可实现旋转变形。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。
transform-origin属性：可以使用transform-origin属性设置自己的自定义变换原点。
.pic5 {/* 以左上角为中心点进行旋转30度 */transform-origin: 0 0;transform: rotate(30deg);}
2、缩放变形
将transform属性的值设置为scale()，即可实现缩放变形。当数值小于1时，表示缩小元素;大于1表示放大元素。
transform: scale(3); 3表示缩放倍数。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pRKYHu4p-1620825887206)(images/3/image-20210512211150077.png)]
transform: scale(.3,.1);宽度和高度分别缩放。
3、斜切变形
将transform属性的值设置为skew()，即可实现斜切变形。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ijKHh1xO-1620825887209)(images/3/image-20210512211324082.png)]
4、位移变形
将transform属性的值设置为translate()，即可实现位移变形。位移变形和相对定位非常像，位移变形也会“老家留坑”,“形影分离”。
transform: translate( 100px, 200px);向右移动100px，向下移动200px。
5、3D旋转
将transform属性的值设置为rotatex()或者rotateY(),即可实现绕横轴、纵轴旋转。
perspective属性用来定义透视强度，可以理解为“人眼到舞台的距离”，单位是px。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yH1wV9nM-1620825887210)(images/3/image-20210512211634778.png)]
空间移动
当元素进行3D旋转后，即可继续添加translatex()、translateY()、translatez()属性让元素在空间进行移动。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aKhIAFtN-1620825887213)(images/3/image-20210512211736311.png)]
一定记住，空间移动要添加在3D旋转之后。
transform: rotatex(30deg) translatex( 30px) translatez( 100px);
制作一个正方体：
* {margin: 0;padding: 0;}.box {width: 200px;height: 200px;border: 1px solid #000;margin: 100px auto;perspective: 300px;position: relative;}.box p {position: absolute;top: 0;left: 0;width: 200px;height: 200px;}.box p:nth-child(1) {background-color:rgba(219, 28, 28, 0.767) ;/* 前面 */transform: translateZ(100px);}.box p:nth-child(2) {background-color:rgba(235, 220, 85, 0.486) ;/* 顶面 */transform: rotateX(90deg) translateZ(100px);}.box p:nth-child(3) {background-color:rgba(53, 56, 218, 0.486) ;/* 背面 */transform: rotateX(180deg) translateZ(100px);}.box p:nth-child(4) {background-color:rgba(67, 212, 23, 0.486) ;/* 底面 */transform: rotateX(90deg) translateZ(100px);}.box p:nth-child(5) {background-color:rgba(0, 0, 0, 0.486) ;/* 左面 */transform: rotateY(90deg) translateZ(100px);}.box p:nth-child(6) {background-color:rgba(183, 33, 197, 0.486) ;/* 右面 */transform: rotateX(-90deg) translateZ(100px);}
<div class="box"><p></p><p></p><p></p><p></p><p></p><p></p></div>
6、课程重点
2D变形有哪些?3D变形有哪些?每种变形的参数意义是什么?正方向是什么?
必须准确理解空间移动的意义
必须掌握perspective属性
