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 块级框模型
块级元素内部格式化基本原理:
横向:
- 核心条件:左右外边界间距(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 行内元素模型
行内元素内部格式化基本原理:
- 行内元素内部可以划分为:内容区、行内框;
- 非置换元素(比如span)的内容区,等于字体框的合集区域;
- 置换元素(比如img)的内容区,等于置换元素内容本身+内边距+边框+外边距的合集区域;
- 行距 = line-height - font-size;
- 非置换行内元素的行内框高度由line-height属性决定,非置换元素的行内框高度 = line-height = 内容区高度 + 行距;(因为行距可正可负,所以行内框可以大于内容框高度,也可以小于)
- 置换元素的行内框高度 = 内容区高度;
- 行内框在行中纵向如何对齐,用vertical-align属性设定,这也决定着行框的高度;
- 内边距、外边距和边框,都不影响行内非置换元素的行内框高度,因此也不对当前行框高度产生影响;
- 行的高度(行框高度),由一行内各元素(置换、非置换)的行内框最高点和最低点之差决定;
确定一行的行框高度步骤:
- 非置换元素:根据line-height与font-size之差计算行距,然后除以2,分别添加在字体框的上部和下部;
- 置换元素:将纵向的padding、border和margin与height相加即为内容区高度;
- 非置换元素的基线是内部字体的基线,置换元素的基线相当于是内容区的底边;
- 根据各元素的vertical-align设置,按各自方法进行纵向对齐;
- 找到最高点和最低点,二者就是行框的上界和下界,行框高度是二者之差;
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 轮廓
- 轮廓绘制在边框的外侧,紧贴边框;
- 轮廓不占空间,对布局没有任何影响,只是视觉上的效果;
- 轮廓不能单独设置一侧,只能四周同时设置;
- 轮廓可以不是矩形,在行内元素换行之后,可能形成只沿着外围的独特形状;
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。
- 其他属性顺序随意。
- 同时设定background-position和background-size,必须用/号隔开,顺序是
2.8 浮动
2.8.1 浮动元素的特点和排布规则
- 浮动元素脱离原来的文档流,原来占据的位置也消失;
- 浮动元素的外边距不折叠;
★★★
任何元素浮动后,都会变成块级元素;- 浮动元素的容纳块,与普通块级元素一样,是距离最近的块级祖先元素;
- 行内框与浮动元素重叠,行内框的一切都在浮动元素之上渲染;
- 块级框与浮动元素重叠,块级框的背景和边框在浮动元素之下渲染,内容在浮动元素之上渲染。
- △浮动元素如果不是置换元素,应该显式地设置宽度,否则浮动后元素宽度可能趋近于0;
浮动元素的几个排布规则:
- 浮动元素左、右边界,都不会超过容纳块的左右内边界(内边距内界);
- 浮动元素之间不会相互遮盖、重叠;
- 浮动元素的顶边,不会超过元素浮动之前所在的行框的顶边;
- 浮动元素沿着浮动方向,尽量移动到更远的位置。
- 从左到右排布的行内元素,如果全部添加右浮动,顺序会反转。
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如果有栅格线,首尾连接的栅格线将合二为一,这个栅格线具有两个名称;
- 自动填充autofill:
repeat(autofill, 1em)
代表使用1em宽度,自动填充剩余的空间直到无法填充为止,不论是否有栅格空间中是否有元素; - 自动填充autofit:
repeat(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()
;
- 设置自动创建的轨道宽度,可以是固定值,或者fr值,或者
- 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的作用是?
- 防止浮动元素跑出父容器;
- 防止外边距折叠;
- 创建左右浮动,中间自适应的双飞翼布局(使用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类似,只不过是设置置换元素的位置。
- object-fit:置换元素在框内的填充方式:
响应式布局
响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh)
逻辑像素、物理像素、像素密度
物理像素: 设备屏幕上的一个物理像素点;
逻辑像素: CSS中设置的像素单位(1px
),一个逻辑像素可以对应多个物理像素(多倍屏);
像素密度: 一个逻辑像素对应多少个物理像素。例如:CSS
中设置1px
在iphone等设备上可能显示为3
个像素点,那么这台iphone此时的像素密度为pixel ratio = 3
;
BEM规范
BEM规范解决的问题
通过CSS选择器名称,就可以知道它定位的元素,以及与父元素的嵌套层级关系;
BEM规范内容
BEM 是块(block)、元素(element)、修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论。
块是一个功能区域的根元素,元素是其内部实现的子元素,而修饰符代表元素的某一状态。
它定义CSS选择器的命名如下:
Block__Element--Modifier
其中:
- 块与其内部元素之间用两个下划线(
__
)隔开; - 元素与其修饰符之间用两个短横线(
--
)隔开; - 如果块、元素、状态需要由多个单词组成,单词之间用
-
隔开;
例如:
container__button--hover
;video-box__show-btn--active
;
BEM规范的实操
- 只在需要处理父子嵌套关系的时候,使用BEM规范命名,单一状态等不需要;
- 手写麻烦,一般使用SCSS等预处理器的嵌套功能编写;
- 层级最好不要超过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; // 显示的行数