理解CSS ｜ 青训营笔记

只会说欧克的码农
85 阅读6分钟

这是我参与「第四届青训营 」笔记创作活动的的第三天。  今天学习了第三节课理解CSS，通过昨天基础知识的学习，今天对深入CSS的知识也有了一定的认识，能够更好的去理解今天学习的知识。

本堂课重点内容

第二节课对CSS进阶进行了详细的讲解

  • 选择器的特异度
  • 继承以及css求值问题
  • 常见的布局技术

详细知识点介绍

知识点也是总结成了笔记，文章结尾奉上。

课后个人总结

这节课通过学习CSS选择器的一些特异度，我学习到了该如何通过组合选择器来更好的实现代码复用以及各种标签元素之后如何通过关系来设置样式；继承以及css求值问题，让我学习到了关于继承的一些特性，更好的对网页页面渲染进一步的理解；常见的布局问题，让我们能够很轻松的使用css来掌控页面的布局和流向，更好的完成页面的一些高要求操作。

二、深入CSS

1、选择器的特异度（Specificity）

image-20220725190522102.png

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
  .btn {
    display: inline-block;
    padding: .36em .8em;
    margin-right: .5em;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    border-radius: .3em;
    border: none;
    background: #e6e6e6;
    color: #333;
  }
  .btn.primary {
    color: #fff;
    background: #218de6;
  }
</style>

效果展示：

image-20220725190731254.png

2、继承

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

一般来说，在CSS中，与文字相关的属性都是会继承的，跟盒模型相关的属性是不会继承的。

（1）显示继承

通过使用inherit关键字让不可继承的属性变为可继承的。

* {
    box-sizing: inherit;
}

（2）初始值

  • CSS中，每个属性都有一个初始值

    • backgroud-color 的初始值为 transparent
    • margin-left的初始值为 0

  • 可以使用initial关键字显式重置为初始值

    • backgroud-color：initial

3、CSS求值过程

这里图片展示不出来，大家可以自行搜搜。

4、布局（Layout）

（1）布局（Layout）是什么？

  • 确定内容的大小和位置的算法。
  • 依据元素、容器、兄弟节点和内容等信息来计算。

（2）布局相关技术

image-20220725192233467.png

（3）盒模型

image-20220725192304346.png

  • width
指定为content box宽度
取值为长度、百分数、auto
auto由浏览器根据其他属性确定
百分数相对于容器的content box宽度
  • height
指定为content box宽度
取值为长度、百分数、auto
auto取值由内容计算得来
百分数相对于容器的content box宽度
容器有指定的高度时，百分数才生效

image-20220725192717298.png

  • padding
指定元素的四个方向的内边距
百分数相对于容器宽度
  • border
指定容器边框样式、粗细和颜色

三种属性：
    border-width
    border-style
    border-color
四个方向：
    border-top
    border-right
    border-bottom
    border-left
  • margin
指定元素四个方向的外边距
取值可以是长度、百分数、auto
百分数相对于容器宽度

使用margin:auto 水平居中

image-20220725193209626.png

margin collapse：当上下两个盒子模型拥有下边距和上边距的时候，两个盒子之间的外边距距离取其中最大的值。

（4）overflow

  • visible：超过盒子的内容会进行溢出显示
  • hidden：超过盒子的内容会进行隐藏
  • scroll：超过盒子的内容会进行滚动显示

（5）块级和行级

  • 块级（Block Level Box）
不和其他盒子并列放置
使用于所有的盒模型属性
  • 行级（Inline Level Box）
和其他行级盒子一起放在一行或者拆开成多行
盒模型中的width、height不适用

image-20220725194531010.png

（6）display

  • block：块级盒子
  • inline：行级盒子
  • inline-block：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
  • none：排版时完全被忽略

5、常规流（Normal Flow）

  • 根元素、浮动和绝对定位的元素会脱离常规流
  • 其他元素都在常规流之内（in-flow）
  • 常规流中的盒子，在某种排版上下文中参与布局

image-20220725194847426.png

（1）行级排版上下文

  • Inline Formatting Context (IFC)

  • 只包含行级盒子的容器会创建一个IFC

  • IFC内的排版规则

    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素

（2）块级排版上下文

  • Block Formatting Context (BFC)

  • 某些容器会创建一个BFC

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow值不是 visible 的块盒
    • display: flow-root

  • BFC内的排版规则

    • 盒子从上到下摆放
    • 垂直margin合并
    • BFC内盒子的margin不会与外面的合并
    • BFC 不会和浮动元素重叠

6、Flex Box

（1）Flex Box是什么？

  • 一种新的排版上下文

  • 它可以控制子级盒子的：

    • 摆放的流向（上下左右）
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行
<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>
<style>
  .container {
    display: flex;
    border: 2px solid #966;
  }

  .a, .b, .c {
    text-align: center;
    padding: 1em;
  }

  .a {
    background: #fcc;
  }

  .b {
    background: #cfc;
  }

  .c {
    background: #ccf;
  }
</style>

image-20220725201737441.png

（2）justify-content

image-20220725201814807.png

（3）align-items

image-20220725201843316.png

（4）Flexibility

  • 可以设置子项的弹性:当容器有剩余空间时，会伸展;容器空间不够时，会收缩。
  • flex-grow有剩杀空间时的伸展能力
  • flex-shrink容器空间不足时收缩的能力
  • flex-basis没有伸展或收缩时的基础长度
<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

<style>
  .container {
    display: flex;
  }

  .a, .b, .c {
    width: 100px;
  }

  .a {
    flex-grow: 2;
  }

  .b {
    flex-grow: 1;
  }
</style>

image-20220725202021490.png

（5）flex的一些写法

image-20220725202148907.png

7、Grid布局

image-20220725202220017.png

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

（1）grid-template

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

image-20220725202421002.png

grid-template-columns: 30% 30% auto;
grid-template-rows: 100px auto

image-20220725202434800.png

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

image-20220725202448540.png

（2）grid area

.a {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 3;
}
或
.a {
  grid-area: 1/1/3/3;
}

image-20220725202613464.png

.a {
  grid-area: 2/2/4/4;
}
.b {
  grid-area: 1/1/3/3;
}

image-20220725202647813.png

8、float浮动

有了Flex布局之后，很多浮动能实现的东西使用Flex布局都能很容易的实现。所以这里浮动不再讲解更多。

（1）position

  • static：默认值，非定位元素
  • relative：相对自身原本位置偏移，不脱离文档流
  • absolute：绝对定位，相对非static祖先元素定位
  • fixed：相对于视口绝对定位

（2）position:relative

  • 在常规流里面布局
  • 相对于自己本应该在的位置进行偏稳
  • 使用top、left、bottom、right设置偏移长度
  • 流内其它元素当它没有偏移一样布局

（3）position:absolute

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

9、学习CSS的几点建议

  • 充分利用 MDN 和 W3C CSS规范
  • 保持好奇心，善用览器的开发者工具
  • 持续学习，CSS新特性还在不断出现
avatar
文章
阅读
粉丝