默认情况下，给元素设置的高度和宽度是元素内容区的宽度和高度，给元素加padding 和 border ,元素的实际宽度和高度的计算方式是下面的两个公式：

元素的宽度= 元素的内容区宽度 + 内边距宽度 + 边框宽度；

元素的高度= 元素的内容区高度 + 内边距高度 + 边框高度；

别人说过的话，你记住了，时间久了你就会忘记了，为了加深记忆，这里亲自验证，并记录下验证过程，方便下次复习使用。验证结论我们先给处一张标准的盒模型

如上图盒模型示例：元素是绝对定位的，上右下左均是0px,内容宽度420px, 加上左右内边距各10px，加上左右边框 各10px，元素的宽是460px;

验证结论，我们给盒子加一个父盒子：

1、设置宽度为420px，overflow设置为自动，子盒子的宽度会超出父盒子内容区的宽度，父盒子出现横向的滚动条；

2、设置宽度为460px，overflow设置为自动，子盒子的宽度不会超出父盒子内容区的宽度，父盒子不出现横向的滚动条；

如果以上两点成立，则结论是正确的。

效果看下面两张图片：

从上面的两张图上我们可以看出，我们的结论是正确的，即，元素的宽度= 元素的内容区宽度 + 内边距宽度 + 边框宽度；

我们可以用同样的方法验证：元素的高度= 元素的内容区高度 + 内边距高度 + 边框高度；当然本人是亲自验证过的，这里不再给出高度的截图了，贴出源码，有兴趣的可以自行验证一下，加深记录。

源码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0px;

        }

        html,body{

            height:100%;

            overflow: hidden;

        }

        #wrapper{

            height:100%;

            overflow: auto;

        }

        #demo-parent{

            position: absolute;

            top:0px;

            left:0px;

            bottom:0px;

            right:0px;

            margin: auto;

            background-color:  pink;

            width: 460px;

            height:250px;

            overflow: auto;

        }

        /*居中定位*/

        #demo{

            position: absolute;

            top:0px;

            left:0px;

            bottom:0px;

            right:0px;

            margin: auto;

            width: 420px;

            height:200px;

            font-family: "楷体";

            font-size: 24px;

            line-height: 40px;

            text-align: center;

            font-weight: bold;

            color: black;

            background-color: #cccccc;

            padding:10px;

            border: solid 10px #c3c3c3;

            /*box-sizing: border-box;*/

        }

    </style>

</head>

<body>

<div id="wrapper">

    <div id="demo-parent">

        <div id="demo">

            红军不怕远征难，

            万水千山只等闲。

            五岭逶迤腾细浪，

            乌蒙磅礴走泥丸。

            金沙水拍云崖暖，

            大渡桥横铁索寒。

            更喜岷山千里雪，

            三军过后尽开颜。

        </div>

    </div>

</div>

</body>

</html>

一般情况下我们的UI设计的图片的宽高是包含边框和内边距的，那么我们程序员怎么设置元素内容区的宽度和高度呢，这里我们需要使用box-sizing设置。

box-sizing，盒子大小，默认值是 content-box，效果就是我们上面证明的结论，为了解决我们上述提出的新问题，这里需要把box-sizing 的 属性值设置为 ：border-box;

效果如下图：即使文本的高度超出了子盒子内容区高度，出现了垂直滚动条，子盒子的实际宽度仍然为 420px;

css 盒模型、box-sizing 学习笔记的更多相关文章

  1. css盒模型(Box Model)

    所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和 ...

  2. html5--6-28 css盒模型4

    html5--6-28 css盒模型4 实例 学习要点 了解盒模型 元素内容.内边距.边框 和 外边距 了解盒模型的概念: CSS 盒模型规定了处理元素内容.内边距.边框 和 外边距 的方式. 最内部 ...

  3. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  4. 从零开始学习前端开发 — 3、CSS盒模型

    ★  css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成 ...

  5. 前端笔记（关于css盒模型知识整理）

    我以前整理的文章可能也不是特别深入.所以现在开始尝试即使多花点时间收集整理,也不只发浅层知识,这样对技术的深入理解是很有帮助的. 废话不多说,我们现在开始. 说到css盒模型,这是大多面试基础中会经常 ...

  6. CSS盒模型（Box Model）

    阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀 ...

  7. CSS盒模型的深度思考及BFC

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型 ...

  8. CSS盒模型详解（图文教程）

    本文最初发表于博客园,并在GitHub上持续更新.以下是正文. 盒子模型 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并 ...

  9. 详解CSS盒模型

    原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概念,知识点和细节. 一些基本概念 HTML的大多数元素 ...

随机推荐

  1. 题目分享J

    题意:从一棵树的树根出发,除树根外每个节点都有其能经过的最多次数与经过后会获得的价值(可能为负,最多只能领一次价值),问最终走回树根能获得的最大价值以及有无可达到此价值的多种走法(ps:一开始在树根就 ...

  2. Day_09【常用API】扩展案例6_将用户给定的字符串首个字符大写，并分别加上"set"和"get"输出

    定义如下方法public static String getPropertyGetMethodName(String property) (1)该方法的参数为String类型,表示用户给定的成员变量的 ...

  3. 【FreeRTOS学习04】小白都能懂的 Queue Management 消息队列使用详解

    消息队列作为任务间同步扮演着必不可少的角色: 相关文章 [FreeRTOS实战汇总]小白博主的RTOS学习实战快速进阶之路(持续更新) 文章目录 相关文章 1 前言 2 xQUEUE 3 相关概念 3 ...

  4. docker redis shell

    docker中安装好redis后,运行 docker ps 指令,查看所有运行中的镜像信息 然后运行 docker inspect --format "{{ .State.Pid}}&quo ...

  5. JDBC07 事务

    事务 事务基本概念 一组要么同时执行成功,要么同时执行失败的SQL语句,是数据库操作的一个执行单元(比如:银行中,对账户的操作和日志的记录是一组事务) 事务开始于: -连接到数据库上,并执行一条DML ...

  6. JDBC01 mysql和navicat的安装

    navicat的安装 从网上下载的,详细过程,略 mysql8.0.11(win10,64)安装 1.下载 MySQL8.0 For Windows zip包下载地址:https://dev.mysq ...

  7. QQ恢复解散后的群聊或删除后的好友的方法

    今天有一个群被一个管理员乱踢人,之后将群解散. 事后几分钟我在想有没有什么方法可以重新恢复的方法,之后进入了QQ的官网进行查找. 本来以为没希望了,但是奇迹发生了. 原来真的可以恢复! 恢复的详情: ...

  8. 一文解读C# 动态拦截第三方进程中的方法函数（外挂必备）

    一.前言 由于项目需要,最近研究了一下跨进程通讯改写第三方程序中的方法(运行中),把自己程序中的目标方法直接覆盖第三方程序中的方法函数:一直没有头绪,通过搜索引擎找了一大堆解决方案,资料甚是稀少,最后 ...

  9. Jenkins 实现 ldap认证

    使用自己搭建的openldap: 使用Test LdapSetting测试的结果: 所测试的用户在:svn,jenkins,gitlab,sonarqube,wpsadmin组下 若用户不在jenki ...

  10. ol,li,ul,dl,dt,dd

    块级元素div尽量少用,其实和table一样,嵌套越少越好,它也是会影响速度的! ol 有序列表. <ol> <li>……</li> <li>……< ...