摘要：background背景色background-image背景图 background-image：url(images/logo.png) no-repeat/repeat-y/repeat/x;background-position页面定位 background-position：30% 40%；或 background-position：-30px 20px；块级元素
background背景色
background-image背景图 background-image：url(images/logo.png) no-repeat/repeat-y/repeat/x;
background-position页面定位 background-position：30% 40%；或 background-position：-30px 20px；
块级元素 行内元素 块级行内元素的不同
独占一行 对宽高设置生效 默认是浏览器宽度
多个标签存在一行，对宽高设置不生效
可以设置宽高，也可以有多个标签存在一行
块级元素和行内元素转换
块级元素转行内元素 display：inline；
行内元素转块级元素 display：block；
行内块元素display:inline-block;
css定位
相对定位 position:relative; right:30px; height:40px;
绝对定位position：absolute
相对定位是相对于本身定位的
绝对定位是相对于最近已定位的父级元素
CSS浮动
float:left;左浮动
float:right右浮动
结束后添加一个空的div 设置样式 clear:both; 清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS基础样式控制——背景、元素转换、定位、浮动练习</title>
<style>
*{margin: 0px; padding: 0px;}
body{width: 100%; height: 100%;}
.back_ground{ height:300px; width:400px;background:url("http://pic.616pic.com/bg_w1180/00/03/30/Dcrqnqbofi.jpg") no-repeat; background-size:100% 100%}
.left{height: 200px;width: 400px; background: aquamarine; float: left; }
.right{height: 200px;width: 400px; background: aqua; float: right;}
.box_inline{display: inline;}
.inline_box{display: block; width:50px; height: 50px; background: #f2f2f2;}
.box_inline_box{display: inline-block; width:50px; height: 50px; background:#424242;}
.position_1{ position:absolute;left:500px;top:150px; height: 30px; width: 200px; background: beige;}
</style>
</head>
<body>
<!--背景图-->
<div class="back_ground"></div>
<!--块级元素、行内元素转换-->
<div>
<div class="box_inline_box"> 行内块级元素</div>
<div class="box_inline">块级元素转行内元素</div>
<span class="inline_box">行内元素转块级元素</span><br>
</div>
<!--CSS定位-->
<div class="position_1">
111111111
</div>
<!--浮动-->
<div>
<div class="left"></div>
<div class="right"></div>
<div style="clear: both"></div>
</div>
</body>
</html> 批改老师：灭绝师太批改时间：2018-11-19 17:36:44
老师总结：完成的很好！理解标签属性的使用，活学活用很重要！
