9. CSS盒模型浮动与切图

9.1 盒子模型

利用盒子来设计网页

盒子包含：边框、外边距、内边距、实际内容

网页布局设置：

①先准备相关的网页元素，网页元素基本都是盒子box

②利用css设置好盒子样式，然后摆放到相应位置

③往盒子里装内容

9.1.1 边框（border）

1. border可以设置元素的边框。边框有三部分组成：边框宽度(粗细) 边框样式 边框颜色；
2. 语法

/* 边框复合写法：粗细 样式 颜色 */
div {
  border: 1px solid #ccc;
}

边框样式 border-style 可以设置如下值：

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

3. 边框的合写分写

/* 边框复合写法：粗细 样式 颜色 */
div {
  border: 1px solid #ccc;
}

边框分开写法：

/* 边框分开写法 */
div {
  border-top: 1px solid #000;
  border-right: 2px dashed #333;
  border-bottom: 3px dotted #666;
  border-left: 1px solid #999;
}

4. 表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框

/* 表格细线边框合并 */
table {
  border-collapse: collapse;
}

要知道如果不进行合并的话，单元格之间边框如果原来每个边框1像素，现在就变成了1+1=2像素，边框就会变宽了，所以此时非常合并单元格，保持1像素 border-collapse:collapse

5. 解决边框额外增加盒子的实际大小的方法：

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

9.1.2 内边距

1. padding 属性用于设置内边距，即边框与内容之间的距离
2. 语法

3. 内边距会影响盒子的实际大小

当我们给盒子指定 padding 值之后，发生了 2 件事情：

①内容和边框有了距离，添加了内边距

②padding影响了盒子实际大小

内边距对盒子大小的影响：

①如果盒子已经有了宽度和高度，此时再指定内边框，会影响盒子的实际大小，会撑大盒子

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

解决方法：

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可

9.1.3 外边距

1. 控制盒子与盒子之间的距离

2. 外边距可以让块级盒子水平居中的两个条件：

①盒子必须指定了宽度（width）

②盒子左右的外边距都设置为 auto

/* margin 复合写法（同上） */
.box {
  margin: 0 auto;  /* 块级盒子水平居中 */
}

3. 外边距塌陷问题

当盒子中嵌套盒子时，让子盒子与父盒子进行隔开时，对子盒子使用margin时，子盒子并不产生影响，子盒子与父盒子没有隔开，父盒子产生了影响，发生了类似于塌陷的效果

解决方案：

①可以为父亲元素定义上边距

/* margin 复合写法（同上） */
.box {
  margin: 0 auto;  /* 块级盒子水平居中 */
}

②可以为父亲元素定义上内边距

③可以为父亲元素添加overflow:hidden

/* margin 复合写法（同上） */
.box {
  margin: 0 auto;  /* 块级盒子水平居中 */
}

以后如果父盒子给定了宽高，子盒子要实现在父盒子中的居中效果，如果不给父盒子上边框，子盒子的margin对于竖直方向就会失效，但是水平方向不会失效

解决方式：子盒子使用定位；父盒子加边框；父盒子使用overflow:hidden

9.1.4 清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距

/* margin 复合写法（同上） */
.box {
  margin: 0 auto;  /* 块级盒子水平居中 */
}

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

9.1.5 常用ps的基本操作

• 文件→打开 ：可以打开我们要测量的图片
• Ctrl+R：可以打开标尺，或者 视图→标尺
• 右击标尺，把里面的单位改为像素
• Ctrl+ 加号(+)可以放大视图， Ctrl+ 减号(-)可以缩小视图
• 按住空格键，鼠标可以变成小手，拖动 PS 视图
• 用选区拖动 可以测量大小

• Ctrl+ D 可以取消选区，或者在旁边空白处点击一下也可以取消选区
• 吸管取色工具

9.1.6 案例

1. 小米商品

/* margin 复合写法（同上） */
.box {
  margin: 0 auto;  /* 块级盒子水平居中 */
}

2. 快报模块

<!-- HTML 代码示例 -->
<div class="example">
  示例内容
</div>

9.1.7 盒子模型css中所用到的其他样式

1. 圆角边框

圆角边框的原理为拿着设定半径的圆去矩形等形状的角位置去截弧

div {
  border: 1px solid #ccc;
}

解释:

• 参数值可以为数值或百分比的形式
• 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius
• 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用

2. 盒子阴影

div {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

3. 文字阴影

p {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

9.2 浮动

9.2.1 浮动介绍

在16.2中详细介绍

9.2.2 清除浮动

1. 原因：由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子
2. 清除浮动的本质

清除浮动的本质是清除浮动元素造成的影响：浮动的子标签无法撑开父盒子的高度

注意：

• 如果父盒子本身有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度
• 父级有了高度，就不会影响下面的标准流了

3. 清除浮动样式

.left {
  float: left;
}
.right {
  float: right;
}

法一

额外标签法也称为隔墙法

使用方式：

额外标签法会在浮动元素末尾添加一个空的标签。

.left {
  float: left;
}
.right {
  float: right;
}

both这个元素要清除前面所有方向（左、右）的浮动影响，自己要出现在浮动元素的下方这个元素要清除前面所有方向（左、右）的浮动影响，自己要出现在浮动元素的下方

优点： 通俗易懂，书写方便

缺点： 添加许多无意义的标签，结构化较差

注意： 要求这个新的空标签必须是块级元素。

法二

父级添加overflow属性

.left {
  float: left;
}
.right {
  float: right;
}

overflow: hidden;

优点：代码简洁

缺点：无法显示溢出的部分

注意：是给父元素添加代码

法三

父级添加after伪元素

方式是额外标签法的升级版

使用的时候复制就可以

.left {
  float: left;
}
.right {
  float: right;
}

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器

代表网站： 百度、淘宝网、网易等

法四

父级添加双伪元素

.left {
  float: left;
}
.right {
  float: right;
}

优点：代码更简洁

缺点：照顾低版本浏览器

代表网站：小米、腾讯等

9.3 PS切图

9.3.1 常见图片格式

9.3.2 图层切图

最简单的切图方式：右击图层 → 导出 → 切片

按住shift选中两个图层->图层菜单->合并图层

9.3.3 切片切图

• 利用切片工具手动划出
• 文件菜单 → 存储为 web 设备所用格式 → 选择我们要的图片格式 → 存储

9.3.4 切图步骤

用切片工具选中：

文件 -> 导出