css3的重点内容

css3的重点内容

浮动

父级边框塌陷问题

1. 浮动的清除

clear:left; //清除左侧浮动
clear:right; //清除右侧浮动
clear:both; //清除两侧浮动

解决方案

1. 增加父级元素的高度
2. 增加一个空的div，之后清除浮动
3. 通过overflow来进行相关元素的修剪
4. 给父类添加相应的伪类元素 after。(当今最为成熟的清除浮动的方法)

.father:after {
    content: "";
    dispaly: block;
    clear: both;
}

定位

相对定位 relative

相对于原来位置进行相应偏移（属于标准流）

绝对定位 absolute （会产生相应的浮动）

1. 在没有父级元素定位的情况下，其相对于浏览器进行定位**（子绝父相）**
2. 其移动的范围是在父级元素的范围内进行移动

固定定位 fixed

固定在页面的某一个位置，不会随着页面的变化而变化

z-index

提高图层的权重，数字越大，越往上显示。

opacity展示背景的透明度

背景渐变的常用网站

变的常用网站

[外链图片转存中…(img-Qi5RX3IS-1630585460403)]