资讯专栏INFORMATION COLUMN

高级布局

Kylin_Mountain / 3358人阅读

摘要:不完全脱离文档流浮动后的结果当目标标签的内部有浮动的子级,目标标签的兄弟标签的布局会出现显示异常在不做清浮动的情况下,父级不会获取子级的高度。

一、文档流(normal flow)

1.概念

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

2.BFC(Block formatting context)

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

3.BFC规则

  • 内部的Box会在垂直方向,一个接一个的放置
  • 根据BFC布局方向,Box自身的水平方向位置,由margin左或右控制,相邻Box的margin会叠加
  • Box的垂直位置,由margin-top控制位置,相邻Box会发生重叠(margin塌陷)
  • 同一容器(区域)中,box相互影响,不对对区域外产生影响。

二、浮动布局

1.目的

让block同行显示(1.在父级规定的宽度中,2.不完全脱离文档流)

2.基本语法

float:left | right
  • float:left--->设置BFC横向布局规则为从左至右,且block box同行显示之间没有间隔
  • float:right--->BFC规则为从右至左,且block box同行显示之间没有间隔

3.浮动布局实例

.box{
    width: 1000px;
    margin: 0 auto;
}
div div{
    font: 900 30px/100px "STSong";
    text-align: center;
    width: 200px;
    height: 100px;
    background-color: green;
    float: left;
    color: white;
}
.b6{
    width: 600px;
    background-color: yellow;
}
.b7{
    width: 400px;
    height: 200px;
    background-color: yellowgreen;
    float: right;
}
.b8{
    width: 300px;
    height: 150px;
    background-color: brown;
    float: left;
}
.b9{
    width: 300px;
    height: 150px;
    background-color: black;
    float: left;
}
.b10{
    width: 400px;
    height: 150px;
    background-color: cyan;
    float: right;
}
.b11{
    width: 600px;

    background-color: red;
    float: left;
}
.b12{
    width: 1000px;
    background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12

效果图:

4.浮动布局的问题

通常文档流中,子标签在父级标签未设置高度的情况下,会撑开父级的高度,父级的高度决定于逻辑最后位置的子级的低端。

脱离文档流后的子级标签,不再撑开父级高度。

不完全脱离文档流(浮动后的结果):当目标标签的内部有浮动的子级,目标标签的兄弟标签的布局会出现显示异常!在不做清浮动的情况下,父级不会获取子级的高度。

5.清浮动

清浮动的对象:拥有浮动子级的父级

这里只介绍四种清浮动的方法

1.浮动的父级设置高度
super {
    height: npx;
}
2.浮动的父级设置overflow
super {
    overflow: hidden;
}
3.浮动的父级兄弟设置clear
brother {
    clear: left | right | both;
}
4.浮动的父级伪类清浮动
super:after {
    content: "";
    display: block;
    clear: left | right | both;
}

原理:在浮动布局的情况下,让父级获得合适的高度。

三、流式布局

1.目的

让布局脱离固定值限制,可以根据页面情况的改变发生相应的变化

2.相关设置

百分比设置 %  参考为最近的父级
窗口设置 vw | vh    50vw代表占据窗口宽度50%
字体控制 em rem     em为最近设置字体大小的父级规定的字体大小 rem为html字体大小

四、定位布局

可以根据需求给相应的块设定相应设置。

1.语法

position属性指定一个元素的定位类型

描述
relative 相对定位
absolute 绝对定位
fixed 固定定位
static 默认,没有定位

设置完定位类型就可以设置top,bottom,left,right四个属性进行布局。,如果同时设置了top和bottom,top生效,同时设置了left和right,left生效。简单说就是 左右取左,上下取上

2.相对定位

  • 未脱离文档流
  • 以自身原有位置作为参考坐标系
  • 方位布局只改变盒子显示区域,不会改变盒子原有位置(相当于灵魂出窍)
  • left=-right,top=-bottom。

优点:父级不会脱离文档流,满足所有的盒模型布局

3.绝对定位

  • 完全脱离文档流,不在文档流中占位,不会撑开父级高度,不会影响兄弟布局,显示层也永远高于文档流
  • 以最近定位父级作为参考坐标系,没有就找html

优点:如果自身已经采用绝对定位布局,那么子级一定参考自身进行定位。

注:如果父级只是辅助子级进行绝对定位,那么一定优选相对定位,因为绝对定位会产生新的BFC,导致盒模型布局会受影响

4.固定定位

  • 完全脱离文档流
  • 参考系为文档窗口,不随页面滚动而改变位置

5.z-index

脱离文档流的标签,具有z-index属性,可以用来控制显示层次的优先级,值为任意正整数

五、Flex布局

1.概念

Flex是Flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大灵活性。

  • 采用Flex布局的元素,称为Flex容器(flex container),简称“容器”。它的所有子元素自动成为容器成员,称为flex项目(flex item),简称“项目”。
  • 水平为主轴(main axis),主轴开始的位置叫做main start,结束位置叫做main end。
  • 垂直为交叉轴(cross axis),交叉轴的开始位置叫做cross start,结束位置叫做cross end
  • 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

2.容器属性

1.flex-direction属性 决定主轴的方向(即项目的排列方向)
flex-direction: row | row-reverse | column | column-reverse;
-- row(默认值):主轴为水平方向,起点在左端。
-- row-reverse:主轴为水平方向,起点在右端。
-- column:主轴为垂直方向,起点在上沿。
-- column-reverse:主轴为垂直方向,起点在下沿。

2.flex-wrap属性 定义一条轴线排不下的情况下如何换行
flex-wrap: nowrap | wrap | wrap-reverse;
-- nowrap(默认):不换行。
-- wrap:换行,第一行在上方。
-- wrap-reverse:换行,第一行在下方。

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

4.justify-content属性 定义了项目在主轴上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around;

5.align-items属性 定义项目在交叉轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch;

6.align-content属性 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

3.项目属性

1.order 属性 定义项目的排列顺序。数值越小,排列越靠前,默认为0。
order: ;

2.flex-grow 属性 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-grow: ; /* default 0 */

3.flex-shrink 属性 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-shrink: ; /* default 1 */

4.flex-basis 属性 定义了在分配多余空间之前,项目占据的主轴空间(main size)。
flex-basis:  | auto; /* default auto */

5.flex 属性 是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
flex:   

6.align-self 属性 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;

六、响应式布局

1.概念

响应式布局就是一个网站能够兼容多个终端。

原则:采用响应式布局的样式块,基本样式块只做共性设置,需要根据页面尺寸进行适应变化的样式均有响应式布局处理

2.页面宽度

  • 小于宽度
@media only screen and (max-width: ) {
    selector {
        
    }
}
  • 大于宽度小于宽度
@media only screen and (min-width: ) and (max-width: ) {
    selector {
        
    }
}
  • 大于宽度
@media only screen and (min-width: ) {
    selector {
        
    }
}

3.注

  • 在响应式布局内,css语法同正常样式表语法一样
  • 响应式布局之间存在不同屏幕尺寸的限制,使用样式相互不影响。满足当前屏幕尺寸时,该样式块起作用,不满足时则失效
  • 当响应式布局中样式快起作用时,会与正常样式快设置一起协同布局,遵循选择器的优先级规则

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

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

相关文章

  • 高级布局

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

    liukai90 评论0 收藏0
  • [译]148个资源让你成为CSS专家

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

    impig33 评论0 收藏0
  • Iceworks 2.8.0 发布,自定义你的 React 模板

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

    FrozenMap 评论0 收藏0
  • Iceworks 2.8.0 发布,自定义你的 React 模板

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

    instein 评论0 收藏0
  • 高级布局补充.过滤以及动画

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

    xialong 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<