CSS的三大特性
一：继承性
二：层叠性前两个特性见CSS进阶
三：优先级
基本信息：
eg：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>优先级</title><style>div {color: cornsilk;}.q {color: blue;}#w {color: chartreuse;}</style></head><body><div class="q" id="w">优先级展示</div><div class="q">优先级展示</div></body></html>效果图：
**tip：**越精准 的选择器优先级越高，不用刻意去记很多。
权重叠加计算
基本信息：
**tip：**这个其实就是一个方便自己看一堆选择器里面谁生效，知道就好。
Chrome调试工具（查错代码）
基本信息： css上一行出错会导致下一行不生效。
使用方法：在谷歌浏览器中右键相应内容。
光标在符号后面时距离距离远的是中文标点，紧贴者的是英文标点。
如果检查时右边都没css的代码，大概率是选择器出错了。
Pxcook工具
基本信息：
一般形式用设计
psd格式则用开发
可以看图片大小，提取颜色等功能。
盒子模型
> 一：盒子模型的介绍
基本信息：
eg：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基本盒子</title><style>div {width: 300px;height: 300px;background-color: chartreuse;/* border边界线 */border: 20px solid #e60c0c;/* padding内边界,内容与盒子边界的距离 */padding: 30px;/* margin外边界,盒子外空白区域 */margin: 30px;}</style></head><body><div>基本盒子构造1</div><div>基本盒子构造2</div></body></html>效果图 ：
> 二：盒子宽高内容
基本信息：
> 三：盒子的边框(border)
基本信息：
控制某个方向的边框
单个属性：
eg：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子边框</title><style>div {width: 333px;height: 300px;background-color: rgb(113, 113, 178);border-right: 3px dashed red;border-top: 4px dashed red;}</style></head><body><div>盒子边框</div></body></html>效果图：
tip:边框，内边距和外间距都是额外距离，与盒子大小无关会在盒子的基础上增大。
> 四：盒子内边距（paddig）
基本信息：
eg：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子内边距</title><style>div {width: 300px;height: 300px;background-color: aqua;padding: 30px 20px 12px 22px;}</style></head><body><div>盒子内边距</div></body></html>效果的解析图：
> 五：CSS盒子（自动内减）
基础信息：
eg：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>固定盒子大小</title><style>div {width: 300px;height: 300px;background-color: aqua;border: 10px dashed red;padding: 30px;box-sizing:border-box;}</style></head><body><div>固定盒子大小</div></body></html>效果图：
**tip:**相当于就加一行代码（box-sizing：border-box）就可以固定住盒子的大小，也称为CSS的内减模式。
> 六：盒子的外边界（margin）
基本信息：
参考和盒子的内边距。（除了标签名字不一样其他都一样。）
eg：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子的外边距</title><style>div {width: 300px;height: 200px;background-color: aqua;margin-top: 30px;}</style></head><body><div>盒子的外边距</div></body></html>效果图：
> 七：清除默认内外边距
基础信息：
eg：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除默认内外边距</title><style>* {padding: 0;margin: 0;}</style></head><body><p>这是一个p标签</p><h1>这是一个h1标签</h1></body></html>效果图：
> 八：版心居中
基本信息：
在确定好盒子的宽高大小时，一般内容是放在网页中间加一个margin：0 auto；即可自动居中！
eg：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子版心居中</title><style>div {width: 1000px;height: 600px;background-color: beige;margin: 0 auto;}</style></head><body><div>盒子版心居中</div></body></html>效果图：
> 九：外边界重叠问题
基本信息：
eg：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子的间距问题</title><style>div {width: 300px;height: 300px;background-color: aqua;}.ww {margin-bottom: 30px;}.www{margin-top: 50px;}</style></head><body><div class="ww">盒子的间距问题-1</div><div class="www">盒子的间距问题-2</div></body></html>效果图：
> 十：外边界塌陷问题
基本信息：
eg：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>边距塌陷问题</title><style>.da {width: 300px;height: 200px;background-color: rgb(175, 124, 48);overflow: hidden;}.xiao {width: 100px;height: 100px;background-color: rgb(158, 22, 22);margin-top: 50px;}</style></head><body><div class="da"><div class="xiao">son</div></div></body></html效果图：
**tip：**目前记住给父级用overflow：hidden最简单就可以。
十一：行内元素的内外边距的问题
基本信息：
 Personality Test Online)
