三、CSS盒模型和浮动

CSS 盒模型

• CSS 盒模型规定了处理元素内容、内边距、边框和外边距的方式。
• 最内部分是元素内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距。

1.元素的尺寸:

• height 设置元素的高度。属性值：auto：默认。/px、cm 等单位定义高度。/百分比
• width 设置元素的宽度属性值：auto：默认。/px、cm 等单位定义高度。/百分比
• max-height 设置元素的最大高度。属性值：auto：默认。/px、cm 等单位定义高度。/百分比
• max-width 设置元素的最大宽度。属性值：auto：默认。/px、cm 等单位定义高度。/百分比
• min-height 设置元素的最小高度。属性值：auto：默认。/px、cm 等单位定义高度。/百分比
• min-width 设置元素的最小宽度。属性值：auto：默认。/px、cm 等单位定义高度。/百分比

• 当属性值用百分比时是相对于父元素的尺寸来说的。

• 最大最小宽高主要用于动态控制缩放等情况下，这里暂做了解。

2.padding 属性：元素的内边距:

• padding-top 属性设置元素的上内边距（空间）。
• padding-right 属性设置元素右内边距（空白）。
• padding-bottom 属性设置元素的下内边距（底部空白）。
• padding-left 属性设置元素左内边距（空白）。
• padding 属性接受长度值或百分比值，但不允许使用负值。
• • padding * 同时设定四个边距
• • padding ** 分别设定上下、左右边距
• • padding *** 分别设定上、左右、下边距
• • padding **** 分别设定上、右、下、左边距

3.border 属性：元素的边框，是围绕元素内容和内边距的一条或多条线。

• border 属性：
  可以按顺序设置如下属性：
• • border-width
• • border-style
• • • solid 定义实线。/dotted 定义点状边框/double
      定义双线…
• • border-color
• 关于元素的边框后边课程还会详细讲解，暂时先简单了解。

4.margin 属性：元素的外边距:

• 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
• margin-top 属性设置元素的上外边距（空间）。
• margin-right 属性设置元素外内边距（空白）。
• margin-bottom 属性设置元素的下外边距（底部空白）。
• margin-left 属性设置元素左外边距（空白）。
• margin 属性接受长度值或百分比值，允许使用负值。
• • margin * 同时设定四个外边距
• • margin ** 分别设定上下、左右外边距
• • margin *** 分别设定上、左右、下外边距
• • margin **** 分别设定上、右、下、左外边距

5.外边距的合并：

• 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
• 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

6.两种盒子模型：

一种是 W3C 的标准盒子模型；一种是 IE 的盒子模型。

怪异盒模型 (ie 盒模型)

box-sizing 属性可以为三个值：content-box（default），border-box，padding-box。

content-box，border 和 padding 不计算入 width 之内。

border-box，border 和 padding 计算入 width 之内，其实就是怪异模式了~

inherit 使元素继承父元素的盒模型模式。

---

CSS 其他属性

1.opacity：透明度设定：

• IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。
• E8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。
• opacity 与通过 rgba()设定透明度的区别：前者同时作用于元素的标签内容，后者只是作用于元素本身。

2.鼠标的样式 cursor：

我们可以通过 cursor 属性改变浏览器默认的鼠标样式，可改变的样式很多，这里仅仅列出几种相对常用的：

---

1. hand 是手型
2. pointer 也是手型，推荐使用这种。
3. crosshair 是十字型
4. text 是移动到文本上的那种效果
5. wait 是等待的那种效果
6. default 是默认效果
7. e-resize 是向右的箭头
8. ne-resize 是向右上的箭头
9. n-resize 是向上的箭头
10. nw-resize 是向左上的箭头
11. w-resize 是向左的箭
12. sw-resize 是左下的箭头
13. s-resize 是向下的箭头
14. se-resize 是向右下的箭头
15. auto 是由系统自动给出效果

---

3.溢出的处理：

• overflow 如果内容溢出了元素内容区域，是否对内容的边缘进行裁剪。
• overflow-x 如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。
• overflow-y 如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。
• • visible 不裁剪内容，可能会显示在内容框之外。
• • hidden 裁剪内容-不提供滚动机制。
• • scroll 裁剪内容-提供滚动机制。
• • auto 如果溢出框，则应该提供滚动机制。

4.rem:根元素字体的大小：

浏览器默认字体大小为 16px

em 是以父元素字体为基准的

rem 是以根元素字体大小为基准的

5.轮廓（outline）：

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline 在一个声明中设置所有的轮廓属性
- outline-color 设置轮廓的颜色。
- outline-style 设置轮廓的样式。
- outline-width 设置轮廓的宽度。
- outline-offset 设置轮廓到边框的距离。
 注：css 新增属性, 不可以写到符合属性里。

6.display 属性常用属性值：

display 的属性值很多，有些目前支持度不好，这里介绍几种常用的情况。

• none 此元素不会被显示。
• block 此元素将显示为块级元素。特征：换行，可设置宽高尺寸。
• inline 行内元素，默认。特征:大小自适应；不换行。
• inline-block 行内块元素。特征:可以设置大小，但是不可以换行。
• 其他：
  list-item / table / inline-table / table-cell / table-caption…

---

CSS 浮动

1.了解 CSS 浮动的概念：

• 使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动属性：用 float 属性， 它的属性值有两个，为 right和 left 两个属性值。

代码实例：

运行结果：

2.浮动的实例：

代码实例：

运行结果：
没有添加右浮动：

添加了右浮动：

3.使用浮动常出现的问题：

1. 对附近的元素布局造成改变，使得布局混乱（覆盖）
2. 因为元素脱离了文档流，会造成一种坍塌的现象。简单的说就是原来的父元容器是被元素撑开的，当浮动之后，父容器的高度就会坍塌。

4.清除浮动：

• 方式一：给前面一个父元素设置高度
  缺点：元素容器不可以自适应高度

• 方式二：在浮动的元素后面加一个空元素，设置属性为 clear：both。 在浮动元素后面的元素设置 clear：both。
  缺点：成本太高，添加了一个元素，难维护。
  clear 属性取值：
  none:默认取值，按照浮动元素的排序规则（左浮动找左浮动， 右浮动找右浮动）
  left：不要找前面的左浮动元素
  right：不要找前面的右浮动元素
  both：清除所有浮动元素

• 方式三：通过设置父容器 css 的样式： “overflow：hidden”通过 overflow:hidden;来清除浮动，其实 overflow 无形中对父容器高度进行了测量， 是设置父容器高度的另一种方法。

• 方式四：after 伪类：对父元素的 after 伪类进行设置。
  用伪元素选择器和内墙法结合使用来给元素清除浮。