发表于: 2022-07-29 19:14:17

0 56





盒子模型是CSS中一个重要的概念,理解了盒子模型才能更好的排版。W3C组织建议把网页上元素看成一个个盒子。

盒模型主要定义四个区域:内容(content)、内边距(padding)、边框(border)、外边距(margin)。

转换到我们日常生活中,可以拿红酒来对比,红酒=内容,内边距=盒子中的填充物,边框=盒子的厚度,外边距=两个红酒之间的距离。



css代码:

.leftbox {
width: 450px;
   height: 700px;
   background-color: aqua;
   float: left;
   overflow: hidden;
   Text-align:center;
   
}


html代码:

<!DOCTYPE html>
<html long="en" xmlns="http://www.w3.org/1999/html">

<head>
   <meta charset="UTF-8">
   <link rel="stylesheet" href="css/Mojing.css">
   <link rel="stylesheet" href="css/0.jpg">

</head>

<body><!--内容编写区-->
</body>
<style>
   .mydiv{width: 100px;height: 100px}
</style>
<body>

<div class="container">
   <div class="leftbox">魔镜</div>
</div>
</body>
</html>


网页目前的效果:待优化

收获:以上


明天计划:完成接下来的任务。




返回列表 返回列表
评论

    分享到