网页搭建入门之HTML与CSS（3） -- CSS浮动

DIV

.div{
background-color:yellow;
position:absolute;
top:150px;
left:150px;
overflow:scroll;
border-bottom: solid;
outline:dashed;
}

overflow 滚动
visble 默认值。内容不会被修剪，会呈现在元素框之外
hidden 超出部分被隐藏
scroll 不论是否需要，都显示滚动条
auto 按需要显示滚动条以便查看其余的内容

css轮廓
outline:dashed;虚线轮廓
none不显示
dotted点状轮廓
solid实线
double双线

css边框
boder-bottom：soild;下边框实线
boder-left
boder-right
boder-top
boder-bottom

盒子模型
width、height、border、margin、padding
margin 上 右 下 左 （对象和对象之间的距离）外边距
padding 内边距

margin : 10px 10px 10px 10px；
padding : 10px 10px 10px 10px；

外边距（margin）：是元素与元素之间的距离，或者是元素外面留出的一段空白
内边距（padding）：元素里的内容与元素边框之间的距离
边框（border）：元素本身
内容（content）：元素中放置的东西

padding的距离由哪里产生
正常情况下，设置padding-right：20px，会在div的整体效果上右边多出20px，从外边拿过来的

box-sizing属性
content-bos:在宽度和高度之外绘制元素的内边距和边框(不压缩内容从外边增大范围)
border-box:已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度(从里边压缩内容)

浮动

行级元素与块级元素
常见的行级元素（不独占一行）：<a><label><span><img><em>
常见的块级元素（独占一行）：<div><p><h1-h6><li><table>

定位机制
（标准）文档流、脱标流（float position:absolute）(脱离标准文档流)

文档流特点：
1 空白折叠现象（