【前端–JavaScript】知识点（九）—— 给男朋友总结的CSS知识点（三）

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战

每天回顾几个知识点，在平时代码中写起来会更加得心应手。

Chrome怎么支持小于12px 的文字

浏览器最小字体是12px，针对谷歌浏览器内核，使用transform属性：

font-size:10px;    
-webkit-transform:scale(0.8); 
display:block;
复制代码

png、jpg、gif、webp 图片格式的含义

• png：便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式。优点是：压缩比高，色彩好。大多数地方都可以用。
• jpg：一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
• gif：一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
• webp：谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久，兼容性不好，目前谷歌和opera支持。

style标签写在body后与body前的区别

首先在页面中，加载是自上而下执行的，首先加载的是样式。写在body后，由于浏览器以逐行的方式对html文档进行解析，当解析到尾部的样式表会导致浏览器停止之前的渲染，等待样式表解析完后再重新渲染，在IE可能出现样式失效导致的页面闪烁问题。

CSS属性overflow属性用来处理溢出元素的情况

scroll：会出现滚动条；
auto：子元素内容大于父元素时候会出现滚动条；
visiable：溢出内容出现在父元素之外；
hidden：溢出内容隐藏；

flex布局以及属性的解释

• flex-direction:控制主轴的方向

1. row 水平从左到右（默认）
2. row-reverse 水平从右到左
3. column垂直从上到下
4. column-reverse垂直从下到上

• justify-content:控制子元素在子元素在主轴的对齐方式

1. flex-start 从主轴起点到主轴终点
2. flex-end 从主轴终点到起点
3. center 居中
4. space-between 两端分布
5. space-around 环绕分布
6. space-evenly 均衡分布

• align-items 控制子元素在侧轴的对齐方式

1. flex-start 从侧轴起点到终点
2. flex-end 从侧轴终点到起点
3. center 居中
4. stretch 拉伸对齐，想要拉伸效果得子元素设置高度

• flex-wrap 控制子元素是否换行

1. nowrap 默认，不换行
2. wrap 换行

• align-content 控制子元素在侧轴的对齐方式（多行）

1. flex-start 从主轴起点到主轴终点
2. flex-end: 从主轴的终点到起点
3. center: 居中对齐
4. space-between 两端分布
5. space-around 环绕分布
6. space-evenly 均衡分布
7. stretch: 拉伸分布 要拉伸效果 子元素不要设置高度

文字溢出时显示点点点

• 单行：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
复制代码

• 多行：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;  //这里是在第二行有省略号
overflow: hidden;
复制代码

CSS3文本属性

• text-shadow:2px 2px 8px #000;：参数1为向右的偏移量，参数2为向左的偏移量，参数3为渐变的像素，参数4为渐变的颜色

• text-overflow：规定当文本溢出包含元素时发生的事情 text-overflow:ellipsis(省略)

• text-wrap：规定文本换行的规则

• word-break：规定非中日韩文本的换行规则

• word-wrap： 对长的不可分割的单词进行分割并换行到下一行

• white-space: 规定如何处理元素中的空白 white-space:nowrap 规定段落中的文本不进行换行

CSS3渐变

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

background-image: linear-gradient(direction || angle, color-stop1, color-stop2, ...);
复制代码

渐变方向（可选，默认从上到下），取值：（to bottom、to top、to right、to left、to bottom right）

• 径向渐变（Radial Gradients）- 由它们的中心定义

background-image: radial-gradient(position, shape size, start-color, stop-color);
复制代码

• position：定义圆心位置

• shape size：由2个参数组成，前者shape定义圆形或椭圆形，后者size定义大小；

  1. shape它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
  2. size 参数定义了渐变的大小。它可以是以下四个值：closest-side、farthest-side、closest-corner、farthest-corner

• start-color：设置开始的颜色；

• stop-color：设置结束的颜色；

• position、shape size可选可不选，如果没有进行设置，表示该参数采用默认值。

• start-color和stop-color为必须设置的参数，并且径向渐变同线性渐变一样可以设置多种颜色。

CSS3中box-shadow

box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow: 10px 10px 5px #888888;
复制代码

• h-shadow：必需。水平阴影的位置。允许负值。

• v-shadow：必需。垂直阴影的位置。允许负值。

• blur：可选。模糊距离。

• spread：可选。阴影的尺寸。

• color：可选。阴影的颜色。请参阅 CSS 颜色值。

• inset：可选。将外部阴影 (outset) 改为内部阴影。

CSS3 过渡

CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击，获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

transition:[<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>]
复制代码

transition-property：指定过渡的CSS属性。

1. none：没有指定任何样式。
2. all：默认值，表示指定元素所有支持transition-property属性的样式。
3. ：指定一个或多个样式。并不是所有样式都能应用transition-property进行过渡，只有具有一个中点值的样式才能具备过渡效果，如颜色，长度，渐变等。

transition-duration：指定完成过渡所需的时间。

1. 为数值，单位为s(秒)或ms(毫秒)，默认值是0。当有多个过渡属性时，可以设置多个过渡时间分别应用过渡属性，也可以设置一个过渡时间应用所有过渡属性。

transition-timing-function：指定过渡调速函数。

1. ease：默认值，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢。
2. linear：元素样式从初始状态过渡到终止状态速度是恒速。
3. ease-in：元素样式从初始状态过渡到终止状态时，速度越来越快，呈一种加速状态。这种效果称为渐显效果。
4. ease-out：元素样式从初始状态过渡到终止状态时，速度越来越慢，呈一种减速状态。这种效果称为渐隐效果。
5. ease-in-out：元素样式从初始状态到终止状态时，先加速再减速。这种效果称为渐显渐隐效果。

transition-delay：指定过渡开始出现的延迟时间。

1. 用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行过渡效果，它可以是正整数，负整数和0，非零的时候必须将单位设置为s(秒)或ms(毫秒)。