1. 定位 1.1 定位的基本介绍 1.1.1 网页常见的布局形式
2. 浮动
1.可以将原来垂直布局的块级元素变成水平布局
3、定位
1.元素可以自由放置在网页的任意位置
2.通常用于袋与袋之间的层压
1.1.2 定位常见应用场景
可解决袋子之间的叠层问题
定位后的元素具有最高级别，可以堆叠在其他袋子中
可以将袋子固定在屏幕中的某个位置
1.2 定位的基本使用 1.2.1 定位初体验
要求：页面有两个袋子，要求完成图片的疗效。 怎样才能完成呢？
对于包之间的分层问题，建议使用定位来完成
.blue{/* 1.设置定位方式 */position: absolute;/* 2.设置偏移值 */top: 150px;left: 150px;background-color: blue;}
1.2.2 定位使用步骤
1. 设置定位方式
属性名称：位置
常用属性值：
2. 设置倾斜值
Skew值设置分两个方向，水平和垂直方向各选其一
选择的原则通常是就近原则（以距离最近的一侧为准）
1.3 静态定位 1.3.1 静态定位简介
静态定位是默认值，也就是之前已知的标准流。
代码：位置：静态；
当心：
1.静态定位是之前的标准流程，无法通过orientation属性连接
2、后面提到的定位不包括静态定位，通常指后一种：相对、绝对、固定
1.4 相对定位 1.4.1 相对定位简介
简介：自身定位，相对于之前对联通的定位
代码：位置：相对；
特征：
1、需要配合orientation属性来实现联通
2. 相对于您的原始位置进行连接
3.占据页面位置→无标签外
应用场景：
1、与绝对定位组CP（儿子和父亲）合作
2.对于小规模联通
1.5 绝对定位 1.5.1 绝对定位简介
简介：实战爸爸定位、相对于父元素的非静态定位和连接定位
代码：位置：绝对；
特征：
1、需要配合orientation属性来实现联通
2.默认是相对于浏览器可见区域连接的
3. 不占用页面任何空间 → 已无标签
应用场景： 1、与绝对定位组CP（儿子和父亲）合作
1.5.2 绝对定位相对于谁是有偏差的
绝对定位是相对于谁的？
1.祖先元素中没有定位→默认与浏览器通信
2.祖先元素中有定位→与最近的有定位的祖先元素进行通信
1.6 儿子和父亲简介 1.6.1 儿子和父亲简介介绍
场景：让子元素相对于父元素自由通信
意义：
子元素：绝对定位
父元素：相对定位
儿子相对于父亲的好处：
父元素相对定位，对网页布局影响最小
1.6.2（扩展）儿子死了、父亲死了的特殊场景
场景：当使用子元素和父元素时，我发现父元素已经绝对定位css 底部对齐，所以直接将子元素指向它即可！
原因：
父元素已经定位以满足要求。 如果盲目改变父元素定位方式，可能会影响之前写的布局
.father{width: 600px;height: 600px;background-color: pink;position: relative;}.son{width: 400px;height: 400px;background-color: blue;position: absolute;right:0px;bottom: 0px;}.sun{width: 200px;height: 200px;background-color: yellow;position: absolute;right:0px;}
1.6.3 卡模块热点图标定位案例
需求：根据设计图，通过PxCook测量数据，并基于day05-工作卡模块案例，定位热点图片，完成一致的疗效
<style>*{margin: 0;padding: 0;}body {background-color: #f4f5f9;}.box {/* 1、宽高 */width: 228px;height: 270px;/* 2、背景颜色 */background-color: #fff;margin: 100px auto;/* 3、设置相对定位 */position: relative;}.box .product {/* width: 228px; */width: 100%;}.box h3 {height: 52px;padding-left: 24px;padding-right: 20px;margin-top: 25px;font-size: 14px;font-weight: 400;}.box p{margin-left: 24px;font-size: 12px;color: #929292;}.box p span{color: #f77321;}.box .hot{/* 设置绝对定位 */position: absolute;right:-4px;top:4px;}</style><body><div class="box"><img src="../images/hot.png" alt="" class="hot"><img src="../images/product.png" alt="" class="product"><h3>Android网络图片加载框架详解</h3><p><span>高级</span> • 1125人在学习</p></div></body>
1.6.4 儿子和父亲水平居中的情况
需求：使用child和father使子包在父包中水平居中（可以用任意长度的兄弟元素来实现）
解决办法： 1、儿子一定不能长得像父亲；
2.让子包连接到父包右侧的一半； 左：50%；
3、让子包向左连接到自己的一半；
常见做法：margin-left:-100px; 父母包长度的一半；
缺点：分包长度改变后，需要重新更改编码；
优化：变换：translateX(-50%)；
优点：表示已经沿X轴负方向（向左）连接了自身长度的一半，如果子包长度发生变化，不需要修改代码；
<style>*{margin: 0;padding: 0;}.father{position: relative;width: 600px;height: 400px;background-color: pink;}.son{position: absolute;left: 50%;/* margin-left: -100px; */transform:translateX(-50%);width: 300px;height: 100px;background-color: blue;}
1.6.5 父子水平和垂直居中的情况
需求：使用子包和父包使子包在父包中水平和垂直居中（可以实现任意宽度和高度的兄弟元素）
解决方案：
1. 一个永远不像父亲的儿子
2.让子包向右走，到大包的一半
剩余：50%
3.让子袋下降到大袋的一半
顶部：50%
4.让副包向左走+自己上半身
变换：翻译（-50%，-50%）；
.father{width: 600px;height: 600px;background-color: pink;position: relative;}.son{width: 400px;height: 400px;background-color: blue;position: absolute;right:100px;bottom: 100px;}
1.6.6 导航二维码居中定位案例
需求：根据设计图，在伟金所导航案例的基础上，定位二维码图片，完成一致的疗效
<style>*{margin: 0;padding: 0;}.nav{height: 40px;border-bottom: 1px solid #ccc;}ul {list-style: none;width: 1200px;margin: 0 auto;}ul li{float: left;width: 20%;height: 40px;border-right: 1px solid #ccc;box-sizing: border-box;text-align: center;line-height: 40px;}ul .last {border-right: none;}ul li a{display: block;height: 40px;text-decoration: none;color: black;font-size: 14px;}.nav .app{position: relative;}.nav .app .code{position: absolute;left:50%;transform: translateX(-50%);top: 40px;border: 1px solid #ccc;}</style><body><div class="nav"><ul><li><a href="#">我要投资</a></li><li><a href="#">平台介绍</a></li><li><a href="#">新手专区</a></li><li><a href="#" class="app">手机微金所<img src="../images/code.jpg" class="code"></a></li><li class="last"><a href="#">个人中心</a></li></ul></div></body>
1.6.7 顶部半透明描边效果
需求：根据设计图，通过代码完成网页中一致的效果
注意：定位的元素会脱标签（如：绝对定位），脱标签元素的宽高默认会被内容扩展
<style>*{margin:0;padding:0;}.box{width: 1226px;height: 600px;/* background-color: pink; */margin: 0 auto;background: url(../images/bg.jpg);position: relative;}.mask{/* width: 1226px; */width: 100%;height: 150px;background-color: rgba(0, 0, 0, 0.5);position: absolute;bottom: 0px;}</style><body><div class="box"><div class="mask"></div></div></body>
1.7 固定定位 1.7.1 固定定位简介
简介：强迫性定位，相对于浏览器定位和联通而言
代码：位置：固定；
特征：
1、需要配合orientation属性来实现联通
2.相对于浏览器可见区域连接
3. 不占用页面任何空间 → 已无标签
应用场景： 1.让袋子固定在屏幕上的某个位置
1.8 元素的层次关系 1.8.1 元素层次问题
不同布局形式元素的层级关系：标准流<浮动<定位
1.8.2 修改定位元素的层次结构
场景：更改定位元素的层次结构
属性名称：z-index
属性值：数字
数字越大，等级越高
2、装修 2.1 垂直对齐方法 2.1.1 知道基线（理解）
Baseline：浏览器中文本类型元素排版时有一个用于对齐的基线（baseline）
2.1.2 文本对齐问题
场景：解决行内/行内块元素垂直对齐问题
问题：当图片和文字在一行显示时，虽然顶部没有对齐
2.1.3 垂直对齐法
属性名称：垂直对齐
属性值：
img{/* 基线对齐 */vertical-align: baseline;/* 顶部对齐 */vertical-align: top;/* 中部对齐 */vertical-align: middle;/* 底部对齐 */vertical-align: bottom;}
2.1.4（扩展）项目中vertical-align可以解决的问题
1. 文本框和表单按钮无法对齐
<style>input{height: 50px;box-sizing: border-box;vertical-align: bottom;}</style><body><input type="text"><input type="button" value="百度一下"></body>
2、input和img无法对齐
<style>img {/* height: 50px; */box-sizing: border-box;vertical-align: bottom;}</style><body><img src="../images/1.jpg"><input type="text">
3.div中的文本框，文本框无法粘贴到顶部
<style>.father{width: 200px;height: 200px;background-color: pink;}input{vertical-align: top;}</style><body><div class="father"><input type="text"></div></body>
4、div没有设置高度，通过img标签拉伸。 这时候img标签下就会出现额外的间隙问题
<style>.father{width: 400px;/* height: 200px; */background-color: pink;}img{/* 方法一：垂直对齐方式 *//* vertical-align: bottom; *//* 方法二：将图片转换成块级元素 */display: block;}</style><body><div class="father"><img src="../images/1.jpg" alt=""></div></body>
5.使用line-height使img标签垂直居中
<style>.father{width: 400px;height: 400px;background-color: pink;line-height: 400px;}img{vertical-align: middle;}</style><body><div class="father"><img src="../images/1.jpg" alt=""></div></body>
2.2 光标类型
场景：设置键盘光标在元素上时显示的样式
属性名称：光标
常用属性值：
场景：让包包的四个角显得饱满，减少页面细节，提高用户体验
属性名称：边框半径
常用值：数字+px、百分比
原则：
形参规则：形参从左上角开始，顺时针到第二个，没有形参就看对角！
.box{width: 200px;height:200px;background-color: blue;/* border-radius: 30px; */border-radius: 80px 80px ;}
2.3.2 边框圆角常见应用
画正圆： 1.袋子必须是正圆 2.将边框圆角设置为袋子宽度和高度的一半 → border-radius: 50%
.box{width: 200px;height:200px;background-color: yellow;/* border-radius: 30px; */border-radius: 50% ;}
奶油按钮： 1.要求包包是长方形 2.设置→border-radius：包包高度的一半
.box{width: 400px;height:200px;background-color: blueviolet;/* border-radius: 30px; */border-radius: 100px ;}
2.4 溢出部分显示疗效 2.4.1 溢出部分显示疗效
溢出部分：指袋子内容物超出袋子范围的区域
场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条...
属性名称：溢出
常用属性值：
2.5 元素本身被隐藏 2.5.1 元素本身被隐藏
场景：使元素本身在屏幕上不可见。如：键盘：元素悬停后隐藏
两者的区别：
1.visibility:hidden隐藏元素本身并在网页中占据位置
2.display: none 隐藏元素本身，在网页中不占据位置
2.5.2 元素显示隐藏开关盒
需求：代码完成：儿子元素默认隐藏，当鼠标移入父亲时，让儿子显示疗效
<style>.father{width: 200px;height:200px;background-color: pink;}.son{width: 100px;height: 100px;background-color: blue;display: none;}.father:hover .son{display: block;}</style><body><div class="father"><div class="son"></div></div></body>
2.5.3 导航二维码显示隐藏切换案例
需求：通过代码，在刚刚完成的导航二维码居中定位案例的基础上，完成效果图中元素的显示和隐藏切换效果
.nav .app .code{position: absolute;left:50%;transform: translateX(-50%);top: 40px;border: 1px solid #ccc;display: none;}.nav .app:hover .code{display: block;}
2.5.4（扩展）元素的整体透明度
场景：让一个元素整体（包括内容）一起变得透明
属性名称：不透明度
属性值：0 到 1 之间的数字 • 1：表示完全不透明 • 0：表示完全透明
注意事项： •opacity 会让元素整体透明，包括上面的内容，如：文字、子元素等...
.box{width: 400px;height:400px;background-color: pink;opacity:0.5;}
2.5.5（扩展）边界合并
场景：让相邻的表格边框合并，得到细线边框的效果
代码：边框折叠：折叠；
table{width: 250px;height: 150px;border: 1px solid #000;border-collapse: collapse;}th,td{border: 1px solid #000;text-align: center;}
2.5.6（拓展）用CSS画三角形的方法（笔试题）
场景：在网页上显示小三角形时，不仅可以使用图片，还可以使用代码。
实现原理： •借助袋架完成
实施步骤：
1.设置一个包
2. 周围设置不同颜色的边框
3.将包的宽度和高度设置为0，只保留边框
4、获取四个三角形css 底部对齐，选择其中一个，将其他三角形（边框）的颜色设置为透明
.box{width: 200px;height: 200px;background-color: rgba(0, 0, 0,0);border-top:100px solid red;border-right:100px solid blue;border-bottom:100px solid orange;border-left:100px solid yellow;width: 0px;height: 0px;border-right:50px solid rgba(0, 0, 0,0);border-bottom:100px solid rgba(0, 0, 0,0);border-left:50px solid rgba(0, 0, 0,0);}
3. 选择器扩展 3.1 链接伪类选择器 3.1.1 链接伪类选择器
场景：常用于选中超链接的不同状态
选择器语法：
当心：
如果你需要同时达到以上四种拟态疗效，你需要按照LVHA的顺序写出记忆公式：你男朋友送了你一个LV手提包，你高兴又笑
其中：hover伪类选择器使用频率较高，常用于选择各种元素的hover状态
3.2 焦点伪类选择器 3.2.1 焦点伪类选择器
场景：用于选择元素获得焦点时的状态，常用于表单控件
选择器语法：
input：focus{background-color：skyblue；}
功效：当表单控件获得焦点时，默认显示外轮廓
3.3 属性选择器 3.3.1 属性选择器
场景：通过元素上的HTML属性选择元素，常用于选择输入标签
选择器语法：
<style>input[type="text"]{background-color: pink;}input[type="password"]{background-color: blue;}</style><body>昵称：<input type="text" placeholder="请输入你的昵称"><br>密码：<input type="password" placeholder="请输入你的密码"><br></body>
