CSS三大特性
- 层叠性
- 继承性
- - 行高的继承
- 优先级
- - 权重的叠加
盒子模型
- 网页布局的本质
- 盒子模型组成
- - 边框（border）
  - - 表格细线边框
    - 边框会影响盒子实际大小！
  - 内边距（padding）
  - - padding会影响盒子实际大小！
    - padding不会撑开盒子的情况？
  - 外边距
  - - 外边距典型应用：块级盒子水平居中
    - 外边距合并
    - - 1.相邻块元素垂直外边距的合并
      - 2.嵌套块元素垂直外边距的塌陷
    - 清除内外边距
- 圆角边框
- 盒子阴影
- 文字阴影

CSS三大特性

CSS有三个非常重要的特性：层叠性、继承性、优先性

层叠性

给相同选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题

层叠性原则：
样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突的部分不会层叠

继承性

子标签会继承父标签的某些样式，如文本样式和字号

可以继承的样式（text-,font-,line-这些开头的可以继承，以及color属性）
比如高度，盒子模型的内外边距是不会继承的

行高的继承

body { font: 12px/1.5 "Microsoft yahei"; }
div { font-size: 14px; }

这里继承的行高指的是当前元素文字大小的1.5倍，所有当前div的行高为21px，p的行高为18px

优先级

当同一个元素指定了多个选择器，就会有优先级的产生

选择器相同，则进行层叠性
选择器不同，则根据选择器权重执行

选择器	选择器权重
继承或者 *	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: pink;!important }

权重由4组数字组成，但是不会有进位（可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推）
等级判断从左向右，如果某一位数字相同，则判断下一位数值
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0，所以当子元素有自己的样式时，总是执行自己的样式
body样式中指定的样式，<a>标签不会继承body样式，因为浏览器为a链接默认设置了一个样式（蓝色的，有下划线）

权重的叠加

如果是复合选择器，则会有权重叠加，需要计算权重

div ul li ——> 0,0,0,3
.nav ul li ——> 0,0,1,2
a:hover ——> 0,0,1,1 （a有一个0,0,0,1）
.nav a ——> 0,0,1,1

盒子模型

网页布局的本质

网页布局过程：

准备相关网页元素，网页元素基本都是盒子Box
用CSS设置好盒子样式，然后摆放到相应位置
往盒子里装内容

盒子模型组成

所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个装内容的容器，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容

边框（border）

border设置元素的边框，边框有三部分组成：边框宽度边框样式边框颜色
语法：border: border-width || border-style || border-color

属性	作用	属性值
border-width	边框粗细	单位是px
border-style	边框样式	solid实线边框，dashed虚线边框，dotted点线边框
border-color	边框颜色	默认为黑色

边框简写：border: 5px solid pink; （没有顺序）
上下左右边框可以分开写（以上边框为例）：border-top: 5px solid pink;

表格细线边框

当对<table>标签设置边框属性时，也需要同时对<th>和<td>标签设置属性，因为table是一个大盒子，里面装一个个小的单元格；当两相邻单元格都有边框属性时，会产生1+1=2的效果（比如边框粗细加倍），为保持原边框粗细，需要设置border-collapse属性
border-collapse属性控制浏览器绘制表格边框的方式，控制相邻单元格的边框
语法：

border-collapse: collapse;

表示相邻边框合并在一起
collapse表示合并

边框会影响盒子实际大小！

边框会额外增加盒子的实际大小，在测量时有两种方案：

测量盒子大小时不量边框
如果测量时包含了边框，需要width/height减去边框宽度

内边距（padding）

padding属性用于设置内边距，即边框于内容之间的距离，包含：padding-top，padding-bottom，padding-left，padding-right

padding属性（简写）可以有一到四个值

值的个数	表法意思
padding: 5px;	1个值，表示上下左右内边距都是5px
padding: 5px 10px;	2个值，表示上下内边距时5px，左右内边距是10px
padding: 5px 10px 20px;	3个值，表示上内边距是5ox，左右内边距是10px，下内边距是20px
padding: 5px 10px 20px 30px;	4个值，表示上右下左的内边距分别为5，10，20，30px

padding会影响盒子实际大小！

如果盒子已经有了宽度和高度，再指定内边距，会撑大盒子
让width/height减去多出来的内边距大小即可

当需要相同边距，但不同盒子宽度时，可以利用该性质

padding不会撑开盒子的情况？

如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

外边距

margin属性用于设置外边距，即控制盒子和盒子之间的距离，包括margin-left，margin-right，margin-top，margin-bottom

margin简写方式与padding的方式一致

外边距典型应用：块级盒子水平居中

外边距可以让块级盒子水平居中，需要满足两个条件：

盒子必须指定了宽度
盒子左右的外边距都设置为auto，以下写法都可以

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto

这种方式对行内元素或行内块元素无效（这两种元素没有宽度）
行内元素或行内块元素水平居中：给起父元素添加text-align: center;（可以将行内元素或行内块元素看作普通文字元素）

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距合并问题（即1+1=1）

1.相邻块元素垂直外边距的合并

当上下相邻的两个块元素的下上外边距同时存在时，它们之间的垂直距离不是两外边距之和，而是取两个值中的较大值

解决方案：尽量只给一个盒子添加margin值

2.嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会跟着子元素的外边距向下移动，即父元素塌陷较大的外边距值

解决方案：

可以为父元素定义上边框 border: 1px solid transparent;
可以为父元素定义上内边距
可以为父元素添加 overflow: hidden;
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，比如谷歌浏览器中body默认有8px的外边距，因此在布局前，首先要清除网页元素的内外边距

 * {padding: 0;margin: 0;
}

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距
但转换为块级和行内块元素时就可以了

开始布局前，首先需 1.清除内外边距；2.统一字体样式；3.清除列表样式 list-style: none;

产品模块反思：

文字模块中因为每段文字可能占位不同，需要对整个文字段设置宽高，以保证每段文字内容都与下一模块对齐显示

盒子中的图片过大时，直接让图片继承父盒子的宽度 width:100%;

padding和margin的使用选择：当前盒子没有width/height时可用padding，因为不会撑开盒子；盒子与盒子之间的距离用margin

根据标签语言选择合理的标签

测量盒子时不包括边框，因为边框会撑大盒子，且外边距属于盒子外部，在边框之外

布局时1⃣️分析盒子结构，确定合理标签；2⃣️加入内容，方便调试；3⃣️确定位置，设置样式

一下三个属性是CSS3新增属性，有兼容性问题，要IE9或以上才行

圆角边框

border-radius属性用于设置元素的外边框圆角
语法：

border-radius: length;

radius半径（园的半径）原理：（椭）圆与边框的交集形成圆角效果

length值越大圆角越明显
length值可以为数值或百分比
圆形的做法：需要一个正方形盒子，border-radius设置为高度/宽度的一半（或50%）
圆角矩形的做法：需要一个矩形盒子，border-radius设置为高度的一半
该属性是一个简写属性，可以跟四个值，分别代表左上、右上、右下、左下
分开写：border-top-left-radius、border-top- right-radius、border-bottom-left-radius、border- bottom- right-radius

盒子阴影

box-shadow属性为盒子添加阴影，语法：

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值（负值往左走）
v-shadow	必需，垂直阴影的位置，允许负值（负值往上走）
blur	可选，模糊距离（影子虚实，越大越模糊）
spread	可选，阴影的尺寸（影子大小）
color	可选，阴影的颜色
inset	可选，将外部阴影（outset，默认，不写）改为内部阴影

默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效
盒子阴影不占用空间，不会影响其他盒子排列
原先盒子没有阴影，当鼠标经过盒子就添加阴影效果：在div:hover中添加box-shadow属性（此时阴影添加生硬，后面会学如何过渡）

文字阴影

text- shadow属性用于设置文字阴影，语法：

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需，水平阴影的位置，允许负值（负值往左走）
v-shadow	必需，垂直阴影的位置，允许负值（负值往上走）
blur	可选，模糊距离（影子虚实，越大越模糊）
color	可选，阴影的颜色

CSS（三）：CSS特性与盒子模型相关推荐

CSS布局：CSS三大特性、盒子模型
CSS布局 Date: September 3, 2022 Summary: CSS三大特性.盒子模型 CSS三大特性 ◆ 能够认识不同选择器的优先级公式 ◆ 能够进行 CSS 权重叠加计算,分析 ...
day 9/16 css三大特性和盒子模型
CSS 三大特性层叠性继承性特殊性 CSS层叠性所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另 ...
CSS学习笔记5CSS的三大特性与盒子模型
CSS的三大特性 CSS有三个非常重要的特性:层叠性.继承性.优先级. 层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一种冲突的样式.层叠性主要是解决样式冲突的问题层叠性原则: ...
【前端基础之css2(emmet语法、CSS复合选择器、元素的显示模式、Snipaste截图工具、小米侧边栏制作、CSS背景、CSS三大特性、盒子模型、PS基本操作】
emmet语法快速生成HTML标签: 快速生成CSS样式语法: 方法1(没有找到对应的文件,所以用了方法2): 方法2: 左下角选择设置搜索框输入"格式化",勾选上如图三个选项 ...
Web前端开发笔记——第三章 CSS语言第五节盒子模型
目录一.CSS布局与定位二.盒子模型三.盒子模型的组成四.设置边框的属性五.设置外.内边距的属性六.overflow 属性结语一.CSS布局与定位在CSS中对一个网页进行布局与定位, ...
CSS 三大特性与盒子模型
CSS 三大特性 CSS层叠性 css=层叠样式表所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个 ...
2022年7月28日（CSS三大特性、盒子模型）
目录一.CSS的三大特性 1.1 层叠性 1.2 继承性--简化代码行高的继承 1.3 优先级二.盒子模型 2.1 盒子模型盒子模型的组成: (1)边框(border) (2)内边距(padd ...
CSS初识- 选择器背景浮动盒子模型
CSS初识 CSS:cascading style sheets,css样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边 ...
CSS的元素显示模式、盒子模型、背景（颜色、图片、平铺、图片位置、图像固定）
文章目录 1.CSS的元素显示模式 1.1 什么是元素显示模式 1.2 块元素 1.3 行内元素 1.4 行内块元素 1.5 元素显示模式总结 1.6 元素显示模式转换 2.盒子模型:网页布局的基础 ...

CSS（三）：CSS特性与盒子模型

目录