css盒子模型中嵌套、居中相关常见的几个小技巧

admin2024-07-04  17

1、marge叠加和传递

值传递出现在margin-top中,其他不会,比如两个嵌套的dev1和dev2,

设置内部的margin-top会影响大的那个margin,例如下面两个盒子,

css盒子模型中嵌套、居中相关常见的几个小技巧,第1张     css盒子模型中嵌套、居中相关常见的几个小技巧,第2张.     css盒子模型中嵌套、居中相关常见的几个小技巧,第3张

                  图一                                           图二                                     图二

正常不给margin时候两个盒子嵌套起点都是屏幕左上角,如图一,当我设置div2 的margin-top = 50px的时候,我想要的效果是图三的样子,div1位置不动,然后div2向下偏移50px,但是运行代码却不是我们想的这样,实际上效果图是如图二所示,结果就是div1也同时向下移动了50px。

这个就是marge叠加和传递,如果我们想要达到我们预期的效果图三,那可以有一下几种解决方式

(1)通过设置外部div边框可以解决

           也就是设置div1的border属性,如;border: 1px solid red;

(2)也可以通过设置外部的padding解决,

           也就是设置div1的padding属性,如;padding: 4px 5px;

(3)还可以设置外部盒子的益处属性 overflow:hidden

            也就是设置div1的overflow属性,如;overflow: hidden

2、box-sizing 改变盒子模型

(1)Box-sizing: content-box:这个父容器的宽高是有效区域

(2)Box-sizing: border-box:这个父容器的宽高是有效区域+border宽

比如设置了div1的宽高分别是300px,然后设置border: 50px solid green;,这个时候如果:

    - 设置Box-sizing属性为content-box的话div1的实际宽高应该是350px ,有效区域是300px

    - 设置Box-sizing属性为border-box的话div1的实际宽高应该是300px,有效区域是250px

3、设置内部盒子水平居中

如果想要div2水平居中可以设置div2的

margin-left: auto;

margin-right: auto;

如图:

css盒子模型中嵌套、居中相关常见的几个小技巧,第4张

注:设置水平居中还有其他好多的方法,可以grid布局、flex布局,这里只是列举定位的小技巧

4、设置内部盒子水平垂直居中(position定位

核心:

父元素:相对定位

子元素:绝对定位,会将元素都转为行内块

调整子元素的位置的方法:

4.1、子元素left:50%;top:50%,transform:translate(-50%,-50%)

<style>
        body{
            margin: 0;
            padding: 0;
            background-color: aqua;
        }
        .div1{
            background-color: rebeccapurple;
            width: 200px;
            height: 200px;
            position: relative;
            overflow: hidden;
        }
        .div2{
            background-color: red; 
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform:translate(-50%,-50%)
            
        }
</style>


4.2、子元素left:0;top:0;right:0;bottom:0,margin:auto;

          .div2{
            background-color: red; 
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0; 
            margin:auto;     
          }    

这里的逻辑是上下左右设置0,margin在设置auto就居中

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!