背景属性1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 600px;
height: 600px;
/*背景颜色*/
/*background-color: #f00;*/
/*背景图片*/
background-image: url(img/timg.jpg);
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="pox">
<img src="img/timg.jpg">
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
背景属性2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 600px;
height: 600px;
border: 1px solid #000;
/*背景颜色*/
/*background-color: #f00;*/
/*背景图片*/
background-image: url(img/h.jpg);
/*背景图片是否平铺*/
background-repeat: no-repeat;
/*no-repeat 不平铺
repeat-x x轴平铺
repeat-y y轴平铺*/
/*背景定位 可以为负值，也可以设置百分比*/
background-position: 10px 30px;
/*X轴 Y轴*/
/*背景图片大小 可以用px表示图片大小，也可以设置百分比*/
/*第一个值设置宽，第二个设置高，只设置一个的情况下，代表宽高*/
/*cover 自适应*/
background-size: 200px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*盒子模型由：内容，内边距，边框，外边距组成*/
.box{
width: 100px;
height: 200px;
padding-right: 30px;
border: 10px solid #000;
margin-left: 30px;
}
</style>
</head>
<body>
<div class="box">
hello word
</div>
</body>
</html>
边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
/*边框宽度*/
border-width: 1px;
/*边框风格，实线*/
border-style: solid;
/*边框颜色*/
border-color: red;
/*边框简写形式：宽度 风格 颜色*/
/*风格:solid 实线 dotted 点线 double 双线 dashed虚线*/
border: 1px dashed red;
/*单独指定某个方向上的边框*/
border-top: 1px solid #f00;
border-left: 1px dashed #f00;
border-right: 1px dotted #f00;
border-bottom: 1px double #f00;
/*清除所有边框*/
/*border: none;*/
}
</style>
</head>
<body>
<div class="box">
hello word
</div>
</body>
</html>
内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 160px;
height: 160px;
border: 1px dashed red;
/*内边距：内容和边框之间的距离，缺点会撑大盒子
撑大盒子以后可以通过减少宽高来弥补
*/
/*单独指定某一个方向的内边距*/
padding-top: 30px;
padding-left: 40px;
padding-right: 50px;
padding-bottom: 60px;
/*内边距简写：上 右 下 左*/
padding: 20px 30px 40px 50px;
/*上 左右 下*/
padding: 20px 30px 40px;
/*上下 左右*/
padding: 20px 30px;
/*简写一个值，代表上下左右四个方向*/
padding: 20px;
}
</style>
</head>
<body>
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
</div>
</body>
</html>
外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
border: 1px solid #000;
/*添加某个方向上的外边距*/
margin-top: 10px;
margin-left: 20px;
margin-right: 30px;
margin-bottom: 20px;
/*外边距简写：上 右 下 左*/
margin: 20px 30px 40px 50px;
/*上 左右 下*/
margin: 20px 30px 40px;
/*上下 左右*/
margin: 20px 30px;
/*简写一个值，代表上下左右四个方向*/
margin: 20px;
}
.box1{
width: 200px;
height: 200px;
border: 1px solid #000;
/*外边距的另一个用法，盒子居中*/
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="box1">
</div>
</body>
</html>
