盒模型总结

1.谈谈你对css盒模型的认识 ?
css盒模型的基本概念,你除了你能说出 有 css盒模型 有 margin border padding content 外 ,还能说出 css盒模型 有 标准模型 和 IE模型 .

2.标准模型 和 IE模型 的区别是什么 ?
标准模型 和IE模型 的区别 在于 宽度和高度的计算方式不同.
标准的模型的宽度和高度 指的是 content的宽度和高度,不包含 padding 和 border .
而 IE模型 的宽度 和高度 是 content的宽度和高度 还 计算 padding 和 border 的.

3.css如何设置这两种模型(标准模型 和 IE模型)的呢? 那就是给你一个元素,默认的模型是什么 ? 如何让你设置成另一种模型 又怎么去设置(css该怎么去写);
答: 是通过 border-sizing这个属性去设置,这个属性是css3的一个属性.
4. js 如何 设置 获取 盒模型 对应的 宽 和 高 的 ?
JS获取盒模型对应宽、高的几种方法:
(1) dom.style.width/height; 只能获取行内样式的宽高。 对于 行外的样式 和 外部的样式 都是获取不到的.
(2) dom.currentStyle.width/height; 可获取所有样式的宽高(内联/外部/嵌入式引入) ,只能在IE浏览器中获取。只有IE支持。
(3) window.getComputedStyle(dom).width/height; 可获取所有样式的宽高(内联/外部/嵌入式引入) ,兼容IE和chrome,这个方法我们只能用来获取,不能用来设置
(4) dom.getBoundingClientRect().width/height; 根据窗口视图来获取宽高。
dom.getBoundingClientRect() 这个api经常适用的场所是 计算一个元素的绝对位置,这个绝对位置是根据试穿也就是viewport左上角左零点.
dom.getBoundingClientRect() 拿到的有4个属性 分别是 left top width heigth .

5.实例题(根据盒模型边距重叠)
在这里插入图片描述

上图:一个块级元素里面 又嵌入一个块级元素,也就是说 它俩是个父与子关系,子元素的高度是100px,子元素的与父元素的上边距是10px,让你计算法父元素的实际高度 是多少 ???
父元素的高度是100px呢 还是 110px 呢 ???
回答 父元素的高度100px也对,110px 也对,为什么呢?
答:因为要看父元素的盒模型是怎么设置的.

当我给父元素加了个 overflow:hidden;后,父元素的高度就变成了100px呢?没加 overflow:hidden; 时 父元素的高度 是 100px , 这是为什么呢?那这款的基本原理是什么?为什么会这样?

再说这之前,我再补充一个知识点,现在我们写的这个代码例子是父子元素这种边距重叠,那么还有两种情况边距重叠(一种是:兄弟元素,就是两个div挨着,每个div都有上边距和下边距,它这种时候也会发生边距重叠,那么这重叠的原则是取最大值. 还有一种情况就是空元素的边距,比如是一个空元素,你设置了上边距和下边距,那么他会把margin-top margin-bottom 取一个最大值作为它的边距)

总结 : 边距重叠三种情况:1,父子;2.兄弟;3.空元素(2、3情况一样,只取最大值)

现在我们回到刚刚的问题 为什么加了 overflow:hidden;后,父元素的高度就变成了100px呢?没加 overflow:hidden; 时 父元素的高度 是 110px , 这是为什么呢?那这款的基本原理是什么?为什么会这样???
答:通过加了overflow:hidden;其实相当于给父元素创建了一个BFC,也就是块级格式化上下文.

5.BFC的基本概念什么 ? 块级格式化上下文

6.BFC的原理是什么???
BFC的渲染规律
①:在BFC这个元素 的 垂直方向 的 边距 会发生重叠。
②:BFC的区域不会与浮动元素的box重叠。 (这个可用来清除浮动 布局的)
③:BFC在页面上是一个独立的容器,外面的元素不会影响里面的元素,里面的元素也不会影响外面的元素。
④:计算BFC高度时,浮动元素也会参与计算

7.如何创建BFC
①:float不为none。也就是说 float的值 为left 或 right 时 , 都是创建BFC. float的默认值是none.
②:position不为static或者relative。 也就是说 position的值为absolute 或 fixed 时, 都是创建BFC. postition的默认值是 static .
③:display为inline-block或者是table相关的 都是创建BFC.
④:overflow不为visible。也就是说 overflow 的值 为 auto 或 hidden时 ,都是创建BFC.overflow的默认值是visible .

猜你喜欢

转载自blog.csdn.net/xiaodi520520/article/details/85917632
今日推荐