优先级：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器的样式
优先级公式：!imporant>行内样式>id选择器>类选择器>标签选择器>通配符选择器>继承>浏览器默认样式（选中范围越广，优先级越低）
!imporant不要给继承的加，自己有样式，无法继承父级样式 权重叠加计算（0（行内），0（id），0（类），0（标签）） /* (行内, id, 类, 标签) */ /* !important 最高 */ /* 继承: 最低 */ 盒子模型：（1）内容的宽度和高度（利用width和height 属性默认设置是盒子内容区域的大小）【属性：width/height 取值: 数字+px】 （2）边框（border-连写形式(复合属性) 如：border: 1px solid red）(bd+tab)（只要一个方向的边框border-方位词） 布局顺序：从外往内，从上往下 每个盒子的样式：（1）宽高 （2）辅助的背景颜色 （3）盒子模型的部分：border、padding、margin（4）其他样式：color、font、text-...... （3）内边距（padding）设置 边框 与 内容区域 之间的距离（内边距（padding）-单方向设置 padding -方位名词） 取值 示例 含义 一个值 padding: 10px; 上右下左都设置为10px 两个值 padding: 10px 20px; 上下设置为10px，左右设置为20px 三个值 padding: 10px 20px 30px; 上设置为10px，左右设置为20px，下设置为30px 四个值 padding: 10px 20px 30px 40px; 上设置为10px，右设置为20px，下设置为30px，左设置为40px /* 内减模式 */ /* 变成css3的盒子模型,好处:加了border和padding不需要手动减法 */ box-sizing: border-box; （4）外边距（margin）设置边框以外，盒子与盒子之间的距离（外边距（margin）-单方向设置 margin -方位名词） 取值 示例 含义 一个值 margin: 10px; 上右下左都设置为10px 两个值 margin: 10px 20px; 上下设置为10px，左右设置为20px 三个值 margin: 10px 20px 30px; 上设置为10px，左右设置为20px，下设置为30px 四个值 margin: 10px 20px 30px 40px; 上设置为10px，右设置为20px，下设置为30px，左设置为40px 记忆规则：多值写法:永远都是从上开始顺时针转一圈,如果数不够,看对面 清除默认内外边距 * { margin: 0; padding: 0; } /* 去掉列表的符号 */ ul { list-style: none; } <!-- 布局顺序:从外到内先宽高背景色,放内容,调节内容的位置,控制文字细节 --> 外边距折叠现象——（1）合并现象：垂直布局的块级元素，上下margin会合并（最终两者距离为margin最大值）解决办法：避免就好，只给一个盒子设置margin即可 （2）塌陷现象：互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素一起向下移动 解决方法： 1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top） 2. 给父元素设置overflow：hidden 3. 转换成行内块元素 4. 设置浮动 <!-- 行内元素 内外边距：margin padding --> <!-- 如果想要通过margin和padding改变行内标签的垂直位置，无法生效 --> <!-- 行内标签的margin-top和bottom不生效 --> <!-- 行内标签的padding-top和bottom不生效 --> 如果需要给垂直方向加边距 可以使用line-height 标签：padding,No.5,设置,10px,20px,margin,30px From： https://www.cnblogs.com/renzlllj/p/17151699.html