一、Css选择器分类和权重
1、选择器分类
-
元素选择器div｛｝
-
伪元素选择器 ::before｛｝
真实存在的元素
-
类选择器 .a｛｝
-
伪类选择器 ：a：hover｛｝
元素被选中的状态
-
属性选择器 [type=button]｛｝
-
ID选择器 #app｛｝
-
组合选择器 [type=button] + a｛｝
-
否定选择器 ：not（.link）｛｝
-
通用选择器*｛｝
2、选择器权重
- ！important 无穷大
- 行内样式 +1000
- ID选择器 #app{} +100
- 类选择器 .a｛｝ +10
- 伪类选择器 .a：hover｛｝ +10
- 元素选择器div｛｝ +1
- 伪元素 ：：after｛｝ +1
- 其他选择器 +0
1. 权重相加不进位
2. 相同的权重，后面写的生效
二、Css布局
1、float浮动+margin
2、inline-block布局
3、flexbox布局
4、 响应式布局
三、样式塌陷
1、外边距合并问题
垂直排列的两个块元素,分别给上面的盒子加向下的外边距和给下面的盒子加向上的外边距,此时会造成外边距合并。
当值相等的时候,间距就是这个值。
当值不相等的时候,谁的值大间距就是那个值。
2、 外边距塌陷问题
嵌套的两个块元素,在给第一个子元素设置向上的外边距时,父盒子会跟着掉下来
解决方案:
方法一：给父元素设置上边框border-top
方法二：给父元素设置overflow:hidden;
方法三： 可以为父元素定义上内边距
3、清除浮动造成的影响
原因：当父元素没有设置高度的时候，子元素加了浮动。因为浮动元素不再占用原文档流的位置，所以父元素会认为没有内容，此时父元素的高度就是0。
解决方案:
1.给父元素设置固定高度
2.给父元素设置overflow:hidden. (根据场景使用)
3.给父元素调用clearfix类名 (最推荐方案)
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
四、定位
1、相对定位
也叫占位定位,在移动的时候是一个脱离标准流的状态,参考点是以当前自身的位置。
2、绝对定位
绝对定位: 是一个完全脱离标准流的状态。 默认参考点: left top: 是body的左上； right bottom 是窗口的右下。
3、 相对定位配合绝对定位使用
口诀：子绝父相
- 子父指的是标签是嵌套关系，子元素是绝对定位，离子元素最近的加了定位属性的祖先元素。
- 此时子元素left,top的参考点是祖先元素左上
- 此时子元素right,bottom的参考点是祖先元素右下
* 当元素加了定位属性后,设置宽高起作用
* 层级:z-index 取值范围是整数,默认层级是0
* 当元素加了定位属性后,当层级相同时,后写的标签会压在先写标签的上面,
* 当层级不同时,层级大的压在层级小的上面
五、Css精灵图
css精灵也叫 css sprite css雪碧图,是背景图的技术。
服务器的链接资源是有限的，当服务器的链接数饱和时，会造成排队，网页中显示图片需要进行对服务器的链接下载，加载到网页中。所以为了节省服务器的链接的压力，通常将一些小图拼成一张大图，一次性链接进行下载。在通过移动背景图的位置来显示不同元素的所显示的区域。
=======================待更新=========================
