灯塔：CSS笔记（5）

定位：

1.标准流

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

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

2.浮动

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

3.定位

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

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

使用定位的步骤

1.设置定位的方式

属性名：position

常见属性值：

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

设置偏移值

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

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

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

相对定位

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

代码：position ：relative；

特点：

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

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

3.在网页中占位置，没有脱标

没有改变标签的显示模式

应用场景：1.配合绝对定位组cp（子绝父相）

2.用于小范围移动

*如果left和right都有，以left为准，如果top和bottom都有，以top为准

绝对定位

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

代码：position：absolute；

特点：

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

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

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

改变标签的显示模式：具体行内块特点（在一行共存，宽高生效）

应用场景：1.配合绝对组cp（子绝父相）

绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口为参照进行定位

注：1.绝对定位的盒子不能使用左右margin auto居中

left：50% 整个盒子移动到浏览器中间偏右的位置

把盒子向左侧移动：负的自己的宽度的一半

固定定位

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

代码：position：fixed；

特点：

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

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

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

应用场景：让盒子固定在屏幕中的某个位置

元素层级问题

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

标准流<浮动<定位

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

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

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

默认情况下，定位的盒子后来者居上

z-index：整数，取值越大，显示顺序越靠上，z-index的默认值为0

注意：z-index必须配合定位才生效

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

浏览器处理行内或行内块当作文字处理

垂直对齐方式：

属性名：vertical-align（凡是处理行内和行内块对齐，或者行内块和文字对齐，用这个）

属性值：

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

光标类型

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

属性名：cursor

常见属性值：

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

边框圆角

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

属性名：border-radius

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

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

边框圆角的常见应用

画一个正圆：

1.盒子必须是正方形

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

胶囊按钮：

1.盒子要求是长方形

2.设置->border-radius:盒子高度的一半

溢出部分显示效果

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

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

属性名：overflow

常见属性值：

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

（拓展）元素整体透明度

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

属性名：opacity

属性值：0 - 1之间的数字

*1：表是完全不透明

*0：表示完全透明

注意点：

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

项目拓展：

精灵图：

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

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

使用步骤：

1.创建一个盒子，设置盒子的尺寸和小图相同

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

3.修改背景图的位置

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

（左移x设为负，上移设为负）

背景图片大小

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

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

取值：

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

background连写拓展

完整连写：

background:color image repeat position/size;

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

解决：

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

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

盒子阴影

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

属性名：box-shadow

取值：

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

过渡

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

属性名：transition

常见取值：

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

注意点：

1.过渡需要：默认状态和hover状态样式不同，才能有过渡效果

2.transition属性给需要过渡的元素本身加

3.transition属性设置在不同状态中，效果有不同的

①给默认状态设置，鼠标移入移出都有过渡效果

②给hover状态设置，鼠标移入移出有过渡效果，移出没有过渡效果