背景属性:
1.background-color
取值:表示颜色的英文单词
十六进制
Rgb表示颜色
2.background-image;url(图片路径)
3.background-position:水平 垂直
取值:
水平:left/right/center/num+px
垂直:top/center/bottom/de num+px
num:可以取负数
4.background-attachment:fixed(固定)/scroll(滚动)
fixed:背景图片固定
scroll:背景图片不固定(默认)
5.background-size:设置背景图片大小
取值:
cover:保证背景图片覆盖整个盒子
background-size:width height
使用场景:设置背景图片大小和盒子一样大
background-size:100% 100%
6.复合型写法
background:
浮动属性
浮动分类:
左浮动:float:left
右浮动:float:right
不浮动:none
浮动特点:
浮动元素不占空间,半脱离文档流(盒子认为浮动元素不占位,文字认为浮动元素占位)
浮动元素会影响下面的元素正常显示
清除浮动
clear
取值:
both:清除左右浮动
left:清除左浮动
right:清除右浮动
none:默认值
浮动应用:
竖着变为横着用浮动
1.左侧盒子左浮动,右侧盒子右浮动
2. 1-5父盒子整体在右侧显示,父盒子—float:right 子盒子1-5从左到右显示—float:left
emmet插件
快捷键
1.快速生成5个div div*5+tab
2.快速生成div class=“box” > div.box+tab
3.快速生成div class=“box"内容 div.box{内容}+tab
4.设置内容为自增的数字:$