CSS--盒模型

前端小云儿

于 2024-03-20 11:15:30 发布

阅读量59

点赞数

CC 4.0 BY-SA版权

分类专栏：前端静态页面以及逻辑文章标签： css

本文链接：https://blog.csdn.net/jieweiwujie/article/details/136870728

前端静态页面以及逻辑专栏收录该内容

150 篇文章 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

本文详细探讨了CSS盒模型的概念，包括内容区域、内边距、边框和外边距。通过实例解析了盒模型如何影响元素的尺寸计算，以及如何使用box-sizing属性来改变盒模型的行为。此外，还介绍了在不同浏览器间的兼容性问题及其解决方案，帮助开发者更好地掌握CSS布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script setup></script>

<template>
  <div class="box">
    <h3>CSS盒模型</h3>
    <div>在html中所有元素可以看成是一个盒子</div>
    <h4>盒子组成 内容content，内边距padding，外边距margin 边框border</h4>
    <h4>盒模型分类标准盒模型和 IE盒模型</h4>
    <div>标准盒模型：content+margin+padding+border</div>
    <div>IE盒模型：content+margin(padding+border)</div>
  </div>
</template>
<style scoped>
.box {
  border: 1px;
  width: 200px;
  height: 200px;
  margin: 10px;
  padding: 10px;
  /* 标准盒模型尺寸 不会挤压内容尺寸 */
  box-sizing: content-box;
  /* IE盒模型尺寸 padding+border的尺寸会挤压内容的尺寸 */
  box-sizing: border-box;
}
</style>