盒模型和定位

2016-08-13 本文已影响164人味蕾里的青春

一、盒模型

页面上每一个HTML元素都是一个矩形盒子，每个矩形盒子都由height、weight组成，也可能包括内边距（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
表示像素，但在不同设备上，不是完全一致的；
in,cm,mm
表示英寸、厘米、毫米，但在不同设备上，不是完全一致的；
pt
表示磅，一般在印刷设计中较为常见；

2.高度与宽度

元素默认的height属性由其内容决定。在垂直方向上所有元素都会尽可能的伸缩来适应内容。给一个块级元素设置一个特定的高度则需要使用height属性。

div {
    height:100px;
}

一个元素的width属性取决于它的显示类型。块级元素的width属性值默认为100%,高度则是其包含内容所需要的高度，它会铺满可用的整个横向空间。行内元素则是在横向方向尽可能的伸来适应内容。因为行内元素尺寸不可更改，CSS中width和height值只能在块级元素上起作用。

div {
    weight:400px;
}

3.外边距和内边距

给元素设置margin属性，即在元素的四周设置了一段空间。margin的值即外边距，处在边框的外面，完全透明。可以用margin来将元素定位到页面中特定的位置或者是将所有的元素隔开，给元素提供一个呼吸的空间。
padding和margin十分相像，只是padding处于元素边框的里面。padding值也就是内边距继承元素的背景，用来给元素内部提供空间，并不和margin一样用来定位元素。
元素的4个边都可以有不同的内、外边距值，顺序为：上、右、下、左。

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

4.边框

在申明一个边框时，需要制定边框的宽度（border-width）、样式(border-style)和颜色(border-color)，边框宽度通常以像素（px）为单位申明。

div {border:2px solid red;}

等价于

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

5.盒子大小

内边距、边框、外边距是否被作为元素的一部分计算在内，需要视情况而定。
CSS中有个新属性box-sizing,允许你在它的值border-box和content-box之间选择其一。
对于border-box，一旦你设置了块级元素的宽度，你对内边距、边框、外边距设置的宽度都将计算在内；相反，对于默认值的content-box，内边距、边框和外边距都不计算在盒子的宽度中。
这个属性并不完全被所有的浏览器支持，IE和 Opera已经支持此属性，我们只需要针对WebKit和 Mozilla使用前缀属性：

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

二、定位

默认的定位方式是static（静态）定位，表示维持元素在正常的文档流中。
relative（相对）定位是相对于它自身原来在文档流中的位置来进行定位的，浏览器会保留元素原来所占用的空间。可以使用盒子的偏移属性（top，right，bottom，left）。
absolute（绝对）定位浏览器是使用包含该元素的第一个非静态定位的元素来对其进行定位的**，浏览器不会在保留元素原来所占的空间。可以配合盒子的偏移属性使用。
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，它便作为一个静态的容器，其内的绝对定位子元素p便基于它定位。因此绝对定位的p元素上下相对于静态容器div向右偏移50px，向下偏移50px。

三、浮动和清除

使用float（浮动）属性可以将元素浮动到它的包含元素（父元素）的左边或右边，后继的元素不论是块级元素还是行内元素都将环绕浮动的元素。
如果想取消浮动，仅需将clear属性应用于要取消浮动的第一个元素（元素将新起一行）。当应用clear属性时，left或right属性值需要与前面的float属性值想匹配。