前几天一直忙着敲代码,没有时间整理内容
今天上了关于position的使用,position属性有五个值
1.inherit 从父元素继承 position 属性的值。
2.static 默认值。没有定位,元素出现在正常文档流中( 忽视top ,left, right, bottom,或者z-index的声明)
3.fixed 固定定位 生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。会改变行块元素的默认表现。
4.relative 相对定位 相对于其正常位置进行定位,元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。不会改变元素的默认表现。
5.absolute 绝对定位 生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
table标签
默认属性1.display : table ; 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。
2.border-collapse :separate 边框会被分开。属性设置表格的边框是否被合并为一个单一的边框
3.border-spacing: 2px; 该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中,第一个是水平间隔,第二个是垂直间隔。除非 border-collapse 被设置为 separate,否则将忽略这个属性。尽管这个属性只应用于表,不过它可以由表中的所有元素继承。
4.border-color: grey;
tb o dy>默认属性
1.display: table-row-group 此元素会作为一个或多个行的分组来显示
2.vertical : middle;
3.border-color: inherit;
4.border-collapse : separate;
< t r> t r>默认属性
1.display: table-row ;此元素会作为一个表格行显示
2. vertical :inherit ;
3. border-collapse: seperate ;
默认属性1.font-weight: bold;
2.display:table-cell;此元素会作为一个表格单元格显示
3.text-indent: internal-center
默认属性1.display:table-cell;
2.vertical-align: inherit;
colspan: 跨列合并 colspan="0" 指示浏览器横跨到列组的最后一列
rowspan:跨行合并 rowspan="0" 指示浏览器横跨到表格部分的最后一行
二.字体的使用
1.color 文字颜色设置
2.font-size 文字 字号 可以百分比 em父级文字字号的倍数 rem 根的倍数
3.首行缩进设置 中文 text-indent
4.font-weight 字重
5.font-style: 斜体设置 italic 斜体设置 normal正常设置
6.font-family 字体设置
7.文字水平对齐 text-align:
8.text-align:justify 文字两边对齐 有兼容性问题
9.letter-spacing 字符间距
10.word-spacing 单词间距 不支持中文
11.文字修饰 text-decoration overline 上划线 line-through 中划线
12.vertical 垂直对齐方式
13.内容超出处理overflow: auto hidden scroll scroll-x scroll-y
英文没有空格时候不换行 中文没有换行问题
auto容器自适应内容,内容高度超出容易,会出现竖直滚动条,如果内容宽度超出容器,会出现水平滚动条
hidden 是把超出容器的内容部分给裁减掉
scroll
给容器设置滚动条,如果内容没有超出容器,将无法滚动 overflow-x: 对容器的水平方向处理overflow-y: 对容器的垂直方向处理
overflow:auto hidden 两个属性还可以用于清除浮动
font-size小于12px,会默认以12px结算
font-size设置 大于12px按照设置的倍数
小于12px按照12px
100-300 lighter
font-weight:400 相当于 normal
font-weight: 500+ 相当于 bold