CSS框模型

一、CSS 框模型(页面上都是通过盒模型来布局的)，四个组成部分
element : 元素。(也叫 content内容) 
padding : 内边距，也有资料将其翻译为填充。 介于内容和边框的，不能为负数
border : 边框。 
margin : 外边距，也有资料将其翻译为空白或空白边。 （内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。）

二、CSS padding 属性定义元素的内边距。
padding 内边距：属性接受长度值或百分比值，但不允许使用负值。
（背景应用于由内容和内边距、边框组成的区域。）
padding-top 
padding-right 
padding-bottom 
padding-left 
padding: 10px;//四个方向
padding: 10px 20px; //上下 左右
padding: 10px 20px 30px;//上 左右 下
padding: 10px 20px 30px 40px;//上 右 下 左
padding：0 10px；左右
padding：10px 0；上下

三、margin外边框：margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em；百分数，负值

四、css边框
border元素的边框；设置透明边框（transparent）围绕元素内容和内边距的一条或多条线。（可以设置元素边框的样式、宽度和颜色。）
thin 定义细的上边框。 
medium 默认值。定义中等的上边框。 
thick 定义粗的上边框。 
length 允许您自定义上边框的宽度。

五、css定位
一切皆为框—一切皆为盒子（盒模型，狭义地说就是div）。div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

六、元素之间进行切换
display 属性改变生成的框的类型
none不显示（就像元素消失不见一样）
block 此元素将显示为块级元素，此元素前后会带有换行符。 
inline 默认。此元素会被显示为内联元素，元素前后没有换行符 
inline-block 行内块元素 （最好不使用这个）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） 以前使用表格方式来布局，注意下就可以了）

七、CSS定位机制：普通流（标准流）：{元素的位置由元素在html中的位置决定}、浮动和绝对定位。

CSS position 属性（把元素放置到一个静态的、相对的、绝对的、或固定的位置中）
static 元素框正常生成（默认，静态，没有定位）
relative（相对定位，偏移）原来的位置还在。（两两相交确定一点） 
absolute （绝对，脱离文档流）（1，原位置会被占用；2，相对最初的包含块来定位；3，定位,后生成块级框；4，浮动让元素脱离文档流，典型bfc环境）。决定定位和相对定位一起使用，【相对于最近祖先元素来定位】 
fixed （固定，脱离文档流）

overflow： hidden（隐藏，超出部分进行隐藏）
outo单项滚动条

clip绝对定位的元素
rect图片裁剪（很少用）

vertial-align设置元素的垂直对齐方式

水平对齐方式：1，text-algin
2，margin：0 padding：0
垂直对齐方式：line-height float
水平和垂直居中可以用定位的方式来居中
脱离文档流：浮动；定位
堆叠顺序的方式：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。（）配合定位才能使用，正-以我为中心向上，负-以我为中心向下

浮动float
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。创建浮动框可以使文本围绕图像：

both
chear：清除浮动，不允许两边都有浮动

使用 position 属性进行左和右对齐
对齐元素的方法之一是使用绝对定位
float 属性来进行左和右对齐
position 属性规定元素的定位类型。

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位
relative 生成相对定位的元素，相对于其正常位置进行定位。