CSS-布局|青训营

71 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天

字体(font-family)(在style中设置)

指定多个可供使用的字符集,逐个选择。

通用字符集

sans-serif是一类通用子集,而不具体指一组子集,用作保底的字符集使用,以防止乱码。
下图列出了一些通用字符集:
font-family
Monospace 等宽字体常用于表示编程字体

Web Fonts

使用网络上的字体,需要用"@"引用字体的名字,并附带url
浏览器根据附带的url下载好字体之后就可以使用该字体对页面进行渲染
使用Web Fonts需要把用到的字符进行裁切

字体大小font-size

  • 关键字:small,medium,large
  • 长度:px(绝对长度),em(相对长度)
  • 百分数:相对于父元素字体的大小

字重font-weight

使用字重的前提是当前字体本身设计了该字重

行高line-height

若行高为数字,则行高(px)为数字×父元素字体的大小(px) (※推荐!比较直观)

文本对齐方式text-align

只对文本有效,对元素无效。包括center, padding-top, padding-bottom等值。若需要设置图片的对齐方式,则需要设置图片的父元素的text-align属性。

空格合并/多个换行 white-space

white-space 还可以设置overflow-wrap:break-word实现换行

深入了解CSS

特异度(Specificity)

Specificity

通用选择器具有较低的特异性,ID选择器具有较高的特异性。css样式优先考虑特异度高的选择器。

  • id>(伪)类>标签
  • 同类选择器排序:如,若同为id选择器,则先看id个数,个数越大越优先

继承

  • 某些属性若并没有被定义,那么将自动继承父元素的值
  • 一般文字、字体相关属性都可以继承,但是box的宽高边距都不能继承
  • 如果属性不可以被继承,inherit可以强制它从父级完成显式继承
  • CSS中每个属性都有初始值,initial关键字可以显式重置属性为初始值。
    如:background-color: transparent; margin-left:0;

CSS求值 css求值过程

  • 指定值(Specified Value)、resolving后的计算值(Computed Value),几乎都是解析完CSS就可以得到的
  • formatting需要获取浏览器当前窗口的大小,才能进一步将计算值转换为使用值
    使用值(Used)是用于进行实际布局使用的,不会再有相对的值或者关键字
  • 继承父级的计算值