盒模型和定位

一、盒模型

頁面上每一個HTML元素都是一個矩形盒子，每個矩形盒子都由height、weight組成灼舍，也可能包括內(nèi)邊距（padding）、邊框（border）和外邊距（margin）涨薪。
分解一個元素骑素，包括盒模型的總寬，使用如下公式：
margin-right + border-right + padding-right + width+ padding-left + border-left + margin-left
類似的尤辱，總高公式：
margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

1.度量單位

相對度量單位：

%
表示包含元素的百分比砂豌；
em
表示元素的字體大小厢岂，不會隨所選字體的改變而改變；
rem
表示文檔的字體大醒艟唷（即：html元素）

絕對度量單位：

px
表示像素塔粒，但在不同設(shè)備上，不是完全一致的筐摘；
in,cm,mm
表示英寸卒茬、厘米、毫米咖熟，但在不同設(shè)備上圃酵，不是完全一致的；
pt
表示磅馍管，一般在印刷設(shè)計中較為常見郭赐；

2.高度與寬度

元素默認(rèn)的height屬性由其內(nèi)容決定。在垂直方向上所有元素都會盡可能的伸縮來適應(yīng)內(nèi)容确沸。給一個塊級元素設(shè)置一個特定的高度則需要使用height屬性捌锭。

div {
    height:100px;
}

一個元素的width屬性取決于它的顯示類型。塊級元素的width屬性值默認(rèn)為100%,高度則是其包含內(nèi)容所需要的高度罗捎，它會鋪滿可用的整個橫向空間观谦。行內(nèi)元素則是在橫向方向盡可能的伸來適應(yīng)內(nèi)容。因為行內(nèi)元素尺寸不可更改桨菜，CSS中width和height值只能在塊級元素上起作用豁状。

div {
    weight:400px;
}

3.外邊距和內(nèi)邊距

給元素設(shè)置margin屬性，即在元素的四周設(shè)置了一段空間倒得。margin的值即外邊距泻红，處在邊框的外面，完全透明霞掺〕星牛可以用margin來將元素定位到頁面中特定的位置或者是將所有的元素隔開，給元素提供一個呼吸的空間根悼。
padding和margin十分相像，只是padding處于元素邊框的里面蜀撑。padding值也就是內(nèi)邊距繼承元素的背景挤巡，用來給元素內(nèi)部提供空間，并不和margin一樣用來定位元素酷麦。
元素的4個邊都可以有不同的內(nèi)矿卑、外邊距值，順序為：上沃饶、右母廷、下轻黑、左。

div {
     padding:1px 2px 3px 4px;
     margin:1px 2px 3px 4px;
}

4.邊框

在申明一個邊框時琴昆，需要制定邊框的寬度（border-width）氓鄙、樣式(border-style)和顏色(border-color)，邊框?qū)挾韧ǔＲ?strong>像素（px）為單位申明业舍。

div {border:2px solid red;}

等價于

div {border-width:2px;}
div {border-style:solid;}
div {border-color:red;}

5.盒子大小

內(nèi)邊距抖拦、邊框、外邊距是否被作為元素的一部分計算在內(nèi)舷暮，需要視情況而定态罪。
CSS中有個新屬性box-sizing,允許你在它的值border-box和content-box之間選擇其一。
對于border-box下面，一旦你設(shè)置了塊級元素的寬度复颈，你對內(nèi)邊距、邊框沥割、外邊距設(shè)置的寬度都將計算在內(nèi)耗啦；相反，對于默認(rèn)值的content-box驯遇，內(nèi)邊距芹彬、邊框和外邊距都不計算在盒子的寬度中。
這個屬性并不完全被所有的瀏覽器支持叉庐，IE和 Opera已經(jīng)支持此屬性舒帮，我們只需要針對WebKit和 Mozilla使用前綴屬性：

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

二、定位

默認(rèn)的定位方式是static（靜態(tài)）定位陡叠，表示維持元素在正常的文檔流中玩郊。
relative（相對）定位是相對于它自身原來在文檔流中的位置來進行定位的，瀏覽器會保留元素原來所占用的空間枉阵∫牒欤可以使用盒子的偏移屬性（top，right兴溜，bottom侦厚，left）。
absolute（絕對）定位瀏覽器是使用包含該元素的第一個非靜態(tài)定位的元素來對其進行定位的**拙徽，瀏覽器不會在保留元素原來所占的空間刨沦。可以配合盒子的偏移屬性使用膘怕。
fixed （固定）定位與絕對定位非常相似想诅，但它是相對于整個頁面來定位的，而不是相對于它的包含元素。

html代碼：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="box1">
    <p class="box2">
      This is a paragraph with a fixed width,
      and left and right margins set to auto,
      So it's centered.<br>
    </p>
  </div>
</body>
</html>

CSS代碼：

.box1 {
  background-color:pink;
  width:500px;
  height:200px;
  position:relative;
}

.box2 {
  background-color:green;
  width:450px;
  height:80px;
  position:absolute;
  left:50px;
  top:50px;
}

output:

position.png

在上圖的例子中来破，div指定了postion屬性值為relative篮灼，它便作為一個靜態(tài)的容器，其內(nèi)的絕對定位子元素p便基于它定位徘禁。因此絕對定位的p元素上下相對于靜態(tài)容器div向右偏移50px诅诱，向下偏移50px。

三晌坤、浮動和清除

使用float（浮動）屬性可以將元素浮動到它的包含元素（父元素）的左邊或右邊逢艘，后繼的元素不論是塊級元素還是行內(nèi)元素都將環(huán)繞浮動的元素。
如果想取消浮動骤菠，僅需將clear屬性應(yīng)用于要取消浮動的第一個元素（元素將新起一行）它改。當(dāng)應(yīng)用clear屬性時，left或right屬性值需要與前面的float屬性值想匹配商乎。