CSS布局

一、定位

1. 定位的基本使用

1.1 设置定位方式

• 属性名：position
• 常见属性值：

1.2 设置偏移值

• 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
• 选取的原则一般是就近原则 （离哪边近用哪个）

2. 静态定位

2.1 介绍：静态定位是默认值，就是之前认识的标准流。

2.2 代码：position:static;

2.3 注意点：

• 静态定位就是之前标准流，不能通过方位属性进行移动
• 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定

3. 相对定位

3.1 介绍：自恋型定位，相对于自己之前的位置进行移动

3.2 代码：position:relative;

3.3 特点：

• 需要配合方位属性实现移动
• 相对于自己原来位置进行移动
• 在页面中占位置 → 没有脱标

3.4 应用场景：

• 配合绝对定位组CP（子绝父相）
• 用于小范围的移动

4. 绝对定位

 4.1 介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动

 4.2 代码：  position: absolute;

4.3 特点：

• 需要配合方位属性实现移动
• 默认相对于浏览器可视区域进行移动
• 在页面中不占位置 → 已经脱标

4.4 注意：

绝对定位相对于谁移动？

• 祖先元素中没有定位 → 默认相对于浏览器进行移动
• 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动

4.5 应用场景：

• 配合绝对定位组CP（子绝父相）

例： 

5. 子绝父相

5.1 场景：让子元素相对于父元素进行自由移动

5.2 含义：

• 子元素：绝对定位
• 父元素：相对定位

5.3 子绝父相好处：

• 父元素是相对定位，则对网页布局影响最小

5.4（拓展） 子绝父绝特殊场景

 1） 场景：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可！

 2） 原因： 父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局

5.5一些案例方法

a. 子绝父相水平居中方法

1） 子绝父相

2） 先让子盒子往右移动父盒子的一半 left：50%

3） 再让子盒子往左移动自己的一半

普通做法：margin-left：负的子盒子宽度的一半

• 缺点：子盒子宽度变化后需要重新改代码

优化做法：transform：translateX(-50%)

• 优点：表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码

4）小结

1. 子绝父相
2. left：50%；
3. transform：translateX（-50%）；

b.子绝父相垂直居中方法

 1）子绝父相

 2） 让子盒子往右走大盒子一半      left：50%

 3） 让子盒子往下走大盒子一半      top：50%

 4） 让子盒子往左+往上走自己的一半 transform：translate(-50%，-50%)；

6. 固定定位

6.1 介绍：死心眼型定位，相对于浏览器进行定位移动

6.2 代码：position: fixed;

6.3 特点：

• 需要配合方位属性实现移动
• 相对于浏览器可视区域进行移动
• 在页面中不占位置 → 已经脱标

6.4 应用场景：

•  让盒子固定在屏幕中的某个位置

7. 元素的层级关系

7.1 元素层级问题

1）不同布局方式元素的层级关系：

• 标准流 < 浮动 < 定位

 2）不同定位之间的层级关系：

• 相对、绝对、固定默认层级相同
• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素

7.2 更改定位元素的层级

1）场景：改变定位元素的层级

2）属性：z-index

3）属性值：数字      （数字越大，层级越高）

二、装饰

1.垂直对齐方式

1.1 文字对齐

• 属性名：vertical-align
• 属性值：

1.2（拓展）项目中 vertical-align 可以解决的问题

• 文本框和表单按钮无法对齐问题
• input和img无法对齐问题
• div中的文本框，文本框无法贴顶问题
• div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
• 使用line-height让img标签垂直居中问题

1.3 注意点：

• 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
• 推荐优先使用浮动完成效果

2. 光标类型

2.1 场景：设置鼠标光标在元素上时显示的样式

2.2 属性名：cursor

2.3 常见属性值：

3. 边框圆角

3.1边框圆角的设置

• 场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
• 属性名：border-radius
• 常见取值：数字+px 、百分比
• 原理：

• 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！

3.2 边框圆角的常见应用

1）画一个正圆：

• 盒子必须是正方形
• 设置边框圆角为盒子宽高的一半 → border-radius:50%

2）胶囊按钮：

• 盒子要求是长方形
• 设置 → border-radius：盒子高度的一半

4. overflow溢出部分显示效果

4.1 溢出部分：指的是盒子 内容部分 所超出盒子范围的区域

4.2 场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……

4.3 属性名：overflow

4.4 常见属性值：

5. 元素本身隐藏

5.1 场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏

5.2 常见属性：

• visibility：hidden
• display：none

5.3 区别：

•  visibility：hidden 隐藏元素本身，并且在网页中 占位置
•  display：none 隐藏元素本身，并且在网页中 不占位置

5.4 注意点：

• 开发中经常会通过 display属性完成元素的显示隐藏切换
• display：none；（隐藏）、 display：block；（显示）

6. 元素整体透明度

6.1 场景：让某元素整体（包括内容）一起变透明

6.2 属性名：opacity

6.3 属性值：0~1之间的数字

• 1：表示完全不透明
• 0：表示完全透明

6.4 注意点：

• opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……

7.边框合并

7.1 场景：让相邻表格边框进行合并，得到细线边框效果

7.2 代码：border-collapse：collapse；

8.用CSS画三角形技巧

8.1 场景：在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成。

8.2 实现原理： 利用盒子边框完成

8.3 实现步骤：

1. 设置一个盒子
2. 设置四周不同颜色的边框
3. 将盒子宽高设置为0，仅保留边框
4. 得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明

<style>
    div {
        width: 0px;
        height: 0px;
        border-top: 100px solid transparent;
        border-bottom: 100px solid red;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
    }
</style>

8.4 拓展：通过调整不同边框的宽度，可以调整三角形的形态