css盒模型
来源:互联网 发布:乐视手机网络不稳定 编辑:程序博客网 时间:2024/05/16 10:30
什么是盒模型
首先我们说一下盒子的问题:比如一个盒子中装一本书,那么盒子对应div,书就是div中的content,书与盒子之间的距离是padding,盒子的厚度是border,两个盒子之间的距离就是margin,这样理解起来就容易多了。
从上图中我们可以看出,是一个宽高为170*50的div,padding是10px,border是5px,margin是15px。代码如下:
width: 170px;height: 50px;padding: 10px;border: 5px solid #000;margin: 15px;
所以盒模型中的div的实际占的宽度如下:
(margin-left)+(boder-left)+(padding-left)+width+(padding-right)+(boder-right)+(margin-right)
此时
width=content
当我们把div的box-sizing设置为border-box;
width: 170px;height: 50px;padding: 10px;border: 5px solid #000;margin: 15px;box-sizing: border-box;
从上图可以看出,div的实际宽度为:
(margin-left)+width+(margin-right)
此时
width=(boder-left)+(padding-left)+content+(padding-right)+(boder-right)
box-sizing默认值是 content-box;即width=content。因此可以通过设置box-sizing来改变盒子的真实宽度
0 0
- CSS、CSS盒模型
- CSS盒模型
- 什么是css盒模型?
- CSS 盒模型
- CSS盒模型讲解
- CSS 盒模型
- CSS盒模型
- div+css盒模型
- css 盒模型
- css盒模型组成
- css盒模型组成
- css的盒模型
- 介绍CSS盒模型
- CSS盒模型
- CSS盒模型
- css 盒模型整理
- css盒模型
- css盒模型笔记
- 深入剖析 JavaScript 的深复制
- data类型的Url格式及Base64编码:把小数据直接嵌入到Url中
- 「拼房」你敢吗?这款App这样玩「陌生人社交」
- MaterialRefreshLayout(下拉刷新和上拉加载)
- OC基础概念理解—多态
- css盒模型
- android中ViewPage使用的细节问题
- Java类集学习(五)集合的输出
- 命令行的艺术
- zookeeper原理(转)
- Hive原理
- 软件测试过程模型-H模型
- The Creation of Process 0 & 1 on ARM Architecture
- 本地推送.极光推送.APNs推送