HTML

• meta 常用属性
  • charset
  • viewport
  • title
  • description
  • keywords

CSS

BFC

• 触发条件

根元素 html
position: fixed | absolute;
float: left | right;
overflow: hidden | auto | scroll;
display: flex | table-cell | inline-block;

• 作用
  • 父元素高度坍塌 overflow: hidden
  • 嵌套盒子margin上下合并 .container { overflow: hidden }
  • 左右布局，左边浮动，右侧 overflow: hidden

清除浮动

.clearfix::after {
	content: '';
	display: block;
	height: 0;
	clear: both;
}

响应式原理

媒体查询的书写顺序

1. 如果从小到大判断，那么也从小到大书写

   

2. 如果从大到小判断，那么也从大到小书写

   

PC、移动端适配方案

• rem
  • rem 相对根元素 html 的 font-size
  • 移动端
    • fontSize = clientWidth / 10 算出每份 rem 的 px 大小
    • scss 的 mixin 设计稿px / (设计稿手机宽度 / 10) 算出多少份
    • webpack插件 px2rem-loader
  • PC端
    • fontSize = 100px
    • (设计稿px / 100)rem
• vm
  • 设计稿120px宽 = (120 * 100vw / 750px = 120 * 100 / 750 = 16vw)

布局

圣杯布局

• **padding**: 0 100px 0 200px 在 **.container** 上
• margin-right: -100px 在 .right 上