1、理解三个宽度和高度
(1)、内容的宽度和高度
就是通过width和height属性设置的宽度和高度
(2)、元素的宽度和高度宽度= 左边框 + 左内边距 + width + 右内边距 + 右边框
(3)、元素空间的宽度和高度宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
2、盒子 box-sizing属性
(1) css3中新增了一个box-sizing属性,通过设置这个属性可以保证我们给盒子新增padding和border之后,盒子元素的宽度和高度不变。
(2)box-sizing属性是如何保证增加padding 和 border 之后,盒子元素的宽度高度不变,就是必须减去一个部分的内容的宽度和高度。
(3)box-sizing:content-box; 默认是content-box,元素的宽高 = 边框+内边距+内容的宽高
box-sizing:border-box; 元素的宽高 = width 属性
3、父div 和子div,如何让子div在父div中水平垂直居中的问题
两种方式: 1、给父div增加padding属性
2、给子div增加margin属性
下面练习保证父盒子的元素宽高保持不变。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.big{
width: 300px;
height: 300px;
background: red;
}
.small{
width: 100px;
height: 100px;
background: blue;
}
.big1{
width: 200px;
height: 200px;
background: red;
padding-left:100px ;
padding-top: 100px;
}
.small1{
width: 100px;
height: 100px;
background: blue;
}
.big2{
width: 300px;
height: 300px;
background: red;
padding-left:100px ;
padding-top: 100px;
box-sizing: border-box;
}
.small2{
width: 100px;
height: 100px;
background: blue;
}
.big3{
width: 298px;
height: 298px;
background: red;
border: 1px solid black;
}
.small3{
width: 100px;
height: 100px;
background: blue;
/*margin-left: 100px;*/
/*margin-top: 100px;*/
margin: 100px auto;
/*注意:
1、如果两个盒子是嵌套关系,设置了里面一个盒子的顶部外边距,外面的盒子也会被顶下来,这种现象叫做外边距塌陷。
2、外面的盒子不想被一起顶下来,可以给外面的盒子添加一个边框属性。不推荐使用这种方式,推荐给父元素设置over-flow:hidden
3、在企业开发中,一般情况下如果需要控制嵌套关系盒子之前的距离,应该首先考虑padding,其次考虑margin
margin 本质上是用于兄弟之间的间隙的
*/
}
.big4{
width: 298px;
height: 298px;
background: red;
border: 1px solid black;
}
.small4{
width: 100px;
height: 100px;
background: blue;
margin: 0 auto;
/*
注意:
1、在嵌套关系的盒子中,我们可以利用margin:0 auto;方式来让里面的盒子在外面的盒子中水平居中
2、margin:0 auto; 只对水平方向有效,对垂直方向无效。
*/
}
.big5{
width: 300px;
height: 300px;
background: red;
overflow: hidden;
}
.small5{
width: 100px;
height: 100px;
background: blue;
margin:100px
/*
注意:
1、在嵌套关系的盒子中,我们可以利用margin:0 auto;方式来让里面的盒子在外面的盒子中水平居中
2、margin:0 auto; 只对水平方向有效,对垂直方向无效。
*/
}
</style>
</head>
<body>
<div class="big">
<div class="small"></div>
</div>
<br><br>
<!--方式一 修改父的内边距-->
<div class="big1">
<div class="small1"></div>
</div>
<br><br>
<!--方式二 修改父的内边距-->
<div class="big2">
<div class="small2"></div>
</div>
<br><br>
<!--方式三 修改子的外边距-->
<div class="big3">
<div class="small3"></div>
</div>
<br><br>
<!--扩展 水平居中-->
<div class="big4">
<div class="small4"></div>
</div>
<br><br>
<!--扩展 over-flow:hidden-->
<div class="big5">
<div class="small5"></div>
</div>
</body>
</html>
4、垂直方向外边距合并、塌陷
垂直方向的两个2盒子,如果都设置了垂直方向的外边距,取的是设置比较大的值。
水平方向外边距没有合并现象。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>垂直方向外边距合并</title>
<style type="text/css">
.box{
background: red;
margin-bottom: 150px;
}
.miss{
background: green;
margin-top: 200px;
}
</style>
</head>
<body>
<!--两个div之间的间距为100px-->
<div class="box">12</div>
<div class="miss">54</div>
</body>
</html>
出现情况比较多的是,嵌套关系的盒子。急需要我们去解决。
如图:
对里面的盒子进行margin-top:10px;后会出现这样状况:
可见外层div塌陷;
ok,如何解决呢?有两种方法,当然,看到有人用那里头的div进行padding空出位置,这里我们换方式,保持原代码基础上做动作。
解决方法:
1. 给大盒子(外层)指定一个边框。可以解决 (因为外层有border的话,他们两显然就不是紧贴在一起的了),如果不希望看到边框,可以改成背景色(我实验的背景色是白色)。
1
|
.waichen{border:
1px
solid
#fff
;}
|
2. 大盒子加溢出css:
1
|
overflow
:
hidden
;
|
这样的话,完美解决。
![](https://i-blog.csdnimg.cn/blog_migrate/014953ad720f67bb44c1ba46e87083e0.jpeg)
5、清空默认外边距和内边距
在默认情况下,元素有默认的外边距或者内边距,为了不影响我们开发,所以一般先默认外边距和内边距。
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
https://yuilibrary.com/yui/docs/cssreset/
6、如何还原行高,字体,和字号
用fireworks工具进行测量。
1)、在开发中,如果一个盒子存储的是文字,一般以左边的内边距为准。右边如果视觉有误差是因为撑不下一个文字了。
2)、顶部的内边距并不是边框到文字顶部的距离,而是边框到行高顶部的距离。