CSS盒子基础

最新推荐文章于 2024-11-11 00:01:33 发布

IC-ic.ic

最新推荐文章于 2024-11-11 00:01:33 发布

阅读量259

点赞数 9

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_55743273/article/details/120408350

版权

CSS盒子基础

文章目录

一、盒子的组成
二、边框
三.内边距
四.外边距
总结

一、盒子的组成

盒子是由4个部分组成的，分别是

（1）border 边框
（2）content 内容
（3）padding 内边距
（4）margin 外边距

二、边框

1.边框的样式

代码如下（示例）：

    <style>
        .one {
            border-style: none;
        }
        
        .two {
            border-style: solid;
        }
        
        .three {
            border-style: dashed;
        }
        
        .four {
            border-style: dotted;
        }
    </style>
</head>

<body>
    <p class="one">无边框</p>
    <p class="two">实线</p>
    <p class="three">虚线</p>
    <p class="four">点线</p>

实现效果：
在这里插入图片描述

2.边框单独使用上下左右

代码如下（示例）：

 <style>
        .top {
            border-top: solid;
        }
        
        .bottom {
            border-bottom: solid;
        }
        
        .left {
            border-left: solid;
        }
        
        .right {
            border-right: solid;
        }
    </style>
</head>

<body>
    <p class="top">上边框</p>
    <p class="bottom">下边框</p>
    <p class="left">左边框</p>
    <p class="right">右边框</p>
</body>

效果如下：
在这里插入图片描述

3.边框简写

可以同时设置边框的颜色，大小，样式等，顺序改变不会影响结果

    <style>
        .box {
            border: 3px solid greenyellow;
        }
    </style>
</head>

<body>
    <div class="box">
        边框简写
    </div>
</body>

效果如下：
在这里插入图片描述

三.内边距

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。

padding-top 上边距
padding-botto 下边距
padding-left 左边距
padding-right 右边
padding

效果如下：
在这里插入图片描述

四.外边距

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性

margin-top 上
margin-bottom 下
margin-left 左
margin-right 右
margin

<style>
        p {
            background-color: pink;
        }
        
        .one {
            background-color: pink;
            margin-top: 100px;
            margin-bottom: 100px;
            margin-right: 50px;
            margin-left: 50px;
        }
    </style>
</head>

<body>
    <p>没有指定边距</p>
    <p class="one">指定了边距的段落</p>
</body>