发表于： 2019-09-22 20:42:42
1 893
今天完成的事情：基本了解盒子模型，基本写出九宫格
明天计划的事情：继续学习，计划进行任务二
遇到的问题：盒子模型理解上会有些麻烦，花费较多时间理解各项的不同，制作随页面变化的九宫格花费较长时间，了解到需要设置一个高度
收获：盒子模型的基本内容，如盒子的边框，基本代码
div{ border-width:2px; border-style:solid; border-color:red; }
四边的单独代码：
border-bottom:1px solid red；border-top:1px solid red; border-right:1px solid red; border-left:1px solid red;
高度与宽度基本代码：
div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}盒子填充的基本代码
div{padding:10px;}盒子边界的基本代码：
div{margin:20px 10px 15px 30px;}了解了各项基本的概念
初步九宫格的代码
<!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>
</head>
<style type="text/css">
div {
width: 31%;
padding-top: 31%;
margin: 1%;
float: left;
background-color: orange;
}
</style>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9"></div>
</body>
</html>
在添加高度之后实现随页面大小来适应改变
返回列表
评论