CSS3 - 盒子的 box - size
两个参数：
border-box和content-box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-size</title>
<style>
.border-box{
width: 100px;
height: 100px;
background-color: violet;
box-sizing: border-box;
padding: 10px;
}
.content-box {
width: 100px;
height: 100px;
background-color: aquamarine;
box-sizing: content-box;
padding: 10px;
}
</style>
</head>
<body>
<div class="border-box"></div>
<div class="content-box"></div>
</body>
</html>
在此不难发现两个框不同，.border-box那个计算方式为 80（随着内边距和边框的增加而减少） + 10 * 2 （内边距两边）= 100 （不变），
无论内边距（10）和边框（忘了加了）怎么变，它们相加的结果始终等于自己设置的宽度（100）。
说白了，宽度就是包括内边距和边框。
而 .content-box的计算方式为 100 + 10 * 2 = 120
若有雷同，可能我是从您那里学来的。
CSS3 - 盒子的 box - size的更多相关文章
- CSS3 弹性盒子(Flex Box)
1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...
- CSS3盒子模型
web前端必须了解的CSS3盒子模型 1.需要了解的属性以及属性值 display:box或者display:inline-box box-orient:horizontal | vertical ( ...
- 盒子模型(Box Model)
盒子模型(Box Model) ■ 盒子模型——概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属 ...
- CSS自学笔记（10）:CSS3盒子模型
CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...
- css3盒子相关样式
1.css3的display属性: inline:内联 inline-block:可以设置宽高的内联 block:设置为块: <!DOCTYPE html> <html lang=& ...
- HTML和CSS的盒子模型(Box model)
本文作为属性篇的最后一篇文章, 将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css ...
- css盒子模型 css3盒子相关样式
1.内边距(内边距在content外,边框内) 内边距属性: padding 设置所有边距 padding-bottom 底边距 padding-left ...
- 教你吃透CSS的盒子模型(Box Model)
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...
- CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
随机推荐
- 常见的web攻击手段
XSS:跨站脚本攻击 -典型实例为: 当用户在表达输入一段数据后,提交给服务端进行持久化.如果此用户输入的是一段脚本语言,而服务端 用户输入的数据没有经过转码.校验等就存入了数据库,在其他页面需要展示 ...
- 吴恩达机器学习笔记44-核函数（Kernels）
回顾我们之前讨论过可以使用高级数的多项式模型来解决无法用直线进行分隔的分类问题: 为了获得上图所示的判定边界,我们的模型可能是
- C 单向链表就地逆转
1.问题描述 给定一个单链表L,设计函数Reverse将L就地逆转.即不需要申请新的节点,将第一个节点转换为最后一个结点,第二个节点转换为倒数第二个结点,以此类推. 2.思路分析 循环处理整个链表.将 ...
- LabVIEW（二）：计数器应用
1.计数器结构 —>Gate Output—> Counter Register —>Source 其中: Source:被计数的输入源信号 Gate:切断计数是否启动的门控信号 O ...
- JavaScript 对象（上）
简述: 1.是 JavaScript 的基本类型 2.是一种复合值,可通过名字访问这些值 3.可看作属性的无序集合,每个属性都是一个名/值对(属性名是字符串或标识符) 4.可以从一个称为原型的对象继承 ...
- Ubuntu下OpenCV版本切换
1.假如安装了opencv以下两个版本: opencv-2.4.13 opencv-3.2.0 2.安装目录分别为: /usr/local/opencv-2.4.13 /usr/local/openc ...
- homebrew 更改镜像，进行成功安装
在mac系统中,使用homebrew可以很方便的管理包.按照官网的说明执行以下命令时总是报错: /usr/bin/ruby -e "$(curl -fsSL https://raw.gith ...
- 基于.net core 2.0+mysql+AceAdmin搭建一套快速开发框架
前言 .net core已经出来一段时间了,相信大家对.net core的概念已经很清楚了,这里就不再赘述.笔者目前也用.net core做过一些项目,并且将以前framework下的一些经验移植到了 ...
- 11 使用Tensorboard显示图片
首先,下载一张png格式的图片(注意:只支持png格式),命名为1.png.然后,打开PythonShell,输入以下代码: import tensorflow as tf # 获取图片数据 file ...
- 比MySQL快6倍 深度解析国内首个云原生数据库POLARDB的“王者荣耀”
随着移动互联网.电子商务的高速发展,被使用最多的企业级开源数据系统MySQL面临着巨大挑战——为迎接“双11"的高并发要提前做好分库分表;用户不断激增要将读写分离才能应对每天上亿次的访问,但 ...