理解 CSS | 青训营笔记

jqpycs
89 阅读13分钟

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

一、本堂课重点内容:

  1. CSS 代码构成
  2. CSS 使用方法
  3. CSS 流程之选择器组、文本渲染
  4. 调试 CSS
  5. CSS 选择器的特异度
  6. CSS 继承
  7. CSS 求值过程解析
  8. CSS 布局方式及相关技术
  9. CSS 盒模型 - 行级
  10. CSS 盒模型 - 块级

二、详细知识点介绍:

2.1 CSS 代码构成

2.1. 首先理解什么是CSS？

CSS是层叠样表

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

CSS语法由一个 选择器 (selector), 选择 (selects)  了我们将要用来添加样式的 HTML 元素。

接着输入一对大括号{ }。在大括号内部定义一个或多个形式为 属性 (property):值 (value);  的 声明 (declarations) 。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。

冒号之前是属性，冒号之后是值。不同的 CSS 属性 (properties) 对应不同的合法值。在这个例子中，我们指定了 color 属性，它可以接受许多颜色值还有 font-size 属性，它可以接收许多 size units 值。

image.png

2.1.2 CSS如何工作？

image.png

2.2 CSS 使用方法

在页面中有三种方法使用CSS，分为外链、嵌入、内联。 代码如下展示

<！--外链-->
<link rel="stylesheet" href="style.css"
<！--嵌入-->
<style>
   h1 {
      color: orange;
      font-size: 24px;
    }
    p {
      color: gray;
      font-size: 14px;
      line-height: 1.8;
    }
 </style>
 <！--内联-->
  <p style="color: gray;">在写干货之前，我想先探讨两个问题，
  模式的局限性？模式有什么用？</p>

2.3 CSS 流程之选择器组、文本渲染

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

2.3.1 通配选择器

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
* {
  color: red;
  font-size: 20px;
}
</style>

2.3.2 标签选择器

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
h1 {
  color: orange;
}
p {
  color: gray;
  font-size: 20px;
}
</style>

2.3.3 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>

2.3.4 类选择器

<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>

2.3.5 属性选择器

<label>用户名：</label>
<input value="zhao" disabled />

<label>密码：</label>
<input value="123456" type="password" />

<style>
  [disabled] {
    background: #eee;
    color: #999;
  }
</style>

image.png

属性的特定的值

<p>
  <label>密码：</label>
  <input type="password" value="123456" />
</p>

<style>
  input[type="password"] {
    border-color: red;
    color: red;
  }
</style>

image.png

匹配特定的值

  • ^表示匹配以什么开头的。
  • $表示匹配以什么结尾的。
<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
  a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
 
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }
</style>

2.3.6 伪类

伪类是选择器的一种，它用于选择处于特定状态的元素。
伪类就是开头为冒号的关键字：

:pseudo-class-name

a:link

定义正常链接的样式；

a:visited

定义已访问过链接的样式；

a:hover

定义鼠标悬浮在链接上时的样式；

a:active

定义鼠标点击链接时的样式；

<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>

其中 :first-child代表一组兄弟元素中的第一个元素，:last-child代表一组兄弟元素中的最后元素

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li>
</ol>

<style>
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

image.png

2.3.7 组合

image.png

直接组合

<label>
  用户名：
  <input class="error" value="aa">
</label>
<span class="error">
  最少3个字符
</span>

<style>
  .error {
    color: red;
  }
  
  input.error {
    border-color: red;
  }
</style>

后代组合、亲子组合、相邻组合

<article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <section>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
    <p>高于这个高度，气候非常寒冷...</p>
  </section>
</article>

<style>
  article p {
    color: black;
  }

  article > p {
    color: blue;
  }

  h2 + p {
    color: red; 
  }
</style>

选择器组

image.png

2.3.8 颜色

  1. RGB

image.png

  1. HSL

image.png

在线示例

3.alpha透明度 在线实例

2.3.9 字体

<h1>卡尔斯巴德洞窟（Carlsbad Caverns）</h1>
<p>卡尔斯巴德洞窟（Carlsbad Caverns）是美国的
一座国家公园，位于新墨西哥州东南部。游客可以通过天
然入口徒步进入，也可以通过电梯直接到达230米的洞穴
深处。</p>

<style>
  h1 {
    font-family: Optima, Georgia, serif;
  }
  body {
    font-family: Helvetica, sans-serif;
  }
</style>

2.3.9.1 通用字体族

  • Serif 衬线体

    • Georgia、宋体

  • Sans-Serif 无衬线体

    • Arial、Helvetica、黑体、微软雅黑

  • Cursive 手写体

    • Caflisch Script、楷体

  • Fantasy

    • Comic Sans MS, Papyrus, Zapfino

  • Monospace 等宽字体

    • Consolas、Courier、中文字体

2.3.9.2 使用Web Fonts

<style>
  @font-face {
    font-family: f1;
    src: url("//s2.ssl.qhimg.com/static/ff00cb8151eeecd2.woff2") format("woff2");
  }

  @font-face {
    font-family: f2;
    src: url("//s3.ssl.qhimg.com/static/a59a90c9e8f21898.woff2") format("woff2");
  }

  @font-face {
    font-family: f3;
    src: url("//s2.ssl.qhimg.com/static/58324737c4cb53a5.woff2") format("woff2");
  }

  h1 {
    font-size: 50px;
  }
</style>

<h1 style="font-family: f1, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f2, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f3, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>

2.3.9.3 font-family 使用建议

  • 字体列表最后写上通用字体族
  • 英文字体放在中文字体前面

2.3.9.4 font-size

  • 关键字
    • small、medium、large
  • 长度
    • px、em
  • 百分数
    • 相对于父元素字体大小
<section>
  <h2>A web font example</h2>
  <p class="note">Notes: Web fonts ...</p>
  <p>With this in mind, let's build...</p>
</section>

<style>
  section {
    font-size: 20px;
  }

  section h1 {
    font-size: 2em;
  }

  section .note {
    font-size: 80%;
    color: orange;
  }
</style>

2.3.9.5 font-style

字体样式

<p class="normal">Normal Text</p>
<p class="italic">Italic Text</p>

<style>
 p {
   font-size: 36px;
   font-family: "Helvetica Neue", sans-serif;
 }

 .normal {
   font-style: normal;
 }

 .italic {
   font-style: italic
 }
</style>

image.png

2.3.9.6 font-weight

<ul>
  <li class="w1">锦瑟无端五十弦（100）</li>
  <li class="w2">锦瑟无端五十弦（200）</li>
  <li class="w3">锦瑟无端五十弦（300）</li>
  <li class="w4">锦瑟无端五十弦（400-normal）</li>
  <li class="w5">锦瑟无端五十弦（500）</li>
  <li class="w6">锦瑟无端五十弦（600）</li>
  <li class="w7">锦瑟无端五十弦（700-bold）</li>
  <li class="w8">锦瑟无端五十弦（800）</li>
  <li class="w9">锦瑟无端五十弦（900）</li>
</ul>

<style>
  .w1 { font-weight: 100 }
  .w2 { font-weight: 200 }
  .w3 { font-weight: 300 }
  .w4 { font-weight: 400 }
  .w5 { font-weight: 500 }
  .w6 { font-weight: 600 }
  .w7 { font-weight: 700 }
  .w8 { font-weight: 800 }
  .w9 { font-weight: 900 }
</style>

image.png

2.3.9.7 line-height

<section>
  <h1>Font families recap</h1>
  <p>As we looked at in fundamental text and font styling, the fonts applied to your HTML can be controlled using the font-family property. This takes one or more font family names. </p>
</section>

<style>
  h1 {
    font-size: 30px;
    line-height: 45px;
  }

  p {
    font-size: 20px;
    line-height: 1.6;
  }
</style>

image.png

2.3.9.8 text-align(文本对齐方式)

语法：

  • start 实验性

  • 如果内容方向是左至右，则等于left，反之则为right。

  • end 实验性

  • 如果内容方向是左至右，则等于right，反之则为left。

  • left

  • 行内内容向左侧边对齐。

  • right

  • 行内内容向右侧边对齐。

  • center

  • 行内内容居中。

  • <string> 实验性

  • 第一个出现的该（单字符）字符串被用来对齐。跟随的关键字定义对齐的方向。例如，可用于让数字值根据小数点对齐。

  • justify

  • 文字向两侧对齐，对最后一行无效。

  • justify-all 实验性

  • 和 justify 一致，但是强制使最后一行两端对齐。

  • match-parent

  • 和inherit类似，区别在于start和end的值根据父元素的direction确定，并被替换为恰当的left或right。

2.3.9.10 spcing

CSS 的 letter-spacing 属性用于设置文本字符的间距表现。在渲染文本时添加到字符之间的自然间距中。letter-spacing 的正值会导致字符分布得更远，而 letter-spacing 的负值会使字符更接近。

word-spacing 设置标签、单词之间的空格长度。

2.3.9.11 text-indent

text-indent 属性能定义一个块元素首行文本内容之前的缩进量。

2.3.9.12 text-decoration

text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线 或 闪烁）

  • underline (下划线)
  • line-through (删除线)
  • overline(上划线)

2.3.9.13 white-space 

white-space CSS 属性是用来设置如何处理元素中的空白

语法：

/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

/* Global values */
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;

值

  • normal

    连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充行框盒子 (line boxes)时是必要。

  • nowrap

    和 normal 一样，连续的空白符会被合并。但文本内的换行无效。

  • pre

    连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。

  • pre-wrap

    连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充行框盒子 (line boxes时才会换行。

  • pre-line

    连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充行框盒子 (line boxes时会换行。

break-spaces 与 pre-wrap的行为相同，除了：

  • 任何保留的空白序列总是占用空间，包括在行尾。
  • 每个保留的空格字符后都存在换行机会，包括空格字符之间。
  • 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。

2.4 调试 CSS

  • 右键点击页面，选择「检查」
  • 使用快捷键
  • ctrl+Shift+工( windows )
  • Cmd+Opt+I(Mac)

2.5 CSS 选择器的特异度

image.png

2.6 CSS 继承

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

<p>This is a <em>test</em> of <strong>inherit</strong></p>

<style>
  body {
    font-size: 20px;
  }
  p {
    color: blue;
  }
  em {
    color: red;
  }
</style>

image.png

2.6.1 显示继承

image.png

2.6.2 初始值

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

2.7 CSS 求值过程解析

image.png

image.png

2.8 CSS 布局方式及相关技术

2.8.1 布局是什么？

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

2.8.2 布局相关技术

image.png

2.8.3 盒子模型

image.png

width

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

height

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

image.png

padding

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

border

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

  • 三种属性

    • border-width
    • border-style
    • border-color·

  • 四个方向

    • border-top
    • boder-right
    • border-bottom
    • border-left

margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度
  • 使用margin:auto可以实现水平居中

overflow

overflow 是 CSS的简写属性，其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。

  • visible

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

  • hidden

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

  • clip

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

  • scroll

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

  • auto

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

box-sizing

box-sizing 属性可以被用来调整这些表现：

  • content-box 是默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
  • border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高
<p class="a">
  This is the behavior of width and height as specified by CSS2.1. The
  specified width and height (and respective min/max properties) apply to
  the width and height respectively of the content box of the element.
</p>
<p class="b">
  Length and percentages values for width and height (and respective min/max
  properties) on this element determine the border box of the element.
</p>

<style>
  html {
    font-size: 24px;
  }

  .a {
    width: 100%;
    padding: 1em;
    border: 3px solid #ccc;
  }

  .b {
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
    border: 3px solid #ccc;
  }
</style>

image.png

2.9 CSS 盒模型 - 块级和行级

  • Block Level Box

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

  • Inline Level Box

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

  • 块级元素

    • 生成块级盒子
    • body、article、div、main、section、h1-6、p、ul、li等
    • display: block

  • 行级元素

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

display属性

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

2.10 常规流Normal Flow

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

image.png

2.10.1 行级排版上下文

  • Inline Formatting Context (IFC)
  • 只包含行级盒子的容器会创建一个IFC
  • IFC内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐避开浮动(float)元素*

2.10.2 块级排版上下文

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

2.10.3 BFC内的排版规则

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

2.10.4 Flex Box是什么?

  • 一种新的排版上下文
  • 它可以控制子级盒子的:
    • 摆放的流向(→←↑↓)摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐·
    • 是否允许折行

flex-direction

image.png

主轴与侧轴

image.png

justify-content

image.png

align-items

image.png

align-self

image.png

order

image.png

Flexibility

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

flex-grow

<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.png

flex-shrink

<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: 400px;
  }

  .a {
    flex-shrink: 0;
  }
</style>

image.png

flex简写

image.png

2.10.5 Gird布局

image.png

display:grid

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

划分网格

image.png

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

image.png

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

image.png

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

image.png

网格区域

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

image.png

简写


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

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

image.png

2.10.6 float 浮动

  • left：停止任何活动的左浮动
  • right：停止任何活动的右浮动
  • both：停止任何活动的左右浮动
<section>
  <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/907079a1286b4d0ca551a64f3b1e063f~tplv-k3u1fbpfcp-zoom-1.image" width="300" alt="mojave" />
  <p>莫哈韦沙漠不仅纬度较高，而且温度要稍微低些，是命名该公园的短叶丝兰——约书亚树的特殊栖息地。约书亚树以从茂密的森林到远远间隔的实例等各种形式出现。除了约书亚树森林之外，该公园的西部包括加州沙漠里发现的最有趣的地质外观。
  </p>
</section>

<style>
  img {
    float: left;
  }

  p {
    font-size: 20px;
    line-height: 1.8;
  }
</style>

image.png

2.10.7 position属性

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

position relative

image.png

position absolute

image.png

三、实践练习例子：

  • flex实现水平居中对齐

代码

<template>
    <div id="app">
        <div class="box">
            <div class="children-box"></div>
        </div>
    </div>
</template>
<style type="text/css">
.box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
}
.children-box {
    background: yellow;
    height: 100px;
    width: 100px;
}
</style>

四、课后个人总结：

  • 在这堂课学会了怎么使用flex、grid、position布局，还有一些不足就是有一些属性没有用过。

五、引用参考：

avatar
文章
阅读
粉丝