盒子模型的概念

在网页中"一切皆盒子"。css处理网页时，它认为每个元素都包含在一个不可见的盒子里!

一个盒子有：内容区（content），内边距（paading），边框（border），外边距（margin）

1，内容区（content）

• 通过width和height两个属性可以设置内容区的大小

2,内边距（padding）

• padding：上 右 下 左；
• 在css中还有paading-top，padding-right，padding-left，padding-bottom分别用来指定四个方向的内边距

3，边框（border）

• boeder：大小 颜色 边框样式；
• 也可使用border-top/left/right/bottom来分别指定四个方向的边框

4，外边距（margin）

• 用法和badding类似！
• 当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，margin:0 auto;可以是元素居中。

display：修改元素的性质

可选值：

• block：设置元素为块元素
• inline：设为行内元素
• inline-block: 设置为行内块元素
• none：隐藏元素（元素将在页面中完全消失）

visibility:是否隐藏元素

可选值：

• visible:可见的
• hidden：隐藏的

overflow：控制内容溢出的情况

可选值：

• visible: 默认值
• scroll：添加滚动条
• auto：根据需要添加滚动条
• hidden：隐藏超出盒子的内容

文档流的概念：

文档流指的是文档中可现实的对象在排列时所占用的位置。

浮动：float 指的是元素脱离文本流，在父元素中浮动起来

可选值：

• none：不浮动
• left：向左浮动
• right 向右浮动
  当一个元素浮动以后将会自动变为一个块级元素，并且不能在改变！
  浮动元素不会改变父元素的高度！