为 row，则主轴是水平方向，如果是 column，则主轴是垂直方向 [vbx2puz3kw.jpeg] flex 属性 将任意元素的 display 属性设置为 flex，可将其转换为Flex容器...项目的配置项 标签属性使用方式：data-cell="xxx xxx xxx" 配置项 元素自身对齐方式: start | end | center | baseline | stretch 固定宽度...> auto 相对的固定宽度与自适应宽度 <div data-flex="gutter row...当满足媒体查询的条件时，栅格系统就能自动调整 full/auto</div...: Opera 12.1, Firefox 22+ / } 旧版相对于新版的主要区别：flex项目必须是block，没有换行设置，没有反向设置，主轴没有space-around，顺序值从1开始 参考文章
flex布局使用 justify-content:center 复制代码 垂直居中 通过设置父容器相对定位，子级设置绝对定位，标签通过margin实现自适应居中 弹性布局flex:父级设置...display: flex; 子级设置margin为auto实现自适应居中 父级设置相对定位，子级设置绝对定位，并且通过位移transform实现 table布局，父级通过转换成表格形式，然后子级设置...（2）flex-shrink：定义项目的缩小比例 默认为1，如果空间不足，该项目将缩小 所有项目的flex-shrink为1：当空间不足时，缩小的比例相同； flex-shrink为0：空间不足时，该项目不会缩小...； flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。...，兼容到IE9，一般来说禁止在css里使用表达式去算，因为渲染的很慢，影响性能，所以css里这种运算表达式尽量少写） .center { width: calc(100%-400px); min-height
又如这样的布局：两个元素在一行，左侧元素固定宽200px，右侧元素撑满剩余空间。固定宽200px，撑满剩余空间是大小。两个元素在一行是位置。 下面，我们从大小和位置两个方面，结合场景来看CSS布局。...具体实现如下： HTML： 固定宽度的菜单导航 撑满剩余部分的主题内容... CSS .ly { display: flex; } .left { width: 300px; } .right: { flex-grow: 1; } 垂直方向...HTML： 固定宽度的菜单导航 撑满剩余部分的主题内容</div...多个元素占一行(或列)或多行(或列)，居中对齐，居右对齐，弹性的宽度或高度。都可以用Flex布局来实现。 元素相对父元素定位或相对页面定位。可以用Position来实现。 实现宽高和设备宽度有关。
; /*演示：这句话不起作用，可删去*/ } 1.1.2 fixed定位方式# 固定定位，元素的位置相对于浏览器（就是你能看到的这个浏览器窗口）来说，是固定的，无论你怎么滑动窗口，它都在那儿雷打不动...先自由滑动，到一定位置就固定在那里不动。...浮动的元素，脱离文档流（比如正常我们放一个div在页面里，是有一个文档流的，就是会有位置的，而变为float定位后，就会漂浮起来，原来的位置就不占用了，再放其他div，会从忽略float的位置，正常排列...具体分析见下面第三节的讲解。 2.2 antd栅格布局# 当我们使用ant design组件开发时，必然要使用的其自带的一种布局模式。 ...wrap表示自动换行，当项目在第一行排列不完时，会自动切换到下一行排列。 wrap-reverse 也是自动换行，但不同的是，它是从底下开始排列的（之前我们都是从上面开始排的）。
绝对定位的偏移量是相对于其有定位属性的第一个祖先元素的。 d) fixed 固定定位，固定定位和绝对定位相似，但它的偏移量固定的相对于浏览器窗口。...在使用绝对定位时有两个注意点：第一个是如果网页宽高较大时（大于浏览器可视区宽高），并且元素最终相对于body定位了，实际上它只是相对浏览器首屏的宽高进行偏移，而不是整个网页的宽高。...绝对定位一般和相对定位配合使用，父元素设置相对定位，但不设置偏移量（默认为0），子元素设置绝对定位，这样就可以把子元素的偏移控制在父元素之内。...div{ position:fixed; top:100px; left:50px; } 固定定位的元素相对于浏览器视口偏移，和绝对定位的元素一样，它会脱离标准文档流，并且浏览器把他们一致视作块级元素。...需要注意的是，元素使用flex布局后，float，clear和vertical-align属性将失效。flex是display(显示模式)属性的一个可选值，而不是position(定位)。
left: 10px; /*演示：这句话不起作用，可删去*/ } 1.1.2 fixed定位方式 固定定位，元素的位置相对于浏览器（就是你能看到的这个浏览器窗口）来说，是固定的，无论你怎么滑动窗口...先自由滑动，到一定位置就固定在那里不动。...浮动的元素，脱离文档流（比如正常我们放一个div在页面里，是有一个文档流的，就是会有位置的，而变为float定位后，就会漂浮起来，原来的位置就不占用了，再放其他div，会从忽略float的位置，正常排列...具体分析见下面第三节的讲解。 2.2 antd栅格布局 当我们使用ant design组件开发时，必然要使用的其自带的一种布局模式。 ...wrap表示自动换行，当项目在第一行排列不完时，会自动切换到下一行排列。 wrap-reverse 也是自动换行，但不同的是，它是从底下开始排列的（之前我们都是从上面开始排的）。
: middle; } flex方法 child .parent { display...通过负边距将浮动的侧栏拉上来，左侧栏的负边距为100%，刚好是窗口的宽度，因此会从主面板下面的左边跑到与主面板对齐的左边，右侧栏此时浮动在主面板下面的左边，设置负边距为负的自身宽度刚好浮动到主面板对齐的右边...由于侧栏的负margin都是相对主面板的，两个侧栏并不会像我们理想中的停靠在左右两边，而是跟着缩小的主面板一起向中间靠拢。此时使用相对布局，调整两个侧栏到相应的位置。...当面板的main内容部分比两边的子面板宽度小的时候，布局就会乱掉。可以通过设置main的min-width属性或使用双飞翼布局避免问题。... .layout { display: flex; } .main { flex: 1; } .aside { width: 200px; } </
.container { display: flow-root; } 3. 定位 想要把一个元素从正常流中移除，或者改变其在正常文档流中的位置，可以使用CSS中的position属性。...固定定位 大多数情况下，position: fixed的元素会相对于视口定位，并且会从正常文档流中被移除，不会保留它所占据的空间。...当页面滚动时，固定的元素会留在相对于视口的位置，而其他正常流中的内容则和通常一样滚动。 当你想要一个固定导航栏一直停留在屏幕上时这会非常有效。...这样固定的元素就会相对于该块级元素偏移，而非视口。 接下来给出栗子： <!....box{ display: flex; } 行内元素也可以使用Flex布局。
从布局排版的特征可知它属于表现范畴，因此笔者认为大部分布局排版都能使用纯CSS完成，无需JS介入。...因此在编写HTML结构时，将中间列节点挪到右列节点后面。...「粘性定位」是相对定位和固定定位的结合体，节点在特定阈值跨越前为相对定位，跨越后为固定定位。...相信大家实现水平居中固定宽度的块元素都会使用margin:0 auto。 在此同样原理，当节点声明margin-*:auto时，浏览器会自动计算剩余空间并将该值赋值给该节点。...在使用该技巧时必须基于flex布局。
，而是取最大值最为两者之间的距离，举个栗子： 解决方案： margin尽量设置到一个元素上； 使用弹性布局（flex）或者网格布局（gird）。...div在默认情况下是块状元素，即display: block，对于块状元素，当不设置width时，其默认值为100%，也就是等于父元素的宽度。...Expand / 拓展 绝对定位元素相对于最近的非static祖元素定位，当这样的祖元素不存在时，则相对于可视区域定位。...固定定位 固定定位与绝对定位相似，但是会固定在可视区域中； 不受祖元素定位方式的影响； 块级盒子使用了固定定位，就会具有内联盒子的特性； 内联盒子使用了固定定位，就会具有块级盒子的特性。...粘性定位 粘性定位可以被认为是相对定位和固定定位的混合，元素在跨越特定阈值前为相对定位，之后为固定定位。 层级的改变 使用属性z-index可以对元素的层级进行调整，默认元素的z-index值为0。
（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。...sticky 属性值有以下几个特点： 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。...亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。...元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量 10....完全隐藏 (1) display 属性 display: none; (2) hidden 属性 HTML5 新增属性，相当于 display: none 视觉上的隐藏
*所有属性从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒*/ transition：all,.5s 动画 //animation：动画名称，一个周期花费时间，运动曲线（默认ease），...固定定位 fixed： 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。...然后，可以通过设置垂直 或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是 否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。...box重叠 BFC是一个独立容器，容器里面的子元素不会影响到外面的元素 计算BFC的高度时，浮动元素也参与计算高度 元素的类型和display属性，决定了这个Box的类型。...margin实现自适应居中 弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中 父级设置相对定位，子级设置绝对定位，并且通过位移 transform
自动表格布局 VS 固定表格布局 ①. 自动表格布局 A. 单元格的大小会适应内容 B. 表格复杂时，加载速度较慢(缺点) C. 适用于不确定每列大小时使用 D. 特别灵活(优点) ②....相对定位 (4). 绝对定位 (5). 固定定位 41. 普通流定位，又称为文档流定位，网页元素默认定位方式 (1). 页面中所有元素都有自己的位置 (2)....(2). relative 相对的 (3). absolute 绝对的 (4). fixed 固定定位 注意：relative，absolute，fixed 被称之为 "已定位元素" 48. z-index...语法 display:value ①. flex 将块级元素 变为 flex 容器 ②. inline-flex 将元素变为行内flex 容器，容器的宽度为子元素的宽度 注意:将元素设置为 flex 布局之后...父元素的高度如果参照上级元素设为100%,那么在弹性布局时，子元素也参照父元素设为100%,子元素将无法显示，解决方案时将子元素设为固定高度 63.
使用语法： .box{ display:-webkit-flex; display:flex; } 采用 flex 布局的，也称 flex 容器，对应的属性有： flex-direction 设置排列方向...="child"> //其样式为 .box{ display:-webkit-flex; display:flex;...还可使用 max-width、min-width 或固定宽度与 flex 配合使用，另一边可自动填充功能。...2.4、rem rem是一种相对单位。长度单位可分为两种：相对单位和绝对单位。 绝对单位：长度是固定的值，反应物理真实尺寸。...特点：使用rem布局时，只需要通过宽度改变html的font-size，就可以改变所有元素大小。注意的是，所有设置大小的时候都要使用rem。
定宽块级元素水平居中(方法三) 当元素开启决定定位或者固定定位时， left 属性和 right 属性一起设置就会拉伸元素的宽度，在配合 width 属性与 margin 属性就可以实现水平居中。...定宽块级元素水平居中(方法四) 当元素开启决定定位或者固定定位时， left 属性和 transform 属性即可实现水平居中。...，就是一个父级包裹一个子级，这里的子级是固定的300px*300px，代码如下： 最终的实现效果如下...如果页面内容不够长时，底部栏就会固定到浏览器的底部；如果足够长时，底部栏就后跟随在内容的后面。...Flex 方案 使用 Flex 方式实现该布局比较简单。
使用相对单位 rem rem 是相对于根元素 html 的 font-size 来做计算。...它的作用是： position:fixed的元素将相对于屏幕视口（viewport）的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。...，然后里面的布局，应该是首尾为固定高度，中间内容区域为flex: 1;。...: flex; .taber-item { flex: 1; display: flex; flex-direction: column; justify-content...如果你的应用涉及到权限，那需要标注每个路由需要的权限，在meta中设置roles，roles是数组来保存需要的权限；从后台的接口中获取用户拥有的权限和roles进行对比就可以判断是否具有相关权限了。
使用相对单位 rem rem 是相对于根元素 html 的 font-size 来做计算。...它的作用是： position:fixed的元素将相对于屏幕视口（viewport）的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。...，然后里面的布局，应该是首尾为固定高度，中间内容区域为flex: 1;。...: flex; .taber-item { flex: 1; display: flex; flex-direction: column; justify-content: space-around...如果你的应用涉及到权限，那需要标注每个路由需要的权限，在meta中设置roles，roles是数组来保存需要的权限；从后台的接口中获取用户拥有的权限和roles进行对比就可以判断是否具有相关权限了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
