html第三课时

最新推荐文章于 2021-08-04 19:22:03 发布

summerG1

最新推荐文章于 2021-08-04 19:22:03 发布

阅读量350

点赞数

分类专栏： html总结

本文链接：https://blog.csdn.net/gmdjajy/article/details/38078579

版权

html总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        .outer-box{
            border: 10px solid black;
            height: 400px;
            width: 400px;
            padding: 10px;/*内边距*/内边距不会和margin重叠，但是如果是两个margin就会重叠，距离按较大的计算
            margin: 10px;
            box-sizing: border-box;/*border+padding+content*/设施它的盒子距离不会随着padding和border进行改变
            /*box-sizing: content-box;*//*content*/设置它的盒子距离不会随着padding和border进行改变
            /*默认块级元素；<div> <p>*/
             
        }
        .inner-box1{
            border: 10px solid red;
            height: 100px;
            width: 100px;
            margin: 10px;
        }
        .inner-box2{
            border: 10px solid red;
            height: 100px;
            width: 100px;
            margin: 30px;

        }
    </style>

    <span style="color:#ff6666;"> 0.默认块级元素：<div>  <p>  <table>  <span style="display:block">
      1.margin:  容器之间的距离
      2.padding: 内容与边框之间的距离
      3.box-sizing:border-box /  content-box 
         -border-box：height/width = border + padding + content
         -content-box：height/width = content
      4.两个div在同一个地方的margin会重叠，大的覆盖小的
      5.两个div在同一个地方的margin和padding不会重叠</span>
</head>
<body>
    <div class="outer-box">
        <div class="inner-box1">

        </div>
        <div class="inner-box2">

        </div>
    </div>
</body>
</html>

summerG1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html第三课时

.outer-box{ border: 10px solid black; height: 400px; width: 400px; padding: 10px;/*内边距*/ margin: 10px; box-sizing: border-box;/*
复制链接

扫一扫

专栏目录