一、概念

①外加模式：
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. （五）pdf的构成之文件体（catalog对象）

    引自:https://blog.csdn.net/steve_cui/article/details/82735039 目录(catalog): 文档目录包含对定义文档内容的其他对象的引用.它还包含声 ...

  2. 如何在ArcGIS饼状图中下方添加文字

    内容源自:ArcGIS10.2基础教程(丁华) 书上要求在统计图的饼状图下方显示“总面积组成”,以及图例是只显示文字. 该如何操作呢? 其实就是在高级属性中选择标题-副标题-显示“总面积组成”即可 而 ...

  3. 2、在NET中实现多线程

    1.System.Threading命名空间 System.Threading命名空间提供了使得可以多线程编程的类和接口 其中 (1)Thread类构成了C#多线程编程的支柱,他用于创建并控制线程 ( ...

  4. Linux生产环境上，最常用的一套“Sed“技巧

    sed命令应用广泛,使用简单,是快速文本处理的利器.它其实没多少技巧,背诵.使用是最合适的学习渠道,属于硬技能.但它又很复杂,因为高级功能太多.本篇不去关注sed的高级功能,仅对常用的一些操作,进行说 ...

  5. python 跨目录访问文件

    1.同级.同目录的文件之间的访问 有这样一个目录结构 假如,in_A.py 这个文件想调用 hello_world.py 中的函数怎么办呢? --->>>  import 只需在 i ...

  6. 回归写博客时间-----CeliaTodd

    2019-10-17-19:28:01 记录自己的学习路程 国庆期间本来是有持续写博客的,但是有各种原因就没时间写博客了, 但是学习的进度还是没有落下的,现在正式回归写博客的时间了. 但现在不是写Py ...

  7. PHP实现curl post和get

    CURL这里就不说明了.以下是简单案例 一.POST //初始化 $curl = curl_init(); //设置抓取的url curl_setopt($curl, CURLOPT_URL, 'ht ...

  8. 【转载】PC端微信设置操作快捷键方法

    在电脑上使用微信的时候,有时候我们需要自定义PC版微信快捷键操作,支持自定义微信快捷键设置的有:发送消息快捷键.截屏快捷键.打开微信快捷键以及检测快捷键热键是否与其他软件设置冲突.并且自定义设置PC微 ...

  9. Android为TV端助力记录EditText.setInputType的坑

    如XML中设置android:inputType=”numberDecimal”在Java代码中仅设置setInputType(EditorInfo.TYPE_NUMBER_FLAG_DECIMAL) ...

  10. 什么是SAP Intelligent Robitic Process Automation - iRPA

    所谓智慧企业,一个特征就是具备将复杂但低附加值的重复流程通过自动化的方式完成的能力.通过自动化,从而将宝贵的人力资源投入到更高附加值的工作中去,比如提供产品和服务的品质,提升用户体验.SAPGUI时代 ...