CSS布局进阶

目录

一、定位

1、网页常见布局方式

1. 1标准流

1.2 浮动

1.3 定位

1.4 定位的常见应用场景

1.5 使用定位的步骤

二、装饰

三、选择器拓展

一、项目样式补充

---

一、定位

1、网页常见布局方式

1. 1标准流

1. 块级元素独占一行 → 垂直布局

2. 行内元素/行内块元素一行显示多个 → 水平布局

1.2 浮动

1. 可以让原本垂直布局的 块级元素变成水平布局

1.3 定位

1. 可以让元素自由的摆放在网页的任意位置

2. 一般用于 盒子之间的层叠情况

1.4 定位的常见应用场景

①  可以解决盒子与盒子之间的层叠问题

定位之后的元素层级最高，可以层叠在其他盒子上面

②  可以让盒子始终固定在屏幕中的某个位置

1.5 使用定位的步骤

①  设置定位方式

属性名：position

常见属性值：

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

②  设置偏移值

偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

选取的原则一般是就近原则 （离哪边近用哪个）

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

1.6 静态定位

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

代码：

position: static;

注意点：

1. 静态定位就是之前标准流，不能通过方位属性进行移动

2. 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定

1.7 相对定位

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

代码：

position: relative;

特点：

1. 需要配合方位属性实现移动

2. 相对于自己原来位置进行移动

3. 在页面中占位置 → 没有脱标

应用场景：

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

2. 用于小范围的移动

1.8 绝对定位

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

代码：

position: absolute;

特点：

1. 需要配合方位属性实现移动

2. 默认相对于浏览器可视区域进行移动

3. 在页面中不占位置 → 已经脱标

应用场景：

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

绝对定位到底相对于谁进行偏移

绝对定位相对于谁移动？

1. 祖先元素中没有定位 → 默认相对于浏览器进行移动

2. 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动

1.9 子绝父相介绍

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

含义：

子元素：绝对定位

父元素：相对定位

子绝父相好处：

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

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

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

原因：

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

使用子绝父相水平居中的操作是什么？

1. 子绝父相

2. left：50%；

3. transform：translateX（

-50%）；

使用子绝父相水平垂直居中的操作是什么？

1. 子绝父相

2. left：50%；

3. top：50%；

4. transform：translate（

-50%，-50%）；

1.10 固定定位

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

代码：

position: fixed;

特点：

1. 需要配合方位属性实现移动

2. 相对于浏览器可视区域进行移动

3. 在页面中不占位置 → 已经脱标

应用场景：

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

定位方式	属性值	相对于谁移动	是否占位置
静态定位	static	不能通过方位属性移动	占位置
相对定位	relative	相对于自己原来的位置	占位置
绝对地位	absolute	相对于最近的且有定位的祖先元素移动	不占位置（脱标）
固定定位	fixed	相对于浏览器可视区域	不占位置（脱标）

1.11 元素层级问题

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

标准流 < 浮动 < 定位

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

相对、绝对、固定默认层级相同

此时HTML中写在下面的元素层级更高，会覆盖上面的元素

1.12 更改定位元素的层级

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

属性名：z-index

属性值：数字

数字越大，层级越高

二、装饰

1、认识基线（了解）

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

2、文字对齐问题

场景：解决行内/行内块元素垂直对齐问题

问题：当图片和文字在一行中显示时，其实底部不是对齐的

3、垂直对齐方式

属性名：vertical-align

属性值：

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

4、光标类型

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

属性名：cursor

常见属性值：

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

5、边框圆角

场景：让盒子四个角变得圆润，增加页面细节，提升用户体验

属性名：border-radius

常见取值：数字+px 、百分比

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

边框圆角的常见应用

画一个正圆：

1. 盒子必须是正方形

2. 设置边框圆角为盒子宽高的一半 → border-radius:50%

胶囊按钮：

1. 盒子要求是长方形

2. 设置 → border-radius：盒子高度的一半

6、溢出部分显示效果

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

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

属性名：overflow

常见属性值：

属性值	效果
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条

7、元素本身隐藏

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

常见属性：

1. visibility：hidden

2. display：none

区别：

1. visibility：hidden 隐藏元素本身，并且在网页中 占位置

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

注意点：

开发中经常会通过 display属性完成元素的显示隐藏切换

display：none；（隐藏）、 display：block；（显示）

（拓展）元素整体透明度

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

➢ 属性名：opacity

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

1：表示完全不透明

0：表示完全透明

➢ 注意点：

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

（拓展）边框合并

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

代码：border-collapse：collapse；

三、选择器拓展

1、链接伪类选择器

场景：常用于选中超链接的不同状态

选择器语法：

选择器语法	功能
a:link{ }	选中a链接未访问过的状态
a:visited{ }	选中a链接访问之后的状态
a:hover{ }	选中鼠标悬停的状态
a:active{ }	选中鼠标按下的状态

注意点：

如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写

记忆口诀：男盆友送了你一个 LV 包包，你开心的 HA 哈笑

其中 :hover伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态

2、焦点伪类选择器

场景：用于选中元素获取焦点时状态，常用于表单控件

选择器语法：

input:focus {
    background-color: skyblue;
}

效果：

表单控件获取焦点时默认会显示外部轮廓线

3、属性选择器

场景：通过元素上的HTML属性来选择元素，常用于选择 input 标签

选择器语法：

选择器	功能
E[attr]	选择具有attr属性的E元素
E[attr="val"]	选择具有attr属性并且属性值等于val的E元素

四、项目样式补充

1、精灵图的介绍

场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图

优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度

例如：需要在网页中展示8张小图片

8张小图片分别发送 → 发送8次

合成一张精灵图发送 → 发送1次

精灵图的优点是什么？

减少服务器发送次数，减轻服务器的压力，提高页面加载速度

2、精灵图的使用步骤

1. 创建一个盒子

2. 通过PxCook量取小图片大小，将小图片的宽高设置给盒子

3. 将精灵图设置为盒子的背景图片

4. 通过PxCook测量小图片左上角坐标，分别取 负值 设置给盒子的background-position：x y

3、背景图片大小

作用：设置背景图片的大小，

语法： background-size：宽度 高度；

取值：

取值	场景
数字+px	简单方便，常用
百分比	相对于当前盒子自身的宽高百分比
contain	包含，将背景图片等比例缩放，直到不会超出盒子的最大
cover	覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

4、background连写拓展

完整连写：

background: color image repeat position/size;

注意点：

background-size和background连写同时设置时，需要注意覆盖问题

解决：

1. 要么单独的样式写连写的下面

2. 要么单独的样式写在连写的里面

5、文字阴影

作用：给文字添加阴影效果，吸引用户注意

属性名： text-shadow

取值：

参数	作用
h-shadow	必须，水平偏移量。允许负值
v-shadow	必须，垂直偏移量。允许负值
blur	可选，模糊度
color	可选，阴影颜色

6、盒子阴影

作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节

属性名： box-shadow

取值：

参数	作用
h-shadow	必须，水平偏移量。允许负值
v-shadow	必须，垂直偏移量。允许负值
blur	可选，模糊度
spread	可选，阴影扩大
color	可选，阴影颜色
inset	可选，将阴影改为内部阴影

7、过渡

作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验

属性名： transition

常见取值：

参数	取值
过渡的属性	all:所有能过度的属性都过度、具体属性名如：width：之后width有过渡
过渡的时长	数字+s（秒）