收藏
批改状态：合格
老师批语：缺少手抄代码！
通过今天的学习，我懂了如何利用padding，marging控制文本元素位置，以及其设置元素都是从上到右到下到左，也明白了使用position实现相对，绝对定位！
以下是作业代码
1,盒子模型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>盒子模型</title>
</head>
<style>
/*margin,padding,使用*/
/*padding 内边距 */
/*margin 外边距*/
/*参数规则 上 右 下 左*/
#box{
width: 200px;
height: 200px;
background-color: lime;
}
img{
padding-top: 50px; /*距离内边框50px;*/
padding-left: 50px;/* 距离外边框 50px;*/
/*按照上右下左的顺序简写,margin 类似，只是距离外边框*/
padding:50px 50px;
}
/*去除li的样式*/
ul li{list-style: none}
</style>
<body>
<div id="box">
<img src="http://e.hiphotos.baidu.com/baike/pic/item/fd039245d688d43f63d84526771ed21b0ff43bf5.jpg" alt="" height="100px" width="100px">
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2，四种元素对齐方式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>四种元素对齐方式</title>
</head>
<style>
.box
{
width: 200px;
height: 200px;
background-color: lightpink;
text-align: center;
}
.box a{
line-height: 200px;
}
.box1
{
width: 200px;
height: 200px;
background-color:lightseagreen;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.box2
{
width: 200px;
height: 200px;
background-color:lightslategrey;
display: table-cell;
vertical-align: middle;
}
.box2 .child {
height: 100px;
width: 100px;
background-color: red;
margin: auto;
text-align: center;
line-height: 100px;
}
.box3{
width: 600px;
height: 600px;
background-color: lime;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.box3 li{
display: inline; /*快级元素转换为行内元素*/
}
</style>
<body>
<!--1,子元素是行内元素对齐，如a,span使用text-aligh
水平居中,垂直居中使用和父元素一样的行高
-->
<div class="box">
<a href="">php很简单</a>
</div>
<!--2,子元素是多行内联文本元素对齐，水平方向还是text-aligh
垂直方向应该转化为disply:table-cell 然后使用vertical-align: middle;
-->
<div class="box1">
<a href="">php很简单</a><br>
<a href="">php很简单嘛？</a>
</div>
<br>
<!--3,子元素是块级元素，
水平居中：子元素设置左右外边距自动适应容器
垂直方向应该转化为disply:table-cell 然后使用vertical-align: middle;
-->
<div class="box2">
<div class="child">
1123456
</div>
</div>
<!--3,子元素是不定宽块级元素，先转换为行内元素，然后父级元素转换为table格式使用middle居中
-->
<div class="box3">
<ul>
<li><a href=""><img src="http://cdn.duitang.com/uploads/item/201509/04/20150904101838_a2zYC.jpeg" alt="刘诗诗" height="80" width="80px"></a></li>
<li><a href=""><img src="http://img5q.duitang.com/uploads/item/201411/23/20141123205812_Bircn.jpeg" alt="刘亦菲" height="80" width="80px"></a></li>
<li><a href=""><img src="http://f.hiphotos.baidu.com/zhidao/pic/item/6609c93d70cf3bc75a6608a8da00baa1cd112a14.jpg" alt="黄渤" height="80" width="80px"></a></li>
<li><a href=""><img src="http://cimg20.163.com/ent/2008/1/24/200801240949559023e.jpg" alt="王宝强" height="80" width="80px"></a></li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3，十字架小案例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>十字架</title>
</head>
<style>
.box{
width: 600px;
height:600px;
position: absolute;
}
.box1{
width: 100px;
height: 100px;
background-color:lightpink;
text-align: center;
margin-left: 100px;
}
.box2{
width: 100px;
height: 100px;
background-color:lightseagreen;
text-align: center;
margin-left: 200px;
/*margin-top: -100px;*/
}
.box3{
width: 100px;
height: 100px;
background-color:lightslategrey;
text-align: center;
margin-top: -100px;
}
.box4{
width: 100px;
height: 100px;
background-color:lime;
text-align: center;
margin-left: 100px;
}
</style>
<body>
<div class="box" >
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
以下是我的总结：
1,快级盒子2,行内盒子/内联盒子,快级盒子当容器
2，文档流：元素的排列方式,总是水平排列
3，边框border,内边距padding,外边距margin （设置属性都是从上右下左）
4，外边距会在垂直方向上发生塌陷，以数值大的为准,向大数值走
5，Position：absolute（绝对定位相对body）
6，Position:relative 相对定位(相对自身)
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
