标签：这一 bubuko 描述 box 上下 add res 空白 显示
"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
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/
边框有三个要素： 粗细 线性样式 颜色
如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 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; }
/*表示四个方向的外边距离为20px*/ margin: 20px; /*表示盒子向下移动了30px*/ margin-top: 30px; /*表示盒子向右移动了50px*/ margin-left: 50px; /*表示盒子向上移动了100px*/ margin-bottom: 100px;
盒子居中应用：
margin: 0 auto;
标准文档流下的现象：
1.空白折叠现象
多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。
2.高矮不齐，底边对齐
文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐
3.自动换行，一行写不满，换行写
如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。
标签：这一 bubuko 描述 box 上下 add res 空白 显示
原文地址：https://www.cnblogs.com/LearningOnline/p/9085907.html
