CSS-表格特有属性和定位

1.表格特有属性
1.边框合并
属性：border-collapse
取值：
1.separate 默认值，即分离边框模式
2.collapse 边框合并
2.边框边距
作用：设置单元格之间或单元格与表格之间的距离。
属性：border-spacing
取值：
1.给一个值：水平和垂直的间距相同
2.给两个值：
第一个值表示水平间距
第二个值表示垂直间距
注意：
只有在分离边框模式下，边框边距才有效，即border-collapse:separate;时，border-spacing才有效果。
3.表格标题位置
属性：caption-side
取值：
1.top 默认值，标题在表格的内容之上
2.bottom 标题位于表格内容之下
4.显示规则
作用：用来帮助浏览器指定如何布局一张表，也就是指定td尺寸的计算方式。
属性：table-layout
取值：
1.auto 默认值，即自动表格布局，列的尺寸实际上是由内容来决定的。
2.fixed 固定表格布局，列的尺寸由设定的值为准。
自动布局VS固定布局：
1.自动布局
1.单元格的大小会适应内容
2.表格复杂时，加载速度较慢（缺点）
3.自动布局会比较灵活（优点）
4.适用于表格不太复杂并且不确定每一列大小时使用
2.固定布局
1.单元格的尺寸取决于你设定的值
2.任何情况下都会加速显示表格（优点）
3.固定布局不够灵活（缺点）
4.适用于确定每列大小时使用
2.定位-浮动定位（重点）
1.定位
定位：指的是改变元素在页面中的默认位置（出现在应该出现的位置）。
2.定位的分类
按照定位的效果，可以分成以下几种：
1.普通流定位（默认定位方式）
2.浮动定位
3.相对定位
4.绝对定位
5.固定定位
3.普通流定位
普通流定位，又称为“文档流定位”，页面中元素们的默认显示方式。
1.每个元素在页面中有自己空间
2.默认都是在父元素的左上角开始显示
3.块级元素都是按照从上到下的方式逐个排列，每个元素独占一行。
4.行内元素以及行内块都是按照从左往右的方式排列，多个元素在一行中显示。
问题：如何让多个块级在一行中显示？
4.浮动定位
1.什么是浮动&特点
如果将元素的定位方式设置为浮动后，元素将具备以下特点：
1.严肃将被排除在文档流之外（脱离文档流），不再占据页面空间，未浮动元素上前补位。
2.浮动元素只能在当前行浮动。
3.浮动元素停靠在其父元素的左边或右边，或其他已经浮动的元素的边缘上。
2.语法
属性：float
取值：
1.left 左浮动，让元素停靠在父元素的左边，或挨着左侧已有的浮动元素。
2.right 右浮动，让元素停靠在父元素的右边，或挨着右侧已有的浮动元素。
3.none 默认值，无浮动
3.浮动引发的特殊效果
1.当父元素显示不下所有以浮动元素时，最后一个将换行，但是，有可能被卡主。
2.元素一旦浮动后，宽度将以内容为主（未指定宽度情况下）
3.元素一旦浮动起来后，将变为块级元素
允许修改尺寸；
能正常处理垂直外边距。
4.文本，行内元素，行内块元素采用环绕的方式来排列，是不会别浮动元素压在地下的，而是巧妙避开。

练习：
添加两个span元素，内容随意，让sapn浮动起来，并设置高宽属性，查看效果
4.清除浮动带来的影响
元素一旦浮动起来后，就会对后续元素带来一定的影响（后续元素上前补位），如果后续元素不想被影响（不想占位），那么就可以通过清除浮动来解决。
属性：clear
取值：
1.left 清除当前元素前面元素的左浮动带来的影响
2.right 清除当前元素前面元素的右浮动带来的影响
3.both 清除当前元素任何一种浮动带来的影响
4.none 默认值，不做任何清除操作
5.浮动元素对父元素的影响
元素的高度，都是以未浮动元素的高度为准的，浮动元素是不占高度的。
解决父元素高度的方案：
1.直接设置父元素的高度
弊端：不是每次都知道父元素的高度
2.设置父元素也浮动
弊端：不是任何时候父元素都需要浮动，而且浮动会影响后续元素
3.为父元素设置overflow
取值：hidden或auto
弊端：如果有内容需要溢出显示，也会一同被隐藏
4.在父元素中，追加一个空子元素(块级)，并设置其clear:both。
3.显示
1.显示方式
1.什么是显示方式？
决定了元素在页面中的表现形式（行内，块级，行内块，table）
2.语法
属性：display
取值：
1.none 不显示元素-隐藏
脱离文档流，不占页面空间。
2.block 让元素表现的与块级元素一致
允许设置高宽
3.inline 让元素表现的与行内元素一致
4.inline-block 让元素表现的与行内块元素一致
特点：允许修改尺寸
多个元素在一行中显示

5.table 显示为表格
特点：尺寸以内容为准
每个元素独占一行
允许修改尺寸
练习：
在页面中创建5个a标记，并写内容和href属性
1.分别为a标记设置不同的显示方式
none,block,inline,inline-block,table
2.给所有的a元素设置高宽各200px,然后查看效果。
2.显示效果
1.显示/隐藏
属性：visibility
取值：
1.visible 默认值，元素可见
2.hidden 隐藏，元素不可见
面试题：dispaly:none和visibility:hidden区别？
dispaly:none 会脱离文档流，不占页面空间
visibility:hidden 不脱离文档流，占据空间
3.透明度
属性：opacity
取值：0.0-1.0
注意：rgba() 与 opacity的区域
opacity作用于元素，以及元素内的所有内容的透明度。而rgba只作用于某一个属性的透明度（元素颜色或其背景颜色）。
4.垂直方向对齐方式
属性：vertical-align
场合：
1.表格中使用
取值：top/middle/bottom
2.图片中使用
作用：控制图片两边的文本的垂直对齐方式
取值：
top 顶部
middle 居中
bottom 底部
baseline 默认值，基线对齐
注意：
编写网页时，通常都会将所有图片的默认对齐方式更改为除baseline以外的对齐方式。
5.光标
1.作用
改变鼠标悬停在元素上时，鼠标的状态
2.语法
属性：cursor
取值：
1.default 箭头
2.pointer 小手
3.text I
4.wait 等待
5.crosshair +
6.help 帮助
4.列表
1.列表项标识
属性：list-style-type
取值：
1.none
2.disc
3.circle
4.square
2.列表项图像
作用：使用自定义图像作为列表标识
属性：list-style-image
取值：url(图片路径);
3.列表项的位置
属性：list-style-position
作用：将默认的列表项标识的位置放到li的里面。
取值：
1.outside 默认值，将标识放置li外面
2.inside 将标识放置于li里面
4.列表的简写方式
属性：list-style
取值：type url() position;
常用方式：
list-style:none;
练习：
完成如图所示效果
5.定位-相对 绝对 固定
1.定位属性
属性：position
取值：
1.static 静态的，默认值
2.relative 相对定位
3.absolute 绝对定位
4.fixed 固定定位
2.偏移属性
top/bottom/left/right
以上偏移属性取值均为数字(px)
ex:
top:100px; 向下偏移100px
top:-50px; 向上偏移50px
left:150px; 向右偏移150px
right:-150px; 向右偏移150px
3.定位方式
1.相对定位
1.什么是相对定位
元素会相对于它原来的位置偏移某个距离
2.使用场合
在做位置微调时使用
3.语法
position:relative;
配合偏移属性来实现位置的微调。
练习：
将上面列表练习中图片加上相对定位，向左上方偏移10px.
2.绝对定位
1.语法：
position:absolute;
配合偏移属性 实现位置的修改
2.使用场合
有堆叠顺序的元素
弹出菜单
3.特点
1.绝对定位的元素会相对于离他最近的 已定位的祖先元素 去实现位置的初始化，如果没有已定位的祖先元素，那么元素就相对于body去实现位置的初始化。
2.元素定位以后会脱离文档流，不占据页面空间。