江苏广宇建设集团有限公司网站,WordPress推荐中文插件,wordpress无法下载,学中文网站写在前面#xff1a;尝试回答几个问题#xff1a;什么是盒模型#xff0c;控制盒模型的属性有哪些#xff1f;Margin、Padding、Border、Width、Height这些属性改变/影响盒模型#xff0c;但每个属性都会在所有元素上生效么#xff1f;如果存在区别#xff0c;那么和元素…
写在前面
尝试回答几个问题什么是盒模型控制盒模型的属性有哪些Margin、Padding、Border、Width、Height这些属性改变/影响盒模型但每个属性都会在所有元素上生效么如果存在区别那么和元素类型或者元素定位有关系么浮动元素是什么位置如何确定如果去掉浮动层叠关系如何判断优先级越大就越靠近用户么
盒模型是我们每天都在接触的但盒子模型到底如何计算排列的总是一知半解。本文尝试从W3C规范和实例入手解决上述问题。目录
包含块(containing block)盒模型(Box model)定位模式(Positioning schemes)层叠关系(Layered presentation)包含块
概念每个盒子会变成他后代盒子的包含块后代盒子的大小和位置会根据他包含块的矩形边框进行计算。但是不会受到包含块的限制可能会溢出。确定包含块的方法对于根元素、positionfixed的元素包含块都是视窗如果元素是relative或者static,则是他最近的块形父元素的内容区(content)——注:规定了父元素必须是block container如果元素是absolute包含块是最近的非static的父元素的Padding区——注:父元素的类型未规定
举例包含块最直观的判断是一个元素对大小设置百分比时相对的元素是哪一个这个元素就是他的包含块1. 最基本的例子示例代码2. 当em变成absolute定位示例代码盒模型
Margin宽度。分为四个方向都支持百分比和具体的像素。并且margin的百分比是根据元素的包含块(containing-block)的width来计算。并不是margin-top/ bottom对应height。示例代码内联元素(display: inline)的margin-top和margin-bottom失效。浏览器不允许设置。合并。
水平的margin不会合并(inline-block和inline都支持) 示例代码都属于常规流内(in flow)块级盒处于同一个上下文的兄弟元素 解决方法将其中一个块盒变成BFC阻止margin的合并 示例代码块级父元素和其子元素在没有padding,border,height,空隙将之隔开时子元素的margin会渗透到父元素上。简单讲父元素和子元素之间没有其他元素。示例代码4. 允许设置负值。对于positionstatic元素负值相当于将元素向负值方向移动覆盖但是只会覆盖颜色不会覆盖文字。示例代码对于positionrelative元素 负值还是会把下面的元素粘着一起移动但会完全覆盖前一个元素。示例代码对于positionabsolute元素因为元素脱离了文档流所以负值只会自己发生偏移对前后元素没有任何影响。示例代码对于float元素可以通过负值进行覆盖最常见的应用是三栏应用。示例代码Padding宽度。同Margin。内联元素(display: inline)的padding生效但是top和bottom并不会推挤只会覆盖其他元素覆盖情况遵循z-index原则。示例代码合并。Padding不存在合并情况示例代码不允许负值。
Border宽度。只有px不支持百分比。合并。inline元素左右不合并上下会合并。inline-blockblock元素四个方向都不会合并示例代码
Width内联元素不能设置width和height。非内联元素百分比设置(见上文包含块)
根据包含块的content box宽度计算如果当前元素是绝对定位那么相对父元素的padding box的宽度定位Height计算方式同width定位模式
常规流流内元素有几大模型。CSS2.1中定义了IFCInline Formatting Contexts与 BFCBlock Formatting Contexts。CSS3中增加了GFCGridLayout Formatting Contexts和FFCFlex Formatting Context。后两个后续文章会详细讲解这里暂且不提。BFCBlock formatting contexts块格式化上下文什么情况产生BFC(四选一)
浮动绝对定位非块盒的块容器inline-blockoverflow不为visible的块盒2. 特性从包含块顶部竖直方向排列BFC内部兄弟盒子之间的margin会合并——可以通过把兄弟之一变成BFC解决合并BFC可以阻止margin合并IFCInline formatting contexts内联格式化上下文如何产生只有在一个块级元素中仅仅包含内联级别元素时才会生成特性
从包含块顶部水平方向排列排列情况和浮动与否会改变行盒的高度当一个行盒被分割margin,border,padding都不会再有视觉效果了浮动概念float CSS属性指定一个元素应沿其容器的左侧或右侧放置允许文本和内联元素环绕它。该元素从网页的正常流动中移除尽管仍然保持部分的流动性位置:
当一个元素浮动之后它会被移出正常的文档流然后向左或者向右平移一直平移直到碰到了所处的容器的边框或者碰到另外一个浮动的元素浮动元素会根据上一个元素的类型判断位置如果上一个是浮动的则跟随他放不下就挤到下一行如果上一个是标准流的元素则浮动元素的相对垂直高度不变顶部和上一个元素的底部对齐。3. 清除浮动引入空隙父元素使用::after伪元素浮动元素限制成BFC使用overflow:hiddenclear属性4. 代码
示例代码
绝对定位positionabsolute设置元素绝对定位会导致元素变成绝对定位脱离文档流并且元素此时是BFC布局Margin不会进行合并。使用top/bottom/left/right(下面简写成TBLR)控制位置的变动具体像素和百分比都参照包含块进行偏移。比较其他position属性值positionstatic 常规流布局无法通过TBLR控制位置positionrelative 盒子相对于其常规流位置进行偏移兄弟元素相对其偏移前的位置定位。使用TBLR控制时如果是固定像素那盒子相对于自身边界偏移如果是百分比则参照包含块偏移。positionfixed 包含块是视窗使用TBLR控制都是相对包含块偏移对于百分比left/right 相对于包含块的widthtop/bottom相对于包含块的height层叠关系在一个层叠上下文中一共可以有7种层叠等级列举如下示例代码背景和边框 —— 形成层叠上下文的元素的背景和边框。 层叠上下文中的最低等级。负z-index值 —— 层叠上下文内有着负z-index值的子元素。块级盒 —— 文档流中非行内非定位子元素。浮动盒 —— 非定位浮动元素。行内盒 —— 文档流中行内级别非定位子元素。z-index: 0 —— 定位元素。 这些元素形成了新的层叠上下文。正z-index值 —— 定位元素。 层叠上下文中的最高等级。当对某一个元素的z-index赋值了除了auto以外的值就创建了一个新的层叠上下文独立于其他的层叠上下文。比较顺序变成先比较各个层叠上下文的z-index。然后在层叠上下文中比较子元素的优先级。总结本文解释包含块以及基于包含块确定的盒模型对盒模型的四个边界的计算方式做了总结。对元素的定位方式和不同定位方式引起的元素之间位置变化做了总结。后续会继续以总结形式梳理CSS中常见但迷惑的地方。如有错误请指出大家一起共同进步~更多专业前端知识请上
【猿2048】www.mk2048.com
