css盒子模型、定位、浮动

一、盒子模型
1、概念
所谓盒子模型（Box Model）就是把 HTML 页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。或者说，每一个可见的 HTML 元素都是一个盒子。

2、组成
每个矩形都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin）组成。
每个盒子的大小是由内容(content)、内边距（padding）、边框（border）这三个部分的实际大小来决定的。
内容区（content）
内容区有三个属性，width、height 和overflow。
width、height 定义盒子内容区过宽。
overflow属性可以取hidden、visible时、scroll、auto值。

取值	描述
hidden	溢出部分将不可见
visible	溢出的内容信息可见，呈现在盒子的外部
scroll	添加滚动条
auto	由浏览器决定如何处理溢出部分

内边距（padding）
内边距（padding）有五个属性：即padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。
外边距（margin）
外边距（margin）属性：margin-top、margin-bottom、margin- left、margin-right设置盒子上下左右边距。
简单例子

#box1{
            width: 300px;
            height: 300px;
            background-color: black;
            margin-top: 20px;
            margin-left: 30px;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 40px;
            margin-left: 30px;
        }

边框（border）
边框的属性有border-style、border-width和border-color三种；border-color设置边框颜色其属性值可以是RGB值，也可以是CSS 规定的17个颜色名 。
border-style 属性取值;

取值	描述
solid	实线式边框
dotted	点线式边框
dashed	虚线式边框
double	双线式边框
groove	槽线式边框
ridge	脊线式边框
inset	内嵌效果
outset	突起效果

简单例子;

  #box{
            width: 200px;
            height: 200px;
            background-color: black;
            border-style: dashed;
            border-color: brown;
            margin-top: 50px;
        }

二、定位
CSS 中 position 规定了元素的定位方式，通过设置 position 属性使 HTML 元素脱离正常文档流布局，从而使元素可以显示在任意位置
position 属性的可选值包括:

取值
relative	相对定位
absolute	绝对定位
fixed	固定定位
static	默认值

relative 相对定位：相对于盒子原来所在位置；absolute 绝对定位：相对于父级元素位置。top距离原来的位置向上的距离，button：距离原来的位置向下的距离，left：距离原来的位置向左的距离，right：距离原来的位置向右的距离。

    #box{
            width: 200px;
            height: 200px;
            background-color: blue;
            border-style: solid;
            border-color: brown;
            position:absolute;
            left: 50px;
            margin-top: 50px;
        }

三、浮动
CSS float 属性是一个定位属性，用于使元素脱离正常的文档流，并浮动在它的父容器的左侧或右侧
float 设置元素在水平方向浮动，意味着元素只能左右浮动而不能上下浮动
float 属性的常用值包括:
left 靠左浮动，right 靠右浮动，none 不浮动，clear 清除浮动。clear: right 右侧不允许有浮动元素，clear: left 左侧不允许有浮动元素，clear: both 两侧不允许有浮动元素，clear: none 清除浮动。