这是我参与「第五届青训营」伴学笔记创作活动的第 3 天
整体布局
多栏布局
一般来说边栏是定宽度的，实现多栏布局有两种方法：
-
边栏和主栏同时定宽度，同时浮动即可
-
边栏定宽度，主栏通过创建BFC区域考虑浮动元素（该方法可以实现主栏自适应宽度）
等高布局
以两栏布局为例，侧边栏高度大大低于主栏高度
-
CSS3的弹性盒
-
JS控制
-
伪等高
元素书写顺序
要先写浮动元素！
后台管理页面布局
结合浮动和定位元素可以实现后台管理页面布局，具体见练习页面
浮动具体细节规则
-
左浮动的盒子向上向左排列
-
右浮动的盒子向上向右排列
- 浮动盒子的顶边不得高于上一个盒子的顶边
- 若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动
行高取值
- em为单位的：先计算像素值再继承
- 无单位纯数值：先继承之后再计算像素值
body背景
画布 canvas
一块区域
特点：
-
最小宽度为视口宽度
-
最小高度为视口高度
HTML元素的背景
覆盖画布
BODY元素的背景
如果HTML元素有背景，BODY元素正常（背景覆盖边框盒）
如果HTML元素没有背景，BODY元素的背景覆盖画布
关于画布背景图
- 背景图的宽度百分比，相对于视口
- 背景图的高度百分比，相对于网页高度
- 背景图的横向位置百分比、预设值，相对于视口
- 背景图的纵向位置百分比、预设值，相对于网页高度
行盒的垂直对齐
多个行盒垂直方向上的对齐
给没有对齐元素设置vertical-align
-
预设值 vertical-align：middle
-
数值 vertical-align：0px
图片的底部白边
图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往会出现空白。
-
设置父元素的字体大小为0（不推荐使用）
-
将图片设置为块盒
参考线-深入理解字体
font-size、line-height、vertical-align、font-family
文字
-
文字是通过一些文字制作软件制作的，比如fontforge
-
制作文字时，会有几根参考线，不同的文字类型，参考线不一样。同一种文字类型，参考线一致。
font-size
-
字体大小，设置的是文字的相对大小
-
文字的相对大小：1000、2048（2348）、1024
-
文字顶线到底线的距离，是文字的实际大小（content-area，内容区）
-
行盒的背景，覆盖content-area
行高
-
顶线向上延申的空间，和底线向下延申的空间，两个空间相等，该空间叫做gap（空隙）
-
gap默认情况下，是字体设计者决定
-
top到botoom（看ppt图），叫做virtual-area（虚拟区）
-
行高，就是virtual-area
-
line-height:normal，默认值，使用文字默认的gap
文字一定出现一行的最中间——错误
content-area一定出现在virtual-area的中间
