居中在布局中居中是一个很重要的技巧，掌握居中技巧对于布局来说非常重要/*flexverticalcentering*/*{margin:0;填充：0；}.container{高度：100vh；/*重要语法*/display:flex;证明内容：居中；对齐项目：居中；}.item{宽度：200px；高度：200px；背景：绿色；行高：200px；文本对齐：居中；字体大小：40px；颜色：#ffffff；}inputinput[type="text"]{大纲：无；/*移除外边框*/padding:0;/*去除内边距*/}/*使用数字时，安卓下可以调出数字键盘，只能输入数字，苹果手机不可以。*/input[type="number"]{大纲：无；/*移除外边框*/padding:0;/*移除内边距*/-moz-appearance:textfield;/*移除向上和向下旋转按钮*/}input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit外观：无；/*移除顶部和底部的旋转按钮*/}/*Apple手机需要表单*/input[type="search"]::-webkit-search-cancel-button{display:none;/*删除小差异*/-webkit-appearance:textfield;/*去掉默认样式*/}background/***使用background-image指定多张图片，需要指定相关属性，比如position，repeat*/E{background-image:url(xxx.jpg),网址(xxx.png),...;/*图片路径*/background-position:00,1010,...;/*与图像路径相同*/background-repeat:no-repeat,repeat-x,repeat-y,...;/*与图片路径一致*/background:#fffurl(xxx.png)centerno-repeat;/*背景色和背景图的复合写法*/}box-shadow/**box-shadow:h-shadowv-shadowblurspreadcolorinset;*/E{盒子阴影:00;/*0表示没有偏移，四处散布*/box-shadow:0-2px00red,2px000red,02px00red,-2px000red;/*元素边框*/}1.h-shadow：所需水平阴影的位置。允许负值。[Positionrelativetonearestborder]2.v-shadow:必需。垂直阴影的位置。允许负值。[相对于最近边界的位置]3。模糊：可选。模糊长度[实际长度为给定长度的一半]4.spread：可选。阴影的大小。[可以是负值]5。颜色：可选。阴影的颜色。请参阅CSS颜色值。6.插图：可选。将外部阴影（开始）更改为内部阴影。注意：1、当h-shadow和v-shadow都为0时，表示没有偏移，也就是diffusionaround。2.blur：表示模糊长度，实际模糊距离为设定值的一半。3.设置指定边，主要是控制水平和垂直阴影的位置，可以分别指定每个方向阴影的位置4.可以用这个属性来代替border的border属性，优点就是阴影不占空间，不会出现动态效果移动font1.font-size-adjust:设置字体在字体小的时候更容易阅读。比如字体设置为100px，那么设置值为0.58，即字体小的时候为58px，这样显示更易读。2.-webkit-text-size-adjust手机默认auto，自动调整字体大小。一般情况下需要关闭这个功能，设置值为none或者100%，否则可能会导致样式问题。user-modifyuser-modify有三个属性值：只写（write-only）、读写（read-write）、只读（read-only），普通元素的editability和concentrededitable属性功能类似。使用时需要加上浏览器前缀。测试发现Firefox不支持visibility和opacity。不同的是，使用时，该属性设置为hidden，占用空间，但不影响事件的触发。比如一个使用了hidden属性的元素完全覆盖了另一个元素，被覆盖元素的事件依然正常触发。而它自己的事件是不会被触发的。通过设置visible属性显示元素flex来理解flex布局，首先要理解前两点：parentbox属性。父框中理解2个轴。Horizo??ntaldirectionflex-direction：该属性决定了主轴的方向（即item的排列方向）left-reverse：水平，倒序，right[主轴为水平方向，起点在右端]column：垂直，按元素顺序排列，[主轴为垂直，起点为在上边缘]column-reverse：垂直，倒序[主轴垂直，起点在下边缘]flex-wrap：默认情况下，项目沿一条线（又名“轴”）排列。flex-wrap属性定义了在轴不适合时如何换行。nowrap：（默认）不换行，盒子会自动调整wrap:wrap，第一行在wrap-reverse:wrap上面，第一行在flex-flow:||下面结合写法justify-content:属性定义item在主轴上的对齐方式，控制水平方向flex-start:左对齐flex-end:右对齐center:水平居中space-between:子元素等距自适应space-around：两端子元素之间的间距在垂直方向自适应align-items：属性定义item在横轴上如何对齐，控制垂直方向flex-start:topalignmentflex-end:bottomAlignmentcenter:垂直居中Baseline:文本低端对齐stretch:如果item没有设置height或者设置为auto，会占据整个容器的高度（默认值）align-content：该属性定义了多个轴的对齐方式。如果项目只有一个轴，则此属性无效。(多轴)，控制垂直方向flex-start：多轴对齐flex-end：多轴上下对齐center：多轴居中space-between：两端对齐，剩余空间平分第二：sub-boxattributeorder：指定元素权重，默认为0，权重越大，对应元素越靠后。使用时注意flex-direction的属性值flex-grow：定义item的放大比例，默认为0，即如果有剩余空间，则不放大。分配空间的权重，剩余空间按权重比例平分（注意是宽度，不包括padding和margin）flex-shrink：定义item的缩小比例，默认为1，也就是说，如果空间不足，物品就会缩小。值为0：不收缩flex-basis：定义item在分配多余空间之前占用的主轴空间（mainsize）。浏览器根据这个属性计算主轴是否有多余空间。它的默认值为auto，即项目的原始大小。flex：flex-grow、flex-shrink、flex-basis的简写，默认值为01auto。最后两个属性是可选的。align-self：该属性允许单个项目与其他项目具有不同的对齐方式，它可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，相当于stretch。【注意换行】auto：默认值flex-start：顶部对齐flex-end：底部对齐center：垂直居中baseline：文本基线对齐（设置所有项）其他1.去掉apple点击事件的灰色阴影：-webkit-tap-highlight-color:rgba(0,0,0,0);有些元素需要设置背景颜色。2.overflow出现省略号：white-space:nowrap;text-overflow:ellipsis;overflow:hidden;3.指定宽度数字不换行，需要指定换行属性：overflow:hidden;自动换行：断字；4.文字平滑：-webkit-font-smoothing:none：不抗锯齿；subpixel-antialiased（默认）：亚像素平滑通常用于MacOS和MacTypeForWindows；antialiased：灰度平滑，常用在Android、iOS等移动设备的滚动条中style::-webkit-scrollbar{width:6px;高度：7px；cursor:pointer!important;}::-webkit-scrollbar-thumb{border-radius:5px;框阴影：插入005pxrgba(0,0,0,.45)；背景：rgba(0,0,0,.45);}::-webkit-scrollbar-track{border-radius:0;背景：#fff；}::选择{背景：#2970ff；color:#fff;}自适应vardpr=window.devicePixelRatio||1;//密度varscale=1/dpr;//缩放比率varmetaEle=document.createElement('meta');varheadEle=document.querySelector('head');varrootEle=document.querySelector(':root');metaEle.setAttribute('名称','视口');metaEle.setAttribute('content','width=device-width,initial-scale='+scale+',maximum-scale='+scale+',user-scalable=no');headEle.appendChild(metaEle);(setFontSize=function(){rootEle.style.fontSize=document.documentElement.clientWidth/7.5+'px';})();window.addEventListener('resize',setFontSize);像素转换rem(function(screenRatioByDesign){screenRatioByDesign=screenRatioByDesign||16/9;//设计稿纵横比vardocEle=document.documentElement;functionsetHtmlFontSize(){varscreenRatio=docEle.clientWidth/docEle.clientHeight;//视觉窗口宽高比varfontSize=(screenRatio>screenRatioByDesign?(screenRatioByDesign/screenRatio):1)*docEidle;//将屏幕分成10部分docEle.style.fontSize=fontSize.toFixed(3)+"px";}setHtmlFontSize();window.addEventListener('resize',setHtmlFontSize)})();.rem(@name,@px){@{name}:unit(@px/1920*10,rem);//字体也分为10份}
