css学习笔记，持续记录。

友人a丶
CSS笔记
2021-10-05
1357热度
0评论

Css选择器

1. 通配符选择器： *{...}; 选择所有元素；
2. HTML标签选择器：p{...} 、#p{...}、.p{...}; 选择指定的所有标签，指定id，指定类的所有标签；
3. 类选择器选择有特定 class 属性的 HTML 元素，如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。选择所有具有 class="center" 的 <p> 元素：p.center；

由以上选择器进行扩充之后

1. 群组选择器： E , F{sRules}，选择所有E和F元素。
2. 后代选择器： E F{sRules}，选择所有被E元素包含的F元素，后代选择器就是空格符。
3. 子选择器： E > F{sRules}，E>F选择器为特定元素E的下一级的子元素F，不包括下下级及其更下级，“>” 左右空格无影响。
4. 相邻同级选择器：E+F{sRules}，选择紧贴在E元素之后F元素，元素E与F必须同属一个父级，“+” 左右空格无影响。
5. 兄弟选择器：E~F{sRules}，选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级，“~” 左右空格无影响。
6. 属性选择器：

拥有指定属性，img[alt]{margin:10px;}
拥有指定属性，并且为指定值，input[type="text"]{border:2px solid #000;}
~=（空格分割值包含指定值）、^=（指定值开头）、$=（指定值结尾）、*=（包含指定字符串）、|=（空格分割值指定值开头）

7. css动态伪类选择器，:visited、:hover、:link、:active

8. css结构性伪类选择器，

:lang() 选择带有lang属性元素
:not() CSS3排除某类元素
:root CSS3选择根元素
:first-child 第一个元素
:last-child CSS3最后一个子元素
:only-child CSS3仅有的一个子元素
:last-of-type 最后一个指定选择器的子元素
:nth-child() CSS3第n个子元素
:nth-last-child() CSS3倒数第n个子元素
:first-of-type CSS3第一个同级兄弟元素
:last-of-type CSS3最后一个同级兄弟元素
:only-of-type CSS3唯一的一个同级兄弟元素
:nth-of-type() CSS3第n个同级兄弟元素
:nth-last-of-type() CSS3倒数第n个同级兄弟元素
:empty CSS3没有任何子元素
:target CSS3URL指向的元素

提示

:nth-of-type(odd) 、:nth-of-type(even)用于选择奇数、偶数位置的选择器

9. UI元素状态伪类选择器

:focus 输入焦点
:checked CSS3选中状态的元素
:enabled CSS3可用状态的元素
:disabled CSS3禁用状态的元素
:read-only CSS3只读状态的元素
:read-write CSS3能编辑的元素
:optional CSS3选择非必填元素
:required CSS3选择必填元素
:in-range CSS3选择有限定范围的元素
:indeterminate CSS3选择处于不确定状态的表单元素
:default CSS3默认状态的表单元素
:focus-within css3元素或者后代元素获得焦点
:out-of-range css3当值处于范围之外

10.css伪对象选择器

::first-letter CSS3第一个字符的样式
::first-line CSS3第一行的样式
::before CSS3对象前发生的内容
::after CSS3对象后发生的内容
::placeholder CSS3设置文字占位符
::selection CSS3设置选择框样式
::cue CSS3字幕提示

盒子、布局

display: none / block /flex /grid /inline / block-inline /flex-inine / grid-inline ;

变形、过渡、动画、CSS规则、CSS变量

transform、transition、animate、@media、@keyframe、@import、@font-face、@page、woff字体、css切片

1.动画

animation	所有动画属性的简写属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay	规定动画何时开始。默认是 0。	
animation-iteration-count	规定动画被播放的次数。默认是 1。	
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。

2.过渡

transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。	
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

Flex弹性盒子

Flex-direction: row /column /row-reverse /column-reverse ;
Flex-wrap: wrap /no-wrap ;
justify-content: ....，设置盒内元素的左右排列。
align-items: ...，设置同行元素的上下排列方式。
align-content:...，多行状态下，多行在盒内的对齐方式。

盒内元素的Flex样式：

order，盒内排列顺序。
align-self，单独定义align-items。
flex-shrink，默认为1，所有子元素的长宽超出父元素时的缩放占比（超出的长宽除以所有子元素的shrink加起来的数量，就是单份缩放的大小，为0时代表不进行缩放）
flex-grow，默认为0，所有子元素的长宽超出父元素时的缩放占比（超出的长宽除以所有子元素的shrink加起来的数量，就是单份缩放的大小，为0时代表不进行缩放）
flex-basis，定义容器的初始大小，默认为容器自身定义的大小，未定义则跟随内容。

CSS分栏（与浮动是一个级别）

column-count: 5 ; //设置栏数，不设定是浏览器按照宽度自行划分
column-gap: 20px; //设置栏之间的间隔
column-width:30px; //栏的最佳宽度
column-rule:none; //栏的边框样式（style、width、color，边框的样式）
column-fill:auto /balance /balance-all; //作用是当内容分栏的时候，如何平衡每一栏填充的内容。

Grid网格布局

网格属性的大小和宽度都是相对于网格容器元素本身。

grid-template-columns: 20% 20%; //定义网格的列数和网格宽度。
grid-template-rows: 20% 20%; //定义网格的行数和网格宽度。
grid-template-areas: "a c"
" b d"; //给每个网格定义一个名字。
align-items: center; //单个网格内元素在网格内的上下对齐方式
justify-items: center; //单个网格内元素在网格内的左右对齐方式
align-content: center; //当网格的长小于整个容器时，整个网格在它的父容器内的上下对齐方式（口内一个田）
justify-content: center; //当网格的宽小于整个容器时，整个网格在它的父容器内的左右对齐方式
grid-column/ row-gap (grid-gap); //定义网格之间的间距。

使用网格的元素可用的网格属性：grid-area:a; （所处的网格）、align-self、justify-self（代替网格的相关属性）。

CSS函数

a:after { content: " (" attr(href) ")"; } ;在每个链接后面插入内容。
width: calc(100% - 100px); 用于动态计算长度值，需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)，任何长度值都可以使用calc()函数进行计算，支持 "+", "-", "*", "/" 运算。
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); 函数定义了一个贝塞尔曲线(Cubic Bezier)，贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。
rgb()、rgba()、linear-gradient()、radial-gradient()、repeating-linear-gradient()、repeating-radial-gradient()，普通颜色、渐变色、渐变图像。
var()，定义一个名为 "--main-bg-color" 的属性，然后使用 var() 函数调用该属性。
```
:root {
  --main-bg-color: coral;
}
#div1 {
  background-color: var(--main-bg-color);
}
```

CSS遇到过的问题

1. clip:rect (top, right, bottom, left);

clip:rect (top, right, bottom, left); 属性，用于裁剪绝对定位的元素；

2. clip-path

clip-path属性使您可以将元素裁剪为基本形状或 SVG 源，clip-path 将替代废弃的 clip 属性，支持的形状更多。

3. box-shadow

box-shadow: [inset（阴影在元素内部）] offset-x offset-y blur-radius spread-radius [color]，可以设定多组效果，每组参数值以逗号分隔。

inset：可选参数。把其投影设置为内阴影。阴影落在盒子内部，这样看起来就像是内容被压低了。此时阴影会在边框之内(即使是透明边框）、背景之上、内容之下。若不设置，即为默认投影方式是外阴影。默认阴影在边框外，即阴影向外扩散。
<offset-x>：设置水平偏移量，正值阴影则位于元素右边，负值阴影则位于元素左边。取值参见<length>。
<offset-y>：设置垂直偏移量，正值阴影则位于元素下方，负值阴影则位于元素上方。取值参见<length>。
<blur-radius>：设置阴影模糊值。值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为0，此时阴影边缘锐利。对于长而直的阴影边缘，它会创建一个过渡颜色用于模糊以阴影边缘为中心、模糊半径为半径的局域，过渡颜色的范围在完整的阴影颜色到它最外面的终点的透明之间。取值参见<length>。
<spread-radius>：可选参数。设置阴影外延值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。需要考虑inset。取值参见<length>。
<color>：可选参数。设置阴影的颜色。如果没有指定，则由浏览器决定——通常是<color>的值，不过目前Safari取透明。取值参考<color>。

4. inline-block

使用 inline-block 布局之后元素之间去除边距等因素后，无法完全紧靠的原因：为了方便理解，可以将 inline-block 容器内的元素看成是两个文字，文字与文字之间不可能是连在一起的，肯定是有间隙的。

解决办法：

将父元素 container 的字体大小设置为 0，然后单独设置元素的字体大小。
在两个容器内元素的html代码之间加注释符号 <!----- >;

5. 容器宽高相等

当容器的内边距设置100%且高度为0时，元素高度取的是容器的宽度单位。height:0;padding-bottom:100%;

6. caret-color

属性用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。

7. 不常见的属性

transform CSS3 3D 转换、resize元素大小调整、outline 元素外轮廓。

resize: none|both|horizontal|vertical;

语法说明如下：

none：用户无法调整元素的尺寸；
both：用户可调整元素的高度和宽度；
horizontal：用户可调整元素的宽度；
vertical：用户可调整元素的高度。

在使用 resize 属性时还需要注意以下几点：

单独设置 resize 属性是无效的，resize 属性需要与 overflow 属性结合使用才有效，并且 overflow 属性的值需要设置为 auto、hidden 或 scroll；
并不是所有的元素都可以设置 resize 属性，比如 img 和 table 属性就没办法使用 resize 属性。

8. 粘性定位sticky

粘性定位sticky是fixed和relative的结合，例如top:0，不为0是为relative，当距离父元素的顶部为0是转换为fixed，存在兼容性问题；

<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
        <p>滚动我</p>
</div>
</body>
</html>

9. position

position的属性中，absolute生成绝对定位的元素，是相对于 static 定位以外的第一个父元素进行定位；relative则是生成相对定位的元素，相对于其正常位置进行定位。

10. @media screen

@media screen 和@media print and (max-width:720px)，定义不同媒体类型、大小下的不同样式；

11. CSS 计数器

CSS 计数器根据规则来递增变量，CSS 计数器使用到以下几个属性：

counter-reset - 创建或者重置计数器
counter-increment - 递增变量
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素

12. viewport

viewport是用户网页的可视区域。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

initial-scale属性用于设置页面初始的缩放比例，缩放比例为理想视口与视觉视口的比值。

理想视口：文档宽度和屏幕宽度一致。理想视口宽度 = 移动设备横向分辨率 / DPR

视觉视口 visual viewport：如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。视觉视口的宽度 = 理想视口宽度 / 缩放比例

参考链接：https://blog.csdn.net/leman314/article/details/111936863

13. px

px的大小在不同屏幕上是一样的，是一个绝对的单位。

14. user-select、pointer-events

user-select属性规定是否能选取元素的文本。cursor属性定义元素的鼠标样式。

pointer-events，定义元素如何响应鼠标的动作；

15. 动画样式记录

@keyframes audio_playing {
        0% {
            background-position: 0 -20px;
        }
        30% {
            background-position: 0 -20px;
        }
        30.1% {
            background-position: 0 -41px;
        }
        61% {
            background-position: 0 -41px;
        }
        61.1% {
            background-position: 0 -62px;
        }
        100% {
            background-position: 0 -62px;
        }
    }

16. 无法折行

div 内容为纯数字很长时无法折行解决，css设置word-wrap:break-word;word-spacing:normal; word-break: break-all;后可以解决，同时必须设置width属性。

17. flex容器不能被撑开

flex容器不能被内部元素撑开，出现水平滑块。解决办法是内部使用不是flex的容器，然后撑开它。ul不换行，撑开出现水平滑块 white-space：nowrap；

18. td撑开table

table的td不能通过css指定宽度用于撑开table，需要在td内放置块级盒子撑开td，最终撑开table；

19. border-radius

border-radius属性可以单独指定某个角设置，border-left-top-radius；filter，为图形增加滤镜样式（filter:blur(15px)）;

20. @font-face

@font-face 中，- local()表示在本机（客户端）查找该字体，如果本机已经安装了，就不用下载了。url()表示字体在服务器上的位置，format()用来说明字体格式。

21. 转义符

 它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈，&ensp;此空格其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。&emsp;此空格其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

21. object-fit

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;

22. 滚动条的样式

滚动条的样式，只支持Chrome浏览器。

::-webkit-scrollbar {
  -webkit-appearance: none;
  background: transparent;
  width: 8px!important;
  height: 6px!important;
}
:hover::-webkit-scrollbar-thumb {
    display: block;
    border-radius: 4px;
    box-shadow: 0 0 0 2px transparent;
}
::-webkit-scrollbar-thumb {
    background: #e1e1e1;
    border-radius: 4px;
    display: none;
    border-style: solid;
    border-color: transparent;
    border-width: 2px;
    background-clip: padding-box;
}

23. css颜色透明度

css颜色使用透明度的优缺点。

当网页存在多层颜色的时候，透明度会导致颜色重叠出现色差，不同的是，字体颜色带有透明度时，能够根据背景自适应不同的背景颜色产生不同的效果。

24. css自动省略号

文字超出宽度时自动加省略号： text-overflow: ellipsis，宽度可设置max/min/fit-content，https://developer.mozilla.org/zh-CN/docs/Web/CSS/width

max-content，内容有多宽，盒子就有多宽，不会顾及父级盒子有多宽，只满足自己的需求。
min-content，装下单个最大内容的最小宽度，下面这个图片能够直观的说明这是什么意思（14px和20px在一起，取20px的宽度）
min(max-content, max(min-content, <length-percentage>))

width: 100%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
text-overflow: ellipsis;

宽度100%的时候，需要white-space+overflow+etxt-overflow组合才能生效。

display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

定义超出几行后出现省略号。

25. flex布局

flex布局，flex-direction为column时，弹性布局会因为子元素超出父元素高度，导致flex盒子被撑起来。设置hidden; 可以避免父元素被撑开，保证子元素的100%跟父元素一致。

26. :focus-visible

:focus-visible，当元素匹配:focus伪类并且客户端(UA)的启发式引擎决定焦点应当可见(在这种情况下很多浏览器默认显示“焦点框”。)时，:focus-visible 伪类将生效。

27. 增加和去除边框

增加和去除边框导致元素的大小发生变化，同时影响到其他元素产生位移的偏差感：可以调整为边框一直存在，当不需要展示时显示透明，需要的时候再展示颜色。

28. overscroll-behavior

overscroll-behavior，overscroll-behavior CSS 属性是 overscroll-behavior-x 和 overscroll-behavior-y 属性的合并写法, 让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。https://developer.mozilla.org/zh-CN/docs/Web/CSS/overscroll-behavior

29. float状态（浮动新解）

float状态下的元素新解：一个左浮动元素左侧元素使用margin-left负数偏移时，也会跟着浮动偏移，而不会和正常元素一样，保持原来的位置；通过这个特点可以让很多效果实现起来更加简单；

30. 水平分割线

带文字的水平分割线，可以通过after、before伪类，和flex布局进行简易实现；opacity+height，实现抽屉式的淡出淡入；pointer-events，可实现禁止用户点击；

31.常用的各种设备的媒体查询：

/* 
  ##PC
  ##1281px或更高分辨率
*/

@media (min-width: 1281px) {
  //CSS
}

/* 
  ##笔记本或PC
  ##1025px - 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  //CSS
}

/* 
  ##平板电脑/Ipad竖屏
  ##768px - 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  //CSS
}

/* 
  ##平板电脑或Ipad横屏
  ##768px - 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  //CSS
}

/* 
  ##低分辨率的平板电脑或横屏的手机
  ##481px - 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  //CSS
}

/* 
  ##多数竖屏的智能手机
  ##320px - 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  //CSS
}

32. 苹果手机底部安全区

苹果手机底部安全区：env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：

safe-area-inset-left：安全区域距离左边边界的距离
safe-area-inset-right：安全区域距离右边边界的距离
safe-area-inset-top：安全区域距离顶部边界的距离
safe-area-inset-bottom ：安全距离底部边界的距离

而env()和constant()函数有个必要的使用前提，当网页设置viewport-fit=cover的时候才生效，根据微信小程序的表现和我在实际真机测试时这两个函数生效，推测小程序里的viewport-fit默认是cover。在IOS11.2系统以前，可以使用constant()函数，但是在IOS11.2系统以后，这个函数就被废弃了，被env()函数替代了。

33. 水平分割线

水平分割线，中间带文字的css样式，如下：

.horizontal{
  display: flex;
  align-items: center;
  white-space:nowrap;
  width:100%;

  &:before{
    width: 20%;
    content: " ";
    border-top: 1px solid #000000;
  }
  &:after{
    width: 80%;
    content: " ";
    border-top: 1px solid #000000;
    position: relative;
    top:50%;
  }
}

34. 最小宽高，防止图片加载导致抖动

场景：加载前图片所在容器为10px，图片为50px，图片加载后撑开盒子，导致二次布局变化（抖动）

给图片的上层容器加个最小宽高，防止页面加载图片前后导致长宽变化，页面发生抖动。

35. fixed

fixed：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。

35. inline盒子

inline盒子的dom使用transform属性是无效的。

36. z-index失效

z-index在以下情况下会失效：

祖先元素position为relative、absolute、fixed时，子元素的z-index失效。
该元素没有设置position属性为非static属性。
该标签在设置z-index的同时还设置了float浮动

37. Css推荐书写顺序：

定位属性：position、display、float、left、top、right、bottom、overflow、clear、z-index
自身属性：width、height、padding、border、margin、background
文字样式：font-family、font-size、font-style、font-weight、font-varient、color
文本属性：text-align、vertical-align、text-wrap、text-transform、text-indent、text-decoration、letter-spacing、word-spacing、white-space、text-overflow
CSS3 中新增属性：content、box-shadow、border-radius、transform

38. active

active，可以实现鼠标按下出现，鼠标抬起后消失的样式。

39. :last-child的匹配规则

查找 el 选择器匹配元素的所有同级元素（siblings）
在同级元素中查找最后一个元素
检验最后一个元素是否与选择器 el 匹配

匹配指定类型的最后一个元素，last-of-type

40. 过渡和动画事件

transition和animate都有开始结束的js事件。

41.什么是BFC？

BFC全称是Block Formatting Context，意思就是块级格式化上下文。可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。

块（Block）、包含块（Containing Block）、盒子（Box）、块级盒子（Block-level Box）、块盒子（Block Box）、块容器盒子（Block Containning Box）和块级元素（Block-level Element）之间的关系：

元素display的值为block、list-item、table、flex和grid时，该元素会生成一个块级元素（Block-level Element）
块级元素（Block-level Element）会生成一个块级盒子（Block-level Box）
块级盒子会参与块格式化上下文（BFC）的创建
块级盒子（Block-level Element）描述了元素与其父元素和兄弟元素之间的行为
块容器盒子（Block Containning Box）描述了元素跟其后代之间的行为。要么只包含块级盒子（Block-level Box），要么只包含行内级盒子（Inline-level Box）。有的块容器盒子不是块级盒子，同样块级盒子有时也不是块容器盒子
同时是块级盒子（Block-level Box）和块容器盒子（Block Containning Box）的盒子被称作是块盒子（Block Box）
除此之外，还有匿名块盒子（Anonymous Block Box）

相关文档：https://www.zhihu.com/question/568222940/answer/2770765021

41.1 BFC有什么特性？

BFC是一个块级元素，块级元素在垂直方向上依次排列。
BFC是一个独立的容器，内部元素不会影响容器外部的元素。
属于同一个BFC的两个盒子，外边距margin会发生重叠，并且取最大外边距。
计算BFC高度时，浮动元素也要参与计算。

41.2 如何创建BFC?

给父级元素添加以下任意样式

overflow: hidden;
display: flex;
display: inline-flex;
display: inline-block;
position: absolute;
position: fixed;

41.3 BFC有什么作用？

解决当父级元素没有高度时，子级元素浮动会使父级元素高度塌陷的问题
解决子级元素外边距会使父级元素塌陷的问题

42. ul list-style失效

默认情况下ul下的li都会自带一个列表样式，如果个ul设置了margin和padding为0后，无论是默认的还是自己设置的list-style都不会生效。

43.pointer-events

pointer-events 属性是一个指针属性，是用于控制在什么条件下特定的图形元素可以成为指针事件的目标。

none：该元素永远不会成为鼠标事件的 target。但是，当其后代元素的 pointer-events 属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器 (鼠标的动作将不能被该元素及其子元素所捕获，但是能够被其父元素所捕获)。
auto：默认值，表示指针事件已启用；此时元素会响应指针事件，阻止这些事件在其下面的元素上触发。对于 SVG 内容，该值与 visiblePainted 效果相同。
inherit：将使用 pointer-events 元素的父级的值。

44.页面黑白化

filter: grayscale(.95);

45.css tranlate、translate3d

在通过transform进行平移（translate），使用百分号单位时，是相对于自身元素的大小，比如50%代表元素自身大小的50%。对行内元素无效。

/* 父元素内上下左右居中*/
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

translate不会对其它元素产生任何影响

46.fixed定位后，背景变透明

背景色和opacity都不是透明的，但是从表面来看元素变透明了，实际上并不是被fixed的元素变透明了，只是因为这个元素没有z-index属性，跟底层元素进行了重叠，给个z-index就好。

47.表格单元格宽度

table-layout:fixed;
//同时取消表格的宽度设置

48.指定内容超过多少行，进行省略

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

49.GPU加速动画

CSS 中的以下几个属性能触发硬件加速：

transform
opacity
filter
will-change

如果有一些元素不需要用到上述属性，但是需要触发硬件加速效果，可以使用一些小技巧来诱导浏览器开启硬件加速

.haorooms_element {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0); 
    /**或者**/
    transform: rotateZ(360deg);
    transform: translate3d(0, 0, 0);
}

50.避免图片选中时默认的蓝色覆盖

user-select:none;

51.移除默认的蓝色遮罩

移动端页面开发的时候，当页面有 click 事件，a 链接之类的可点击元素时，每次点击页面都有一个浅蓝色的遮罩，这里可以用 CSS3 的 -webkit-tap-highlight-color 属性

*{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}