-
margin叠加
- 盒子模型的相邻元素、父子元素的垂直方向上的margin会产生margin塌陷，具体的margin值为一大一小取大，一正一负取和。
- 相邻的盒子模型中，如果有一个是浮动的，则不会产生margin重叠,水平方向的margin永远不会发生重叠。
- BFC不会发生margin重叠，而且和它的子元素也不会发生重叠,但相邻子元素之间会发生重叠。
- 两栏布局的两个BFC，float的BFC垂直方向的margin会和固定的BFC发生叠加，float的BFC和固定的BFC顶部对齐。
- 当其父元素设置了border属性的时候，与子元素垂直方向上的margin不会发生塌陷。
- 在一个BFC中的兄弟元素，只要不脱离文档流，无论如何都会发生margin塌陷的问题。
-
tips：margin叠加解决方法
- 在父元素或者兄弟元素之间设置合适的margin。
- 使用BFC可以消除父子之间的margin塌陷。
- 可以通过嵌套BFC的方法去消除相邻元素的margin叠加。
-
BFC
- BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
- 形成BFC的条件：
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
- BFC规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否 则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
-
IFC
- 布局规则：
- 在一个行内格式化上下文中，盒是一个接一个水平放置的，从包含块的顶部开始
- 这些盒之间的水平margin，border和padding都有效
- 盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐
- 行盒：
-
包含来自同一行的盒的矩形区域叫做行盒(line box)
-
line box的宽度由包含块和float情况决定,一般来说,line box的宽度等于包含块两边之间的宽度,然而float可以插入到包含块和行盒边之间,如果有float,那么line box的宽度会比没有float时小
-
line box的高度由line-height决定,而line box之间的高度各不相同(比如只含文本的line box高度与包含图片的line box高度之间)
-
line box的高度能够容纳它包含的所有盒,当盒的高度小于行盒的高度(例如,如果盒是baseline对齐)时,盒的竖直对齐方式由vertical-align属性决定
-
当一行的行内级盒的总宽度小于它们所在的line box的宽度时，它们在行盒里的水平分布由text-align属性决定。如果该属性值为justify，用户代理可能会拉伸行内盒（不包括inline-table和inline-block盒）里的空白和字（间距）
-
-
GFC
-
FFC
-
CSS响应式格栅系统
- 之前用的float,现在用的flex
-
flex布局
-
布局方法
-
负边距原理：
给一个不定宽的块级框设置正边距会让他的宽度减小，设置负边距会让他的宽度增加。 -
float：
浮动框的上边缘会去贴当前行盒的上边缘或是之前浮动框的下边缘，左浮动框的左边缘会去贴包含框的左边缘，或者他之前的左浮动框的右边缘。如果当前行剩余的空间容不下一个浮动框，他就会换行。（左浮动）。 -
绝对定位：
绝对定位的框完全脱离普通流。 -
常用的布局：
- 弹性布局（flex布局）
- 流式布局（设置百分比）
- 瀑布流布局（多栏布局，响应加载）
- 响应式布局（通过媒介查询加载不同样式）
- 响应式格栅系统（bootstrap）
-
viewport
- layout viewport：浏览器默认区域
- visual viewport：可视区域大小
- ideal viewport：完美适配移动设备的viewport
-
csshack
网友评论