CSS盒子模型、定位、浮动

CSS盒子模型概述

height:30px;  高度
width:30px;   宽度
content:      内容
padding:      内边距
border:       边框
margin:       外边距

示例.png

CSS内边距

内边距在content外面，在边框内部
padding:            设置所有边距
padding-bottom:     设置底边距
padding-left:       设置左边距
padding-right:      设置右边距
padding-top:        设置上边距

CSS边框：

border-Style:  10个不同的非继承样式，包括none
边框的单边样式：
    border-top-style
    border-left-style
    border-right-style
    border-bottom-style
边框的宽度：
    border-width
边框单边的宽度：
    border-top-width
    border-left-width
    border-right-width
    border-bottom-width
边框的颜色：
    border-color
边框单边的颜色：
    border-top-color
    border-left-color
    border-right-color
    border-bottom-color
CSS3边框：
    border-radius:  圆角边框
    box-shadow:     边框阴影
    border-image:   边框图片

CSS外边距

外边距是围绕在内容边框的区域，默认为透明区域，外边距接受任何长度单位、百分数值;
外边距默认是合并的，相邻的两个盒子，外边距都为100，则两者之间的间距不是200而是合并为100，
若一个盒子外边距是50另一个是100，则合并会以大的那个为准，为100
margin          设置所有边距
margin-bottom   设置底边距
margin-left     设置左边距
margin-right    设置右边距
margin-top      设置上边距
margin:0px auto; 表示上下间距为0，左右自适应

CSS定位：

主要是改变元素在页面上的位置，
普通流：元素按照其在HTML中的位置顺序决定排布的过程
浮动：
绝对布局：不在页面中占有位置，浮在窗口上
静态布局：在静态布局中设置偏移量是不起作用的
固定布局： 固定在窗口的某个位置上，不随页面滚动而滚动
CSS定位属性：
    position:       定位：static静态、relative相对、absolute绝对、fixed固定;先设置该值，再设置以下的属性
    top:            元素向上的偏移量
    left:           元素向左的偏移量
    right:          元素向右的偏移量
    bottom:         元素向下的偏移量
    overflow:       设置元素溢出其区域发生的事情
    clip:           设置元素显示的形状
    vertical-align: 设置元素垂直对齐方式
    z-index:        设置元素的堆叠顺序，值越大，显示在

CSS浮动：

float:none      元素不浮动
float:inherit   元素从父级继承浮动属性
float:left      元素向左浮动
float:right     元素向右浮动
clear:left      去掉元素向左的浮动
clear:right     去掉元素向右的浮动
clear:both      左右两侧均去掉浮动
clear:inherit   从父级继承来clear的值