CSS的盒子模型
2018-02-28 18:51
369 查看
1.什么是盒子模型
例子说明:
上图中,红色边框为手机的外包装盒,而且外包装盒有一定的厚度(border), 为了保
护手机在运送的过程中不被磕坏,我们在盒子里面四周填充了一层泡沫, 并且泡沫也有一定
的厚度(padding),这层泡沫将手机包裹住, 手机就是整个盒子的核心内容(content)。
可以这么对比记忆:
手机------>>>内容(content)
泡沫------>>>padding
包装盒---->>>boder
外包装间距-->>>margin
2.盒子取值计算
我们在修改页面元素位置的时候, 需要设定它相对于盒子的位置, 那么我们有必要清楚关于盒子模型里面的取值相关问题。
在 CSS 中, width 和 height 指的是内容区域的宽度和高度。 增加内边距、边框和外边
距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。 而默认情况下,内边距、边框和
外边距的值均为 0.
<
4000
span class="fontstyle0"> 占据页面大小的区域是整个元素框的总尺寸! 默认情况, padding、 margin、 border
均为 0,假如我们设定了区域内容的 width 和 height,那么此时整个元素框的总尺寸就是
该区域内容的宽高了,此时,如果设定了 margin 值,那么整个元素框的总尺寸会发生变化
(变大了), 但是我们希望它的整体布局不发生变化!所有我们可以修改区域内容的尺寸(原
有大小减去设定的 margin 值)。
图解说明盒子模型取值问题
相关文章推荐
- 【css】盒子模型 之 概述
- CSS中盒子模型详解
- CSS 盒子模型(转)
- [网页基础]DIV+CSS学习笔记(二)深入理解盒子模型
- css 标准盒子模型和IE盒子模型
- [html+css]HTML+CSS基础课程:元素分类 和 盒子模型 笔记
- CSS-14.盒子模型的宽高问题和box-sizing属性
- 使用css弹性盒子模型
- DIV+CSS两种盒子模型
- css笔记17:盒子模型加强版的案例
- Flexible 弹性盒子模型之CSS flex-direction
- CSS布局(一) 盒子模型基础
- DIV+CSS----流式布局和盒子模型
- css基础 内联元素 块元素 盒子模型
- CSS大小设置实例——盒子模型
- XZ_CSS之盒子模型
- CSS中盒子模型和position(一)
- CSS之盒子模型一
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
- Html(10)css的元素&盒子模型