No.1.5

优先级：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器的样式

优先级公式：!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. 设置浮动

如果需要给垂直方向加边距可以使用line-height

巴特西

No.1.5

最新文章

热门文章