盒子模型

 

盒子模型

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

特点

想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；

让我们俯视这个盒子，它有上下左右四条边，所以每个属性都包括四个部分：上下左右；这四部分可同时设置，也可分别设置；内边距可以理解为盒子里装的东西和边框的距离，而边框有厚薄和颜色之分，内容就是盒子中间装的东西，外边距就是边框外面自动留出的一段空白。

结构

内容（CONTENT）就是盒子里装的东西；

而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；

边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

填充只有宽度属性，可以理解为生活中盒子每个HTML标记都可看作一个盒子；

==================================

外边距
margin：

• margin-top
• margin-right
• margin-bottom
• margin-left
• margin

 

示例

margin-top: 3 px

margin-right : 5 px

margin-bottom : 7 px

margin-left : 4 px

margin :3px 5px 7px 4px;

margin :3px 5px 7px (5px);

margin :3px 5px (3px 5px);

margin :8px (8px 8px 8px);

注意：

margin: 上 右 下 左;  （顺时针方向）

 

 

==================================

边框

border：

 

 

==================================

内边距

padding

• padding-left 
• padding-right
• padding-top
• padding-bottom
• padding

 

示例：

padding-left:10px; 

padding-right: 5px; 

padding-top: 20px; 

padding-bottom:8px; 

padding:20px  5px  8px  10px ; 

padding:30px  8px 10px   (8px) ;

padding:10px   5px;  

padding:10px;

 

注意：

padding: 上 右 下 左;  （顺时针方向）

 

==================================

盒子模型总尺度

盒子模型总尺度 =   border + padding +margin + 内容尺寸(宽/高)

 

外边距可用于网页居中显示 

• margin-left: auto;
• margin-right:auto; 

块元素才能完全适用于盒子模型 

使用display属性来相互转化 

• none（元素隐藏，不可见） 
• block（转为块元素，独占一行） 
• inline（转为内联元素，不换行）

 

================================== 

浮动属性

float 

取值： 

• left  左浮动 
• right   右浮动 
• none     不浮动

作用 

• 块元素同行排列显示，一般用于排版、分栏显示 
• 设置浮动属性后，脱离文档流向指定的左或右边对齐 直到父元素的边界或浮动的元素 

注意 :

使用浮动后要及时清除，以免影响其后的网页元素

==================================

清除浮动

清除浮动必要性 

• 浮动后，脱离了文档流不占网页空间 
• 浮动后的网页元素会影响同级元素 

clear属性清除浮动 

  取值 

• left
• right 
• both 
• none 

   表明容器框的哪边不挨着浮动框

 

 

==================================

overflow属性 

overflow

作用 

• 定义溢出元素内容区的内容会如何处理 

取值 

• visible （默认） 
• auto 
• hidden 
• scroll

 

==================================

定位属性

position属性

     relative（相对定位） 

相对它原来的位置，通过指定偏移，到达新的位置。

仍在标准流中，它对父级盒子和相邻的盒子都没有任何影响

     absolute（绝对定位）

相对已设定非static定位属性的父元素计算偏移量 

     fixed（相对浏览器固定定位，IE6不支持） 

     static（默认） 

偏移量设置 

• X轴(left、right 属性)与Y轴（top、bottom属性） 
• 可取值：像素或百分比