登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›标准盒子与怪异盒子

标准盒子与怪异盒子

嗦或 前天 18:43
从0到0.1学习实践盒子模型

盒子模型概念

预备知识

  • margin：外边距
  • border：边框
  • padding：内边距
  • height：文本高度
  • width：文本宽度
content-box
  1. .father{
  2.     box-sizing: content-box;
  3. }
复制代码
content-box --- >只计算内容区域的宽度和高度
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: content-box;
  5. }
  6. .father{
  8.     height: 500px;
  9.     width: 500px;
  10.     background-color: plum;
  11.     border: 5px solid;
  12.     margin: 20px auto;
  13.     padding: 20px;
  14. }
复制代码
1.png

2.png


  • 盒子总宽度 = content-width（500px） + padding-left（20px） + padding-right（20px） + border-left（5px①） + border-right（5px①）
  • 总高度 = content-height（500px） + padding-top（20px） + padding-bottom（20px） + border-top（5px①） + border-bottom（5px①） = 130px
    ①：这里只有border不准确，border越小，误差越大
    3.png

    这里的4.984涉及到卷积，机器学习了，反正是浏览器的锅
总结：在 content-box 模型下,考虑四部分
border-box

border-box 包括内容,内边距和边框
这意味着在 border-box 模式下，元素的总宽度和高度更易于控制。
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  6. .father{
  7.     height: 500px;
  8.     width: 500px;
  9.     background-color: plum;
  10.     border: 5px solid;
  11.     margin: 20px auto;
  12.     padding: 20px;
  13. }
复制代码
4.png

总宽度 = 520px
总高度 = 520px
总结：在 border-box 模型下,考虑两部分
盒子模型实践--制作一个九宫格

5.png
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.    
  8. </head>
  9. <body>
  10.    
  11.         
  12.         
  13.         
  14.         
  15.         
  16.         
  17.         
  18.    
  19. </body>
  20. </html>
复制代码
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
嗦或
前天 18:43

0

粉丝关注

9

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫