<1>表格
1、 表格的含义
table标签,就是表格标签,用于展现数据
<tr> <!--标签:定义表格中的一行,不能设置边线-->
<!--<td>和<th>标签:定义一行中的一个单元格-->
<th>3</th> <!--th表示表头单元格,可以设置宽高和边线-->
<td>内容1</td> <!--td代表普通单元格,-->
<td>内容2</td>
<td>内容3</td>
</tr>
2、 表格相关样式属性
(1)border-collapse 设置表格的边线合并,如:border-collapse:collapse;
(2)td到table之间的距离 、内容和td之间的距离
<table cellspacing="10px" cellpadding='10'>
(3)横向合并
<td collspan="2">内容1/内容2</tb>
(4)纵向合并
<td rowspan="2">内容1/内容2</tb>
总结:
1> 一个<table>由<thead>和<tbody>两部分组成,由于浏览器的渲染问题一般都放在中
2> 数据的收集就用form表单input
3>展示ul和div要快于table,数据的展示一般使用ul>li,或者table里面放tr>td>th.(thead/tbody)
<2>定位
1、定位的作用
定位的作用:设置盒子的位置用的(盒子压住别人一般用定位,反之用浮动)
2、文档流
文档流:是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。
3、css的position属性来设置元素的定位类型
(1)relative 生成相对定位元素,以自身定位,占据文档流的位置.
(2)absolute 生成绝对定位元素,元素脱离文档流(脱标),不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。(子绝父相)
(3)fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于浏览器窗口进行定位。(例如: 固定导航栏)
(4)static静态定位,默认值(显示并且占位置)
4、定位元素的偏移
(1)eft:正值向右,负值下左
(2)right
(3)top:正值向下,负值向上
(4)bottom
5、定位元素层级z-index
.box01{
position:absolute; /* 设置了绝对定位 */
left:200px; /* 相对于参照元素左边向右偏移200px */
top:100px; /* 相对于参照元素顶部向下偏移100px */
z-index:10 /* 将元素层级设置为10 */
}
注意:
(1)都有定位的盒子,默认层级为0;
(2)都有定位,没有设置层级,后面的高
(3)没有定位的盒子没有层级
6、子盒子在父盒子里居中
(1)计算后设置
(2)常用方法: left:50% marging-left: -100px
7、透明度:opacity
(1)连带文字的透明度也会改变
(2)/* 兼容IE678 */ ----filter:alpha(opacity=30);
(3)背景透明: background: rgba(255, 0, 0, 0.1);
<3>权重
1、css权重:
CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。
(1)按照等级来计算权重
1> 行内写style,如:style=””,权重值为1000
2>ID选择器,如:#content,权重值为100
3>类,伪类,如:.content、:hover 权重值为10
4>标签选择器,如:div、p 权重值为1 如:div+p 权重为2
补充:background: red ! important 最高权限