盒模型

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

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

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

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

看看代码：

<!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. 【代码笔记】Web-HTML-列表

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

  2. Spring@Autowired注解与自动装配（转发）

    1   配置文件的方法 我们编写spring 框架的代码时候.一直遵循是这样一个规则:所有在spring中注入的bean 都建议定义成私有的域变量.并且要配套写上 get 和 set方法. Boss ...

  3. loadrunner11迭代录制注册账号

    1.创建一个新的web脚本 2.我们就以loadrunner自带的WebTours为例子 3.点击确定后进入Web Tours主页,点击sign up now进行注册 4.输入用户名:test,密码: ...

  4. 【Java入门提高篇】Day29 Java容器类详解（十一）LinkedHashSet详解

    当当当当当当当,本来打算出去浪来着,想想还是把这个先一起写完吧,毕竟这篇的主角跟我一样是一个超级偷懒的角色——LinkedHashSet,有多偷懒?看完你就知道了. 本篇将从以下几个方面对Linked ...

  5. 性能测试—JMeter 常用元件（四）

    <零成本web性能测试>第三章 Web性能测试脚本录制与开发中JMeter常用测试元件 测试计划描述了JMeter运行时将会执行的一系列步骤,一个完整的测试计划包含一个或多个线程组.逻辑控 ...

  6. mysql 临时数据突然变大

    晚上收到紧报警,一台数据库服务器磁盘空间使用快速从50%使用率到80%.我们生产的数据库都磁盘是>2T 登录机器发现*.myd文件异常大 登入数据库查询进程 mysql>showproce ...

  7. vsftpd不支持目录软链接的解决办法

    vsftpd本身不支持软连接,而在用FTP共享的时候又不想移动文件位置,便在网上找到了一个workaround: Linux内核从2..0开始支持把一部分文件系统挂载到文件系统中的其他位置,mount ...

  8. 3.4Python数据处理篇之Numpy系列(四)---ndarray 数组的运算

    目录 目录 (一)数组与标量的运算 1.说明: 2.实例: (二)元素级的运算(一元函数) 1.说明: 2.实例: (三)数组级的运算(二元函数) 1.说明: 2.实例: 目录 1.数组与标量的运算 ...

  9. book118免费下载文档方法【转】

    需要用的工具: 1.360浏览器 2.点"全屏预览",然后把鼠标放在"下载该文档",右键"审查元素",找到 途中箭头指向的标签(如图) 3. ...

  10. 【HTTP缓存】浏览器缓存理论知识

    时间:2016-12-12 17:51:30 作者: zhongxia 零.前言 这里主要写的是理论,具体实践的比较少,后期写一个实践教程,内容基本都是从参考文章里面抄过来的[看完文章,顺便写做下笔记 ...