CSS盒模型

CSS三大特性

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

CSS层叠性

给相同的选择器对设置了样式，此时一个样式就会覆盖（层叠）另外一个样式。

层叠性主要解决样式冲突的问题。

层叠性原则：

• 样式冲突，遵循就近原则，哪个样式离结构最近，就执行哪个样式（靠书写的先后）
• 样式不冲突，不会重叠。

口诀：长江后浪推前浪

继承性

现实中的继承：我们继承了父亲的姓

CSS中的继承：子标签会继承父标签的某些样式。

此时P标签中的文字颜色会显示红色。

• 恰当的使用继承性，可以简化代码，降低CSS样式的复杂性。

• 子元素可以继承父元素的样式（text-,font-,line-这些开头的元素可以继承，以及color系列）

  和文字相关的样式可以继承，不是所有的样式都继承。

特殊的继承：行高line-height继承

行高后写

• 精确单位px

  子元素的行高就是定义的精确的值

• 不带单位，如1.5

  子元素继承的行高数字为1.5。代表行高为子元素文字大小的1.5倍（上下各0.25*font-size）

• 

​ body行高1.5 这样写法最大的优势是里面的子元素可以根据自己文字大小自动调整行高

优先级

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

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

  • 样式不冲突，都执行
  • 样式冲突，就近原则

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

  

!important 声明的分号前面写，代表该属性是最重要的。不管你是哪一种选择器。

注意：

1. 权重由4组数字组成，但是不会有进位

2. 可以理解为

   id选择器>类选择器>元素原则器>

3. 继承的属性权重是0

   

   此时，p显示的颜色是粉色。有自己的有继承的，优先显示自己的。

​ 在继承的情况下，以后看标签显示的样式：首先看这个标签有没有直接被选出来

1. a标签不会继承父元素的颜色样式

   因为浏览器默认给a {color: blue}的样式

**权重叠加**

• 遇到复合选择器就会发生权重迭代

• 权重虽然会叠加，但是永远不会有进位的问题。

  进行添加不会发生进位，加出来下一层数字是几就是几

  下图中 第一个li标签显示为红。

  分析过程：

  样式冲突，选择器不同，计算权重决定显示的颜色。

  红色的权重是0011，粉色的权重是0010

CSS盒子模型

看透网页布局本质

网页布局过程：

1. 先准备好相关的网页元素，网页元素基本都是盒子Box.
2. 利用CSS设置好盒子样式，然后摆放到相应位置（最麻烦）
3. 往盒子里添加内容

网页布局的核心：就是用css摆放盒子

盒子模型（Box Mode)组成

border：盒子的边框

padding：内容和盒子的距离

content：盒子里面的内容

margin：盒子和盒子之间的距离

边框(border)

border可以设置元素的边框。边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色

语法：

border-style的属性值

• solid：实线

• dashed：虚线

• dotted：点线

边框三大属性简写：粗细 线条样式 颜色

单独设置每一段边框：

• 上边框：boreder-top

• 下边框：Border-bottom

• 左边框：boreder-left

• 右边框：boreder-right

这四个也都可以用边框的三个属性的复合写法，单独定义每一部分边框。

表格的细线边框

之前学习Html的时候制作边框，表格太粗。不在html处更改，在css这里修改样式。

border-collapse属性控制浏览器绘制表格边框的方式。他控制相邻单元格的边框。如果两个格子都有1px边框,那么叠加到中间共同的线就是2px,不好看，用这个属性设置。

边框注意点

• 边框会额外增加盒子的实际占整个网页大小

  盒子的大小=边框+盒子内容大小

• 所以测量盒子大小的时候，可以

  • 不要测量边框
  • 带边框测量，那就在width/height减去边框的粗细

内边距（padding)

padding属性用于设置内边距，即边框（边框的最内层）和内容之间的距离。

内边距复合写法

• 后面只有一个值：则是上下左右的边距都是这个数
• 后面有两个值：第一个元素代表上下，第二个元素代表左右
• 后面有三个值：上 左右 下
• 后面有四个值：顺时针的方式，上右下左

注意

1. 内容和边框有了距离

2. padding也会影响盒子的大小

   padding和Boreder一样，如果盒子本身有了高度和宽度属性。padding也会影响盒子的大小。

解决方案

一定要有padding，那么则使用width和height属性减去原来的值。

padding案例

导航栏内各个文字个数不同，如果按照方式1，都设置相同宽度不合理。

可以使用方案2，不给文字设置宽度（文字内容撑起宽度），使用padding修改各个格子,和左右具有一定的空间。

特殊情况

​ 如果盒子本身没有设置width和height，那么就不会撑开盒子。

​ 只要盒子自己没有定义width和height，（父元素定义了也不会继承），不会撑开盒子。

外边距 Margin

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

margin的简写方式和padding完全一致。

margin属性后面的属性值的个数：

• 后面只有一个值：则是上下左右的边距都是这个数
• 后面有两个值：第一个元素代表上下，第二个元素代表左右
• 后面有三个值：上 左右 下
• 后面有四个值：顺时针的方式，上右下左

外边距典型应用

可以让块级元素实现水平居中显示，必须满足两个条件：

1. 盒子必须指定了宽度(width)

2. 盒子左右外边距设置为auto

3. 三中书写方式均可

   margin: auto;
   margin: 0 auto; <!-- 常用 -->
   margin-left: auto;margin-right: auto;
   

注意

：以上方法是让块级元素水平居中。

**行内元素或者行内块元素水平居中给其父元素添加text-aligin:center即可**

相当于把行内元素和行内块元素看成文字内容。

总结

1.块内元素水平居中：左右margin:auto

2.行内元素或行内块元素水平居中：找到父级元素设置text-align:center

外边距合并

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

   

​

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

垂直塌陷需要两个盒子的边框重合，才会发生塌陷。

清除内外边距

​ 网页元素里面自带外边距。如谷歌默认body有8px的外边距、ul默认有40px的padding。

因此在布局前，首先要清楚网页元素的内外边距。

上述方式，可以清除所有标签的默认内外边距。

上面这句话也是CSS的第一行代码。

注意:行内元素为了兼顾兼容性，尽量只设置左右内外边距，但是转换为块级和行内块元素就可以了

ps基本操作

网页美工大部分都是利用ps来制作的，大部分的切图工作都是在PS中完成的。

需要掌握PS的相关操作。

https://www.bilibili.com/video/BV14J4114768?p=155&spm_id_from=pageDriver&vd_source=dde2f4dd432156027fedf9b1734ba705

ctrl+r快速调出标尺，右击改变刻度为单位

ctrl+加号/减号可以放大或者缩小图片

空格键，鼠标变成小手，拖动PS视图

用选区 拖动，可以查看图片的大小。ctrl+d取消选区，或者在旁边空白处点击一下也可以取消选区。

总结

1. 布局为啥用不同盒子，我只想用div？

   标签由语义，合理的地方用合理标题。标题就用h，大段文字就用p

2. 为什么用这么多类名？

   起个类名是好习惯，每个盒子都起类名，相当于每个盒子都有名字。可以更好地找到盒子、后期维护也更加方便。

3. 到底用margin还是padding？

   大多情况下可以混用。

   弹幕：

   • 上下用margin左右用padding

   • 父子盒子用padding 兄弟盒子用margin

4. 自己没有思路?

   布局有很多种实现方式，可以先模仿，再形成自己的风格。