Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:
实例演示box-sizing属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实例演示box-sizing属性</title>
<style>
/* 盒子的padding和border的像素会叠加到盒子的宽度和高度上,现在盒子的高度和宽度均为250px */
/* 因此我们在布局时需要精确计算好像素,不使其不注意时撑破父级元素。 */
.div1{
width: 200px;
height: 200px;
background-color: burlywood;
padding: 20px;
border: cadetblue 5px solid;
}
/* 我们可以使用box-sizing属性就可以很好地解决这个问题 在此时 box-sizing: border-box;会将padding和border计算在盒子里面
此时盒子的高度和宽度均为200px
*/
.div2{
width: 200px;
height: 200px;
background-color: burlywood;
padding: 20px;
border: cadetblue 5px solid;
box-sizing: border-box;
/* box-sizing: content-box; 为默认值,表示w3c盒子,它不包含padding和border,(把内边距和边框计算在内容区域外)盒子会被撑开。*/
}
</style>
</head>
<body>
<div class="div1">我是普通盒子</div>
<hr>
<div class="div2">box-sizing盒子</div>
</body>
</html>
实例演示常用的元素居中方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实例演示常用的元素居中方式</title>
<style>
body{
font-size: 20px;
}
div{
width: 30em;
height: 10em;
background-color: chocolate;
}
/* 块元素的水平居中 */
/* text-align: center;水平居中 */
/* text-align: left;左对齐 */
/* text-align: right;右对齐 */
/* line-height: (100px与高度一致实现垂直居中); */
/* text-align: center;+line-height: 100px; 对行类元素无效*/
.div1 p{
text-align: center;
/* text-align: left; */
/* text-align: right; */
line-height: 10em;
box-sizing: content-box;
}
/* 利用margin:0 auto;水平居中 +line-height: 100px;垂直居中 但要给一个宽度 否则无效*/
.div2 p{
width: 20em;
line-height: 10em;
margin:0 auto;
box-sizing: content-box;
background-color: cornflowerblue;
}
/* padding: ;水平居中+垂直居中 */
.div3 p{
padding: 5em 6em;
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="div1">
<p>
text-align: center; 100px水平居中;
</p>
</div>
<hr>
<div class="div2">
<p>margin:0 auto;水平居中</p>
</div>
<hr>
<div class="div3">
<p>padding: ;水平居中+垂直居中</p>
</div>
</body>
</html>