CSS笔记

Posted by Mars . Modified at

CSS细节记录

二、主要内容

2.1 特指度、继承和层叠关系

2.1.1 CSS特指度

CSS特指度由4位构成比如(0,0,0,0),可以认为是个十百千四位。越靠左优先级越高。

每存在一个选择器,总的CSS特指度按选择器权重增大。各选择器权重如下:

  • 行内声明(元素的style属性):(1,0,0,0)
  • Id选择器: (0,1,0,0)
  • 类、伪类:(0,0,1,0)
  • 元素、伪元素:(0,0,0,1)
  • 通用选择器(*)的特指度为0:(0,0,0,0);
  • 连接符(如:>、+等)和继承的属性没有特指度。(区别于0,它们没有特指度,相当于比0还要小)

如果两个选择器选择了同一个元素,特指度更大的将胜出(被应用)。

末尾带有!important的声明单独进行比较,同样遵循特指度优先规则。

带有!important和不带的CSS规则进行比较,始终是带!important的规则胜出。

2.1.2 CSS属性继承

CSS属性一般只会父传后代,不会向上传播。(特例是body元素的背景属性,可以向上传播给html根元素。)

不继承的CSS属性:

  • 边框属性;
  • 盒模型相关属性;

继承的属性,没有特指度,连0也没有。(弱于通配选择器*)

2.1.3 CSS的层叠关系

CSS的层叠关系,也就是谁的优先级更高,相互之间的覆盖关系。

CSS的层叠关系有以下几个影响因素:

  • 显式权重:有无!important标记;(带有!important的比没有的优先级更高)
  • 来源: 内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式;
  • 特指度: 同上节;
  • 声明顺序: CSS语句的声明前后顺序。(后声明的覆盖前面声明的)

因为有层叠关系,超链接的CSS伪类推荐声明顺序: LVFHA (link -> visited -> focus -> hover -> active)

2.2 CSS函数

2.2.1 calc()函数

calc()用于进行简单的数学计算。它的使用有如下几点限制

  • +和-号两边必须是同一单位类型,或者都是数字;
  • *号两边必须有一个是数字,不能都是带单位的值;
  • /号右边必须是数字,左边可以是数字也可以是带单位的值;
  • 任何情况下都不能除以0;
  • +和-号两边必须有空格,因为要与正负数区分开。

2.2.2 attr()函数

attr()函数,用于获取CSS选择的元素上的某一个属性值。(比如id属性)

attr()目前仅支持在伪元素的content属性里使用,用于获取元素的某一属性作为字符串显示在伪元素中。

2.3 CSS自定义变量

使用--开头可以自定义一个CSS变量,它的作用和特性如下:

  • 在后面可以使用var()函数引用这个变量,作用仅是把变量值替换到当前位置;
  • 变量名称一般根据作用定义,尽量使用带有短横线连接的变量名;
  • 变量名大小写敏感;
  • 自定义变量具有作用域

2.4 CSS的@规则

2.4.1 CSS特性查询

使用@supports(<css>){<css>}语法可以对不同的CSS支持情况,编写不同的CSS。

/* 仅支持color:black;的情况,才添加如下CSS */
@supports (color:black) {
    body {
        color: black;
    }
}

2.4.2 @font-face

用于使用自定义字体。可以指定一个服务器上的字体,然后用户在读取到这个声明的时候会下载这个字体文件,用于渲染页面。

@font-face {
    font-family: 'Good';
    src: url("good.otf") format('opentype');
}

对于浏览器,无论是否使用声明的字体,都会进行下载。

@font-family中两个属性是必须的:

  • font-family: 给要引入的字体起个名;
  • src: 字体的位置。

src中指定的字体文件位置,必须是同源的。

也可以设置多个用逗号分隔的列表,用于提供备用字体文件下载。

使用@font-face,在字体没加载完成前,会使用默认字体显示,然后在加载完成后瞬间替换成自定义字体。如果二者字形大小相差过大,会导致页面重新布局,影响性能。

2.5 视觉格式化

2.5.1 容纳块

容纳块由离元素最近的生成块级框列表项目的祖辈元素的边界构成。

—《CSS权威指南》

容纳块是元素布局的参考基础。比如计算width等的百分比。

  • body元素的容纳块是html元素;
  • html元素对应的容纳块,叫初始容纳块。它由的宽度等于视口的宽度,高度初始为0。
  • 内部框的左右外边界间距(content-box宽度+内边距+边框+外边距),永远等于容纳块的content-box宽度;

2.5.2 块级框模型

box

块级元素内部格式化基本原理:

横向

  • 核心条件:左右外边界间距(content-box宽度+内边距+边框+外边距),永远等于容纳块的content-box宽度;
  • 只有margin和width可以设置为auto(自动计算),其他横向属性(padding、border)不能,只能设置为0或具体值;
  • 只有外边距可以为负值,其他都不可以;
  • 块级元素的width设为百分数,基准于容纳块的内容框content-box的宽度;
  • 如果两边margin都设为auto,则两外边距平分,值相等;
  • 横向外边距永远不发生折叠
  • 置换元素(比如img),设置width为auto时,会自动设置为内部元素(图片)的宽度的100%;

纵向

  • 当设定块高度小于实际内容的高度时,行为取决于overflow属性的设置;
  • 相邻的纵向外边距会发生折叠;
  • 正外边距折叠时,结果取二者之间较大值。 负外边距折叠时,结果取负的绝对值较大的那个,然后用正外边距与它相加得到结果。
  • 内边距和边框,不与任何区域发生折叠;
  • 当设定块height为自动计算(auto,默认):
    • 如果没有为块设置边框、内边距(或者设置了宽度为0的内边距、边框宽度),块的高度由子元素撑开,默认为:子代块级元素中最上面的上边框外侧最下面的下边框外侧(内部元素外边距与外部父元素外边距折叠);
    • 如果父元素设置了非0宽度边框、内边距,则块的高度为:子代块级元素中最上面的上边距外边界最下面的下边距外边界(有东西隔开,子元素外边距与父元素不发生折叠);
  • 当height设为百分数时,基准于容纳块显式设置的高度。如果容纳块的高度是auto,则百分数没有效果,退化为auto。

2.5.3 box-sizing 块模型修改

box-sizing属性只能用于块级元素,作用是设定块级元素的盒模型类型。(标准盒模型、怪异盒模型)

本质上是设定了width和height属性,约束的是哪一个框。

  • content-box(默认):width和height都约束内容框(内边距内界以里)的尺寸;
  • border-box: width和height都约束边框框(边框外界以里)的尺寸,内边距从里面扣除,扣除后部分才是内容框;

2.5.4 行内元素模型

inline-box

行内元素内部格式化基本原理:

  • 行内元素内部可以划分为:内容区、行内框;
  • 非置换元素(比如span)的内容区,等于字体框的合集区域
  • 置换元素(比如img)的内容区,等于置换元素内容本身+内边距+边框+外边距的合集区域
  • 行距 = line-height - font-size;
  • 非置换行内元素的行内框高度由line-height属性决定,非置换元素的行内框高度 = line-height = 内容区高度 + 行距;(因为行距可正可负,所以行内框可以大于内容框高度,也可以小于)
  • 置换元素的行内框高度 = 内容区高度;
  • 行内框在行中纵向如何对齐,用vertical-align属性设定,这也决定着行框的高度;
  • 内边距、外边距和边框,都不影响行内非置换元素的行内框高度,因此也不对当前行框高度产生影响;
  • 行的高度(行框高度),由一行内各元素(置换、非置换)的行内框最高点和最低点之差决定;

确定一行的行框高度步骤:

  1. 非置换元素:根据line-height与font-size之差计算行距,然后除以2,分别添加在字体框的上部和下部;
  2. 置换元素:将纵向的padding、border和margin与height相加即为内容区高度;
  3. 非置换元素的基线是内部字体的基线,置换元素的基线相当于是内容区的底边;
  4. 根据各元素的vertical-align设置,按各自方法进行纵向对齐;
  5. 找到最高点和最低点,二者就是行框的上界和下界,行框高度是二者之差;

2.5.5 行内块级元素 inline-block

行内块级元素(display:inline-block;),对外部其他元素与行内框相同,对其内部内容它本身视作块级元素。

2.6 内外边距、边框和轮廓

2.6.1 内外边距

  • ★★★内、外边距如果使用百分数定义,它相对的是父元素内容区的宽度
  • 内外边距不影响行内非置换元素的行内框高度,也不影响这个元素所在行的行高;

2.6.2 边框相关

  • 默认情况下,背景延伸到边框的外边界;(通过background-clip可以设置)
  • 边框颜色默认为当前元素文字的颜色;
  • 边框的样式默认是none,也就是没有样式;
  • 边框样式为none时,边框完全不存在,边框的宽度也会自动置为0(而不是显示一个透明的带宽度的边框);
  • 边框样式 hidden 等价于 none;
  • 边框宽度只能是thin / thick / medium / <length>,不能是百分数

2.6.2.1 图像边框

待补充。

2.6.3 轮廓

  • 轮廓绘制在边框的外侧,紧贴边框;
  • 轮廓不占空间,对布局没有任何影响,只是视觉上的效果
  • 轮廓不能单独设置一侧,只能四周同时设置;
  • 轮廓可以不是矩形,在行内元素换行之后,可能形成只沿着外围的独特形状;

25

2.7 背景

2.7.1 几个分开的属性和合并属性

  • 分开的属性:

    • background-color: 设置最底层背景的背景色;
    • background-image: 设置背景图片url,或各种渐变
    • background-position:
      • 取值:长度、百分数关键词(left,right,top,bottom,center)
      • 计算基准是:background-origin属性所设定边框的左上角;
      • 可以定义一对值,先横坐标后纵坐标;
      • 百分数表示:将背景图的当前坐标百分数位置线,与元素的对应坐标百分数位置对齐;
      • 可以混用百分数和长度值。
    • background-size:
      • 关键字:cover、contain;
      • 长度值:一对长度值定义背景大小;
      • 百分数:根据background-origin定义的元素区域计算;
      • auto:根据背景宽高比自动计算,如果没有宽高比,则使用元素本身的尺寸值。
    • background-repeat: 定义背景是否可以重复;
    • background-attachment:
      • scroll(默认): 元素内容滚动时,背景图始终在元素可见区域的固定位置;
      • local: 元素内容滚动时,背景图相对元素内容固定,因此背景图随着元素可见区域滚动而滚动;
      • fixed: 元素相对于当前视口固定,设置这个值,background-position的定位基准也会被设置为视口;
    • background-clip: 定义背景的绘制区域,只负责裁剪背景的显示区域;(默认是border-box,可以设为content-box、padding-box)
    • background-origin: 定义背景的定位区域,也就是background-position参考的基准默认是padding-box,可以设为content-box、border-box);
    • background-origin的默认值是padding-box,而background-clip的默认值是border-box!
  • 合并属性:background

    • 同时设定background-position和background-size,必须用/号隔开,顺序是<position>/<size>;
    • 同时设定background-origin和background-clip,顺序是先origin后clip。
    • 其他属性顺序随意。

2.8 浮动

2.8.1 浮动元素的特点和排布规则

  • 浮动元素脱离原来的文档流,原来占据的位置也消失
  • 浮动元素的外边距不折叠
  • ★★★任何元素浮动后,都会变成块级元素
  • 浮动元素的容纳块,与普通块级元素一样,是距离最近的块级祖先元素;
  • 行内框与浮动元素重叠,行内框的一切都在浮动元素之上渲染
  • 块级框与浮动元素重叠,块级框的背景和边框在浮动元素之下渲染,内容在浮动元素之上渲染
  • △浮动元素如果不是置换元素,应该显式地设置宽度,否则浮动后元素宽度可能趋近于0;

浮动元素的几个排布规则:

  1. 浮动元素左、右边界,都不会超过容纳块的左右内边界(内边距内界);
  2. 浮动元素之间不会相互遮盖、重叠;
  3. 浮动元素的顶边,不会超过元素浮动之前所在的行框的顶边;
  4. 浮动元素沿着浮动方向,尽量移动到更远的位置。
  5. 从左到右排布的行内元素,如果全部添加右浮动,顺序会反转。

2.8.2 清除浮动

clear属性可以设置为: left/right/both/none(默认)。

用来保证在当前元素的左(右)侧不出现浮动的元素,如果出现就把元素向下移动直到离开浮动元素的位置。

注意

清除浮动的本质,是在当前元素外边距之外添加间隙(clearance)。如果需要向下移动50px才能离开左(右)侧的浮动元素,而元素上外边距为0,那么元素上方就会添加50px的间隙来实现清除浮动的效果。

当元素本身存在上外边距,比如20px,那么浏览器只会添加30px的间隙,就足以使元素清除浮动。这样在完成清除浮动之后,元素设置的20px上外边距看起来好像消失了,元素的上边框外界紧贴着浮动元素。

2.8.3 △定义浮动形状

  • shape-outside:使用图像或者一个基本形状来定义元素的浮动形状,也就是外部文字围绕的形状,默认是浮动元素外边距外界的矩形;
  • shape-image-threshold:浮动形状为带透明度的图像时,定义文字可穿过的透明度阈值;
  • shape-margin: 为浮动形状添加外边距;

2.9 定位

2.9.1 各种定位形式的容纳块确定

容纳块是确定定位位置的基准元素。定位相对于容纳块的左上角点

  • static、relative: 最接近的祖先块级(包括inline-block)元素的内容区(content-box);
  • absolute:
    • 容纳块是最接近的position属性不为static的祖先元素(块级或行内),如果没有这样的元素,那么容纳块是初始容纳块,也就是html元素;
    • ★★★当找到的祖辈元素是块级元素,容纳块是它的内边距外界组成的框(padding-box)
    • 当找到的祖辈元素是行内元素,容纳块是它的内容边界(顶边底边由行框上下界组成,左边为第一个元素左边,右边为最后一个元素的右边界);
  • fixed: 容纳块为视口;
  • sticky:定位基准是最近的可滚动父元素,top、bottom、left和right定义的是相对定位基准四个边的偏移量。

2.9.2 偏移属性:top、bottom、left和right

  • left、right设置百分数相对于容纳块的宽度,top和bottom设置百分数相对于容纳块的高度
  • 对于绝对定位,如果四个偏移值都设定了值,无需设定width和height(auto),元素的宽高会自动按照约束的区域计算;
  • 定位元素横向格式化: left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 容纳块宽度;
  • 当横向过约束时,right的值会被忽略,替换为auto;
  • 当纵向过约束时,bottom的值会被忽略,替换为autox;

2.9.3 定位是否保留原文档占位

  • absolute、fixed定位,元素从源文档中脱离,源文档中不再占有位置;
  • 其他定位方式,元素虽然可能不显示在原位置,但是在源文档中仍占位。

2.9.4 z轴位置:z-index

z-index属性只能用于position不为static的元素,或者是flex、grid布局中的元素

  • z-index可正可负;
  • 声明了z-index的元素,会创建自己的堆叠上下文,它的后代元素会在这个堆叠上下文中进行比较排列;
  • 在同一个堆叠上下文中,z-index值越大,显示越靠前;
  • 子元素永远显示在父元素前面;
  • z-index默认为auto,相当于z-index=0。

2.9.5 粘滞定位

  • 粘滞定位的定位基准最近的可滚动(有滚动条)的父元素
  • 粘滞定位的top、bottom、left和right设置的不再是元素的位置,而是容纳块四个边的位移(正数向里,负数向外);
  • 设置了粘滞定位的元素,在滚动过程中,遇到四个位置属性不为auto的边,则粘附在这个边上;

2.10 弹性盒布局

Flex布局相对比较熟悉,记录一些特殊知识点:

  • Flex布局的目的是实现一维布局,最适合沿一个方向布局内容;
  • 使用writting-mode、direction或text-orientation改变文字书写模式,Flex布局的主轴会随之自动改变;
  • 弹性容器的直接子代自动变成弹性元素,不论是子元素还是文本节点;
  • 弹性容器的外边距与它内部弹性元素的外边距不折叠;
  • 弹性元素的特点:
    • 弹性元素彼此之间,外边距不折叠;
    • float和clear属性对弹性元素无效;
    • vertical-align对弹性元素没有影响,只用于设定弹性元素中文本的对齐方式;
    • 弹性元素中的绝对定位元素:
      • 绝对定位弹性元素依然会被从文档流移除;
      • 容纳块是弹性容器;
      • 绝对定位弹性元素不参与弹性布局,因为他们已经不在文档流中;
      • 仍然受弹性容器上CSS属性的影响;
    • flex是flex-grow、flex-shrink、flex-basis属性的简写属性(设置顺序必须是grow/shrink/basis);
    • 弹性元素的属性强烈建议一直用flex缩写属性定义,不要分开来写,flex只对弹性元素有效;
    • min-width这类尺寸限制属性对弹性元素有影响,弹性元素尺寸需要优先满足它们约定的条件;
    • 弹性元素的尺寸由flex属性中的弹性基准flex-basis决定
      • ★ 如果弹性元素上既没设置flex,也没设置flex-basis,那么它的弹性基准值默认为auto;
      • ★ 如果弹性元素上设置了flex但没显式设置第三个值flex-basis,弹性基准这时默认为0
      • 如果flex中设定弹性基准flex-basis为一个特定的长度或百分比(基准为弹性容器主轴长度),那么width(纵向则是height)会被忽略,以弹性基准为主;
      • 如果flex中设定弹性基准为auto,则以设定的非auto的width值为尺寸;
      • 如果基准和width都为auto,则基准值等同于content关键字,意味着是容纳弹性元素内容的最小尺寸。
    • flex-grow: 弹性容器中多余的空间,按各元素的flex-grow比例分配给各个弹性元素;(默认为0,必须是正数)
    • 如果flex中设定的(显式或默认)弹性基准为0,而且各元素的flex-grow也为0的话,各元素的宽度是自身可正好容纳内容的最小宽度(而不是0宽度);
    • flex-shrink: 超过弹性容器长度,按照设定的缩小因子缩放各弹性元素,具体公式如下:(默认为1,必须是正数)
    • 缩小公式
    • flex属性有几个关键字可以设置:
      • initial: 默认值,元素只能缩小不能放大。相当于flex: 0 1 auto;
      • auto: 元素既可以缩小也可以放大,相当于flex: 1 1 auto;
      • none: 完全没有弹性的弹性元素。相当于flex: 0 0 auto;
      • <number>: 只提供一个单独的数字,默认为flex-grow值。此时相当于flex: 0 0;
        • 这种情况相当于为每个弹性元素,设置了它在弹性容器中占容器长度的比例。因为元素弹性基准都为0,相当于总尺寸也为0,容器全部是空余长度,按设置的flex-grow分配给各弹性元素。
    • order属性:设置弹性元素在弹性容器轴上显示的顺序:
      • 小的在前,大的在后,可以为负值;
      • 同样order值的元素,按在源代码中出现的先后顺序排列;
      • order纯粹是视觉上的排列效果变化,Tab键的索引和屏幕阅读器依然按照源代码顺序检索

2.11 栅格布局

栅格布局用于定义二维平面网格,并方便把元素边界与网格线对齐。

栅格布局

  • 栅格布局由声明display:grid开启,这样声明的元素是一个栅格容器;
  • 栅格容器为它的内容定义一个栅格格式化上下文,栅格容器的子元素是栅格元素;
  • 栅格容器外边距与它内部栅格元素的外边距不折叠
  • 栅格元素上float和clear属性无效;
  • vertical-align对栅格元素没有影响,只用于设定弹性元素中文本的对齐方式;
  • 栅格容器和其内部定义的栅格线外界不一定重合,栅格容器只是为内部栅格定义提供一个尺寸基准,以及为文档流中其他外部元素提供栅格容器的尺寸;
  • 栅格元素按照栅格线划分的栅格单元排布,所以可能会超出栅格容器显示,超出部分不会对文档中的其他元素排布产生影响,只是覆盖;
  • 栅格元素全部包含在栅格区域中,栅格区域包含的边界是元素的外边距外界;
  • grid-template-rows、grid-template-columns定义栅格轨道宽度,也用于放置栅格线:
    • 轨道宽度之间用空格分开,轨道宽度两侧可以定义栅格线名称,用方括号括起来; [col1] 1em [col2] 1em [col3]
    • 轨道宽度可以有几种表示方式:
      • 百分数: 按行和列区分,分别相对于栅格容器的height和width;
      • 长度: 固定的轨道宽度;
      • 最小最大值范围: minmax(min, max), 如果最大值比最小值小,则设定最小值的固定宽度轨道。最小值部分不能使用fr单位,会导致整个声明失效;
      • 分配余下空间: fr为单位,1fr为平均分配1份;
      • 关键字
        • min-content: 根据内容设置轨道宽度,尽量缩短每个内容的宽度,然后轨道宽度设为整个轨道中最窄的内容宽度;
        • max-content: 尽量放宽每个内容的宽度,然后轨道宽度设为整个轨道中最宽的内容宽度。
        • fit-content(arg): 适应内容宽度。
          • 当 min < arg < max: 宽度为arg;
          • 当 arg < min < max: 宽度为min;
          • 当 mim < max < arg: 宽度为max。
      • 重复定义: repeat(times / autofill / autofit, pattern);
        • 重复函数中不能再嵌套重复函数;
        • 重复函数中的patten如果有栅格线,首尾连接的栅格线将合二为一,这个栅格线具有两个名称;
        • 自动填充autofillrepeat(autofill, 1em)代表使用1em宽度,自动填充剩余的空间直到无法填充为止,不论是否有栅格空间中是否有元素;
        • 自动填充autofitrepeat(autofit, 1em)代表使用1em宽度自动填充,如果没有元素填满栅格空间,就去掉这个自动填充的空间。
      • 不同单位可以混用。
  • grid-template-areas: 定义栅格区域
    • 按照栅格顺序,每一行用一个字符串表示;
    • 每一列之间用空格隔开,用一个字母序列代表这个栅格单元所属的区域;
    • 空单元用一个或多个 . 表示;
    • 相同的字符串指向的区域,合并成为一个栅格区域,栅格区域必须是矩形;
    • 例如:grid-areas: “a b b c” “. b b .”;
    • 命名的栅格区域,它的行、列方向起止栅格线都隐式添加了名称,分别为name-start和name-end,行和列栅格线命名空间不冲突。
  • grid-row、grid-column:用于栅格元素。为栅格元素指定栅格区域(绑定元素边界到某一条栅格线)
    • grid-row-start、grid-row-end、grid-column-start、grid-column-end用来指定四个边界的栅格线;
    • 绑定栅格线,可以使用栅格线序号(从1开始),也可以使用栅格线名称,或者是栅格区域名称;
    • 使用栅格线序号,如果起始序号大于终止序号(在终止线之后),则系统自动默认对调二者;
    • 使用span+number,可以指定栅格元素跨越的栅格单元数目。如果span后面没有数字,则默认为1;
    • span+number形式定义跨越单元数目,可以用在起始线,也可以用在终止线,方向都是向确定的边界的相反方向;
    • span+number中number可以是负值,表示相反方向跨越计数;
    • 如果使用栅格线名称,同时有多条线用了同一个名称,则需要在名称后面加上空格隔开的序号n,表示是第几个同名栅格线;
    • span number <col-name> 也是有效的语法,表示跨越number个col-name栅格线;
    • 如果是栅格区域名称,则根据起始还是终止线,自动识别区域的-start和-end线;
    • grid-row、grid-column是简写属性,start和end栅格线定义用/号隔开,前面是起始线定义,后面是终止线定义;
    • 如果设置的栅格线超出定义范围,则生成隐式栅格
      • 如果设置的栅格线名称不存在,则在该方向末尾添加一个这个名称的栅格线,然后把边界绑定到它;
      • 如果设置的栅格线序号超出定义范围,则根据序号大小自动生成若干栅格线,直到序号被覆盖;
      • 隐式增加栅格线的轨道宽度,受grid-auto-rows或grid-auto-columns影响;
      • 隐式栅格是一种回落机制,一般最好不要使用。
  • grid-area:直接指定栅格元素的栅格区域
    • 直接使用栅格区域名称,则元素四个边界自动绑定到这个区域的对应边界;
    • 也可以用row-start/col-start/row-end/col-end这种形式显式定义四个边界的具体栅格线,方向比较奇怪,是从上边界开始的顺时针方向
  • 栅格流:
    • 如果不指定栅格元素的位置(绑定边界),栅格元素按照默认的栅格流顺序,依次放入栅格单元中;
    • 如果放不下,则自动创建轨道,用于放置多出来的栅格元素;
    • grid-auto-flow设置默认的放置顺序:
      • row(默认): 按行放置;
      • column:按列放置;
      • 可以附加dense关键字,表示紧凑布局,也就是无视元素原来的先后顺序,尽量铺满整个栅格。
  • grid-auto-rows、grid-auto-columns: 自动添加的轨道宽度
    • 设置自动创建的轨道宽度,可以是固定值,或者fr值,或者minmax()
  • grid:定义栅格模板的缩写形式
    • 基本形式是: <row> / <column> (具体语法复杂,查书);
    • grid属性会把其他所有未设置的值,重置为auto,因此需要把grid属性写在所有其他属性的最前面;
  • gap: 设置栏距
    • 栏距基本上可以看做把栅格线加宽,让栅格单元之间留有距离;
    • 栏距不占栅格单元的空间(除非是以fr定义的宽度,栏距计入在栅格总宽度里,剩余的宽度才会分配给fr定义的区域);
  • 对齐方式:
    • justify-items、align-items: 元素在栅格区域内的行、列方向对齐方式;
    • justify-content、align-content: 整个栅格在栅格容器中的行、列方向对齐方式;
    • justify-self、align-self:用于栅格元素。表示栅格元素单独在栅格区域内的对齐方式。
  • 分层、排序:
    • 默认按文档源码中的先后顺序分层:后者在上,前者在下;
    • 使用z-index也可以显式修改分层顺序;
    • 使用order可以设置栅格元素的排列顺序(尽量不用)。

2.12 BFC块级格式化上下文

BFC是什么

BFC(块级格式化上下文),有如下特性:

  • BFC 会创建一个独立的空间,内部元素永远不会超出它的范围,即使是float元素(因此浮动元素也会撑开触发了BFC的盒子);
  • 不同BFC之间,不会发生外边距折叠;
  • BFC区域不会与任何float元素重叠(相当于左右都清除浮动);

BFC的作用是?

  1. 防止浮动元素跑出父容器;
  2. 防止外边距折叠;
  3. 创建左右浮动,中间自适应的双飞翼布局(使用flex更佳);

如何触发BFC

以下元素会创建 BFC:

  • 根元素(<html>
  • 浮动元素(元素的 float 不是 none)
  • 绝对定位元素(元素的 position 为 absolute 或 fixed)
  • overflow 计算值(Computed)不为 visible 的块元素
  • ★(没有副作用)display 值为 flow-root 的元素
  • 弹性元素(display 为 flex 或 inline-flex 元素的直接子元素)
  • 网格元素(display 为 grid 或 inline-grid 元素的直接子元素)
  • 行内块元素(元素的 display 为 inline-block)
  • 表格单元格(元素的 display 为 table-cell,HTML表格单元格默认为该值)
  • 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
  • 匿名表格单元格元素(元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot 的默认属性)或 inline-table)
  • contain 值为 layout、content 或 paint 的元素
  • 多列容器(元素的 column-count 或 column-width (en-US) 不为 auto,包括 column-count 为 1)

2.13 滤镜、裁剪、混合、遮罩

  • clip-path: 裁剪
    • 形状函数:
      • inset(): 上右下左四个向内收缩值;
      • circle(): 只接受一个圆的半径(长度、百分比),然后可以加上一个at,后面接圆心的位置(可以是关键字,如center);
      • ellipse(): 接受一对值,定义纵轴和横轴半径。同样用at接圆心位置;
      • polygon(): 多边形,用多个逗号分隔的点(一对由空格隔开的长度或百分数值)定义。
  • mask 遮罩
    • mask-image: 用于蒙版的图片(与background-image类似);
    • mask-mode: 定义蒙版的实现模式。
      • alpha: 通过透明度通道实现(全透明为不可见);
      • luminance: 通过亮度实现(全黑为不可见);
    • mask-size、mask-position、mask-repeat、mask-origin、mask-clip:都与对应的background属性类似;
    • mask-composite:定义多个蒙板的合并方式(相交、减除等)。
  • object 置换元素相关
    • object-fit:置换元素在框内的填充方式:
      • fill(默认): 元素被拉伸到容器尺寸,不保留宽高比;
      • cover: 保留宽高比,拉伸元素直到覆盖整个容器(多余部分被切除);
      • contain: 保留宽高比,拉伸元素直到正好被容器容纳;
      • none: 不拉伸元素,保留元素初始尺寸;
    • object-position:置换元素在框内的位置。与background-position类似,只不过是设置置换元素的位置。

响应式布局

响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh)

逻辑像素、物理像素、像素密度

物理像素: 设备屏幕上的一个物理像素点; 逻辑像素: CSS中设置的像素单位(1px),一个逻辑像素可以对应多个物理像素(多倍屏); 像素密度: 一个逻辑像素对应多少个物理像素。例如:CSS中设置1px在iphone等设备上可能显示为3个像素点,那么这台iphone此时的像素密度为pixel ratio = 3

BEM规范

BEM规范

BEM规范解决的问题

通过CSS选择器名称,就可以知道它定位的元素,以及与父元素的嵌套层级关系;

BEM规范内容

BEM 是块(block)、元素(element)、修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论。

块是一个功能区域的根元素,元素是其内部实现的子元素,而修饰符代表元素的某一状态。

它定义CSS选择器的命名如下:

Block__Element--Modifier

其中:

  1. 块与其内部元素之间用两个下划线(__)隔开;
  2. 元素与其修饰符之间用两个短横线(--)隔开;
  3. 如果块、元素、状态需要由多个单词组成,单词之间用-隔开;

例如:

  • container__button--hover;
  • video-box__show-btn--active;

BEM规范的实操

  1. 只在需要处理父子嵌套关系的时候,使用BEM规范命名,单一状态等不需要;
  2. 手写麻烦,一般使用SCSS等预处理器的嵌套功能编写;
  3. 层级最好不要超过4级;
  4. 也可使用预处理器的mixin等功能,实现BEM的自动命名;

一些常用CSS技巧

单行文字溢出显示三点省略号

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

多行文字溢出显示三点省略号

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display: -webkit-box;         // 作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式从上到下垂直排列
-webkit-line-clamp: 3;        // 显示的行数
Keywords: CSS
previousPost nextPost
已经有 1000000 个小伙伴看完了这篇推文。