<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文字绕图</title>
<style type="text/css">
.com{
width: 400px;
height: 400px;
border: 1px solid gold;
margin: 0 auto;
background:green;
}
.pic{
width: 50px;
height: 50px;
background: red;
float: left;
margin: 0 10px 5px 0;
}
.duoluo{
width:400px;
height: 150px;
background: gold;
}
</style>
</head>
<body>
<div class="com">
<div class="pic"></div>
<div class="duoluo">本文主要是学习了盒子模型中盒子尺寸的真正计算方法和Margin合并，让内容看起来更美观。 盒子尺寸计算方法：
盒子尺寸效果图： Margin合并...本文主要是学习了盒子模型中盒子尺寸的真正计算方法和Margin合并，让内容看起来更美观。 盒子尺寸计算方法： 盒子尺寸效果图： Margin合并...
</div>
</div>
</body>
</html>
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style type="text/css">
.box1 ,.box2, .box3{
width: 200px;
height: 200px;
background:gold;
text-align: center;
margin: 20px;
font-size: 20px;
}
/*
元素左右浮动
*/
.box1{
float: left;
}
.box2{
float: right;
}
.box3{
float: left;
}
</style>
</head>
<body>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
</body>
</html>
image.png
网友评论