牛腩发布系统--CSS盒子模型基础
盒子模型是CSS控制页面时一个很重要的概念。整个牛腩发布系统中都贯穿着盒子模型的使用，只有很好的掌握了盒子模型以及其中每个元素的用法，才能真正的控制好页面中的各个元素。页面中的元素都可以看成一个盒子，这些盒子之间也会相互影响。
一、盒子的内部结构
首先，我们看一个例子。假如墙上有四幅画，如图排列，对于每一幅画来说，都有一个边框（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（粗）和 <length>(具体数值)，也是我们在系统中应用最多的，如 border-width：4px;
*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的核心内容，需要我们牢固的掌握，只有熟练的掌握了这些基础知识，才能设计出理想的页面。这些知识需要我们在实践中熟练并应用，在敲牛腩新闻发布系统的时候，没有必要完全按照视频中的格式来，打造专属于自己的发布系统。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
