css概述四

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      阴影颜色

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

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

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

外边距无效

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

取值：top/middle/bottom

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

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

table是一种特殊的表现方式

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

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

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

border-collapse:

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

           collapse 边框合并状态

border-spacing:x  y;

取值，以px为单位的数字

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

caption-side:

取值 top/bottom

table-layout:

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

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

     fixed 固定表格布局

           td的大小就以尺寸为准

自动布局

固定布局

单元格的大小会自动适应内容

单元格取决于设置的值

表格复杂时，加载速度较慢

任何情况下，都是逐行渲染，渲染速度快

自动布局比较灵活

固定表格布局不够灵活

适用于不确定每列大小，并且不复杂的表格

适用于明确知道每列大小的表格

定义元素在页面中位置

1.普通流定位

2.浮动定位

3.相对定位

4.绝对定位

5.固定定位

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

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

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

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

让块级元素横向显示

float:

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

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

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

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

      3.none 默认值，不浮动

浮动的特点

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

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

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

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

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

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

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

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

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

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

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

3.变成块级元素

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

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

clear:

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

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

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

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

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

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

所以高度为0

解决方案：

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

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

正确的解决方案：

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

给这个元素设置clear：both;

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

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

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

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