CSS盒模型总结（一）
2024-09-02 20:42:28
一、基本概念
盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版，盒模型的组成：content padding border margin
二、盒模型的分类
盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型
标准和模型中计算高度和宽度时只计算content的宽度和高度；而IE盒模型的宽度和高度是将border和padding也计算在内的。
如果用w3c盒子模型解释，那么这个盒子模型占用的
Width = width + padding-left + padding-right + border-left + border-right
Height = height + padding-top + padding-bottom + border-top + border-bottom
用ie的盒子模型解释 ：
布局所占宽度Width：
Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度Height:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
三、CSS如何设置两种盒模型
box-szing:content-box; 默认方式，标准盒模型
box-sizing:border-box; IE盒模型
四、JS如何获取盒模型的宽度和高度
var sec = document.getElementById("sec")
sec.style.width/height //只能获取内联样式设置的宽度和高度
sec.currentStyle.width/height //仅IE支持
sec.getBoundingClientRect().width/height
window.getComputedStyle(sec).width/height
最新文章
- ArcGIS Runtime for Android 使用异步GP服务绘制等值线
- usb驱动开发2之代码地图
- Heap:Sunscreen(POJ 3614)
- Gitolite配置管理和GIT基本操作
- [leetcode]_Sum Root to Leaf Numbers
- item44：将与参数无关的代码抽离template
- Linux学习笔记29——IPC状态命令
- 解决error104 connection reset by peer；socket error问题
- Spring MVC 学习笔记一 HelloWorld
- C++类的大小计算
- (网页)readonly和disabled的区别(转)
- 《HTTP - 基于http的认证》
- linux常用的软件更新命令
- 关于Android 主题的那些事
- CentOS7.0防火墙以及开关机命令
- C++中各种时间类型的转换(包括MFC中的时间类型)
- [Functional Programming] Build a Linear congruential generator
- C#中如果用await关键字来await一个为null的Task对象会抛出异常
- Pylint 使用手册（正在努力翻译中）
- android.content.res.Resources$NotFoundException: String resource ID #0x0