CSS世界读书笔记（一）盒子

2018-08-17

盒子

在CSS世界中

分内在盒子和外在盒子

显示分内部显示和外部显示

尺寸分内部尺寸、外部尺寸

div默认宽度100%显示，是『外部尺寸』，其余全是内部尺寸

外部尺寸与流体特征

正常流宽度

div铺满容器margin/border/padding/content自动分配水平空间的机制
格式化宽度

出现在position为absolute或fixed的元素中。

默认情况下，绝对定位元素的宽度表现是『包裹性』，宽度由内部尺寸决定

对于非替换元素，left/top或top/bottom同时存在时，宽度表现为『格式化宽度』

宽度大小相对于最近的具有定位特性的祖先元素计算

格式化宽度也有完全的流体性，自动分配水平空间

内部尺寸与流体特征

元素的尺寸由内部的元素决定，而非外部容器决定

加入元素里没内容，宽度就是0，就是应用的内部尺寸

内部尺寸三种表现形式

包裹性

shrink-to-fit

例如按钮，文字越多高度越宽，如果文字足够多，会在容器的宽度处自动换行

inline-block、浮动、绝对定位元素都有包裹性

首选最小宽度

类似图片这样的替换元素的最小宽度就是元素内容本身的宽度

汉字最小宽度是每个字的宽度，英文是特定连续的英文字符单元决定

可以通过此特性控制宽度

最大宽度

连续内联盒子的宽度

width值作用的细节

div {width: 100px}是如何作用到<div>元素上的？

width是作用在内在盒子上的

内在盒子

content box/padding box/border box/margin box

margin的背景是透明的，设置了margin值，也不会根据盒子尺寸变化，所以没有margin-box属性

width默认作用在content box上

CSS流体布局下的宽度分离原则

布局讲究精确计算，在一些css属性变化时候，空间不足，出现错位问题，解决方法之一是使用书写方式约束，如『宽度分离原则』

所谓宽度分离原则，就是css中的width属性不与影响宽度的padding/border(有时候包括margin)属性共存

width独立占用一层标签，padding、border、margin利用流动性在内部自适应呈现

.father {
  width: 180px;
}
.son {
  margin: 0 20px;
  padding: 20px;
  border: 1px solid;
}

为何要宽度分离

由于盒尺寸中的4个盒子都能影响宽度，元素的宽度很容易发生变化导致意想不到的布局发生

父元素定宽，子元素因为width: auto，会如水流般自动填满父容器

改变width/height作用细节的box-sizing

width默认作用在content-box上，box-sizing可以改成其他的

height

对于width，就算父元素是auto，子元素也支持百分比，而height不支持

所以想要高度全屏，需要

1
2
3

html, body {
  height: 100%;
}

如何支持height: 100%

显示设定高度值

使用绝对定位：绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的，绝对定位的宽高百分比是相对于padding box的，会把padding的大小计算在内，非绝对定位元素则是相对于content box的

min-width/max-width/height

初始值

max-width/height初始值为none

min-width/height初始值为auto

max-width会覆盖width，甚至会覆盖!important的width

1 2	<img src="1.jpg" style="width:480px!important;"> img {max-width: 256px}

min-width覆盖max-width，当两个属性有冲突时，例如

.container {
  min-width: 1400px;
  max-width: 1200px;
}

表现为宽度至少1400

内联元素

内联特指外在盒子，inline-block和inline-table都是内联元素

从表现看，内联元素可以和文字一行显示。

幽灵空白节点

在HTML5文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面都有一个空白节点一样。这个节点永远透明，不占宽度，看不见也无法用脚本获取

1
2
3

div {background: #cd0000}
span {display: inline-block}
<div><span></span></div>

此<div>的高度不是0。span元素前面有宽度0的空白字符