-
打个分吧:

360FED课程 - CSS

大佬为什么是大佬?

3分钟阅读
-
-

css

cascading stylesheet 级联样式表

Level 版本

  • CSS Level 1(废弃
  • CSS Level 2 (CSS 2.2 完整规范)
  • CSS Level 3(在 2.2 的基础上增加新模块特性
    • Color Module Level 3
    • Selectors Level 3
    • Media Queries
    • Fonts Level 3

选择器

简单

  • 通配 *
  • 标签 E
  • 类 .class
  • id #id

属性选择器 [ ]

/* 具有某个属性 */
[disabled]

/* 属性为指定的值 */
[type="checkbox"]

/* 属性值包含某个字符串 */
[href*="example"]

/* 属性值以某个字符串开头 */
[href^="http:"]

/* 属性值以某个字符串结束 */
[href$="jpg"]

/* 属性值以空格分割后包含某个字符串 */
[lang~="zh-cn"]/* class选择器的实现机制 */

伪类

/* 动态性伪类,根据状态选择 */
a:link    { ... }       /* 未访问过的链接 */
a:visited { ... }       /* 已访问过的链接 */

a:hover   { ... }       /* 鼠标移到链接上的样式 */
a:active  { ... }       /* 鼠标在连接上按下时的样式 */
a:focus   { ... }       /* 获得焦点时的样式 */

input:disabled { ... }  /* 禁用时的样式 */
input:checked { ... }   /* 选中时的样式 */
                        /*利用:checked来做某些toggle组件状态转换*/

/* 结构性伪类 */
:first-child
:last-child
:nth-child(2n+1)

:first-of-type
:last-of-type
div:nth-of-type(2n+1)   /*对nth-child()增加类型限制*/

:empty

组合性选择器

  • 后代 E F
  • 父子 E>F
  • 兄弟 E~F
  • 相邻兄弟 E+F

伪元素

  • ::before
  • ::after
  • ::first-letter
  • ::first-line

优先级/特异度 Specificity

  • !important > 内联 > id > (伪)类 > (伪)元素
  • 覆盖:同样优先级:后面写的覆盖前面写的
  • 复合选择器:从优先级高的选择器 的 数量 开始比较

样式来源

  • 页面开发者
  • 用户设置(浏览器可以指定一个本地 CSS 文件,打开所有页面时自动加载
  • 浏览器预设
  • 优先级: 开发者 > 用户设置 > 浏览器预设
  • 加了!important 的优先级:用户 important > 开发者 important > 开发者 > 用户设置 > 浏览器预设

默认值策略 Defaulting

继承

某些属性若不指定值,会自动继承父元素的 !!!【计算值】

显示继承

html {
  box-sizing: border-box;
}
* {
  box-sizing: inherit;
  /* 优点是有某一块都要设置为content-box时,只需要设置其最外层元素,不需要全设置 */
}
#xxx {
  box-sizing: content-box;
}

初始值 initial

  • CSS 中,每个属性都有一个初始值
  • background-color 的初始值为 transparent
  • margin-left 的初始值为 0,font-size 是 16px,line-height 是 1.2,但根据 font-family 而不同
  • 可以显式重置为初始值,比如 background-color: initial
  • 可以上 mdn 查初始值

CSS 求值过程

一个令人疑惑的很皮的 CSS 求值例子

<article>
  <h1>卡尔斯巴德洞窟</h1>
  <p>
    卡尔斯巴德洞窟(Carlsbad Caverns)是美国的一座国家公园,
    位于新墨西哥州东南部。游客可以通过天然入口徒步进入,也可以
    通过电梯直接到达230米的洞穴深处。
  </p>
</article>

<style>
  body {
    margin: 0;
  }
  article {
    line-height: 150%;
  }
  h1 {
    font-size: 40px; /*最终实际的line-height值为24px*/
  }
  p {
    font-size: 14px; /*最终实际的line-height值为24px*/
  }
</style>

<style>
  body {
    margin: 0;
  }
  article {
    line-height: 1.5;
  }
  h1 {
    font-size: 40px; /*最终实际的line-height值为60px*/
  }
  p {
    font-size: 14px; /*最终实际的line-height值为21px*/
  }
</style>

<!--
    原因:
    设为150%时,子元素继承前,父元素的line-height=150%会先被计算(resolving),得到一个绝对值,被计算为16px(默认的font-size值)*1.5=24px,子元素继承到的值是24px

    设为1.5时,子元素继承前,父元素在执行resolving时,1.5是绝对值,不会被转换,所以子元素继承到值1.5,后面再根据自己的font-size*1.5计算line-height

    总结:子元素继承到的是父元素的 计算值(一个绝对值)
-->

CSS 求值详细过程

  • filtering:有效选择器 有效属性值 符合 media ,筛选出所有声明值 Declared Values
  • cascading:选出优先级最高的一条声明,得到层叠值 Cascaded Value
  • defaulting:当层叠值为空时,用 继承 | 初始值,得到指定值 Specified Value
  • resolving:将相对值、关键字转化为绝对值,如 em 转换为 px,%被转换为 px,相对路径转换为绝对路径,得到计算值 Computed Value
  • formatting:将计算值进一步转换,比如百分比、关键字转换为绝对值,得到使用值 Used Value
  • constraining:将小数像素转为整数,得到实际值

CSS 排版原理

盒模型

content-box:

  • margin
  • border
  • padding
  • content(width height)

border-box

  • margin
  • border (width = border + padding + content_width)
  • padding
  • content

height 100%(一般不用

  • 高度百分数,是相对于父元素的高度
  • 若父元素无高度,则百分比高度不生效
  • 用 vw vh 设置相对于屏幕的百分比高度,100vh 即 100%屏幕高度

padding 100%

  • padding 百分比值,不论是 padding top、left,都是相对于父元素宽度
  • 应用:做固定宽高比的盒子.

margin 折叠

上下相邻元素的间距会取其 margin 中较大值。

border:四条边不同颜色

  • 实际相邻的 border 交界处,是斜切的。
  • 当元素的 width height 为 0 时,会得到四个三角形

background: repeating-conic-gradient(black 0 60deg, yellow 0 120deg);

视觉格式化模型

Viewport 视口

浏览器的可视区域,所有元素都在 viewport 内

块级元素(Block-level Elements)

  • 会被格式化成块状的元素
  • 例如 p、div、section 等
  • 将 display 设置为 block、list-item、table 会使元素变为块级

行内元素(Inline-level Elements)

  • 不会为其内容生成块级框
  • 让其内容分布在多行中
  • display 设置为 inline、inline-block、inline-table 会使元素变为行级

“因为大佬比你知道的多”
上次更新:

评论区