一个页面往往包括导航条（navbar）、菜单（menu）、内容（content），页脚（footer）、页眉（header）、主要内容（main）、边条（sidebar）等等的部分，如下图所示：（一般用一个container把其他元素都包含起来，main包括了menu、content、sidebar）
这样就涉及到每一个块的大小、边框、与其他元素的距离等和块的定位等的问题。
多个分区之间的位置放置分为三个：文档流、浮动定位、层定位：
一个块可以看作一个盒子，页面每一个元素都可以看作一个盒子，一个盒子有内边距、外边距等：
盒子模型首先有内容（content），内容占有一定的空间，用height来定义它的高度，用width定义它的宽度 在内容的外圈可以设定一定的空白距离，在内容与边框之间这段空白距离就是内边距（padding），也就是边框到内容的这段距离就是padding； 再外面一层是边框（border），利用border来设定一个边框； 边框之外还可以设定一个外边距（margin），当页面上有多个盒子的时候可以通过两个盒子的外边距来设定两个盒子之间的距离，也就是边框（border）之外的和其他元素之间的一个距离就是外边距（margin）。一个盒子的实现代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/css样式：列表、表格、背景、超链接.css"> <style type="text/css"> #box{ width: 100px;//设置的是内容部分的宽 height: 100px;//设置的是内容部分的高度 border:1px solid;//1px表示设置边框的厚度 //solid表示边框是实体黑色 padding:20px; //只使用padding表明设置内边框 //上下左右到内容部分的距离都为20px margin: 10px;//同理设置外边框到border的距离 overflow:scroll;//设置当内容超出设置的宽高时使用滚 //条进行显示 } </style> </head> <body> <div id="box"> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </div> </body> </html> 当文本内容大小超过了设置的height的大小的时候，可以使用overflow属性进行设置：（如下） 文字与边框（边框是默认黑色且是可以显示出来的）之间的空白的部分就是padding可以使用padding-left等属性设置， 边框到浏览器的边缘部分的空白部分就是margin，可以使用margin-left等属性设置： 当只用padding、margin标签对上右下左方向一次性进行距离设置时，是从上出发沿着顺时针的方向进行取值 border部分也有部分子属性进行设置： 下图显示的border-width属性的取值中有粗（thick）、中（medium）、细（thin），当选择这三种取值的时候，边框会根据浏览器的不同 自动设置进行变成对应的粗度我们会发现其实在直接用div标签创建一个块时，不用设置像上面所提到的那 些padding、margin、border的大小，其实这种情况下，浏览器是对此进行了 默认的设置，这个时候如果自己对于这些border等的标签要进行定义的话，就 要先把浏览器给予的默认的值进行全局样式上的清零： 注意：但取值为0px的时候可以把单位去掉，其余不等于0的情况下单位不能省略 *{ margin: 0; padding: 0; }
以margin为例：
实际上使用div构造盒子的时候，两个盒子是上下排列的，每个盒子的都有一个 margin的属性，这个时候要注意当这两个div上下排列的时候，外边距会进行合 并，合并后的margin的距离就是两个盒子中margin最大的那个的值 但如果设置了水平排列的时候就不会有合并 当想把盒子中的图片、文字、div等的进行水平居中时，就可以使用到： text-align:center; margin:0 auto; 0的意思是指margin距离div（也就是border）的上下距离为0，也可赋其他值 auto就是让浏览器自己去计算margin-left和margin-right 怎么计算呢，就是浏览器会自动计算margin-left和margin-right距离border的距离然后平分分给margin-left和margin-right这样就可以 使得内容处于margin中间，也就是浏览器自动计算分配div的margin左右两边的距离，使得div中的内容处于中间div的中间 当有多个img进行水平排放的时候（使用多个img的时候是默认水平排列的，div是默认竖直排列），图片与图片之间会有一个空白距离
