css布局-学习笔记

总算是能系统的学习下CSS布局，以下内容来源网络

链接在下方哦

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1.我们来了解一个很重要的属性： display

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

默认：display:block:

常用的块级元素包括 div 、p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。

默认：display:inline:

常用的行内元素包括 span 、lebel 、a 

默认：display:none:

常用的元素包括 script 

2.margin: auto;

设置块级元素的 width 可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto 来使其水平居中。

在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况（浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面）。

3.盒模型和box-sizing

当你设置了元素的宽度，实际展现的元素却能够超出你的设置：因为元素的边框和内边距会撑开元素。

新增 box-sizing 的CSS属性。当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。

4.属性 Position

<div class="static">

static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。

<div class="relative">

relative 表现的和 static 一样，除非你添加了一些额外的属性。

在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。

<div class="fixed">

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。

<div class="absolute">

absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，除了它不是相对于视窗而是相对于最近的“positioned”祖先元素。

5.position布局的例子

#div-1 {

position:relative;

　　}

#div-1a {

　　position:absolute;

　　top:0;

　　left:0;

　　width:200px;

　　}

#div-1b {

　　position:absolute;

　　top:0;

　　left:0;

　　width:200px;

}

6.浮动布局的例子

另一个布局中常用的CSS属性是 float 。Float 可用于实现文字环绕图片

img {

  float: right;

  margin: 0 0 1em 1em;

  font-size:62.5%;

}

clear 属性被用于控制浮动。

可以用 left 值才能清除元素的向左浮动，还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。

清除浮动：

.clearfix {

  overflow: auto;

  zoom: 1;

}

来源：
http://zh.learnlayout.com/