指定字体，font-family: value1, value2;
字体大小，font-size: value;单位px,pt,em/rem
字体加粗，font-weight: normal/bold bolder lighter/无单位整百数字;
字体样式，font-style: normal/italic;
小型大写字母显示，font-variant: normal/small-caps;

1.2.2 字体属性font

字体属性font用于把所有针对字体的属性设置在一个声明中，6个按顺序设置的值。
font: font-style font-variant font-weight font-size font-family;不设置的值使用默认设置,但必须有size和family

1.3 文本属性

文本颜色 color: value;
文本排列 text-align: left/right/center/justify(两端对齐);
文字修饰 text-decoration: none/underline/line-through/overline;
行高 :定义一行数据的高度，如果行高高度大于字体本身大小，文本将在指定的行高内呈现垂直居中的效果,文本在div垂直中间显示，把div的高度设置给行高。但是注意，多行文字时会出现问题;
line-hight: 以px为单位的数字。无单位的数字，行高高度是字体大小的多少倍

首行文本缩进 text-indent: value;以px为单位
文本阴影 text-shadow: h-shadow v-shadow blur color;横向偏移，纵向偏移，模糊距离，阴影颜色

2 表格

2.1 表格常用样式属性

2.1.1 表格常用样式属性

边距属性：padding(margin无效)
尺寸属性：width、height；设置表格或者单元格的尺寸
文本格式化属性 font- text- line-height
背景属性：设置表格或者单元格的背景色或者背景图像
border属性：设置表格的边框

2.1.2 垂直方向对齐

vertical-align属性：在表单元格中设置单元格内容的对齐方式
取值：vertical-align:top/middle/bottom

2.2 表格特有样式属性

2.2.1 边框合并

设置了单元格的边框，相邻单元格的边框会单独显示。
border-collapse：separate/collapse;是否合并相邻的边框为单一边框

2.2.2 边框边距

border-spacing属性用于设置相邻单元格的边框间的距离，仅限于border-collapse属性为separate值的情况(边框分离模式)。
取值为一个值时为水平和垂直间距，两个值指定水平间距和垂直间距，用空格隔开

2.2.3 标题位置

caption-side属性设置表格标题的位置，指定表标题相对于表框的位置：top定位在表格之上，默认值；bottom定位在表格下方

2.2.4 显示规则

table-layout 属性设置显示表格单元格、行列的算法规则，取值：
auto：默认值，自动表格布局，内容决定列的尺寸；
fixed：固定表格布局，与单元格内容无关，取决于表格宽度、列宽度、表格边框宽度、单元格间距

自动布局	固定布局
单元格大小会适应内容	单元格大小取决设置的值
表格复杂时，加载速度慢(缺点)	任何情况下会加速加载表格(优)
自动布局比较灵活(优)	固定布局不灵活(缺点)
适用于不确定每列大小并且表格不复杂的时候使用	适用于确定每列尺寸使用

3 浮动

3.1 定位概述

3.1.1 定位概述

定位：定义元素框相对其正常位置应该出现的位置，或者相对于父元素、另一个元素或者浏览器窗口本身的位置
1）普通流定位
2）浮动定位
3）相对定位
4）绝对定位

3.1.2 普通流定位

块级元素框从上到下排列：块级元素出现在新的行(p、div)；元素框之间的垂直距离由框的垂直外边距计算；
行内元素：在一行中从左到右排列水平布置，可以使用水平内边距、可以用水平内边距、边框和外边距调整间距

3.2 浮动定位

3.2.1 浮动概述

浮动定位指将元素排除在标准文档流之外，元素将不在页面占用空间，浮动元素位于包含框之内，可以放置在包含框的左边或者右边；
浮动框向左或向右移动直到外边缘碰到包含框或另一个浮动框的边框，常使用实现特殊定位效果；
解决多个块级元素同一行显示的问题

浮动引发的特殊情况：

父元素显示不下所有浮动元素，将换行显示(可能被卡住)；
未指定宽的块级元素浮动后，宽度以内容为准；
元素浮动后变为块级元素，允许修改尺寸以及设置垂直外边距
文本、行内元素、行内块不会被浮动元素压在下面，而是环绕浮动元素显示

3.2.2 浮动定位

在这里插入图片描述

浮动元素外边缘不会超过父元素的内边缘；不会互相重叠也不会上下浮动

3.2.3 float属性

使用float属性来设置元素左浮还是右浮
float: none/left/right;

3.2.4 clear属性

clear属性用于清除浮动带来的影响，定义元素哪边不允许出现浮动元素
取值：left/right/both/none 不被左/右/左右浮动影响

3.2.5 float与overflow

高度坍塌，父元素不写高，高度默认以内部元素最高为准，内部元素浮动后不占据默认文档流的高度，所以父元素高度为0
在这里插入图片描述
解决方案：

父级元素添加高度
弊端：不能每次知道父元素高度；
父级元素设置浮动
弊端：父元素设置浮动后会影响其它元素；
父元素设置溢出overflow: hidden/auto
弊端：如果内容有需要溢出显示的会被隐藏
父元素中追加一个空的块级元素，不设置宽高，只设置clear:both

在这里插入图片描述

CSS3_3.文本格式化&表格&浮动

文本格式化、表格、浮动

1 文本格式化

1.1 文本格式化概述

1.2 字体属性

1.2.1 控制字体