深入CSS | 青训营

折果
119 阅读8分钟

一、选择器

  1. 选择器的种类：元素选择器，类选择器，id选择器，通配符选择器，群组选择器，后代选择器，伪类选择器。

  2. 选择器的权重：元素选择器 (0001),类选择器 (0010),id选择器 (0100),群组和后代选择器(包含选择符的权重之和),内联样式 (1000),!important (10000)。

  • 拓展：①当不同选择符样式设置有冲突时，高权重选择符的样式会覆盖低权重选择符的样式。②相同权重的选择符，样式遵循就近原则，哪个选择符最后定义，就采用那个选择符样式。
  1. 选择器的使用：给多个相同标签添加统一选择器和样式，通过选择器权重的特性给指定标签添加特殊选择器和样式,覆盖掉原有样式。

二、继承

  1. 继承：某些属性会自动继承其父元素的计算值，除非显示指定一个值。

  2. 显示继承：inherit  继承，如果元素的某 css 值设置为 inherit ，则说明该元素的该css值与其父元素的该css属性值一致。适用于所有css属性。

三、 初始值

  1. CSS中，每个属性都有一个初始值。
  • background-color 的初始值为 transparent
  • margin-left 的初始值为0
  1. 可以使用 initial 关键字显式重置为初始值
  • background-color：initial

四、布局

  1. 常规流：行级元素，块级元素，表格布局，弹性盒布局，网格布局。

  2. 脱离常规流：绝对定位，浮动。

1. 宽度属性

  • 指定content box 宽度。

  • 取值为长度，百分数，auto。

  • auto 由浏览器根据其它属性确定，

  • 百分数相对于容器的 content box 宽度。

2. 高度属性

  • 指定 content box 高度。

  • 取值为长度，百分数，auto。

  • auto 取值由内容计算得来。

  • 百分数相对于容器的 content box 高度。

  • 容器有指定的高度时，百分数才生效。

3. 内边距

  • 指定元素四个方向的内边距

  • 百分数相对于容器宽度

  • padding后面一个属性值表示四个方向的内边距，两个属性值表示上下，左右的内边距，四个属性值表示上右下左，顺时针方向的内边距。

4. 边框

  • 三种属性

    • border-width：边框宽度
    • border-style：边框类型
    • border-color：边框颜色

  • 四个方向

    • border-top：上边框
    • border-right：右边框
    • border-bottom：下边框
    • border-left：左边框

  • 边框类型：solid 实线  dashed 虚线  double 双实线  dotted 圆点虚线

5. 外边距

  • 指定元素四个方向的外边距

  • 取值可以是长度，百分数，auto

  • 百分数相对于容器宽度

  • 水平居中：margin：auto

  • margin合并：两个盒子如果一个定义了上外边距100px,另一个定义了下外边距100px,最终渲染到页面实际上是两个盒子上下间距100px,如果定义的值不相等，渲染最大的值，这个是margin特有的属性，叫做margin合并。

6. border-sizing 属性

  • border-box：告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

image.png

7. overflow 溢出属性

  • visible ：内容不能被裁减并且可能渲染到边距盒（padding）的外部。

  • hidden：内容将被裁减以适应边距（padding）盒。不提供滚动条，也不支持允许用户滚动（例如通过拖拽或者使用滚轮）。内容可以以编程的方式滚动（例如，通过设置 scrollLeft 等属性的值或 scrollTo() 方法）, 因此该元素仍然是一个滚动的容器。

  • clip：类似于 hidden，内容将以元素的边距（padding）盒进行裁剪。clip 和 hidden 之间的区别是 clip 关键字禁止所有滚动，包括以编程方式的滚动。该盒子不是一个滚动的容器，并且不会启动新的格式化上下文。如果你希望开启一个新的格式化上下文，你可以使用 display: flow-root 来这样做。

  • scroll：内容将被裁减以适应边距（padding）盒。无论是否实际裁剪了任何内容，浏览器总是显示滚动条，以防止滚动条在内容改变时出现或者消失。打印机可能会打印溢出的内容。

  • Auto： 取决于用户代理。如果内容适应边距（padding）盒，它看起来与visible相同，但是仍然建立了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条。

  • overlay：行为与 auto 相同，但是滚动条绘制在内容之上，而不是占据空间。

8. 行级元素，块级元素和行内块元素

块级元素

  • 生成块级盒子
  • body , article , div , main , section , hn , p , ul , li等
  • display：block

行级元素

  • 生成行级盒子
  • 内容分散在多个行盒内
  • span , em , strong , cite , code等
  • display:inline

9. 弹性盒布局

  • 创造弹性盒 display: flex

  • 分布 ( justify-content，align-items )

    • flex-start: 弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

    • flex-end: 弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。

    • ccenter: 弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。

    • space-between： 弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于 flex-start 。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。

    • space-around: 弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于 center 。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

  • 修改主轴方向 （flex-direction）：column 竖直排列，row 水平排列 ，row-reverse 反向水平排列，column-reverse 反向竖直排列。

  • flexibility:

    • 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。

    • flex-grow 有剩余空间时的伸展能力

    • flex-shrink 容器空间不足时的伸展能力

    • flex-basis 没有伸展或收缩时的基础长度

10.网格布局

  • 创造网格布局

    • display: grid 使元素生成一个块级的 Grid 容器。
    • 使用 grid-template 相关属性将容器划分为网格。
    • 设置每一个子项占哪些行 / 列。

  • 划分网格：

第一种方法 固定值：

grid-template-columns:  200px  200px  200px  200px;
grid-template-rows:  200px  200px  200px  200px;

第二种方法 百分比：

grid-template-columns: 33.3% 33.3% 33.4%;
grid-template-rows: 33.3% 33.3% 33.4%;

第三种方法 repeat：

grid-template-columns: repeat(3,33.333%);
grid-template-rows: repeat(3,33.333%);

第四种方法 repeat auto-fill 自动填充：

grid-template-columns: repeat(auto-fill,25%);
grid-template-rows: repeat(auto-fill,25%);

第五种方法 fr片段：

grid-template-columns:200px 300px 1fr 100px;
grid-template-rows:200px 300px 1fr 100px;

第六种方法 minmax(最小，最大)区间：

grid-template-columns:minmax(200px,400px) 300px 100px 100px;
grid-template-rows:200px 300px 200px 100px;

第七种方法 auto：

grid-template-columns:auto 300px 100px 100px;
grid-template-rows:auto 300px 200px 100px;
  • 间距：
row-gap:20px;
行间距
column-gap:20px;
列间距

11 . float 浮动

  • 文字环绕图片

image.png

12.定位(position)

  • static 默认值

  • absolute 绝对定位：脱离常规流

    • 相对于最近的非 static 祖先定位
    • 不会对流内元素布局造成影响

  • relative 相对定位：不脱离常规流

  • fixed 固定定位：脱离常规流

  • sticky 粘性定位：可以做吸顶效果，CSS3新增，兼容不好

五、学习CSS的几点建议

  • 充分利用 MDN 和 W3C CSS 规范

  • 保持好奇心，善用浏览器的开发者工具

  • 持续学习，CSS新特性还在不断出现

avatar
文章
阅读
粉丝