bootstrap 响应式设计断点
- xs: <768px
- sm: ≥768px
- md: ≥992px
- lg: ≥1200px
伪类/伪元素
伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如:hover
伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如::before 一般建议使用双冒号表示。
CSS 选择器
浏览器解析 CSS 选择器时是从右往左解析,目的是为了尽早过滤掉一些无关的样式规则和元素。
效率:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素(类型)选择器 = 伪元素选择器
优化
- 最右选择器是关键选择器,避免使用范围过广的选择器,如通用选择器、标签名、属性选择器等
- 尽量减少嵌套深度,多用继承
- 避免使用子选择器
Position
- static(静态定位):默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
- relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。可通过z-index进行层次分级。
- absolute(绝对定位):生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
- fixed(固定定位):生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。如果上级设置了
transform
属性,fixed 将失效
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">®</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>