1.介绍层叠样式表（CSS）CSS描述了屏幕、纸张、音频和其他媒体上的元素应该如何呈现。样式定义HTML元素的显示方式。二。CSS的几个重要概念（一）DocumentflowNormalFlow的意思是：元素在文档中流动的方向Function：fromlefttoright：inlineelements：内联元素，span元素，full从左到右，知道这一行是排列的装满后，开始另一行；从上到下：块元素，div元素，从上到下排列，每个元素占一行，不会出现并排现象。这是指没有添加额外样式的情况。(2)marginmerging哪些情况会合并：parent-childmarginmerging:parentandfirstchildandlastchildmarginmergingbrothermarginmerging:childrenwillalsomergeHowtopreventmerging:parent-childmergingusepadding/bordertoblockparent-childmerging和overflow-hiddenblocks父子组合与display:flex兄弟组合符合预期。兄弟组合可以用inline-block消除(3)两种框模型为：content-boxcontentbox-contentistheboxborderborder-boxborderbox-borderonly就是框边界公式：content-boxwidth=contentwidthborder-boxwidth=contentwidth+padding+border3.CSS布局(1)固定宽度布局原则：一般宽度为960/1000/1024px(2)不固定宽度布局原则：布局主要以文档流转，适用于手机端。(3)响应式布局原则：电脑端宽度固定，手机端不固定。它也是一种混合布局。(4)float布局用法：给子元素添加float：left或width；给父元素添加.clearfix.clearfix:after{content:'';display:block;clear:both;}（5）Flex布局flex容器样式属性：让一个元素成为一个flex容器。container{display:flex;或inline-flex;}更改wrapping.container{flex-wrap:nowrap;裹;wrap-reserve;}principalflowmode.container{justify-content:flex-start;flex-end;}副轴Align.container{align-items:stretch;flex-start;}多行content.container{align-content:flex-start;flex-end;}flexitemstyle属性:addorderabovetheitem:改变item上方的显示顺序addflex-grow:控制你如何增重flex-shrink:控制你如何变瘦flex-basis:控制基础宽度flex-grow:1;/flex-shrink:0/flex-basis:100px;缩写flex:10100px;(Navigation一般为0)align-self自定义align-items，对齐方式和其他的不一样。(6)网格布局原理：二维布局（水平和垂直同时布局）使用网格布局，一维布局（水平或垂直布局）使用flex）网格容器样式属性：makean将元素放入网格container.container{display:grid;inline-grid;}rowsandcolumns.container{grid-template-columns:40px50pxauto50px40px;grid-template-rows:25%100pxauto;}可以给每行一个名字.container{grid-template-columns:[first]40px[line2]50px[line3]auto[col4-start]50px[five]40px[end];grid-template-rows:[row1-start]25%[row1-end]100px[third-line]auto[last-line];}每行命名后，可以让item设置范围分区grid-template-areas.item-a{grid-area:header;}.item-b{grid-area:main;}.item-c{grid-area:footer;}gapgrap.container{grid-template-columns:100px50px100px;grid-template-rows:80pxauto80px;grid-column-grap:10px;grid-rwo-grap:10px;}四。CSS定位CSS定位：一层div，布局在屏幕平面上，定位垂直于onscreenposition属性：static：默认值，但不等于不写；relative：相对定位，用于平移或父级到绝对；absolute：绝对定位，用于对话框关闭按钮或鼠标提示；fixed：固定定位，基准是视点（viewport），用于返回顶部按钮或广告；sticky：粘性定位，适合导航；五。CSS动画（一）transformtranslate位移transform:translate(
