CSS基础知识 （一）

一、知识点总结

二、CSS盒模型基础

标准模型和IE模型

标准模型和IE模型的区别

标准模型的宽度和高度只包括content，IE模型的宽度和高度包含了content、padding、boder。

 CSS如何设置这两种模型：2种方式

使用CSS3的属性来区分两种模型。浏览器默认的方式是content-box。

1 box-sizing:content-box;/*标准模型*/
2 box-sizing:border-box;/*IE模型*/

JS如何设置获取盒模型对应的宽和高：4种方式

1.

通过element.id获取一个dom节点，拿到style的宽和高

ps.css的三种方式：css内联；head写css；外联css样式表、link获取

该方式只能获取内联样式的宽和高

1 dom.style.width
2 dom.style.height

2.

获取的是渲染以后的宽和高，可以获取所有css设置方式的宽和高；

缺点：但是只有IE支持

1 dom.currentStyle.width
2 dom.currentStyle.height

3.

获取的是渲染以后的宽和高，可以获取所有css设置方式的宽和高；

与2对比：兼容Chrome和Firefox

window.getComputedStyle(dom).width

4.

API用处：拿到元素真实的宽和高，也是即使运行完之后的结果。

API原理：计算元素的绝对位置，根据元素的左上角（左顶点）的。（视窗）可以拿到四个元素left、right、width、height。

dom.getBoundingClientRect().width

三、实例题：根据盒模型解释边距重叠

父子元素边距重叠，

兄弟元素边距重叠，上下边距，取两者之间最大值。

空元素的边距

题目：子元素高度是100px，子元素和父元素的上边距是10px，计算父元素的实际高度。

答案： 100或者110

1.section的高度为100

2.section的高度为110

设置overflow后，红色部分显示

CSS基础知识 （一）

原文：https://www.cnblogs.com/iriswang/p/11081293.html