CSS盒模型

对CSS盒模型的认识

  • 标准模型 + IE模型
  • 标准模型和IE模型的区别
  • CSS如何设置这两种模型
  • js如何设置盒模型的宽和高
  • 什么是边距重叠?
  • BFC

标准模型和IE模型

  • 包含border padding margin
  • 标准模型的宽和高不计算padding和border
  • IE模型的宽和高计算padding和border

如何设置这两种模型?

  • 标准模型: box-sizing:conten-box
  • IE模型: box-sizing:border-box

如何获取宽和高?

  • Dom.style.width/height -内联
  • Dom.currentStyle.width/height -IE
  • Dom.getBoundingClientRect 该方法获取的是Dom相对于浏览器的位置,返回一个object,该对象有6个属性:top,lef,right,bottom,width,height;
  • window.getComputedStyle(Dom).width/height

边距重叠

  • 什么是边距重叠?
    • 边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
    • 水平边距永远不会重叠
    • 边距永远取两者间边距的最大值

BFC

  • 通过overflow:hidden 等于给父元素创建一个BFC
  • BFC的基本概念:块级格式上下文
  • BFC的原理(渲染机制)
    • BFC的垂直方向会发生边距重叠
    • BFC的区域不会与浮动元素的位置重叠
    • BFC在页面中是一个独立的容器,内外不会相互影响
    • 计算BFC的高度时,会计算浮动元素的高度(清除浮动的原理)
  • 如何创建BFC?
    • 设置float,position,display,overflow都会创建BFC
  • BFC的使用场景
    • 清除浮动
    • 左右布局(BFC不会与浮动元素重叠)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 题目:谈谈你对css盒模型的认识? 答: 基本概念:padding,margin,border,content 标...
    noyanse阅读 312评论 0 0
  • css盒模型 1.题目:谈谈你对css盒模型的认识(从理论转化到应用) 基本概念:标准模型+ IE模型border...
    飞菲fly阅读 967评论 0 2
  • 我们知道再CSS中盒模型作为基础的一个点,也是初入前端必须明白的一个点,才知道网页是如何布局的,那么到底盒模型是什...
    七_五阅读 427评论 0 0
  • 是通过请求的Accept头部来判断采用的响应体的内容类型,也可通过路由中显示指明的文件后缀名称来判断。 可以通过D...
    xncode阅读 692评论 0 1