发表于： 2018-10-14 08:07:40
1 694
今天完成的事情：
（1）学习了CSS盒模型，盒模型说由元素内容、内边距、边框和外边距组成。
padding 属性定义元素的内边距，接受长度值或百分比值，其中百分数值是相对于其父元素的 width 计算的。简写｛padding：上内边距 右内边距 下内边距 左内边｝
border 属性规定元素边框的样式border-style、宽度border-width和颜色border-color。颜色值 transparent定义透明边框。
margin 属性设置外边距的 ，接受任何长度单位、百分数值甚至负值，其中百分数值是相对于其父元素的 width 计算的。｛margin：0 auto｝可设置块元素居中。
（2）学习了CSS定位
position属性有4种属性值：1、static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
2、relative元素框相对于原来的位置偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
3、absolute元素框从文档流完全删除，元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
4、fixed元素框相对视窗本身定位。
CSS浮动，float属性浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
（3）编写任务一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>九宫格</title>
<style type="text/css">
.one {
width: 90%;
margin: 0 auto;
}
.tow {
border: solid 1px orange;
background-color: orange;
border-radius: 10%;
padding: 15%;
margin: 1.2%;
float: left;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="one">
<div class="tow"></div>
<div class="tow"></div>
<div class="tow"></div>
<div class="tow"></div>
<div class="tow"></div>
<div class="tow"></div>
<div class="tow"></div>
<div class="tow"></div>
<div class="tow"></div>
<div class="clear"></div>
</div>
</body>
</html>
明天计划的事情：
学习任务二
遇到的问题：
暂无
收获：
了解了盒模型概念和应用；了解CSS定位和float属性。
返回列表
评论