百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

定位与flex

作者叶丽雯课程第七天到第八天:学习布局1516次浏览92018-05-12 18:13

定位

文档流

正常的布局流(在布局介绍文章中提到)是将元素放置在浏览器视口内的系统。
默认情况下,
块级元素在视口中垂直布局——每个都将显示在上一个元素下面的新行上,并且它们的外边距将分隔开它们。
内联元素互相之间以及任何相邻(或被包裹)的文本内容位于同一行上,只要在父块级元素的宽度内有空间可以这样做。
如果两个相邻元素都在其上设置外边距,并且两个外边距接触,则两个外边距中的较大者保留,较小的一个消失——这叫外边距折叠

position

静态定位(元素在文档流中的正常位置)
position:absolute;(默认值)
相对定位(占据正常文档六中的位置)
position:relative;
使用top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。(相对于元素移动之前的位置)。
绝对定位(元素脱离正常文档流)
绝对定位自己的层独立于一切。这是非常有用的——这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 ——例如弹出信息框和控制菜单,翻转面板,可以在页面上的任何地方拖放的UI功能等。
使用top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。(相对于包含元素的位置)。
给绝对定位的元素设置top: 0; bottom: 0; left: 0; right: 0; 和 margin: 0;会使元素布满整个可视窗口

###### 定位上下文
改变定位上下文——绝对定位的元素相对于其定位的元素,是通过在元素的其他祖先之一上设置定位(position:relative;)来实现的——它是嵌套在其中的元素之一。
###### z-index
使用z-index属性改变堆叠顺序。
例:z-index:1;(值越大级别越高,越靠上)
**固定定位(脱离文档流)**
与绝对定位的工作方式完全相同,只有一个主要区别——绝对定位固定元素是相对于 `<html>` 元素或其最近的定位祖先,而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目,如持久导航菜单。

弹性盒子(Flex)

在需要设置为柔性的盒子的父元素中设置display:flex;

模型说明

当元素表现为flex框时,他们沿着两个轴来布局:

主轴(main axis)是沿着flex元素放置的方向延伸的轴。该轴的开始和结束被称为main start和main end。
交叉轴(cross axis)是垂直于flex元素防止方向的轴。该轴的开始和结束被称为cross start和cross end。
设置了display:flex的元素被称为flex容器(flex container)
在flex容器中表现为柔性的盒子的元素被称为flex项。

容器属性

flex-direction

用于指定主轴的方向。可取值为:
·row:默认值,主轴为水平方向,起点在左端
·row-reverse:主轴为水平方向,起点在右端
·column:主轴为垂直方向,起点在上沿
·column-reverse:主轴为垂直方向,起点在下沿

flex-wrap

档在布局中使用定宽或者定高的时候,一行中的元素过多,很有可能会溢出,破坏布局。可取值为:
·nowrap:(默认)不换行

·wrap:换行,第一行在上方

·wrap-reverse:换行,第一行在下方

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为:row nowrap

justify-content

定义项目在主轴上的对齐方式。可取值为:
flex-start:左对齐(默认值)
flex-end:右对齐
center:居中
space-between:两端对齐,项目之间间隔相等
space-around:每个项目两侧的间隔相等

align-item

定义项目在交叉轴上的对齐方式
flex-start:交叉轴起点对齐
flex-end:交叉轴终点对齐
center:交叉轴中点对齐
stretch(默认值):如果项目没有设置高度或设为auto,将占满整个容器的高度
baseline:项目的第一行文字的基线对齐

align-content

定义多轴线对齐方式,如果项目只有一根轴线,该属性不起作用。
flex-start:与交叉轴起点对齐
flex-end:与交叉轴终点对齐
center:与交叉轴中点对齐
stretch:轴线占满整个交叉轴
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布
space-around:没跟轴线两侧的间隔都相等

项目属性

order

定义项目的排列顺序,数值越小,排列越靠前
order:number;

flex-grow

定义项目的放大比例,默认值为0,即如果存在是剩余空间,也不放大。
flex-grow:number;

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

flex-shrink

定义项目的缩小比例,默认值为1,即如果空间不足,项目缩小。
flex-shrink:number;

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

flex-basis

定义在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。默认值为auto,即项目本来的大小。可以设置为跟width和height属性一样的值,即项目占据固定空间。

flex属性

是flex-grow,flex-shrink和flex-basis的缩写,默认值为0,1,auto。

align-self

允许单个项目有与其他项目不一样的对齐方式,可覆盖align-item值,默认为auto,表示继承父元素的align-item属性,如果没有父元素,则等同于stretch。

该属性可能取6个值,除了auto,其他都与align-items属性完全一致。

0条评论