day5-布局与定位：盒子模型
一个页面每每包括导航条（navbar）、菜单（menu）、内容（content），页脚（footer）、页眉（header）、主要内容（main）、边条（sidebar）等等的部分，以下图所示：（通常用一个container把其余元素都包含起来，main包括了menu、content、sidebar）css
这样就涉及到每个块的大小、边框、与其余元素的距离等和块的定位等的问题。html
1、定位机制
多个分区之间的位置放置分为三个：文档流、浮动定位、层定位：
web
2、盒子模型
一个块能够看做一个盒子，页面每个元素均可以看做一个盒子，一个盒子有内边距、外边距等：
浏览器
盒子模型首先有**内容（content）**，内容占有必定的空间，用height来定义它 的高度，用width定义它的宽度 在内容的外圈能够设定必定的空白距离，在内容与边框之间这段空白距离就是内 边距（padding），也就是边框到内容的这段距离就是padding 再外面一层是**边框（border）**，利用border来设定一个边框 边框以外还能够设定一个**外边距（margin）**，当页面上有多个盒子的时候能够 经过两个盒子的外边距来设定两个盒子之间的距离，也就是边框（border）以外的 和其余元素之间的一个距离就是外边距（margin）
一个盒子的实现代码以下：ide
<!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; padding:20px; margin: 10px; overflow:scroll; } </style> </head> <body> <div id="box"> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </div> </body> </html>
当文本内容大小超过了设置的height的大小的时候，可使用overflow属性进行 设置：（以下图）
文字与边框（边框是默认黑色且是能够显示出来的）之间的空白的部分可使 用padding-left等的设置，边框到浏览器的边缘部分的空白部分就是margin 可使用margin-left等的属性实现： 当只用padding、margin标签对上右下左方向都进行距离设置时，注意是从上 出发**顺时针**的方向的
border部分也有部分子属性进行设置：
咱们会发现其实在直接用div标签建立一个块时，不用设置像上面所提到的那
些padding、margin、border的大小，其实这种状况下，浏览器是对此进行了
默认的设置，这个时候若是本身对于这些border等的标签要进行定义的话，就
要先把浏览器给予的默认的值进行**全局样式上**的清零：
注意：但取值为0px的时候能够把单位去掉，其他不等于0的状况下单位不能省略
*{
margin: 0;
padding: 0;
}
以margin为例：
svg
实际上使用div构造盒子的时候，两个盒子是上下排列的，每一个盒子的都有一个 margin的属性，这个时候要注意当这两个div上下排列的时候，外边距会进行合 并，合并后的margin的距离就是两个盒子中margin最大的那个的值
但若是设置了水平排列的时候就不会有合并
当想把盒子中的图片、文字、div等的进行水平居中时，就可使用到： text-align:ceter; margin:0 auto; 0的意思是设置div上下距离外面边框的距离为0，auto就是 表示浏览器自动计算分配div左右两边的距离，使得div处于中间
当有多个img进行水平排放的时候（使用多个img的时候是默认水平排列的，div是 默认竖直排列），图片与图片之间会有一个空白距离