当前位置:Gxlcms > html代码 > 试整理:CSS中的语法与概念_html/css_WEB-ITnose

试整理:CSS中的语法与概念_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:38人阅读

发端自此。也正在筹备一个关于“CSS布局怎么算”的一个presentation,算是预热之一。当然我懒得写例子,就各种好了=w=

语法

本段分类方式部分参考了https://en.wikipedia.org/wiki/Comparisonoflayoutengines(CascadingStyleSheets)

选择器

元素

*, E, .class, #id, ns|E

关系

E F, E>F, E+F, E~F, E /for/ F

属性

[attr], [=], [~=], [|=], [~=], [$=], [*=]

伪类

  • 链接

:link, :visited, :active, :hover, :focus

  • 结构化伪类

:root, :first-*, :last-*, :only-*, nth-*

  • 表单(未列举完全)

:empty, :target, :disabled, :checked, :invalid, :required

  • :not(), :lang()

伪元素

::first-letter, ::first-line, ::before, ::after, ::selection

属性

排版

语法层面仅对属性作粗略分类,重点放在概念阶段(display, position, float均决定了布局基础模式)。

  • 模式

display

  • 定位

position, top, left, right, bottom, z-index

  • 盒模型

border-\, padding-\, margin-\ ,box-sizing, \-width, \*-height

  • 特定模式
  • 浮动
  • float, clear

  • 列表
  • list-style-\*

  • 表格
  • border-collapse, border-spacing, caption-side, empty-cells, table-layout

    • 视觉效果

    overflow, clip-\*, visibility

    排印

    字体排印是非常大一块,只是没有提出多少新概念,因此在这里仅整理属性。
    对排印的模式及其解析请期待《字体排印在前端》(跳票太长时间,被PIA飞……

    • 字体匹配

    font-\*

    • 断句

    white-space, line-break, hypens, word-wrap

    • 书写方向

    direction, unicode-bidi, writing-mode

    • 其它排印内容

    text-\*

    效果

    这一段没有什么好说,由于效果直观,大家可在互联网上见到极多的示例。

    • 颜色与背景

    color, opacity, background-\, \-shadow

    • 变形与动画

    transform-\, perspective-\, backface-visibility

    • 动画

    transition-\, animation-\

    • 用户界面

    cursor, outline

    本段整理自标准http://www.w3.org/TR/css3-values

    距离

    http://css-tricks.com/the-lengths-of-css/

    • 绝对

    cm, mm, in, pt, pc, px

    • 相对

    相对字体em, rem, ex, ch
    相对视口vw, vh, vmin, vmax

    颜色

    张鑫旭《CSS1-CSS3 颜色知识知多少?》
    还有鑫大大没有涉猎到的地方吗……

    • 关键词

    颜色如 red
    系统颜色如 ButtonText
    currentColor

    • 纯色色值

    RGB, #RRGGBB, rgb(), hsl()

    • 透明色值

    rgba(), hsla(), transparent

    时间

    ms, s

    频次

    Hz, kHz

    角度

    deg, grad, rad, turn

    以上介绍均可见:张鑫旭《CSS/CSS3长度、时间、频率、角度单位大全》

    分辨率

    dpi, dpcm, dppx

    数字

    • Integer:1
    • Number:1.1
    • Percentage:%

    url

    string

    functional notation

    • calc()
    • toggle()
    • attr()

    @规则

    张鑫旭《博闻强识:了解CSS中的@ AT规则》

    • @keyframes
    • @font-face
    • @media
    • @charset
    • @import
    • @namespace
    • @document
    • @page
    • @supports

    /\Comment\/

    概念

    计算

    选择器(权重)

    http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

    根据来源和重要程度,这样排序:

  • user agent declarations
  • author normal declarations
  • user normal declarations
  • author important declarations
  • user important declarations
  • 同级别,计算特化程度(specificity)

  • tag
  • class
  • id
  • inline style
  • user agent为浏览器默认UA;
    author即CSS中的声明;
    user即style=。
    !important可提升author / user层面的权重。

    计算阶段的各个值

  • 指定值Specified values:在样式表中指定的值
    • 将确定一个属性使用的是声明值、继承值还是初始值
  • 计算值Computed values:格式化文档之前,根据样式表计算出的值
    • 相对的URI将转化为绝对URI
  • float: left将导致计算值为display:block也发生在这一步
  • 相对单位em将转化为px或类似单位(当然,如果font-size中用到了em,则需要到下一步才能算出)
  • 使用值Used values:格式化文档之后,根据样式表及层叠关系计算出的值
    • 百分比值转化为px或类似单位
  • line-height的相应计算
  • 真实值Actual values:使用值在一些UA中可能不允许被使用,因此还可能发生针对UA的转化
    • 比如在chrome里面,px不允许有小数,因此就算使用值是33.333px,真实值将是33px。这可能导致一些subpixel bug
  • 比如在kindle的浏览器里面,UA本身不支持灰度以外的颜色,因此所有的颜色将会转化会灰色
  • 布局

    Box model

    对应CSS2.1第8章 Box model,十分基础,介绍的文章很少出问题,就不多说了。

    这几个概念很重要,会出现在标准中多次:

    • Margin Edge
    • Border Edge
    • Padding Edge
    • Content Edge

    Positioning

    布局体系,决定元素出现在哪里及相互影响的方式。

    常规布局

    CSS2.1的重心与难点。
    本部分网络非常多谬误,很容易被各路水货带进坑。
    最好参照W3Help《CSS 定位体系概述》和后面几章,对应标准CSS2.1《第9章 Visual formatting model》,《第10章 Visual formatting model details》来理解。

    常规布局又分为三大块:

    • Normal Flow

    出现inline-box、line-box、block-box的概念,同时又提出了BFC和IFC。

    • Float
    • Absolute positioning

    普通流的高度计算流程,可一窥各个box影响布局的方式:

  • 根据 'line-height' 属性计算出每个行内元素的inline-box高度;
  • 根据 'vertical-align' 属性计算出每个inline-box的垂直对齐方式;
  • line-box的高度是垂直对齐排列最上面inline-box的顶边和最下边inline-box的底边距离;
  • 如果inline-box字号设置大于行内框的 'line-height' 设置,文字将溢出当前line-box,他可能造成多行时文字相互覆盖;

  • 在没有其他块级内容的情况下,整个block-box的高度取决于多个line-box累计的高度
  • 每个计算出的行框在垂直高度上排列没有间隙

    Table

    表格布局很复杂,对外部的影响可属于Normal Flow,内部又区别于Normal Flow元素相互影响的方式。对应标准CSS2.1《第17章 Tables》

    Flex

    上下文

    在常规流中的框,都属于一个格式化的上下文中:

    • BFC:Block Formatting Context

    这个概念的细则可见Smallni的《hasLayout && Block Formatting Contexts》

    • IFC:Inline Formatting Context

    规则脱胎自文字排印,核心概念是vertical-align、line-height。

    层叠上下文Stacking Context

    决定元素在定位上有重合时的相互覆盖情况。
    CSS2.1时期的规则可参考W3Help《分层的显示( Layered presentation )》
    进入CSS3以后,Stacking Context不仅仅由z-index创建,而这导致了它的复杂性。可参考@KevinYue 的一个回答。(这么棒的回答没人赞吗

    Viewport

    • Visible Viewport
    • Layout Viewport

    参见quirksmode的《两个视口的故事【1】、【2】》。

    视口相关,还有一个平常比较难发现的扩散行为,参见我在这里的探究。

    Containing block

    不理解“包含块”的概念,永远无法完全理解width:100%、width:auto、top: 0;等究竟是相对何而言的。参考W3Help《包含块( Containing block )》:

    Containing block

    • of root
    • of fixed
    • of static/relative
    • of non-static inline
    • of non-static block

    Replaced Element

    替换元素,即内容区块超出CSS格式化模型的元素,定义见W3C《第三章:定义》。在W3C的第十章有专门针对替换元素的定位进行阐述。

    它们大多有一些固有宽/高/比例;
    浏览器或多或少支持了一些影响内部内容渲染的CSS属性(如padding、line-height等),让它们少桀骜难训了那么一点点。但这种支持并没有定义在CSS标准中,因此有各个UA之间的差异。

    人气教程排行