10 posts tagged with "CSS"

下定决心还是再学一遍CSS等前端知识

1. 认识Flex布局和Flex布局的由来​

1.1 认识Flex box​

• Flexbox翻译为弹性盒子
  • 弹性盒子是一种用于按行或者按列布局元素的一维布局方法
  • 元素可以膨胀以填充额外的空间，收缩以适应更小的空间
  • 通畅我们使用Flexbox来进行布局的方案称之为flex布局（flex layout）
• flex布局是目前web开发中使用最多的布局方案
  • flex布局（Flexible布局，弹性布局）
  • 目前特别在移动端可以说已经完全普及
  • 在PC端也几乎已经完全普及和使用，只有非常少数的网站依然在用浮动来布局
• 为什么需要flex布局
  • 长久以来，CSS布局中唯一可靠且跨浏览器兼容的布局工具只有floats和positioning
  • 但是这两种方法本身存在很大的局限性，使用他们是无奈之举

1.2 原先布局存在的痛点​

• 举例
  • 比如在父内容里面垂直居中一个块内容
    • "44 years ago we put a man on the moon, but we still can't vertically center things in CSS." -- by Juozas Kaziukenas, 2013-07-21
  • 使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用
  • 使多列布局中的所有列采用相同的高度，即使他们包含的内容量不同

1.3 Flex布局的出现​

• 所以长久以来，大家非常期待一种真正可以用于对元素布局的方案：于是Flex布局出现了

  • "Nature and nature's laws lay hid in night; God said "Let Newton be" and was light." -- 牛顿的墓志铭

• 如果担心其兼容性问题

  • 可以在CanIuse查询具体的兼容性

2. 两个非常重要的概念​

• 开启了flex布局的元素叫 flex container
• flex container里面的直接子元素叫做 flex item

2.1 container​

• 设置display属性为flex或者inline-flex可以成为flex container
  • flex：flex container以block-level形式存在
  • inline-flex：flex container以inline-level形式存在

2.2 flex item​

• 当flex container中的子元素变成了flex item的时候，具备以下特点
  • flex item的布局将受flex container属性的设置来进行控制和布局
  • flex item不再严格区分块级元素和行内级元素
  • flex item默认情况下是包裹内容的，但是可以设置宽度和高度

3. Flex布局的模型，坐标轴，主轴和交叉轴​

• main axis
• cross axis

4. Flex相关的属性​

4.1 应用在flex container上的CSS属性​

4.1.1 flex-flow​

4.1.2 flex-direction​

• 决定main axis的方向
  • row 默认值
  • row-reverse
  • column
  • column-reverse

4.1.3 flex-wrap​

• nowrap: 默认，单行
• wrap: 多行
• wrap-reverse: 多行，对比wrap，cross start与 cross end相反

4.1.4 justify-content​

4.1.5 align-items​

4.1.6 align-content​

4.1.7 flex-flow​

• 是flex-direction和flex-wrap的简写属性
  • 顺序随便，并且都可以省略

4.1.8 justify-content​

• flex-start: 默认值，与main start 对其
• flex-end：与main end对其
• center 居中对其
• space-between:
  • flex items之间的距离相等
  • 与main start，main end两端对齐
• space-arount:
  • flex items之间的距离相等
  • flex items与main start，main end之间的距离是flex items之间距离的一半
• space-evenly:
  • flex items之间的距离相等
  • flex items与main start，main end之间的距离等于flex items之间距离

4.1.9 align-items​

• align-items 决定了flex items在cross axis上的对齐方式
  • normal: 在弹性布局中，效果和stretch一样
  • stretch：当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
  • flex-start: 与cross start对齐
  • flex-end：与cross end对齐
  • center: 居中对齐
  • baseline: 与基准线对齐

4.1.10 align-content​

• 决定了多行flex items在cross axis上的对齐方式，用法与justify-content类似
  • stretch 默认值：与align-items的stretch类似
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly

4.2 应用在flex items 上的CSS属性​

4.2.1 flex-grow​

• 决定了flex items如何扩展（拉伸/成长）
  • 默认值是0，可以设置任意非负数字，
  • 当flex container在main axis方向上有剩余 size时，flex-grow属性才会有效
• 如果所有 flex items的flex-grow总和sum超过1，每个flex item扩展的size为
  • flex container 的剩余size * flex-grow / sum
• flex items扩展后的最终size不能超过max-width/max-height

4.2.2 flex-basis​

• 用来设置flex items在main axis方向上的base size
  • auto 默认值
  • 具体的宽度数值
• 决定flex items最终base size的因素，优先级从高到低
  • max-width,max-height,min-width,min-height
  • flex-basis
  • width,height
  • 内容本身的size

4.2.3 flex-shrink​

4.2.4 order​

• order越小，越排在前面
• 可以设置任意整数，默认值是0

4.2.5 align-self​

• 覆盖flex container设置的align-items
  • auto

4.2.6 flex​

-flex是flex-grow,flex-shrink,flex-basis的简写，可以指定1个，2个或者3个值

• 单值语法：值必须为以下其中之一 -一个无单位：会被当作flex-grow

  • 一个有效的宽度值：会被当作flex-basis的值
  • 关键字none，auto或者initial -双值语法
  • 第一个值必须为一个无单位数，并且会被当作flex-grow的值
  • 第二个必须为以下之一：
    • 一个无单位数：会被当作flex-shrink的值
    • 一个有效的宽度值：会被当作flex-basis的值

• 三值语法

  • 第一个必须无单位: flex-grow
  • 第二个必须无单位: flex-shrink
  • 第三个必须为一个有效的宽度值：flex-basis

• 添加span的个数是列数减2

下定决心还是再学一遍CSS等前端知识

Day09

1. position定位​

• 将position设置为absolute,fixed
  • 可以随意设置宽高
  • 宽高默认由内容决定
  • 居中

下定决心还是再学一遍CSS等前端知识

Day08

1. border图形​

• border-right-color

• 旋转

  • transform: rotate(90deg);
  • transform-origin: center/25%; 旋转中心点

• https://css-tricks.com/the-shapes-of-css

2. Web网络字体​

• 之前通过font-family设置字体
  • 我们需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体
  • 这样的方式完全没有问题，但是对于传统的web开发人员来说，字体选择是有限的
  • 这就是所谓的web-safe字体
  • 并且这种默认可选的字体并不能进行一些定制化的需求

2.1 web fonts 的工作原理​

• 首先，需要通过一些渠道获取到希望使用的字体

  • 对于某些收费的字体，需要获取到对应的授权
  • 对于某些公司定制的字体，需要设计人员来设计
  • 对于某些免费的字体，需要获取到对应的字体文件

• 其次，在我们的CSS代码当中使用该字体（重要）

  • 具体看后面的操作流程

• 最后，在部署静态资源的时候，将HTML/CSS/JavaScript/Font一起部署在静态服务器中

• 用户的角度

  • 浏览一个网页的时候，因为代码中有引入字体文件，字体文件会被一起下载下来
  • 浏览器会根据使用的字体在下载的字体文件中查找，解析，使用对应的字体
  • 在浏览器中使用对应的字体显示内容

• 流媒体

  • 封装格式

  • 编码格式

3. Web字体图标​

4. CSS精灵图​

spritecow.com

5. cursor属性​

下定决心还是再学一遍CSS等前端知识

1. 结构伪类​

1.1 nth-child​

• 奇数
  • nth-child(2n+1)
• 偶数
  • nth-child(2n)
• 前几个
  • nth-child(-n+5)

1.2 nth-last-child​

• nth-last-child(1)
  • 倒数第一个
• nth-last-child(-n+2)
  • 最后2个

1.3 nth-of-type​

• 和nth-child类似，但是这个计数的时候只计算同种类的元素

1.4 nth-last-of-type​

1.5 其他​

• :first-child
• :last-child
• :first-of-type
• :last-of-type
• :only-child
• :only-of-type
• :root
• :empty
  • 里面完全空白的元素

1.6 否定伪类​

• :not(), 格式是:not(x)
  • x是简单选择器

下定决心还是再学一遍CSS等前端知识

1. 列表元素​

1.1 列表的实现方式​

• 方案一：使用div
• 方案二：使用列表元素，
• 事实上现在很多网站对于列表元素没有很强烈的偏好，更加不拘一格，按照自己的风格来布局
  • 原因是列表元素默认的CSS样式，让他用起来不是很方便
  • 比如列表元素往往有很多的限制，ul/ol中智能存放li，li再存放其他元素，默认样式等
  • 虽然我们可以通过重置来解决，但是我们更喜欢自由的div
• HTML提供了3组常用的展示列表的元素
  • 有序列表：ol, li
  • 无序列表：ul, li
  • 定义列表：dl, dt, dd

2. 表格元素​

• 在网页中，对于某些内容的展示使用表格元素更为合适和方便

• 常见元素

  • table
  • tr
  • td
  • 后增加的元素
    • thead
      • td->th
    • tbody
    • tfoot
    • caption

• 其他已经不推荐用了

  • table元素应该使用CSS制定样式
  • 设置margin-left, margin-right为auto，来实现类似于align属性的效果

• 案例

  • border-collapse
    • collapse折叠

• 单元格合并

  • 跨列合并：
    • colspan
    • 在最左边的单元格使用，并省略掉合并的td
  • 跨行合并
    • rowspan
    • 在最上面的单元格使用，并省略掉合并的td

• 案例：

  • 快捷写法：tr*12>td{数学}*6
  • 技巧
    • table tr:nth-child(-n + 2){} :n的取值，0和整数

3. 表单元素​

• 和用户交互的重要方式之一
• 常见的表单元素
  • form
    • 表单，一般情况下，其他表单相关的元素都是他的后代
  • input
    • 单行文本输入框，单选框，复选框，按钮
  • textarea
    • 多行文本框
  • select，option
    • 下拉选择框
  • button
    • 按钮
  • label
    • 表单元素的标题

3.1 input​

• input
  • 是一个行内替换元素
  • type
    • text
    • password
    • ratio
    • checkbox
    • button
    • reset
    • submit
    • file
    • readonly
    • disabled
    • checked
      • 默认选中，只有当type为ratio或checkbox的时候可以用
    • autofocus
    • name
    • value
    • time
    • date

3.1.1 布尔属性（boolean attributes)​

• 常见的有
  • disabled, checked, readonly, multiple, autofocus, selected
• 布尔属性可以没有属性值，写上属性名就代表使用这个属性

3.1.2 表单按钮​

• 按钮
  • button
  • reset
  • Submit

3.1.3 input和label的关系​

• label可以展示会input的标题
• label可以跟某个input绑定，点击某个label就可以激活对应的input变成选中

<label for="username">
    用户：
</label>
<input id="username" type="text"/>

<label for="username">
    用户：
    <input id="username" type="text"/>
</label>

3.1.4 ratio​

• 在类型为radio的input中，如果name一样，那么两个radio就会互斥

<label for="male">
    <input id="male" type="radio" name="sex" value="male">男
</label>

<label for="female">
    <input id="female" type="radio" name="sex" value="female">女
</label>

3.1.5 checkbox​

<label for="basketball">
    <input id="basketball" type="checkbox" name="hobby" value="basketball">篮球
</label>

<label for="football">
    <input id="football" type="checkbox" name="hobby" value="football">足球
</label>

3.2 form常见的属性​

4. Emmet语法​

4.1 认识Emmet语法​

• 前身为（Zen Coding) 是一个能大幅度提高前端开发效率的一个工具

  • vscode内置了Emmet语法，在后缀为.html/.css中输入缩写后按tab/Enter键即可自动生成相应的代码

• 举例

  • ! == html:5

• >（子代）和+兄弟

4.2 HTML Emmet​

4.3 CSS Emmet​

下定决心还是再学一遍CSS等前端知识

1. 盒子模型-margin​

1.1 margin 基本使用​

换行符会造成两个元素之间有间距

暂时可以通过去除（后面介绍通过浮动，flex布局去除）

body {
    font-size: 0; 
}

依次尝试：

• margin-top
• margin-bottom
• margin-right
• margin-left
• margin 全写，以及缩写属性

1.2. padding 和 margin对比​

• 大box包含小box，如果设置大box的padding，会让大box撑开
  • box-sizing: boder-box;
• 设置小box的margin
  • 好处：不用设置boder-box，
  • 坏处： 但是对于margin-top会让大box也往下跑
    • 因为做了一个传递，把margin传递给了父元素
    • 解决办法，在父元素设置: overflow: auto;,不是最好的方式，后面讲
• 补充
  • margin用来设置元素和元素之间的距离（一般是兄弟元素）
  • padding

1.3. margin上下传递问题​

• 左右不会传递

• margin-top传递

  • 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素

• margin-bottom传递

  • 如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素

• 如何防止出现传递问题？

  • 给父元素设置padding-top ，padding-bottom
  • 给父元素设置border
  • 触发BFC（Block Formatting Context）(块级格式上下文)：设置overflow为auto

• 建议：

  • margin一般用来设置兄弟元素之间的间距
  • padding一般用来设置父子元素之间的间距

1.4. 上下margin的折叠​

• 垂直方向上相邻2个margin(margin-top, margin-bottom)有可能合并为一个margin，这种现象叫做collapse（折叠）

• 水平方向上的margin(margin-left, margin-right)永远不会折叠

• 折叠后最终值的计算规则

  • 两个值比较，取较大的值

• 如何防止margin折叠

  • 只设置其中一个元素的margin

• 兄弟块级元素之间margin的折叠

• 父子块级元素之间margin的折叠

1.5. 块级元素的水平居中-margin-auto​

• 浏览器默认会给body设置margin: 8px
• 块级元素 block box
  • block box width = width + padding + border + margin
  • 但是默认margin-left是0
  • margin-right也是0
  • 但是浏览器优先展示width，然后再把剩余的空间设给right
• 如果希望居中，则把margin-left和margin-right都设置为auto
• 点评
  • 这种方式不太好，用flex布局则是更好
  • 比如float浮动也不应该用来做布局

2.盒子模型-外轮廓-outline​

• outline表示元素的外轮廓
  • 不占用空间
  • 默认显示在border的外面
• outline相关属性
  • outline-width
  • outline-style
  • outline-color
  • Outline: outline-width, outline-style, outline-color

3.盒子模型-阴影-box-shadow​

• box-shadow属性可以设置一个或者多个阴影

  • 每个阴影用shadow表示
  • 多个阴影之间用逗号隔开，从前到后叠加

• 常见格式

  • none | <shadow>#
  • <shadow> = inset? && <length>{2, 4} && <color>?
  • 第一个length: offset-x,水平方向的偏移，正数往向右
  • 第二个length: offset-y,水平方向的偏移，正数往向下
  • 第3个length：blur-radius, 模糊半径
  • 第4个length：spread-radius, 延伸半径
  • color: 阴影的颜色，如果没有设置，就跟随color属性的颜色
  • inset: 外框阴影变成内框阴影

• 坐标轴

• blur：阴影的模糊度

• 在线网站

  • https://html-css-js.com/css/generator/box-shadow/

4.盒子模型-文字阴影-text-shadow​

• 类似于box-shadow，用于给文字添加阴影
• 相当于box-shadow，但是没有spread-radius的值
• 没有向内
• https://html-css-js.com/css/generator/text-shadow/

5. 行内非替换元素的注意事项​

• span/a/strong/i
  • width,height不生效
  • padding, border, margin，上下可以撑大，但是不占空间

6. 盒子模型-盒子尺寸计算-box-sizing​

• 背景色有没有设置到border下面（有设置）
• 前景色会在border没有设置颜色的情况下，显示出来color颜色

.box {
    width: 100px;
    height: 100px;
    background-color: #f00;
    color: orange;
    padding: 30px;
    border: 10px solid;
}

• box-sizing用来设置盒子模型中宽高的行为
• content-box
  • padding, border都布置在width，height外边
• border-box
  • padding, border都布置在width，height里面

7. 案例​

• 灰色背景：#f5f5f5

• 单行显示省略号

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

下定决心还是再学一遍 CSS 等前端知识

1. background​

1.1 background-image​

• 用于设置元素的背景图片
  • 会盖在（不是覆盖）background-color 的上面
• 如果设置了多张图片
  • 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面
• 如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的

1.2 background-repeat​

1.3 background-size​

• auto: 默认值，以背景图本身大小显示
• cover：缩放背景图，以完全覆盖铺满元素，可能背景图片部分看不见
• contain：
• <percentage>
• Length

1.4 background-position​

• 用于设置背景图片在水平，垂直方向上的具体位置
  • 可以设置具体的数值，比如 20px 30px
  • 水平方向还可以设值：left, center, right
  • 垂直方向还可以设值: top, center, bottom
  • 如果只设置了一个方向，另一个方向默认是 center

1.5 background- attachment​

• 决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动
• 可以设置以下三个值
  • scroll：表示背景相对于元素本身固定，而不是随着它的内容滚动
  • local：表示背景相对于元素的内容固定，如果一个元素拥有滚动机制，背景将会随着元素的内容滚动
  • fixed

1.6 缩写属性​

1.7 background-image vs. img​

下定决心还是再学一遍CSS等前端知识

CSS选择器​

• 什么是CSS选择器

  • 按照一定的规则选出符合条件的元素，为之添加CSS样式

• 选择器的种类繁多

  • 通用选择器(universal selector)
  • 元素选择器(type selectors)
  • 类选择器(class selectors)
  • id选择器(id selectors)
  • 属性选择器(attribute selectors)
  • 组合(combinators)
  • 伪类(pseudo-classes)
  • 伪元素(psedo-elements)

通用选择器(universal selector)​

• 选择所有的元素

• 一般用来给所有元素设置一些通用性的设置

  • 比如内边距，外边距
  • 比如重置一些内容

• 效率比较低，尽量不要使用

• body 默认有一个margin 8px

* {
    font-size: 20px;
}

/*尽量不用通配符*/

body, p, div, h2, span {
    margin: 0;
    padding: 0;
}

简单选择器​

• 一个HTML文档里面的id值是唯一的，不能重复

  • id值如果由多个单词组成，单词之间可以用中划线，下划线连接，也可以使用驼峰标识
  • 最好不要用标签名作为id值

• 中华线又叫连字符（hyphen）

元素选择器(type selectors)， 使用元素的名称​

类选择器(class selectors)，.类名​

id选择器(id selectors)，#id​

属性选择器​

• 拥有某一个属性 [att]

• 属性等于某个值 [att=val]

• 其他了解下

  • [att*=val]: 属性值包含某一个值val
  • [att^=val]: 属性值以val开头
  • [att$=val]: 属性值以val结尾
  • [att|=val]: 属性值等于val或者以val开头后面紧跟连接符-
  • [att~=val]: 属性值包含val，如果有其他值，比如以空格和val分割

<div title="div"></div>

<h2 title="h2"></h2>

[title] {
    color: red;
}

[title=div] {
    background-color: red;
}

后代选择器(descendant combinator)​

• 后代选择器一：所有后代（直接和间接的后代）

  • 选择器之间以空格分割
    • .box span {xxx}

• 后代选择器二：直接子代选择器（必须是直接自带）

  • 选择器之间以 >分割

兄弟选择器(sibling combinator)​

• 相邻兄弟选择器
  • .box + .content {}
• 普遍兄弟选择器 ~
  • .box ~ div {}

选择器组​

交集选择器​

• 同时符合两个选择器条件，为了精准选择某一个元素

<div class="box"></div>
<p class="box"></p>

div.box {
    xxx
}

并集选择器​

• 符合一个选择器条件即可，两个选择器以,分割

body, h2, p, div {
    xxx
}

伪类​

认识伪类​

• Pseudo-classes，伪类

• 伪类是选择器的一种，用于选择处于特定状态的元素

• 常见的伪装

  • 动态伪类(dynamic pseudo-classes)
    • :link
    • :visited
    • :hover
    • :active
    • :focus
  • 目标伪类(target pseudo-classes)
    • :target
  • 语言伪类(language pseudo-classes)
    • :lang(en)
  • 元素状态伪类(UI element states pseudo-classes)
    • :enabled
    • :disabled
    • :checked
  • 结构伪类（structural pseudo-classes）
    • :nth
      • :nth-child()
      • :nth-last-child()
      • :nth-of-type()
      • :nth-last-of-type()
    • :first
      • :first-child()
      • :last-last-child()
      • :first-of-type()
      • :last-of-type()
    • 第三类
      • :root
      • :only-child
      • :only-of-type
      • :empty
  • 否定伪类(negation pseudo-classes) :not()

div:hover{

}

动态伪类(dynamic pseudo-classes)​

• :link

  • a:link 未访问的连接

• :visited

  • a:visited 已访问的连接

• :hover

  • a:hover 鼠标挪动到链接上

• :active

  • a:active 激活的连接(鼠标在链接上长按住未松开)

• :focus

  • 指当前拥有输入焦点的元素（能接收键盘输入）
  • 文本输入框一聚焦后，背景就会变成红色
  • 因为链接a元素可以被键盘的tab键选中聚焦，所以:focus也适用于a元素

• 使用注意

  • :hover必须放在:link和:visited后面才能完全生效
  • :active必须放在:hover后面才能完全生效
  • 所以建议的编写顺序是:link、:visited、:hover、:active

• 除了a元素，:hover、:active也可以用在其他元素上

• 动态伪类的编写顺序建议为：

  • :link、:visited、:focus、:hover、:active

• 直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了

伪元素(pseudo-elements)​

• 常见的伪元素有

  • :first-line, ::first-line
  • :first-letter, ::first-letter
  • :before, ::before
  • :after, ::after

• 为了区分伪类和伪元素，建议用两个冒号

• :first-line, ::first-line

  • 可以针对首行文本设置属性

下定决心还是再学一遍 CSS 等前端知识

大纲​

CSS 文本属性​

text-decoration​

• text-decoration(常用):用于设置文字的装饰线

  • none：无任何装饰线，可以去除 a 元素默认的下划线
  • underline: 下划线
  • overline: 上划线
  • line-through: 中划线

• 企业中常用的

  • css/reset.css 在里面设置, 在 html 通过 link 引入

a {
  text-decoration: none;
}

text-transform​

• text-transform(一般)
  • capitalize（每个单词的首字母大写）
  • uppercase 大写
  • lowercase 小写
  • none 没有任何影响

text-indent​

• text-indent(一般): 设置第一行内容的缩进
  • font-size: 40px; text-indent: 80px;
  • text-indent: 2em;

text-align​

• text-align(重要)
  • 直接翻译过来设置文本的对齐方式
  • MDN：定义行内内容（例如文字），如何想对它的块 父元素对其
  • 常用的值
    • left
    • right
    • center
    • justify： 两端对齐，基本很少用
      • 需要和text-align-last: justify一起配合用
  • W3C
    • This shorthand property sets the 'text-align-all' and 'text-align-last' properties and describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill

word/letter-spacing​

• word/letter-spacing
  • letter-spacing: 10px;
  • word-spacing: 10px;

CSS 字体的属性​

font-size​

• 常用设置
  • 具体数值 + 单位：默认为 16px（浏览器设置我们自己的大小就是 16px）
  • em
  • 百分比
    • 可以继承

font-family​

• 用于设置文字的字体名称 - 可以设置 1 个或者多个字体名称 - 浏览器会选择列表中第一个该计算机上有安装的字体 - 或者是通过 @font-face 指定的可以直接下载的字体 可以继承

font-weight(重要)​

• 用于设置文字的粗细(重量)
• 常见的取值
  • 100, 200, 300, 400, 500, 600, 700, 800, 900, 每一个数字表示一个重量
  • normal: 等于 400
  • bold: 等于 700
• strong, b, h1-h6 默认设置的就是 bold

font-style（一般）​

• 设置文字的常规，斜体显示

  • normal
  • italic：斜体，字体本身支持斜体时，显示的斜体
  • oblique：斜体，不管字体支持不支持斜体，都给字体做倾斜，看起来像斜体

• 早期 em, i, cite, address, var, dfn 等元素的 font-style 默认就是 italic

font-variant(了解)​

可以影响小写字母的显示形式，variant 是变形的意思

可以设置的值如下： - normal - small-caps 将小写字母替换为缩小过的大写字母 - My Name Is ->

line-height(常用)​

• 用于设置文本的行高

  • 可以先简单理解为一行文字所占据的高度

• 为什么文本需要行高

  • 方便文本的阅读和理解

• 严格定义

  • 两行文字(基线)之间的间距
  • 基线：与小写字母 x 对齐的线

• line-height - 文本的高度 = 行距
• 文本默认会在一行的中间显示

font​

• font 是一个缩写属性

  • font-style
  • font-size
  • font-weight
  • font-variant
  • font-family
  • line-height
  • font-style font-variant font-weight font-size/line-height font-family;

• 规则

  • font-style font-variant font-weight 可以随意调换顺序，也可以省略
  • /line-height 可以省略， 如果不省略，必须跟在 font-size 后面
    • 如果是数值，表示 2 倍或者 1.5 倍前面的行高
  • font-size, font-family 不可以调换顺序，不可以省略

font-size: 30px;
font-weight: 700;
font-variant: small-caps;
font-style: italic;
font-family: serif;
line-height: 30px;

font: italic small-caps 700 30px/30px serif;

CSS 选择器​

下定决心还是再学一遍 CSS 等前端知识

CSS​

• 三种引入方式

  • inline
  • <style></style>
  • 文件引入的方式：<link rel="stylesheet", href="./css/style.css">

• index.css, 把其他 CSS 文件放到这里

@import url(./style.css) @import url(./test.css); /* @import "./style.css"
   但是推荐上面的那一种，用括号的方式，意思是作为函数参数传入
*/

• CSS 的注释
  • /*CSS的注释*/

一个好问题：如果写多了注释，用户在下载文件的时候会不会太大，造成打开网页缓慢？

这个考虑是对的，但未来我们会用打包工具，比如 webpack，上传到服务器的代码会删除我们写的注释

常见的 CSS 元素​

必须掌握的 CSS 属性​

定位（Position）和布局（Layout）​

展示（display）和可见（visibility）​

盒子模型（box model）顺序​

背景设置（background）​

字体（Font），文本（text）​

其他属性（Other Property）​

CSS 属性的官方文档​

• 官方文档

  • https://w3.org/TR?tag=css

• CSS 推荐文档地址

  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

• 由于浏览器版本，CSS 版本的问题，查询某些 CSS 是否可用

  • 可以到 caniuse.com，查询 CSS 属性的可用性

案例练习​

/* 方式一：改变元素的特性和垂直方向的布局 */
display: inline-block;
vertical-align: top;

/* 方式二： 通过浮动完成 */
float: left;

额外知识补充 2​

link 元素​

• link 元素是外部资源链接元素，规范了文档与外部资源的关系

  • link 元素通常是在 head 元素中

• 最常用的链接是样式表（CSS）

  • 此外也可以被用来创建站点图标（比如"favicon"图标）

• link 元素常见的属性

  • href：此属性指定被链接资源的 URL。URL 可以是绝对的，也可以是相对的
  • ref：指定链接类型，常见的链接类型
    • icon：站点图标
    • stylesheet：CSS 样式

• 属性

  • dns-prefetch

• preload 预加载，在 webpack 会讲到

进制​

• 二进制：0b 开头
• 八进制：0o 开头
• 16 进制：0x 开头

CSS 里面颜色的表示方法​

• 颜色关键字

• RGB 颜色

  • RGB 是一种色彩空间，通过 R，G，B 三原色来组成不同的颜色
  • RGB 各个原色的取值范围是 0-255

• 当所有颜色都是 0 的时候，呈现黑色

  • 黑色是最纯洁的颜色

• RGB 的表示方法

  • 十六进制 （#RRGGBB[AA]）
  • 十六进制 （#RGB[A]）
  • 函数符 RGB(100, 100, 100)
  • RGBA(), A 表示透明度

Chrome 浏览器开发者工具​

• 打开

  • 右键->检查
  • 快捷键 F12

• 其他技巧

  • 快捷键：ctrl+ 可以调整页面或者工具的字体大小
  • 通过删除某些元素来查看网页结构
  • 通过增删 css 来调试网页样式

浏览器的渲染流程 HTML，CSS​

Dom Tree -> Render Tree(With CSS)