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 ...
随机推荐
- 第49节：Java集合框架中底层文档的List与Set
Java集合框架中的List与Set // 简书作者:达叔小生 Collection -> Set 无序不重复 -> 无序HashSet,需要排序TreeSet -> List 有序 ...
- .Net Core新建解决方案，添加项目引用，使用VSCode调试
并不是我自己琢磨的,是看了别人学习的,因为写的都不完整,所以就整理一下记录后面忘了回看. 反正.Net Core是跨平台的,就不说在什么系统上了.假设我要建一个名为Doggie的解决方案,里面包含了一 ...
- 【Hadoop】3、Hadoop-MapReduce使用avro进行数据的序列化与反序列化
package cn.cutter.demo.hadoop.avro; import org.apache.hadoop.io.Text; import java.text.DateFormat; i ...
- Mybatis 使用备忘录
自动生成Mapper java -jar mybatis-generator-core-1.3.2.jar -configfile generatorConfig.xml -overwrite Myb ...
- Python3 模块 -- Fabric自动化模版
安装 pip3 install fabric3 创建软连接 find / -type f -name "fab" /usr/local/python3/bin/fab ln -s ...
- 自动化运维Ansible安装篇
Ansible自动化工具之--部署篇 ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点,实现了 ...
- 项目ITP(二) 二维码 拿起你的手机装一装，扫一扫 【每日一搏】
前言 系列文章:[传送门] 五一,期待的两天假期.我的生日,happy. [吐槽] 学校真恶心,半月前让我给他搞个东西,md,课题不加人.后来又来求,说钱(钱,咱不需要:我猜也不多).到现在,又来了, ...
- 2014--My Plan
写于2014/1/10 从2014年开始我每年规划自己的life,每年10个plans. 回忆2013: 2013年,改变了很多.准确的说,那10个月,像个漫长的旅程,像个人生的转折点,应该可以这么说 ...
- leetcode — jump-game-ii
/** * // Source : https://oj.leetcode.com/problems/jump-game-ii/ * * Created by lverpeng on 2017/7/1 ...
- DNS服务器的搭建
更详细的dns笔记整理: http://services.linuxpanda.tech/DNS/index.html 1 DNS介绍 DNS(Domain Name System,域名系统),因特网 ...