HTML——13.css盒子模型-padding、border、margin、content

最新推荐文章于 2021-07-28 23:11:36 发布

only_tao

最新推荐文章于 2021-07-28 23:11:36 发布

阅读量384

点赞数

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

本文链接：https://blog.csdn.net/only_tao/article/details/104129465

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

css-盒子模型

说到盒子模型，一定先看一张图

盒子模型图片，F12可看

1. padding 内边距

内边距: (上下左右各为10px)

.text{
padding: 10px;    /*上下左右均为10px的内边距*/
}

等同于

.text{
       padding-top: 10px;
       padding-left: 10px;/*可用于制造空格*/
       padding-right: 10px;
       padding-bottom: 10px;
       /*  如果2个 上下，左右
           4个 上 右 下 左，顺时针（！不！重！要！）*/
}

2.border 边框

简写与分开（注意与 outline 的关系）

p{
            border: 1px solid rgb(121, 228, 79); 
            /*粗细size 样式style 颜色color 依次↓ */
            border-width: 1px;
            border-style: solid;
            border-color: rgb(121, 228, 79);
}

如果要设置圆角边框则加上：

   border-radius: 10px ;
   /*圆角边框 ：角度*/

边框阴影：

   box-shadow: 5px     5px    1px  rgb(195, 236, 205);
  /*边框阴影：左右偏移  上下偏移 清晰度（越小越清晰） color*/

设置边框-图片：

HTML:

    <p class="w2"> border-image,需要分开写 </p>

CSS:

p{
            border: 5px solid transparent;
            width: 300px;
            padding: 5px;
  }
.w2{
            border-image: url(sea.jpg) 100 100 stretch;            
 }

3 . margin 外边距

围绕在内容边框的区域就是外边距，就是我们的标签外的透明部分

外边距合并问题，见最后的代码

4. 盒子模型简单示例：

可以一个一个div 嵌套，也可以在一个标签内写出所有的margin border padding content

两种方式效果相同，但是，排版等会又很大区别。

嵌套：

HTML:

 <div class="margin">
        <div class="border">
            <div class="padding">content</div>
        </div>
 </div>

CSS：

.margin{
            margin: 50px;
 }
.border{
            width: 100px;
            border-radius: 9px;
            border: 2px solid rgb(127, 240, 142);
 }
.padding{
         /* text-align: center; */
            padding: 5px;
            padding-right: 5px;
 }

集中：

HTML:

<div id="content">content</div>

CSS:

.content{

            width: 100px;

            margin: 50px;

            border-radius: 9px;
            border: 2px solid rgb(127, 240, 142);
            
            padding: 5px;
            padding-right: 5px;
 }

以下为上面的所有示例代码：

第二次学习:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css-盒子模型-padding与border</title>
    <style>
        .padding1{
            background-color: aquamarine;
            padding: 5px;

            border-radius: 10px ;
            /*圆角边框 ：角度*/
            
            text-align: center;
            width: 200px;

            /* border: 1px solid rgb(121, 228, 79); */
            /* 粗细size 样式style 颜色color 依次↓ */ 
            border-width: 3px;
            border-style: ridge;
            border-color: rgb(121, 228, 79);

            box-shadow:  5px 5px rgb(195, 236, 205);
            /*边框阴影：左右偏移  上下偏移 color*/     


        }
        .w2{
            font-size: small;
            border-image: url(sea.jpg) 100 100 stretch;            
        }
        p{
            border: 5px solid transparent;
            width: 300px;
            padding: 5px;
        }

    </style>
</head>
<body>
    <!--distinguish -> border and outline-->
    <p>padding没什么好说的</p>
    <p class="padding1">内边距->圆角边框展示+阴影</p>
    <p class="w2">border-image,需要分开写</p>
</body>
</html>

第一次学习：

<html>
<head>

    <title>
        css盒子模型
    </title>
    <style>
    .w1{
       border: 1px dotted rgb(128, 184, 236);
       background-color: rgb(243, 241, 148);
       padding-top: 20px;
       /* 内边距padding...(其中的上边距)-top..
       也可以选择其他的bottom,left,right: */

       margin-top: 100px;
       
       background-clip: content-box;
      
    }
    .w2{
        width: 300px;
        height: 100px;   
        border: 1px double rgb(63, 193, 216);
        background-color: burlywood;
        padding: 80px 20px;
        background-clip: content-box;
    }
    
    </style>
</head>
<body>
   
<div class="w1">
    <p style="padding-left:40px;">盒子模型</p>
    <ul>
        <li>content 内容</li>
        <li>border 边框 (可以注释掉体会一下）</li>
        <li>padding 内边距</li>
        <li> margin  外边距，页面布局</li>  
        <p>均可统一设置距离</p>
    </ul>
</div>
<div class="w2">

     测试padding有2个值（实际用处不大）
</div>


</body>
</html>

外边距合并问题：

HTML：

<div class="w1">
        margin 
    </div>
    <div class="w2">
        <div class="w3">外边距合并,上下只差50px</div>
</div>

CSS：

.w1{
            width: 100px;
            height: 100px;
            background-color: wheat;
            margin: 50px;
}
.w2{
            background-color: yellow;
            width: 150px;
            height: 150px;
            margin: 50px;
 }

only_tao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML——13.css盒子模型-padding、border、margin、content

css-盒子模型说到盒子模型，一定先看一张图 1. 先是padding内边距，padding: 10px; /*上下左右均为10px的内边距*/<html><head> <...
复制链接

扫一扫

专栏目录