专栏首页Devops专栏盒模型的实际尺寸

盒模型的实际尺寸

仅供学习,转载请注明出处

需求

使用HTML编写三个div,用来逐步分析拆解相关盒子模型的大小变化。

首先绘画三个div,设置大小50px,背景色为gold

<!DOCTYPE html>
<html>
<head>
    <title>盒子的真实尺寸</title>
    <meta charset="utf-8">
    <style type="text/css">
        .box01{width:50px;height: 50px;background-color: gold;}
        .box02{width:50px;height: 50px;background-color: gold;}
        .box03{width:50px;height: 50px;background-color: gold;}
    </style>
</head>
<body>
    <div class="box01">1</div><br>
    <div class="box02">2</div><br>
    <div class="box03">3</div><br>
</body>
</html>

浏览器展示如下:

好了,从上图来看,已经绘画除了三个正方形了。下面继续看看增加一下边框border看看。

给2和3的正方形增加黑色边框,宽度为50px

border: 50px solid #000;

<!DOCTYPE html>
<html>
<head>
    <title>盒子的真实尺寸</title>
    <meta charset="utf-8">
    <style type="text/css">
        .box01{width:50px;height: 50px;background-color: gold;}
        .box02{width:50px;height: 50px;background-color: gold;border: 50px solid #000;}
        .box03{width:50px;height: 50px;background-color: gold;border: 50px solid #000;}
    </style>
</head>
<body>
    <div class="box01">1</div><br>
    <div class="box02">2</div><br>
    <div class="box03">3</div><br>
</body>
</html>

浏览器展示效果如下:

好了,此时已经2和3已经有了边框了。

下面来看看盒子模型的理解图:

下面继续可以给正方形3增加内边距padding,来看看效果。

给正方形3增加内边距50px

padding: 50px

<!DOCTYPE html>
<html>
<head>
    <title>盒子的真实尺寸</title>
    <meta charset="utf-8">
    <style type="text/css">
        .box01{width:50px;height: 50px;background-color: gold;}
        .box02{width:50px;height: 50px;background-color: gold;border: 50px solid #000;}
        .box03{width:50px;height: 50px;background-color: gold;border: 50px solid #000;padding: 50px}
    </style>
</head>
<body>
    <div class="box01">1</div><br>
    <div class="box02">2</div><br>
    <div class="box03">3</div><br>
</body>
</html>

浏览器展示如下:

通过上面的页面得出结论:盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下:

  • 盒子宽度 = width + padding左右 + border左右
  • 盒子高度 = height + padding上下 + border上下

练习

通过盒子模型的原理,制作下面的盒子:

实现代码如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        .box{
            width:400px;
            height: 54px;
            background-color: gold;
            border-top: 1px solid #f00;
            border-bottom: 3px solid #666}
        .box span{    
            font-size: 20px;
            font-family: "Microsoft YaHei";
            line-height: 54px;
            padding-left: 150px;
        }
    </style>
</head>
<body>
    <div class="box"><span>新闻列表</span></div><br>
</body>
</html>

浏览器展示如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 14. css3 media响应式样式示例

    在日常的样式编写中,对于浏览器宽度变化的时候,我们为了增加体验,总是需要根据变化进行响应式的样式设置。

    Devops海洋的渔夫
  • CSS 定位布局 - 相对、绝对、固定三种定位

    文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据...

    Devops海洋的渔夫
  • CSS3圆角、opacity 透明度、rgba 背景色设置

    设置某一个角的圆角,比如设置左上角的圆角: border-top-left-radius:30px 60px;

    Devops海洋的渔夫
  • 电商项目(下)

    感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。

    达达前端
  • CSS写一个缺角的div

    今天用CSS写一个缺角的div,大致的效果是这样的,div的左上角和右上角缺掉了一块的效果,简称为缺角div

    祈澈菇凉
  • 第138天:Web前端面试题总结(编程)

    2、一个页面上两个div左右铺满整个浏览器,要保证左边的div一直为100px,右边的div跟随浏览器大小变化(比如浏览器为500,右边div为400,浏览器为...

    半指温柔乐
  • margin-top属性

    这个属性对于不可替换的 inline 标签没有效果,比如 <tt> 或者 <span>。

    Html5知典
  • CSS样式表

    CSS样式表的样式主要可以分为大小,背景,字体,对齐方式,边界边框,列表方块,格式布局等。 元素的大小: #div1{ width:30...

    二十三年蝉
  • (2019)[前端]面试题[6]:水平垂直居中方法

    如果已知子元素宽高度,那么transform: translate(width/2,height/2);一样的效果。

    无道
  • 第97天:CSS3渐变和过渡详解

    渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。

    半指温柔乐

扫码关注云+社区

领取腾讯云代金券