排版鲜花页面(四个鲜花图片横排排列)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>排版鲜花页面</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.text{
width: 1000px;
margin: 0 auto;
overflow: hidden;
/*background-color: red;*/
}
.son1,.son2,.son3,.son4{
float: left;
width: 200px;
height: 200px;
margin-left: 20px;
border: 1px solid #333333;
padding: 20px 11px 50px;
}
/*.son4{margin-right: 20px;}*/
</style>
</head>
<body>
<div class="text">
<div class="son1">
<img src="img/02f18994-98fe-42a2-a7f4-a8fe8a7dfc5f.png"/>
</div>
<div class="son2">
<img src="img/7ba096e5-ecf6-47c3-928d-bb3e5158c4f3.png"/>
</div>
<div class="son3">
<img src="img/ed92893b-de98-48e2-a53d-b54155d7fabf.png"/>
</div>
<div class="son4">
<img src="img/f53d86fb-d3bb-41b8-b0d6-5fced9087165.png"/>
</div>
</div>
</body>
</html>
盒模型的外三层结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型的外三层结构</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{
font-size: 8px;
}
.text{
width: 500px;
height: 500px;
background-color: lavender;
/*padding-top: 50px;
padding-right: 60px;
padding-left: 60px;
padding-bottom: 50px;*/
padding: 50px 60px; /*这句相当于上面四句*/
color: black;
font-size: 2em;
text-indent: 2rem; /*首行缩进2个字符*/
text-align: justify;/*文本两端对齐*/
line-height: 3rem; /*行之间的距离*/
border-bottom: 10px solid orange;
}
</style>
</head>
<body>
<div class="text">
《鲜花》是回春丹乐队演唱的歌曲，由刘西蒙作词、作曲，于2023年9月30日作为单曲发行。《鲜花》是刘西蒙为纪念去世前辈而创作的歌曲，是首治愈系歌曲，歌词美好又热烈，像告白又像告别，像重逢又写满了遗憾与悔恨，唱出了对生命和生活的热爱。
</div>
</body>
</html>
盒模型的外三层，指的是从内到外包裹内容的三层“容器”，分别是：
-
内边距（padding）：内容与边框之间的距离
-
边框（border）：盒子本身的边界线
-
外边距（margin）：盒子与其他盒子之间的距离
你可以把它想象成一个快递盒：
-
商品内容 = width/height （盒子内部的内容尺寸）
-
防震泡沫 = padding （商品和盒子内壁的空隙）
-
纸箱本身 = border （盒子的边框）
-
两个快递盒之间的空隙 = margin （盒子和盒子之间的距离）
浙公网安备 33010602011771号