CSS基础 ｜ 青训营笔记

wsl00
110 阅读7分钟

课程笔记——css

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

CSS是什么

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

基础代码

例如以下代码：

h1 {
      color : white ; 
      font-size : 14px ;
 }
  • 其中第一行选择器Selector，表明你选择的元素，比如选择器为h1，说明我们要给页面中所有的h1标签定义样式。
  • 括号内的为选择器Property和属性值Value，一个选择器加属性值组成一条声明Declaration；多条声明用分号隔开，这个大括号内的为一个声明块
  • 一个选择器+大括号称为一条规则

在页面中使用css

外链：把css定义放在一个单独的文件里，用link标签把它引入到页面中（推荐使用这种）

嵌入：直接把代码嵌入到html标签中

内联：对于标签的属性直接写到style里面

CSS是如何工作的

选择器

各种不同的选择器可以放在一起

Selector

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

通配选择器：用*进行选择

id选择器： 给一个属性设置了id，就可以通过 #id 的形式去选中元素，id值需要唯一

类选择器： 给同一类型的标签设置类型，可以用class选择器

属性选择器： 只要这个元素有这个属性，就会被选中

伪类：

  • 状态伪类：定义不同状态下的样式
  • 结构伪类：根据DOM节点在DOM树中出现的位置选中

组合

微信图片_20230116234817.png

选择器组

颜色

RGB：rgb(红,黄,蓝)；#

HSL：hsl(h,s,l)

  • Hue：色相
  • Saturation：饱和度
  • Lightness：亮度 透明度：alpha 0-1，越接近1，越不透明，直接放在rgb或者hsl后面就可以

字体 font-family

  1. 可以指定多个字体，设备从前到后使用，如果没有第一个，则使用第二个，以此类推，浏览器自动选择一个有的字体
  2. 通用字体组：加一个通用字体组，可以防止你添加的多有字体该浏览器都没有时无法展示内容的情况
  3. 中英文混排建议英文写在前面，因为一般中文字体都能展示英文字符，中文写在前面很容易使所有的字体都按中文展示
  4. 使用web font，在页面中先下载了字体文件再使用
  5. font-size:
  6. font-weight：字重，需要字体本身支持这些字重才行
  7. line-height：行高，
  8. white-space:

调试CSS

  • 右键点击页面，选择【检查】
  • 使用快捷键 ctrl+shift+i（windows） cmd+opt+i（mac）

生效规则

配置了多条规则那一条会生效呢？按照特异度，即越特殊的规则会越先生效

继承

  • 某些属性会自动继承其父元素的计算值，除非显式指定一个值 eg：其中strong值会继承父元素p的计算值；em显性指定了其他值
<p>This is a <em>test</em> of <strong>inherit</strong></p>

<style>
  body {
    font-size: 20px;
  }
  p {
    color: blue;
  }
  em {
    color: red;
  }
</style>
  • 有些属性不可继承，可以用inherit进行显式继承 eg：box-sizing是一个不可继承的属性，通过*——通配选择器inherit，意思就是说所有元素的box-sizing都从父级继承
* {
box-sizing: inherit;
}
html{
box-sizing: border-box;
}
.some-widget{
box-sizing: content-box;
}

初始值

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

  • background-color 的初始值为 transparent；margin-left 的初始值为 0。
  • 可以使用 initial关键字显式重置为初始值（background-color:initial）

求值过程

微信图片_20230116234931.png

微信图片_20230116234936.png

微信图片_20230116234942.png

盒模型

1、width

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

2、height

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

3、padding

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

4、border

  • 指定容器边框样式、粗细和颜色
  • 三种属性和四个方向
  • 可以给一个元素的四个边框设置不同的颜色和粗细

5、margin

  • 指定元素四个方向的外边距
  • 取值可以是长度、百分数、auto
  • 百分数相对于容器宽度
  • margin:auto：左边距和右边距都是auton的时候——水平居中
  • margin collapse：margin在垂直边距上会取两者中的较大值，而不是将两者相加

6、content-box和border-box

  • content-box：宽和高算的是content的宽高，若没有特殊说明使用的就是hicontent-box
  • border-box：宽和高指定的是包含border和padding在内的宽高

7、overflow
当文字超出了box容器范围可以用overflow去控制移除的部分：

  • visible：直接展示出来
  • hidden：直接隐藏
  • scroll：滚动
  • auto：超出了就有滚动条，没超出就正常展示

布局是什么

  • 确定内容的大小和位置的算法
  • 依据元素、容器、兄弟节点和内容等信息来计算
  • 三种比较大的布局方式

常规流（ Normal Flow）

包括行级、块级、表格定位。

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

行级vs.块级

块级盒子（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: inline

ps： display 属性：

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

行级排版上下文

Inline Formatting Context (IFC)

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

块级排版上下文

Block Formatting Context (BFC)

  • 某些容器会创建一个BFC
    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow 不是 visible 的块盒
    • display: flow-root;
  • 排版规则：
    • 盒子从上到下摆放
    • 垂直 margin 合并
    • BFC 内盒子的 margin 不会与外面的含并
    • BFC 不会和浮动元素重叠

Flex Box

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

  • 主轴和侧轴

微信图片_20230117235328.png

微信图片_20230117235401.png

微信图片_20230117235438.png

2、Flexibility

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

3、Grid布局

说明：Flex Box是单一的布局方式；Grid是二维的

display:grid 是元素生成一个块级的Grid容器，使用grid-template 相关属性将容器划分为网格，最后将元素排列到这些格子里，一个元素可以占多个格子

浮动(float)

可以做图文混排的文字环绕的效果

绝对定位（position）

相当于给元素创建了一个新的流，这个新的流就脱离常规流按照其自己的规则去排布

  • static：默认值，非定位元素
  • relative：相对自身原本位置偏移，不脱离文档流
    • 在常规流里面布局
    • 相对于自己本应该在的位置进行偏移
    • 使用 top、left、bottom、right 设置偏移长度
    • 流内其它元素当它没有偏移一样布局
  • absolute：绝对定位，相对非 static 祖先元素定位
    • 脱离常规流
    • 相对于最近的非 static 祖先定位
    • 不会对流内元素布局造成影响
  • fixed：相对于视口绝对定位
avatar
文章
阅读
粉丝