CSS详细解析二

05-显示模式

显示模式：标签（元素）的显示方式。

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容。

块级元素

特点：

• 独占一行

• 宽度默认是父级的100%

• 添加宽高属性生效

• 

行内元素

特点：

• 一行可以显示多个

• 设置宽高属性不生效

• 宽高尺寸由内容撑开

• 

行内块元素

特点：

• 一行可以显示多个

• 设置宽高属性生效

• 宽高尺寸也可以由内容撑开

• 

转换显示模式

属性：display

06-综合案例一-热词

HTML标签

HTML
CSS
JavaScript
Vue
React

CSS样式

07-综合案例二 – banner 效果

HTML标签

  
让创造产生价值
  
我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。
  我要报名

CSS样式

01-选择器

结构伪类选择器

基本使用

作用：根据元素的结构关系查找元素。

li:first-child {
  background-color: green;
}

:nth-child(公式)

提示：公式中的n取值从 0 开始。

伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容。

div::before {
  content: "before 伪元素";
}
div::after {
  content: "after 伪元素";
}

注意点：

• 必须设置 content: ””属性，用来 设置伪元素的内容，如果没有内容，则引号留空即可

• 伪元素默认是行内显示模式

• 权重和标签选择器相同

02-PxCook

PxCook（像素大厨） 是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。

• 开发面板（自动智能识别）

• 设计面板（手动测量尺寸和颜色）

使用方法：创建项目 → 输入 项目名称、项目类型 Web → 单击按钮【创建项目】 → 单击按钮【添加】，导入设计稿