作者|李娜温馨提示：细读本文需要2分钟，速读仅需1分钟。
*本文为「Java联盟」原创内容，转载无需授权，请保留署名来源。
hello，小伙伴们大家晚上好呀！今天李娜又来分享知识了！有没有很想我呀！
前面几章给大家，简单的介绍了一下网页中的几种常见的标签。不知道小伙伴们还有印象吗？有的话可以在评论留言打卡哦。
那么现在李娜就来给大家介绍一下我们的盒子模型吧！
1.什么是盒子？
我们所有的HTML标签，当他们在页面中显示的时候具有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性。
结构如下图：
这么样看起来是不是很像一个盒子，所以称之为盒子模型。所以当我们在设计一个页面的时候，就可以把我们所使用的标签看成是一个个的小盒子在一个大一点的容器 body 里面经行排列。
就好像我们小时候玩的积木是一个道理，（如果你说你没有玩过，小编只想说“呵呵”）所以，我们在学习一个新的事物的时候，可以尝试让他和我们熟悉的事物进行联系，让他可以和我们原有的记忆连成线，织成网。便于我们回忆。
2.盒子模型之盒子的样式css
那么既然是盒子，就会用自己的款式。我们说的样式就是给这个盒子规定他的规格。
现在假设我们要设计一个
标签的样式，那么我们有两种写法:
写法一：
内容
我们把这中写法成为行内样式。就是一个个的为我们的盒子设计样式。
那么这样子写。有个弊端就是一旦我们的页面有很多的标签，也就是盒子时。会做很多重复的工作，影响我们的效率。而且当我们调试程序的时候，也是很困难的。
就像下面的淘宝页面。
这个页面拥有很多的标签，按照上面的写法，在制作的时候就会很困难。不过别怕，我们还有第二种方法：
写法二：
把原本写在标签内的行内样式提取出来写在一起，我们称之为内部样式。如下图
div{color：red；font-size：10px；} 我们称之为内部样式。
其中：
这样不仅页面看起来整洁，便于我们修改，而且同样样式的标签，我们只设置一次就可以了！
像这行代码，就把我们页面内的所有div标签的颜色设置为红色，字体大小设置为10像素了。这么看来是不是轻松了好多！
这就是css（Cascading Style Sheets）就是我们所说的层叠样式表了。
今天就给大家介绍这么多，主要想让大家有个盒子的概念，以及简单的了解一下css。小编会在后续的文章中为大家详细介绍有关网页设计的知识点的。小伙伴们有想了解的，欢迎留言哦！么么哒！！
当然有什么问题或者需要李娜我给大家分享讲解的地方，可以在留言区留言告诉我，整理后会在公众号里面分享讲解哦！
网友评论