天天看點

CSS3新增的box-sizing、resize屬性CSS3新增的box-sizing屬性設定寬度和高度來控制具體哪些區域的寬度和高度

預設下,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為不允許通過拖動來改變元素的大小