CSS随记

1. CSS检查

查看 caniuse.com知道某个 CSS 属性被浏览器支持的情况

2. 内联元素

• display：inline就是内联元素
• display：block 就是外联元素

3. 选择器

CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

4. 盒模型

当对一个文档进行布局的时候，浏览器渲染引擎会根据标准，将页面中的所有元素表示为一个一个矩形的盒子。CSS决定这些盒子的大小、位置以及属性。每个盒子有四个部分组成，分别是：content，padding，border，margin。 

边框：

• 属于盒子边缘，边框里面属于盒子内部，除了i按狂都是盒子外部，要设置边框，余姚至少设置三个样式：border-width；border-color；border-style；
• span{}里面要加上border才知道边界在哪
• 边框大小会影响整个盒子的大小
• border-width可以指定四个方向的边框宽度值得情况：上 右 下 左，上 左右 下，上下 左右
• border-width还有一组border-xxx-width/color/ style同样用法。
• xxx为top /right/ botton /left
• 如果border-color不写默认使用color的值
• border-style：默认值none-没有边框；solid-实线；dotted-点状虚线；dashed-虚线；double-双线
• border可以简写属性，但是不属性不分前后

内边距 padding

• 内容区和边框之间的距离，共有四个方向的边距padding-top，padding-right，padding-bottom，padding-left； 
•  内边距设置可以影响到盒子的大小
• 背景颜色会延伸到内边距，inner把内容区撑满
• 一个盒子得可见框得大小，有内容区，内边距，边框决定，计算盒子大小需要三者一起计算

外边距margin：

不会影响盒子得可见框大小，但是会影响位置，决定实际元素的大小，margin-top，margin-right，margin-bottom，margin-left，可以设置四个方向得大小，可以正值；元素在页面中自左向右排列，默认情况下如果我们设置的左，上外边距会移动自己，下，有会移动其他元素 

 5. 行内元素

display属性为inline的元素为行内元素

特点：

• 和其他元素都在一行上
• 高度、行高和顶以及底边距都不可改变
• 宽度就是它的文字或图片的宽度，不可改变

行内元素的盒模型：

• 行内元素（内联元素）不支持设置宽高，变成块元素可以；
• 行内元素有内容区，但是由内容撑开的；行内元素可以设置padding，但垂直方向的padding不会影响的元素的布局；同样border垂直方向也不会影响布局；margin同样，水平方向不会合并；

6. 文档流

文档流--文档流动的方向

• 网页是一个多层的结构，一层裸着一层，通过css可以为每一层设置样式
• 用户只能看最上一层，这些曾中，最底层叫做文档流，是网页的基础，我们所建构的元素默认在文档流中进行排列
• 对我们来说，元素主要有两个状态，在文档流中和不在文档流中（脱离文档流）
• 文档流本来就是自适应
• 响应式：pc上用固定宽度，手机上不固定宽度

7. 浮动

浮动的特点：

• 脱离文档流，不占位置，原来的位置里给后面的文档流
• 浮动元素一排显示，如果父元素装不下，默认另起一行，浮动元素之间默认无空隙
• 任何元素都可以添加浮动，无论它是块元素还是行内元素，浮动元素可以直接设置宽高，默认类似与行内块特性，不需要display转换

清除浮动

• 清除浮动不是把浮动清除了，而是清楚了浮动带给后面的标流的影响
• 什么时候清除浮动：父元素高度塌陷
• 如何清除浮动：

1. 额外标签法

在最后一个浮动标签后，新加一个标签，给其设置clear：both；，缺点—如果页面浮动布局多，就要增加很多空div；

1. 父级添加overflow属性

overflow:hidden；：缺点-不能和position配合使用，因为超出的尺寸的会被隐藏，无法显示需要溢出的元素（不推荐），

overflow:auto；：缺点：内部宽高超过父级div时，会出现滚动条。

1. 使用after伪元素清除浮动（推荐使用）；
2. 使用before和after双伪元素清除浮动。

8. 动画

transform

允许旋转，缩放，倾斜或平移给定元素

translate位移，scale缩放，rotate旋转，skew扭曲，matrix矩阵

transform:translateX（50%）;水平移动，会半个升位；X变成Y则是垂直方向

transform：tranlateZ；二维平面；

transform：scaleX或者Y（1.5）-缩放（放大1.5倍）用的比较少，因为会出现模糊；

transform：rotateX旋转——一般做360旋转制作loading

transition

transition制作中间帧，过渡必须有起始

animation

animation xxx （时间）--点击开始动画；不过要先声明一个@keyframe xxx {}