css作为前端三大重要组成之一也是尤为重要得，而且在日常生活中可能关于javascript的相关问题可以组织语言去百度，而对于一些css样式有时候可能却不好组织语言去表述这个问题。css的一些知识这边来进行记录总结一下。全篇重点！！！
1.普通盒模型和怪异盒模型
普通盒模型：设置容器的宽度是内容(content)的宽度，内边距(padding), 边框(border)都是基于这个宽度进行叠加
怪异盒模型：设置容器的宽度是内容，内边距，边框的宽度总和，实际内容的宽度会基于宽度进行计算。
如何设置为怪异盒模型？
box-sizing: border-box;// 怪异盒模型 box-sizing: content-box;//普通盒模型（默认）
2.优先级和继承
在日常开发过程中是否遇到过没有按照预期显示你想要的样式，这时一般都会打开控制台，查看该元素的相关样式，极有可能样式被覆盖了。
一些常用的优先级排序：!important > 内联style样式 > #id > .class > 标签选择器 > 通用选择器* > 伪类选择器
一些常用的权重： 内联style -> 1000, #id -> 100, .class -> 10, 标签 -> 1
继承属性：当父元素被设置一些样式后，他的某些属性会被子元素进行继承
（一些和文本相关的样式（font-size, color, font, text-align, word-spacing））
3.相对单位em, rem, vh, vw
em: 相当于当前元素字号的倍数
rem: 相对于根元素字号的倍数
vh: 相对于视口的大小（100vh等于视口的高度）
vw: 相对于视口的大小
4.块级格式上下文（BFC）
块级格式上下文是设置的一块独立的区域，内部元素基于此进行布局，不会与外部元素进行外边距折叠或者相互影响等问题。
如何创建bfc?
1.设置为flex, inline-block布局
2.设置overflow属性不为visible
3.设置为浮动元素
4.position为absolute或者fixed
5.flex布局
首先给元素设置为display: flex， 该元素变成一个弹性容器
子元素上的一些属性：
flex-shrink: 1,(默认自动缩小)， flex-grow: 0, (默认不增大)， flex-basis: width, (默认是该容器宽度) align-self:auto(默认) order:
容器上的一些属性：
flex-direction:row(默认)，row-reverse, column, clomun-reverse, flex-wrap: nowrap(默认)， wrap, wrap-reverse justify-content: flex-start(默认)， flex-end, center, space-between, space-around align-item: flex-start， flex-end, center, stretch(默认), baseline align-content: flex-start, flex-end, stretch, center, space-between, space-around
6.定位
postion static(默认)：默认定位，没有任何定位 fixed: 固定定位，固定于视口的定位，滑动不改变位置 relative: 相对定位，相对于当前位置的定位 absolute:绝对定位，相对于定位不是static的定位，一直向上查找，直到找到第一层父元素，如果祖先元素都没有定位，那会基于初始包含块，初始包含块和视口一样大，固定在网页顶部 sticky:粘性定位，这在我日常开发中使用的比较少，但是在网页浏览中经常见到，一般是用于菜单元素，当前正常滑动当滑动到下页时，菜单定位于某个固定位置
标签：总结,flex,定位,元素,默认,宽度,应用,css From： https://www.cnblogs.com/best-mll/p/16906703.html