0
点赞
收藏
分享

微信扫一扫

CSS盒子模型

大师的学徒 2022-01-31 阅读 68
csscss3html

CSS盒子模型

在这里插入图片描述

  • margin 外边距
  • padding 内边距
  • border 边框

边框

  1. 粗细
  2. 样式
  3. 颜色
<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>

在这里插入图片描述

举报

相关推荐

盒子模型——CSS

【css盒子模型】

Css盒子模型

CSS 盒子模型

【CSS】CSS盒子模型(3)

CSS(盒子模型2)

2.2 CSS盒子模型

0 条评论