3.21笔记

一、定位

作用：显示定在所有其他元素之上、可以让元素在浏览器中任意位置。

a 标准流

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

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

b 浮动

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

c 定位

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

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

1、属性名：position

静态定位：static

相对定位：relative

绝对定位：absolute

固定定位：fixed

向下移动用top+数值px  表示距离上边的距离

向右移动用left+数值px 表示距离左边的距离

2、静态定位

3、相对定位（position：relative）

介绍：相对于自己之前的位置 位移之后自己原来的位置还在  覆盖在下面元素之上。在页面中占位置 → 没有脱标

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

、 用于小范围的移动

4、绝对定位(position: absolute)需要给父级添加定位属性

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

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

应用：配合绝对定位组CP（子绝父相）

相对于谁移动？

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

当有定位属性时 margin：0 auto的版心水平居中效果就不生效。

当我们要实现水平居中效果时需要将目标盒子绝对位置设置 left为50%  、margin-left为－目标居中盒子宽度的一半。

也可以用transform：translatex（-50%）

                transform：translatey（-50%）           

垂直居中一般都用定位的方式。

底部半透明遮罩效果

操作：设置div将图片或者所需要的背景插入再来一个div将属性设置为left：0、right：0、bottom：0 背景颜色为rbga（0，0，0，0.5）

5、固定定位（position：fixed）

相对于浏览器进行定位移动

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

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

6、层级关系

标准流<浮动<定位

二、装饰

1、垂直对齐方式

基线：浏览器对文字类型与元素排版时存在一条准基线，在处理行内元素或者行内块元素时都是按文字对齐处理。

vertical-align：取值有 top上对齐  middle居中对齐  bottom下对齐

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

文本框和表单按钮无法对齐问题

input和img无法对齐问题

div中的文本框，文本框无法贴顶问题

div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题

使用line-height让img标签垂直居中问题

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

2、光标类型 cursor

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

常见属性值

default  默认值，通常时箭头

pointer  小手效果，提示用户可以点击

text  工字形，提示用户可以选择文字

move  十字光标，提示用户可以移动

3、边框圆角（border-radius）

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

属性值：数字＋px、百分比

特殊应用

画一个正圆：

盒子必须是正方形

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

胶囊按钮：

盒子要求是长方形

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

4、overflow溢出部分显示效果

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

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

属性值 ：

hidden：溢出部分隐藏

scroll：无论是否溢出，都显示滚动条

auto：根据是否溢出，自动显示滚动条

5、元素本身隐藏

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

常见属性：

visibility：hidden

display：none

区别：

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

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

display：none；（隐藏）、 display：block；（显示）开发中比较常用

6、拓展

元素整体透明度

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

属性名：opacity

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

1：表示完全不透明

0：表示完全透明

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

边框合并

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

代码：border-collapse：collapse；

用CSS画三角形技巧（面试题）

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

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

实现步骤：

设置一个盒子

设置四周不同颜色的边框

将盒子宽高设置为0，仅保留边框

得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明

三、选择器拓展

1、链接伪类选择器

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

选择器：

a:link  a连接中未显示过的状态

a:hover  选中时鼠标悬停的状态

a:visited  a链接访问过后的状态

a:active  鼠标按下的状态

2、焦点伪类选择器（focus）

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

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

3、属性选择器

标签＋【属性名＋属性值】