CSS浮点 盒模型

盒模型

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

元素的尺寸

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 等单位定义高度。/百分比
• 当属性值用百分比时是相对于父元素的尺寸来说的。
• 最大最小宽高主要用于动态控制缩放等情况下，这里暂做了解。

padding属性：元素的内边距

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

border属性

• border 属性：
  可以按顺序设置如下属性：
  border-width
  border-style
• solid 定义实线。/dotted 定义点状边框/double
  定义双线… o border-color

margin 属性

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

外边距的合并

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

两种盒子的模型

一种是 W3C 的标准盒子模型；一种是 IE 的盒子模型。
怪异盒模型 (ie 盒模型)
box-sizing 属性可以为三个值：content-box（default），
border-box，padding-box。
content-box，border 和 padding 不计算入 width 之内
border-box，border 和 padding 计算入 width 之内，其实就是怪
异模式了~
inherit 使元素继承父元素的盒模型模式

CSS其他属性

opacity：透明度设定

opacity 与通过 rgba()设定透明度的区别：前者同时作用于元
素的标签内容，后者只是作用于元素本身。

鼠标的样式 curso

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 是由系统自动给出效果

溢出的处理

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

轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，
可起到突出元素的作用。
outline 在一个声明中设置所有的轮廓属性：

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

display

display 的属性值很多，有些目前支持度不好，有些会放到以后课程
或综合实例中讲解，这里介绍几种常用的情况。

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

CSS浮动

CSS浮动的概念

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

浮动的异常

使用浮动常出现的问题：

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

清除浮动

• 方式一：给前面一个父元素设置高度
  缺点：元素容器不可以自适应高度
• 方式二：在浮动的元素后面加一个空元素，设置属性为 clear：
  both。 在浮动元素后面的元素设置 clear：both。
  欣知大数据—孙也
  缺点：成本太高，添加了一个元素，难维护
  clear 属性取值：
  none:默认取值，按照浮动元素的排序规则（左浮动找左浮动，
  右浮动找右浮动）
  left：不要找前面的左浮动元素
  right：不要找前面的右浮动元素
  both：清除所有浮动元素
• 方式三：通过设置父容器 css 的样式： “overflow：hidden”
  通过 overflow:hidden;来清除浮动，其实 overflow 无形中对
  父容器高度进行了测量， 是设置父容器高度的另一种方法。
• 方式四：after 伪类：对父元素的 after 伪类进行设置。
  用伪元素选择器和内墙法结合使用来给元素清除浮动