css

box-sizing:border-box  包括边框尺寸

例如一个宽度300px的div被border所包围则

背景的宽度：width+border*2

outline 外边框

border-collapse:collapse;去掉表格间距

border-spacing    表格间距

empty-cells：hide

background-clip：context-box  （ 设置裁剪的位置，边框底下没有背景图片和颜色  默认是有的）

background-origin  设置图片的原点

rgba , background：transparent    颜色透明

opacity   元素整体透明

文档流  从左向右 从上到下

line-height 与 padding都可以设置垂直居中

块级元素的宽度=父元素.width=outline+margin+padding+border+width

width:inherit  继承父类

图片放在容器：

background-size:contain;

（width：100%  height：100%

object-fit：contain

）

选择器   id选择器>类选择器>标签选择器

标签元素：0001

类选择器：0010

id选择器：0100

伪类选择器：0002

行内标签：1000

空格+！important  不论优先级多高 ，加上就会覆盖掉原来样式

absolute 原点坐标 为非 static 父元素的左上角

fixed  原点坐标为body的左上角

脱离文档流：fixed absolute

不脱离文档流：static  relative

link 和@import区别

link属于XHTML标签，而@import是css提供的

页面加载时，link同时也会被加载，而import等页面加载完成才进行加载

#div+div 紧跟在div后面的一个兄弟元素

#div>div  直接的子元素

属性选择器

[]*  *是包含的意识

[]^  ^是以什么开头的

[]$ $是以什么结尾的

【id】选择具有id属性的所有元素

【id=‘ ’】

a:link 所有href属性

 伪类顺序不同为什么产生不同结果

权重是相同的   active 包括了  link  hover

link visited  hover active

text-align,line-height 都用于行内元素

屏幕大小1170 950（970）   750 

小图 用contain：适应容器大小  大图 用 cover ：覆盖 多余hidden

font-weight   normal 400  bold 700  bolder 900

visibility ：hidden 透明度为0 ， display 销毁

父容器中设置overflow：hidden 解决高度塌陷 

子容器最后添加一个空的div设置 clear:both  清除俩边的浮动（一般right无用，独占一行）

div设置 contenteditable=true   可以对div文本进行编辑 

浏览器引擎不同  写法  优雅降级     线性增强

---

display:flex;

主轴方向： justify-content 

交叉轴： align-items

display:flex  写在父元素中   min-windth :最小宽度  不想让它存在2个或4个

viewport: 应用于移动端，不允许改变底层窗口的大小，解决了苹果的物理尺寸与逻辑尺寸 的问题 ，与安卓一样都使用物理尺寸

手机 默认边距15px   pc默认边距8px

box-showder   +  boder-radius  实现内外圆角

不使用 flex  可以使用display：table-cell  （类似于表单）  及支持IE8以及现代流行浏览器，ie6/7则不行，也会使float失效