MENU

CSS - MYNOTE

布局

Flex布局

父容器属性和值

.container {
display:flex /*改变原本的布局方式,使该容器变成弹性盒布局*/
flex-direction: row(default) | row-reverse | column | column-reverse /*父容器指定子元素的排列方向*/
flex-wrap: nowrap(default) | wrap | wrap-reverse  /*当子元素的大小超过父元素,是否换行*/
flex-flow: <‘flex-direction’> || <‘flex-wrap’> /*以上两者的缩写*/
justify-content: flex-start(default) | flex-end | center | space-between | space-around | space-evenly;  
  /*定义是子元素沿主轴的对齐的位置,flex布局的主轴要么是横的要么就是竖的,因此这个属性是为了定义子元素如何在父容器之中对齐的方式*/
}

v2-c60dcf48c6def539458ba4f91a89d526_1440w

align-items

align-items: stretch(default) | flex-start | flex-end | center | baseline; 控制所有子元素的布局情况

v2-a72ae6f4ddb17b099d769dfcdb005552_1440w

align-content

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

这个属性可以看做是次轴的justify-content,且需要出现多行才会有作用

v2-129fe81c49f479004c0c0daf34718860_1440w

父元素的属性有以下

  • display
  • flex-direction
  • flex-wrap
  • justify-content
  • align-items(交叉轴)
  • align-content(交叉轴的justify-content)

子元素的属性和值

以下三个属性很重要

flex-grow: <number>;*/\* default 0 \*/*

这个属性的属性值是一个数字,我们可以理解为权重(以下的两个属性同理), grow顾名思义为增长,权重就是所分配到的比例为多大。举个例子,父容器剩余400px的宽度(除了子元素自身的宽度剩下的),有三个子元素,它们之前的flex-grow比例是 1:2:1 ,那么它们所获得增长(额外给的)的宽度分别为100px,200px,100px

如果你理解了上面这个权重的概念(也不难理解吧),接下来直接给个定义就知道了

flex-shrink: <number>;*/\* default 1 \*/*

shrink(缩放) 必要时按照权重缩放 就是当子元素合起来的宽度大于父容器的宽度且父容器设置了nowrap,这时候就有用了(负数无效)

flex-basis: <length> | auto;*/\* default auto \*/*

可以理解为尺寸,就是默认分配剩余空间之前的尺寸大小,可以是百分比、rem....,若没有设置此属性则按照width,优先级(flex-basis>width),如果设置为0,则不考虑内容周围的额外空间。如果设置为auto,则根据其flex-grow值分配额外空间

v2-b1841a9712b05133687dcb6326ab8cfa_1440w

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

这个是上面的三个的简写默认值为0 1 auto (flex-shrinkandflex-basis) 是可选的

align-self: auto | flex-start | flex-end | center | baseline | stretch;

这允许为各个弹性项覆盖默认对齐(或由align-items指定的对齐)。 请参阅align-items说明以了解可用值(官话)。说白了就是设置子元素的align-items

v2-cac7b9c7dda3d30dccfe9fb3900d94b6_1440w

子元素的属性与属性值

  • order
  • flex-grow
  • flex-shrink
  • flex-basis

! 请注意,float,clear和vertical-align对flex项目没有影响

Grid布局

父容器属性和值

.container {
  display: grid | inline-grid;
}

设置行和列

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

这里track-size(轨道尺寸)的意思我觉的是一条线段的长度吧(就如图2-1的40px和50px),line-name的意思是你可以给这条线段取个名字,track-size可以用px,%,fr(fraction)也就是分数的意思或者说fr为单位的轨道中占的比例

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

下图应该表达的很直观了

v2-5466589801814f4d85dcb0246236c3b2_1440w

repeat计算布局

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
  /*上面等同于下面*/
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

但我目前还不知道那个自定义名字有什么用,等我以后知道了再来继续写这里

fr的计算

.container {
  grid-template-columns: 1fr 1fr 1fr;
  /*举例两种例子*/
  grid-template-columns: 1fr 50px 1fr 1fr;
}

上面那行的代码表示:每一个轨道占父容器的1/3,假如父容器是900px,就分成了(300px 300px 300px),而下面的就会这样计算(900-50)/3,然后平均分给每一个轨道,(283.3px 50px 283.3px 283.3px)

grid-template-areas

通过使用grid-area属性指定子元素具体在父容器的位置.(句号)表示空的单元格(grid-item:就像小学生的网格本里面的一个个格子),我觉的这个属性太强了

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

v2-8e295fdeaf37418c674c73d04f0eba5a_1440w

gap

设置行和列之间的间隙大小

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
  /*上面等同下面*/
  grid-gap: <grid-row-gap> <grid-column-gap>;
  grid-gap: 15px 10px;  /*若没有grid-row-gap,则设置同grid-column-gap相同的值*/
}    

v2-21796a282388d04da056ed7909336ddf_1440w

justify-items align-item place-items

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
  place-items: <align-items> / <justify-items>;/*如果第二个值没有设置就等同于第一个值*/
}
.container {
  justify-items: start;
}

v2-d06dddfa3b4aa0dbd8c86b5d1971695c_1440w

.container {
  justify-items: stretch;
}

v2-49e4ec67608f0d58aba6b49f00c561d8_1440w

当grid-item多余网格中的单元格或grid-item放置在显示网格之外,将创建隐式track

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}
/*--------------------------------*/
/*图2-8是下面的栗子*/
.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px
}
/*这两个属性会在子元素的属性中介绍*/
.item-a {
  grid-column: 1 / 2;  /*在纵轴上,item-a处于第一条线和第二条线之间*/
  grid-row: 2 / 3;  /*在横轴上,item-a处于第二条线和第三条线之间*/
}
.item-b {
  grid-column: 5 / 6;/*如上同*/
  grid-row: 2 / 3;
}

v2-90a610252ed32a517756afbf9f13a188_1440w

grid-column和grid-row还是很好理解的,就是子元素处在父元素上的位置,由上图可知纵轴的第五条线和第六条线是不存在的,隐式track就会创建两个0线来填充此间隔,我们用grid-template-columns和grid-template-rows就可以指定隐式轨道的宽度

.container {
  grid-auto-columns: 60px;
}

v2-53b5938752e4cc1260c1671b9d4d3257_1440w

grid-auto-flow

.container {
  grid-auto-flow: row | column | row dense | column dense
}
  • row(默认):就是正常的流,从左到右的顺序
  • column: 你们知道css还有writing-mode这个属性吗 设置为writing-mode: horizontal-tb;流向就为从上到下了,此处同理是如此
  • dense: 让稍后出现较小的子元素尝试填充网格中较早的洞,可能会导致子元素的可视顺序错乱,所以不仔细讨论
<section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>
.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}
.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

v2-1ac34cc1acf4ec4fc94befdd4128ae8b_1440w

当设置父容器中grid-auto-flow: column

v2-62dbcb4c560d15c65292d8dc45e9734c_1440w

居中显示

利用 flex 实现

flex 格式化上下文中,设置了 margin: auto 的元素,在通过 justify-contentalign-self 进行对齐之前,任何正处于空闲的空间都会分配到该方向的自动 margin 中去。这里,很重要的一点是,margin auto 的生效不仅是水平方向,垂直方向也会自动去分配这个剩余空间。

<div class="g-container">
    <div class="g-box"></div>
</div>
.g-container {
    width: 100vw;
    height: 100vh;
    display: flex;


}

.g-box {
    width: 40vmin;
    height: 40vmin;
    background: #000;
    margin: auto;
}

动画

渐变

阴影渐变

.hover-shadow-box-animation {
  display: inline-block;
  vertical-align: middle;
  /*为元素营造3D空间,通过改变 用户和Z平面的距离而实现。translate(0) 用来在3D空间中,沿着 Z轴重新定位p 元素。*/
  transform: perspective(1px) translateZ(0);
  /*阴影设置为透明了,也可以改成rgba需要的样子*/
  box-shadow: 0 0 1px transparent;
  /*动画过渡时间,*/
  transition-duration: 0.3s;
  /*同时启用box-shadow 和transform过渡*/
  transition-property: box-shadow, transform;
}
.hover-shadow-box-animation:hover,
.hover-shadow-box-animation:focus,
.hover-shadow-box-animation:active {
  /*鼠标悬停后的最终过渡结果*/
  box-shadow: 1px 10px 10px -10px rgba(0, 0, 24, 0.5);
}
Last Modified: August 14, 2021
Leave a Comment