CSS框模型怎么用

+ 提示：内边距、边框和外边距可以作用于一个元素的所有边，也可以作用于单独的边。
+ 提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

h2 {padding:10px;}

h2 {padding:10px 0.25em 2ex 20%;}

    
    
    
    
        .test1 {
            padding: 1.5cm;
        }

        .test2 {
            padding: 1.5cm 0.5cm;
        }

        .test3{
            padding:0px 10px 20px 40px;
        }
    
    



    
        
            
                这个表格单元的每个边拥有相等的内边距1.5cm。
            
        
    
    
    
        
            
                这个表格单元的上和下内边距是 1.5cm，左和右内边距是 0.5cm。
            
        
    
    
    
        
            
                这个表格单元的上和下内边距相同。
            
        
    

• border边框

• CSS使用一个简单的border-color属性，它一次可接受最多4个颜色值，即上、右、下、左这四条边的颜色。

  p{
      border-style:solid;
      border-color:blue rgb(25%,35%,45%) #909090 red;
  }

• 定义单边颜色。

• 透明边框：transparent。这个颜色用于创建有宽度的不可见边框。

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

• bordder-top-color

• bordder-right-color

• bordder-bottom-color

• bordder-left-color

  h2{
      border-style:solid;
      border-color:black;
      border-right-color:red;
  }

• 通过border-width属性为边框指定宽度。

• 可定义单边宽度

• 也可以通过属性分别设置边框的宽度

• 注意：如果没指定边框样式，那就没有宽度。若希望边框出现，就必须声明一个边框样式。例如：

• 按照top-right-bottom-left的顺序设置元素的各边边框。

• bordder-top-width

• bordder-right-width

• bordder-bottom-width

• bordder-left-width

  案例：

  p{
      border-style:solid;
      bordder-top-width:15px;
      bordder-right-width:5px;
      bordder-bottom-width:15px;
      bordder-left-width:5px;
  }

• p {border-style:none;border-width:50px}

• 尽管给边框指定了宽度为50px，但由于边框样式为none，此时不仅边框样式不存在且宽度也会变成0——即边框消失了。

• none：无边框，缺省值

• hidden：隐藏边框，常用于解决边框冲突。

• dotted：点线边框，在很多浏览器中会呈现实线。

• dashed：虚线边框，在很多浏览器中会呈现实线。

• solid：实线边框。

• double：双线边框。

• groove：定义3D凹槽边框，效果和border-color、border-width值相关。

• ridge：定义3D垄状边框，效果和border-color、border-width值相关。

• inset，定义3D inset边框，效果和border-color、border-width值相关。

• outset，定义3D outset边框，效果和border-color、border-width值相关。

• inherit，从父元素继承边框样式。

• 边框风格可以分别定义，顺序是上、右、下、左，案例如下：

  p.aside{border-style:solid dotted dashed double;}  /* 上实线，右点线 下虚线 左双线 */

• 定义单边样式：

• border-top-style

• border-right-style

• border-bottom-style

• border-left-style

• 样式border-style，边框样式有以下这些种类：

• 宽度border-width

• 颜色border-color

• margin外边距

• 外边距合并指的是，当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

• 合并后外边距的高度等于两个发生合并的外边距的高度中较大者。

• margin-top

• margin-right

• margin-bottom

• margin-left

  h3{
      margin-top:20px;
      margin-right:30px;
      margin-bottom:30px;
      margin-left:20px;
  }

• 若缺少左外边距的值，则使用右外边距的。

• 若缺少下外边距的值，则使用上外边距的。

• 围绕在元素边框的空白区域是外边距。

• 围绕外边距会在元素外创建额外的“空白”

• 设置外边距的最简单方法是使用margin属性，这个属性接受任何长度单位、百分比数值设置负值。

• 设置规则：

• 单边外边距属性：

• CSS外边距合并

+ 当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开)，它们的上外边距和下外边距也会发生合并。

• 外边距合并的意义

• 若没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。

• 若外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

+ 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

关于“CSS框模型怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。