HTML+CSS知识汇总

1. CSS盒子模型

---

标准盒子模型和IE盒子模型的区别

• 标准盒子模型：width和height指的内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
• IE盒子模型：width和height指的是内容区域+border+padding。

2. div水平垂直居中

---

• 绝对定位(已知宽高)

.child {
  width:100px;
  height:100px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.child {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
}

• 绝对定位(不确定宽高)

.child {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

• flex布局：(宽高可确定也可不确定)

.parent {
  display: flex;
  justify-content: center; /*使子项目水平居中*/
  align-items: center; /*使子项目垂直居中*/
}

3. position 的属性值

---

• fixed（固定定位）
  脱离文档流，相对于浏览器窗口进行定位，使用top,right,left,bottom进行绝对定位，通过z-index定义层叠关系。
• relative（相对定位） 脱离文档流，使用top,right,left,bottom进行绝对定位，通过z-index定义层叠关系。
• absolute（绝对定位） 脱离文档流，相对于static定位以外的第一个父元素进行绝对定位，使用top,right,left,bottom进行绝对定位，通过z-index定义层叠关系。

4. CSS3新特性

---

• animation
• transition
• transform
  • scale
  • scale3d
  • translate
  • translate3d
  • rotate
  • rotate3d
  • skew
  • perspective
  • transform本质上是一系列变形函数，分别是translate位移，scale缩放，rotate旋转，skew扭曲，matrix矩阵。
• 伪元素
• 边框
  • border-radius
  • box-shadow
  • border-image
• 背景
  • background-size
  • background-origin
  • background-clip
  • background-image
• 文本
  • text-shadow
  • text-wrap
  • @font-face

5. 使元素消失的方法

• 1.opacity：0,该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定了一些事件，如click事件也能触发
• 2.visibility:hidden,该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
• 3.display:node, 把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删掉。

6.BFC、清除浮动

7.浏览器内核

8.flex布局