css知识点总结
1.css是什么
css的英文名称是 C
ascading
S
tyle
S
heets，意思是层叠样式表。它定义了html元素如何显示，也就是html文件的样式。
2.如何使用css
我们可以通过一下四种方式在html文件当中使用css。
（1）直接通过标签的style属性来添加样式，也就是我们平时经常说的行内样式。
（2）在头部通过内部样式表添加样式。
（3）通过<link>标签引入样式。
（4）通过@import导入样式。
2.常用的css选择器有哪些
常用的css选择器有以下几种
（1）id选择器
（2）类选择器
（3）标签选择器
（4）通配符选择器
（5）相邻选择器
（6）子选择器
（7）后代选择器
（8）属性选择器
（9）伪类选择器
3.css样式优先级
（1）最近的祖先样式比其他祖先样式优先级高，也就是说同样的css样式代码，后面的也就是更靠近的样式代码，会覆盖掉前面的代码。
（2）"直接样式"比"祖先样式"优先级高，也就是说继承过来的样式是最低级的，任何其他的样式都能覆盖掉它。
（3）内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
（4）!important 拥有最高优先级，我个人关于这个的理解是加上！important之后，相当于这一条的层级提升到了内联样式这一级别。
4.css的盒子模型
css有标准盒子模型和IE盒子模型两种，其中的IE盒模型也就是我们平时常说的怪异盒模型。
（1）两种盒模型的概念
标准盒子模型：内容content + 填充padding + 边框border + 边界margin—— 宽高指的是 content 的宽高
IE盒子模型：内容（content+padding+border）+ 边界margin—— 宽高指的是 content+padding+border 部分的宽高
（2）设置方法
标准盒模型：box-sizing:content-box
IE盒模型：box-sizing:border-box
5.css外边距margin重叠现象
在标准文档流中，两个紧挨着的盒子的margin并不会叠加，而是会重叠。两个盒子的间距取决于margin更大的盒子的margin。
6.css高度塌陷问题
在标准文档流中，父元素的高度是由子元素撑起来的，有时当我们给子元素设置浮动的时候，就会产生高度塌陷的问题。
高度塌陷指的是当子元素无法撑起父元素的高度的时候，父元素高度塌陷，也就是高度变为0。此时父元素底部的那些盒子就会向上移动，子元素与这些盒子就会重叠，导致页面布局混乱。
解决方法：（1）定死父元素的高度，这样的话即使子元素设置为浮动，父元素也会有着固定的高度。但是这样做的话父元素就将无法自适应子元素的高度。
（2）开启块级格式化上下文，也就是BFC。
（3）设置一个高度与子元素相等的盒子，在子元素浮动后，无法撑起父元素高度的时候代替子元素撑起来。
7.BFC
BFC是块级格式化上下文，开启了BFC的元素，它的子元素无法影响到外界，我们可以用它解决margin重叠，以及清除浮动等。
（1）如何生成BFC
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display ： inline-block、table-cells、flex
overflow ： hidden、auto、scroll
满足以上任意一条即可生成BFC
（2）BFC的原理
BFC 内部的子元素，在垂直方向，边距会发生重叠。
BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。
BFC区域不与旁边的float box区域重叠。就是说可以用来清除浮动带来的影响。
计算BFC的高度时，浮动的子元素也参与计算。
8.
display:none 与 visibility:hidden 的区别
display:none，该元素不占据任何空间，在文档渲染时，该元素如同不存在。 visibility:hidden，该元素空间依旧存在.
display:none，会触发回流，进行渲染。 visibility:hidden，只会触发重绘，因为没有发现位置变化，不进行渲染。
display:none，display不是继承属性，元素及其子元素都会消失。 visibility:hidden，visibility是继承属性，若子元素使用 visibility:visible，则不继承，这个子孙元素又会显现出来。
9.Position
static：默认值。没有定位，元素出现在正常的文档流中
relative：生成相对定位的元素，相对于其正常位置进行定位，不脱离文档流
absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
fixed：生成固定定位的元素，相对于浏览器窗口进行定位。
inherit：规定应该从父元素继承 position 属性的值
sticky：粘性定位，它主要用在对 scroll 事件的监听上
10.如何让div水平居中
（1）宽度固定的时候，需要谁居中，就给谁设置margin:0 auto;
（2）宽度不定，默认子元素宽度与父元素宽度一样，给子元素设置display:inline-block;或display:inline,将其转换成行内块级元素/行内元素，给父元素设置text-align:center
（3） 子元素设置绝对定位，父元素设置相对定位，left:50%,margin-left:-子元素的宽度的一半(宽度定),或者transform:translateX(-50%)(宽度不定)
（4） 父元素设置display:flex;justify-content:center;
11.如何让div垂直居中
高度和宽度固定
(1)子元素设置绝对定位，父元素设置相对定位，子元素设置left:0;right:0;top:0;bottom:0;margin:auto;
(2)子元素设置绝对定位，父元素设置相对定位，子元素设置top:50%;left:50%(左上角垂直居中)，margin-top:-子元素高的一半,margin-left:-子元素宽的一半
高度和宽度不定
(1)子元素设置绝对定位，父元素设置相对定位，子元素设置top:50%;left:50%(左上角垂直居中)，transform:translate(-50%,-50%)
(2)父元素定义display:flex;justify-content:center;align-items:center;