这是我参与【第五届青训营】笔记创作活动的第二天

2023.01.16

CSS

用来定义页面元素的样式（设置字体和颜色、设置位置和大小、添加动画效果）

h1{
    color: white;
    font-size: 14px;
}

在页面中使用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是如何工作的

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

布局

• 常规流

  • 行级：和其它行级盒子一起放在一行或拆开成多行，盒模型中的width、height不适用
  • 块级：不和其它的盒子并列摆放，适用于所有的盒模型属性
  • 表格布局
  • FlexBox：可以控制子级盒子的：摆放的流向；摆放顺序；盒子宽度和高度；水平和垂直方向的对齐；是否允许折行。
  • Grid布局：使用grid-template相关属性将容器划分为网格；设置每一个子项占哪些行/列

• 浮动float

• 绝对定位position：

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