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>