Judy-Lin

概述网格布局是最强大的CSS布局方案，主要用于页面的整体布局。可以将一个网页分成一个个网格，作出任意的组合。容器：采用网格布局的区域，就是容器。项目：容器内的子元素，就是项目。容器属性display: grid指定一个容器采用网格布局。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。rid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。gri

transition过渡简单动画通常称之为“过渡transition”。transition是CSS属性，通常表示为在一定时间内，从一个值变化为另一个值。transition-property：需要过渡的属性transition-duration：需要过渡的时间transition-timing-function：过渡的效果（快、慢）transition：是transition-property、transition-duration和transition-timing-function属性的缩写

雪碧图雪碧图即CSS Sprite，是把多个小图标合并在一张图片上，然后通过CSS背景定位来显示需要显示的图片部分。通过使用这种方法，可以减少加载网页图片时对服务器的请求次数，提高网页的加载速度。雪碧图的使用场景静态图片，不随用户信息的变化而变化。页面中的图标图片加载量比较大。雪碧图的操作步骤step1：设置标签的尺寸（宽、高），即雪碧图引用图片的尺寸step2：引用图片（以背景图方式）step3：设置背景图片的位置...

FlexFlex，全称Flexible Box，意为**“弹性布局”**，用来为盒状模型提供最大灵活性。Flex布局需要在一个容器中实现，容器中的元素就是项目。其中，主轴一般默认是x轴，交叉轴一般默认是y轴。设置“弹性布局”，让所有的子元素在一行显示，给display设置为flex，当前标签就为容器，其中的子元素为项目。容器的属性flex-direction 设置主轴方向取值：row 项目从左到右依次摆放(默认值)row-reverse 项目从右到左依次摆放column 项目从上到下依次摆放

BFC的解释BFC，全称Block Formatting Context，块级格式化上下文。它是一块独立渲染的区域，它规定了在该区域中，常规流块盒的布局。常规流块盒在水平方向上，必须撑满包含块，在垂直方向上依次摆放。BFC渲染区域1、根元素（html）2、浮动和绝对定位元素3、overflow不等于visible的块盒不同的BFC区域，它们进行渲染时，互不干扰。创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部。具体规则：创建BFC元素，它的自动高度需要计算浮动元素。创

盒子的分类不同的元素产生的盒子类型可能不同。一个元素，产生什么样的盒子取决于它的display。属性：display是否能继承：否默认值：inlinedisplay: none 不生成盒子display: block 块盒display: inline 行盒盒模型的组成部分margin：外边距，与其他盒子之间的距离。border：边框padding：内边距，边框与内容之间的距离。content：内容content可以设置尺寸width宽度、height高度min-width/

CSS简介CSS：Cascading Style Sheets，层叠样式表。用于定义网页的样式，该语言书写的代码通常会被浏览器解析执行。引用CSS1、引用外部样式表：引用独立的css文件，结构与样式相分离，便于复用和维护。格式：格式：2、引用内部样式表：将css所要写的代码写在HTML文档中。提高了浏览器解析效率，但是不利于程序员和搜索引擎阅读。3、引用行内样式表：css代码写在元素的style属性中。...