前端常识篇--CSS

CSS 盒子模型和定位

---

##CSS盒子模型

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iwtLkdtX-1613986391359)(http://www.runoob.com/images/box-model.gif)] |元素 | 中文名 | 图中的位置| |:--------:|:----------:|:----------:| |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属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：

{
	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