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 ...
随机推荐
- 程序员工作 996 生病 ICU ？
阅读本文大概需要 2 分钟. 说实话,一般平时这个点我已经睡着了,今天准备好的文章也会准时在凌晨推送给大家.睡前看篇关于强制 996 加班的消息,里面有句口号还挺溜,上班996,下班ICU,为此还特意 ...
- （爬虫向）python_json学习笔记
JSON学习笔记 - 在线工具 - https://www.sojson.com/ - http://www.w3school.com.cn/json/ - http://www.runoob.com ...
- Mybatis优缺点
优点:SQL写在XML中,便于统一管理和优化 提供映射标签,支持对象和数据库的orm字段关系映射 可以对SQL进行优化 缺点: SQL工作量大 mybagtis移植姓不好 不支持级联
- logstash收集TCP端口日志
logstash收集TCP端口日志官方地址:https://www.elastic.co/guide/en/logstash-versioned-plugins/current/index.html ...
- .Net 并发写入文件的多种方式
1.简介 本文主要演示日常开发中利用多线程写入文件存在的问题,以及解决方案,本文使用最常用的日志案例! 2.使用File.AppendAllText写入日志 这是种常规的做法,通过File定位到日志文 ...
- Netdata 服务器前端监控平台
Netdata 是一款 Linux 性能实时监测工具.Netdata是Linux系统实时性能监测工具,提供web界面的界面视角. 它用可视化的手段,将被监测者最细微的细节,展现了出来.这样,你便可以清 ...
- IT十年经典书籍
摘自网络,近来在浏览时,发现一个叫做“IT十年经典书籍”的主题.google了一下,实在找不出这个主题的源头出处.不过这个主题中所涉及的每一本书讲出来都是振聋发聩的,大可以作为它那个行业的经典了. ...
- xml文件配置新增与读取
xml文件 <?xml version="1.0" encoding="utf-8" ?> <Config> <dbtype> ...
- springboot情操陶冶-@Configuration注解解析
承接前文springboot情操陶冶-SpringApplication(二),本文将在前文的基础上分析下@Configuration注解是如何一步一步被解析的 @Configuration 如果要了 ...
- MySQL索引建立和使用的基本原则
合理设计和使用索引 在关键字段的索引上,建与不建索引,查询速度相差近100倍. 差的索引和没有索引效果一样. 索引并非越多越好,因为维护索引需要成本. 每个表的索引应在5个以下,应合理利用 ...