其他分享
首页 > 其他分享> > 4.CSS盒子模型

4.CSS盒子模型

作者:互联网

盒子模型

 

4.1 什么是盒子模型

margin:外边距

border:边框

padding:内边距

4.2 边框

1,边框的粗细

2,边框的样式

3,边框的颜色

 /*body总有一个默认的外边距*/
 body{
    margin:0;
    padding: 0;
    text-decoration: none;
 }
 /*border:粗细,样式,颜色*/
 h2{
    font-size:16px;
   
    line-height: 30px;
    margin:0;
 }
 #box{
    width: 300px;
    border:1px solid red;
 }
 form{
    background: blue;
 }
 div:nth-of-type(1)>input{
    border: 3px solid black;
 }
 div:nth-of-type(2)>input{
    border: 3px dashed yellow;
 }

4.3 内外边距

 

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
 <!--外边距的妙用:居中元素-->
    <style>
        /*border:粗细,样式,颜色
        margin: 0 auto;两个参数时候默认上下和左右,四个参数的时候默认上左下右
        margin:0 1px 2px 3px
        */
        #box{
            width: 300px;
            border:1px solid red;
            margin: 0 auto;
        }
        h2{
            font-size:16px;
           
            line-height: 30px;
            margin:0 1px;
        }
        form{
            background: blue;
        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 10px;
        }
    </style>
 </head>
 <body>
 <div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>姓名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱:</span>
            <input type="text">
        </div>
    </form>
 </div>
 </body>
 </html>

盒子的计算方式:margin+border+padding+内容宽度

4.4 边框圆角

4个角

 <!--左上  右上  右下   左下
 border-radius,一个参数时四个角,两个参数时左上,右下,四个值时左上,右上,右下,左下,顺时针方向
 -->
 <style>
    div{
        width: 100px;
        height: 150px;
        margin: 30px;
        border: 10px solid red;
        border-radius:50px 50px 0px 0px;
    }
 </style>

 

4.5 盒子阴影

 div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    box-shadow:10px 10px 100px yellow ;
 }
 

标签:盒子,solid,margin,模型,边框,1px,div,border,CSS
来源: https://www.cnblogs.com/cyh822blogs/p/16653019.html