前端常识篇--CSS

CSS 盒子模型和定位

---

CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

元素 中文名 图中的位置 Margin 外边距 清除边框外的区域，外边距是透明的。 Border 边框 围绕在内边距和内容外的边框。 Padding 内边距 清除内容周围的区域，内边距是透明的。 Content 内容 盒子的内容，显示文本和图像。

---

先设定一个css盒子模型

div {    width: 300px;    height: 200px;    border: 25px solid green;    padding: 25px;    margin: 25px;}

那这个div的盒子高度和宽度等于下面的计算公式：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

所以上面的例子的高度和宽度为：
高度=300px+25px+25px+25px+25px+25px+25px=450px
宽度=200px+25px+25px+25px+25px+25px+25px=350px

---

绝对定位—Absolute

h2{    position:absolute;    left:100px;    top:150px;}

Absolutely定位使元素的位置与文档流无关，因此不占据空间。
Absolutely定位的元素和其他元素重叠。

---

重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：

img{    position:absolute;    left:0px;    top:0px;    z-index:-1;}

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意： 如果两个定位元素重叠，没有指定z-index，最后定位在HTML代码中的元素将被显示在最前面。

---

相对定位—Relative

相对定位元素的定位是相对其正常位置。

h2.pos_left{    position:relative;    left:-20px;}h2.pos_right{    position:relative;    left:20px;}

可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。

h2.pos_top{    position:relative;    top:-50px;}

相对定位元素经常被用来作为绝对定位元素的容器块。

---

静态定位—Static

每个元素默认的属性——它表示“将元素放在文档布局流的默认位置——没有什么特殊的地方”。

固定定位—Fixed

与绝对定位非常类似, 除了它是将一个元素相对浏览器视口固定，而不是相对另外一个元素. 在创建类似页面滚动总是处于页面上方的导航菜单时非常有用。

1.菜鸟教程–css盒子模型http://www.runoob.com/css/css-boxmodel.html