CSS学习

文档流，块、行内和行内块元素

文档流也就是正常布局流。我对它的理解就是：像我们平时写文章一样，文字排列是先从左到右，然后从上到下。

块元素：display:block、div、body、header、nav、main、footer等。表示一个标签占有一行。两个块元素会占两行。

(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行

行内元素：display:inline、a、span、p等。按文档流顺序排列，但在浏览器中，排列到边缘时，如果距离不够会自动剪切。

(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间

行内块级元素：display:inline-block。文档流排序，但不会出现边缘剪切，自动换行完整元素。

(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右

脱离文档流：float、position为absolute/fixed

最上层~最下层：文字，浮动，块级子元素，border，background。
脱离文档流就是会往上移动一些距离，页面的显示会发生一些变化。具体情况具体讨论。比如加了float和position的元素相比谁在上面。

CSS学习还必须要学习的两种盒模：内容盒模型和盒子盒模型。

内容盒模型：内容宽度就是盒子宽度，content=content。
box-sizing:content-box，实际计算宽度时，就是当你在一个div选择器中写了width时，该宽度只为content宽度，没有计算margin，border，padding

盒子盒模型：内容宽度为content=content+padding+border，设置为box-sizing:border-box。

一般使用盒子盒模型，因为它更好用一些。

浏览器的渲染原理

根据HTML构建HTML树(DOM)
根据CSS构建HTML树(CSSOM)
将两棵树合并成一棵渲染树(render tree)
Layout布局(文档流、盒模型、计算大小和位置)
Paint绘制(把边框颜色、文字颜色、阴影等绘制出来)
Compose合成(根据层叠关系展示画面)

三种不同的更新方式：

第一种：全部重新来一遍，重新绘制。
第二种：改变背景颜色，只省略了Layout
第三种：tarnsform,省略Layout和Paint

根据以上步骤有六种优化浏览器渲染的方法：google连接

CSS动画元素：transform和animation

transform：

translate：位移。translate(120px,50%)具体单位或者百分比移动

scale：缩放。scale(0.5)小数或者整数

rotate：旋转。rotate(45deg)顺势针旋转45度

skew：倾斜。(45deg)顺势针倾斜45度

经验之谈：

inline元素不支持transform,要改为block或者inline-block

一般配合transition过渡使用

一个选择器只有一个transform，多个transform只会应用最后个 元素绝对居中： 子相父绝定位。 posiition：absolute; left:50%; top:50%; transform:translate(-50%,-50%);

transition动画过渡：

transition：属性名时长过渡方式延迟
transition：all 1s ease-in-out .5s

animation:

将样式加入某一个选择器：

animation: 3s ease-in 1s 2 reverse both paused slidein;

<div id="identifier">动画内容</div>

动画过渡写法：

部分工具网站和经验之谈：

清除浮动：

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

图片内容边距问题：

vertical-align:middle/top

border边框：不占据实际边距

outline:1px solid red;不占宽度

平均布局：

负margin解决float边距

caniuse.com，查看某个css样式在浏览器是否支持。

CSS知识总结