normal flow(普通流,常规流)将窗体自上而下分成一行一行,块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。一个连续具有逻辑上下的页面整体,出现在页面中的显示内容,均可以理解为文档流中。
块级格式化上下文,它是一个独立的渲染区域,只有block-level box参与,它规定了内部的block-level box如何布局,并且与这个区域外部毫不相干。
3.bfc规则
通过让元素浮动,可以使元素在水平上左右移动,再通过margin属性调整位置,就是使当前元素脱离文档流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或另一个浮动框的边缘。
float:left | right
目的:对父级所在容器中的block-level box布局不产生影响 原理:再浮动布局情况下,让父级获得合适的高度
1.浮动的父级设置高度 sup{ height:npx; } 2.浮动的父级设置overflow sup{ overflow:hidden; } 3.浮动的父级兄弟设置clear brother{ clear: left | right | both; } 4.浮动的父级伪类清浮动 sup:after{ content:""; display:block; clear:both; }
流式布局是页面元素的宽度按照分辨率进行适配调整,但整体布局不变.就是布局脱离固定值限制,可以根据页面情况改变相应发生改变。
1.百分比设置 % 如:width: 90%; 2.窗口比设置 vw|vh 如:width: 90vw; 3.字体控制 em|rem em为相对大小,大小为最近设置字体大小的父级规定的字体大小 rem为html字体大小
定位布局的目的:让目标标签在指定参考系下任意布局
position:static | relative | absolute | fixed
定位开启后,四个定位方位便会开启,且四个方位均参与布局,如果发生冲突,左右取左,上下取上
如对本文有疑问, 点击进行留言回复!!
网友评论