一,box-sizing属性,自适应盒子元素的宽高的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>52-盒子box-sizing.html</title>
<style>
.content{
width: 300px;
height: 300px;
background-color: red;
}
.aside{
width: 100px;
height: 200px;
background-color: cyan;
float: left;
}
.article{
/*
1,css3中新增了box-sizing 属性,这个属性可以保证我们给盒子新增padding和border之后,盒子元素的宽高不会发生变化
2,box-sizing取值
(1),border-box 元素的宽高恒等于width
(2),content-box 默认属性,元素的宽高=边框*2+内边距*2+width
*/
box-sizing: content-box;
width: 200px;
height: 200px;
background-color: green;
float: right;
padding: 20px;
/*border: 20px solid #000;*/
}
</style>
</head>
<body>
<div class="content">
<div class="aside"></div>
<div class="article"></div>
</div>
</body>
</html>
二,盒子嵌套注意点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>53-盒子模型练习.html</title>
<style>
.big{
width: 500px;
height: 500px;
background-color: red;
border: 5px solid #000;
/*box-sizing: border-box;*/
/*padding-top: 150px;*/
/*padding-left: 150px;;*/
}
.little{
width: 200px;
height: 200px;
background-color: cyan;
/*
1,注意点:如果两个盒子是嵌套关系,那么设置了里面盒子的顶部外边距,外面的盒子也会被顶下来
2,如果外面的盒子不被一起定下来,可以给外边的盒子添加边框属性
3,在企业开发中,一般情况下如果需要控制嵌套关系盒子之间的距离,
应该首先考虑padding,本质上是控制父子关系之间的间隙的;
其次考虑margin,margin本质上是用于兄弟关系之间的间隙的,如果要用margin就得给父盒子添加边框属性
*/
/*margin-top: 150px;*/
/*margin-left: 150px;*/
/*margin: 150px 150px;*/
/*
margin: 0 auto; 表示盒子水平居中,但是对垂直无效
margin: 150px auto; 表示盒子水平居中,垂直也居中
*/
margin:150px auto;
}
</style>
</head>
<body>
<!--
有一个大盒子,元素的宽高是500
有一个小盒子,元素的宽高是200
要求将小盒子放到大盒子中,并且让小盒子在大盒子中水平垂直居中
-->
</body>
<div class="big">
<div class="little"></div>
</div>
</html>
三,盒子居中和内容居中的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>54-盒子的居中和内容的居中.html</title>
<style>
.father{
width: 500px;
height: 500px;
background-color: red;
text-align: center;
}
.son{
width: 100px;
height: 100px;
background-color: cyan;
margin:0 auto;
}
</style>
</head>
<body>
<!--
1,text-align:center;和margin:0 auto;的区别
text-align:center;设置盒子中文字和图片内容的居中
margin:0 auto;设置盒子自身居中
-->
<div class="father">
我是文字 <br>
<img src="images/image.png" alt="">
<div class="son"></div>
</div>
</body>
</html>