盒子模型2

最新推荐文章于 2024-06-22 17:15:40 发布

易拉易拉罐

最新推荐文章于 2024-06-22 17:15:40 发布

阅读量137

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/wuxiao18/article/details/91562362

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1：内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box{
            width:200px;
            height:200px;
            background-color: green ;
            /*设置边框*/
            border:10px  red solid;

            /*
            *内边距，指的是内容区与边框之间的距离；
            *一共有四个方向的内边距，
            *padding-top,
            *padding-bottom,
            *padding-left,
            *padding-right;

            *内边距会影响盒子可见框的大小，元素的背景会延伸到内边距
            *盒子的大小由内容区、内边距和边框共同决定

            *盒子可见框的宽度=border-left-width+padding-left+width+padding-right+border-right-width
            *可见框的高度=border-top-width+padding-top+height+padding-bottom+border-bottom-width
             */
            /*设置上内边距*/
            padding-top:100px;
            /*设置右内边距*/
            padding-right: 100px;
            /*
            使用padding可以同时设置四个边框的样式，规则和border-width一致
            */

        }
        /*
         *创建一个子元素box2占满box1
         *子元素在内容区，不会影响内边距
         */
        .box2{
            width:100%;
            height:100%;
            background-color:yellow ;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box2"></div>
    </div>
</html>

2：外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color: green ;
            border:10px  red solid;
            /*
             *外边距指的是盒子与其它盒子之间的距离
             *它不会影响可见框的大小，而是会影响到盒子的位置
             *盒子有四个方向的外边距
             *  margin-top
             *  margin-bottom
             *  margin-left
             *  margin-right
             *由于页面中的元素都是靠左靠上摆放的
             *  所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变
             *而如果是设置右和下外边距会改变其它盒子的位置
             */
            /*
            设置box1的上外边距，盒子上边框和其他盒子的距离
             */

            /*margin-top:100px;
            margin-left:100px;
            margin-bottom:100px;*/

            /*外边距也可以指定为一个负值
            *如果外边距设置的是负值，则元素会向反方向移动
            */

            /*margin-left:-100px;
            margin-bottom:-100px;*/

            /*
             * margin和可以设置为auto,auto一般只设置水平方向的margin
             *如果只指定，左外边距或右外边距的margin为auto则会将外边距设为最大值
             *垂直方向外边距如果设置为auto，则外边距默认就是0
             *
             *如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值
             *  就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto
             *  以使子元素在父元素中水平居中
            */

           /* margin-left:auto;
            margin-right:auto;*/

            /*
             *外边距同样可以使用简写margin，可以同时设置四个方向的外边距
             *规则和padding一样
            */
            margin:0 auto;

        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

3：垂直外边距的重叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width:100px;
            height:100px;
            background-color: green ;

            margin-bottom: 100px;
        }
        /*
        *垂直外边距的重叠
        *-在网页中相邻的垂直方向的外边距会发生外边距的重叠
        *    所谓外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
        *     如果父子元素的垂直外边距相邻，则子元素的外边距设置给父元素
        */
        .box2{
            width:100px;
            height:100px;
            background-color: darkred ;

            margin-top: 100px;
        }
        .box3{
            width: 200px;
            height: 100px;
            background-color: black;

            /*改变相邻要素：为box3设置一个上边框，使其box3和box4不相邻*/
          /*  border-top:1px red solid;
            padding-top:1px;*/
            /*改变垂直要素：改变父元素的内边框，但此操作会改变可见框的大小，所以须改变内容框的height*/
            padding-top:100px;

        }
        .box4{
            width:100px;
            height:100px;
            background-color: yellow;
            /*
             *为子元素设置一个上外边距，使子元素的位置下移
             */
          /*  margin-top: 100px;*/
        }
    </style>
</head>
<body>
    <div class="box3">

        <div class="box4"></div>
    </div>
     <div class="box1"></div>

     <div class="box2"></div>
</body>
</html>

4：浏览器的默认格式

浏览器为了在页面中没有样式是时，也能有较好的显示效果，很多元素都设有默认的margin和padding，而这些默认样式，我们往往是用不到的，因此就需要将默认的margin和padding统统去除，但一个一个样式的去掉和麻烦，可以用简单的直接将全部样式的margin和padding都去除。（但是说*性能不太好，但对于初学阶段是可以暂时使用的，之后会补充友好的方法。）

   *{
            margin: 0;
            padding: 0;
        }

易拉易拉罐

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型2

1：内边距<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .box{ widt...
复制链接

扫一扫

专栏目录