css-盒子模型

CC
98 阅读2分钟

盒子模型概念

image.png 每一个页面都是由多个盒子模型组成。盒子模型又由border、padding、margin的概念组成。每个概念即可简写设置，又可分为top、bottom、left、right进行自定义。

  • border:可以为边框设置粗细、样式和颜色。
    border: 1px solid red;
    
    border-top: 1px dashed red;
    border-bottom: 2px soild;
    border-left: 1px solid red;
    border-right: none;
  • padding:内边距用于设置盒子内容和边框的距离。
    padding: 10px;
    
    padding: 10px 20px 40px;
    
    padding-top: 20px;
  • margin:设置盒子与盒子之间的距离。推荐通过 * {margin: 0; padding: 0}将所有元素的内外边距设定为零。
    margin: 10px;
    
    margin: 10px 20px;
    
    margin-left: 10px;

叠加外边距

概念：垂直方向的外边距会叠加，直到一个元素的外边距碰到另外一个元素的边框为止。 效果：设置p元素的margin-top: 50px;margin-bottom:30px;理论上第一个p元素和第二个p元素间的距离应为80px，但实际效果由较宽的外边距决定，即50px。

外边距的单位

实践：通常会为文本元素设置不同单位的外边距，例如，段落的左右外边距可以使用px，有利于固定该文本和包含元素边界的距离。而对于上线外边距可以使用em，有利于让段间距随字号大小的变化而对应变大或缩小。

    p {
        font-size: 1em;
        margin: .75em 30px;
    }

盒子有多大

  1. 没有宽度的盒子即没有显示地设置widht属性。此时，盒子width的属性值默认为auto。
  • 结论·没有宽度的元素会始终填满其父元素的宽度。添加水平边框、内边距、外边距会导致内容宽度的减少。
  1. 有宽度的盒子
    p {
        width: 400px;
        margin: 0 30px;
        padding: 0 20px;
        border-width: 0 6px 0 6px;
    }
  • 结论·对于设置了width属性的盒子，边框、内外边距会导致盒子扩展的更宽。实际，width属性是指定了盒子内容的宽度，而非盒子本身的宽度。

标准盒子模型与IE盒子模型

对象：大多数浏览器都采用标准盒子模型，IE盒子模型主要表现在IE内核的浏览器上。
区别：标准盒子模型的盒子总宽度 = 内容的width + padding(左右) + border(左右) + margin（左右）;IE盒子模型的盒子总宽度 = 内容的width + margin(左右)。
实践：通过box-sizing属性修改盒子模型的解析计算模式。

    box-sizing: content-box;(默认标准模式)
    box-sizing: border-box;（怪异模式/IE模式）
avatar
文章
阅读
粉丝