发表于： 2020-03-09 22:28:48
4 1240
今天：
依旧是任务一。
学习盒子。
首先了解盒子的组成
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
元素总宽度计算：宽度+左右填充+左右边框+左右边距=总宽度。
元素总高度计算：高度+上下填充+上下边框+上下边距=总高度。
要制作一个规定宽度/高度的盒子，只要把宽度/高度+边距x2+边框x2+外边框x2便可。
尝试第一次制作盒子：
结果就是网页没显示盒子，只显示了字
我想这是我的高度元素没有设置的问题？于是加了height元素。
还是没有显示盒子模型。但是完全复制一个网页搜出来的盒子模型代码就显示出来了。
下面的代码是我自己打的，但是我不知道问题出在哪，这个希望有个师兄帮忙点一下我这猪脑子。。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>尝试盒子模型</title>
<style>
div {
height：250px；
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>我是盒子</body>
</html>
由于搞不明白，搜索了不少百度盒子模型，还是没能解决，
于是乎我去看了下结业师兄的日报，试着把div换成body，结果是显示盒子的。
暂时把这个问题搁置。
尝试制作一个黄色小格子，填充颜色，引用了背景颜色：background-color: 但是一填充便是整个屏幕都变色了。
我觉得问题所在是背景颜色定义没有在盒子里。
尝试把宽度高度调整为0，背景颜色取消，设置边距的颜色为黄色，盒子是变成了黄色格子，但是内容显示直接变成一列。
但是搜索的结果是可以把内容颜色定义的，
主要问题就是div为何没有显示出盒子。
今天的疑惑：我写的代码没能显示出盒子模型，根据百度的来的信息，更换div为box，.box，都没能显示盒子，
至于body在style里面的定义还没搞清楚。所搜索的代码都是div来制作一个盒子，这问题
明天：尝试多个盒子的制作，并且正确填充颜色，解决今天所产生的问题，并且往下一个任务走。
返回列表
评论