CSS-盒子模型

JINGJID

已于 2022-04-08 22:08:48 修改

阅读量231

点赞数

分类专栏： css学习文章标签： css

于 2022-04-07 17:37:30 首次发布

本文链接：https://blog.csdn.net/JINGJID/article/details/124019764

版权

css学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.什么是盒子模型

margin：外边距

padding：内边距

border：边框

2.边框

<style>
        /*body 总有一个默认外边距为0*/
        body{
            margin: 0;
        }
        #box{
            width: 300px;
            /*border: 粗细 ，样式，颜色;*/
            /*solid:实线 dashed：虚线*/
            border: 1px solid #af7777;
        }
        h2{
            background: #a1dcde;
            line-height: 30px;
            
        }
        form{
            background: #a1dcde;
        }
        div:nth-of-type(1) input{
            border: 3px solid #c9c7b3;
        }
        div:nth-of-type(2) input{
            border: 3px dashed #e8e3aa;
        }

    </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>

3.内外边距

1.外边距---外边距可以让内容居中

margin ： 0 auto 居中的要求：必须为块元素，块元素有固定宽度

  margin 0：上下左右
  margin  0  0  上下  左右
  margin 0 0 0 0 上  左  下  右---顺时针旋转

上边距--margin-top

下边距--margin-bottom

/*下边距为0*/
/*margin-bottom: 0 ;*/

2.内边距---与外边距性质相同

盒子的计算方式：元素到底多大

margin+border+padding+内容宽度

4.圆角边框

5.阴影

JINGJID

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录