笔记整理-知识点
一、字体相关属性(font)
1、字体族：font-family:设置字体族，可以设置多个用空格分开，多个单词的字体族需要加双引号分界符；通用字体族：衬线字体、无衬线字体、等宽字体、草书字体、艺术字体
2、font-size:设置字体大小，单位px、%、em(相对于父级)、rem（相对于根）
3、font-weight:设置字体粗细，值：normal、bold、bolder、lighter；
4、font-style:设置字体样式：normal、italic、oblique；
5、font-variant:设置字体变形，值：normal、small-caps;
5、font：字体相关熟悉缩写：font-size、font-family必选值，顺序固定，在最后；前面的值为可选，顺序任意
6、@font-face{}:自定义字体，属性值于字体相同，src为必选（新增），font-family也是必选；src属性中常用关键字：url|local、format;
@font-face{font-family:"字体名"；src:local("检测本地字体有无，友则优先加载")，url("字体路径可以支持远程加载")format("是否允许跳过不支持下载的字体opentype|truetype");}
7、font-size:还可以同时设置行高，例如：font-size:12px/1.2;
二、文本相关属性
1、文本常用属性：text-indent:设置文本块首行缩进，允许负值常见单位：em、rem、%；
2、text-align:设置文本行内对其方式：right center left css3新增start end justify;
3、vertical-align:设置文本垂直对齐：super、top、bottom、baseline、sub、middle、text-top|buttom(元素与父级元素顶|底部对齐)
4、line-height:设置行高，不设置依据父级font-size自动计算；值与font-size相同；
5、word-spacing:设置单词间距；normal px
6、text-decoration:设置文本修饰
| 属性 | 描述 |
|---|---|
| none | 默认。定义标准的文本 |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本下的一条线 |
| blink | 定义闪烁的文本 |
| inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
7、overflow-wrap:文本溢出换行
| 属性 | 描述 |
|---|---|
| normal | 允许内容顶开或溢出指定的容器边界 |
| break-word | 内容将在边界内换行 |
8、中文文本书写方式：writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottomvertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-leftvertical-lr：垂直方向内内容从上到下，水平方向从左到右sideways-rl：内容垂直方向从上到下排列sideways-lr：内容垂直方向从下到上排列
三、盒子模型相关属性
1、框模型：
| 序号 | 名称 | 描述 |
|---|---|---|
| 1 | 内容区content |
必须要有,它的四周区域是可选的width，height |
| 2 | 内边距padding |
内容与边框之间的填充区域；透明；控制盒子大小 |
| 3 | 边框border |
边框可以将内容区与外界进行隔离；可以设置样式和颜色，一般颜色和前景色和文字颜色一致 |
| 4 | 外边距 margin |
多个盒子之间的间隙透明 ；可以设置负值，最大的为准 |
2、box-sizing:content-box（撑大盒子）|border-box（content自适应盒子大小）;设置盒子的边界
3、轮廓outline: 位于 border 与 margin 之间,因为不占空间；
4、通过margin：auto;可以设置盒子水平居中，但无法设置垂直居中；margin设置上下外边距auto,浏览器会转换为0；
5、浮动和定位：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>body p {writing-mode: vertical-lr;background-color: red;/* text-orientation: mixed; */}.box1 {width: 400px;height: 400px;background-color: #ff00ff;margin: 10px auto;position: relative;}.box2 {width: 200px;height: 200px;background-color: #ffff00;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}.box3 {width: 100px;height: 100px;background-color: #ff0000;margin: auto;}.box4 {width: 50px;height: 50px;background-color: #00ff00;display: table-cell;vertical-align: middle;text-align: center;}</style></head><body><p>中华任命共和国</p><div class="box1"><div class="box2"><div class="box3"><div class="box4"><p>中</p></div></div></div></div></body></html>
2、运行效果图
总结：
1、字体和文本相关属性在使用过程容易忽视，但使用起来效果也非常nice!例如中文，竖版排列；
2、盒子模型是网页布局的基础知识，需要重点理解
3、float和position虽然以后不经常使用，但在有些方面微调使用起来还是非常方便的例如{position：relative;top:10;left:10;}