CSS模型框学习笔记

CSS模型框概述：CSS框模型规定了元素框处理元素内容、内边距、边框、外边距的方式；

CSS 框模型

图解：一般所指的Width、Height说的是元素内容的宽和高，外边距默认是透明的，不会遮挡其后面的元素，而一般所说的背景是指内容和内边距所形成的区域，
内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边，外边距可以是负值，而且在很多情况下都要使用负值的外边距；

一、Padding（内边距）属性：元素与边框之间的空白区域，padding 属性接受长度值或百分比值，但不允许使用负值；

 

<table  style="border-style:solid; border-color:Black;">
   <tr>
      <td style=" border-style:solid; border-color:Black; border-width:1px; padding:1cm; ">
      设置四个相同的内边距
      </td>
     <td style=" border-style:solid; border-color:Black; border-width:1px; padding:1cm  2cm 3cm 4cm; ">
     设置四个不同的内边距1
      </td>
      <td style=" border-style:solid; border-color:Black; border-width:1px; padding-top:1cm; padding-right:2cm; padding-bottom:3cm; padding-left:4cm;">
      设置四个不同的内边距2
      </td>
   </tr>
   
</table>

效果图：

二、border（边框）属性：border是围绕元素内容和内边距的一条或多条线，CSSborder属性允许你规定元素边框的样式，宽度和颜色；

1、边框与背景：边框绘制在元素的背景之上，元素的背景是内容、内边距和边框区的背景；
2、边框样式：边框样式是边框最重要的一个属性，因为如果没有边框样式，就根本不会出现边框；
<table  style="border-style:solid; border-color:Black;">
   <tr>
      <td style="border-width:1; border-color:blue; padding:1cm; background-color:Red; ">
      没有设置边框样式或设置为none，边框就不会出现，
      </td>
     <td style=" border-style:solid; border-width:0.5cm; border-color:Black; padding:1cm; background-color:Red; ">
     设置了边框样式，规定此边框颜色为黑色
      </td>
   </tr>
   
</table>
效果图：

3、边框宽度：为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。
4、透明边框：如果边框没有样式，就没有宽度。不过有些情况下您可能希望创建一个不可见的边框；
<table  style="border-style:solid; border-color:Black; background-color:Blue;">
   <tr >
      <td style="border-style:solid;  border-width:0.5cm; border-color:green; padding:1cm; background-color:Red; ">
      设置边框色为绿色
      </td>
     <td style=" border-style:solid; border-width:0.5cm; border-color:transparent; padding:1cm; background-color:Red; ">
      设置边框色为透明
      </td>
   </tr>
   
</table>
效果图：

三、margin（外边距）属性：围绕在元素边框的空白区域，这个属性值可以接受任何长度单位，百分数，甚至负值；

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
</head>

<body>

<p style="border-style:solid; margin:2cm;">
 四个外边距为2cm
</p>
<p style="border-style:solid; margin:2cm; ">
 四个外边距为2cm
</p>

</body>
</html>

效果图：

 

小结：

1、如果长度或宽度值为百分比，百分数是相对于父元素的宽度计算的，而元素的宽度是指元素内容的宽度；

2、没有边框样式就没有边框；

3、值复制：

  • margin: top right bottom left
  • border:top right bottom left 
  • padding:top right bottom left
这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：

如果为指定了 3 个值，则第 4 个值会从第 2 个值复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值会从第 1 个值复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值复制得到。

 

 

 

 

 

 

 

 

posted @ 2010-12-16 15:55  麻将我会  阅读(443)  评论(0)    收藏  举报