前端基础-css盒子模型

Posted 2021-09-08 咖啡壶子

一.css特性

层叠性

1. 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
2. 样式不冲突，不会层叠

继承性

1. 子标签会继承父标签的某些样式
2. 恰当地使用继承可以简化代码，降低 CSS 样式的复杂性
3. 子元素可以继承父元素的样式（text-，font-，color属性，line-height属性，可以继承）
4. 行高的继承

优先级（重点）

1. 选择器相同，则执行层叠性

2. 选择器不同，则根据选择器权重执行

3. 权重图
   权重比较：!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承
   继承的权重是0

二.盒子模型

引言

页面布局要学习三大核心：盒子模型, 浮动 和 定位

盒子模型的组成

1. border边框
   border-width，border-style， border-color
   ①简写:border: 1px solid red
   ② 表格的细线边框（了解）:border-collapse:collapse;
   ③边框会影响盒子实际大小边框会额外增加盒子的实际大小
   ④不会撑开盒子大小的特例:子盒子不写width属性

padding内边距

边框与内容之间的距离

简写记得口诀： 上 右 下 左
padding影响了盒子实际大小。

外边距 margin

1. 盒子和盒子之间的距离

2. 块级盒子水平居中：
   ① 盒子必须指定了宽度（width）。
   ② 盒子左右的外边距都设置为 auto

3. 行内元素和行内块元素居中对齐:text-align:center

4. 外边距合并
   分类
   ① 相邻块元素垂直外边距的合并
   ② 嵌套块元素垂直外边距的塌陷

清除内外边距

* {
 padding:0; /* 清除内边距 */
 margin:0; /* 清除外边距 */
 }

行内元素为了照顾兼容性，尽量只设置左右内外边距