T-CSS基础-day05-浮动、样式属性、定位

十.浮动

元素一旦浮动，会脱离文档流
脱离文档流的元素会发生4件事

1. 不占页面空间
2. 后续元素上前补位
3. 如果脱离文档流的元素，未定义宽度，元素脱离文档流后，宽度是靠内容撑开
4. 元素一旦脱离文档流，会变成块级元素

十一.其它样式属性

1. 显示方式
   1. 什么是显示方式
      决定了元素在网页中的表现形式(块级，行内，行内块，table…)
   2. 语法
      display:
      取值：
      block; ：让元素按照块级元素的规则去显示
      inline; ：让元素按照行内元素的规则去显示
      inline-block; ：让元素按照行内块级元素的规则去显示
      table; ：让元素按照table元素的规则去显示
      none; ：隐藏，脱离文档流的隐藏（常用）
2. 显示效果
   visibility：
   取值：
   visible;： 默认值，可见的
   hidden;：隐藏（时不脱离文档流的隐藏，占空间）
   考试题，和面试常问：visibility：hidden;和display：none;的区别：
   答：visibility：hidden; 的隐藏，是不脱离文档流的隐藏，占空间；display：none; 是脱离文档流的隐藏，不占空间。
3. 透明度
   opacity: 0~1; ：0全透明，1不透明
   之前学过：rgba(r,g,b,alpha)
   问题，rgba(r,g,b,alpha)和opacity的区别
   rgba()只会改变当前元素颜色的透明度
   opacity只要是跟当前元素相关元素的颜色，都会改变，即包括后代元素的所有颜色
4. 垂直对齐方式
   vertical-align:
   使用场合：
   1. 表格中使用td tr table
      取值：top/middle/bottom/baseline（默认值）
   2. 给img或者行内块定义ertical-align
      改变的是元素前后的文本/行内元素，与本元素的垂直对齐方式
      img—>top/middle/bottom / baseline（默认值） 通常，会把默认的baseline修改成其他值（因为baseline太丑）
      
      行内块—>没有baseline 的取值 只有top/middle(默认值)/bottom
5. 光标的设置
   cursor:
   取值：
   1. default (部分元素的默认值)，箭头
   2. pointer 手指头
   3. crosshair 十字
   4. wait 等待
   5. help 帮助
   6. text 文本
6. 列表的样式
   1. 设置列表项的样式
      list-style-type: disc(默认)/circle/square/none(最常用);
   2. 把列表项设置成图片(图片需要小)
      list-style-image: url(sinablog.png);
   3. 列表项的位置（ul自带上下外边距16px。左内边距40px）
      list-style-position:
      取值：
      outside;：(默认)在li外，在ul的左内边距中
      inside; ：在li内部
   4. 简写方式
      list-style:type image position;
      项目中最常用的写法 list-style:none; 给ul去点
      项目，经常使用ul>li替代div布局

十二.定位

默认文档流定位，浮动都已经掌握
定位的分类：①相对定位；②绝对定位；③固定定位

1. 公共语法
   position
   取值：
   static：默认值，静态（默认文档流）
   relative：相对定位
   absolute：绝对定位
   fixed：固定定位
   注意：当一个元素被position修饰，并且取值为relative,absolute,fixed其中一种时：
   1. 这个元素被称为已定位元素
   2. 这个元素解锁了5个偏移属性
      top：元素到顶端的距离
      right:
      bottom:
      left: 元素到左边的距离
      z-index：堆叠顺序
   3. 当同时定义top/bottom，以top为准
      同时定义left/right，以left为准
2. 相对定位
   1. position:relative;：配合偏移属性使用
      1. 相对定位不脱离文档流
      2. 相对定位的参照物,是相对自己原来的位置做偏移
      3. 如果相对定位元素，不写偏移属性，效果和没写定位一样
   2. 使用相对定位的场合
      1. 元素位置的微调，类似于margin(但不会把其他元素挤走，而是堆叠)
      2. 相对定位，一般作为绝对定位元素的祖先级定位元素使用！！！！
3. 绝对定位
   position:absolute;
   1. 绝对定位脱离文档流
   2. 相对谁偏移
      1. 如果该元素，没有已定位的祖先级元素，相对body左上角做偏移
      2. 如果组先级元素有定位，则相对于最近的，已定位的，祖先级元素做偏移
   3. 祖先级元素，要做已定位元素，用什么定位好：
      项目中，经常设置祖先级已定位元素为relative
4. 固定定位
   position：fixed;
   永远以body左上角偏移
   脱离文档流
5. 堆叠顺序
   1. 默认的堆叠顺序，后写的定位元素，堆叠顺序高(堆叠顺序以html编写顺序为准)，默认的堆叠顺序的z-index永远大于0，小于1
   2. 手动设置堆叠顺序 z-index：取值无单位数字
   3. float的浮动二楼，和定位的堆叠，不是一个体系，不能比较（float相当于(其实不能比较)定位的z-index默认值0）
   4. 只有已定位元素才支持z-index
   5. 堆叠顺序，对父子级关系无效，儿子永远在爹上面显示