盒模型

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

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

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

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

看看代码：

<!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. vue规格新增一对多的例子

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. The server quit without updating PID file (data mysql.pid)

     (1)mysql的安装路径和运行路径 # whereis mysqld   (2)PATH变量指定的路径中,搜索mysql的信息    #  which mysqld  (3)查看配置文件   # ...

  3. 【代码笔记】Web-HTML-段落

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  4. 如何在服务器上搭建svn

    svn现在依然是一个流行的版本控制工具,但是大多数的人员只会使用客户端,并且也知道可以进行权限控制, 那么今天,我们就来给大家梳理一下 1.如何搭建svn的服务器 2.如何进行svn的权限控制 === ...

  5. 一个Web页面的问题分析

    几个月之前我接到一个新的开发任务,要在一个旧的Web页面上面增添一些新的功能.在开发的过程中发现旧的代码中有很多常见的不合适的写法,结合这些问题,如何写出更好的,更规范的,更可维护的代码,就是这篇文章 ...

  6. 实践：配置keepalived实现主备热备份功能

    图: 配置文件: 主服务器的配置如下: global_defs { router_id NodeA}vrrp_instance VI_1 { state MASTER #设置为主服务器 interfa ...

  7. loadrunner 场景设计-手工场景方案(Schedule)设计

    场景设计-手工场景方案(Schedule)设计 by:授客 QQ:1033553122 A.   定义方案schedule 在 Scenario Schedule面板中,选择一个方案schedule, ...

  8. Oracle EBS FA 资产取值

    SELECT fb.book_type_code, fth.ASSET_NUMBER, fdh.units_assigned, fdh.assigned_to, pf.FULL_NAME, fl.se ...

  9. javascript避免dom事件重复触发

    /** * 为指定控件添加限制性事件, 该事件在触发之后, 会被移除, 并在指定的时间间隔后, 重新绑定, 适用于避免控件事件被误操作重复触发的场景 * @param {String} domID 要 ...

  10. 计算机硬件基本知识及Linux的常用命令

    ------------------1. 计算机硬件基本知识------------------ CPU - 寄存器 - L1/L2/L3 - 内存 - 硬盘 - 互联网下载/其他存储介质传输 寄存器 ...