css概述四

八.文本格式化

2.文本属性

①文本颜色

color:合法的颜色值

②文本对齐方式

text-align:

取值 left/center/right/justify

注意  1.一个元素写了text-align，控制的是内部的文本

2.这个元素自己想居中对齐，margin:0 auto;

3.text-align对是行内元素的孩子，都生效

4.孩子如果是块级元素，只会继承text-align。

而块级元素不会居中

③行高

line-height

取值 px为单位的数字

特性：如果行高的数值，大于字体的大小

那么该行文本将在指定的行高内部，成垂直居中的方式显示

行高，一般会设置成与容器高度相同的值，确保文字在容器垂直居中显示

如果文字发生折行，不建议使用行高做垂直居中

④文本的线条修饰

text-decoration:

取值 1.none 默认值，无线条

2.underline 下划线

3.overline 上划线

4.line-through 删除线

项目中使用最多的,a标签去除下划线 textdecoration:none;

⑤首行缩进

text-indent：以px为单位的数字

⑥文本阴影

text-shadow:h-shadow v-shadow blur color;

h-shadow 水平偏移

v-shadow 垂直偏移

blur       模糊距离

color      阴影颜色

九.表格

1.表格的常用样式

①table的样式

尺寸，边框，背景，字体，文本，内外边距。

设置table的边框，只设置最外边一圈边框

②td/th

尺寸，边框，背景，文字，文本，内边距都会起作用

外边距无效

vertical-align:设置单元格内部文本的垂直对齐方式

取值：top/middle/bottom

总结：vertical-align对tr,td,th有效，对table无效

2.table特殊的 显示方式

显示方式：行内元素，块级元素，行内块，table

table是一种特殊的表现方式

单元格内容较多，尺寸较小，单元格大小以内容为准

单元格内容较少，尺寸较大，单元格大小以尺寸为准

table在浏览器的渲染方式:先加载到浏览器内存中，在一次性画在页面上

3.表格的特有属性

①边框的合并和分离

border-collapse:

取值： separate 默认值，边框分离状态

collapse 边框合并状态

②边框的边距

border-spacing:x  y;

取值，以px为单位的数字

前提，边框必须是分离状态，才有效border-collapse: separate；

③表格的标题 <caption></caption>

caption-side:

取值 top/bottom

④设置表格的显示规则

table-layout:

取值 auto 默认值，自动表格布局。

td的大小以内容和尺寸较大为准

fixed 固定表格布局

td的大小就以尺寸为准

表格自动布局和固定布局的区别

自动布局	固定布局
单元格的大小会自动适应内容	单元格取决于设置的值
表格复杂时，加载速度较慢	任何情况下，都是逐行渲染，渲染速度快
自动布局比较灵活	固定表格布局不够灵活
适用于不确定每列大小，并且不复杂的表格	适用于明确知道每列大小的表格

十.定位（重要**************************************************）

1.什么定位

定义元素在页面中位置

2.定位的分类

1.普通流定位

2.浮动定位

3.相对定位

4.绝对定位

5.固定定位

3.普通流定位 (默认文档流定位)

1.每个元素在页面都有自己的空间

2.每个元素都是从父元素的左上角开始渲染

3.行内元素和行内块在同一行显示，从左往右，一行放不下，折行

4.块级元素独占一行，从上往下排列

4.浮动定位

让块级元素横向显示

float:

取值：1.left 左浮动，让元素浮动后停靠在父元素的左边，

或者其他已浮动元素的后面

2.right 左浮动，让元素浮动后停靠在父元素的右边，

或者其他已浮动元素的后面

3.none 默认值，不浮动

浮动的特点

1.元素一旦浮动，该元素脱离文档流

(不占页面空间,后面元素上前补位)

2.浮动元素，会在当前行，靠左/右，停靠在父元素的边缘，

或者是其他已浮动元素的边缘

3.父元素横向显示不下所有的浮动元素时，显示不下的部分会自动换行，

默认去距离当前行最近的位置

4.浮动，解决多个块级元素横向在一行显示的问题

5.浮动定位引发的特殊情况

①浮动元素的占位问题

当父元素一行显示不下所有浮动元素时，最后显示不下会换行。

默认去离当前行最近的一行。

但是，已浮动元素会根据自己的浮动方向占据位置，导致被挤下去的元素，会躲开被占据的位置，在更下方显示

②元素一旦浮动，如果元素没有定义宽度，那么浮动之后，元素的宽度靠内容撑开

③元素一旦脱离文档流，会变成块级元素，尺寸，垂直外边距都生效

④文本，行内元素，行内块元素，是不会被任何浮动元素压在下面的。

而是，巧妙的避开，环绕着浮动元素显示

脱离文档流，意味着什么

1.不占页面空间
2.后续元素上前补位

3.变成块级元素

6.清除浮动效果(清除浮动)

前面的浮动元素脱离文档，需要我上前补位

设置了清除浮动之后，我就不上前补位

clear:

取值：1.none;不清除浮动

2.right 清除之前右浮动元素给我的影响

3.left 清除之前左浮动元素给我带来的影响

4.both 清除左右元素给我带来的影响

7.高度坍塌

父元素如果不设置高度，高度默认是内部内容撑起来的

如果内部所有元素都浮动了，那么父元素认为内部就没有内容了

所以高度为0

解决方案：

1.给父元素设置高度。弊端，很多时候，不知道确切的高度

2.父元素也浮动。弊端，父元素的兄弟元素，会受到影响

正确的解决方案：

在最后一个子元素的后面追加一个空的块级元素

给这个元素设置clear：both;

那么这个元素停留在文档流中，父元素的高可以找到他

这个元素不会被前面的浮动元素覆盖(clear:both)

这个元素不写宽高，没有内容，那么默认宽度是父级的100%

高度为0，不影响父级高度