阅读 38

常用的几种高效CSS布局

Flex布局是什么

  flex布局可以在任何元素中使用,设为flex布局后,子元素的float、clear和vertical-align属性将失效.

// 块级元素和行内块级元素
.box {
  display: flex;
}
// 行内元素
span {
  display: inline-flex;
}
// webkit内核的浏览器必须加上-webkit前缀
.box {
  display: -webkit-flex;
  dispaly: flex;
}
复制代码

基本概念

  采用flex布局的元素被flex容器(flex container),简称容器.它所有的子元素自动成为容器成员,成为Flex项目(flex item),简称项目. BAF5F707-B6CB-4057-AE37-11719E6300B7.png 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫main end;交叉轴的开始位置叫cross start,结束位置叫cross end.项目默认沿主轴排列.单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size.

容器的属性

以下5个属性设置在容器上

  • flex-direction
  • flex-wrap
  • justify-content
  • align-items
  • align-content

3.1 flex-direction(主轴和交叉轴方向)

flex-direction属性决定主轴和交叉轴的方向 它有四个值:

  • row(默认值):主轴为水平方向,起点在左上端,交叉轴为垂直方向,起点在左上端
  • row-reverse:主轴为水平方向,起点在右上端,交叉轴为垂直方向,起点在左上端
  • column:主轴为垂直方向,起点在左上端,交叉轴为水平方向,起点在左上端
  • column-reverse:主轴为垂直方向,起点在左下端,交叉轴为水平方向,起点在左上端

3.2 flex-wrap(换行)

项目默认在主轴上,flex-wrap属性定义如果主轴上排列不下,如何换行:

  • nowrap:不换行
  • wrap:换行,第一行在上方
  • wrap-reverse:换行,第一行在下方

3.3 justify-content(项目在主轴上的对齐方式)

justify-content属性定义了项目在主轴上的对齐方式。

  • flex-start:主轴左对齐
  • flex-end:主轴右对齐
  • center:主轴中间居中
  • space-between:主轴两端对齐,项目之间的间隔都相等
  • space-around:每个项目两侧的间隔相等,所以项目之间的间隔比项目与边框的间隔大一倍
  • space-evenly:每个项目之间的间隔相等,跟space-around不一样

3.4 align-items(项目在交叉轴上的对齐方式)

  • stretch(默认值):如果项目没有设置固定高度,则会被拉伸填充满交叉轴方向剩余的空间
  • flex-start:项目在沿交叉轴起始线位置对齐
  • flex-end:项目沿交叉轴终点线位置对齐
  • center:项目在交叉轴方向居中对齐
  • baseline:项目在交叉轴方向沿项目中第一行文字的基线对齐

3.5 align-content(定义多根轴线的对齐方式)

aling-content属性定义了多根轴线的对齐方式,如果项目只有一根轴线,则该属性不起作用. align-content 控制多行项目(多根主轴线)对齐方式。类似 justify-content ,只不过,align-content 是控制行与行之间的空间分配,justify-content 是控制项目与项目之间的空间分配。

  • stretch:默认值,交叉轴方向剩余的空间平均分配到每一行,并且行的高度会拉伸,填满整行的空间
  • flex-start:所有行在交叉轴方向上,以交叉轴的起始位置对齐
  • flex-end:所有行在交叉轴方向上,以交叉轴的终点位置对齐
  • center:所有行在交叉轴上居中对齐
  • space-between:行在交叉轴方向上,两端对齐,然后行中间的间隔相等
  • space-around:在交叉轴方向上,剩余的空间被平均的分配到每一行的两侧
  • space-evenly:在交叉轴方向上,剩余空间平均分配

项目的属性

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order

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

flex-grow

flex-grow属性定义项目在主轴方向上拉伸放大占剩余空间(如果有的话)的比例,默认为0,即如果存在剩余空间也不放大,如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍.

flex-shrink

flex-shrink属性用于控制项目在主轴方向上缩小的程度。数值越大,收缩越多.默认是 flex-shrink: 1 ,同等比例收缩。

flex-basis

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间,用于初始化每个项目占据主轴空间的尺寸

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto),建议优先使用这个属性.

align-self

align-self属性控制项目本身在交叉轴上的对齐方式。优先级高于 align-items。align-items 是容器统一控制容器里的每个项目的对齐方式,align-self 则是项目控制项目本身的对齐方式。默认值:align-self: auto; ,继承容器设置的 align-items 的值,除了比 align-items 多一个 auto 选项外,其他选项与 align-items 一致。

  主轴是水平方向,交叉轴是垂直方向,flex-direction会颠倒主轴和交叉轴的方向,如果值为row和row-reserve时方向不变,column和column-reserve时主轴是垂直方向,交叉轴是水平方向,flex布局就是用来操作容器内元素的排列方式

  flex布局是一种高效的css布局方式,可以灵活的操作盒子里项目的排列方式,缺点也很明显有时候一行放不下,就会需要多行布局,但是对于flex来说新的一行就是一个新的独立的flex容器,对于多行布局操作不太理想,所以flex布局也叫一维布局

参考文章:segmentfault.com/a/119000002… www.ruanyifeng.com/blog/2015/0…

calc()

  calc()此css函数允许在声明css属性值时执行一些计算.此calc()函数用一个表达式作为它的参数,用这个表达式的结果作为值,这个表达式可以是加减乘除操作符的组合,采用标准操作符处理法则的简单表达式.+号和-号运算符的两边必须要有空白字符.   calc()从字面我们可以把它理解成一个函数function,括号里面是一个js表达式,calc()最大的好处就是用在流体布局上.

vw和vh

vw和vh跟窗口大小有关,%跟父级元素大小有关

sticky(粘性布局)

sticky粘性定位可以被认为是相对定位和固定定位的混合,元素在跨越特定值前为相对定位,之后为固定定位,须指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。注意如果祖先元素是overflow 是 hidden, scroll, auto, 或 overlay时,sticky会失效.

::before和::after(伪元素)

css伪元素之所以被成为伪元素,是因为它们不是真正的页面元素,html没有对应的元素,但是其所有用法和表现行为和真正的页面元素一样.::before和::after创建一个伪元素,其将成为匹配选中元素的第一个子元素,常通过content属性来为一个元素添加修饰性内容.此元素默认为行内元素.生成的伪元素包含在元素框内.

q::before {
  content: "«";
  color: blue;
}
q::after {
  content: "»";
  color: red;
}
复制代码

<<一些引用>>, 他说, <<比没有好>>。.

伪元素特点

  • 伪元素不属于文档,所以js无法操作它
  • 伪元素是主元素的一部分,因此点击伪元素触发的是主元素的click事件

transform

transform属性允许你旋转、缩放、倾斜或平移给定元素

rotate()

rotate定义一个旋转属性,将元素在不变形的情况下旋转到不动点的周围.移动量由指定角度定义,如果是正值则为顺时针,如果是负值则为逆时针.

transform: rotate(0.5turn);
transform: rotate(50%);
transform: rotate(50deg);
复制代码

rotateX()、rotateY()、rotateZ()这个CSS 函数定义了将元素在不同轴上旋转而不使其变形的方法。 其运动的程度由指定的角度来定义

scale()

scale用来修改元素的大小,可以通过x、y坐标来放大或缩小元素

transform: scale(x, y)
复制代码

scaleX()、scaleY()、scaleZ()这个CSS函数是用一个常数因子来修改每个单元点的不同轴坐标

skew()

skew包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空则默认为0

  • skewX();表示只在X轴(水平方向)倾斜。
  • skewY();表示只在Y轴(垂直方向)倾斜。
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
复制代码

translate()

translate这个属性用于移动元素在平面上的位置.

transform: translate(50px,100px);
transform: translateX(120px);
transform: translateY(120px);
复制代码

transition

transition属性是transition-property,transition-duration,transition-timing-function 和 transition-delay 的一个简写属性。

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果,比如在不同的伪元素之间切换:hover,:active 或者通过 JavaScript 实现的状态变化。

transition-property

transition-property 指定应用过渡属性的名称。

transition-property: none;
transition-property: all;
transition-property: margin-right;
transition-property: width,height;
复制代码

transition-duration

transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ,表示不出现过渡动画。

transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;
复制代码

transition-timing-function

transition-timing-function属性指定切换效果的速度。

linear	规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease	规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in	规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out	规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out	规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
复制代码

transition-delay

transition-delay 属性指定何时将开始切换效果。

文章分类
前端
文章标签