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 生成相对定位的元素，相对于其正常位置进行定位。
BFC环境（时独立的区域，需要被触发）块级元素
行内格式化上下文，针对块级元素，又叫块级块级格式化上下文
是独立区域，与外部毫不相关（垂直方向，一个接一个垂直排列的；bfc区域不会与float box重叠，是独立的容器；计算bfc的高度是，浮动元素也参加计算）
哪些元素生成bfc（被触发）：html ；float属性部位none；position为absolute或fixed；overflow
box布局
IFC不需要触发环境
既不是属性也不是元素，是一种环境，一种上下文，是行内元素，一个接一个的水平排列，起点是包含块的顶部（基线？）
（看到别人网页的元素审核中出现filter说明做了兼容性，至少在IE8以下）
模糊程度值：opacity（做蒙版）
导航
css3
ie浏览器的测试软件（兼容性）
浏览器前缀，加了浏览器前缀就可以跟相关浏览器所支持，没有加前缀是用于ie
——webkat——谷歌、苹果
——o——欧朋
——moz——火狐
——ms——IE9
css3边框，可以创建圆角边框，像矩形添加阴影
border-image（基本不用）用图片创建边框source slice
border-radius创建边框圆角（用简写属性）
以对脚的方式左上右下 左下右上
上左右斜角下
box-shadow边框阴影（默认外阴影）
可以接三种值，一般是接两种，水平和垂直方向
h-shadow水平阴影
v-shadow垂直阴影
垂直和水平阴影都可以接负值 负值是内阴影（）
inset将外部改为内部阴影
blur模糊距离
spread阴影的尺寸
文本效果
text-shadow文字阴影 （简写的取值顺序：水平 垂直 模糊 颜色）
text-overflow文本溢出（掌握）
word-wrap属性,词太长的话就可能无法超出某个区域：允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分：
2D转换，通过css3转换，对元素进行移动、缩放、转动、拉长或延伸
使用特殊效果时用3D
transform转换
translate（x，y）元素从其当前位置移动，根据给定的xyzhu沿着xy
rotate，元素顺时针旋转给定的角度，允许使用负值元素将逆时针旋转
scale（）元素的尺寸会增加或减少，按倍数进行增加或减少
scale（2，4）宽度按倍数两倍，高度按倍数4背
接负值，按相仿方向掉头（如上到下左到右）
skew（）翻转的角度，可以为负数，是逆时针方向翻转
3D转换必须有x坐标，y坐标
页面居中
body{width：500px
margin：0 auto}
visible：元素是否看可见：visible，看可见默认值
只要遇到ul，padding,marign设置为0