欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2023-12-27 11:49:15
...
盒子模型是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(粗)和 (具体数值),也是我们在系统中应用最多的,如 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的核心内容,需要我们牢固的掌握,只有熟练的掌握了这些基础知识,才能设计出理想的页面。这些知识需要我们在实践中熟练并应用,在敲牛腩新闻发布系统的时候,没有必要完全按照视频中的格式来,打造专属于自己的发布系统。

上一篇:

下一篇: