Css基础总结

总结一下Css的知识点，以便于自己更好的记忆。

1. BFC部分

2. div的高度和宽度？

3. Float 和 Flex布局

4. 响应式是怎么一回事？

5. 什么是动态REM？

---

1. BFC部分

什么是BFC？
BFC是（block formatting context)）块级格式化上下文。
内部子元素再怎么翻江倒海，都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。这句话的意思就是BFC可以让父元素管住自己的子元素。
什么时候会触发BFC呢？

• display:inline-block
• float
• position(absolute,fixed)
• overflow
  这几个常见的css属性都会触发BFC。

---

2.div的高度和宽度

div的高度：是由元素内部的文档流元素决定的。
文档流（normal flow）里的规则就是块级元素从上到下排列，行级元素从左到右排列。

3.Float和Flex布局

这两个布局都是css中最常用的布局方式了。
区别就是float的兼容性更好，如果需要兼容ie8一下的设备，就用float，代码多些，需要加上清除浮动。
flex布局的兼容性没有float那么好，毕竟是css3的新属性，优点就是代码简洁明了。

• 元素加上float之后需要清除浮动（clearfix）

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

Flex布局有这些常用的属性：

.container {
display: flex;
justify-content: center; //主轴方向的居中
justify-content: flex-end;/flex-start;
justify-content: space-between;/space-around;
align-items: center;//侧轴方向的居中
align-items: flex-end;/flex-start;
align-items: space-between;/space-around;
flex-direction:row;/column;/row-reverse;/column-reverse;
}
.item {
order: number; //顺序
align-self: ······;//自己的位置
flex-grow: .......;//增长比例
}

---

4. 响应式是怎么回事？

响应式其实就是随着页面的大小来改变页面布局的一个属性。
也就是媒体查询（media query）
用法1：

@media all and (max-width:425px){
      //谁谁应该怎么样
}

用法2: 直接在标签上用：<link rel="stylesheet" media="screen and (color)"/ href="xx.css" />

---

5. 什么是动态的Rem

做移动端的适配最难的就是兼容各个机型，不一样的屏幕尺寸。如果把页面内的元素高度写死或者按照百分比写高度宽度都会出现问题。
写死的话需要为每个屏幕都做适配，工作量大。按照百分比写，当页面出现宽度变化的时候，按钮比例又会发生变化，不是等比缩放。
所以动态REM方案就是最好的解决方案,所谓动态REM就是REM随着页面根元素的font-size变化。
rem代表当前页面根元素的font-size，1rem就是一倍根元素的font-size，2rem就是二倍根元素的font-size。
那怎么做到动态REM呢？
一开始用window.innerWidth获取到当前页面的宽度
然后用js将这个值赋给页面根元素的font-size。

<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+ pageWidth +'px })'
</script>

加上这几行代码就可以用rem来动态的代表页面的宽高了。