<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒模型</title>
</head>
<body>
<div class="box">
</div>
<style>
.box {
width: 200px;
height: 250px;
background-color: violet;
/* border: 10px dashed currentColor; */
background-clip: content-box;
/* 顺时针方向 */
/* padding:5px 10px 15px 20px; */
/* padding:5px 10px 20px; */
/* padding:5px 20px; */
padding:5px;
/* 改变盒子的计算方式,使得宽高就是设定的,不会破坏布局 */
box-sizing: border-box;
/* 边框设置 */
/* border-top-width: 20px;
border-top-style: solid;
border-top-color:red; */
border: 5px solid red;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
</style>
</body>
</html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!