盒模型

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

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

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

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

看看代码：

<!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. 9种网页Flash焦点图和jQuery焦点图幻灯片

    jQuery图标放大轮播焦点图 Flash图片焦点图滑动切换 Flash右侧焦点图上下滑动切换 左右按钮滑动切换的网页幻灯片 双图同时滑动切换的焦点图 含有上下按钮的双图同时滑动切换的焦点图 常见的j ...

  2. c语言学习笔记-continue

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.continue函数意义 用于跳过本次循环余下语句,转去判断是否需要执行下次循环 二.continue使用案例 编写代码,对 ...

  3. React Native中Mobx的使用

    从今天开始我们来搞搞状态管理可否,这几天没怎么写博客,因为被病魔战胜了,tmd,突然的降温让我不知所措,大家最近注意安全,毕竟年底了,查的严,呸,大家注意保暖 特别声明:写该文只是写一下用MobX的思 ...

  4. 转： Laravel 自定义公共函数的引入

    来源:Laravel 自定义公共函数的引入 背景习惯了 使用 ThinkPHP 框架,有一个公共方法类在代码编写上会快捷很多,所以有必要在此进行配置一番.测试框架:Laravel 5.5步骤指导1. ...

  5. [iOS] KVC 和 KVO

    开发iOS经常会看见KVO和KVC这两个概念,特地了解了一下. 我的新博客wossoneri.com link KVC Key Value Coding KVC是一种用间接方式访问类的属性的机制.比如 ...

  6. 故障小记录:yum 安装报错File "/usr/bin/yum", line 30 except KeyboardInterrupt, e:

    发生原因: 由于yum是基于python的,之前安装我python3,当我修改了python命令的指向到python3之后就会发生这样的问题. 解决办法: 由于我当初想到可能以后还需要python2, ...

  7. sql server递归

    with cte as ( select belongsAgent from [QPProxyDB].[dbo].[BS_ProxyInfo] where ProxyID = @ProxyID uni ...

  8. MySQL崩溃恢复与组提交

      Ⅰ.binlog与redo的一致性(原子) 由内部分布式事务保证 我们先来了解下,当一个commit敲下后,内部会发生什么? 步骤 操作 step1 InnoDB做prepare redo log ...

  9. [HDFS_add_3] HDFS 机架感知

    0. 说明  HDFS 副本存放策略 && 配置机架感知 1. HDFS 的副本存放策略 HDFS 的副本存放策略是将一个副本存放在本地机架节点上,另外两个副本放在不同机架的不同节点上 ...

  10. ccf-20160903--炉石传说

    本题思路如下图: 题目和代码如下: 问题描述 试题编号: 201609-3 试题名称: 炉石传说 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 <炉石传说:魔兽英雄传& ...