什么是css和模型
又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素IE模型区别是宽度和高度不同,标准模型宽度和高度是content的高度,IE模型的宽度是border 和padding- css 如何设置这两种模型 box-sizing:content-box
box-sizing:border-box IE模式下 padding计算在里边
box-sizing:content-box 默认- 获取css中dom的宽高方法
第一种
dom.style.height dom.style.width
这种情况有一个只有在内联样式中能够获取到 而写到上边或者外联都获取不到样式
第二种dom.currentStyle.width 只有IE支持
第三种方法
window.getComputedStyle(a).height
第四种方法
原生JS提供了一个getBoundingClientRect()方法,用于获取左,上,右和下分别相对浏览器视窗的位置。right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离BFC 是什么?BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干原理:bfc垂直方向边距发生重叠,bfc区域不会与浮动元素的box重叠bfc是一个容器外边元素不会影响里边的元素,计算bfc高度浮动元素也会参与计算如何形成:根元素float属性不为noneposition为absolute或fixeddisplay为inline-block, table-cell, table-caption, flex, inline-flexoverflow不为visible作用:创建BFC来避免垂直外边距叠加创建BFC来清除浮动创建BFC来实现自适应布局