从CSS定位装饰开始入门前端Day08

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

3、静态定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到top,bottom,left,right影响。

4．相对定位

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

代码:position: relative;

特点:

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

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

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

应用场景:

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

（2）用于小范围的移动

5、绝对定位

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

代码:position: absolute;

特点:

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

（2）默认相对于浏览器可视区域进行移动3.在页面中不占位置→已经脱标

应用场景:

配合绝对定位组CP(子绝父相)

6、子绝父相

子元素在父元素上移动，前提是父元素必须有位置。而绝对定位和固定定位都是会造成脱标,不占有自己原来的位置。

父盒子和子盒子都是绝对定位时，父盒子由于脱标导致不保留自己原来的位置，造成下面的盒子占用了父盒子原来的位置。

父盒子修改为RELATIVE，后面的盒子以标准流对待父盒子。

7、固定定位

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

移动代码:position: fixed;

特点:

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

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

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

应用场景:

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

8、元素的层级关系

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

标准流<浮动<定位

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

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

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

9、装饰

目标:能够完成元素的装饰效果

9.1垂直对齐方式

9.1.1认识基线（了解）

基线:浏览器文字类型元素排版中存在用于对齐的基线(baseline)

9.1.2文字对齐问题

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

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

9.1.3垂直对齐方式

属性名: vertical-align

属性值:

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

9.2光标类型

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

属性名: cursor

常见属性值:

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

9.3边框圆角

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

属性名: border-radius

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

原理：

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

9.3.1边框圆角的常见应用

画一个正圆:

（1）盒子必须是正方形

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

胶囊按钮:

（1）盒子要求是长方形

（2）设置→border-radius:盒子高度的一半

9.3.2(拓展)元素整体透明度

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

属性名： opacity

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

1:表示完全不透明.

0:表示完全透明

注:

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

9.4overflow溢出部分显示效果

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

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

常见属性值:

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

9.5元素本身隐藏

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

（1） visibility: hidden

（2） display: none

晋龍

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从CSS定位装饰开始入门前端Day08

目标:能够说出定位的常见应用场景，并且能够说出不同定位方式的特点1、定位的基本介绍1.1网页中常见布局方式标准流（1）块级元素独占一行→垂直布局（2）行内元素/行内块元素一行显示多个→水平布局浮动（1）可以让原本垂直布局的块级元素变成水平布局定位（1）可以让元素自由的摆放在网页的任意位置（2）一般用于盒子之间的层叠情况1...
复制链接

扫一扫