浮动 背景图设置 相对定位 绝对定位 042
一 .浮动
二 .文本属性和字体属性
文本对齐
font-size 字体大小
font-family 字体的类型
font-weight 400~900字体粗细
font:24px/1.5 '楷体','微软雅黑'
text-align
left 左对齐
right 右对齐
center 中心对齐
justify 两边对齐 只适应英文
text-indent 首行缩进 建议单位使用em
text-decoration : underline 下划线
text-decoration : none ;无线
文本垂直居中
单行文本 ,行高 ==盒子的高度
多行文本 padding-top = (height-行数*行高)/2,并且减掉盒子的高度
background:
颜色 :rgba() 课下看看
背景图: background -image:url('连接图片资源') 默认平铺
background-repeat 选择是否重复铺满盒子
repeat 默认 在水平和垂直方向重复
repeat-x 在水平方向重复
repeat-y 在垂直方向重复
no-repeat 背景图像只显示一次
雪碧图(精灵图)技术: background-position :x,y
好处 :
能很好地减少网页的http请求 大大提高页面的性能 是css的最大优点
能减少图片的字节三张图片合成一张图片大小总是小于这3张图片的字节总和
解决了图片命名的困扰
更换风格方便
不足:
最大的问题是内存的使用
拼图维护比较麻烦
使得css的编写变得困难
调用的图片不能被打印
banner:
可以使用background综合属性制作通天banner 就是给的图片大小超过了电脑屏幕的大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bojie{ width: 40px; height: 74px; background-color: black; background: url("http://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png") no-repeat -89px 0; } .bojie:hover{ background-position: 0 0; } </style> </head> <body> <div class="bojie"></div> </body> </html>
定位:
position :relative|absolute|fixed
relative: 不脱离标准流 不会影响页面布局
给一个任意的(标准和非标准文档流)盒子 单独设置
浮动和定位之间互不受影响
作用 : 微调元素 做父相子绝的参考(布局方案) 相对定位不脱标 可以用相对定位做压盖(小心它的坑 不要让他影响页面)
绝对定位:
脱标 不区分行内元素和块级元素 都能设置宽高
压盖
优点
提升层级 不影响页面
参考点:
1 .单独设置绝对定位 使用top属性描述的时候是以页面的左上角为参考点来调整位置 当使用bottom属性描述的时候是以首屏页面左下角为参考点来调整位置
2 .父子嵌套 父相子绝 都是相对定位 以离得最近的父辈左上角为参考点
