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

文本格式化、表格、浮动

• 1 文本格式化
• • • 1.1 文本格式化概述
    • 1.2 字体属性
    • • 1.2.1 控制字体
      • 1.2.2 字体属性font
    • 1.3 文本属性
• 2 表格
• • • 2.1 表格常用样式属性
    • • 2.1.1 表格常用样式属性
      • 2.1.2 垂直方向对齐
    • 2.2 表格特有样式属性
    • • 2.2.1 边框合并
      • 2.2.2 边框边距
      • 2.2.3 标题位置
      • 2.2.4 显示规则
• 3 浮动
• • • 3.1 定位概述
    • • 3.1.1 定位概述
      • 3.1.2 普通流定位(文档流定位)
    • 3.2 浮动定位float
    • • 3.2.1 浮动概述
      • 3.2.2 浮动定位
      • 3.2.3 float属性
      • 3.2.4 clear属性
      • 3.2.5 float与overflow

1 文本格式化

1.1 文本格式化概述

控制字体：字体大小、字体加粗、字体系列等；

设置文本格式：文本颜色、文本排列和文本缩进等；

使用文本格式化相关样式，取代加粗< b >、倾斜< i >等HTML元素

1.2 字体属性

1.2.1 控制字体

指定字体，font-family: value1, value2;

字体大小，font-size: value;单位px,pt,em/rem

字体加粗，font-weight: normal/bold bolder lighter/无单位整百数字常用400~900;

字体样式，font-style: normal/italic;

小型大写字母，font-variant: normal/small-caps全为大写字母，但除首字母外的字母尺寸较小;

1.2.2 字体属性font

字体属性font用于把所有针对字体的属性设置在一个声明中。

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-height: 以px为单位的数字。无单位的数字表示行高高度是字体大小的多少倍

首行文本缩进 text-indent: value;以px为单位

文本阴影 text-shadow: h-shadow v-shadow blur color;横向偏移，纵向偏移，模糊距离，阴影颜色

2 表格

2.1 表格常用样式属性

2.1.1 表格常用样式属性

边距属性：table能使用margin和padding，但是td只能使用padding(margin无效)

尺寸属性：width、height；设置表格或者单元格的尺寸

文本格式化属性 font-* text-* line-height

背景属性：设置表格或者单元格的背景色或者背景图像

border属性：设置表格的边框

2.1.2 垂直方向对齐

vertical-align属性：在表单元格中设置单元格内容的对齐方式

取值：vertical-align:top/middle/bottom

写在td生效

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：固定表格布局，与单元格内容无关，取决于表格宽度、列宽度、表格边框宽度、单元格间距,需要table、td有尺寸

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

3 浮动

3.1 定位概述

3.1.1 定位概述

定位：定义元素框相对其正常位置应该出现的位置，或者相对于父元素、另一个元素或者浏览器窗口本身的位置

1）普通流定位

2）浮动定位

3）相对定位

4）绝对定位

3.1.2 普通流定位(文档流定位)

块级元素框从上到下排列：块级元素出现在新的行(p、div)；元素框之间的垂直距离由框的垂直外边距计算；

行内元素：在一行中从左到右排列水平布置，可以使用水平内边距、可以用水平内边距、边框和外边距调整间距

3.2 浮动定位float

3.2.1 浮动概述

浮动定位指将元素脱离标准文档流，元素将不在页面占用空间(只在同行及下方空间排列，不会影响上方空间)，浮动元素位于包含框之内，可以放置在包含框的左边或者右边，会覆盖普通文档流的元素；

浮动框向左或向右移动直到外边缘碰到包含框或另一个浮动框的边框，常使用实现特殊定位效果；

解决多个块级元素同一行显示的问题

3.2.2 浮动定位

浮动引发的特殊情况：

1. 父元素显示不下所有浮动元素，将换行显示(可能被卡住)；

   默认情况，浮动元素优先显示在最高的位置再往左排列；

   发生浮动元素占位(左浮则占据左边所有空间)，浮动元素根据浮动方向占据方向之上的位置，不允许占用前面元素占据的空间；

2. 未指定宽的块级元素浮动后，宽度以内容为准(标准块级元素宽度占父元素100%)；
3. 元素浮动后变为块级元素，允许修改尺寸以及设置垂直外边距，由于脱离默认文档流，只能通过外层div设置margin：auto控制水平居中
4. 文本、行内元素、行内块不会被浮动元素压在下面，而是环绕浮动元素显示

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

3.2.3 float属性

使用float属性来设置元素左浮还是右浮

float: none/left/right;

3.2.4 clear属性

clear属性用于清除浮动带来的影响

取值：left/right/both/none 不被左/右/左右浮动影响

3.2.5 float与overflow

高度坍塌，父元素不写高，高度默认以内部元素最高为准，内部元素浮动后不占据默认文档流的高度，所以父元素高度为0；

解决方案：

1. 父级元素添加高度

   弊端：不能每次知道父元素高度；

2. 父级元素设置浮动

   弊端：父元素设置浮动后会影响其它元素；

3. 父元素设置溢出overflow: hidden/auto

   弊端：如果内容有需要溢出显示的会被隐藏

4. 父元素中追加一个空的块级元素，不设置宽高，只设置clear:both;使用clear:both消除浮动元素的影响，这时块级元素将位于浮动元素之下，即创建了高度
5. (推荐)CSS3新属性

   .clear:after{
   	content:"";
   	display:block;
   	clear:both;
   }