1.盒模型
"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。
盒模型有两种：标准模型和IE模型。这里重点学习标准模型。
盒模型示意图：
盒模型属性：
width：内容的宽度
height: 内容的高度
padding：内边距，边框到内容的距离
border: 边框，就是指的盒子的宽度
margin：外边距，盒子边框到附近最近盒子的距离
基本写法：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????div{ ???????????width: 100px; ???????????height: 100px; ???????????padding: 100px; ???????????line-height: 100px; ???????????text-align: center; ???????????margin-left: 100px; ???????????margin-top: 200px; ???????????border: 1px solid red; ???????????color: yellow; ???????} ???</style></head><body> ???????<div> ???????66666 ???</div></body></html>样式：
盒模型计算：
盒子的真实宽度=width+2*padding+2*border
盒子的真实宽度=height+2*padding+2*border
1.1内边距设置（padding）
padding有四个方向，分别描述4个方向的padding。单独使用填充属性可以改变上下左右的填充
padding-top: 30px;padding-right: 30px;padding-bottom: 30px;padding-left: 30px;
简写方式：
/*上 右 下 左*/padding: 20px 30px 40px 50px ;/*上 左右 ?下*/padding: 20px 30px 40px;/* 上下 左右*/padding: 20px 30px; ???????????/*上下左右*/padding: 20px;
注：一些标签默认有padding，比如ul标签，有默认的padding-left值。一般在做站的时候，是要清除页面标签中默认的padding和margin以便于我们更好的去调整元素的位置。
这里我们需要使用通配符选择器：
*{ ?padding:0; ?margin:0; ???}但是这种效率不是太高，我们要使用并集选择器来选中页面中应有的标签，可以参考链接https://meyerweb.com/eric/tools/css/reset/
1.2border设置（边框）
边框有三个要素： 粗细 线性样式 颜色
如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框
border:3px solid red;# 或border-width: 3px;border-style: solid;border-color: red;/*border-width: 5px 10px;border-style: solid dotted double dashed;border-color: red green yellow;*/
注：这里对上下左右边框也能分别进行设置
使用border来制作小三角：
# 这里不加transparent会在两边出现黑色的阴影，transparent用来指定全透明色彩div{ ???????????width: 0; ???????????height: 0; ???????????border-bottom: 200px solid red; ???????????border-left: 200px solid transparent; ???????????border-right: 200px solid transparent; ???????}1.3margin设置（外边距）
/*表示四个方向的外边距离为20px*/margin: 20px;/*表示盒子向下移动了30px*/margin-top: 30px;/*表示盒子向右移动了50px*/margin-left: 50px;/*表示盒子向上移动了100px*/margin-bottom: 100px;
盒子居中应用：
margin: 0 auto;
2.标准文档流
标准文档流下的现象：
1.空白折叠现象
多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。
2.高矮不齐，底边对齐
文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐
3.自动换行，一行写不满，换行写
如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。
28.前端css之盒模型及标准文档流
原文地址：https://www.cnblogs.com/LearningOnline/p/9085907.html