古典风格网站源码seo教程搜索引擎优化

1 选择器

1.1 结构伪类选择器

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

 例如：

:nth-child(公式)

1.2 伪元素选择器

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

例如：

 例子

2 PxCook

PxCook（像素大厨）是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。
开发面板（自动智能识别）
设计面板 （手动测量尺寸和颜色

3 盒子模型

3.1 盒子模型的重要组成部分

例子：

3.2 盒子模型 - 边框线

属性值：边框线粗细 线条样式 颜色（不区分顺序）

四条边框线样式不一样

3.3 盒子模型 - 内边距

内边距 - 多值写法

记忆方法：从上开始顺时针转一圈，如果当前方向没有数值，取值跟对面一样

3.4 盒子模型 - 尺寸计算

 例子：

3.5 盒子模型 - 外边距

和内边距规则一样

3.5.1 版心居中

3.5.2 外边距问题 - 合并与塌陷

 合并现象

塌陷问题

例子：

解决：

例如：

3.6 清除默认样式

例子：

3.7 盒子模型 - 元素溢出

例子：

3.8 行内元素 - 内外边距问题

行内元素的垂直距离，要靠行高改变

3.9 盒子模型 - 圆角

常用圆角盒子

   3.10 盒子模型 - 阴影（拓展）

例子：

参考链接：

54-结构伪类选择器_哔哩哔哩_bilibili
55-伪元素选择器_哔哩哔哩_bilibili
56-PxCook用法_哔哩哔哩_bilibili
57-盒子模型-组成_哔哩哔哩_bilibili
58-盒子模型-边框线_哔哩哔哩_bilibili
59-盒子模型-内边距_哔哩哔哩_bilibili
60-盒子模型-尺寸计算_哔哩哔哩_bilibili
61-版心居中_哔哩哔哩_bilibili
62-清除默认样式_哔哩哔哩_bilibili
63-内容溢出overflow属性_哔哩哔哩_bilibili
64-外边距问题-合并和塌陷_哔哩哔哩_bilibili
65-行内元素垂直内外边距_哔哩哔哩_bilibili
66-圆角与盒子阴影_哔哩哔哩_bilibili