【css盒模型 浮动】

CSS 盒模型

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

margin属性

1个参数代表上下左右的数据
2个参数 第一个代表上下，第二个代表左右
3个参数 第一个代表上 第二个代表左右 第三个参数代表下的数据
4个参数 代表上–右–下–左
margin：0px auto；

标准盒模型

div宽=内容的宽

怪异盒模型

div宽=内容的宽+border+padding

外边距居中条件，一定要有宽，使用margin:0 auto;

box-sizing: border-box;怪异盒模型

css其他属性

rgba 带透明度的颜色
transparent 透明色
opacity:0.3； 透明度
cursor:pointer; 手型
overflow:visible; 默认，溢出显示
overflow:hidden; 溢出隐藏
display:none; 隐藏

cuesor鼠标样式

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

hand 是手型

pointer 也是手型，推荐使用这种。

crosshair 是十字型

text 是移动到文本上的那种效果

wait 是等待的那种效果

default 是默认效果

e-resize 是向右的箭头

ne-resize 是向右上的箭头

n-resize 是向上的箭头

nw-resize 是向左上的箭头

w-resize 是向左的箭

sw-resize 是左下的箭头

s-resize 是向下的箭头

se-resize 是向右下的箭头

auto 是由系统自动给出效果

溢出的处理

overflow 如果内容溢出了元素内容区域，是否对内容的边
缘进行裁剪。

overflow-x 如果内容溢出了元素内容区域，是否对内容的
左/右边缘进行裁剪。

overflow-y 如果内容溢出了元素内容区域，是否对内容的
上/下边缘进行裁剪。

visible 不裁剪内容，可能会显示在内容框之外。

hidden 裁剪内容-不提供滚动机制。

scroll 裁剪内容-提供滚动机制。

auto 如果溢出框，则应该提供滚动机制。

CSS浮动

文档流：包含元素的布局宽高背景颜色等等

文本流：包含文字元素内容

左浮：不脱离文本流，脱离文档流

右浮：既脱离文档流，又脱离文本流

浮动带来的问题：

对自身有影响（脱离文档流），对兄弟改变了布局，对父级造成了坍塌

清浮动

给父级设置高（不推荐）

给使用浮动元素后面添加空的块级元素，clear：bhth

在父容器上添加溢出隐藏属性 overflow：hidden

after伪类清浮动

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