盒子模型的基本组成
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><style>div{width: 200px;height: 200px;padding: 20px;margin: 50px;border: 1px solid #000;background-color: pink;}</style>
</head>
<body><div>安河桥北</div>
</body>
</html>
成分详解:
1.边框线
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>边框线</title><style>div{width: 200px;height: 200px;background-color: pink;/* 实线 *//* border: 1px solid #000; *//* 虚线 *//* border: 5px dashed #821d1d; *//* 点线 *//* border: 3px dotted #000; */border-top: 2px solid #bd8080;border-left: 3px dashed #9a3131;border-right: 4px dotted #830a0a;border-bottom: 5px solid orange;}</style>
</head>
<body><div>哈基米哦南北绿豆</div>
</body>
</html>
2.内边框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>内边框</title><style>div{width: 200px;height: 200px;background-color: red;/* padding-top: 20px; *//* padding-bottom: 30px; *//* padding-left: 20px; *//* padding-right: 50px; *//* 多值写法 *//* 四值 上右左下 顺指针顺序*//* padding: 10px 20px 30px 40px; *//* 三值 上 左右 下 *//* padding: 10px 20px 10px; *//* 两值 上下 左右 */padding: 20px 30px;/* 记忆方法，顺指针转一圈，若是当前方向没有数值，则与对面方向相同 */}</style>
</head>
<body><div>鼓楼</div>
</body>
</html>
3.盒子模型的尺寸运算
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型的尺寸</title><style>div{width: 200px;height: 200px;background-color: pink;/* 设置padding与border时会导致盒子的尺寸随之变大 *//* 有两种方法可以保持原来的尺寸 *//* 1.手动减法 *//* width: 160px; *//* height: 160px; */padding: 20px;/* 内减模式:无需手动计算，设置后在应用padding和border不会再撑大盒子； */box-sizing: border-box;border: 40px;}</style>
</head>
<body><div>div标签</div>
</body>
</html>
4.外边距（版心居中）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外边距及版心居中</title><style>div{width: 1000px;height: 200px;background-color: pink;/* 设置外边距不会撑大盒子 *//* margin: 50px; *//* margin-left: 100px; *//* margin-right: 200px; *//* 让盒子版心水平居中 *//* 如果没有0，则会使得垂直方向上也是居中的，而大部分情况只需要水平居中 *//* 且版心居中的一个条件是盒子是要有宽度的，否则无法实现 */margin: 0 auto;}</style>
</head>
<body><div>div标签</div>
</body>
</html>
