css3笔记

1、文本属性
   1、color 
      color:颜色值
   2、text-align
      控制元素内的文本(或行内元素)的水平对齐方式
      取值：
          left,center,right,justify
   3、text-decoration  
      文字(线条)修饰
      取值：
           underline : 下划线
  overline : 上划线
  line-through : 删除线
  none : 无线条样式
   4、line-height
      行高 ：一行元素所占的高度是多少
      注意：如果行高 高于 字体高度的话，那么内容就会在这段行高的高度范围内"垂直居中"显示
      只适合一行数据去设置 垂直居中 的事情
   5、text-indent
      text-indent:20px;
      首行文本缩进
   6、文本阴影
      text-shadow:h-shadow v-shadow blur color;


    练习：
      1、标签、心得
          #9C9A9C


      2、比洗衣粉好
          #333
      3、买了几次 
          #666
2、表格
   1、表格常用样式属性
      1、内边距
         padding
      2、尺寸属性
         width,height
设置表格 或  单元格的尺寸
      3、文本格式化属性
         color
text-align
text-decoration
... ...
      4、背景属性
         background-color
background-image
      5、边框属性
         border
表格 单元格
      6、文本垂直对齐方式
         table属性 v-align


vertical-align:设置内容的垂直对齐方式
取值：
     top/middle/bottom/baseline(基线对齐)
   2、表格特有样式属性
      只有在表格中有效
      1、边框合并
         即设置了表格边框，也设置了单元格边框，边框的表现形式类似于双线边框
属性：border-collapse   合并相邻边框
取值：
      separate : 默认值，即分离边框
      collapse : 合并
注意：该属性只能设置给table
      2、边框边距
         表格属性 cellspacing
属性：border-spacing
  作用：设置相邻单元格之间的距离
  注意：仅限于分离边框时可用 border-collapse:separate;
取值：
  一个值：水平 和  垂直 两个方向的间距
  两个值：第一个值 水平间距 ，第二个值 垂直间距，中间用 空格 区分
      3、显示规则
         属性：table-layout
作用：帮助浏览器如何显示 或 布局 一张表格。用来设置 单元格 宽或高的算法规则。
取值：
     auto ：列的宽度由内容决定，默认值，即自动表格布局
     fixed ：列的宽度由列宽设定，即固定表格布局
 自动表格布局：
   1、单元格大小会适应内容
   2、表格复杂时，会比较慢(因为每行都要计算)
   3、适用于不知道每列大小的时候
 固定表格布局：
   1、列宽度以设定值为准，不以内容为准
   2、会加速显示表格,(以后的所有行不需要计算)


 固定表格布局算法比较快，但不太灵活
 自动表格布局比较慢，但是更能体现表格的特点
*******************************************************
1、浮动
   1、定位
      1、什么是定位
         定义元素框相对于其正常位置应该出现的位置
东西 放哪
      2、定位分类
         1、普通流定位(默认)
2、浮动定位
3、相对定位
4、绝对定位
5、固定定位
      3、普通流定位
         普通流， 又称之为 文档流
规定了 页面中的块级元素 从上到下 一个接一个的排列
规定了 页面内联元素(行内元素) 从左到右的水平排列
   2、浮动定位
      1、什么是浮动定位
         1、浮动定位会将元素排除在文档流之外，即脱离文档流
2、浮动元素不占据页面空间
3、浮动 将元素放在包含框(父元素)的"左边"或者"右边",或者已经浮动起来的元素
4、浮动元素依旧位于包含框之内
      2、浮动注意问题
         1、浮动元素的外边缘不会超过父元素的内边缘
2、浮动元素不会互相重叠
3、浮动元素只能左右浮动，不能上下浮动
      3、实现浮动
         属性：float
取值：none / left / right
      4、清除浮动所带来的影响
         属性：clear
取值：none / left / right / both
      5、浮动引发的问题
         包含框内的元素应用了float后，包含框的高度会发生变化
解决方案1：让包含框的高度自适应浮动元素的高度
 overflow:hidden;
         overflow的作用：
  1、溢出后隐藏(之前学习)
  2、设置在包含框元素上，让其高度去适应浮动的子元素
解决方案2：在包含框内放置一个不浮动的元素，并且清除浮动对它所带来的影响即可
解决方案3：设置包含框的高度即可
解决方案4：后续内容 ....










      6、注意问题
         1、元素一旦浮动起来之后，那么宽度就会变得自适应，不再是 100% 
2、行内元素 一旦浮动的话 就会变成块级元素
   行内：不允许修改尺寸
   块级：允许修改尺寸
2、显示
   1、显示方式
      块级元素：块框
      内联元素/行内元素：行内框


      属性：display
      取值：
           1、none
     让生成的元素没有框
     生成的元素不显示，而且不占文档的空间
     隐藏
  2、block
     按块级元素显示
     div,p,h1,h2,h6,dl,dt,dd ...
  3、inline
     按行内元素显示
     span,b,i,s,u,sup,sub,
  4、inline-block
     行内块
     img
     特点：一行内可以显示多个，并且允许修改元素的宽和高
注意：页面中，通常使用 display:none;设置元素的隐藏。先显示的时候，再将display改成元素默认的显示方式。
   2、显示效果
      1、显示隐藏
         属性：visibility
取值：
     visible ：默认值，元素可见
     hidden ：元素不可见，但是依然占据空间
     collapse ：用在表格中。
      2、透明度
         属性：opacity
取值：0 - 1 之间的数字（小数、0、1）
      从 0.0(完全透明) - 1.0(完全不透明)
      3、垂直对齐方式
         属性：vertical-align
取值：top/middle/bottom/baseline


设置 单元格 中元素的垂直对齐方式
针对行内块元素，可以设置行内块元素两端的文本，相对该元素的垂直对齐方式


注意：设置图片的vertical-align:非baseline以外的其他值，可以解决下边多出 3px 的问题
   3、光标
      通过css属性 设置 光标的显示状态
      属性：cursor
      取值：
           default : 默认
  pointer : 小手
  crosshair : +
  text : I
  wait : 
  help :