高级布局

liukai90 发布于2019-04-23 13:21 / 870人阅读

摘要：一文档流一文档流概念概念普通流常规流将窗体自上而下分成一行一行，块级元素从上至下行内元素在每行中从左至右的顺序依次排放元素。

一.文档流

1.概念

normal flow(普通流,常规流)将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素。一个连续具有逻辑上下的页面整体,出现在页面中的显示内容,均可以理解为文档流中。

2.BFC(Block formatting context)

块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

3.BFC规则

内部的Box会在垂直方向,一个接一个地放置。
Box自身垂直方向的位置由margin-top决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
Box自身水平方向的位置由margin左或右决定(具体已经参照BFC方位)，属于同一个BFC的两个相邻Box的margin会发生叠加。

二.浮动布局

1.概念

通过让元素浮动,可以使元素在水平上左右移动,再通过margin属性调整位置,就是使当前元素脱离文档流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或另一个浮动框的边缘。

2.基本语法

float:left | right

3.浮动的印象

对附近的元素布局造成改变,使得布局混乱。
因为i浮动元素脱离了文档流,会出现一种高度坍塌的现象:原来的父容器高度是当前元素撑开的,但是当该元素浮动后,脱离文档流浮动起来,那父容器的高度就会坍塌(前提是父容器高度小于该浮动元素)

4.清浮动

目的:对父级所在容器中的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.概念

流式布局是页面元素的宽度按照分辨率进行适配调整,但整体布局不变.就是布局脱离固定值限制,可以根据页面情况改变相应发生改变。

2.流式布局相关操作

1.百分比设置 %
    如:width: 90%;
2.窗口比设置 vw|vh
    如:width: 90vw;
3.字体控制 em|rem
    em为相对大小,大小为最近设置字体大小的父级规定的字体大小
    rem为html字体大小

四.定位布局

1.概念

定位布局的目的:让目标标签在指定参考系下任意布局

2.基本语法

position:static | relative | absolute | fixed

static:静态定位,默认定位.
relative:相对定位,未脱离文档流,以自身原有位置作为参考坐标系.
absolute:绝对定位,完全脱离文档流,以最近定位父级作为参考坐标系.
fixed:固定定位,完全脱离文档流,以文档窗口作为参考坐标系.

定位开启后,四个定位方位便会开启,且四个方位均参与布局,如果发生冲突,左右取左,上下取上

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1755.html

高级布局

摘要：不完全脱离文档流浮动后的结果当目标标签的内部有浮动的子级，目标标签的兄弟标签的布局会出现显示异常在不做清浮动的情况下，父级不会获取子级的高度。一、文档流(normal flow) 1.概念将窗体自上而下分成一行一行，块级元素从上至下，行内元素在每行中从左至右顺序排放元素本质为normal flow(普通流，常规流)，文档流就是一个连续具有逻辑上下的页面整体，也可以片面的说，出现在页面中的...

Kylin_Mountain 2019-04-23 13:20 评论0 收藏0
[译]148个资源让你成为CSS专家

摘要：层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性，一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南，包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。迄今为止，我已经收集了100多个精通CSS的资源，它们能让你更好地掌握CSS技巧，使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...

impig33 2019-08-29 11:10 评论0 收藏0
Iceworks 2.8.0 发布，自定义你的 React 模板

摘要：那有没有一种解决方案，是可以完全从零开始去自定义一个模板，能按需进行配置生成，答案是有的。在之前的版本，已经支持自定义模板功能，但仅限于对进行自定义，包含基础导航侧边栏页脚等配置，但这显然是不够的。自定义模板顾名思义即是定制自己的模板，相对社区已有的各类 React 模板，大多数是全家桶的形式，内置了很多功能和页面集合，所谓开箱即用；但在实际使用过程中，我们会发现，下载模板进行相应的...

FrozenMap 2019-08-02 16:04 评论0 收藏0
Iceworks 2.8.0 发布，自定义你的 React 模板

摘要：那有没有一种解决方案，是可以完全从零开始去自定义一个模板，能按需进行配置生成，答案是有的。在之前的版本，已经支持自定义模板功能，但仅限于对进行自定义，包含基础导航侧边栏页脚等配置，但这显然是不够的。自定义模板顾名思义即是定制自己的模板，相对社区已有的各类 React 模板，大多数是全家桶的形式，内置了很多功能和页面集合，所谓开箱即用；但在实际使用过程中，我们会发现，下载模板进行相应的...

instein 2019-08-23 11:54 评论0 收藏0
高级布局补充.过滤以及动画

摘要：默认值为，表示继承父元素的属性，如果没有父元素，则等同于。可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词和，等同于和。是动画的开始，是动画的完成。为了得到最佳的浏览器支持，应该始终定义和选择器。一.Flex布局 1.概念下图为flex的相关概念示意图使用flex布局的容器(flex container),他内部的元素自动成为flex项目(flex it...

xialong 2019-04-23 13:21 评论0 收藏0