CSS之盒模型

怎么理解盒子模型？

盒子模型是样式表（css）控制页面的很重要的概念。如果理解了盒子模型和其中每个元素的用法，才能熟练使用css的定位方法和技巧。所有的页面的元素都可以看成是一个盒子，占据一定的页面空间。占据的空间要比实际使用的空间要大得多。我们可以调整盒子的边框和距离，来调整盒子（页面和页面中的元素）的位置。

盒子模型是由内容（content）、边框（border）、内边距（padding）、外边距（margin）组成

他们的关系如下图所示：

• 盒子实际宽度（高度）=内容（content）+边框（border）+内边距（padding）+外边距（margin）。
• 对于任何一个元素设置width和height控制内容大小，
• 也可以分别设置各自的边框（border）、间隙（padding）、间隔（margin）。

content

content是盒子主要装内容的地方。即元素、文档流、嵌套盒子，盒模型主要组成部分之一。

border

border是元素的外围，即元素的边，盒模型主要组成部分之一。

计算元素的宽和高要把border加上特别是特殊网站页面

border有三个主要属性，color（颜色）、width（粗细）和style（样式）。

• color主要是指定border的颜色，一共有256的3次方种颜色供我们选择。通常是16进制的值，比如红色是“#FF0000”。
• width是border粗细程度，可以设置为thin、thick和length，length为具体数值，比如说border:1px #CCC solid;其中1px指的是border的width，默认值是medium，一般浏览器解析为2像素。
• style属性可以设为none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等，其中none和hodden是不显示border，hidden可以用来解决边框的冲突问题。对于groove、inset、outset、rigde、border-style，IE会出现兼容问题，使用时一定要注意。

padding

padding用于控制content与border之间的距离，即内边距，盒模型主要组成部分之一。

• padding:10px;                                       内边距四周都是统一值
• padding:10px 10px;                             上下   左右
• padding:10px 10px 10px;                    上    左右   下
• padding:10px 10px 10px 10px;           上    右   下  左

 

margin

margin用于控制块与块（可以理解成块级元素）之间的距离。即外边距，盒模型主要组成部分之一。

• margin:10px;                                          外边距四周都是统一值
• margin:10px 10px;                                上下   左右
• margin:10px 10px 10px;                       上    左右   下
• margin:10px 10px 10px 10px;              上    右   下  左

每日寄语-“不为失败找理由，只为成功找方法”