[走进前端技术栈 - CSS | 青训营笔记02]

mingdu明渡
83 阅读7分钟

背景

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

  • 上回讲了前端的页面是由 JavaScript、CSS、HTML 去组成的，HTML 是展示盒子内容的超文本标记语言，这回我就来讲一下什么是CSS

CSS 是什么?

  • CSS 全称 Cascading Style Sheets
  • 用来定义页面元素的样式
    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果

CSS 的代码组成

h1 {
 color: white;
 font-szie: 14px;
}
  1. 选择器 （用于选中选择器）
  2. 大括号 (用于包裹 CSS 代码块,划定界限)
  3. 选择器属性 (指定某个属性)
  4. 选择器值 (设置某个值)

在页面使用 CSS

<!-- 外链 -->
<link rel="stylesheet" href=" /assets/style.css">

<!-- 嵌入 -->
<style>
  li { margin: 0; list-style: none; }
  p { margin: lem 0; }
</style>

<!-- 内联 -->
<p style="margin:lem 0">Example Content</p>

可以看到有三种使用方式，其中内联的权重最高，接着到嵌入和外链。

CSS 是如何工作的

微信截图_20230116154201.png

观察上图发现：
浏览器是先加载HTML,然后进行解析HTMl、加载CSS，HTML去创建DOM树，CSS去创建 CSS树，接着把CSS的样式节点挂载到DOM 树上，从而展示页面

选择器 Selector

  • 找出页面中的元素，以便给他们设置样式
  • 使用多种方式选择元素
    • 按照标签名、类名或 id
    • 按照属性
    • 按照DOM 树中的位置

详细选择器请查询 MDN 官网

介绍常见的选择器

  • 通配选择器
<h1>This is heading</h1>
<p>thisis some paragraph.</p>

<style>
* {
  color: red;font-size: 20px;
 } 
</style>
  • 标签选择器
<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
h1 {
color: orange;
color: gray;font-size: 20px;
</style>
  • id 选择器
h1 id=" logo">
<img
src="https://assets.codepen.io/59477/h5-logo,svg" alt="HTML5 logo" width="48” />
    HTML5文档
<h1>
<style>
#logo {
    font-size: 60px;
    font-weight: 200;
}
</style>

微信截图_20230116160225.png

  • 类选择器
<h2>Todo List</h2>
<ul>
    <li class="done">Learn HTML</li>
    <li class="done">Learn CSS</li><li>Learn JavaScript</li>
</ul>

<style>
.done {
    color: gray;
    text-decoration: line-through;
}
</style>
  • 属性选择器
<label>用户名: </label><input value="zhao" disabled />
<label>密码: </label><input value="123456" type="password" />
<style>
[disabled] {
    background: #eee;color: #999;
}
</style>

微信截图_20230116160416.png

  • 伪类(pseudo-classes)
    • 不基于标签和属性定位元素
    • 几种伪类
      • 状态伪类
      • 结构性伪类
<a href="http://example.com">
  example.com
</a>

<label>
  用户名：
  <input type="text">
</label>

<style>
a:link {
  color: black;
}

a:visited {
  color: gray;
}

a:hover {
  color: orange;
}

a:active {
  color: red;
}

:focus {
  outline: 2px solid orange;
}
</style>

伪类选择器的组成就是通过：加特定的具有含义的单词
详细各类的伪类选择器的展示效果，还需你自己去实践才能知其所以然

调试 CSS

  • 右键点击页面，选择[检查]
  • 使用快捷键
    • Ctrl+Shift+I (Windows)
    • Cmd+Opt+I (Mac)

常见CSS 特点

CSS 属性继承

  • 某些属性会自动继承其父元素的计算值，除非显式指定一个值
<p>This is a<em>test</em>
of <strong>inherit</strong></p>
<style>
body {
font-size: 20px;
color: blue;
em {
color: red;
</style>

Snipaste_2023-01-16_16-23-51.png

显式继承

* {
    box-sizing: inherit;
}
html (
    box-sizing: border-box;
}
.some-widget {
    box-sizing: content-box;
}

你可以设置inherit 值让选择器 继承

初始值

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

CSS 求值过程

微信截图_20230116163457.png 微信截图_20230116163605.png

观察上图你会发现CSS的求值过程是非常复杂的

布局 (Layout) 是什么?

微信截图_20230116163949.png

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

简单来理解就是，排列方式

常用布局的相关技术

微信截图_20230116164221.png

你会发现还是蛮多的，不过使用最多的还是FlexBox 绝对定位用的比较多

盒模型

微信截图_20230116164505.png

width

  • 指定content box 宽度
  • 取值为长度、百分数、auto 由浏览器根据其它属性确定
  • 百分数相对于容器的 content box 宽度

height

  • 指定 content box 高度
  • 取值为长度、百分数、auto
  • auto 取值由内容计算得来
  • 百分数相对于容器的 content box 高度
  • 容器有指定的高度时，百分数才生效

padding

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度

border

  • 指定容器边框样式、粗细和颜色

margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度

overflow

  • visible
  • hidden
  • scroll

小总结：
对于宽度高度还是内边距等需要值运算，基本上都

  1. 取值 （大部分都有px/%/auto）
  2. 都会相对容器（父级）来进行计算 对于margin,border,padding有方向的
  3. 对于方向的值的书写方式
  4. 书写方式的不同对应不用的结果运算，技巧是：上、右、下、左

块级 vs. 行级

Block Level Box

  • 不和其它盒子并列摆放
  • 适用所有的盒模型属性

Inline Level Box

  • 和其它行级盒子一起放在一行或拆开成多行
  • 盒模型中的width、height不适用

块级元素 生成块级盒子
标签：body、article、div、mainsection、h1-6、p、ul、li等

样式写法：display: block

行级元素

  • 生成行级盒子
  • 内容分散在多个行盒(line box) 中
    标签：span、em、strong、cite、code 等

样式写法：display: inline

display 属性

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

行级排版上下文

  • Inline Formatting Context (IFC)
  • 只包含行级盒子的容器会创建一个IFC
  • IFC 内的排版规则
    • 盒子在一行内水平摆放一行放不下时，换行显示
    • text-align 决定一行内盒子的水平对齐
    • vertical-align 决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素
<div>
This is a paragraph of text with long wordHonorificabilitudinitatibus. Here is an image
<img src="https://assets.codepen.io/59477/cat.png" alt="cat">And <em>Inline Block</em>
</div>
<style>
div {
width: 10em;
//overflow-wrap: break-word;
background: #411;
em (
display: inline-block;
width: 3em;
background: #33c;
</style>

微信截图_20230116175132.png

块级排版上下文

  • Block Formatting Context (BFC)
  • 某些容器会创建一个BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow 值不是 visible 的块盒
    • display: flow-root

BFC 内的排版规则

  • 盒子从上到下摆放
  • 垂直 margin 合并
  • BFC 内盒子的 margin 不会与外面的合并
  • BFC 不会和浮动元素重叠
<span>
This is a text and
<div>block</div>
and other text.
</span>
<style>
span {
line-height:3;border: 2px solid red;background: coral;
div {
line-height: 1.5;
background: lime;
</style>

微信截图_20230116180640.png

  1. 行内元素包裹块级元素时，会在css 引擎里面创造匿名的块级元素，肉眼是看不到的
  2. 颜色不是连续的，因为被div块级元素给切开了
  3. border 同样的道理

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;
background: #fcc;

微信截图_20230116181843.png

主轴与侧轴 微信截图_20230116181941.png Snipaste_2023-01-16_18-24-29.png

可以看到
justify-content 是让盒子主轴去对齐
aligin-items是让盒子副轴去对齐

Flexibility

  • 可以设置子项的弹性: 当容器有剩余空间时，会伸展;容器空间不够时，会收缩。
  • flex-grow 有剩余空间时的伸展能力
  • flex-shrink 容器空间不足时收缩的能力
  • flex-basis 没有伸展或收缩时的基础长度

类似于设置弹簧的拉伸性

flex 语法的一些缩写

微信截图_20230116182931.png

小总结：
flex 布局是经常用到的语法，掌握justify-content去定义主轴和aligin-items去定义副轴
非常的好用,写的代码也比较少，实现的效果很饱满

Grid 布局

微信截图_20230116183042.png

display: grid

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

划分网格

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

grid line 网格线

微信截图_20230116200316.png

position 属性

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

position: absolute

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

学习 CSS 的几点建议

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

总结：
CSS 就是对元素样式的调整，通过掌握 CSS 语法，搭配HTML,你就可以呈现很有设计艺术的页面，当然这其中还是得花费一点你的现象和心机的

avatar
文章
阅读
粉丝