imagine_tion的博客

CSS 书写顺序位置属性（position，top，right，z-index，display，float等）大小（width，height，padding，margin）文字系列（font，line-height，letter-spacing，color-text-align等）背景（background，border等）文本属性 （text-align，vertical-align，text-wrap 等）其他（animation，transition等）目的：减少浏览器 refl.

一、概念：BFC(Block Formatting Context)：块级格式化上下文。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。（注释：block-level box：其display属性为block，list-item，table的元素，会生成block-level box）二、性质：1.计算BFC的高度时，浮动元素也会参与计算。2.内部的box会在垂直方向，一个接一个地放置。3.box

一、两者的定义 1.伪类（pseudo-class）是一个以冒号作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。 2.伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前添加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些**文本实际不在文档树中**。二、区别 1.伪类是通过在**元素选择器上加入伪类**改变元素状态。 2.伪元素通过**对元素的操

1.translate（）是transfrom的一个值。改变transfrom或者opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。2.改变绝对定位会触发重新布局，进而触发重绘和复合。3.transfrom使浏览器为元素创建一个GPU。但改变绝对定位会使用到GPU。因此translate（）更高效，可以缩短平滑动画的绘制时间。4.translate改变位置时，元素依旧会占据其原始空间，绝对定位不是。...

1.static:正常文档定位，此时top,bottom,left和z-index属性无效，块级元素从上往下纵向排布，行级元素从左往右排列2.relative: 相对定位，此时的“相对”是相对于正常文档流的位置3.absolute:相对于最近的非static定位祖先元素的偏移，来确定元素位置，比如一个绝对定位元素他的父级和祖父级元素都为relative,他会相对他的父级而产生偏移4.fixed: 指定元素相对于屏幕视口（viewport）的位置来指定元素的位置。元素的位置在屏幕滚动时不回改变，比如定义

1.opacity:0 元素的透明度化为零，隐藏，占据空间，可以交互2.visibility:hiden 隐藏，占据空间，不可以交互3.overflow:hiden 隐藏元素溢出的部分，占据空间，不可以交互4.display:none 彻底隐藏，元素从文档流中消失，不占据空间，不可以交互，不影响布局5.z-index:-9999 将层级放到底部，被覆盖，看起来隐藏

Flex布局概念： 弹性布局，是传统的布局解决方案flex属性分为容器属性和元素属性容器默认存在两条轴：水平的主轴跟垂直的交叉轴容器属性：flex-direction：决定主轴的方向（即子item的排列方法）flex-direction: row | row-reverse | column | column-reverse;flex-wrap：决定换行规则 flex-wrap: nowrap | wrap | wrap-reversejustify-content：对其方式，