CSS布局 和 CSS动画笔记

ade想吃油麦菜
441 阅读8分钟

CSS布局

  1. 固定宽度布局

  2. 不固定宽度布局

  3. 响应式布局

float布局(更多看 05float布局.html)

最初，引入 float 属性是为了能让 web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边。你可能在报纸版面上看到过。

小贴士

留一些空间或者最后一个不设置width。或者只设置max-width。

float布局做不了响应式

IE 6/7存在双倍 margin bug

​ 方法一：针对IE 6/7把margin减半

​ 方法二 ：加一个display: inline-block

图片与背景图有差距 用 vertical-align : middle;

float 二栏布局

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            width: 90%;
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }
        
        div:nth-of-type(1) {
            width: 48%;
            float: left;
        }
        
        div:nth-of-type(2) {
            width: 48%;
            float: right;
        }
    </style>
</head>

<body>

    <h1>2栏布局</h1>
    <div>
        <h2>First column</h2>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit
            amet.
        </p>
    </div>

    <div>
        <h2>Second column</h2>
        <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor,
            sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus.
        </p>
    </div>

float 三栏布局

float 四栏布局

loat 平均布局

float平均布局 的时候 如果 里面的盒子的超出了父盒子的大小 就可以在他们的上层在添加一个盒子 用负的margin来让他们在一行平均分配。

还可直接用最原始的办法 直接用nth-chlid 清除想去掉的边距。看清楚是外边距 还是内边距

	.image:nth-child(1) {
            margin-left: 0;
        }

负margin案例如下：

<style>
        .images {
            outline: 1px solid red;
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .images .image {
            height: 200px;
            width: 191px;
            background-color: bisque;
            float: left;
            margin-right: 12px;
        }
        
        .x {
            margin-right: -12px;
        }
    /* 或者直接用nth-chlid 清除最后一行孩子的右边距*/
</style>
<body>
    <div class="images clearfix">
        <div class="x">
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
            <div class="image"></div>
        </div>
    </div>
</body>

清楚浮动的方法

方法一 结尾处加空div标签 clear:both

    <style>
        .box {
            background: blue;
        }
        
        .left {
            background: red;
            float: left;
            height: 100px;
            width: 200px;
        }
        
        .right {
            background: pink;
            float: right;
            height: 100px;
            width: 200px;
        }
        
        .clear {
            clear: both;
        }
    </style>

    <body>
        <div class="box">
            <div class="left">Left</div>
            <div class="right">Right</div>
            <div class="clear"></div>
    </body>

方法二 父级div定义 伪类:after (常用这个)

.clear{zoom:1;}/*为解决ie6,ie7浮动问题*/
.clear:after{  
  display:block;
  clear:both;
  content:"";
}

方法三 父级div定义 overflow:hidden/auto

原理：

  1. 必须定义width或zoom:1,同时不能定义height，使用overflow:hidden/auto时，浏览器会自动检查浮动区域的高度.

缺点：

  1. overflow:hidden:不能和position一起用，因为超出的尺寸的会被隐藏。
  2. overflow:auto:内部宽高超过父级div时，会出现滚动条。
<style>
        .box {
            background: red;
            overflow: hidden;
        }
        
        .left {
            background: blue;
            float: left;
            height: 100px;
            width: 40%;
        }
        
        .right {
            background: pink;
            float: right;
            height: 100px;
            width: 50%;
        }
    </style>

    <body>
        <div class="box">
            <div class="left">Left</div>
            <div class="right">Right</div>
        </div>
        123
    </body>

flex布局

详细知识推荐 阮一峰 的 Flex 布局教程：语法篇 博客 （侵权删除）

container样式

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

主轴 flex-direction 主轴一旦定义 另一各轴就是交叉轴

flex-direction 控制item的流动方向

  1. row 从左往右

  2. row-reverse 从右往左

  3. column 从上往下

  4. column-reverse 从下往上

justify-content 主轴对齐方向

  1. flex-start 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。
  2. flex-end 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。
  3. center 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
  4. space-around 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
  5. space-between 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。

align-items 次轴对齐方向 align-content 有多行的时候对齐方向

  1. flex-start 元素向侧轴起点对齐。
  2. flex-end 元素向侧轴终点对齐。
  3. center 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。

flex-wrap 换行

  1. nowrap 不换行
  2. wrap 换行，第一行在上方
  3. wrap-reverse 换行，第一行在下方
 <style>
        .container {
            display: flex;
            /* display: inline-flex; */
            border: 1px solid red;
            /* 列表示 */
            flex-direction: row;
            /* 
            flex-direction 控制item的流动方向 
            row 从左往右 
            row-reverse 从右往左
            column 从上往下
            column-reverse 从下往上
              */
            /* flex-wrap 是否换行
            wrap-revers 翻折
              */
            flex-wrap: nowrap;
            /*  justify-content 主轴对齐方向 */
            justify-content: flex-start;
            /*  align-items  次轴对齐方向 */
            align-items: flex-start;
            /*   align-content 有多行的时候 */
            align-content: flex-start;
        }
        
        .item {
            width: 50px;
            border: 1px solid blueviolet;
        }
        
        .item-a {
            height: 30px;
        }
        
        .item-b {
            height: 60px;
        }
        
        .item-c {
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item item-a"></div>
        <div class="item item-b"></div>
        <div class="item item-c"></div>
    </div>
</body>

让item盒子垂直居中

            display: flex;
            justify-content: center;
            align-items: center;

item 样式

详细知识推荐 阮一峰 的 Flex 布局教程：语法篇 博客 （侵权删除）

6个属性设置item上。

order

flex-grow

flex-shrink

flex-basis

flex

align-self

以下引用：

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0 ；可以为正数或负数。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小.

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

小贴士：完成青蛙小游戏对flex布局更加的深刻

<style>
        .container {
            display: flex;
            border: 1px solid red;
        }
        
        .item {
            border: 1px solid blue;
            width: 150px;
            height: 50px;
            margin: 0 5px;
        }
        /* order 从小到大排列  */
        /* 用来分配多余的空间 flex-grow: 0; 可以不写 */
        /* flex-shrink 空间不够指定某个盒子变瘦  
        0 不变瘦 
        1一起变瘦 
        大于1 当缩小到小于item盒子的总宽时 将自己的空间分给别人 */
        /* align-self 给加了这个属性的特立独行 */
        
        .item:first-child {
            order: 100;
            flex-shrink: 1;
        }
        
        .item:nth-child(2) {
            order: 1;
            flex-shrink: 5;
        }
        
        .item:last-child {
            order: 2;
            flex-shrink: 1;
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>

grid布局

详解见链接 引用阮一峰的一篇博客（侵权删除）

display: grid

grid-template-columns 定义每一列的列宽

grid-template-rows 属性定义每一行的行高

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。同时还可以和像素 一起使用

grid-row-gap 属性设置行与行的间隔

grid-column-gap 属性设置列与列的间隔

grid-gap 属性是grid-column-gap和grid-row-gap的合并简写形式

grid-template-areas 属性 用于定义区域 在子元素上grid-area 连用 。

小贴士

设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .container {
            min-height: 100vh;
            display: grid;
            grid-row-gap: 10px;
            grid-column-gap: 10px;
            grid-template-columns: 60px auto 60px;
            grid-template-rows: 100px auto 100px;
            grid-template-areas: 
                "header header header"
                "aside main ad" 
                "footer footer footer";
        }
        
        .container>* {
            border: 1px solid red;
        }
        
        .container>header {
            grid-area: header;
        }
        
        .container>aside {
            grid-area: aside;
        }
        
        .container>main {
            grid-area: main;
        }
        
        .container>.ad {
            grid-area: ad;
        }
        
        .container>footer {
            grid-area: footer;
        }
    </style>
</head>

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

CSS定位

详细知识： 阮一峰 的 CSS 定位详解 博客 （侵权删除）

position的属性

小贴士

不要写 z-index:9999;

absolute 相对于祖先元素中最近的一个定位元素决定的 除了 static。

不要再移动端使用 fixed。

static默认值，待在文档流里

relative相对定位，升起来，但不脱离文档流

absolute绝对定位，定位基准是祖先里的非static

fixed固定定位，定位基准是viewport (有诈)

sticky粘滞定位，适用于导航

层叠上下文

相关知识链接：点击这里那些属性能创建上下层叠。z-index / flex / opacity / transform 会创建层叠上下文

div的分层

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .container {
            border: 1px solid red;
            height: 200px;
            position: relative;
        }
        
        .a {
            position: relative;
            z-index: 0;
            border: 1px solid red;
        }
        
        .a2 {
            position: relative;
            z-index: 10;
            height: 200px;
            width: 200px;
            background-color: aquamarine;
        }
        
        .b2 {
            position: relative;
            top: -20px;
            z-index: 5;
            height: 200px;
            width: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <!-- z-index:auto 不创建层叠上下文
        z-index:1/2/3/-1/-2/-3 创建层叠上下文 -->

    <!--
        如果 a b 没有设置 z-index 也就是没有创建层叠上下文.
        而 a2 b2 设置了z-index 就会在 container里面的世界相比层级 .
        如果a b  设置了z-index  也就是创建层叠上下文.
        就会在container 小世界里面对比 a b 的层级
        a2 b2 不参与container小世界的层级对比
    -->
    <!-- container是一个小世界  -->
    <div class="container">
        <!-- a是一个小世界 -->
        <div class="a">
            <div class="a2">相对于a的层级是10</div>
        </div>
        <!-- b是一个小世界 -->
        <div class="b">
            <div class="b2">相对于a的层级是5</div>
        </div>
    </div>
</body>

CSS动画

详细知识了解 ： 点击这里

动画是由许多静止的画面组成的（帧）

动画原理

    <style>
        .demo {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: relative;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="demo"></div>
</body>
<script>
    // 动画原理
    var n = 1;
    var demo = document.querySelector('.demo');
    var id = setInterval(function() {
        if (n <= 200) {
            demo.style.left = n + 'px';
            n += 1;
        } else {
            clearInterval(id);
        }
    }, 1000 / 60)
</script>

据CSS构建CSS树(CSSOM)

  1. 将两棵树合并成一颗渲染树(render tree)
  2. Layout布局(文档流、盒模型、计算大小和位置)
  3. Paint绘制(把边框颜色、文字颜色、阴影等画出来)
  4. Composite合成(根据层叠关系展示画面)

三种更新方式

transform属性

详细知识：点击这里

位移translate

    <style>
        .demo {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            transition: all 1s linear;
        }
        
        .demo:hover {
            /* transform: translateX(200px); */
            /* transform: translateY(50px); */
            /*  transform: translateZ(-200px);*/
           /* transform: translate(20px, 50px); */
            transform: translateX(50%);
            /* 向右位移自生的50% */

        }
        
        .w {
            perspective: 1000px;
            /* 视点 距离中心 1000px*/
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="w">
        <div class="demo"></div>
    </div>

居中小贴士

		{	left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
		}

缩放scale

    <style>
        #demo {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 50px;
            transition: all 1s linear;
        }
        
        #demo:hover {
            /* transform: scaleX(1.5); */
            /* transform: scaleY(1.5); */
            transform: scale(1.5, 0.5);
        }
    </style>
	</head>

	<body>
        <div class="wrapper">
            <div id="demo"></div>
        </div>
	</body>

旋转rotate

    <style>
        #demo {
            width: 100px;
            height: 200px;
            border: 1px solid red;
            margin: 50px;
            transition: all 1s linear;

        }
        
        #demo:hover {
            transform: rotateZ(45deg);
           /* transform: rotate3d(1, 1, 1, 45deg);*/
        }
        
        .wrapper {
            perspective: 1000px;
        }
    </style>
	</head>

    <body>
        <div class="wrapper">
            <div id="demo"></div>
        </div>
    </body>

倾斜skew

<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
        #demo {
            width: 100px;
            height: 200px;
            border: 1px solid red;
            margin: 50px;
            transition: all 1s linear;
        }
        
        #demo:hover {
            transform: skewX(15deg);
        }
        
        .wrapper {
            perspective: 1000px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div id="demo"></div>
    </div>
</body>

transition过渡

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

transition: left 200ms linear

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

transition: left 200ms, top 400ms

可以用all代表所有属性

transition: all 200ms

    <style>
        #demo {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 50px;
            transition: transform 1s linear;
        }
        
        #demo.b {
            transform: translateX(200px);
        }
        
        #demo.c {
            transform: translateX(200px) translateY(100px);
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div id="demo"></div>
        <button id=button>开始</button>
    </div>
</body>
<script>
    button.onclick = () => {

        demo.classList.add('b')
        setTimeout(() => {
            demo.classList.remove('b')
            demo.classList.add('c')
        }, 1000)
    }
</script>

CSS动画优化

详细知识：点击这里

  1. 降低选择器的复杂性；使用以类为中心的方法，例如 BEM。
  2. 减少必须计算其样式的元素数量。
  3. 尽可能避免布局操作
  4. 避免强制同步布局和布局抖动；先读取样式值，然后进行样式更改
  5. 降低绘制的复杂性
  6. 减少绘制区域
  7. 提升移动或淡出的元素
  8. 坚持使用 transform 和 opacity 属性更改来实现动画。
  9. 使用 will-change 或 translateZ 提升移动的元素。
  10. 避免过度使用提升规则；各层都需要内存和管理开销。
  11. 坚持使用 transform 和 opacity 属性更改来实现动画。
  12. 使用 will-change 或 translateZ 提升移动的元素。
  13. 避免过度使用提升规则；各层都需要内存和管理开销。

资料来源：饥人谷、阮一峰

本文为贰贰的原创文章，著作权归本人和饥人谷所有，转载务必注明来源

avatar
文章
阅读
粉丝
相关推荐
最强大的 CSS 布局 —— Grid 布局
178k阅读
 · 
2.5k点赞
CSS 奇思妙想边框动画
58k阅读
 · 
2.5k点赞
几种常见的CSS布局
41k阅读
 · 
560点赞
如何用 CSS 中写出超级美丽的阴影效果
1.2m阅读
 · 
1.2k点赞
灵活运用CSS开发技巧
179k阅读
 · 
5.1k点赞
CSS 栅格化布局
5.3k阅读
 · 
39点赞
巧用 CSS 实现酷炫的充电动画
50k阅读
 · 
1.9k点赞
css经典布局——圣杯布局
10k阅读
 · 
102点赞
奇思妙想 CSS 文字动画
15k阅读
 · 
698点赞

友情链接：