CSS样式-盒模型分析

<head>
　　<meta charset="utf-8">
　　<title></title>
　　<style type="text/css">
　　　　* {
　　　　　　margin: 0;
　　　　}
　　　　div {
 　　　　　　/*width和height是指盒子中东西的实际大小*/
　　　　　　width: 150px;
　　　　　　height: 150px;
　　　　　　background-color: #f00;
　　　　　　/*padding是指盒子中填充物的大小*/
　　　　　　padding: 10px 20px 30px 40px;
　　　　　　/*border是指盒子本身的大小*/
　　　　　　border: 5px solid #000;
　　　　　　border-width: 10px 20px 30px 40px;
　　　　　　/**margin是指盒子与其他外围之间的大小/
　　　　　　margin: 50px 100px 200px 250px;
 
　　}
　　</style>
</head>
<body>
　　<div>
　　</div>
</body>

 

 

 
 
红色背景部分的大小是：width（height）+ padding; 如果没有不设置padding的话，则是width（height）
posted @ 2021-02-22 11:55  #Friday  阅读(85)  评论(0)    收藏  举报