CSS布局——三大特性+盒子模型

最新推荐文章于 2023-04-04 20:14:14 发布

小奋斗♛

最新推荐文章于 2023-04-04 20:14:14 发布

阅读量129

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_72684019/article/details/126095744

版权

1、CSS的三大特性

继承性——“子承父业”

【继承失效的情况：继承的优先级, 没有浏览器的默认样式高】

层叠性——多个选择器可以同时作用于同一个标签, 效果叠加

【注意点：

（1）给同一个标签设置不同的样式, 样式会叠加

（2）给同一个标签设置相同的样式, 写在最后的会生效(优先级一样)

（3）当样式发生冲突的时候, 看优先级, 优先级高的显示, 如果优先级一样, 参见上一条】

优先级——通过权重来判断优先级不同的选择器拥有不同的权重

1.1 优先级介绍

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

优先级公式：

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

注意点：

!important写在属性值的后面，分号的前面！
!important不能提升继承的优先级，只要是继承优先级最低！
实际开发中不建议使用 !important 。

1.2 权重叠加计算

注意：

每一级之间不存在进位
如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
important如果不是继承，则权重最高，天下第一！

2、盒子模型

CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型

2.1 内容的宽度（width）和高度（height）

注意：常见取值：数字+px

2.2 边框（border）

作用：给设置边框粗细、边框样式、边框颜色效果
属性名：border
属性值：单个取值的连写，取值之间以空格隔开
（如：border : 10px solid red;）
快捷键：bd + tab
单个属性：

2.2.1 边框（border）- 单方向设置

场景：只给盒子的某个方向单独设置边框
属性名：border - 方位名词
属性值：连写的取值如：border-top：10px dashed yellow；

2.2.2 盒子实际大小初级计算公式

盒子宽度 = 左边框 + 内容宽度 + 右边框
盒子高度 = 上边框 + 内容高度 + 下边框

2.3 内边距（padding）

作用：设置边框与内容区域之间的距离

属性名：padding

常见取值：

2.3.1 内边距（padding）- 单方向设置

场景：只给盒子的某个方向单独设置边框
属性名：padding - 方位名词
属性值：数字 + px 如：padding-top：10px；

小属性	含义
padding-top	上 padding
padding-right	右 padding
padding-bottom	下 padding
padding-left	左 padding

2.3.2 盒子实际大小初级计算公式

盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

2.4 CSS3盒模型（自动内减）

解决方法 ① ：手动内减

操作：自己计算多余大小，手动在内容中减去
缺点：项目中计算量太大，很麻烦

解决方法 ② ：自动内减

操作：给盒子设置属性 box-sizing : border-box ; 即可
优点：浏览器会自动计算多余大小，自动在内容中减去

不会撑大盒子的特殊情况：

如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子

2.5 外边距（margin）

作用：设置边框以外，盒子与盒子之间的距离
属性名：margin
常见取值：

2.5.1 外边距（margin）- 单方向设置

场景：只给盒子的某个方向单独设置外边距
属性名：margin - 方位名词
属性值：数字 + px 如：margin-top：10px；

2.6 清除默认内外边距

场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置

比如：body标签默认有margin：8px
比如：p标签默认有上下的margin
比如：ul标签默认由上下的margin和padding-left

解决方法：

* {
    margin: 0;
    padding: 0;
}

2.7 外边距折叠现象

2.7.1 合并现象

场景：垂直布局的块级元素，上下的margin会合并
结果：最终两者距离为margin的最大值
解决方法：只给其中一个盒子设置margin即可

2.7.2 塌陷现象

场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上
结果：导致父元素一起往下移动
解决方法：

给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
给父元素设置overflow：hidden
转换成行内块元素
设置浮动

2.8 行内元素的margin和padding无效情况

场景：给行内元素设置margin和padding时

结果：
1. 水平方向的margin和padding布局中有效！
2. 垂直方向的margin和padding布局中无效！

3、设置鼠标的形状

元素:hover {
cursor: pointer;
}