前端 第三节 CSS盒模型和浮动

一、CSS盒模型

1.标准盒模型

• top上边框；bottom下边框；left左边框；right右边框
  标准盒模型
• box-sizing:content-box；
• 标准盒模型的盒子宽度= centent内容的宽度；
  标准盒模型的盒子高度= centent内容的高度；

2.怪异盒模型

• 怪异盒模型(IE盒模型)
• box-sizing:border-box；
• 怪异盒模型的盒子宽度 = Padding宽度2+Border宽度2 + Content宽度；
  怪异盒模型的盒子高度 = Padding高度2+Border高度2 + Content高度；

二、盒模型常用操作

1.设置盒模型居中效果

• margin: 10px auto;//在样式表中设置盒模型与上下外边距为10px，左右边距根据父元素自适应
• 隐藏块级元素:
  display: none;
• 显示块级元素
  display: block;//需先设置隐藏
• 设置元素透明度属性
  opacity://(1-0)

2.基本设置

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

3.鼠标样式

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

4.溢出的处理

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

三、浮动

1.概念

• 浮动可以让多个块级元素在一行内显示；
• float 属性用于创建浮动框，将其移动到一边，直到左边或右边遇到外边框或者另一个块元素

2.浮动方法

• 左浮动
  float：left；向左边靠，从左边开始一个一个按顺序排列。
  左浮动会脱离文档流，不会脱离文本流；
• 右浮动
  float：right；向右边靠，从右边开始一个一个按顺序排列。
  右浮动会脱离文档流

3.浮动影响

• 对于自身位置会造成影响；
• 对于兄弟元素也会造成影响；
• 如果所有的元素都设置了浮

4.清除浮动

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

div::after{
    content: "";
    display: block;
    clear: both;
}