学习css布局

1：auto  设置左右外边距为auto来使其水平居中 

2：max-width:600px; 设置宽度，替代width可以使浏览器更好地处理小窗口的情况。

3：padding 声明中设置所有内边距属性。

4：margin 声明中设置所有外边距属性。

5：box-sizing:border-box; 有边框和内边距以后，设置两个相同宽度的元素显示的实际宽度一样

例子：

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

CSS开发者想要页面上所有的元素都有没有边框和内边距都能显示实际宽度。所以开发者们把以下CSS代码放在css页面上。

6：position 定位

position: static;默认值，属性为static的元素不会被特殊的定位。

relative:表现的和static一样，除非你添加了一些额外的属性。例如,设置top、right、bottom和left属性会使其偏离其正常位置，或者width，background-color等等。

fixed:一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。

absolute:是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动

7:float 属性指定一个盒子（元素）是否应该浮动。float:left;

8:clear属性指定段落的左侧或右侧不允许浮动的元素

clear:both;在左右两侧均不允许浮动元素

clear:left;在左侧不允许浮动元素。right....

clear:none;默认值，允许浮动元素出现在两侧

9:overflow属性指定如果内容溢出一个元素的框，会发生什么。

overflow:auto; 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

overflow:visible默认值。内容不会被修剪，会呈现在元素框之外

overflow:hidden内容会被修剪，并且其余内容是不可见的。

overflow:scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容

10:@media @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面

例如：@media screen and (max-width: 300px;){  (min-width:300px;)

body { background-color:lightblue;}

}

当浏览器窗口的宽度小于300像素的时候，浏览器的颜色会变成蓝色。