CSS盒子模型及相关

越谷
72 阅读5分钟

什么是盒子模型？margin + border + padding + content，一句话就说完了？

一 基本框

box.jpg

基本概念

  1. 定义一个元素的height/width, 仅指content的height/width, 即为图中content的高宽，不包含其他部分。

  2. 块级元素，图中属性均可设置。

  3. 行内元素，无法设置margin-top和margin-bottom，border-top和padding-top到页面顶部后不再增加。

  4. border的宽度不可为负数（不生效），并且border不能用百分比设置宽度，只能用固定值。

  5. 正常流：指元素从左到右，从上到下的显示；与浮动（float）和定位（position）相对。

  6. 各元素（body/ul等）浏览器有自行设置的 margin和 padding，初始化时最好重置。

  7. 非替换元素：内容包含在文档内的元素，如p/div等；替换元素：作为其他内容占位符的元素，如img。

  8. 匿名文本：未包含在行内元素的字符串。如<p>hello <span>world</span><p>,其中“hello”即为匿名文本。

  9. em框：图中红色框

    em.png

  10. 行内元素内容区。非替换元素：各字符em框串在一起构成的框；替换元素：content区加上可能存在的padding/border/margin。

  11. 行内元素行间距：line-height 与 font-size的差。

  12. 行内元素行内框。非替换元素：即line-height的高度范围。替换元素：content的高度。

二 块级元素

块级元素布局依赖于其祖先块元素。

水平格式化

水平格式化的7个属性：margin-left，border-left，padding-left，width，padding-right，border-right，margin-right。这7个属性值加在一起是元素“包含块”的宽度，也就是元素实际使用的空间。

关于auto 上面7个属性中，只有margin-left, width, margin-right可以设置auto。 在一个有固定宽高的父块元素内定义一个div，样式设置为：width:200px; margin-left:100px; margin-right: 100px; 替换其中一个或多个值为auto，div位置布局结果如下：

align-auto.png

结论:

  1. 如果三者中有属性值为auto，该属性会依据其他属性值，确定元素所需的实际长度，自动弥补。auto相对实际值，最后生效。
  2. 全设为固定值时，margin-right会自动设置为0(Chrome)。
  3. margin-right/margin-left值为auto，width为固定值，元素水平居中展示。
  4. margin-right/margin-left值为auto，width不设值，则width自动设置为元素实际所剩的宽度。
  5. 全设为auto时，width自动撑满，margin-left和margin-right为0。

垂直格式化

垂直格式化的7个属性：margin-top，border-top，padding-top，height，padding-bottom，border-bottom，margin-bottom，这7个属性的总和必须等于“包含块”的高度。

知识点

  1. margin-top，margin-bottom和height可以设置成auto。
  2. 正常流中，一个块元素的margin-top或margin-bottom设置为auto时，会自动计算为0。此时如果要实现垂直居中，该如何做？

  • 设置writing-mode为vertical-lr， 即定义文本垂直布局，此时可以通过类似水平格式化方式的水平居中，实现垂直居中，不过这时margin-left/right 设为auto时，自动计算为0，也就是说，水平格式化与垂直格式化调换了位置，水平格式化不能再用auto实现水平居中。

  • margin-top/bottom设置百分比或固定值。在父元素定位（position）的条件下，通过计算父元素的height减去本元素的height，得出实现居中的margin-top/bottom值。注意，如果设为百分比，此时的百分比是相对于writing-mode布局方向的值，默认情况下，即为相对于父元素的width。

  • Flex布局实现垂直居中

  • transform: translate(-50%, -50%)

  1. 垂直相邻的外边距（margin-top/bottom）会合并，或者说会重叠。比如上一个元素的margin-bottom:15px;相邻下元素margin-top:10px;则两个元素间的距离为15px，而不是25px。

三 行内元素

行内格式化 - 垂直对齐

  1. 一般情况下，非替换元素通过设置line-height可轻易实现垂直对齐，line-height具有继承的特性，可在父元素上设置line-height。

  2. line-height具有缩放的特性，可设为原始数字，如2，实际效果为元素本身font-size的2倍。并且可在逐层子元素内传递，是每层元素本身font-size的2倍。如果在子元素内另设了line-height, 则会覆盖父层的line-height。

  3. 行内非替换元素的边框/背景色跟font-size,padding相关，跟line-height无关。并且padding不改变行框的高度，如图：

    lineheight.png

  4. 行内替换元素一般有固有的高宽，其本身的高度可以增加行框的高度，但不会增加line-height,所以一般会出现垂直不对齐的情况（img图片错位），可以改变line-height或设置负的下外边距使其垂直对齐。

四 box-sizing

在 CSS 盒子模型的默认定义里，一个元素的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。

box-sizing 属性可以被用来调整这些表现，其值有：

box-sizing: content-box | border-box

content-box

默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border）、内边距（padding）、外边距（margin）。

border-box

width 和 height 属性包括内容、内边距和边框，但不包括外边距。增加内边距和边框时，内容区实际宽高会自动缩小。（当内容区为0时，继续加大内边距和边框，元素的width和height也会变大） 尺寸计算公式： width = border + padding + 内容的宽度 height = border + padding + 内容的高度

[参考1] 《CSS权威指南》

[参考2] box-sizing

avatar
文章
阅读
粉丝