盒子模型、浮动

盒子模型

盒子模型有元素的内容、边框（border）、内边距（padding）、外边距（margin）组成。

盒子边框（border）

属性	作用
border-width	定义边框的粗细
border-style	边框的样式
border-color	边框的颜色

边框的样式：none（默认值无样式）、solid（实线）、dashed（虚线）、dotted(点线)
边框的综合设置：
border：border-width || border-style || border-color

表格的细线边框

border-collapse：collapse；表示相邻边框合并在一起。

内盒子尺寸计算

盒子的实际大小=内容宽度和高度+内边距+边框+外边距

内边距

padding 内边距控制边框与内容之间的距离

内边距分为左内边距（padding-left）、右内边距（padding-right）、上内边距（padding-top）、下内边距（padding-bottom）。
padding可合并写：上右下左。

外边距

margin外边距，控制盒子和盒子之间的距离

外边距分为左外边距（margin-left）、右外边距（margin-right）、上外边距（margin-top）、下外边距（margin-bottom）。
简单写法和padding一样。

盒子水平居中

可以用下列方法：

• margin：0 auto；
• margin：auto；
• margin-left：auto；margin-right：auto；

外边距

• 相邻块元素垂直外边距的合并，取两个值之间的较大者。
• 嵌套块元素垂直外边距的合并，也是取两个值之间的较大者。
  这种情况被称为盒子塌陷。
  解决方法：
• 可以为父元素定义上边距。
• 还可以为父元素定义上内边距。
• 为父元素添加overflow：hidden；

圆角边框

语法：border-radius：数值或百分比；
例：
border-radius：50%；

浮动（float）

css提供了3种机制来设置盒子的摆放位置，分别是普通流也称为标准流、浮动和定位。

语法：选择器{float：属性值；}
属性值分为none（没有浮动）、left（左浮动）、right（右浮动）。

特点	说明
浮	加了浮动的盒子是浮起来的，漂泊在其他标准流盒子的上边
漏	加了浮动的盒子是不占位置的，他原来的位置漏给了标准流的盒子
特	特别注意：浮动元素会改变display属性，类似转换为了行内块，但是元素之间没有空白间隙