1. 盒子模型

简介

盒子模型目前主流的是W3C盒子模型，概念也非常简单，从外到内：margin → border → padding → content。Chrome开发者工具中能很方便地看出：

Chrome开发者工具下的盒子模型展示

两种盒子模型

只要记住：
IE的盒子模型 width = contentWidth + paddingWidth + borderWidth；
W3C的盒子模型 width = contentWidth （高度同理）

2. 定位

Position

• static：默认的文档流式布局
• 相对定位relative：没有脱离文档流，相对源位置的视觉偏移。
• 绝对定位absolute：脱离文档流，相对于父元素的实际偏移，display属性都变成block，会忽略根元素的padding。
• 固定定位Fixed：脱离文档流，相对于浏览器窗口的实际偏移。

Float：脱离文档流

1. 清除浮动方法：
   • 为父元素设置高度。看上去把浮动的元素收入其中。
   • 在浮动子元素同级的后面设置元素带有clear:both就可以了，它会清除浮动带来的影响。
   • 为父元素设置Overflow:hidden。
2. 为什么 overflow:hidden 能清除浮动影响？
   overflow:hidden 本来是用来隐藏溢出容器的那部分内容的，但是现在却成了清除浮动的好帮手。这就涉及到BFC了。
   这个关于BFC的知乎题目大家可以看看
   • BFC 全称是块级排版上下文，用于对块级元素排版，默认情况下只有根元素（body)一个块级上下文，但是如果一个块级元素 设置了 float:left，overflow:hidden 或 position:absolute 样式，就会为这个块级元素生成一个独立的块圾上下文，新开僻的BFC像是开僻了一个新的小宇宙，使这个块圾元素内部的排版完全独立隔绝。
   • 独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，也就是说包含块会把浮动元素的高度也计算在内，所以不用清除浮动来撑起高度。

3. 居中

垂直居中

1. 绝对定位式：

parentElement{
  position:relative;
}
childElement{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

2. flex式：

parentElement{
    display:flex;
    align-items:center;/*交叉轴线下的居中*/
}

水平垂直居中

1. 绝对定位式：

parentElement{
  position: relative;
}
childElement:{
  position:absolute;
  top:50%;
  left:50;
  transform: translate(-50%,-50%)
}

2. flex式：

parentElement{
  display:flex;
  justify-content:center;/*轴线下的居中*/
  align-items:center;/*交叉轴线下的居中*/
}

3. CSS溢出居中式：

childElement: {
  position:absolute;
  width:10px;
  height:10px;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

4. 块状元素+行内元素标签

• 块状元素（列了一些还有在用的）

<div>  <table>表格 <p>段落 <form>表单 <h1-5>标题类 <ul>无序列表 <ol>有序列表 <dl>定义列表 <hr>水平分割线 <pre>预格式化 <blockquote>段落缩进前后5个字符 <address>地址文字 ...

• 行内元素

<span>常用内联容器 <a>锚点 <img>图片 <input>输入 <lable>标签 <textarea>多行输入 <code>代码 <br>换行 ...

5. em rem

记住：em是相对父元素，rem是相对根元素。

6. 选择器

• id选择器（ # myid）
• 类选择器（.myclassname）
• 标签选择器（div, h1, p）
• 相邻选择器（h1 + p）
• 子选择器（ul > li）
• 后代选择器（li a）
• 通配符选择器（ * ）
• 属性选择器（a[rel = "external"]）
• 伪类选择器（a: hover, li:nth-child）