做网站要交钱吗,长沙网络营销工程师最新招聘信息,网站建设图片手机,phpcmsv9蓝色简洁下载网站模板深入理解CSS盒模型 本文是学习中传思客在慕课网开的课程《前端跳槽面试必备技巧》的学习笔记。课程地址#xff1a;https://coding.imooc.com/class/evaluation/129.html#Anchor。 如果你在面试的时候面试官让你谈谈对盒模型的理解#xff0c;你是不是不知从何谈起。这种看似…深入理解CSS盒模型 本文是学习中传思客在慕课网开的课程《前端跳槽面试必备技巧》的学习笔记。课程地址https://coding.imooc.com/class/evaluation/129.html#Anchor。 如果你在面试的时候面试官让你谈谈对盒模型的理解你是不是不知从何谈起。这种看似简单的题其实是最不好答的。 下面本文章将会从以下几个方面谈谈盒模型。
基本概念标准模型 和IE模型CSS如何设置这两种模型JS如何设置获取盒模型对应的宽和高实例题根据盒模型解释边距重叠BFC边距重叠解决方案基本概念
盒模型的组成大家肯定都懂由里向外content,padding,border,margin.
盒模型是有两种标准的一个是标准模型一个是IE模型。 从上面两图不难看出在标准模型中盒模型的宽高只是内容content的宽高
而在IE模型中盒模型的宽高是内容(content)填充(padding)边框(border)的总宽高。 css如何设置两种模型
这里用到了CSS3 的属性 box-sizing
/* 标准模型 */
box-sizing:content-box;/*IE模型*/
box-sizing:border-box; JS获取宽高
通过JS获取盒模型对应的宽和高有以下几种方法
为了方便书写以下用dom来表示获取的HTML的节点。
1. dom.style.width/height 这种方式只能取到dom元素内联样式所设置的宽高也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话通过这种方法是获取不到dom的宽高的。 2. dom.currentStyle.width/height 这种方式获取的是在页面渲染完成后的结果就是说不管是哪种方式设置的样式都能获取到。 但这种方式只有IE浏览器支持。 3. window.getComputedStyle(dom).width/height 这种方式的原理和2是一样的这个可以兼容更多的浏览器通用性好一些。 4. dom.getBoundingClientRect().width/height 这种方式是根据元素在视窗中的绝对位置来获取宽高的 5.dom.offsetWidth/offsetHeight 这个就没什么好说的了最常用的也是兼容最好的。 边距重叠
什么是边距重叠
如下图父元素没有设置margin-top而子元素设置了margin-top20px;可以看出父元素也一起有了边距。 上图的代码 !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle*{margin:0;padding:0;}.demo{height:100px;background: #eee;}.parent{height:200px;background: #88f;}.child{height:100px;margin-top:20px;background: #0ff;width:200px;}/style
/head
bodysection classdemoh2此部分是能更容易看出让下面的块的margin-top。/h2/sectionsection class parentarticle classchildh2子元素/h2margin-top:20px;/articleh2父元素/h2没有设置margin-top/section
/body
/html 边距重叠解决方案(BFC)
首先要明确BFC是什么意思其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”
BFC的原理
内部的box会在垂直方向一个接一个的放置每个元素的margin box的左边与包含块border box的左边相接触对于从做往右的格式化否则相反box垂直方向的距离由margin决定属于同一个bfc的两个相邻box的margin会发生重叠bfc的区域不会与浮动区域的box重叠bfc是一个页面上的独立的容器外面的元素不会影响bfc里的元素反过来里面的也不会影响外面的计算bfc高度的时候浮动元素也会参与计算怎么取创建bfc
float属性不为none脱离文档流position为absolute或fixeddisplay为inline-block,table-cell,table-caption,flex,inine-flexoverflow不为visible根元素
应用场景
自适应两栏布局清除内部浮动 防止垂直margin重叠
看一个垂直margin重叠例子
代码 !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle*{margin:0;padding:0;}.top{background: #0ff;height:100px;margin-bottom:30px;}.bottom{height:100px;margin-top:50px;background: #ddd;}/style
/head
bodysection classtoph1上/h1margin-bottom:30px;/sectionsection classbottomh1下/h1margin-top:50px;/section/body
/html 效果图 用bfc可以解决垂直margin重叠的问题
关键代码 section classtoph1上/h1margin-bottom:30px;/section!-- 给下面这个块添加一个父元素在父元素上创建bfc --div styleoverflow:hiddensection classbottomh1下/h1margin-top:50px;/section/div 效果图 关于bfc的应用的案例这里就不在一一举出了大家去网上找一些其他的文章看一下。 欢迎补充