*复合样式 常用样式汇总 字体类型: font-size * 字体 /行高 font-family 字体 font -weight 字体的粗细 文本类型 设置文本的修饰线外观(下划线、上划线、贯穿线/删除线) 复合样式 text-decoration-line ,text-decoration-color, text-decoration-style text-decoration :* none text-decoration: underline; --下划线 text-align-last 最后一行对齐 line-height行间距 work-spacing work-break text-align: center; vertical-align:middle; { white-space:nowrap 文字不换行 overflow :hidden; 隐藏部分 text-overflow:ellipsis 省略号} 处理文字溢出 边框---背景 Border Boder:1px soild red 边框粗细,边框类型 颜色 Boder- bottom :none :浏览器不会渲染 Boder-radius 圆角 Background :url(),路径 NO- repeat 属性,size ,color attachment 盒子 padding: 7px 0px 0px 100px; 控制元素所有四条边的内边距距离 margin: 7px 0px 0px 100px; 控制属性为给定元素设置所有四个方向的外边距属性 box-sizing:border-box; 怪异盒模型 display 属性 table-cell 转换为单元格 display:inline-block 转为行块属性 vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。 内联元素 span a 发邮件 mailto,打电话 tel:,锚点 #ID,下载 资源地址,链接跳转 块元素 div 内联块元素 img 内联块元素 默认元素底下会有几个像素的留白 代码换行会产生空格 浮动 float 让元素按照指定的方向发生位移,直到遇到浮动元素或者父级的边界才会停下来 Clear 清除浮动 After:清浮动 clear 只对块元素生效 必须要display:block content 可以为空 Position 定位relative 相对定位 提升层级 如果子级有两个相同的层级 后面的层级要高于前面的元素 后者覆盖前者 Z-index 现有定位