一、包含块
目的:确定元素的位置和相对大小(%)
1.正常文档流元素和浮动元素 ---- 父元素的 content-box
2.绝对定位元素 ---- 父元素的 padding-box
3.固定定位元素 ---- 视口
二、负外边距
document.documentElement.clientWidth; 视口宽度
window.onresize 监控视口改变
三、字体
字体简写:
当 line-height 书写在 font 属性上 ,会覆盖 line-height 的值
字体大小:
默认是 16px
在Chrome 最小字体只能设置到 12px
字体族
衬线字体 笔画起始位置有修饰,横竖宽度不同
非衬线字体 笔画起始位置没有修饰,横竖宽度相同
四、文本
水平对齐(text-algin)
设置在块元素中(指定宽度)
让块元素中的文本,行内元素(内联元素 inline),行内块(inline-block ,img input)一行的水平方向对齐。
行高
设置在块元素中(指定宽度,高度)
当 行高 = 元素高度时,让块元素中的文本,行内元素(内联元素 inline) 在一行中的的垂直方向对齐。
行内块元素需要设置 垂直对齐 (vertical-align: middle )
行高计算:
当行高的值是 number(数字) 是基于元素的文本大小计算
行高对父元素高度的影响:
当父元素未指定高度,行高撑起父元素的高度。
垂直对齐 (vertical-align)
1、给行内块元素设置垂直对齐,设置在行内垂直方向的位置
2、给行内元素设置垂直对齐,设置在行内垂直方向的位置
3、给行<td>,或者 display: table-cell的元素设置垂直对齐,
让其文本内容,后代元素在元素自身的垂直方向对齐。
五、背景
区别背景的使用场景: 不重要的网站信息,图标。