3-2 CSS盒模型

1、标准模型

2、IE模型

3、CSS如何设置这两个模型

box-sizing:content-box; //浏览器默认
box-sizing:border-box

4、JS如何获取盒模型对应的宽和高

dom.style.width/height //只能取到内联样式
dom.currentStyle.width/height //只有IE支持
window.getComputedStyle(dom).width/heigth //通用性更好
dom.getBoundingClientRect().width/heigth  //计算一个元素的绝对位置,根据视窗(左上角)绝对位置,拿到4个元素(top、right、bottom,left)

5、实例题

子元素高度为100px,上边距为10px,计算父元素的高度

6、BFC(边距重叠解决方案)

(1)BFC基本概念

  • 块级格式化上下文

(2)BFC原理(BFC渲染规则)

  • 在BFC这个元素的垂直方向的边距会发生重叠
  • BFC区域不会与浮动元素的边距重叠,常用于清除浮动和布局
  • BFC在页面上是一个独立的容器,外边的元素不会影响里面的元素,反之亦然
  • 计算BFC高度的时候,浮动元素也会参与运算

(3)怎么样创建BFC

  • float不为none
  • position值不是static或者relative
  • display为inline-block 或table相关的display
  • overflow不为visible,等于auto、hidden

(4) 使用场景

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,809评论 1 92
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,880评论 0 6
  • 题目:谈谈你对css盒模型的认识? 答: 基本概念:padding,margin,border,content 标...
    noyanse阅读 312评论 0 0
  • 一,浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动模型是一种可视化格式模型,浮动...
    DeeJay_Y阅读 907评论 0 4
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 968评论 0 2