盒子模型的知识点汇总

75 阅读 0 评论 50 点赞

我是靠谱客的博主昏睡早晨，最近开发中收集的这篇文章主要介绍盒子模型的知识点汇总，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、盒子模型

1.什么是CSS盒子模型?
CSS盒子模型仅仅是一个形象的比喻, HTML中所有的标签都是盒子

结论
1.在HTML中所有的标签都可以设置
宽度/高度 == 指定可以存放内容的区域
内边距 == 填充物
边框 == 手机盒子自己
外边距 == 盒子和盒子之间的间隙

<style>
span,a,b,strong{
display: inline-block;
width: 100px;
height: 100px;
border: 6px solid #000;
padding: 20px;
margin: 20px;
}
</style>
<body>
<span>我是span</span>
<a href="#">我是超链接</a>
<b>我是加粗</b>
<strong>我是强调</strong>
</body>

二、盒子模型的宽度和高度

1.内容的宽度和高度
就是通过width/height属性设置的宽度和高度

2.元素的宽度和高度
宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
高度同理可证

3.元素空间的宽度和高度
宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
高度同理可证

三、盒子的box-sizing属性

1.CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
2.box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变
和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度
3.box-sizing取值
3.1content-box
元素的宽高 = 边框 + 内边距 + 内容宽高【添加和不添加之前的效果是一样的】

3.2border-box
元素的宽高 = width/height的宽高【可以保证盒子的规格不发生变化】

<style>
.content{
width: 300px;
height: 300px;
background-color: red;
}
.aside{
width: 100px;
height: 200px;
background-color: green;
float: left;
}
.article{
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: blue;
float: right;
border: 20px solid #000;
padding: 20px;
}
</style>
<body>
<div class="content">
<div class="aside"></div>
<div class="article"></div>
</div>
</body>

四、盒子居中和内容居中

1.text-align:center;和margin:0 auto;区别
text-align: center;作用
设置盒子中存储的文字/图片水平居中

margin:0 auto;作用
让盒子自己水平居中

 <style>
.father{
width: 800px;
height: 500px;
background-color: red;
/*text-align: center;*/
margin:0 auto;
}
.son{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<body>
<div class="father">
我是文字<br/>
<img src="images/girl.jpg" alt="">
<!--<div class="son"></div>-->
</div>
</body>

五、清空默认边距

1.为什么要清空默认边距(外边距和内边距)
在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等, 所以在企业开发中, 编写代码之前第一件事情就是清空默认的边距

2.如何清空默认的边距
格式
*{
margin: 0;
padding: 0;
}

3.注意点
通配符选择器会找到(遍历)当前界面中所有的标签, 所以性能不好
企业开发中可以从这个网址中拷贝，做开发时默认就是用这种方法清空默认边距
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

<style>
/*
*{
margin: 0;
padding: 0;
}
*/
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
}
p{
width: 610px;
height: 110px;
background-color: #cdcdcd;
border: 1px solid #000000;
}
</style>
<body>
<p>葬爱:非主流文化的常用词，是当今网络流行术语.且流行于非主流杀马特之中。葬，即埋葬，爱，即爱情，翻译成外语就bury love</p>
</body>

六、行高和字号

1.什么是行高?
在CSS中所有的行都有自己的行高

注意点:
行高和盒子高不是同一个概念
行高指的是每行内容的高度
盒子高指的是元素的高度

<style>
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
}
p{
width: 610px;
height: 110px;
background-color: #cdcdcd;
border: 1px solid #000000;
}
div{
box-sizing: border-box;
width: 100px;
height: 80px;
border: 1px solid #000;
line-height: 20px;
/*line-height: 80px;*/
padding-top:20px;
padding-bottom:20px;
}
</style>
<body>
<div>我是文字我是文字我是文字</div>
</body>

规律:
1.文字在行高中默认是垂直居中的

2.在企业开发中我们经常将盒子的高度和行高设置为一样, 那么这样就可以保证一行文字在盒子的高度中是垂直居中的
简而言之就是: 要想一行文字在盒子中垂直居中, 那么只需要设置这行文字的"行高等于盒子的高"即可

3.在企业开发中如果一个盒子中有多行文字, 那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中, 只能通过设置padding来让文字居中

六、还原字体和字号

注意点:
1.在企业开发中, 如果一个盒子中存储的是文字, 那么一般情况下我们会以盒子左边的内边距为基准, 不会以右边的内边距为基准, 因为这个右边的内边距有误差

2.右边内边距的误差从何而来? 因为右边如果放不下一个文字, 那么文字就会换行显示, 所以文字和内边距之间的距离就有了误差

3.顶部的内边距并不是边框到文字顶部的距离, 而是边框到行高顶部的距离

 <style>
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
}
p{
box-sizing: border-box;
width: 610px;
height: 110px;
background-color: #cdcdcd;
border: 1px solid #000000;
font-family:"黑体";
font-size: 20px;
line-height: 40px;
color: #67676d;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}
</style>
<body>
<p>葬爱:非主流文化的常用词，是当今网络流行术语.且流行于非主流杀马特之中。葬，即埋葬，爱，即爱情，翻译成外语就bury love</p>
</body>