css盒模型的概念与分类
css盒模型就是一个盒子，封装周围的html元素，它包括内容content、边框border、内边距padding、外边距margin。
css盒模型分为标准模型和ie模型；
标准模型和ie模型的区别
标准模型的width是内容content 的宽度； 设置方式： box-sizing:content-box;
ie模型的width是内容content + 边框bord摆姿势英文er + 内边距paddig 的宽度； 设置方式： box-sizing:border-box;
通过js如何获取盒模型的宽高
1.dom.style.width/height 只能获取到dom的内联样式
2.dom.currentstyle.width/height 获取到的是dom的实际宽高，但这种方式只在ie中可以使用
3.window.getcomputedstyle(dom,null).width/height 获取到的是dom的实际宽高，但是不支持ie
4.dom.offtwidth/offerheight 最常用的，兼容性最好的
第2，3个组合下就可以兼容ie与其他浏览器了
window.getcomputedstyle ? wi我最喜欢的老师ndow.getcomputedstyle(obj,null).width : obj.currentstyle.width;
边距重叠
边距重叠就是相邻元素的边距重叠在一起，出现了预期外的布局。比如子元素设置了margin-top，父元素没有设置，但是父元素也有了上边距。
<!doctype html><html><head> <title>边距重叠</title> &l爸爸妈妈的话t;meta chart="utf-8"> <style type="text/css"> html *{ margin: 0; padding: 0; } .content{ width: 500px; height:100px; background: green; } .parent{ width: 300px; height: 300px; background: pink; } .child{ width: 150px; height: 150px; background: yellow; margin-top: 50px; } </style></head><body> disaster<div class="content"> 占位内容区域 </div> <div class="parent"> <div class="child"> </div> </div></body></html>下图就是代码运行结果：
解决边距重叠-bfc
1、bfc概念：块级格式化上下文
2、bfc的原理：
bfc的区域不会与浮动区域重叠
计算bfc区域高度时，浮动区域也参与计算
bfc区域是独立的一个区域，不与其他区域相互影响
3、如何创建bfc
脱离文档流：float不为none；position为absolutely或fixed
overflow不为visible（如overflow：hidden）
display为“table-cell”, “table-阴霾的意思caption”, “inline-block”中的任何一个
4、bfc应用场景
自适应两栏布局
清除浮动
防止垂直margin重叠
本文发布于:2023-04-03 10:43:57，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/da579bf91ed581c7292cbe86196b8b93.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：CSS盒模型的介绍.doc
本文 PDF 下载地址：CSS盒模型的介绍.pdf
| 留言与评论（共有 0 条评论） |
