盒子模型
2018-07-28 本文已影响0人
Adagou
一、盒子模型
- 什么是css盒子模型
-
css中的盒子模型仅仅是一个形象的比喻，HTML中所有的标签都是盒子
-
在HTML中所有的标签都可以设置：
宽度/高度 == 指定可以存放内容的区域
内边距 == 填充物
边框 == 手机盒子自己
外边框 == 盒子与盒子之间的间隙
二、盒子模型的宽度和高度
- 内容的宽度和高度
- 通过标签的width/height属性设置的宽度和高度；
- 元素的宽度和高度
- 宽度= 左边框 + 左内边距 + width + 右边内距 + 右边框
- 高度=同理可证
- 元素空间的宽度和高度
- 宽度=左外边框+左边框 + 左内边距 + width + 右边内距 + 右边框+右外边框
- 高度=同理可证
三、盒子的box-sizing 属性
- css3中新增了一个box-sizing属性，这个属性可以保证我们给盒子新增padding 和border之后，盒子元素的宽度和高度不变。
- box-sizing属性是如何保证增加padding和border之后，盒子元素的宽度和高度不变？
- 是通过减去一部分内容的宽度和高度
- box-sizing的取值：
3.1 content-box：
元素的宽高= 边框+内边距+内容宽高
3.2 border-box：（元素的大小不会改变）
元素的宽高=width/height属性设置的数值
注意点：
- 如果两个盒子是嵌套关系，那么设置了里面的一个盒子的顶部外边框，外面的盒子也会被顶下来。
2.如果外面的盒子不想被一起顶下来，纳闷可以给外面的盒子添加一个边框属性。 - 在企业开发中一般情况下如果需要控制嵌套靠关系盒子之间的距离，应该首先考虑padding，其次考虑margin，因为margin本质上是用于控制兄弟关系之间的间隙的。
- 在嵌套关系的盒子中，我们可以利用margin：0 auto的方式来让里面盒子在外面的盒子中水平居中。margin:0 auto；只是对水平方向有效，对垂直方向无效。
四、盒子居中和内容居中
- text-align:center 和 margin:0 auto 的区别
- text-align:center： 是让盒子中的文字/图片居中显示
- margin:0 auto ：是让盒子自己居中显示
五、清除默认边距（外边距和内边距）
- 为什么要清空默认边距
- 在企业开发中，为了更好的控制盒子的宽高和计算盒子的宽高等等，所以在企业开发中，编写代码之前第一件事情就是清空默认的边距。
- 如何清空默认的边距？
*{
margin:0;
padding:0;
}
-
通配符选择器会遍历当前界面所有的标签，所以性能不好。
-
企业开发中可以从这个网址中拷贝：
http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css
六、行高和字号
- 什么是行高
- 在css中，所有的行，都是有行高的。
- line-height: 2px.：行高。
注意点：
- 行高和元素的高度不一样。
规律
- 文字在行高中默认是垂直居中的；
- 在企业开发中，我们经常将盒子的高度和行高设置为一样，那么就可以保证一行文字在盒子的高度中是垂直居中的，简而言之就是：要想一行文字在盒子中垂直居中，那么只需要设置这行文字的行高等于盒子的高即可。
- 在企业中开发中，如果一个盒子中有多行文字，那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中，只能通过设置padding来让文字居中。
七 、还原字体和字号
注意点
- 在企业开发中，如果一个盒子中存储的是文字，那么一般情况下，我们会以盒子左边的内边距为基准，不会以右边的内边距为基准，因为右边的内边距有误差。
- 右边边距的误差从何而来？因为右边如果放不下一个文字，那么文字就会换行显示，这样导致右边的会有误差。
- 顶部的内边距并不是边框到文字顶部的距离，而是边框到行高顶部的距离。
八、文章界面
1、开始写网页的步骤
- 1.1 清空所有的边距
- 1.2 从外到内，从上到下的编写网页代码
