这里放一张关于盒子模型的图片:
大体上样式就是图片那样,其实和正常的CSS,html差不多。
疑问:一个盒子的总宽度,总高度如何计算呢?
答:
1.一个盒子的总宽度=盒子里面内容的宽度+左右两边的填充+左右两边的边框线。
2.一个盒子的总高度=盒子里面内容的高度+左右两边的填充+左右两边的边框线。
注意:一个盒子的高度一般情况下是不用设置的,因为一个盒子的高度它应该是由其内容来决定的。
===========================================================================
四种属性非常常用:
padding-top:上内填充。
padding-right:右内填充。
padding-bottom:下内填充。
padding-left:左内填充。
padding简写属性:
padding简写时,是按照上、右、下、左。(从布局上来看,就是顺时针的方向。)
padding只有一个值时,例如:padding:20px;这表示上右下左这四个方向的内填充都是20;
padding有两个值时,例如:padding:10px 20px;这表示上下是10px,左右是20px。
padding有是三个值时,例如:padding:10px 20px 30px;这表示上为10px,左右为20px,下为30px。
padding有四个值时,就按照上、右、下、左,来执行了。
========================================================================
margin主要是指盒子与盒子之间的距离。
margin的四个属性:
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:左外边距
margin简写属性:
margin的简写顺序和padding一样,上、右、下、左。
并且和padding一样,数值也是一样的。
=========================================================================
什么是margin塌陷现象?
答:
**1.在标准文档流中,竖直方向的margin值不会叠加,它会取较大的值。
2.横着方向是没有margin的塌陷现象的。
3浮动元素是没有margin的塌陷现象的。**
下面是一个标准文档流的案例,这里的margin就是取得40px,也就是最大值:
=======================================================================
margin的值可以是auto,当左外边距与右外边距的值都是auto时,那么这个盒子就会水平居中。
注意:
1.使用margin来实现水平居中时。一定要 有固定的宽度(给这个盒子设定一个宽度) 只有块元素可以实现水平居中,行内元素是是不能实现居中的。
-
不设置宽度,默认是100%,就体现不出居中的效果了。
-
这里顺带提一下行内元素,行内元素就是默认情况下只占自己内容的宽容和高度的空间,无法改变它的高度或者宽度,只能转成块级元素后方可改变宽度和高度。也就是说行内元素无法设置自己的宽高。
2.只有 ** 标准文档流中的盒子 ** 才可以使用margin来实现水平居中 。
3.margin属性是用来实现盒子的水平居中,而不是文本的水平居中。
====================================================================================
上面是一个例子,执行后的结果如下:
很明显,在content类设定的margin-top,结果绿色的div面积也一起跟着执行了。
解决这种办法,方法多有个。
方法一:
给其父元素(绿色的div)设置一个边框。
在box类中添加:
border: 1px solid #f00;
再次执行就可以发现恢复正常了。
但是这种方法不常用,因为边框一般主要是用于来调试代码的,很少给一个盒子设定边框。
前端框架
前端框架太多了,真的学不动了,别慌,其实对于前端的三大马车,Angular、React、Vue 只要把其中一种框架学明白,底层原理实现,其他两个学起来不会很吃力,这也取决于你以后就职的公司要求你会哪一个框架了,当然,会的越多越好,但是往往每个人的时间是有限的,对于自学的学生,或者即将面试找工作的人,当然要选择一门框架深挖原理。
以 Vue 为例,我整理了如下的面试题。