盒模型

在我们讨论宽度的时候，我们应该讲下与它相关的另外一个重点知识：盒模型。

当你设置了元素的宽度，实际展现的元素却超出你的设置：

这是因为元素的边框和内边距会撑开元素。

看下面的例子，两个相同宽度的元素显示的实际宽度却不一样。

看看代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>盒模型</title>

    <style>

        .simple {

            width: 400px;

            height: 200px;

            border: 1px solid red;

            margin: 20px auto;

        }

        .fancy {

            width: 400px;

            height: 200px;

            border: 1px solid red;

            margin: 20px auto;

            padding: 10px;

        }

    </style>

</head>

<body>

   <div id="simple" class="simple">

       我小一些哦

   </div>

   <div id="fancy" class="fancy">

       我比他大点

   </div>

   <script>

       var oDiv1 = document.querySelector('#simple');

       console.log(oDiv1.offsetWidth, oDiv1.offsetHeight);

       var oDiv2 = document.querySelector('#fancy');

       console.log(oDiv2.offsetWidth, oDiv2.offsetHeight);

   </script>

</body>

</html>

根据输出来的结果，或者盒子模型就知道，offsetWidth就是自身宽度+border的宽度+padding的内边距，高度同理。

以前有一个代代相传的解决方案是通过数学计算。

CSS开发者需要用比他们实际想要的宽度小一点的宽度，需要减去内边距和边框的宽度。

值得庆幸地是你不需要再这么做了...

原文地址：http://zh.learnlayout.com/box-model.html

学习CSS布局 - 盒模型的更多相关文章

  1. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  2. 前端设计的常用属性，CSS的盒模型，页面布局的利器

    在CSS和HTML结合布局页面的过程中,有一组被人们称为“盒属性”的CSS样式,被广泛的使用到.相信经常布局写页面的朋友们对盒属性一定不陌生.在CSS技术的发展过程中,盒属性也有了许多次改进,今天小编 ...

  3. CSS3 Flex布局（伸缩布局盒模型）学习

    CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...

  4. 《学习CSS布局》学习笔记

    近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...

  5. CSS3 伸缩布局盒模型记

    CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...

  6. CSS中盒模型的理解

    今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下 (摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助) ...

  7. CSS弹性盒模型flex在布局中的应用

    × 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...

  8. Html和Css学习笔记-css进阶-盒模型

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  9. css怪异盒模型和弹性盒布局(flex)详解及其案例

    一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...

随机推荐

  1. LintCode Binary Search

    For a given sorted array (ascending order) and a target number, find the first index of this number ...

  2. JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性 ...

  3. 29:ISBN号码

    29:ISBN号码 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括9位数字.1位识别码和3位 ...

  4. 学习css（TODO）

    1. css 是一个什么样的角色? 答:css 负责控制网页的样式. 扩展:div + css 是经典的网页布局.实现网页内容与表现相分离. 2. css 的使用方式? 答:1. 内联式:直接在 HT ...

  5. Apex单元测试

    单元测试类 Salesforce中为Apex语言提供了完整的单元测试流程,包括单元测试类.测试的运行和结果分析等. 单元测试类是一种特殊的Apex类,基本语法和普通的Apex类一样. 单元测试类的结构 ...

  6. Linux 学习笔记之超详细基础linux命令 Part 4

    Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 3----------------- ...

  7. logcat use

    将已经存在的工程导入到eclipse步骤: ①:首先复制当前工程所在的路径. ②:然后在eclipse,右键->Import->General->Existing Projects ...

  8. (网页)Uncaught ReferenceError: pageImport is not defined

    在js开发中,很多人遇到类似问题,都找不到解决方法.Uncaught ReferenceError: $ is not defined,在这里给大家提供几个解决方法. 1.出现这个错误,最可能的是引用 ...

  9. python爬虫之Beautifulsoup学习笔记

    相关内容: 什么是beautifulsoup bs4的使用 导入模块 选择使用解析器 使用标签名查找 使用find\find_all查找 使用select查找 首发时间:2018-03-02 00:1 ...

  10. web测试之界面测试

    所谓界面测试就是指,布局是否合理.整体风格是否一致.各个控件的放置位置是否符合客户使用习惯,此外还要测试界面操作便捷性.导航简单易懂性,页面元素的可用性,界面中文字是否正确,命名是否统一,页面是否美观 ...