CSS盒子模型

Leon_davis

已于 2022-01-30 01:29:55 修改

阅读量240

点赞数

分类专栏： HTML+CSS 文章标签： css css3 html

于 2022-01-30 01:29:22 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43419887/article/details/122749782

版权

HTML+CSS 专栏收录该内容

19 篇文章

订阅专栏

CSS盒子模型

在这里插入图片描述

margin 外边距
padding 内边距
border 边框

边框

粗细
样式
颜色

<style>
        /*body总有外边距，先置零*/
        body{
            margin:0;

        }
        /*border:粗细，样式，颜色*/
        #box{
            width:300px;
            border:1px solid red;
        }
        h2{
            font-size: 16px;
            background-color: #4158D0;
            line-height: 30px;
            margin:0;
        }
        form{
            background: darkseagreen;
        }
        div:nth-of-type(1) input{
            border:3px solid black;
        }
        div:nth-of-type(2) input{
            border:3px dashed #bad8dc;
        }
        div:nth-of-type(3) input{
            border:3px dashed #c16bdc;
        }
    </style>

在这里插入图片描述

外边距

<!--外边距的妙用：居中
    margin:0 auto-->
    <style>
        /*body总有外边距，先置零*/
        body{
            margin:0;

        }
        /*border:粗细，样式，颜色*/
        #box{
            width:300px;
            border:1px solid #b8dc9c;
            margin:0 auto;
        }
        h2{
            font-size: 16px;
            background-color: #b8dc9c;
            line-height: 30px;
            margin:0;
        }
        form{
            background: #b8dc9c;
        }
        input{
            border:1px solid black;
        }

    </style>