一、概念

①外加模式：
box-sizing: content-box
这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容，在宽度和高度之外绘制元素的内边距，即宽和高不包括内边距
②内减模式：
box-sizing: border-box

为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

③举例说明：下面有两个宽、高、内边距、外边距相同，box-sizing分别为content-box和border-box的盒子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .css2 {

            width: 400px;

            height: 400px;

            background: rgb(233, 217, 217);

            box-sizing: content-box;

            padding: 20px;

            border: 10px;

        }

        .css3 {

            width: 400px;

            height: 400px;

            background: rgb(156, 164, 189);

            box-sizing: border-box;

            padding: 20px;

            border: 10px;

        }

    </style>

</head>

<body>

    <div class="css2">css2盒子</div>

    <div class="css3">css2盒子</div>

</body>

</html>

二、box-sizing: border-box在移动端的使用

①在移动端中，因为宽高需要自适应，所以会使用流式布局，即宽度设置为100%，这样如果使用外加模式，当添加内边距和边框的时候，左右就会出现滚动条，如图所示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .css2 {

            width: 100%;

            height: 400px;

            background: rgb(233, 217, 217);

            box-sizing: content-box;

            padding: 20px;

            border: 10px solid #000;

        }

    </style>

</head>

<body>

    <div class="css2">css2盒子</div>

</body>

</html>

②如果使用内减模式的话，就可以避免这样的情况：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .css3 {

            width: 100%;

            height: 400px;

            background: rgb(233, 217, 217);

            box-sizing: border-box;

            padding: 20px;

            border: 10px solid #000;

        }

    </style>

</head>

<body>

    <div class="css3">css3盒子</div>

</body>

</html>

box-sizing 盒子模型的更多相关文章

  1. Box Model 盒子模型

    Box Model盒子模型,是初学者在学习HTMl5时会学到的一个重要的模型,也有一些人称它为框模型,因为盒子是属于3维,而框是平面的.称之为盒子模型,是因为其结构和盒子十分相似,其最外面是margi ...

  2. CSS Box Model 盒子模型

    1. 介绍 1.1 什么是 Box Model 在HTML中的每个element(元素)都可以看作一个矩形的盒子,矩形从内到外依次由元素的内容(content).内边距(padding).边框(bor ...

  3. 盒子模型(Box Model)

    盒子模型(Box Model) ■ 盒子模型——概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属 ...

  4. CSS魔法堂：盒子模型简介

    本文讨论的是块级盒子(Block-level box)的盒子模型(Box Model) 一.W3C标准的盒子模型   二.IE盒子模型 三.两种模型的区别 W3C标准盒子模型: 外盒模型 元素空间宽度 ...

  5. DIV+CSS两种盒子模型（W3C盒子与IE盒子）

    在辨析两种盒子模型之前.先简单说明一下什么叫盒子模型. 原理: 先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS ...

  6. CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  7. 浅谈 css3 box盒子模型以及box-flex的使用

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.   一.使 ...

  8. CSS 盒子模型（Box model）中的 padding 与 margin

    本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...

  9. CSS盒子模型（Box Model）

    一.背景 作为CSS的重点,三大模块之一的盒子模型,这部分无论如何也要精通透彻.在任何一个网页当中,都有自己的布局方式,所谓网页布局方式就是如何把网页里面的文字.图片,很好的排版成美工设计的样式,这时 ...

  10. CSS盒子模型之CSS3可伸缩框属性（Flexible Box）

    CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

随机推荐

  1. dump net core windbg 安装

    安装 1.下载工具windbg 地址:https://www.microsoft.com/zh-cn/p/windbg-preview/9pgjgd53tn86?SilentAuth=1&rt ...

  2. Java之路---Day05

    2019-10-19-21:09:31 面向对象的封装性 封装性 概念:封装就是将一些细节信息隐藏起来,对于外界不可见 面向对象封装性在Java中的体现 1.方法就是一种封装 public class ...

  3. Python基础知识(三)

    Python基础知识(三) 一丶整型 #二进制转成十进制的方法 # 128 64 32 16 8 4 2 1 1 1 1 1 1 1 例如数字5 : 101 #十进制转成二进制的方法 递归除取余数,从 ...

  4. 拓展 - WebRTC 多视频网络拓扑之三种架构

    众所周知,WebRTC非常适合点对点(即一对一)的音视频会话.然而,当我们的客户要求超越一对一,即一对多.多对一设置多对多的解决方案或者服务,那么问题就来了:“我们应该采用什么样的架构?” .简单的呢 ...

  5. 【转载】如何查看sqlserver客户端的版本号信息

    在sqlserver的使用过程中,有时候可能会因为sqlserver版本过低等原因的导致无法附加以及还原数据库,我们可以通过sql server management studio软件的帮助菜单参看到 ...

  6. localStorage&sessionStorage&Cookie

    localStorage.sessionStorage.Cookie三者区别如下:

  7. 18道kafka高频面试题哪些你还不会？（含答案和思维导图）

    前言 Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partition).多副本的(replica),基于zookeeper协调的分布式消息系统,它的最大的特性就是可以实时的处 ...

  8. UART 串口示例代码

    /* uart_tx.c */ #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #i ...

  9. Web数据库架构

    Web服务器的基本操作如图下图所示: 这个系统由两个对象组成:一个Web浏览器和一个Web服务器.它们之间需要通信连接.Web浏览器向服务器发出请求.服务器返回一个响应.这种架构非常适合服务器发布静态 ...

  10. C#中的WinForm的消息机制简述，及消息机制下Invoke,和BeginInvoke的使用和区别

    在Invoke或者BeginInvoke的使用中无一例外地使用了委托Delegate,至于委托的本质请参考我的另一随笔:对.net事件的看法. 一.为什么Control类提供了Invoke和Begin ...