本人是一名后端程序员,本来是做Java的,由于实习公司用的是C#,不得不重头开始学,由于在之前的很多面试笔试中有关于盒子模型的问题,加上现在程序员的发展都在往全栈走,所以还是打算学习一下前端,话不多说,开始进入正题。
盒子模型,空说意义不大,必须上图才能更加深刻的体会它的含义。
如图,我们简单的称盒子模型为“三矩形,四要素” 三矩形就是它由三个矩形嵌套而成,四个要素就是它的4个属性。我们由内到外介绍他们。
content:这里是陈放内容的地方,它位于最中间的位子,它还有height和weight两个决定content大小的关键属性。
padding:内边距,由于它所在矩形在中间,所以它和content中间的部分叫做内边距。
border:边框,可以理解为隔开中间矩形和外面矩形的一堵墙。
margin:外边距,边框外到第三个矩形边界的所有位置。
注意,CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的(加粗!!)
基本情况我已经介绍完了,那么这个盒子模型到底用来干嘛呢?且听我慢慢道来。
我们来看两张图片
我们对可以用F12进行页面调试的浏览器(谷歌、火狐等)进行调试,可以发现几乎处处都有盒子模型的存在,比如在第三张图片中,我们看到的盒子模型中的content属性,就是整个HTML页面。所以,一个全局的HTML页面,就 是一个盒子模型的例子。(先写到这里,以后有更多的感悟了再更新。)