Web前端
盒子模型外边距边框内边距
CSS的三大特性定位方式行内元素垂直对齐方式vertical-align溢出设置overflow图片悬停缩放元素显示层级
盒子模型
外边距
什么是外边距: 元素距上级元素或相邻兄弟元素的距离赋值方式：
margin
: 10px
20px
30px
40px
;
上下相邻两个元素外边距取最大值, 左右相邻外边距累加粘连问题: 当元素上边缘和上级元素上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元 素添加overflow:hidden解决此问题
边框
赋值方式: border:粗细 样式 颜色;单独方向赋值: border-left/right/top/bottom:粗细 样式颜色圆角:border-radius: 5px; 值越大越圆，值大于宽高一半时为圆形 border:none; 去掉边框 border:0;
内边距
什么是内边距: 元素内容距离元素边缘的距离称为内边距给元素添加内边距会影响元素所占的宽高赋值方式: 和外边距类似
padding
-left
/right
/top
/bottom
:10px
; 单独某个方向赋值
padding
:10px
;
四个方向
10
padding
:10px
20px
; 上下
10 左右
20
padding
:10px
20px
30px
40px
;
CSS的三大特性
继承性: 元素可以继承上级元素的文本和字体相关样式, 部分标签自带效果不受继承影响,比如:超链接的字体颜色, h1-h6字体大小不受继承影响.层叠性: 多个选择器有可能选择到同一个元素,如果添加的样式不同则全部层叠生效,如果样式相同 则由优先级决定哪个生效优先级: 选择器作用范围越小优先级越高, id>class>标签名>继承
定位方式
文档流定位(静态定位) 元素默认的定位方式
特点: 块级元素从上到下排列,行内元素从左向右排列通过外边距控制元素位置 格式:position:static;
相对定位
格式: position:relative;特点: 元素不脱离文档流(仍然站着原来的位置)通过left/right/top/bottom控制元素的显示位置, 值是相对于元素的初始位置场景: 当需要移动某个元素,并且其它元素位置不变的时候使用相对定位
绝对定位
格式: position:absolute;特点: 元素脱离文档流(不占原来的位置)通过left/right/top/bottom控制元素的显示位置,值是相对于窗口(默认)或某一个上级元素 (需 要在上级元素中添加position:relative)场景:当需要在页面中添加一个元素,这个元素不会影响其它元素的位置,这时使用绝对定位相对定位和绝对定位总结: 如果需要实现多个元素的层叠效果,则需要将默认的文档流定位改成相对 定位或绝对定位,如果元素需要保留原有位置 则使用相对定位,不需要保留原有位置则使用绝对定位
浮动定位
格式: float:left/right;特点: 元素脱离文档流, 元素从所在行向左或向右浮动,当撞到上级元素或其它浮动元素时停止.如果一行装不下会自动换行,换行时有可能会被卡住应用场景: 当需要将纵向排列的元素改成横向排列时使用浮动定位
固定定位position:fixed;
格式: position:fixed特点: 元素脱离文档流通过left/right/top/bottom相对于窗口做位置偏移场景: 当需要将元素固定在窗口的某个位置时使用固定定位
行内元素垂直对齐方式vertical-align
top:上对齐bottom:下对齐middle:中间对齐baseline:基线对齐(默认)如果需要对页面中的某一个元素进行位置微调, 可以使用相对定位进 行调整,这种方式不会影响其它元素的显示效果.
溢出设置overflow
hidden: 超出范围隐藏visible(默认):超出范围显示scroll:超出范围滚动显示
图片悬停缩放
需要先设置图片动画持续时间 img{ /* 设置缩放动画持续时间 单位是秒*/ transition-duration: 1s; }悬停时设置动画缩放倍数img:hover{ /* 设置缩放动画为1.2倍 */ transform: scale(1.2); }
元素显示层级
当修改了元素的定位方式后, 有可能元素会出现层叠效果, 通过z-index属性控制元素显示的层级,默 认值是0 值越大越靠前.
