css中的盒子模型

时间  2019-12-18
标签 css 盒子 模型 栏目 CSS 繁體版
原文   原文链接

盒子模型

  • 概念浏览器

    所谓盒子模型，就像一个盒子，一个标签就是一个盒子，能够经过6大属性（ 有margin（外边距），border（边框）,padding（内边距），widht（宽度），height（高度），background（背景））来设置这个盒子。spa

典型的盒子模型

  • 1.W3C的标准盒子模型
    在标准盒子模型中，width指的是content
  • 2.IE的盒子模型
    在IE的盒子模型中，width表示content+padding+border这三部分的宽度。

块级元素和行内元素与盒子模型的揪扯

  • 对块级元素来讲，6大属性都有做用
  • 对行内元素来讲，width，height不起做用，padding和margin再水平方向上有做用，在垂直方向上没有做用。margin还具备重叠问题。

如何计算盒子模型在网页上占据的大小？这种盒子模型有什么很差的地方？

  • 在网页上占据的宽度：左右的margin+左右的padding+width
  • 在网页上占据的高度：上下的margin+上下的padding+height
  • 若是一个div没有设置width，它占父元素的100%。假如个人父元素是960px。div也占960px。div的这个960是指div的内容宽度仍是指它在页面上占据的空间？960px = 左右的margin+左右的border+左右的padding+width这里面的div占960是指div所占用的空间。那若是我把这个div又加了一个10px的边框。那么这个div的内容宽度width = 960-20px = 940px
代码演示
<style>
.father{
    width: 960px;
    height: 100px;
    background: red;
}
.son{
    background: yellow;
    height: 50px;
}
</style>
<body>
<div class="father">
    <div class="son">
</div>
</div>
</body>
复制代码

效果图

为何很差？

  • 若是一个男盒子没有设置宽度，它的宽度是父元素的100%，这里的100%是指这个盒子所占页面宽度。若是又增长了这个盒子的margin,padding,border，那么这个盒子的内容宽度必定会减少，若是margin,padding,border不断地增长，盒子的内容宽度不断地被压缩，若是压缩到了极限，浏览器会强迫你元素的宽度增长。因此默认状况下的盒子模型也有不足之处。

margin的重叠

  • 重叠前提：块级元素 垂直3d

  • 兄弟元素之间的重叠：code

    • 上盒子的margin-bootom和下盒子的margin-top 会重叠 ---> 取大优先

    解决： 块级元素-->非块级元素 浮动 设置一方盒子margin，不要两个都设置cdn

  • 父子（第1个子或最后1个子）元素之间的重叠：blog

    • 父的margin-top 和 子的margin-top ---> 取大优先it

    • 父的margin-bottom 和 子的margin-bottom ---> 取大优先io

    解决： 男-->非男 border paddingclass

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程