css基础知识（中）

最新推荐文章于 2024-11-01 16:54:21 发布

jajingpeng

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量65

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/hddpeag/article/details/121051055

版权

特点一：块元素，上下外边距，求最大值
特点二：行内元素，不识上下，左右外边距求和
特点三：行内块元素，上下左右求和
特点四：嵌套元素，子元素的margin-top会向上传递，父节点添加overflow解决
margin：0 auto；块元素左右居中
（margin：top值，right值，bottom值，left值）外边距的简写

二、背景

1、background-color 背景色

2、background-image：url（路径）背景图片

3、background-repeat：背景图片的重复

repeat	重复
no-repeat	不重复
repeat-x	水平重复
repeat-y	垂直重负
round	缩放的重复铺满
space	不缩放的重复铺满

4、background-position 背景图片的位置
top/left/right/bottom
距离起始位置的x，y的像素值

5、background-size 背景图片的大小
width，height像素值定义宽高
cover完全铺满会裁剪不留空白
contain铺满不裁剪留空白

6、background-origin 背景的起始位置

border-box	边框为起始位置
padding-box	内填充为起始位置
content-box	内容为起始位置

7、background-clip 背景图的裁剪

border-box	不裁剪
padding-box	裁剪边框
content-box	裁剪边框和内填充

8、background-attachment 背景图的固定选项

scroll	滚动而滚动
fixed	固定

9、背景图的简写background：颜色，图片路径，重复，位置/大小，固定选项

10、多图背景background：url（图1）重复位置 /大小，url（图2）···

三、显示类型

1、display 显示类型

block 块元素识宽高，占整行，自动换行
inline 行内元素不识别宽高，不换行
inline-block 行内块元素识别宽高，不换行
none 不渲染不显示，不保留空间

2、visiblity可视化选择

visible显示
hidden 隐藏，保留空间

四、浮动定位

主要解决内容元素的左右对齐

float：left/right

元素添加float后会自动转换为行内块显示类型

清除浮动的四种方法

1、父节点元素添加元素手动计算
2、父节点元素添加overlow：hidden
3、手动在父元素末尾添加<div style="clear box"><div>
4、推荐方案好处是重用，伪类清除 .clearfix:after{content:"";display:block;clear:both;}

五、定位

static 静态定位
标准文档流的方式 margin实现位置关系
层级自上而下最后优先

relative 相对定位
相对定位，相对当前位置的偏移（top/left/right/bottom）
层级+1

absolute 绝对定位
父元素添加[非static]定位后就成为包含框，就近原则查找包含框
脱离文档流，不保留空间

fixed 固定定位
       包含框只能浏览器窗口
       top/left/right/bottom控制
       不会随着滚动条的移动而移动
       脱离文档流，不保留空间，层级+1

sticky 粘性定位
根据元素的位置和滑动条的位置，top/bottom/left/right实现固定定位和默认定位的切换，空间保留，层级+1

z-index 定位的层级值
默认的元素自上而下最后优先的层级设置z-index的值来修改层级效果必须和定位position一起使用

六、列表样式

list-style-type	列表前面的序列号类型
list-style-image	列表前面的序列号图片
list-style-position	列表前面的序列号类型-位置

透明度 opacity：0~1

七、超链接样式

：link	未访问的
：visited	访问过的
：hover	鼠标经过
：active	鼠标按下激活