Superman_H的博客

# 标签的 CSS 样式我们先来了解一下浏览器处理文件的标准流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。1. 浏览器载入 HTML 文件（比如从网络上获取）。2. 将 HTML 文件转化成一个 DOM，DOM 是文件在计算机内存中的表现形式。3. 接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。4. 浏览器拉取到 CSS 之后会进行解析，根据选

# margin 的使用margin 用于设置元素的外边距。margin 是一个简写属性，包括以下 4 个子属性：- margin-top：上外边距。- margin-right：右外边距。- margin-bottom：下外边距。- margin-left：左外边距。margin 可以设置 1 ~ 4 个属性值：1. 一个属性值：一起设置上下左右。2. 两个属性值：分别设置上下、左右。3. 三个属性值：分别设置上、左右、下。4. 四个

# 盒模型box-sizing 用于定义盒模型的计算方式。有以下 2 种取值：1. content-box：默认值。元素的宽度和高度只包含了内容。如果给元素设置了 padding 和 border，那么它们会被加到元素的实际宽高上，导致元素的实际尺寸比设定的尺寸要大。2. border-box：元素的宽度和高度包含了内容、padding 和 border。如果给元素设置了 padding 和 border，那么它们会从元素的内容区域中减去，使得元素的实际尺寸与设定的尺寸相同。

# 大小单位- 大小单位：`px`。- 字体相对单位：`em`、`rem`；根据 [font-size] 进行计算。- 视窗相对单位：`vm`、`vh`、`vmax`、`vmin`；根据 [视窗大小] 进行计算。## em、rem- `em`：相对于元素本身的 `font-size` 值。如果元素本身没有设置 `font-size`，会继承父元素的 `font-size`。- `rem`：相对于根元素（`html` 元素）的 `font-size` 值。

# 行内样式- 在标签元素里面编写 style 属性，属性值为 CSS 代码。```html```# 内联样式- 在 head 标签中创建 style 标签，在 style 标签里面编写 CSS 代码。- CSS 代码的注释：`/* 注释内容 */````html

# 基本选择器1. 元素选择器（Element Selector）：使用 HTML 元素的标签名作为选择器，选取匹配的元素。 eg：`p { }` 选取所有 `` 元素。2. 类选择器（Class Selector）：使用类名选择元素，以 `.` 开头。 eg：`.highlight { }` 选取所有具有 `highlight` 类名的元素。3. ID 选择器（ID Selector）：使用元素的唯一标识符 ID 选择元素，以 `#` 开头。 eg：`#myEleme

# float 的使用float 用于指定元素应沿其容器的左侧或右侧放置。1. 开启浮后，元素会变成行内块元素，即 `display: inline-block`。2. float 不会解析标签元素之间的空格。```html123``````cssdiv { float: left; /* 开启浮动 */ width: 100px; height: 100px;

display:none、opacity:0、visibility:hidden [结构]、[继承]、[性能] 的比较

# 过渡(被动)动画 transition## transition-property:- 指定应用过渡属性的名称： `all`：所有属性都表现出过渡动画（默认） `none`：没有过渡动画- 可设置多个属性的名称，名称之间用逗号隔开## transition-duration:- 以 s / ms 为单位指定过渡动画所需的时间- 默认值为 `0s`，表示不出现过渡动画- 可以指定多个时长，每个时长会被应用到由 `transition-property`

CSS3 transfrom:1. transfrom的特点2. transfrom的属性值2.1 平移 translate2.2 旋转 rotate2.3 缩放 scale2.4 倾斜 skew3. transform-origin:3.1 属性值4. transfrom的复合写法1. transfrom的特点不会脱离文档流，即不会影响页面的布局可以优化动画的性能2. transfrom的属性值用于改变元素的形态2.1 平移 translatetranslate(x, y)

用于设置主轴的方向：改变主轴的方向后，交叉轴的方向也会变。用于设置排列的方式：复合写法：主轴的方向 & 排列的方式：用于设置项目沿着主轴的排列方式：用于设置项目沿着侧轴的排列方式 (单行 item 时使用)：用于设置项目沿着侧轴的排列方式 (多行 item 时使用)：设置了 后（换行后），需要使用 设置项目在侧轴上的排列用于分配容器剩余的空间：条件：项目的总 / < 父级 / ，即有剩余空间的情况下使用属性值 n 的取值范围为 ，表示当前项目瓜分的空间为其他项目瓜分的空间的 n 倍默认为 - 不

# 网格布局 ( grid 布局 )1. 网格容器：网格容器是所有网格项的父元素；eg: 下例中类名为 container 的 div 就是网格容器2. 网格项：网格项是网格容器的子元素；eg: 下例中类名为 item 的 div 就是网格项```html.container { display: grid;} 网格项 1