盒模型/浮动

css盒子模型

盒子模型有元素的内容，边框，内边距，和外边距组成。
盒子里面的文字和图片等元素是内容区域
盒子的厚度我们称为盒子的边框
盒子内容与边框的距离是内边距(类似单元格的cellpadding)
盒子与盒子之间的距离是外边距(类似单元格的cellspacing)

标准盒子模型

盒子边框（border）
语法：border:border-width 定义边框粗细
border-style 边框的样式
border-color 边框颜色
●边框的样式:
。none:没有边框即忽略所有边框的宽度(默认值)
。solid:边框为单实线(最为常用的)
。dashed: 边框为虚线
。dotted: 边框为点线
表格的细线边框
cellspacing 将单元格与单元格之间的距离设置为0
内边距
padding 边框与内容之间的距离

内盒尺寸计算

●宽度
Element Height = content height + padding + border (Height为内容高度)
●高度
Element Width = content width + padding + border (Width为内容宽度)
●盒子的实际的大小=内容的宽度和高度+内边距+边框
外边距margin
盒子与盒子之间的距离
跟padding顺序一样：上右下左
块级盒子水平居中
●可以让一个块级盒子实现水平居中必须: .
盒子必须指定了宽度(width)
然后给左右的外边距都设置为auto
圆角边框
border-radius:length;
盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影

浮动

css布局的三种机制
。块级元索会独占-行，从上向下顺字排列;
■常用元素: div. hr. p. h1~h6、 ul. 0、dl、 form. table
。行内元素会按照顺序,从左到右顺字排列，碰到父元索边缘则自动换行;
■常用元素: span. a、i、 em等
语法：float：属性值
none元素不浮动(默认值)
left元素向左浮动
right元素向右浮动
小结
浮 加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的.上面。
漏 加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。
特 特别注意:浮动元素会改变display属性，类似转换为 了行内块，但是元素之间没空白缝隙
浮动元素与兄弟盒子的关系
在一个父级盒子中，如果前-一个兄弟盒子是:
●浮动的，那么当前盒子会与前一个盒子的顶部对齐;
●普通流的，那么当前盒子会显示在前一个兄弟盒子的下方。
清除浮动
语法：clear：属性值；
left 不允许左侧有浮动元素(清除左侧浮动的影响)
right 不允许右侧有浮动元素(清除右侧浮动的影响)
both 同时清除左右两侧浮动的影响
父级增加overflow属性方法
可以给父级添加:
overflow为hidden|auto |scroll都可以实现。