CSS相关

1. rem

默认字号

• rem是相对html根元素来说的；浏览器默认的font-size为16px，也就是说默认 1rem为16px。
• 鉴于此，一些网页定义 根元素 font-size为10/16 = 0.675em，那么这个时候1rem为10px。
• 16px为继承值
• 而使用rem前，一般都需要加入一些js代码，通过判断屏幕宽度去计算根[html]的font-size,代码为：

(function() {
 function autoRootFontSize() {
  document.documentElement.style.fontSize = Math.min(screen.width, document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px';}
  window.addEventListener('resize', autoRootFontSize);
  autoRootFontSize();
})();

而不需要使用js去计算font-size，直接使用CSS的为解决问题的重点：

/* 基于UI width=750px DPR=2的页面 */
html {
    font-size: calc(100vw / 7.5);
}

2. vw vh

vw:

• 1vh表示屏幕可视宽度的1%

vh:

• 1vh表示屏幕可视高度的1%

calc：

• calc()函数用于动态计算长度值,可以组合不同的单位,特别需要注意的是运算符前后都需要保留一个空格

dpr：

• window.devicePixedlRatio (物理像素),就是一个比例，IPhone4开始，dpr为2 ，这个东西的作用是设计稿用750px，一个按钮的设计为100px，那么CSS书写就是50px，详细一点的解释为：https://juejin.cn/post/6844903704567644167

3. 使用nth-child()选择指定元素

#demo p:nth-child(2):表示id为demo的元素下的第二个p标签

4. 使用writing-mode排版竖文

writing-mode:vertical-lr

5. 使用 text-align-last对齐两端文本

text-align-last:justify

6. css一行文本超出

p{
	overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

7.多行文本超出

.div{
	display: -webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden
}

8.iOS手机容器滚动条滑动不流畅

.div {
	overflow:auto;
  -webkit-box-scrolling:touch;
}

9.使用CSS写出一个三角形图表

.div {
	height:0;
  width:0;
  border:10px solid #transparent;
  border-top-color:red;
}

10.contenteditable

html中大部分标签是不可以编辑的，但是添加了contentditable属性后，标签会变成可编辑状态。

11. CSS边框

本节回顾两个属性border-radius、box-shadow 属性 描述 扩展 border-radius 给div元素添加圆角的边框 border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性 若跟四个值其顺序是： 左上角、右上角、右下角、左下角 ~~border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius ~~推荐写法: border-radius:20px box-shadow 该属性可以设置一个或多个下拉阴影的框 语法： box-shadow:h-shadow v-shadow blur spread color inset h-shadow 水平阴影位置–必填值（允许负值） v-shadow 垂直阴影位置–必填值（允许负值） blur 可选值–模糊距离 spread 可选值–阴影的大小 color 可选值-颜色 inset 可选值 --从外内的阴影（开始时）改变阴影内侧阴影 border-image

12.CSS3背景

本节回顾以下背景属性：bacground-image、 background-size、 background-origin、 background-clip 属性 描述 扩展 background-image 添加背景图片(允许在元素上添加多个背景图像) background: url(flower.png) right bottom no-repeat, url(summertrack.png) left top repeat; background-size 指定背景图像的大小–该大小是相对于父元素的高度和宽度的百分比 background-size:20px 60px; background-size:100% 100%; background-size:cover–保持图像纵横比并将图像缩放成完全覆盖背景定位的最小大小 background-size:contain–保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 background-origin 该属性指定了背景图像的位置区域 content-box padding-box border-box background-clip 该裁剪属性是指从指定位置开始绘制 content-box padding-box border-box

13.CSS3的渐变

对CSS3渐变的高效使用，可以提升网站一个Level。 我们来回顾：线性渐变（Linear Gradients）和径向渐变（Radial Gradients）

• 线性渐变（Linerar Gradients）： 从上到下（默认）：background:linear-gradient(red,blue,...) 从左到右： background:linear-gradient(to right,red,blue,...) 从左上角到右下角度： background:linear-gradient(to right bottom,red,blue,...) 角度定义：background:linear-gradient(45deg,red,blue,...)
• 径向渐变（Radial Gradients）: 颜色结点均匀分布（默认情况下）:background:radial-gradient(red,green,blue) 颜色结点不均匀分布：background:radial-gradient(red 10%,green 20%,blue 30%) 设置形状：background: radial-gradient(circle | ellipse, red, yellow, green);

14.CSS3文本效果

这里我们来回顾以下文本效果的以下几个属性：text-shadow、text-overflow、word-wrap、word-break 属性 描述 扩展 text-shadow 文本阴影 语法： text-shadow: h-shadow v-shadow blur color; h-shadow 水平阴影位置–必填值（允许负值） v-shadow 垂直阴影位置–必填值（允许负值） blur 可选值–模糊距离 spread 可选值–阴影的大小 text-overflow 文本溢出属性指定应向用户如何显示溢出内容（clip、ellipsis、string） clip --修剪文本 ellipsis–显示省略号代替被修剪的文本 string – 使用给定的字符串来代表被修剪的文本 word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。（normal、break-word） normal–只在允许的断字点换行 break-word–在长单词或URL地址内部进行换行 word-break 规定非中日韩文本的换行规则 normal–使用浏览器默认的换行规则。 break-all–允许在单词内换行。 keep-all–只能在半角空格或连字符处换行。

15.2D转换

transform:translate(x,y)、rotate(angle)、scale(x,y)、skew(x-angle,y-angle)、matrix() 移动、旋转、放大缩小、倾斜。 不展开叙述。

16.CSS3过渡 || CSS3动画

• 过渡属性 transition:简写属性，用于在一个属性中设置四个过渡属性。 transition-property:规定应用过渡的CSS属性的名称。 transition-duration：定义过渡效果花费的时间。默认为0 transition-timing-function:规定过渡效果的时间曲线 transition-delay:规定过渡效果何时开始
• 动画属性 |属性|描述| |—|—| |@keyframse|规定动画| |animation|所有动画的简写属性，除了animation-play-state属性 | |语法：|animation: name duration timing-function delay iteration-count direction fill-mode play-state;| |animation-name|规定@keyframes动画的名称 | |animation-duration|规定动画完成一个周期所花费封秒或毫秒 | |animation-timing-function|规定动画的速度曲线：默认为[ease（低速-加快-变慢）] | | 其它值|linear(匀速)、ease-in(动画以低速开始)、ease-out(动画以低速结束)、ease-in-out(动画以低速开始和结束) | |animation-fill-mode|规定当动画不播放时（当动画完成或者延迟未开始播放时），要应用到的元素的样式。| |animation-delay|规定动画何时开始 | |animation-iteration-count|规定动画被播放的次数 [infinite]无限次 | |animation-direction|规定动画是否在下一周期逆向地播放。默认是[normal] | |animation-direction – reverse|动画反向播放| |animation-direction --alternate|动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。| |animation-direction–alternate-reverse|动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放| |animation-play-state|规定动画是否正在运行或暂停。默认是[running]|

17.CSS3多列

关于CSS3的多列属性我好像还真没用到过，看到了就记录一下吧。 属性 描述 column-count 指定了需要将一段文字分隔的列数 column-gap 该属性指定了列与列之间的缝隙 column-rule-width 指定了两列的边框厚度 column-rule-style 指定了列与列之间的边框样式（solid | dotted） column-rule-color 指定了两列的边框颜色 column-rule 是上述三个属性的缩写 column-span 指定元素跨越所有列 column-width 指定了列的宽度

18.CSS3用户界面

属性 描述 resizing 指定一个元素是否应该由用户去调整大小 box-sizing 当你设置一个元素为box-sizing:border-box时，此元素的内边距和边框便不再增加它的宽度了 outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

19.CSS3图片

• 响应式图片

img{
    max-width:100%;
    height:auto;
}

• 图片文本 定义图片文本的时候结合position:relative和position:absolute。

• 响应式图片相册 在这里正确用好这几个属性：box-sizing:border、@media、clear:both

20.CSS3多媒体查询

CSS3多媒体类型 值 描述 all 用于所有多媒体类型设备 print 用于打印机 screen 用于电脑屏幕、平板、智能手机等 speech 用于屏幕阅读器