css最重要的是盒子模型，盒子组成一切 盒子构成：
内容区（content）内边距（padding）边框（border）外边距（margin）首先可以直接设置各个区域
.box{ width:70px; padding:5px; margin:10px; }注意：这里的width和height设置的大小是内容区的大小，不是整个盒子的大小。内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。外边距可以是负值，而且在很多情况下都要使用负值的外边距。 （当width和height为默认时，即auto，这时内边距不会影响可见框的大小，而是会自动修改width和height，以适应内边距，即一变大一变小，父元素内容区未指定数据也是默认被内容撑开的） 介绍一个创建div的快捷方式（div.box$*10:创建10个div，类名从box1到box10）
为一个元素设置边框必须指定三个样式（至少有样式才能看到边框，因为大部分浏览器会为颜色和宽度备有默认值，而边框样式默认值是none，即无）：
border-width：边框的宽度；border-color：边框的颜色；border-style：边框的样式；分别指定四个边不同样式：例如：border-width:10px 20px 30px 40px 顺序为：（顺时针）上 右 下 左 当只写三个参数时：上 左右 下 只写两个参数时：上下 左右 也可使用：border-xxx-width: 30px; (其他什么颜色风格都一样，内边距外边距是一样道理)。例子：border-left-width:40px;设置左边框宽度。 xxx值有：top ; right ; bottom ; left
其他示例：border-xxx-style：double； 常用样式：
none 默认值没有边框double 双实线dotted 点状边框dashed 虚线solid 实线 border-xxx-color：red；简写模式：border: red solid 30px;三个元素无顺序区分，都可以，不会有影响。但是border不能分别指定四个边，只能同时指定四个边。 所以还可以使用：border-xxx:red solid 30px;仅仅指定一条边； 但只设置三条边时，为了简单还可以----先用border设置所有边，然后取消掉一条边的样式。 border:red solid 30px; border-right:none;
盒子内容区与盒子边框之间的距离叫内边距； 四个方向内边距设置：
padding-toppadding-rightpadding-bottompadding-left盒子可见框的宽度=width + padding-left + padding-right + border-left-width + border-right-width；可见框高度同理；
外边距是指当前盒子与其他盒子之间的距离，它不会影响可见框的大小，但是会影响当前盒子的位置。 盒子有四个方向的外边距：
margin-topmargin-rightmargin-bottommargin-left 因为页面上的元素都是靠左靠上摆放的，所以指定上和左边距时会导致自身盒子位置改变，而设置下和右边距时，会改变其他盒子位置改变。 外边距可以设置为负值，设置为负值就会往相反方向移动。 margin值可以设置为auto，一般只为水平方向设置auto，因为水平方向auto表示为最大值，垂直方向auto就是0； 例如：margin-left:auto;就是移动到最右边（如果左右都是设置auto，则是在父元素里水平居中）。margin:auto;居中。margin-top:auto;无效果；属性margin可同时设置四个方向的值：margin:20px 30px 40px 10px;与border一样。
注意：两相邻盒子垂直外边距之间会重叠，比如一个处于上面的盒子下边距为100px，下面盒子的上边距为100px，那么他们的距离为100px，而不是200px；兄弟元素的相邻外边距只会取最大值不会求和。（要点：相邻，垂直方向外边距） 如果父子元素的垂直外边距相邻了，那么子元素的外边距会设置给父元素。 解决方法 ：
就是在该父子元素间加一个子元素，让他们垂直外边距不相邻。使用空的div没有用，使用空的table可以隔离父子元素的外边距，阻止外边距的重叠。（但会添加无用元素，最好可以使用css伪类添加，正好diaplay可以设置类似table的块级元素） .p1:before{ content=""; display=table;//将一个元素设置为表格显示；而且空表格还不会占用空间 } 或者为父元素设置个边框或内边距，这样它们的垂直外边距就不会重合了，再或者就不使用外边距。内容区：内联元素无法设置width和height。
内边距：可以设置水平与垂直方向内边距，但是垂直内边距设置后不会影响页面布局。只会覆盖其他盒子。
边框：可以设置边框，但垂直方向同样不能影响布局，水平会。
外边距：水平方向上可以正常设置，但是与相邻元素不是重叠而是求和。内联元素不支持垂直方向外边距设置。
display可以改变元素的类型（主要就是内联元素和块级元素）； display:block; 常见可选值：
inline：将一个元素作为内联元素显示；block：将一个元素作为块元素显示；inline-block：将一个元素设置为行内块元素显示，其可以使元素既有块元素特点又有内联元素特点，可以设置宽高，又不会独占一行。img标签其实就是行内块元素。none：不显示元素，并且元素不会继续在页面中占有位置。 隐藏效果的类似属性——visibility：可以用来设置元素的隐藏和显示的状态 可选值：visible：默认值，元素默认在页面中显示。 hidden：元素会被隐藏（使用visibility:hidden;隐藏的元素虽然消失了，但是会保留原有的位置）子元素默认是存在于父元素的内容区中，理论上子元素最大应该和父元素一样大。但子元素大小超出父元素的内容区时，超出的内容会在父元素以外的位置显示。超出父元素的内容称为溢出的内容。即父元素默认将溢出内容显示在外面。 而overflow就可以设置父元素如何处理溢出的元素， 可选值：
visible：默认值，不会对溢出元素做处理，溢出元素会在父元素外显示；hidden：溢出的内容会被修剪，不会被显示；scroll：会为父元素添加滚动条，通过滚动条可以查看完整内容。但是它不好用，因为无论溢出与否和溢出方向，都会为父元素添加水平和垂直的滚动条auto：会根据需求添加滚动条；不溢出不添加，水平溢出就添加水平方向滚动条，垂直方向溢出就添加垂直方向滚动条。