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.元素定位以后会脱离文档流，不占据页面空间。
?????
?
?
CSS-表格特有属性和定位
原文地址：https://www.cnblogs.com/QiliPING9/p/9027756.html