CSS 知识点

本文用于记录 CSS 样式中一些容易忘记、遗漏、混淆的知识点，不定时更新……

三种样式优先级

内联式：将CSS代码写在现有的标签中
嵌入式：将CSS代码写在<head><style>xxx</style></head>之间
外部式：将CSS代码写在单独的一个文件中，通过<link rel="stylesheet" href="base.css">引入

优先级：内联式 > 嵌入式 > 外部式，但是嵌入式大于外部式有一个前提是嵌入式CSS样式的位置一定要在外部式的后面。总体来说就是 –就近原则，离被设置的元素越近优先级越高

上述所总结的三种样式优先级必须要在相同权值的情况下

css 样式书写顺序

显示属性：display visibility float clear overflow clip zoom
布局属性: table-layout empty-cells caption-side border-spacing border-collapse list-style list-style-position list-style-type list-style-image
盒子方向: -webkit-box-orient -webkit-box-direction -webkit-box-decoration-break -webkit-box-pack -webkit-box-align -webkit-box-flex
定位属性: position top right bottom left z-index
自身属性：margin box-sizing border border-radius border-image padding width height
文字样式：font font-family font-size font-weight font-style font-varient font-size-adjust …
文本属性：line-height text-align vertical-align white-space text-decoration text-emphasis text-indent text-adjust letter-spacing word-spacing text-outline text-transform text-wrap text-overflow word-wrap
颜色属性: color background background-color background-image background-repeat background-attachment background-position background-clip background-origin background-size
边框轮廓/透明度/阴影: outline outline-width outline-style outline-color outline-offset opacity filter box-shadow text-shadow
过渡/动画属性: transition transform animation
内容属性: content quotes counter-reset counter-increment resize cursor user-select nav-index nav-up … tab-size hyphens pointer-events

目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能

font 属性联写

联写顺序：font-style|font-variant|font-weight|font-size|line-height|font-family;
联写格式：font: italic small-caps bold 12px/1.5em arial,verdana;
联写时：font-size和line-height只能通过斜杠/组成
font属性联写至少且必须要写font-size和font-family，否则不生效

textarea 标签

为标签设置 CSS 属性height和width会覆盖标签本身的html属性rows和cols

自定义浏览器滚动条

::-webkit-scrollbar: body::–webkit-scrollbar

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 6px;  
    height: 6px;  
    background-color: #F5F5F5;  
}  
  
/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #FFF;  
}  
  
/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #AAA;  
}

css 标准流

标准流中，块级元素独占一行，垂直放置。行级元素在水平方向上一个接一个的排列。

float 浮动

浮动脱离标准流，它的 margin 值会对其他元素位置造成影响，如果一行宽度不够，会自动将后面的浮动元素挤到下一行，可以使用 margin-left 的负值让该浮动元素与前面的浮动元素位于同一行。

注意一排浮动元素高度不一样的问题，可能会将某个浮动元素挤到某个奇怪的位置。

清除浮动

.clearfix {
    *zoom: 1;
}

.clearfix:after {
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    line-height: 0;
    content: "";
}

常见于 ul 标签下的 li 标签整体浮动导致ul没有高度，此时可以设置 ul 也浮动，并添加 clearfix 属性清除浮动。

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

position 定位

static：默认的属性值，该盒子按照标准流（包括浮动方式）进行布局；

relative：相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。

相对定位的元素仍然占据原来的空间
相对定位若不设置width，则由于block元素会自动伸展到宽度与父元素相同，如果加上left左偏100px，那么在浏览器中预览时，会出现横向滚动条。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>position</title>
    <style>
        /* .relative若不设置width，则由于block元素会自动伸展到宽度与父元素相同，且加上left的100px，则在浏览器中预览时，会出现横向滚动条。 */
        .relative {
            position: relative;
            top: 0px;
            left: 100px;
            /* width: 500px; */
            background: bisque;
        }
        .absolute {
            position: absolute;
            top: 50px;
            left: 50px;
            background: aquamarine;
        }
    </style>
</head>
<body>
    <div class="relative">Position 相对偏移</div>
    <div class="absolute">Position 绝对定位</div>
</body>
</html>

absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。它对其后的相邻盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。
- 使用absolute定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，则以浏览器窗口为基准进行定位。
  - “已经定位”的含义是 position 属性被设置，并且被设置为不是static的任意一种方式。
  - “最近”是指在这个节点的所有祖先节点中，距离该节点的层次最近的祖先节点，以距离最近的祖先节点作为定位基准。
fixed：固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，当拖动浏览器的滚动条时，依然保持对象位置不变。

opacity 透明度

块级元素使用了 opacity 属性会使子元素也跟着透明，即使子元素设置不透明。可改用 rgba 来做透明度。

Chrome 查看 CSS 属性

总体来说，灰色代表该元素不能继承这个属性，划横线代表能继承但没继承或写错了这个属性

灰色：该属性本来就是不可继承的（如 background ），该元素类别决定其不可继承的（如有些属性不允许外联元素继承，如 div 是外联元素，其不能继承其父的 color 属性），差不多就这些。
划横线：首先是写错了的或是不支持的（有些浏览器前面会带黄色感叹号），可继承的但是由于优先级问题没有继承被抛弃的。

选择器

:nth-of-type() 与 :nth-child()

p:nth-of-type(2)

表示选择包含p元素的某个父元素的所有p子元素中排行为2的每个p元素
即某个父元素的所有p子元素中的第二个p元素(先挑出所有子代 p 元素，然后再确定排行和类型)

<!DOCTYPE html>
<html>
<head>
<style>
    /* 首先确认p元素，然后选择所有p元素中的奇数项 */
    p:nth-of-type(odd) {
        /* 红色 */
        background:#ff0000;
    }
    p:nth-of-type(even) {
        /* 蓝色 */
        background:#0000ff;
    }
</style>
</head>
<body>
    <h1>这是标题</h1>
    <!-- 红色 -->
    <p>第一个段落。</p>
    <!-- 蓝色 -->
    <p>第二个段落。</p>
    <!-- 红色 -->
    <p>第三个段落。</p>
    <!-- 蓝色 -->
    <p>第四个段落。</p>
    <!-- 红色 -->
    <p>第五个段落。</p>
</body>
</html>

p:nth-child(2)
- 表示选择包含p元素的某个父元素的所有子元素中的排行为2的每个p元素
- 即某个父元素的第二个子元素为p的元素(先挑出所有子代元素，然后再确定排行与类型)

总结

:nth-of-type() 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型

display: inline-block; 列表布局

将元素CSS样式设置为display: inline-block;，表示元素可以使用text-align: center;居中，可以使用vertical-align: middle居中。
另外，元素外面的div盒子可以使用text-align: justify;实现自动等宽水平排列的列表布局，而且是两端对齐的，不需要计算宽度，一切都是浏览器自动对齐的；

也可以使用white-space: nowrap;让列表不换行，可用于列表元素的水平滚动切换。例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 80%;
            padding: 20px;
            margin: 20px auto;
            background-color: #f0f3f9;
            text-align: justify;
            /* white-space: nowrap; */
        }

        .list {
            width: 120px;
            display: inline-block;
            padding-bottom: 20px;
            text-align: center;
            vertical-align: top;
            /* white-space: nowrap; */
        }
    </style>
</head>

<body>
    <div class="box">
        <span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /></span>
        <span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
    哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~</span>
        <span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
    哇哦，美女，口水，鼻血~~~</span>
        <span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
    哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~</span>
        <span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
    哇哦，美女，口水，鼻血~~~</span>
        <span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
    哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~</span>
        <span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
    哇哦，美女，口水，鼻血~~~</span>
        <span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
    哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~</span>
        <span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
    哇哦，美女，口水，鼻血~~~</span>
        <span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
    哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~</span>
        <span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
    哇哦，美女，口水，鼻血~~~</span>
        <span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
    哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~</span>
        <span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
    哇哦，美女，口水，鼻血~~~</span>
        <span class="list"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
    哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~</span>
    </div>
</body>

</html>

添加移除样式

js 元素方法

添加行内样式：document.getElementById('pageBody').style.color = '#ccc'
移除行内样式：设置为空即可
添加类样式：document.getElementById('pageBody').className='red'
- 如果只设置一个类样式会覆盖原有样式
移除类样式：设置为空即可

还可以通过修改外联样式的 href 值实现网页样式实时切换

jQuery 中的方法

直接添加移除行内样式
- 键值对方式：$('#id').css({color: 'red', backgroundColor: 'black'})
- 链式连接方式：$('#id').css(color, 'red').css('background-color', 'red')
添加类样式
- 使用空格追加多个样式：$('#id').addClass('one two')
移除类样式
- 如果不带参数表示全部移除：$('#id').remove('one two')

CSS3 中的方法

添加类样式（追加，只能加一个）
- DOM元素.classList.add('one')
移除类样式
- DOM元素.classList.remove('one')

动态 rem 适配移动端

documentElement.clientWidth 表示pc网页可见区域宽度，相当于移动设备浏览器的 layout viewport ，此时，为了防止某些网站因为可视区域太窄而显示错乱，会默认一个较宽的值，比如980px

visual viewport 表示浏览器可视区域大小，通过 window.screen.width 获取屏幕宽度

ideal viewport 适配移动设备。通过设置 meta 属性控制 layout viewport 宽度等于移动设备宽度，那么 layout viewport 将成为 ideal viewport

1	<meta name="viewport" content="width=device-width, initial-scale=1">

!function() {
    var width = document.documentElement.clientWidth;
    var head = document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.innerHTML = 'html{font-size:'+width/10+'px;}';
    head.appendChild(style);
}

其中 width/10 是为了保证 10rem 占宽满屏。我们只需要动态加上上面的js代码，就不需要做各种媒体查询来适配各种设备宽度了。

移动端 safari :active 伪类无效解决方案

active 伪类常用于 a 标签，表示与鼠标交互时不同的链接颜色。如 a:link、a:visited、a:hover、a:active。

排序: L(link)OV(visited)E H(hover)A(active)TE

ios :active 不起作用答案:

首先查看是否设置 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body>.

所有在 ios 移动设备中，需要在按钮元素或 body/html 上绑定一个 touchstart 事件才能激活 :active 状态。

1	document.body.addEventListener('touchstart', function () {}) //...空函数即可