css学习笔记之盒模型
来源:互联网 发布:嘀哩嘀哩软件官方下载 编辑:程序博客网 时间:2024/05/20 05:56
转自: https://segmentfault.com/q/1010000005057015/a-1020000005057235
http://www.cnblogs.com/xiaohuochai/p/6252163.html
盒模型
盒模型又叫框模型,由宽高、内边距、边框和外边距组成
四个盒子结构
1、元素框是指 margin box
元素框: width/height + padding + border + margin
2、可视区域是指 border box
[注意]关于可视区域,一直都有两个争论,一个指border box,另一个指padding box。但从字面去理解,可视区域应该就是指可以看到的区域,应该以border box为准
可视区域:width/height + padding + border
3、客户区是指 padding box
[注意]关于客户区这种说法来源于javascript中的clientWidth和clientHeight
客户区:width/height + padding
4、内容区是指 content box
内容区:width/height
两种盒子模型
一般称IE8及其以上为标准盒子模型(w3c盒子模型),范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。
IE8以下的为IE 盒子模型,范围也包括 margin、border、padding、content,和标准盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。
行内盒子
1.不支持width和height
行级盒子的content box的高/宽不是通过height/width设置的。
content box/area的高由font-size决定的;
content box/area的宽等于其子行级盒子的外宽度(margin+border+padding+content width)之和。
2.当行内盒子宽度大于父容器宽度(自身width无效)时会被拆分成多个行内盒子。
3.margin和padding对行内盒子的影响(亲自做了测试是这种情况 但不清楚原理)
左右的margin和padding都是有效果的,就不多说了。
上下的margin对行内盒子是无效果的。
上下padding对行内盒子的内容是无效果的(line-height不变),但是对background和border是有影响的,而且影响不同。
首先background,padding-top会覆盖掉相邻的元素包括背景和内容,padding-bottom只会覆盖掉相邻元素的背景,内容并不会。
再是border,padding-top和padding-bottom对border的影响是一样的,都是有效果的。
- css学习笔记之盒模型
- CSS学习笔记:盒模型
- CSS学习笔记之<盒子模型>
- css学习笔记---盒模型,布局
- 学习笔记1—CSS盒模型
- CSS学习笔记-盒模型(七)
- CSS学习笔记5:盒模型
- CSS学习笔记----盒子模型
- CSS框模型学习笔记
- css盒子模型学习笔记
- css盒模型笔记
- CSS学习之盒模型 - CSS: The Missing Manual
- CSS学习之:盒子模型
- CSS学习之布局模型
- CSS之盒模型
- 【HTML5学习笔记】21:CSS盒模型 上
- 【HTML5学习笔记】22:CSS盒模型 下
- CSS学习笔记(二)--CSS框模型/CSS定位
- 印刻学院_思考
- Financial Concepts(4): Dollar Cost Averaging
- ZOJ1008 Gnome Tetravex(dfs)
- Hibernate之mappedBy属性详解
- 每日一题之二叉树的层序遍历
- css学习笔记之盒模型
- 深入浅出TensorFlow(二):TensorFlow解决MNIST问题入门
- USB Class
- loadrunner和jmeter的区别
- freemarker无法传值到前台
- 前端在线编程题7
- 使用easyui的treegrid可能遇见的小问题
- VC 使用SetCheck(TRUE)函数的注意事项
- 触发器