盒子模型是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的核心内容,需要我们牢固的掌握,只有熟练的掌握了这些基础知识,才能设计出理想的页面。这些知识需要我们在实践中熟练并应用,在敲牛腩新闻发布系统的时候,没有必要完全按照视频中的格式来,打造专属于自己的发布系统。