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;