学习前端里面的盒子模型，主要记录元素的浮动以及定位相关知识
正文内容：
一、盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
border(边框) - 围绕在内边距和内容外的边框。
margin(外边距) - 清除边框外的区域，外边距是透明的。
padding(内边距) - 清除内容周围的区域，内边距是透明的。
content(内容) - 盒子的内容，显示文本和图像。
box-sizing 属性：
box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等；默认值是content-box
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这样就可以让浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中
默认情况下，元素的宽度(width) 和高度(height)计算方式如下：
width(宽度) + padding(内边距) + border(边框) = 元素实际宽度
height(高度) + padding(内边距) + border(边框) = 元素实际高度
| 值 | 说明 |
|---|---|
| content-box | 默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中 |
| border-box | 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减 去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。注：border-box 不包含 margin |
| inherit | 指定 box-sizing 属性的值，应该从父元素继承 |
以上内容引用菜鸟教程盒子模型介绍和菜鸟教程box-sizing 属性介绍
二、border
对于一个元素来讲，border是其主要组成部分；border是由宽度，样式，颜色三种属性组成，可以分别设置border-width，border-style，border-color属性值设置；当我们设置border属性值的时候，需要同时设置三个参数，如：border: 1px solid black；使用border属性值设置元素的上，右，下，左的边框；使用border-top属性值设置上边框的样式，使用border-right属性值设置右边框的样式，使用border-bottom属性值设置下边框的样式，使用border-left属性值设置左边框的样式
三、margin
外边距，可以在四个方向上设置，按照顺时针方向设置(上右下左)
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
缩写：
margin: 10px 20px 30px 10px;
四、padding
内填充或内边距，设置时可以设置4个方向，按照顺时针方向设置(上右下左)
padding-top: 50px;
padding-left: 50px;
padding-right: 100px;
padding-bottom: 50px;
也可以缩写
padding:50px; 四个方向都是50px
padding:50px 60px;上下50px 左右60px
padding:50px 60px 70px;上50px 右60px 下70px 左60px
padding:50px 60px 70px 80px;上50px 右60px 下70px 左80px
五、标准文档流
标准文档流指的是页面元素按照从左到右，从上到下的顺序依次排布
六、文字溢出
设置div的宽度与长度，并且在div里面插入文字；当插入的文字内容很多，已经超过div范围大小的时候，就会出现文字溢出；可以设置overflow属性值解决；
| 值 | 说明 |
|---|---|
| visible | 默认值 表示超出正常显示 |
| hidden | 隐藏 |
| scroll | 滚动 |
| auto | 自动 |
如果需要设置一行文本内容在文本溢出的时候显示省略号，则必须满足四个条件
- 容器要有固定的宽高大小 width: xxxpx; height: xxxpx
- 文本强制性的在一行显示 white-space: nowrap
- 超出去的文本隐藏起来 overflow: hidden
- 让隐藏的文本变成省略号 text-overflow: ellipsis
七、浮动
为元素设置浮动后，元素将会脱离文档流；在设置浮动之后，一定要记得清除浮动；浮动是为了让元素显示在任意位置；但是元素脱离文档流，使得元素大小不参与计算，所以会让设置浮动元素的后面元素在浮动元素的未遮挡位置显示
使用具体场景进行说明：在页面一行，我们使用三个div，我们设置三栏布局，此时可以使用浮动实现，范例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
div.main div.left {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
div.main div.right {
width: 100px;
height: 100px;
background-color: black;
float: right;
}
div.content {
background-color: blue;
}
</style>
<title>float学习</title>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="content">
css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；
css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；
</div>
</body>
</html>
运行效果图1如下所示：
结果分析：
- 运行效果图2如下所示；此时是未设置浮动；因为
div.main div.left和div.main div.right是块元素，未脱离文档流，会独立占一行空间，所以它们分别占了两行，高度是因为我们设置两者的height属性值
- 现在设置
div.main div.left和div.main div.right的属性float值分别为left与right；则会出现运行效果图1；因为脱离了文档流，所有div.main div.content会在页面左上角开始渲染，但是此时这块有遮挡，为了避开遮挡，所以显示效果变成了效果图1
效果图3如下所示：
现在需要div.main div.content显示的位置如效果图3所示，又该如何实现；此时就需要我们消除浮动；我们在div.main div.right的后面继续定义一个div，并且设置其样式clear: both，清除浮动；具体代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
div.main div.left {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
div.main div.right {
width: 100px;
height: 100px;
background-color: black;
float: right;
}
div.content {
background-color: blue;
}
</style>
<title>float学习</title>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div style="clear: both;"></div>
</div>
<div class="content">
css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；
css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；css学习；
</div>
</body>
</html>
- 虽然已经将效果解决，但是出现代码冗余；现在使用类选择器进行代码优化
关键代码如下所示：
div.main:after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
八、定位
- 相对定位：相对定位是相对原来的位置进行定位；设置的时候只需要将需要相对定位的元素设置器
position属性设置为relative；相对定位未脱离文档流 - 绝对定位：绝对定位的参照物是距离其最近的使用定位属性父元素，如果没有满足要求的父元素，则使用body作为参照物；绝对定位会脱离文档流
121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
