5_CSS三大特性盒子模型

news2024/11/27 13:35:08

第5章-盒子模型【比屋教育】

本课目标（Objective）

掌握CSS三大特性
理解什么是盒子模型
掌握内边距padding的用法
掌握外边距margin的用法

1. CSS的层叠，继承，优先级

1.1 CSS层叠

层叠：是指多个CSS样式叠加到同一个元素，遵循从上到下的原则，会应用最后加载的样式。
案例：1.样式的重叠性.html

1.2 CSS继承

继承：子元素会继承父元素的样式，继承的好处就是可以代码复用。
子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
案例：2.样式的继承性.html

1.3 CSS优先级（重点）

当出现多个规则应用在同一元素上时，选择器属性不同，就会出现优先级的问题。

1 权重计算公式

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

标签选择器	计算权重公式
继承的权重最低	0,0,0,0
标签选择器	0,0,0,1
类，伪类	0,0,1,0
唯一ID	0,1,0,0
行内联样式 style=""	1,0,0,0
!important	最高权重

!important用法：
div {
    color: red!important;
}

案例：3.样式的优先级.html

2 权重叠加

多个基础选择器组合时就会出现权重叠加的情况

案例：4.权重叠加.html

3. 继承的权重

继承的权重是最低的。
案例：5.继承的权重.html

2.网页如何布局

网页布局的本质：
- 首先用CSS设置好盒子(DIV)的大小，然后摆放盒子的位置。
- 最后把网页元素比如文字图片等等，放入盒子里面。

3. 什么是盒子模型

浏览器中的盒子模型（DIV）
案例：06-盒子边框设置1.html

盒子模型案例：

4. 盒子边框设置

语法：

border : border-width || border-style || border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

边框的样式：
- none：没有边框即忽略所有边框的宽度（默认值）
- solid：边框为单实线(最为常用的)
- dashed：边框为虚线
- dotted：边框为点线

4.1 边框综合设置

border-bottom: 2px solid yewllo;

4.2 盒子边框写法总结表

可以单独给4个边框分别指定的。
案例：07-盒子边框设置2.html

上边框	下边框	左边框	右边框
border-top-style:样式;	border-bottom-style:样式;	border-left-style:样式;	border-right-style:样式;
border-top-width:宽度;	border- bottom-width:宽度;	border-left-width:宽度;	border-right-width:宽度;
border-top-color:颜色;	border- bottom-color:颜色;	border-left-color:颜色;	border-right-color:颜色;
border-top:宽度样式颜色;	border-bottom:宽度样式颜色;	border-left:宽度样式颜色;	border-right:宽度样式颜色;

5. 内边距（padding）

4.1 内边距：

padding属性用于设置内边距。表示边框与内容之间的距离。
指定padding值之后
- 内容和边框有了距离，添加了内边距。
- 盒子会被撑大

4.2 内边距属性设置

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

简写表达方式：

值的个数	表达意思
1个值	padding：上下左右内边距;
2个值	padding: 上下内边距左右内边距；
3个值	padding：上内边距左右内边距下内边距；
4个值	padding: 上内边距右内边距下内边距左内边距；

案例：08.内边距设置.html

4.3 课堂案例：网页导航制作

案例：09.网页导航案例.html

4.4 盒子实际的大小计算

宽度：content width + padding + border
高度：content height + padding + border
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
案例：10.盒子实际大小计算方式.html

4.5 内边距为什么会撑开盒子

如果设置内边距就会撑大原来的盒子

一个盒子宽度为50， padding为 20，边框为15像素，问这个盒子实际的宽度的是（）

6. 外边距（margin）

6.1 外边距设置：

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

案例：11.外边距设置.html

6.2 盒子水平居中

可以让一个块级盒子实现水平居中必须：
- 盒子必须指定了宽度（width）
- 然后就给左右的外边距都设置为auto，
  - 常见的写法：
    - margin-left: auto; margin-right: auto;
    - margin: auto;
    - margin: 0 auto;

案例：12.盒子居中对齐.html

6.3 文字居中和盒子居中区别

盒子内的文字水平居中是 text-align: center, 而且还可以让行内元素和行内块居中对齐
块级盒子水平居中左右margin 改为 auto
案例：13.文字居中和盒子居中.html

text-align: center; /*  文字 行内元素 行内块元素水平居中 */
margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 就阔以了 上下margin都可以 */

6.4 插入图片和背景图片区别

插入图片的控制：只能靠盒模型 padding与margin来控制
背景图片的控制：只能通过 background-position来控制
案例：14.插入图片和背景图片的区别.html

6.6 清除元素的默认内外边距(重要)

为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除
案例：15.清除元素默认的内外边距.html

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

6.7 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现相邻块元素垂直外边距的合并。
- 当上下相邻的两个块元素相遇时，如果上面的元素有margin-bottom，下面的元素有margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。
- 会取两个值中的较大者：这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）
- 解决方案：尽量给只给一个盒子添加margin值
- 案例：16.外边距合并之上下外边距.html

嵌套块元素垂直外边距的合并（塌陷）
- 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并。合并后的外边距为两者中的较大者。
- 解决方案：
  - 可以为父元素定义上边框。
  - 可以为父元素定义上内边距
  - 可以为父元素添加overflow:hidden。
- 案例：17.嵌套关系外边距合并.html