博客列表 >盒模型常用属性与盒大小计算方式

盒模型常用属性与盒大小计算方式

P粉019280626
P粉019280626原创
2023年02月12日 12:57:36333浏览

<!DOCTYPE html>
<html lang="zh-CN">
<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>Gao的作业-盒模型常用属性与盒大小计算方式</title>
</head>
<body>

  1. <div class="box">这是一个盒子</div>
  2. <style>
  3. * {
  4. margin: 0;
  5. padding: 0;
  6. /* box-sizing: border-box; */
  7. }
  8. .box{
  9. width:200px;
  10. height:100px;
  11. padding:10px;
  12. border:30px red solid;
  13. /* 外边距写上以后,自动匹配html根元素还是body元素并没有计算在盒的长度里。 */
  14. /* margin:15px; */
  15. /* 原大小是200*100,加上了边框30和内边10。所以现在的盒是width:200+10+10+30+30=280px height:100+10+10+30+30=180px */
  16. /*如果想要所见即所得大小,就要打开box-sizing: border-box 开关*/
  17. }
  18. </style>
  19. </body>
  20. </html>
  21. ![](https://img.php.cn/upload/image/347/943/953/1676177702257219.jpg)
  22. ![](https://img.php.cn/upload/image/652/645/690/1676177717303798.jpg)
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议