css（3）-CSDN博客

本文链接：https://blog.csdn.net/timeares/article/details/115407454

一、表格
1.表格的常用属性
边距属性：padding ( td中 margin无效)
边框属性：border
尺寸属性：width height
文本属性：font-** text-* line-height
背景属性：颜色图片渐变
指定单元格数据的垂直对齐方式：vertical-align: top/middle/bottom
2.表格的特有属性
边框的分离
border-collapse:
separate （默认值）分离
collapse 合并
边框的边距
border-spacing:
必须保证边框是分离状态
取值：1个值水平和垂直距离相同
2个值第一个值水平，第二个值垂直方向的距离
3.标题位置
caption-side
取值：
top 默认值
bottom 表格下方位置
4.显示规则
告诉浏览器如何渲染一张表格
table-layout：
auto 默认值自动布局表格表格的大小由内容决定
fixed 固定表格，列的尺寸由设置的尺寸为准
自动布局VS固定布局

自动布局	固定布局
单元格大小会自适应	单元格取决于设定的尺寸
表格赋值时，加载速度较慢（缺点）	任何情况下会加速加载表格（优点）
自动布局比较灵活（优点）	布局不够灵活（缺点）
适用于不确定每列表格大小不复杂的时候	适用于确定每列尺寸的表格使用

二定位（*************）
1.什么是定位
改变元素在页面中的位置
2.分类
普通流定位
浮动定位
相对定位
绝对定位
固定定位
普通流定位
页面中元素的默认定位方式，默认方式定位默认文档流
从上往下从左往右
1.每个元素都有自己的空间
2.每个元素都是从父元素的左上角开始渲染
浮动
在当前行，向左或者向右排列
浮动BUG

当父元素显示不下所有已经浮动的元素时显示不下的元素将换行
换行的规则：优先上浮，之后向左/向右对齐
浮动元素占位，浮动元素会根据浮动方向，占据方向上的位置，不让其他位置占用
不让其他后面浮动元素占用
元素一旦浮动，如果没有定义宽度，宽度以内容为准
元素一旦浮动就变为块级元素
文本，行内元素，行内块是不会被浮动元素压在下方，而是巧妙的避开了所有的元素，环绕着浮动元素显示
清除浮动
元素一旦浮动起来会对后续的元素造成影响（后续元素会上前补位）如果后续元素不想上前补位则给后续元素设置clear属性清除前面浮动元素对我的影响
clear: left/right/both;
高度坍塌
块级元素的高度如果不设置，高度以内部元素为准
但是如果内部元素都浮动，浮动元素不占据空间，父元素的高度就没有了
解决方案
直接设置父元素高度弊端：不知道高度的情况下没办法设置
父元素也浮动弊端：影响后续元素
overflow: hidden /auto弊端：当元素真正需要显示溢出内容时，就显示不出来了
在父元素中追加一个空元素，并设置clear：both
三、显示
display
取值： block inline-block table none inline
table 尺寸以内容为准，每个元素独占一行，允许修改尺寸
显示效果
visibility
取值： 1.visible 默认可见 2. hidden 隐藏
question：
display：none 和 visibility：hidden区别
display:none; 隐藏脱离文档流不占据页面空间
visibility:hidden; 隐藏不脱离文档流占据页面空间
透明度
opacity 取值：0~1 越小越透明
Q：opacity和rgba()区别
opacity 作用于元素，只要跟元素相关的颜色都会跟着透明，可以作用到子元素
rgba()只作用于当前颜色的透明度，不影响其他
垂直对齐方式
vertical-align
取值： top/middle/bottom
使用场合：
1 table标签中，控制文字的垂直对齐
2 img标签，控制图片与前后文字的垂直对齐方式（给img元素设置该属性）
取值： top/middle/bottom/baseline
编写网页的时候，通常会将所有的图片垂直对齐方式改为除了基线意外的方式
光标的样式
cursor
取值：default （箭头） pointer（小手） text（文本） crosshair （十字型） wait （等待） help（问号）
四、列表
列表项背景图片
list-style-image: url(资源路径);
列表项的位置
list-style-position ：取值
inside将默认的列表项位置放在li里面
outside 默认列表项在li外面
简写：
list-style ：type url position
关键字：表格、定位、显示、列表难度：定位中的浮动有需要bug需要记住