今天是web前端教学实习第一天。
所学内容 :
1. div
div是一个块标签,默认高度为0,宽度占满父级,独占一行。
2. padding
padding属性是内边距,会增加盒模型面积,padding的四个值顺序为 上右下左
如
padding:10px 20px 30px 40px;
表示
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px
3. border
border是边框,也会增加盒模型面积。
border 有三个值 分别是线宽 线型 线色
border: 50px solid #ff0000
表示 边框为50像素红色实线
其中线型还可以为dashed 虚线
还有border-radius 圆角 用法同padding
4. margin
margin表示外边距
使用margin时会出现两种情况分别是:叠压和塌陷
叠压:两个div 第一个使用margin-bottom时,若第二个使用margin-top,则会出现叠压情况,margin值大的会盖住margin值小的,最终呈现的效果以大的为准。
塌陷:父级的第一个子级标签是块标签并且使用了margin或margin-top
解决方案 1. 子级标签不使用margin-top,在父级使用padding-top 并且减少父级height
2. 在父级使用border
3. 在父级使用overflow:hidden
5. block 块标签
<h1><h2><h3><h4><h5><h6><ul><ol><p>
6. 课堂案例 五环
代码与效果如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五环</title>
<style>
div{
width: 80px;
height: 80px;
border: 10px solid skyblue;
border-radius: 50%;
}
#d2{
border-color: black;
margin-top: -100px;
margin-left: 110px;
}
#d3{
border-color:tomato;
margin-top: -100px;
margin-left: 220px;
}
#d4{
border-color: gold;
margin-top: -50px;
margin-left: 55px;
}
#d5{
border-color: yellowgreen;
margin-top: -100px;
margin-left: 165px;
}
</style>
</head>
<body>
<div ></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
</body>
</html>