bootstrap 响应式设计断点

• xs: <768px
• sm: ≥768px
• md: ≥992px
• lg: ≥1200px

伪类/伪元素

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如:hover

伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如::before 一般建议使用双冒号表示。

总结伪类与伪元素

CSS 选择器

浏览器解析 CSS 选择器时是从右往左解析，目的是为了尽早过滤掉一些无关的样式规则和元素。

效率：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素（类型）选择器 = 伪元素选择器

优化

1. 最右选择器是关键选择器，避免使用范围过广的选择器，如通用选择器、标签名、属性选择器等
2. 尽量减少嵌套深度，多用继承
3. 避免使用子选择器

CSS选择器性能优化

Position

1. static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2. relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。　　
3. absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
4. fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。如果上级设置了 transform 属性，fixed 将失效

web字体加载方案优化

字体在加载完成前，展示备用字体或者不展示，加载完成后使用正式字体。

web字体加载方案优化

三栏布局，两边固定，中间自适应

<div class="footer__container--symmetrical">
        {{ file.path | currentURI("https://yeesunday.gitbooks.io/pkm/content/") }}
    <div class="footer__description--symmetrical">
        <p class="paragraph footer__author--symmetrical">Rain<sup class="super">&#174;</sup></p>
        <p class="paragraph footer__quote--symmetrical">less is more</p>
        <div class="footer__main--symmetrical">
            <p class="paragraph footer__main__paragraph--symmetrical copyright"
               style="color: #666 !important;">
                <span>Copyright © yeesunday all right reserved, powered by <a href="https://github.com/aleen42" target="_blank">aleen42</a></span>
            <p class="paragraph footer__main__paragraph--symmetrical footer__modifyTime--symmetrical"
               style="color: #a10000 !important;">
                <span style="color: #666 !important;">update time:</span>
                {{ file.mtime | dateFormat("yyyy-MM-dd hh:mm:ss", 8) }}
            </p>
        </div>
    </div>
</div>
<div class="box__issues"><span class="issue-line"><p class="issue-header"><strong>1</strong> issues reported</p></span><p class="issues">#1 <a href="https://github.com/yeesunday/pkm/issues/1" target="_blank">【转】从程序员到CTO的涅槃转型－－唐巧手把手教你怎么做CTO</a><span style="margin-left: 10px; color: #ddd;">2017-03-22 19:06:47</span><span class="issue-label" style="--label-r: 238;--label-g: 7;--label-b: 1;--label-h: 1.5189873417721518;--label-s: 99.16317991631799;--label-l: 46.86274509803921">重要</span><span class="issue-label" style="--label-r: 204;--label-g: 204;--label-b: 204;--label-h: 0;--label-s: 0;--label-l: 80">方法论</span><span class="issue-label" style="--label-r: 132;--label-g: 182;--label-b: 235;--label-h: 210.87378640776697;--label-s: 72.027972027972;--label-l: 71.96078431372548">管理</span></p></div>

</div>