微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 了解CSS盒模型和margin:auto元素对其方式
博主信息
博文 11
粉丝 0
评论 0
访问量 17521
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
了解CSS盒模型和margin:auto元素对其方式
Blueprint
原创
1086人浏览过

盒模型的构成

通过对生活中的盒子和网页中单个模块内部结构的分析，可以发现它们的结构是非常相似的。

由内到外分别是：外边距、边框、内边距、内容区。

盒模型是用来布局网页的重要容器。

网页页面中的元素都可以看成是一个盒子，占据一定的页面空间

涉及属性

属性 含义
margin 外边距
border 边框
padding 内边距（内填充）
width 宽度
height 高度
box-sizing 自定义盒模型宽和高的规范
backgroumd-clip 背景的延伸

盒模型的大小计算

原始样式：

  1.       <body>
  2.         <div class="box">box
  3.           <div class="box1">box1</div>
  4.         </div>
  5.         <div class="box2">box2</div>
  6.         <div class="box3">box3</div>
  7.       </body>
  9.       <style>
  10.         div.box {
  11.           padding-top: 0;
  12.           width: 400px;
  13.           height: 400px;
  14.           background-color: #00f000;
  15.         }
  17.         .box1 {
  18.           width: 200px;
  19.           height: 200px;
  20.           margin-top: px;
  21.           background-color: lightblue;
  22.         }
  24.         .box2 {
  25.           padding: 100px;
  26.           margin: 100px;
  28.           width: 400px;
  29.           border: 20px solid green;
  30.           height: 400px;
  31.           background-color: lightcoral;
  32.           box-sizing: border-box;
  33.         }
  34.         .box3 {
  35.           padding: 100px;
  36.           margin: 100px;
  38.           width: 400px;
  39.           border: 5px solid green;
  40.           height: 400px;
  41.           background-color: lightcoral;
  42.           background-clip: content-box;
  43.           box-sizing: border-box;
  44.         }
  45.       </style>


修改box1的margin-top值

  1.       <body>
  2.         <div class="box">box
  3.           <div class="box1">box1</div>
  4.         </div>
  5.         <div class="box2">box2</div>
  6.         <div class="box3">box3</div>
  7.       </body>
  9.       <style>
  10.         div.box {
  11.           padding-top: 0;
  12.           width: 400px;
  13.           height: 400px;
  14.           background-color: #00f000;
  15.         }
  17.         .box1 {
  18.           width: 200px;
  19.           height: 200px;
  20.           margin-top: 100px;
  21.           background-color: lightblue;
  22.         }
  24.         .box2 {
  25.           padding: 100px;
  26.           margin: 100px;
  28.           width: 400px;
  29.           border: 20px solid green;
  30.           height: 400px;
  31.           background-color: lightcoral;
  32.           box-sizing: border-box;
  33.         }
  34.         .box3 {
  35.           padding: 100px;
  36.           margin: 100px;
  38.           width: 400px;
  39.           border: 5px solid green;
  40.           height: 400px;
  41.           background-color: lightcoral;
  42.           background-clip: content-box;
  43.           box-sizing: border-box;
  44.         }
  45.       </style>

修改box的padding为box3的padding

  1.  <body>
  2.    <div class="box">
  3.      <div class="box1"></div>
  4.    </div>
  5.    <div class="box2"></div>
  6.    <div class="box3"></div>
  7.  </body>
  8.  <style>
  9.    div.box {
  10.      padding-top: 0;
  11.        padding：100px;
  12.      width: 400px;
  13.      height: 400px;
  14.      background-color: #00f000;
  15.    }
  16.    .box1 {
  17.      width: 200px;
  18.      height: 200px;
  19.      margin-top: px;
  20.      background-color: lightblue;
  21.    }
  22.    .box2 {
  23.      padding: 100px;
  24.      margin: 100px;
  25.      width: 400px;
  26.      border: 20px solid green;
  27.      height: 400px;
  28.      background-color: lightcoral;
  29.      box-sizing: border-box;
  30.    }
  31.    .box3 {
  32.      padding: 100px;
  33.      margin: 100px;
  34.      width: 400px;
  35.      border: 5px solid green;
  36.      height: 400px;
  37.      background-color: lightcoral;
  38.      background-clip: content-box;
  39.      box-sizing: border-box;
  40.    }
  41. </style>

大小计算方式：

图片文字有些错误

  1. box-sizing;content-box;
  2.  width(盒子视口)=border+padding+width（自定义）
  3.  height(盒子视口)=border+padding+height（自定义）
  5. width(盒子)=border+padding+width（自定义）+margin
  6. height(盒子)=border+padding+height（自定义）+margin
  8.  box-sizing: border-box;
  9.  width(盒子视口)=width(自定义)
  10.   height(盒子视口)=height(自定义)
  12.   width(盒子)=width(自定义)+margin
  13.   height(盒子)=height(自定义)+margin
  • 在设置box-sizing属性值为content-box时，盒模型的宽高为padding+border+content+margin，改变padding，盒子的实际大小会一起变动，对布局不友好。
  • box-sizing属性值为border-box时，变动padding时，盒子本身的大小并不会变动

留意

  • 两个盒子嵌套时，上外边距会合并，以大的边距基准
    • 可以给外盒子加边框或者上padding-top（影响页面布局）
    • 外盒子添加overflow：hidden
  • 两个垂直盒子的外边距会重合，以大的边距为准
    • 尽量将盒子会重合的边距添加给一个盒子

margin:auto实现元素的居中

margin-left:auto;与margin-right:auto;可以轻易的设置水平居中。
因为在垂直方向上，块级元素不会自动扩充，它的外部尺寸没有自动充满父元素，也没有剩余空间可说。所以margin-top:auto;与margin-bottom:auto 无法使其垂直居中。
可以简写margin:auto；

解决方法：
添加定位属性

  1. <style>
  2.  .box {
  3.    width: 400px;
  4.    height: 450px;
  5.    background-color: #ccc;
  6.   /*简写margin属性*/
  7.   margin: auto;
  8.  /*添加定位属性*/
  9.  position: absolute;
  10.    left: 0;
  11.    right: 0;
  12.    top: 0;
  13.    bottom: 0;
  14.  } 
  15. </style>

总结：

了解了盒模型的构成和属性
外边距的特殊用法（使块级元素居中）

批改老师：WJWJ

批改状态：合格

老师批语：整体看上去写的很不错，继续加油！
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录