css学习笔记——css框模型

CSS框模型

  css框模型规定了元素处理元素内容、内边距、边框和外边距的方式。

css学习笔记——css框模型

  背景: 由内容、内边距和边框组成的区域。内边距、边框、外边距都是可选的,默认值都为0。

css学习笔记——css框模型
<!DOCTYPE html>
<html>
    <head>
        <style>
        img {
            border:2px solid red;    
            margin:80px;
            background:no-repeat blue;
            padding:10px;
        }
        </style>
    </head>
    <body>
        <img src=‘http://gtms01.alicdn.com/tps/i1/T1E98mFploXXc2jIrl-250-125.png‘/>
    </body>
</html>
css学习笔记——css框模型

   注意:1、css中,height、width指的是 内容区域 的高度和宽度,增加外边距和内边距不会影响到内容的尺寸,只会增加元素框的总尺寸。

      2、外边距可以为负值,而且大多数情况下都是使用负值的外边距。

 

2、内边距

  内边距的属性:padding-top、padding-right、padding-bottom、padding-left

  可以给内边距设置四个不同的值:

  ep:h1 {padding:10px 0.25 2ex 20%;}  注意:在给内边距设置值的时候是按照上右下左的顺序。

  如果我们给内边距是以百分数值的方式来进行赋值的话,要注意,百分数值是相对于其父元素的width值来进行计算的,外边距也同理。所以父元素的width的值发生变化时,内边距和外边距都会改变。

css学习笔记——css框模型
 <html>
<head>
  <style>
    div {
      height:200px;
      width:300px;
      border:2px solid red;
      padding:10px;
      background:no-repeat  green;
    }
    div p {
      padding:10%;
      background:no-repeat red;
    }
  </style>
</head>
<body>
  <div>
    <p>哈哈哈哈哈哈哈</p>
  </div>
</body>
</html>
css学习笔记——css框模型

 

3、边框

  定义:元素边框是围绕元素内容和内边距的一条或多条线。 

  边框与背景: 

     css2.1定义:元素的背景是指内容、内边距和边框组成的那部分区域。

  边框的样式属性:

      border-style:dotted solid double dashed; 分别是点状、实线、双线、虚线。(上右下左)

     border-style:dotted solid double; 分别是上边框是点状、左右边框是实线、下边框是双线

              border-style:dotted solid; 分别是上下边框是点状、左右边框是实线

              border-style:dotted; 四条边框都是点状的

  边框的样式属性值:

     none        无边框

     hidden       与“none”相同,不过hidden应用于表示除外,对于表,hidden用于解决边框冲突。

     dotted       点状边框

     dashed        虚线边框

     solid        实线边框

     double       双线边框

     groove        3D凹槽边框

     ridge         3D隆状边框

     inset        3D inset边框

     outset       3D outset边框

  边框宽度:

     border-width属性:   可以用来定义边框的宽度

            属性值:  thin(细的边框)、medium(中等粗细的边框)、thick(粗的边框)

                 length(可以自己设定边框的宽度,ep:ep:border-width:10px; 注意:设置边框宽度的前提是有边框)

  透明边框: 

a:link,a:visited {
    border-style:solid;
    border-width:5px;
    border-color:transparent;        
}
a:hover {border-color:gray;}

    边框的简写形式:

    ep:border:red double 5px;

 

4、外边距

  定义:围绕着元素变宽的空白区域就是外边距,设置外边距会在元素外创建额外的“空白”。

  margin属性 

    值的复制:ep:p {margin: 0.5em 1em 0.5em 1em;}

            p {margin: 0.5em 1em;}

            两者是等价的。

    注意:最好还是四个值都写上,因为在p {margin: 20px 30px 30px 20px;}这种情况下,是不能使用 复制值得方式的。

 

5、CSS外边距合并

   外边距合并指的是,当两个垂直边距相遇时,它们将形成一个外边距,合并后的外边距的高度等于两个发生合并的外边距的高度中较大的那个。ep:1、{margin-bottom:10px;},2、{margin-top:20px;}合并后的外边距是 20px。

   1、当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。

   css学习笔记——css框模型     

 

   2、当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。   

        css学习笔记——css框模型

 

css学习笔记——css框模型,布布扣,bubuko.com

css学习笔记——css框模型

上一篇:jquery学习之1.6-选择器小练习,遍历复选框


下一篇:Asp.net 事务处理