前端基础第六天

2019年.依旧是变得更优秀的一年,继续好好学习

一,背景相关属性
1.background-color:背景颜色
取值:关键字,red:rgb;rgba;#;
2.background-image:背景图片
取值url(路径)
默认是平铺的
3.background-repeat:背景平铺
取值:repeat平铺,默认的
no-repeat;不平铺
repeat-x;水平平铺
repeat-y,垂直平铺
4.background-position:背景位置
取值:关键字:水平方向:left,center,right
垂直方向:top,center,bottom
数字+px;x轴和y轴坐标,对应的是图片左上角的坐标
背景连写:background:颜色 图片 平铺 位置
如:background:red url(01.gpg) no-repeat center center:
二.元素的三种显示方法
1.行内元素display:inline;
显示特点:一行多个,不能设置宽高
代表:span,a
2.块元素,display:block;
显示特点:独占一行,可以设置宽高
代表:div,h,p
3.行内块元素display:inline-block
显示特点:一行多个,可以设置宽高
代表:input,img
三种方式的转换
display:inline-block:转化成行内块元素
display:inline;转化成行内元素
display:block:转换成块级元素
bug;p标签不能嵌套div标签
三.行高设置line-height
概念:基线到基线的距离
作用:让文字垂直居中,
line-height标签的高度
四.标签伪类选择器
选择是标签的某种状态
a:link,点击前的样式
a:visited:链接链接点击后的样式
a:hover;鼠标悬浮上去的样式;可以设置其他标签,经常使用
a:active;点击时刻的样式
注意书写顺序:lvha
五,居中方法的总结
水平居中
text-align:center;
文字,行内元素,行内块元素
margin:0 auto;
块级元素
垂直居中
line-height,标签的高度
文字,行内块元素,行内元素