一、盒子的内部结构
首先，我们看一个例子。假如墙上有四幅画，如图排列，对于每一幅画来说，都有一个边框（border）；每个画框中，画和边框有一定距离，称为内边距（padding），每幅画之间有一点距离，外边距（margin）。
不仅仅是相框，生活中，我们还有很多这样的例子，如电脑，窗户等，这些矩形对象都可以称为“盒子（Box）”。
在页面布局中，为了能够对各个部分进行合理的组织，引入了盒子模型。在CSS中，盒子模型由content（内容）、border（边框）、padding（内边距）和margin（外边距）四个部分组成，如图：
在CSS中，可以通过设定width和height以及各部分的大小来控制盒子，只有利用好这些属性，才能实现理想的排版效果。这一点在项目中理解比较深刻，有时候一像素都不能错，可谓是失之毫厘差之千里。
二、属性设置
1）border
border的属性主要有三个，color（颜色）、width（粗细）和style（样式）。通过三个属性的配合，border设置才能达到良好的效果。在使用CSS设置边框时，可以分别使用border-width, border-color 和border-style来设置。
*border-width设置粗细程度：thin（细） 、 medium （适中）、thick（粗）和
*style设置边框风格：none(无格式)，hidden（隐藏），dotted（点线式），dash、solid、double等
*color颜色设置：语句 border-color: red ；
2）padding
用于控制内容与边距间的距离，和边框的类似。
注意：padding可以设置1、2、3或4个属性
一个：上下左右四个padding都为该值
两个：前者为上下两个的padding值，后者为左右两个padding的值
三个：第1个为上padding值，第二个为左右padding值，第3个为下padding的值
四个：按顺时针方向，一次为上右下左padding的值
3）margin
margin属性值设置方法与padding大致相同，再此不再赘述
盒子模型是CSS的核心内容，需要我们牢固的掌握，只有熟练的掌握了这些基础知识，才能设计出理想的页面。这些知识需要我们在实践中熟练并应用，在敲牛腩新闻发布系统的时候，没有必要完全按照视频中的格式来，打造专属于自己的发布系统。
下载本文