盒子模型

最新推荐文章于 2024-05-26 14:33:41 发布

JerryQuary

最新推荐文章于 2024-05-26 14:33:41 发布

阅读量365

点赞数

分类专栏： vue 文章标签： js

本文链接：https://blog.csdn.net/JerryQuery/article/details/109305658

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

盒子模型种类

分别是 ie 盒子模型和标准 w3c 盒子模型。

两种标准对 height 和 width 的计算方式不同，可以通过CSS属性 box-sizing 来对这两种标准进行切换，当值为 content-box 时为标准盒子模型，值为 border-box 时为IE盒子模型。

盒子由四部分组成：如下图

盒子边框（border）：

语法：

border : border-width | border-style | border-color

属性：

圆角边框（css3）

当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆

order-radius: 左上角右上角右下角左下角;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            display: inline-block;
        }
        div:first-child {  /* 结构伪类选择器 选亲兄弟 */
            border-radius: 10px;  /*  一个数值表示4个角都是相同的 10px 的弧度 */ 
        }

        div:nth-child(2) {
            /*border-radius: 100px;    取宽度和高度 一半  则会变成一个圆形 */
            border-radius: 50%;   /*  100px   50% 取宽度和高度 一半  则会变成一个圆形 */
        }

        div:nth-child(3) {
            border-radius: 10px 40px;  /* 左上角  和 右下角  是 10px  右上角 左下角 40 对角线 */
        }
        
        div:nth-child(4) {
            border-radius: 10px 40px  80px;   /* 左上角 10    右上角  左下角 40   右下角80 */
        }
        div:nth-child(5) {
            border-radius: 10px 40px  80px  100px;   /* 左上角 10    右上角 40  右下角 80   左下角   右下角100 */
        }
        div:nth-child(6) {
            border-radius: 100px;  
            height: 100px; 
        }
        div:nth-child(7) {
            border-radius: 100px 0;  
        }   
        </style>
    </head>
    <body>
    <div> 1. 20px</div>
    <div> 2. 50%  或者 100px</div>
    <div>3. 10px 40px</div>
    <div>4. 10px 40px  80px</div>
    <div>5. 10px 40px  80px  100px</div>
    <div>6. 123</div>
    <div>7. 100px 0</div>
    </body>
</html>

内边距（padding）

外边距（margin）

盒子居中：

1.必须是块级元素 2.左右边距都设定为 auto (margin : 100px auto;)

margin塌陷问题

在标准文档流中，竖直方向的margin会出现叠加现象（水平方向不会塌陷），两个margin紧挨着，中间没有border或者padding
margin直接接触，就产生了合并
表现为较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin塌陷现象

解决方案：

给父元素添加透明边框，至少添加border-top:1px solid transparent
给父元素添加padding-top:npx
给父元素添加overflow:hidden
给父元素添加position: absolute;
给父元素添加position: fixed;
给父元素添加display: inline-block;

盒模型案例：

一个盒子的 margin:20px，border :1px，padding :10px，content: 200px、height: 50px。

W3C盒模型：

这个盒子需要占据的位置为

宽=margin*2 + border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px

高=margin*2 + border*2 + padding*2 + content.height = 20*2 + 1*2 +10*2 + 50 = 112px

盒子的实际大小为

宽 = border*2 + padding*2 + content.width = 1*2+10*2+200=222px、

高 = border*2 + padding*2 + content.height = 1*2+10*2+50=72px；

IE盒模型

这个盒子需要占据的位置为

宽=margin*2 +content.width = 20*2+200=240px、

高= margin*2 + content.height = 20*2+50=70px;

盒子的实际大小为

宽 = content.width = 200px

高 = content.height = 50px

当margin,padding,border都为0时，两种盒模型没有区别，哪种都一样。

JerryQuary

关注

0
点赞
踩
0

收藏

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

盒子模型有两种，分别是ie 盒子模型和标准 w3c 盒子模型。两种标准对height和width的计算方式不同，可以通过CSS属性box-sizing来对这两种标准进行切换，当值为content-box时为标准盒子模型，值为border-box时为IE盒子模型。假设：一个盒子的 margin:20px，border :1px，padding :10px，content: 200px、height: 50px。W3C盒模型：这个盒子需要占据的位置为宽=margi...
复制链接

扫一扫