牛腩发布系统CSS盒子模型基础_html/css_WEB-ITnose

一、盒子的内部结构

首先，我们看一个例子。假如墙上有四幅画，如图排列，对于每一幅画来说，都有一个边框（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（粗）和 (具体数值)，也是我们在系统中应用最多的，如 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的核心内容，需要我们牢固的掌握，只有熟练的掌握了这些基础知识，才能设计出理想的页面。这些知识需要我们在实践中熟练并应用，在敲牛腩新闻发布系统的时候，没有必要完全按照视频中的格式来，打造专属于自己的发布系统。