【青训营】前端与HTML&理解CSS

友艺
166 阅读10分钟

前言：青训营第一日。原本只是当作复习罢了，没想到给我当头一棒。还有不少东西是之前自己学习的时候遗漏了的。还有，讨论区的都是大佬。Orz

授课老师：韩广军

HTML

定义 + DOM树 + 语法 + 标签 + 代码规范思想

定义

超文本标记语言：HyperText Markup Language

超文本：图片，链接，标题，表格

DOM树

一棵节点树中的所有节点彼此都是有关系的。 除文档节点(document对象)之外的每个节点都有父节点。节点间的关系可以用

graph TD
document --> html
html --> head
html --> body
head --> meta
head --> title
body --> h1
body --> p

HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如input、 meta
  • 属性值推荐用双引号包裹
  • 某些属性值可忽略，如required，readonly

标签讲解

  • 列表 list
    • ol-li
    • ul-li
    • dl-dt-dd（定义列表，键值对）
  • 链接 anchor
  • 输入 input
    • 快捷选项：list属性 以及 datalist标签。（这个确实不熟悉）
<input list = "countries" />
<datalist id="countries">
    <option>Greece<option>
    <option>United Kingdom<option>
    <option>United States<option>
</datalist>

  • 文本类标签

    • 引用块：blockquote
    • 预格式化文本：pre
    • 代码块：code

  • 页面划分的语义化标签：（最好只有一个main标签）

image.png

代码规范

HTML传达内容，不是样式。所以废弃了<center>标签这种纯样式的标签，新增那些语义化的标签。 比如下面的两个标签：

<input type = "button" /> 
<!--应改成-->
<button></button>

<div class = "header" ></div>
<!--应改成-->
<header></header>

问题： 谁在使用我们写的HTML？

  • 开发者：修改、维护页面
  • 浏览器：展示页面
  • 搜索引擎：提取关键词、排序
  • 屏幕阅读器：给盲人读页面内容（你现在是正常人，不代表你一直正常。）

So~ HTML的标签，属性不能随意写，需要符合一定的规范。

CSS

使用方法 + 工作流程 + 选择器 + 颜色体系 + 字体 + 特异度（优先级） + 初始值 + 求值过程 + 布局技术 + 边框 + 盒模型 + ...(韩老师讲得真的好多，好用心😍)

使用方法

  1. 外链link
<link rel="stylesheet" href="xxx.css">
  1. 嵌入style
<style>
    li{margin:0;list-style:none;}
</style>
  1. 内联
<p style="margin:1em 0">Example Content</p>

CSS的加载过程

graph TD
加载HTML --> 解析HTML
解析HTML --> 加载CSS
解析HTML --> 创建DOM树
加载CSS --> 解析CSS
解析CSS --> 创建DOM树
创建DOM树 --> 展示页面

选择器 Selector

通配符，标签，id，类，伪类，属性...

常见的都会得七七八八了，就属性选择器不会😥。

属性选择器

CSS 2 引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。

注意： IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>
<style>
/* 所有包含title属性的元素,*号可以去掉 */
*[title]{}

/* 既有href属性，又有title属性的a标签元素 */
a[href][title]{}

/* input类型为text */
input[type="text"]{}

/* 指定的属性包含某个值均适用  |=  ~= */
input[title~=en]{}
input[title|=en]{}

/* 还可以有
^= ：以xx开头就会被选中
$= : 以xx结尾就会被选中
*/
a[href^="#"]
$[href$=".jpg"]
</style>

搬砖：属性选择器 ~=, |=, ^=, $=, *= 的区别

菜鸟教程下的那一篇笔记很赞：www.runoob.com/css/css-att…

image.png

伪类选择器

  • 状态伪类：特定的状态下被选中

    • 链接：link，visited，hover，active

    • 输入框：active

  • 结构伪类：节点结构关系有关

    • first-child

    • last-child

组合方式

  • 直接组合：AB，满足A且B
  • 后代组合：A B ,选中B，如果它是A的子孙
  • 亲子组合：A>B ,选中B，如果它是A的子元素
  • 兄弟选择器：A~B ，选中B，如果它在A后面且同级
  • 相邻选择器：A+B，选中B，如果它紧跟在A后面

选择器组

将相同样式的选择器组在一起：其实就是逗号分隔啦...

h1,h2,h3,h4,h5{
    color:blue;
}

颜色体系

#十六进制数，RGB，HSL，不透明度

  • 不熟悉的HSL

    • 色相：Hue，范围0-360；
    • 饱和度：Saturation，范围0-100%；
    • 亮度：Lightness，范围0-100%。

适用范围：当鼠标移向按钮，仅仅需要按钮的亮度降低来实现悬浮效果，就不需要重新设置RGB了。

  • 简单粗暴的关键字

image.png

  • alpha透明度

1为不透明，0为完全透明。

几种书写形式：

  • #ff00006e
  • rgba(255,0,0,0.43)
  • hsla(0,100%,50%,0.43)

字体

  • 字体复合属性：斜体 粗细 大小/行高 字体族
    • font-size
    • font-weight
    • line-height
    • font-family

字体族 font-family

本地有字体就用，没有就用下一个指定的，但是最后还是要指定一个通用字体族，防止本地没有或者下载不到。

通用字体族：

  • 衬线体Serif：Georgia
  • 无衬线体Sans-Serif： Arial，Helvetica，黑体，微软雅黑
  • 手写体Cursive：Caflisch Script，楷体
  • Fantasy：Comic Sans MS，Papyrus
  • 等宽字体Monospace：Consolas，Courier，中文字体

MDN font-family 解析

字体使用建议：

  • 字体列表最后写上通用字体族；
  • 英文字体放在中文字体的前面；
  • 衬线体兜底，防止差异过大。
  • 字体名称带空格的要加引号。（这个应该算要求）

Web Font 远程字体，中文字体文件比较大，通常为几兆。

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

  • 对齐 text-align

    • left，right，center，justify(两端对齐)

  • 间距 spacing

    • letter-spacing：字符间距
    • word-spacing：单词间距

  • 缩进 text-indent

  • 装饰 text-decoration

    • none
    • underline： 下划线
    • line-through：中（像删除线）
    • overline：上划线

  • white-space 空白符 合并

    • normal：合并一个格子
    • nowrap：永不换行
    • pre：保留空格和行
    • pre-wrap：一行显示不下才自动换行
    • pre-line：合并空格，保留换行

选择器的特异度--优先级

字典序比较： !important > id > class > tag

样式属性 来源|冲突

覆盖：样式属性相同的，高并低，后并前

继承：样式属性可继承自父级元素的，某些属性会自动继承父元素的计算值。 （像rem这种相对值就不继承了。）

初始值：浏览器的默认初始值。

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

div{ background-color:initial;}

问题： initial，unset的区别？

  • initial 关键字用于设置 CSS 属性为它的默认值，可作用于任何 CSS 样式。（IE 不支持该关键字）

  • unset 关键字我们可以简单理解为不设置。其实，它是关键字 initial 和 inherit 的组合。

    • 如果该属性是默认继承属性，该值等同于 inherit
    • 如果该属性是非继承属性，该值等同于 initial

CSS的属性计算过程

image.png

  1. 声明值：通过选择器匹配，属性有效，符合当前的media等规则进行筛选（filtering），得到一个元素的声明值，这时候这个元素的某个属性可能有0到多个声明值，如：
p{font-size:16px;}
p.text{font-size:1.2em;}
  1. 层叠值：通过来源，选择器的特异性，书写顺序等选出优先级最高的层叠值。

（比如上面例子1.2em的font-size）

  1. 指定值：当层叠值为空的时候，这时候就使用继承值或者默认值,确保属性有值啦。

  2. 计算值：将一些相对值或者关键字转成绝对值，比如em转成px，相对路径变成绝对路径。（注意继承的就是这个。）

  3. 使用值：进行实际布局时使用的值，不会再有相对值或者关键字。比如400.2px。

  4. 实际值：小数转整数。

布局 Layout

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

布局技术

常规流（我还是比较喜欢叫标准流），浮动，绝对定位

其中常规流包括 行级，块级，表格布局，FlexBox，Grid布局

盒模型

基础的盒模型属性：content，padding，border，margin

注意：padding和margin的百分数相对于容器宽度

边框 border

三种属性：border-width,border-style,border-color。

四个方向：border-top,border-right,border-bottom,border-left。

可以拼接属性，比如border-top-color。

边框原理图：并非四个矩形相连，而是截断的三角形。

image.png

神仙操作：利用border绘制 三角形（上三角，下三角...）。

思路：单独设置一条边框颜色（比如border-top），隐藏内容（content的宽高为0），隐藏其他边框颜色（但是也要等宽）。

举个例子：上面画个绿色倒三角，下面画个红色三角形。

HTML代码如下：

<div class="triangle1"></div>
<div class="triangle2"></div>

CSS代码如下：

.triangle1{
    width: 0;
    height: 0;
    border-top: 50px solid green;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;        
}
.triangle2{
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent; 
}

效果如下：

image.png

CSS3 盒大小 box-sizing

box-sizing：content-box,border-box,inherit

什么时候使用border-box？设置宽100%，就可以不用额外考虑边框的大小撑开盒子了。

overflow 溢出

visible,hidden,scroll,auto

块级BFC和行级IFC

BFC: Block Formatting Context
IFC：Inline Formatting Context

  1. IFC布局规则：在行内格式化上下文中，boxes一个接一个地水平排列，起点是包含块的顶部。

    • 水平方向上的margin border padding在框之间得到保留
    • 在垂直方向上可以以不同的方式对齐：顶部或底部对齐，或者根据文字的基线对齐

  2. BFC布局规则：

    • 内部的Box会在垂直方向，一个接一个地放置
    • Box垂直方向上的距离由margin决定，同属一个BFC的两个相邻Box的margin会发生重叠
    • 每个元素的左外边缘(margin-left)，与包含块的左边(contain box left)相接触(对于从左到右的格式化)。即使存在浮动也是如此，除非这个元素自己形成一个新的BFC
    • BFC的区域不会与float box重叠
    • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
    • 计算BFC的高度时，浮动元素也参与计算

图片和文字的基线对齐 vertical-align

对于图片而言，默认最下边对齐。

vertical-align:baseline;
vertical-align:middle;
vertical-align:top;

Flex Box

一种新的排版上下文

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

    • 摆放的流向(← → ↑ ↓)
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否允许折行

  • 摆放的流向 flex-direction

    • 横向：row,row-reverse
    • 纵向：column,column-reverse

  • 内容的调整 justify-content

    • 左侧开始：flex-start
    • 右侧开始：flex-end
    • 居中：center
    • 两端对齐：space-between
    • 两窄中宽：space-around
    • 均等划分：space-evenly

直接放上韩老师的可视化例子啦：

image.png

  • 元素间的对齐 align-items

image.png

  • 单个元素自己的对齐：align-self（内部设置）

image.png

  • 元素顺序: Order 。给每一个指定不同的order，那么就会按照从小到大的order来进行布局：

Flexibility

设置子项的弹性，剩余空间就伸展，空间不足就压缩。

  • flex-grow：值越大，能伸展的能力越强。
  • flex-shrink：收缩的能力，当值为0时表示不收缩。
  • flex-basis:没有伸展或收缩的基础长度。

Grid布局

步骤：

  1. 通过display:grid使得元素生成一个块级的Grid容器；
  2. 再利用grid-template相关属性将容器划分为网格；
  3. 设置每一个子项占据哪些行或者列。

内容深奥，去看文档更加细致：MDN Grid

CSS建议

  • 充分利用 MDN 和 W3C HTML&CSS 规范。
  • 保持好奇心，善用览器的开发者工具。
  • 持续学习，CSS 新特性还在不断出现。
答疑&讨论（神仙打架，大开眼界）

  • tailwind 工具

  • 优雅降级和渐进增强

  • 伪类（hover，link，focus）和伪元素（before，after，first-letter）

  • 组件化CSS ： CSS-in-JS

  • CSS单位的区别： rem,em,px,vh,rpx,vw ...

  • less和Sass

  • CSS书写顺序：

    1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
    2. 自身属性：width / height / margin / padding / border / background
    3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
    4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
avatar
文章
阅读
粉丝