码迷,mamicode.com
首页 > Web开发 > 详细

牛腩发布系统--CSS盒子模型基础

时间:2014-11-30 18:46:46      阅读:284      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   ar   color   使用   sp   strong   on   

      盒子模型是CSS控制页面时一个很重要的概念。整个牛腩发布系统中都贯穿着盒子模型的使用,只有很好的掌握了盒子模型以及其中每个元素的用法,才能真正的控制好页面中的各个元素。页面中的元素都可以看成一个盒子,这些盒子之间也会相互影响。


      一、盒子的内部结构

      首先,我们看一个例子。假如墙上有四幅画,如图排列,对于每一幅画来说,都有一个边框(border);每个画框中,画和边框有一定距离,称为内边距(padding),每幅画之间有一点距离,外边距(margin)。


      bubuko.com,布布扣


      不仅仅是相框,生活中,我们还有很多这样的例子,如电脑,窗户等,这些矩形对象都可以称为“盒子(Box)”。

      在页面布局中,为了能够对各个部分进行合理的组织,引入了盒子模型。在CSS中,盒子模型由content(内容)、border(边框)、padding(内边距)和margin(外边距)四个部分组成,如图:

       bubuko.com,布布扣

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

      

牛腩发布系统--CSS盒子模型基础

标签:style   blog   http   ar   color   使用   sp   strong   on   

原文地址:http://blog.csdn.net/u010924897/article/details/41624123

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!