P32-前端基础-CSS盒子尺寸box-sizing: border-box
1.概述
默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
可选值：
content-box 默认值，宽度和高度用来设置内容区的大小border-box 宽度和高度用来设置整个盒子可见框的大小width 和 height 指的是内容区 和 内边距 和 边框的总大小
2.CSS盒子尺寸
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>盒子的尺寸</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/normalize.css"><style>.box {width: 100px;height: 100px;background-color: lawngreen;padding: 10px;border: 10px #fda solid;/* 默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）可选值：content-box 默认值，宽度和高度用来设置内容区的大小border-box 宽度和高度用来设置整个盒子可见框的大小width 和 height 指的是内容区 和 内边距 和 边框的总大小*/box-sizing: border-box;}</style></head><body><div class="box"></div></body></html>
