css:盒子模型边框(边框、内外边距)

2020-06-03 16:00:49来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

css:盒子模型边框(边框、内外边距)

1、概念

所谓盒子模型,就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。css盒子模型本质上就是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距和实际内容

 

2、边框

属性:宽度、样式、颜色

(1)普通方式

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
             div{
                 width: 300px;
                 height: 200px;
                 border-width: 5px;
                 border-style: dashed;
                 border-color: red;             
             }
        </style>
    </head>

    <body>
    <div></div>
    </body>

</html>

(2)复合方式

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
             div{
                 width: 300px;
                 height: 200px;
                 border: 5px dashed red;         
             }
        </style>
    </head>

    <body>
    <div></div>
    </body>

</html>

 

 (3)边框的局部设置

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
             div{
                 width: 300px;
                 height: 200px;
                 border-bottom: 5px dashed red;     
                 border-top:10px dotted purple;
                 border-right:3px dashed beige ;
                 border-left: 2px dotted bisque;    
             }
        </style>
    </head>

    <body>
    <div></div>
    </body>

</html>

 

 下面的样式会覆盖上面的样式:

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
             div{
                 width: 300px;
                 height: 200px;
                 border: 5px dashed red;     
                 border-top:10px dotted purple;
             }
        </style>
    </head>

    <body>
    <div></div>
    </body>

</html>

 

 (4)表格的细线边框

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            table{
                width: 300px;
                height: 100px;
            }
            table,td{
                border: 1px solid blue;
                border-collapse:collapse;  <!--把相邻的边框合并在一起-->
                font-size: 14px;
                text-align: center;
                
            }
        </style>
    </head>

    <body>
    <table align="center" cellspacing="0">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    </body>

</html>

 

 (5)边框会影响盒子的实际大小

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: chartreuse;
                border: 10px red solid;
            }
        </style>
    </head>

    <body>
           <div></div>
    </body>

</html>

 

 盒子的实际大小是内部颜色的大小,边框会使得盒子变大,因此,实际测量的时候要减去边框的宽度

(6)内边距

padding属性用于设置内边距,即边框与内容之间的距离

不加padding属性:

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: chartreuse;
            }
        </style>
    </head>

    <body>
           <div>床前明月光,疑是地上霜</div>
    </body>

</html>

 

 内容与边框的距离没有办法控制

添加padding属性:

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: chartreuse;
                padding-left: 15px;
                padding-top: 10px;
            }
        </style>
    </head>

    <body>
           <div>床前明月光,疑是地上霜</div>
    </body>

</html>

 

 (7)内边距:padding

 

 图片来源:黑马程序员pink老师

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: chartreuse;
                padding: 10px;
            }
        </style>
    </head>
    <body>
           <div>床前明月光,疑是地上霜</div>
    </body>

</html>

 

 (8)padding属性对盒子大小的影响

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: chartreuse;
                padding: 10px;
            }
        </style>
    </head>
    <body>
           <div>床前明月光,疑是地上霜</div>
    </body>

</html>

定义的div的大小是100*100,但是实际的div大小是220*220,也就是说div的大小是加上内边距之后的大小

 

 

3、盒子模型外边距margin

(1)不设置外边距:

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外边距</title>
        <style>
           div{
               width: 100px;
               height: 50px;
               background-color: mediumvioletred;
           }
        </style>
    </head>
    <body>
      <div>1</div>
      <div>2</div>
    </body>

</html>

 

 两个盒子是连接到一起的

(2)设置外边距:

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外边距</title>
        <style>
           div{
               width: 100px;
               height: 50px;
               background-color: mediumvioletred;
           }
           .div2{
               margin-top: 3px;
           }
        </style>
    </head>
    <body>
      <div>1</div>
      <div class="div2">2</div>
    </body>

</html>

 

 margin的简写方式和padding完全一致

(3)块级元素水平居中

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外边距</title>
        <style>
           div{
               width: 600px;
               height: 50px;
               background-color: mediumvioletred;
               margin: 0 auto;
           }
        </style>
    </head>
    <body>
      <div></div>
    </body>
</html>

 

 (4)行内元素和行内块元素水平居中:给父元素添加text-align

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外边距</title>
        <style>
           div{
               width: 600px;
               height: 50px;
               background-color: mediumvioletred;
               margin: 0 auto;
               text-align: center;
           }
        </style>
    </head>
    <body>
      <div>
          <span>大家好</span>
      </div>
    </body>
</html>

 

 行内块元素:

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外边距</title>
        <style>
           div{
               width: 600px;
               height: 50px;
               background-color: mediumvioletred;
               margin: 0 auto;
               text-align: center;
           }
        </style>
    </head>
    <body>
      <div>
          <img src="#" />
      </div>
    </body>
</html>

 

 

4、嵌套块元素的塌陷

(1)塌陷问题:

对于两个嵌套关系(父子关系)的块元素,父元素有上外边距,同时,子元素也有上外边距,此时父元素会塌陷较大的外边距值

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外边距</title>
        <style>
           .father{
               width: 400px;
               height: 400px;
               background-color: purple;
               margin-top:50px ;
           }
           .son{
               width: 200px;
               height: 200px;
               background-color: paleturquoise;
               margin-top: 100px;
           }
        </style>
    </head>
    <body>
      <div class="father">
            <div class="son"></div>
      </div>
    </body>
</html>

 

 此时,子元素并没有向下移动

 解决方案:

方案一:为父元素定义上边框

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外边距</title>
        <style>
           .father{
               width: 400px;
               height: 400px;
               background-color: purple;
               margin-top:50px ;
               border: 1px solid red;
           }
           .son{
               width: 200px;
               height: 200px;
               background-color: paleturquoise;
               margin-top: 100px;
           }
        </style>
    </head>
    <body>
      <div class="father">
            <div class="son"></div>
      </div>
    </body>
</html>

 

 方案二:为父元素定义上内边距

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外边距</title>
        <style>
           .father{
               width: 400px;
               height: 400px;
               background-color: purple;
               margin-top:50px ;
               padding: 1px;
           }
           .son{
               width: 200px;
               height: 200px;
               background-color: paleturquoise;
               margin-top: 100px;
           }
        </style>
    </head>
    <body>
      <div class="father">
            <div class="son"></div>
      </div>
    </body>
</html>

 

 方案三:为父元素添加:overflow:hidden

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外边距</title>
        <style>
           .father{
               width: 400px;
               height: 400px;
               background-color: purple;
               margin-top:50px ;
               overflow: hidden;
           }
           .son{
               width: 200px;
               height: 200px;
               background-color: paleturquoise;
               margin-top: 100px;
           }
        </style>
    </head>
    <body>
      <div class="father">
            <div class="son"></div>
      </div>
    </body>
</html>

 

 

5、清除内外边距

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外边距</title>
        <style>
    
        </style>
    </head>
    <body>
      <div>
            <div>123</div>
      </div>
    </body>
</html>

 

 可以看到内容“123”并没有考浏览器的边缘显示,而是有一个较小的边距。

 

 有一个默认为8的外边距,不同的网页元素,内外边距的默认值是不同的

内外边距的清除:

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外边距</title>
        <style>
          *{
              margin: 0;
              padding: 0;
          }
        </style>
    </head>
    <body>
    
     <div>
         123
     </div>
     
    </body>
</html>

 


原文链接:https://www.cnblogs.com/zhai1997/p/13035305.html
如有疑问请与原作者联系

标签:PS方式程序load问题连接

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:学会这些CSS,再也不用切图!!!

下一篇:要学习什么知识为了成为一名前端工程师?