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>

results matching ""

    No results matching ""