居中布局中居中是很重要的技术，掌握居中的技巧，对布局相当重要 /* flex 垂直 居中 */ *{ margin: 0; padding: 0; } .container{ height: 100vh; /* 重要语法 */ display: flex; justify-content: center; align-items: center; } .item{ width: 200px; height: 200px; background: green; line-height: 200px; text-align: center; font-size: 40px; color: #ffffff; }inputinput[type="text"] { outline : none; /* 去除外边框 */ padding : 0; /* 去除内边距 */}/* 使用 number 时，安卓下可以调出数字键盘，并且只能输入数字，苹果手机不可以。 */input[type="number"] { outline : none; /* 去除外边框 */ padding : 0; /* 去除内边距 */ -moz-appearance: textfield; /* 去除 上下自旋按钮 */}input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance: none; /* 去除 上下自旋按钮 */}/* 在苹果手机中需要 使用 form */input[type="search"]::-webkit-search-cancel-button{ display:none; /* 去除小差号 */ -webkit-appearance: textfield; /* 去除默认样式 */}background/*** 使用 background-image 可以指定多图片， 需要分别使用指定相关属性，如position、repeat */E{ background-image: url(xxx.jpg), url(xxx.png), ...; /* 图片路径*/ background-position: 0 0, 10 10, ...; /* 与图片路径一致 */ background-repeat: no-repeat, repeat-x, repeat-y, ...; /* 与图片路径一致 */ background: #fff url(xxx.png) center no-repeat; /* 背景色与背景图片 复合写法*/ }box-shadow/* * box-shadow: h-shadow v-shadow blur spread color inset; */E{ box-shadow: 0 0; /* 0 时表示不偏移，周围发散 */ box-shadow: 0 -2px 0 0 red, 2px 0 0 0 red, 0 2px 0 0 red, -2px 0 0 0 red; /* 元素边框 */}1. h-shadow : 必需。水平阴影的位置。允许负值。[ 相对于最近边界的位置 ]2. v-shadow : 必需。垂直阴影的位置。允许负值。[ 相对于最近边界的位置 ]3. blur : 可选。模糊长度 [ 实际长度是给定长度的一半 ]4. spread : 可选。阴影的尺寸。[ 可以为负值 ]5. color : 可选。阴影的颜色。请参阅 CSS 颜色值。6. inset : 可选。将外部阴影 (outset) 改为内部阴影。说明：1. h-shadow 与 v-shadow 都为 0 时表示不偏移，表示四周扩散2. blur : 表示模糊长度，实际模糊距离是设置值的一半3. 设置指定边，主要控制水平和垂直阴影的位置，可以分别指定每个个方向的阴影位置4. 可以使用该属性替代 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(只读)，用于普通元素的可编辑性和concenteditable属性功能类似。使用时需要加浏览器前缀。测试发现火狐并不支持visibility与opacity区别在于，当使用时属性设置为hidden，占据空间，但是不会影响事件的触发。比如一个使用了hidden属性的元素完全遮盖了另外的元素，被遮盖的元素事件依然正常触发。并且自己本身的事件不会触发。通过设置visible属性显示元素flex理解 flex 布局首先明白抓住2点第一：父盒子属性。在父盒子中理解 2 个轴。水平方向flex-direction : 属性决定主轴的方向（即项目的排列方向） row : 横向，按元素顺序，居左[主轴为水平方向，起点在左端] row-reverse ：横向，倒序，居右[主轴为水平方向，起点在右端] column ：纵向，按元素顺序，[主轴为垂直方向，起点在上沿] column-reverse : 纵向，倒序[主轴为垂直方向，起点在下沿]flex-wrap : 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行 nowrap : （默认）不换行，盒子会自适应 wrap : 换行，第一行在上方 wrap-reverse : 换行，第一行在下方flex-flow ：<flex-direction> || <flex-wrap> 合并写法justify-content : 属性定义了项目在主轴上的对齐方式，控制水平方向 flex-start : 左对齐 flex-end : 右对齐 center : 水平居中 space-between : 子元素间隔相等并自适应 space-around : 子元素两端间隔自适应 垂直方向align-items : 属性定义项目在交叉轴上如何对齐，控制垂直方向 flex-start : 上对齐 flex-end : 下对齐 center : 垂直居中 baseline : 文字低端对齐 stretch : 如果项目未设置高度或设为auto，将占满整个容器的高度( 默认值 )align-content ：属性定义了多根轴线的对齐方式。 如果项目只有一根轴线，该属性不起作用。( 多个轴 )，控制垂直方向 flex-start : 多轴上对齐 flex-end : 多轴上下对齐 center : 多轴居中 space-between ： 两端对齐，均分剩余空间第二：子盒子属性order : 指定元素权重，默认为 0，权重越大，对应的元素越靠后。在使用时注意 flex-direction 的属性值flex-grow ：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 分配空间的权重，按权重比均分剩余空间(注意是宽度，不包含 padding 和 margin )flex-shrink : 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 值为 0 ：不缩小flex-basis ：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小flex : 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。align-self : 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。[注意换行] auto ：默认值 flex-start ：上对齐 flex-end ：下对齐 center : 垂直居中 baseline : 文本基线对齐(设置所有的item)其他 1. 去除苹果点击事件的灰色阴影:-webkit-tap-highlight-color: rgba(0,0,0,0);有些元素需要设置背景色。 2. 溢出出现省略号 : white-space: nowrap;text-overflow: ellipsis;overflow: hidden; 3. 指定宽度数字不换行，需要指定换行属性：overflow:hidden; word-wrap:break-word; 4. 文字平滑：-webkit-font-smoothing：none: 无抗锯齿；subpixel-antialiased (default): 次像素平滑 常见于Mac OS和MacType For Windows；antialiased: 灰度平滑 常用于Android和iOS等移动设备的 滚动条样式 ::-webkit-scrollbar { width: 6px; height: 7px; cursor: pointer !important;}::-webkit-scrollbar-thumb { border-radius: 5px; box-shadow: inset 0 0 5px rgba(0,0,0,.45); background: rgba( 0, 0, 0, .45 );}::-webkit-scrollbar-track { border-radius: 0; background: #fff;}::selection { background: #2970ff; color: #fff;}自适应 var dpr = window.devicePixelRatio || 1; // 密度 var scale = 1 / dpr; // 缩放比 var metaEle = document.createElement('meta'); var headEle = document.querySelector('head'); var rootEle = document.querySelector(':root'); metaEle.setAttribute('name', 'viewport'); 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 );px 转换 rem(function(screenRatioByDesign){ screenRatioByDesign = screenRatioByDesign || 16 / 9; // 设计稿宽高比 var docEle = document.documentElement; function setHtmlFontSize(){ var screenRatio = docEle.clientWidth / docEle.clientHeight; // 可视窗口宽高比 var fontSize = ( screenRatio > screenRatioByDesign ? ( screenRatioByDesign / screenRatio ) : 1 ) * docEle.clientWidth / 10; // 将屏幕分成10份 docEle.style.fontSize = fontSize.toFixed( 3 ) + "px"; } setHtmlFontSize(); window.addEventListener( 'resize', setHtmlFontSize )})();.rem( @name, @px ){ @{name} : unit(@px / 1920 * 10, rem ); // 字体时同样分成10份 }
