css 数字换行_浅析CSS布局、定位和动画-CSDN博客

CSS布局

css的布局宽度主要有三类：

固定宽度布局：一般宽度为960/1000/1024px
不固定宽度布局，主要靠文档流的原理来布局
响应式布局，在PC上面固定宽度，在手机上面不固定宽度，也就是混合布局

css布局方式主要有三种：

float布局
flex布局
grid布局

float布局

使用步骤：

在需要使用float布局的元素上加上float：left和width。

在该元素的父元素上加上.clearfix

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}

注意事项：

不需要做响应式，因为手机上没用IE，这个布局是为IE准备的
IE 6/7存在双倍margin的bug，解决这个bug有两种办法：1、把margin减半。2、加一个display：inline-block;
平均布局时可以用负margin给最后扩充一点空间

flex布局

flex布局分两部分：

container 容器
items 元素

container的样式：

display: flex/inline-flex;

改变item的流动方向：

flex-direction: row/column/row-reverse/column-reverse;

由于flex是弹性流，如果不换行的话所有item会依次排开一直挤下去，不会自动换行，换行的代码：

flex-wrap: nowrap/wrap/wrap-reverse;

tips：flex-direction和flex-wrap可以简写为flex-flow，如：flex-flow：row wrap；

主轴（左右）对齐方式：

justify-content

次轴（上下）对齐方式：

align-items: center/flex-end/flex-start/stretch

多行内容：

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

item的样式：

order: 改变item的顺序，不写默认是零
flex-grow: 控制item占据container的几份，可以让item长胖
flex-shrink: 空间不够的时候控制item缩小的程度，数字越大缩小的越多，0代表不会缩小
flex-basis： 控制item的宽度
flex-self: 控制item的align-items
tips: grow shrink basis可以缩写，用空格隔开

grid布局

grid布局是未来可能会普及的方式，目前很多浏览器不支持这种布局。

display: grid/inline-grid;

grid布局的container分区非常的直白直接写：

grid-template-columns: 40px 50px auto 50px 40px
grid-template-rows: 25% 100px auto

就可以控制将container分成几行几列，每个地方的大小是多少。

科普一个单位fr（free space）可以将container分成几份，比如：

grid-template-columns: 1fr 3fr 1fr;

每一个item的大小也可通过：

grid-column-start
grid-column-end
grid-row-start
grid-row-end

这四个属性直接控制。

item之间的空隙通过下面三个属性控制：

grid-gap;
grid-row-gap;
grid-column-gap;

分区：

grid最方便的功能就是能够非常直观的通过grid-template-areas属性对container进行分区，举个例子：

<div class="container">
    <div class="header"></div>
    <div class="aside"></div>
    <div class="main"></div>
    <div class="ad"></div>
    <div class="footer"></div>
</div>

.container{
     display: grid;
     grid-template-columns: 50px 50px 50px 50px;
     grid-template-rows: 50px 100px 50px;
     grid-template-areas: 
           "header header header header"
           "aside main . ad"
           "footer footer footer footer"
}

.container > .header{
            grid-area: header;
        }
        .container > .main{
            grid-area: main;
        }
        .container > .aside{
            grid-area: aside;
        }
        .container > .footer{
            grid-area: footer;
        }
        .container > .ad{
            grid-area: ad;
        }

通过上面的代码可以实现如下图的局部：

css定位

如果说css布局是在屏幕平面上二维的进行布局，那么css定位则是垂直于平面的三维布局。

平时我们看平面上的页面元素都是以俯视角看的，难免会忽略页面布局还可以从垂直于屏幕进行布局。首先我们用一个简单的示例来说明一个层叠上下文是如何分层的。

定位元素（z-index=0/1/2/......数字越大越高） ————————————

内联子元素————————————————

浮动元素——————————————————

块级子元素——————————————————————

border————————————————————————

background——————————————————————————

定位元素（z-index=-1/-2/......数字越小越低———————————————————

当两个元素在同层的时候，后面的会覆盖前面的。

控制元素在垂直屏幕上的位置的属性为：position

position的取值有以下几种：

static 默认值，待在文档流中
relative 相对定位，不脱离文档流，元素仍在原来的地方，只是看起来的位置发生了变化
absolute 绝对定位，脱离文档流，定位基准是祖先元素中最近的一个非static元素，所以一般使用绝对定位时会将其父元素相对定位，这样就能根据父元素移动其位子。
fixed 固定定位，定位的基准是视口（viewpoint），适合做回到顶部等按钮，但如果div所在的元素有一些特殊的属性，就不会相对于视口定位，如transform。在手机上使用这个属性会有无穷无尽的bug
sticky 粘滞定位，兼容性极差，不要用，看得见的时候在文档流中，当超出视口，不会消失，粘在屏幕边上，特别适合做导航

层叠上下文：

层叠上下文就相当于一个小世界，在这个世界中无论他的z-index多高或多低，都脱离不出这个世界，与这个世界外的元素比较高低时还是以这个世界的高度为基准。只有相处在同一个小世界，z-index才能做直观的比较。

可以创建层叠上下文的主要四个属性：z-index/flex/opacity/transform。

css动画

浏览器渲染过程：

根据HTML构建一颗HTML树（DOM）
根据CSS构建CSS树（CSSOM）
将两颗树合并成一颗渲染树（render tree）
Layout布局（文档流、盒模型、计算大小和位置）
Paint绘制（把边框颜色、文字颜色、阴影等画出来）
Composite合成（根据层叠关系展示画面）

页面重新渲染的三种更新方式：

JavaScript->style->layout->paint->composite

JavaScript->style ->paint->composite

JavaScript->style ->composite

浏览器根据你的js代码改动了哪些样式会自动选择从哪里进行重新渲染，比如改变的div的大小，则用第一种方式，只改变的边框颜色，用第二种方式渲染，只改变了层叠关系，则用第三种方式进行渲染。

下面介绍要实现动画用到的三个属性：

transition：

该属性的作用为过渡，补充中间帧，程序员通过其他两种属性控制元素的关键节点的状态，然后通过transition来将中间的步骤补充完整。

语法：

transition：属性名时长过渡方式延迟

可以用逗号分隔两个不同的属性

可以用all代表所有属性

过渡方式有：linear/ease/ease-in/ease-out/ease-in-out/bezier/step-start/step-end/steps

transform：

transform可以给元素添加一个动画，动画的种类有：

位移：

transform：translateX/Y/Z；
transrorm: translate(50px,50px);
transform: translate3d(50px,50px,50px)

缩放：

transform： scale（1.5，0.5）  元素会变形

旋转：

transform: rotate(180deg);
transform: rotateX(沿X轴旋转)；

倾斜：

transform: skew(45deg);

可以同时使用多种动画方式，比如:transform: translate(200px) rotate(180deg) scale(1.5,0.5) skew(45deg)

animation:

首先记录关键帧：

@keyframes 动画名字{
          关键帧
}

然后在元素中写animation。

animation：时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名；

时长：s或找ms；

过渡方式：和transition取值相同，如linear；

次数：3或2.4或infinite；

方向：reverse|alternate|alternate-reverse；

填充模式：none|forwards|backwards|both

是否暂停：paused|running

以上为一些CSS的基本知识，如有疑问，请上MDN或者CSS tricks搜索。