3-5编程练习
来源：3-5 编程练习
流下了没有技术的眼泪
2020-03-08 20:01:39
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.content{
width:800px;
height:400px;
background-color: skyblue;
padding-top:100px;
}
.top{
width:400px;
height:200px;
background-color: yellow;
margin:0 auto;
}
</style>
</head>
<body>
<div class="content">
<div class="top"></div>
</div>
</body>
</html>任务提示
水平居中可以设置top左外边距为200px。
垂直居中可以设置content内上边距为100px，并使用box-sizing属性设置边距产生的位置。
求老师的解法
写回答
1回答
-
同学你好，1、水平居中可以设置top左外边距为200px。
如上所示，设置top的左外边距就可以完成水平居中的效果。
2、垂直居中可以设置content内上边距为100px，并使用box-sizing属性设置边距产生的位置。
如上所示，设置content内上边距为100px就实现了垂直居中，box-sizing属性设置边距产生的位置。
修改后代码如下：
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .content{ width:800px; height:400px; background-color: skyblue; padding-top:100px; /*设置上内边距*/ box-sizing: border-box; /*为元素设定的宽度和高度设定了元素的边框盒。*/ } .top{ margin-left:200px;/*设置左外边距*/ width:400px; height:200px; background-color: yellow; } </style> </head> <body> <div class="content"> <div class="top"></div> </div> </body> </html>如果我的回答解决了你的疑惑，请采纳，祝学习愉快~
1
相似问题