預設下,width和height屬性隻指定元素的内容的高和寬。而對填充區、邊框區和外邊距區所占的空間不起任何效果。(盒子模型包含内容區、填充區、邊框區和外邊距區)、
CSS3新增的box-sizing屬性設定寬度和高度來控制具體哪些區域的寬度和高度
box-sizing:控制該元素整體的寬度、高度
屬性值有:
content-box:設定内容區的寬高
border-box:設定内容區加填充區加邊框區、再加上邊框區的寬高
inherit:指定從父元素繼承box-sizing屬性的值
<!DOCTYPE html>
<html token string">"en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>box-sizing</title>
</head>
<body>
<div style="width: 200px;height: 100px;background-color: #ddd;
background-clip: content-box;
border: 20px solid #555;
padding:20px;
box-sizing:content-box;">
asfasedfdwqe</div>
<div style="width: 200px;height: 100px;background-color: #ddd;
background-clip: content-box;
border: 20px solid #555;
padding:20px;
box-sizing:border-box;">
asfas</div>
</body>
</html>
resize:用于指定是否允許通過拖動來改變元素的大小
一般适用于input的type為textarea時。
resize:none為不允許通過拖動來改變元素的大小