盒模型的理解

最新推荐文章于 2024-07-09 18:39:27 发布

茶馆后院的猫

最新推荐文章于 2024-07-09 18:39:27 发布

阅读量156

点赞数

分类专栏：面试必问文章标签： html

本文链接：https://blog.csdn.net/weixin_52734828/article/details/112793284

版权

面试必问专栏收录该内容

6 篇文章 0 订阅

订阅专栏

盒模型

什么是盒模型
盒模型分为几种
怪异盒和标准盒的转换

盒模型,我们看到的每一个元素都可以看作一个盒模型，总共4部分组成

内容:content

填充区:padding

边框:border

外边界:margin

盒模型分为标准盒模型和怪异盒模型

标准盒模型的总宽度(计算在页面上的宽度) 是width+ padding左右 + border左右 + margin左右

而怪异盒模型的总宽度的width中已经包含padding和border了所以只计算 width+margin左右就好了

在以往写项目中，一定会遇到这样一个类似的情况，说设置一个盒子宽600px 然后里边6个小盒子宽高都是100px，然后留个盒子刚好放一排，但是你给其中一个盒子加上border就会挤下来一个，现在我给六个小盒子都加上边框不多就1px，我想让他有边框的情况下，排成一排，

这时候就用到了标准盒模型转换怪异盒模型的属性

我给每个小盒子的样式都加上box-sizing:border-box;

这样我的6个小盒子模型都在一排了

除了box-sizing:border-box;将采用怪异模式的盒子模型标准

还有box-sizing:content-box; 将采用标准模式的盒子模型标准，将怪异盒模型转换成标准盒模型

另外就是box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

比如我给父盒子来个box-sizing:border-box;

然后子盒子分别来一个box-sizing:inherit;

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box1 {
      width: 300px;
      height: 200px;
      box-sizing: border-box;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background: red;
      box-sizing: inherit;
      float: left;
      border: 1px solid black;
    }
  </style
<body>
  <div class="box1">
    <div class="box2"></div>
    <div class="box2"></div>
    <div class="box2"></div>
  </div>
</body>

</html>

效果是直接给子盒子分别来一个box-sizing:border-box是一样的

父元素是个怪异盒子自己拿到这个属性，然后自己也是个怪异盒子，鉴定亲生，嗯，这是后你要注意了，看看跟自己的爸爸长得像不像，不像就完了

还有个js的盒模型

怎么获取和设置box的内容宽高
IE： dom.currentStyle.width/height

非IE: window.getComputedStyle(dom).width/height

var obj = document.getElementById("box");

var style = null;
if (window.getComputedStyle) {
    style = window.getComputedStyle(obj, null);    // 非IE
} else { 
    style = obj.currentStyle;  // IE
}
alert("width=" + style.width + "\nheight=" + style.height);
12345678910

茶馆后院的猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒模型的理解

盒模型什么是盒模型盒模型分为几种怪异盒和标准盒的转换盒模型,我们看到的每一个元素都可以看作一个盒模型，总共4部分组成内容:content 填充区:padding 边框:border 外边界:margin盒模型分为标准盒模型和怪异盒模型标准盒模型的总宽度(计算在页面上的宽度) 是width+ padding左右 + border左右 + margin左右而怪异盒模型的总宽度的width中已经包含padding和border了所以只计算 width+margin左右就
复制链接

扫一扫