CSS权威指南第7章视觉格式化基础

7.1 元素框基础

元素框: CSS假定每个元素都生成一个或多个矩形框.

内容区域
内边距
边框
轮廓
外边距

7.1.1 重要概念概览

常规流动: 从上到下,从左到右的顺序布局.此外还有其他几种布局

浮动
定位
弹性盒
栅格布局

非置换元素: 内容包含在文档中的元素

p,div等内容本身就在文档中

置换元素: 为其他内容占位的元素

img,input等会插入新内容

根元素:文档树顶端的元素

HTML中是<html>

块级框: 在常规流动模式下,块级框前后断行,纵向堆叠

p,div等元素生成的框
display: block

行内框: 前后不换行

span,strong等元素生成的框
display: inline

行内块级框: 内部特征像块级元素,外部特征像行内框

7.1.2 容纳块

容纳块: 每个元素都相对容纳块放置,容纳块是元素框体的布局上下文

常规流动模式下,容纳块由离元素最近的那个生成列表项或块级框的毫厘元素构成
html是初始容纳块,其尺寸由视区决定

7.2 调整元素的显示方式

7.2.1 改变显示方式

元素分为块级元素,行内元素,还有流动元素.display属性改变的只是元素的显示方式,而无法改变元素的种类.所以不管怎么变,块级元素都不能放在行内元素中间.

7.2.2 块级框

box-sizing:可以调整width和height的具体意义,能影响到可以设定width 和 height的所有元素

content-box: 元素框 = 内容高宽
padding-box: 元素框 = 内容 + padding高宽
border-box: 元素框 = 内容 + padding + border + margin高宽

7.2.3 横向格式化

常规流程方式下,块级框各组成部分的横向尺寸始终等于容纳块的宽度

7.2.4 横向格式化属性

七个属性: 这7个属性的值加起来等于容纳块的宽度

三个可设置auto

7.2.5 使用auto

auto的作用: 如果把width margin-left margin-right中两个设为具体值,另外一个设为auto`,那么auto这个属性的宽度,要能满足元素框的宽度等于容纳块的宽度.

过约束: 如果3个属性都设置为具体值,那么margin-right会被强制设置为auto

7.2.6 多个auto

1个auto: 其宽等于容纳块宽 - 另外两个具体值的宽

2个auto:

margin-left margin-right为auto的时候, 其宽等于 (容纳块 - width) / 2
maring-* width为auto的时候, margin-*会被设置为0

3个auto:两侧的外边距会被设为0

7.2.7 负外边距

2种情况:

当总宽度大于容纳块宽度时,右边框会自动被设置为负数
当外边距被设置成为负数时,width会自动增加宽度(会大于容纳块的宽度)以满足所有的的合等于容纳块的宽度

7.2.8 百分数

尽量不要把百分数和绝对值用在一起

7.2.9 置换元素

width:auto: 置换元素的宽度等于内容本身的宽度

如果width的值和内容本身宽度不一样,height会按比例自动变化,除非明确设置height的值

7.2.10 纵向格式化

默认情况下,元素的内容决定元素的高度

宽度对高度也有影响,即当内容多换行时高度就会增加

7.2.11 纵向格式化属性

也是7个属性,不同的是,mt, mb设置为auto时会自动设置为0.导致常规流动模式下,无法轻易的在容纳块中纵向居中

7.2.12 百分数高度

百分数高度相对于容纳块来设置的,如果容纳块没有声明高度,那么百分数高度为重置为auto,计算后的值就是0了..

7.2.13 自动调整高度

常规流动模式下,柜体的高度恰好放得下里面的内容.

子元素外边距合并的原因:默认的高度是最上边的块级子代元素的上边框,到最下边的块级子代元素的下边框之间的距离.不包含外边距,所以外边距会游离在父元素外面

7.2.14 折叠纵向外边距

相邻的纵向外边距会被折叠,取值大的那个

为容纳块添加边框或内边距之后,子元素的外边距便会包含其中,就不会折叠外边距了.

7.2.15 负外边距和折叠

如果都是负值: 取绝对值大的那个
如果一正一负: 则取其和之后的值
如果有多个元素,负值取最大的,再与正值最大的相加

7.2.16 列表项目

记号不在列表项目的内容区中

7.3 行内元素

本书不讨论表格装饰,因为这是一个全新的领域,而且异常繁琐...

7.3.1 行布局

行内元素不能设定宽高

其宽度由内容的多少决定
其高度由父元素的宽度和内容的多少决定

7.3.2 基本术语和概念

匿名文本: 不在任何行内元素中的字符串
字体框: 由具体字体定义,font-size控制字体框的高度.字形可能比字体框高或者矮
内容区: 各字符的字体框/或字形连在一起构成的方框
- 对置换元素来说,内容区是元素自身的高度加上内外边路和边框
- 相当于块级元素的内容框
- 行内元素的背景填充在内容区+内边距所在的区域里
- 行内元素的边框在内容区外的内边距外侧
行距: font-size 和 font-height之差
- 置换元素没有行距
行内框: 内容区加行距和得到的方框
- 非置换元素内边距,边框和外边距对行内框的高度没有影响
- 置换元素有影响
- 行内框在一行中纵向对齐的方式由vertical-align属性决定
行框: 一行中,各行内框最高点和最低点的方框.

7.3.3 行内格式化

如何确定一行的高度

一行的高度,即行框的高度
由其内部的元素及其他内容的高度决定

没有内容,就没有高度

<p></p> // => 高度为0

为块级元素设置line-height值的作用是为块级元素的内容设定行框的最小高度.

7.3.4 行内非置换元素

行框的构成:

确定font-size的值
确定line-heihgt的值
确定行内框的值
确定行框的值

纵向对齐vertical-align:

top: 行内框的顶边与所在行框的顶边对齐
bottom: 行内框的底边与所在行框的底边对齐
text-top: 行内框的顶边与父元素内容区的顶边对齐
text-bottom: 行内框的底边与父元素的底边对齐
super,sub不管
percentage: 向上或向下移动元素,百分数取值以line-height为准

基线与行高: 字体框中基线的位置在每个字体中不尽相同,是存放在字体文件里的.不过大部分是以x下边为准.

因为默认对齐是基于基线,所以它对行高的影响非常大

按比例设定行高:

最佳实践,是把line-height设置成纯数字.只是一个比例因子
因子能被继承,而不计算为具体的值
这样在不同的字号的元素上,行高就自动变化了

加上盒模型属性:

边框的边界由font-size和padding控制,不受line-heihgt影响,因为line-height只影响行内框而不影响内容区
内边距不影响内容区的高度,也不影响行内框的高度,但是会影响内容区的高度
没有上下外边距
行框是按文本出现在文本中的顺序绘制的,会导致后面的行出现在前面行之上

改变断行行为box-decoration-break 当行内非置换元素换行时,由该属性决定其换行后的渲染方式.以下属性会受影响

bg
bd
bdi
bxsd
clip-path
m
p

字形与内容区

多数情况下,字体的字体框高度和字形高度是不一致的.

7.3.5 行内置换元素

行内置换元素自身是有高度和宽度的,它的行内框包含内容+外边距+边框+内边距

line-height对图像的行内框没有影响
纵向对齐中,一切都由line-height决定,和图像自身的高度没关系

加上盒模型属性

内边距和边框会影响行框的高度
负外边距减少置换元素的行内框高度

置换元素与基线

置换元素自身没有基线
置换元素的行内框底边与基线对齐

7.3.6 行内块级元素`inline-block`

行内块级元素在一行中的而已方式跟图像一样,是当做置换元素进行格式化的.

底边默认是与文本行的基线对齐
内部不会断行

7.3.7 流动显示方式

CSS一种新布局系统,外部显示类型和内部显示类型.display: inline table;

前面的inline,指外部显示类型,指明显示框与周围元素的关系
后面的table,指内部显示类型,指明元素内部的布局情况

7.3.8 contents显示方式`display: contents`

有点类似于vue里面的template,设置了这个属性的话,当前节点就不会渲染了.不过标签在HTML里面还是存在的

7.3.9 display的其他值

值太多了,暂时把常规流动,绝对定位,flex,grid搞清楚就行了

7.3.10 计算值

主要是在浮动和绝对定位时,不同的情况,计算出来的值不一样简单来说,基本上都会被渲染成block,有特殊属性搞不懂的时候,再来翻文档吧

学习笔记 CSS权威指南 第7章 视觉格式化基础

CSS权威指南 第7章 视觉格式化基础