01、定位的层级
不做特殊设置的时候
定位元素的层级 比非定位元素的层级高
定位元素后来者居上
使用z-index 设置定位的层级,如果设置该属性,则默认为0
如果 z-index的值相同,则还是后加载的元素高于先加载的
如果值不相同,值大的元素层级高
02、透明度
transparent 透明色
opacity:设置元素的透明度,可以使整个元素透明,包含元素里面所有的内容
取值范围 0-1,1是完全不透明 0是完全透明
行元素在垂直方向的对齐方式
vertical-align
值:
top:顶部对齐
middle:中间对齐
baseline:基线对齐
bottom:底部对齐
vertical-align 只能使用在行元素或者内联元素(inline-block)上
,不能使用在块元素上
使用方式:
1.如果父元素的高度由其中一个子元素撑开,那么给其他元素设置
vertical-aline:middle;就可以实现居中效果
2.如果父元素的高度固定,不是用子元素撑开高度,则可以通过添加
一个自定标签,
该标签的高度为父元素的高度,然后设置 vertical-align:middle; 和
display:inline-block; 就可以使父元素内容居中
vertica-align 也可以用来解决img标签的缝隙
03、居中专题
1.块元素水平居中,设置margin:0 auto;
2.行元素,内联元素的水平居中,在父级设置 text-align:center
3.使用 vertical-align:middle 设置行元素和内联元素的垂直居中
4.使用定位和 margin 结合,设置元素居中
a.给需要居中的元素设置 margin-top 和 margin-left 为自身的一半
b.给需要居中的元素设置定位距离为 left:50%;top:50%;
5.父元素宽高固定。子元素绝对定位,可以实现绝对居中
a.父元素宽高固定
b.子元素绝对定位
c.给子元素设置 left:0; right: 0; top: 0; bottom: 0;
d.给子元素设置 margin:auto;
04、表格
table 表示表格
表格的作用:
1.在之前可以使用表格进行布局
2.作为列表来显示数据
一个表格是由 thead、tbody、和tfoot组成,这三个个标签可以不写,浏览器会自动添加
想要创建一个表格,可以使用以下标签
table:表示当前创建一个表格
tr:表示表格中的一行
th:表示表格的一个单元格,一般代表表头
td:表示表格的一个单元格,一般代表的是表内容
以上标签都是块标签
给 table 添加 border 属性,设置边框
cellspacing 设置单元格和单元格之间的距离
cellpadding 设置单元格内容和边框之间的距离
合并单元格
colspan 合并行(横向合并)
rowspan 合并列(竖向合并)
width 设置表格的宽度,可以是具体的值,也可以是百分比
height 设置表格的高度,可以是具体的值,也可以是百分比
以上 width height 属性,可以设置到 table td th 上 width影
响的是一列,height影响的是一行
使用 border-collapse 设置单元格的边框是否合并
border-collapse:separate;不合并
border-collapse:collapse;合并
05、练习
06、定位综合练习