CSS布局基础：盒模型、display、line-height

2019-01-26 本文已影响1人 Zouch在路上

当我们设置好width的值后，再增加padding或者border的时候，IE盒会通过压缩content 的宽度来增加pading或者borderd的的宽度；而对于W3C盒并不会这样，它是直接在contentde 宽度外面加上pading或者borderd的的宽度；

盒模型

content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

解析：

line-height的值可以分为两类：

1）不带单位的（如line-height:2），推荐使用。

当line-height的值为 2时，后代元素会继承2这个值，而不是继承父元素的计算后的值；
如下图中，子元素1的line-height是继承父元素1的line-height：2；然后通过计算2*30px=60px，而不是继承父元素1经过计算的line-height40px。

line-height1.png

2）带单位的（如line-heigth:20px/2em/200%）
当line-height的值为200%/2em/20px,其后代元素的line-height会继承该父元素line-height经过计算的具体值，而不是200%/2em/20px。

如下图中，子元素2的line-height就是继承父元素的line-height经过计算的值，200%*20px=40px

既呈现inline特性（不占据一整行，宽度由内容宽度决定），又呈现block特性（可设置宽高，内外边距）
行内元素换行以及他们之间的空格符会导致两个行内元素之间产生缝隙。解决办法不换行，或者在他们外面包裹一个元素，并设置font-size:0；然后再重新设置行内元素的font-size。
行内元素对齐默认是以里面内容的底部对齐，可以通过设置vertical-align：top（bottom、middle等）进行更改对齐方式（在表格中使用尤为明显）

1.top
使元素及其后代元素的顶部与整行的顶部对齐。
2.bottom
使元素及其后代元素的底部与整行的底部对齐。
3.middle
使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐。

注意 vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素。

默认对齐

顶部对齐

给元素设置display: none;后，元素会从页面中彻底消失，它原本占据的空间会被其他元素占有，会造成浏览器的回流与重绘。

给元素设置visibility: hidden;后，元素会从页面中消失，它原本占据的空间会被保留，会造成浏览器的重绘，适用于希望元素隐藏又不影响页面布局的场景。

给元素设置opacity: 0;后，元素变成透明的我们肉眼就看不到了，所以原本占据的空间还在。

设置透明色。

（1） inline-block 导致父元素增高若干像素

.item {
  vertical-align: top;
  display: inline-block;
  ...
}

（2） outline 问题

如果你看到被选中的<a> <input> <button> 周围有一圈黄或蓝色的外框，就是 outline 了，可以通过设置outline: 0 或outline: none去除。