fi3ework's Studio.

CSS TIPS

2017/06/07 Share

html

  • 当网页中的内容较少时,html元素可能无法覆盖整个浏览器的高度,通过设置

    1
    2
    3
    html{
    height: 100%;
    }

    即可将整个页面撑开到浏览器的高度。

CSS高速缓存

  • CSS被缓存之后,可以通过如下方法,使之前的缓存失效

    1
    <link rel="sytlesheet" type="text/css" href="main.css?v=1">

    只要每次更新样式表的时候v=后面的数字不同,就可以下载新的样式表了。

@import的缺点

  • 在IE678中,import会被link阻塞,无法并行加载。

    1
    2
    3
    4
    <link rel='stylesheet' type='text/css' href='a.css'>
    <style>
    @import url('b.css');
    </style>

    @import blocked by link

    如图。第一段是HTML的加载,第二段是a.css,第二段是b.css

  • 如果是以下方式调用

    1
    2
    3
    <link rel='stylesheet' type='text/css' href='a.css'>
    in a.css:
    @import url('b.css');

    link with @import

    浏览器要等到a.css下载完并并解析后才能去下载b.css,这在所有浏览器中偶是如此。

  • 1
    2
    3
    4
    5
    in the HTML document:
    <link rel='stylesheet' type='text/css' href='a.css'>
    <link rel='stylesheet' type='text/css' href='proxy.css'>
    in proxy.css:
    @import url('b.css');

    如果是这种调用方式,在IE中会是如下

    link blocks @import

    第一段是HTML,第二段是a.css,第三(小)段是proxy.css,可以看到link是可以并行下载的,最后一段时b.css,但是在IE中@import会被link阻塞,只能等到link的下载完毕才能开始下载。

    在其他浏览器中顺序如下:

    link blocks @import

    第一段是HTML,第二段是a.css,第三段是proxy.css,显然link是可以并行下载的。第四段是b.css,需要等到proxy.css加载解析完毕后才能开始下载,但是在其他浏览器中并不会被link阻塞。

  • 在IE678中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
    @import url('a.css');
    @import url('b.css');
    @import url('c.css');
    @import url('d.css');
    @import url('e.css');
    @import url('f.css');
    </style>
    <script src='one.js' type='text/javascript'></script>

    many @imports

    (最长的那一段是js的代码)

    可以看到尽管js的代码顺序排在最后,但是在加载的确实第一个,他们无法按照给定的顺序依次下载。所以如果加载的js代码对css有依赖的话就血崩了。

  • 1
    2
    <link rel='stylesheet' type='text/css' href='a.css'>
    <link rel='stylesheet' type='text/css' href='b.css'>

    link link

    使用link链接能保证并行下载并且能够按照指定的顺序下载。

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    <link rel='stylesheet' type='text/css' href='proxy.css'>
    <script src='one.js' type='text/javascript'></script>
    in proxy.css
    @import url('a.css');
    @import url('b.css');
    @import url('c.css');
    @import url('d.css');
    @import url('e.css');
    @import url('f.css');

    link with many @imports

    第一段为HTML,第二段为proxy.css,最长的一段为js。一开始加载HTML,然后依次加载proxy.css和js,当a.css加载完毕后开始并行加载@import的css,与此同时js一直在加载,可以发现两个问题,一是js的下载可能会优先于css结束(IE678的问题),二是js一直占用着HTTP的连接数,导致css加载变慢(所有浏览器的问题)

  • 参考文献:don’t use @import

em & px & %

  • em指的是在不额外设置line-height时基线间的距离。
  • 建议以em为单位设置容器的宽度,这样可以保障在字号增加时整个布局随之扩大。以%设置内部的宽度,这样父元素是em确定的大小,%还是相对于字号的。这样就可以方便的修改布局的总尺寸。

background:

  • CSS3可以设置多个background-image,并且可以分别设置positionrepeat,使用逗号分隔。
  • 通过将背景的不同的background-imagebackground-position设置为不同的百分比可以实现视差滑动。越前景的部分值越大(移动时需要动的越多)。
  • background填充padding区域,会一直蔓延到border的下面,也就是说border盖住了background,如果borderdashed则可以看见下面的background
  • 为了尽可能提高网页的可访问性,应在定义:hover伪类时同时:focus伪类,这样通过键盘移动到链接上时,能够获得与鼠标悬停同样的样式。
  • 在CSS3中,可为#链接点击目标添加伪类:target来做到跳转时的提示。

img

  • url的相对路径指的是相对于样式表的相对路径,而不是html页面的相对路径。

before & after

  • 1
    2
    3
    p:before{
    content: url(images/test.jpg);
    }

    就可以在p之前插入图片。还可以将文字与图片结合起来

    1
    2
    3
    p:before{
    content: "Paragraph" url(images/test.jpg);
    }

font

  • 在使用简写属性font时,所有被忽略的值都会重置为其默认值。因此

    1
    2
    3
    4
    5
    6
    7
    h1 {
    font: italic bold 250% sans-serif;
    }
    h1{
    font: 20px sans-serif;
    }

    最后只有20pxsans-serif被保存下来了,其他的都在第二次设置样式时被重置了,相当于

    1
    2
    3
    h1{
    font: normal normal normal 20px sans-serif;
    }

font-face

  • 1
    2
    3
    4
    5
    @font-face{
    font-family: Lavoisier;
    src: local(Lavoisier),
    url(font/Lavoisier.ttf);
    }

    使用local可以避免在本地具有local字体的情况下继续下载指定字体(直接使用local字体)。

line-height

  • 浏览器的默认行高一般是120%,在确定文本行之间的间距量时,浏览器一般从行高中间去字体大小。这个结果称作leading,就是段落中行与行之间的间距量。

  • 一般使用empercent来控制行高,这样能够随着font-size的大小自适应变化。

  • line-height的属性继承需要注意。假设父元素的font-size20px,子元素font-size40px,父元素line-height设为120%1.2em则子元素继承的是父元素计算出来的行高的px值,而不是百分比,所以子元素的行高会等于20 * 1.2 = 24px而与子元素的font-size完全没有关系。

    如图所示。

    line-height inherit

    所以如果希望实现按比例继承,直接使用line-height: 1.5;,这样子元素的行高将等于这个继承的比例乘以自己font-size

  • 设置单行文本(内联或块级元素时)的高度时,可以直接使用line-height来设置高度,好处是能够保持文本垂直居中。

clear:

  • clear实际上在元素顶上添加足够的外边距,使元素的顶边缘垂直下降到浮动框下边。

overflow: hidden

  • ovh会使延伸到浮动下方的背景和边框消失,消失是从进入浮动元素的margin范围就开始生效。如图,红块具有margin,h1延伸到浮动元素margin的时候就开始截断了。ovh hidden bgc

text-transform

  • 1
    capitalize | uppercase | lowercase | (full-width)

    可以将文本首字母大写,转大写,转小写。

z-index

  • 绝对定位的元素处于网页的上层(z-index),绝对定位元素中的绝对定位元素无论z-index值为多少也在其包围元素之上。

行内元素

  • 行内元素的水平间距可以通过水平内边距、水平外边距、水平边框来改变。垂直边框,垂直内边距,垂直外边距不会影响行内元素的高度,只有行高可以影响。

  • 行框的高度总是足以容纳它所包含的所有行内框。

  • 行内元素每一行都是叠加在上一行之上的,所以如果对下面的行内元素设置padding会覆盖上面的行内元素,这个覆盖是依照HTML中的顺序决定,而不是浏览器中渲染的位置决定的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="box">
    <h1>Andy Budd</h1>
    <p>
    Andy is the Managing Director of Clearleft. He also goes by the title of User Experience Director depending what mood
    he’s in. Andy is the author of <em>CSS Mastery</em>, curates the dConstruct and UX London events and is responsible for Silverbackapp,
    our low cost usability testing application for the Mac.</p>
    <div class="bottom"></div>
    <span id="sp1">lower</span>
    </div>

    如图,lower在HTML在黄字之后,但是通过css的设置排在了黄字上面,不过lower还是覆盖了黄字。

    inline-cover

外边距

  • 只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。(一个设置了position: relative的普通文档流元素也会和其他普通文档流元素发生外边距叠加)

  • 外边距发生叠加的几种情况:

    • 普通外边距叠加

      margin collapse 1

    • 空元素(没有边框和内边距将两个外边距分隔开)

      margin collapse 1

    • 空元素(自身的margin-topmargin-bottom折叠了)

      margin collapse 1

    • 叠加之后的外边距只要满足条件就可以继续叠加

      margin collapse 1

伪类

  • 通过把伪类连接在一起,可以实现更复杂的行为,比如

    1
    2
    a:visited:hover { color : red; };
    a:hover:visited { color : red; };

    顺序顺序并没有影响。

  • hover active focus理论上可以应用于所有的元素。

  • 在下拉式菜单栏中,可以先

    1
    2
    3
    4
    #nav li ul {
    position: absolute;
    left : -999em;
    }

    再在父列表项中添加鼠标悬停伪选择器,把下拉菜单的位置改回原来的正常位置。

    1
    2
    3
    #nav li:hover ul {
    left : auto;
    }
  • 即使鼠标悬停于某父元素的子元素上时,即使这个父元素并不在鼠标所在位置,或者这个父元素大小为0,也会触发父元素的:hover伪类。

注释

  • @todo来表示某些东西需要在以后进行修改、修复或复查
  • @bugfix表示代码或特定浏览器遇到的问题
  • @workaround表示并不完善的权宜之计

!important

  • 当两个都有!important的样式应用于相同的属性时,更具体的 !importat规则将会胜出。

整体

  • 一般性样式
    • 主体样式(应用于body标记的,应该由站点上所有元素继承的样式)
    • reset样式
    • 链接
    • 标题
    • 其他元素
  • 辅助样式
    • 表单
    • 通知和错误
    • 一致的条目
  • 页面结构
    • 标题、页脚和导航
    • 布局
    • 其他页面结构元素
  • 页面组件
    • 各个页面
  • 覆盖
CATALOG
  1. 1. html
  2. 2. CSS高速缓存
  3. 3. @import的缺点
  4. 4. em & px & %
  5. 5. background:
  6. 6. link
  7. 7. img
  8. 8. before & after
  9. 9. font
  10. 10. font-face
  11. 11. line-height
  12. 12. clear:
  13. 13. overflow: hidden
  14. 14. text-transform
  15. 15. z-index
  16. 16. 行内元素
  17. 17. 外边距
  18. 18. 伪类
  19. 19. 注释
  20. 20. !important
  21. 21. 整体