CSS盒子模型小剖析

开发 前端
盒子模型无非就是描述的元素的尺寸跟位置,只要掌握好这两点就可以灵活的运用盒子模型来布局了。下图是盒子模型的基本元素和属性

前段时间刚刚从C/S过度到B/S,提到B/S就不能说CSS,而说起CSS又不能落下盒子模型。在CSS诞生的时候就有了盒子模型的概念,网页中大部分的元素都能构成一个盒子模型,。盒子模型无非就是描述的元素的尺寸跟位置,只要掌握好这两点就可以灵活的运用盒子模型来布局了。下图是盒子模型的基本元素和属性:

下图是一个盒子模型的基本模型,网页中每个元素大概都可以用下图的模型来描述。

element: 元素。有的地方也叫做content,译为内容。

padding: 内边距。默认值为0,不可以为负值。具体使用如下:

  1. padding10px 20px 30px 40px;   /*设置元素内边距的上、右、下、左的值分别是10、20、30、40像素*/ 
  2. padding10px 20px 30px;   /*设置元素内边距的上、右、下、左的值分别是10、20、30、20像素*/ 
  3. padding10px 20px;   /*设置元素内边距的上、右、下、左的值分别是10、20、10、20像素*/ 
  4. padding10px;   /*设置元素内边距的上、右、下、左的值均为10像素*/ 

可见,如果对四个方向均进行设置,那么就按设置的值,如果只设置上、右,那么下、左默认为上、右的值,如果只设置一个值,那么四个方向都为此值。另外四个值也可以单独设置,对应属性为padding-top、padding-right、padding-bottom、padding-left。

margin: 外边距。默认值为0,与内边距不同的是它的值可以为负值,使用方法与内边距相同,不多说。

border: 边框。用来设置边框的粗细、样式、颜色等属性。

  1. /*设置元素边框样式为实线,颜色为黑色,粗度为20像素*/ 
  2. border-stylesolid;  
  3. border-colorblack;  
  4. border-width20px;  
  5.  
  6. /*设置元素上边框粗度为15像素,左边框样式为双线,右边框颜色为红色*/ 
  7. border-top-width15px;  
  8. border-left-styledouble;  
  9. border-right-colorred

注意:如果上下文设置有冲突,则按照下面的设置,以上代码的效果为上边框为15像素,其他边为20像素,其他属性同理。

width: 宽度。指的是element的宽度,不是盒子的宽度。

height: 高度。指的是element的高度,不是盒子的高度。

盒子的尺寸根据下图应按一下方式计算:

  1. 盒子宽度=width + padding-left + padding-right + border-left-width + border-right-width  
  2. 盒子高度=height + padding-top + padding-bottom + border-top-width + border-bottom-width 

了解了以上内容,盒子模型基本就没问题了,掌握了盒子模型CSS也就差不多了,剩下的无非也就是将一些基本的属性合理组织,配合使用了。只要多练习想要调出美观大方的CSS样式不是什么难事。

原文链接:http://www.cnblogs.com/liushuijinger/archive/2012/08/30/2663347.html

【编辑推荐】

责任编辑:张伟 来源: 刘水镜的博客
相关推荐

2023-09-11 06:12:31

盒子模型CSS

2010-05-10 08:47:42

CSS 3CSS

2022-09-10 19:26:37

HTMLCSS

2010-09-08 09:44:17

CSS盒子模式

2022-09-28 23:25:14

项目CSS定位选择器

2018-02-25 16:35:32

前端CSS面试题

2012-06-27 14:12:45

CSS

2012-04-06 13:18:58

IE6W3CDIV

2010-08-25 11:05:03

CSSpaddingmargin

2010-09-08 11:06:49

CSSpaddingmargin

2010-08-24 16:17:27

CSS简写

2017-05-24 10:12:54

前端FlexboxCSS3

2023-06-09 14:01:00

架构程序APP

2010-08-16 14:07:44

盒模型marginpadding

2009-09-08 16:20:12

LINQ to SQL

2009-09-18 17:17:58

LINQ模型

2010-08-27 13:07:00

CSS规则

2010-09-13 09:54:56

CSS浮动元素

2010-08-26 15:18:27

CSS样式

2010-08-25 14:56:15

CSS相对定位
点赞
收藏

51CTO技术栈公众号