css应用内容总结
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:粘性定位，这在我日常开发中使用的比较少，但是在网页浏览中经常见到，一般是用于菜单元素，当前正常滑动当滑动到下页时，菜单定位于某个固定位置
7.背景与阴影
如何实现渐变? linear-gradient
.classA{ background-image: linear-gradient(to right, white, blue) // 向右侧渐变，从白色过渡到蓝色 }
如何实现阴影？ box-shadow为元素盒子设置阴影，text-shadow为文字生成阴影
box-shadow: 1em 1em black;
8.旋转位置（transform）
// 旋转角度 transform: rotate(30deg) // 向右偏移30度 // 平移 transform: translate(40px, 20px) //向右偏移40px,向下偏移20px //缩放 transform: scale(0.8) //缩放为原来大小的80% //倾斜 transform: skew(15deg) //元素内容向左倾斜15度
一些常用的内容就写到这里，其实现在一般都用了组件库的组件，自己完完全全的写样式却是不多，掌握以上的基本内容，对于日常的开发就没啥问题了。
备注：
1.在写一个页面样式的时候，首先在脑海中构建出自己的想法，怎么排布，用什么布局，再下手写，效率会高点
2.在原有的组件库的组件样式与ui不一致时，可以给组件另外加上一个类名，再在该类中写入自己的样式
