iwowen的博客
iwowen
记录和分享技术
  1. 首页
  2. 前端
  3. 正文

css盒模型

2020年04月15日 39点热度 0人点赞 0条评论

标准模型 + IE模型

  1. 标准模型宽高为content的宽高
    box-sizing: content-box;
  2. IE模型宽高是 content + border + padding 的宽高
    box-sizing: border-box;

js如何设置和获取元素宽高

dom.style.width/height // 只能获取内联样式的宽和高

dom.currentStyle.width/height // 能够拿到最后的样式,但只有ie支持

window.getComputedStyle(dom).width/height // 能兼容

dom.getBoundingClientRect().width/height

BFC (解决边距重叠问题)

基本概念:块级格式化上下文
原理:

  1. bfc垂直方向上边距会发生重叠
  2. bfc区域不会与浮动元素的box重叠
  3. bfc是一个独立容器,内外不会相互影响
  4. 计算bfc高度时,浮动元素也会参与计算

如何创建bfc:

  1. float不为none
  2. position不是static或者relative
  3. display设置table相关,table-cell,table-caption,or inline-block任何一个
  4. overflow不为visible
标签: css
最后更新:2020年11月22日

什码

保持饥渴的专注,追求最佳的品质

点赞
< 上一篇
下一篇 >

文章评论

取消回复

最新 热点 随机
最新 热点 随机
使用rollup和typescript搭建自己的函数库 前端关于性能优化方面的记录 关于前端BFC相关笔记 js数据类型和数据转换 dom事件笔记 css盒模型
关于前端BFC相关笔记前端关于性能优化方面的记录前端使用canvas实现贪吃蛇小游戏前端css实现左中右布局如何在react项目中使用redux?使用create-react-app打造多页面应用
css盒模型 前端css实现左中右布局 在javascript中使用apply、call、bind函数 使用kodexplorer可道云作为hexo静态网站的后台 js函数节流和防抖 前端使用canvas实现贪吃蛇小游戏
分类目录
  • react
  • vue
  • 前端
  • 工具
文章归档
  • 2020年12月 (1)
  • 2020年5月 (2)
  • 2020年4月 (3)
  • 2020年3月 (1)
  • 2020年2月 (1)
  • 2020年1月 (2)
  • 2019年12月 (1)
  • 2019年11月 (3)
  • 2019年10月 (1)

COPYRIGHT © 2020 iwowen的博客. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

蜀ICP备19037276号-1