美文网首页
3-2 CSS盒模型

3-2 CSS盒模型

作者: zhangmz | 来源:发表于2017-10-15 08:48 被阅读15次

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) 使用场景

相关文章

  • 3-2 CSS盒模型

    1、标准模型 2、IE模型 3、CSS如何设置这两个模型 4、JS如何获取盒模型对应的宽和高 5、实例题 6、BF...

  • 6.3盒模式

    盒模型 什么是CSS盒模型? CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型 CSS盒模型指那些可...

  • 盒模型

    什么是CSS盒模型? CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型 CSS盒模型指那些可以设置宽...

  • CSS盒模型

    CSS盒模型的认识 标准模型 和 IE模型 CSS盒模型包括content,padding,border,marg...

  • Css盒模型以及Bfc的应用场景

    CSS盒模型: 一 基本概念: 分为标准模型+IE模型。 二 标准盒模型和IE盒模型的区别。CSS如何设置这两种盒...

  • CSS 盒模型总结

    概念 CSS盒模型 包含:content padding border margin 类型 CSS盒模型分为 标准...

  • HTML/CSS 04-css盒模型

    css盒模型的组成部分,css margin,css padding,css盒子的实际大小 目录: 一、盒模型的组...

  • html+css 12

    开篇十二章 1、css布局模型 清楚了CSS 盒模型的基本概念、 盒模型类型,...

  • 1.CSS盒模型

    css盒模型 css中,Box Model叫盒子模型;盒模型规定了 元素内容(content)、内边距(paddi...

  • 前端知识点之谈一谈css盒模型、BFC

    知识点:--css 盒模型--标准模型和 IE 模型--BFC 谈一谈 css 盒模型、BFC 是面试中常见的问题...

网友评论

      本文标题:3-2 CSS盒模型

      本文链接:https://www.haomeiwen.com/subject/ymofuxtx.html