CSS盒模型解析
css盒模型
1、盒模型基本概念: 标准模型 + ie模型
标准模型的width和height不包含border和padding:
ie模型的width和height包含border和padding:
2、标准模型 和 ie模型的区别
标准模型的width和height不包含border和padding
ie模型的width和height包含border和padding
3、css如何设置这两种模型
用css3的属性来区别:
标准模型 box-sizing: content-box
ie模型 box-sizing: border-box
默认的content-box(即标准模型)
4、js如何设置获取盒模型对应的宽和高
(css样式分为三种:1.节点内嵌/内联,即通过style样式直接写;2.通过增加的 标签或节点的方式;3.通过link外部引入css样式表,即外联)
(1) dom.style.width/height
只能取到该dom节点的内联属性样式的宽和高
(2) ie -> dom.currentstyle.width/height
chrome/firefox -> window.getcomputedstyle(dom).width/height
该属性取到的是浏览器渲染后的宽和高,相对比较真实准确
(3) dom.getboundingclientrect().width/height
用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,返回一个object对象,
该对象有6个属性:top、lef、right、bottom、width、height。 这个值也是比较真实准确的
5、bfc( 边距重叠解决方案)
bfc概念: 块级格式化上下文
ifc概念: 内联元素格式化上下文
bfc原理(即渲染规则):
(1) 在bfc这个元素的垂直方向的边距会发生重叠
(2) bfc的区域不会与浮动元素的box重叠,即用来清楚浮动布局的
(3) bfc在页面上是一个独立的容器,里面的元素与外面的元素不会相互影响
(4) 计算bfc高度的时候,浮动元素也会参与计算
创建bfc的方式:
(1) float值不为none
(2) position的值不为 static和relative
(3) display的值为table的几个属性:table、table-cell、table-column . . .
(4) overflow的值不为visible , 即hidden或者auto都可以
上一篇: 横向iscroll阻止纵向浏览器滚动条
下一篇: 深入研究“用ASP上载文件”(一)