css 盒模型
主题: css 盒模型的介绍及区别
1. 什么是盒模型
1. 每个 HTML 元素都可以叫做盒模型 。
2. 盒模型由外而内包括:
1. 边距(margin), 边框(border), 填充(padding), 内容(content) 。
3. 它在页面中所占的实际 宽度、高度 是 margin + border + padding + content 的相加 。
4. 知道盒模型分为: 标准盒模型 / IE盒模型 / 特殊盒模型 。
2. 盒模型设置方法
1. 标准盒模型: box-sizing: content-box (W3C / 默认模式)
2. IE的盒模型: box-sizing: border-box (IE / 怪异模式)
3. 特殊盒模型: box-sizing: padding-box (padding 计算设置)
3. 标准盒模型、IE的盒模型、特殊盒模型, 三者之间的区别:
1. 不同之处就是内容的大小, 即 宽度 width 和 高度 height 的不同 。
2. 宽度和高度哪里不同:
1. content-box(标准盒模型): 这是默认样式指定 CSS 标准 。 计算 width 和 height 属性只包括内容 content, 但不包含 border、margin、padding 。
2. border-box(IE的盒模型): IE盒模型(怪异盒模型) 的则是 content + padding + border 总的大小; width 和 height 属性包含 content、padding、border, 但不包含 margin 。
3. padding-box(特殊盒模型): width 和 height 属性包括 padding 的大小, 不包括 border、margin, 即 padding + content 。
4. JS 如何设置和获取对应盒模型的宽度和高度
1. 方法一: dom.style.width / dom.style.height
1. 这种方法, 我们只能获取到内联样式中我们定义的宽和高, 使用 link 外联引入的样式, 是无法获取的到的 。
2. 方法二: dom.currentStyle.width / dom.currentStyle.height
1. 这个属性只有 IE 支持, 它是可以获取到浏览器渲染过后的真实的宽和高 。
3. 方法三: window.getComputedStyle(dom).width / window.getComputedStyle(dom).height
1. 这个可以在 IE 、火狐 、 谷歌 浏览器中使用 。
4. 方法四: dom.getBoundingClientRect().width / dom.getBoundingClientRect().height
1. 它也可以拿到一个元素的宽和高, 它也是及时运行完以后的 。
2. 它是用来计算一个元素的绝对位置的, 它是根据视窗即: vierport, 左上角; 它可以拿到四个值, top、left、width、height
