CSS入门篇06.盒子模型

最新推荐文章于 2023-12-18 20:26:13 发布

大白菜·

最新推荐文章于 2023-12-18 20:26:13 发布

阅读量69

点赞数 4

文章标签： css 前端 html javascript java

本文链接：https://blog.csdn.net/m0_62404129/article/details/126370154

版权

盒子模型（box model）

方便布局

Border 边框三样式：颜色、大小、样式

Border-color :设置边框颜色默认值黑色，可多个颜色，以空格隔开

Border-width :设置边框大小默认值1—3px，可多值，以空格隔开

Border-style :设置边框样式默认值 none，以空格隔开

Solid实线、double双线、dashed虚线、dotted点状虚线

演示代码为：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: bisque;
            /* 背景颜色 */
            background-origin: padding-box;
            /* 边框颜色 */
            border-color: black;
            /* 边框大小 */
            border-width: 5px;
            /* 边框样式 ，double双线、solid实线、dashed虚线、dotted点状虚线*/
            border-style: double;
        }
       
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>

</html>

效果图为：

Padding 内边距：内容区和边框之间的距离

Padding-top、right、bottom、left：

Padding：xxx；简写，可多值，以空格隔开

代码演示为：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: bisque;
        }
       p{
           /* 内容区与上边框的距离，称为内边距 */
           /* 距上边距50px */
           padding-top: 50px;
           /* 距左边距50px */
            padding-left: 50px;
       }
       
    </style>
</head>

<body>
    <div class="box">
        <p>满江红</p>
        <div class="box1"></div>
    </div>
</body>

</html>

效果图为：

盒子模型-外边距

Margin 外边距：当前盒子与其他盒子之间的距离，用于确定盒子的距离

Margin-top（正下负上）、right（默认情况没效果）、bottom（正下负上）、left（正右左负）

Hover

演示代码为：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: bisque;
        }
       .box1{
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 距上外边距20px */
            margin-top: 40px;
            /* 距左外边距20px */
            margin-left: 40px;
            
       }

       
    </style>
</head>

<body>
    <div class="box">
        
        <div class="box1"></div>
    </div>
</body>

</html>

效果图为：

大白菜·

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
CSS入门篇06.盒子模型

Margin-top（正下负上）、right（默认情况没效果）、bottom（正下负上）、left（正右左负）Border-width :设置边框大小默认值1—3px，可多值，以空格隔开。Border-color :设置边框颜色默认值黑色，可多个颜色，以空格隔开。Border-style :设置边框样式默认值 none，以空格隔开。Margin 外边距：当前盒子与其他盒子之间的距离，用于确定盒子的距离。Padding 内边距：内容区和边框之间的距离。Border 边框三样式：颜色、大小、样式。...
复制链接

扫一扫