css初始化
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,a {margin:0;padding:0;}
em,strong,th {font-style:normal;font-weight:normal;}
h1,h2,h3,h4,h5,h6,strong {font-weight:bold;}
input,textarea,select {font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select {*font-size:100%;}
input,textarea {outline:none;-webkit-appearance:none;}
textarea {resize:vertical;}
ul,li,ol {list-style:none;}
q:before,q:after {content:'';}
table {border-collapse:collapse;border-spacing:0;}
em,strong,th {font-style:normal;font-weight:normal;}
a,input {-webkit-tap-highlight-color:transparent;color:#333;text-decoration:none;}
.clearfloat:after {visibility:hidden;clear:both;display:block;height:0;content:"";font:0px/0px sans-serif;}
.clearfloat {zoom:1;}/* 清除浮动 */
.flex {display:-webkit-box;display:flex;justify-content:space-around;}
.flex_item {-webkit-box-flex:1;flex:1;}/* flex布局 */
/* set html5 elements to block */
html {overflow-y:scroll;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;}/* font-size:625%等于font-size:100px */
body,button,input,select,textarea {font-family:"STHeiti","Microsoft YaHei",Helvetica,Arial,sans-serif;font-size:0.28rem;color:#5a5a5a;background-color:#f5f5f5;}
img {border:0 none;width:auto\9;height:auto;max-width:100%;vertical-align:top;-ms-interpolation-mode:bicubic;}
label {cursor:text;}
input::-webkit-input-placeholder {font-weight:300 !important;}
input:-moz-placeholder {font-weight:300 !important;}
input::-moz-placeholder {font-weight:300 !important;}
input:-ms-input-placeholder {font-weight:300 !important;}
匀速滚动样式
html,body{
scroll-behavior:smooth;
}
字体间隔
li{
letter-spacing:2px;
}
英文数字自动换行
word-wrap:break-word;
word-break:break-all;
字体溢出处理
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width:100px;
<!--多行-->
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
宽高的计算属性
height: calc(100vh - 60px);
三角
第一种
<div class="sanjiao"></div>
.sanjiao{
border:10px solid transparent;
border-left:10px solid #f40;
}
伪三角形
::after{
content:'';
position: absolute;
top: 6rem;
right: -12rem;
width: 0;
height: 0;
border-top:6rem solid transparent;
border-bottom:6rem solid transparent;
border-left:6rem solid #ececec;
}
伪空心箭头
::after{
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-top: 1px solid #656565;
border-right: 1px solid #656565;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
伪元素圆
&:after {
content: ' ';
position: absolute;
right: -4px;
top: -2px;
width: 8px;
height: 8px;
background-color: red;
border-radius: 4px;
}
鼠标指针
/*正常选择*/
cursor:default
/*手指形状*/
cursor:pointer
/*禁用*/
cursor: not-allowed;
cursor : auto | crosshair | default | hand | move | help | wait | text | w-resize |s-resize | n-resize |e-resize | ne-resize |sw-resize | se-resize | nw-resize |pointer | url (url)
不常用css
/*去掉video的默认控制器*/
video::-webkit-media-controls{display:none !important}
/*去掉点击出现的背影框*/
-webkit-tap-highlight-color:rgba(0,0,0,0)
/*清除input button textarea的默认样式*/
-webkit-appearance:none
/*字体*/
font-family:"STHeiti","Microsoft YaHei",Helvetica,Arial,sans-serif;
/*设置placeholder的样式 */
input::-webkit-input-placeholder{}
/*消除google浏览器黄色框*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
box-shadow:0 0 0 60px #eee inset;
-webkit-text-fill-color: #878787;
}
/*让input失去事件后改变样式*/
input[disabled]{
opacity:1;
background:transparent;
}
/*设置input在移动端有圆角问题*/
border-radius: 0;
/*属性 input:-webkit-autofill 导致chrome的输入框背景颜色变成黄色*/
autocomplete="off"
css命名空间
布局：以g开头，g-wrap、g-header、g-content
状态：以s开头，表示动态的，具有交互性质的状态，s-current、s-selected
工具：以u开头，表示不耦合业务逻辑的、可复用的工具，u-clearfix、u-ellipsis
组件：以m开头,表示可复用，移植的组件模块，m-slider、m-dropMenu
钩子：以j开头，表示特定给javascript调用的类名，j-request、j-open
文字渐变
background: linear-gradient(to right, #f699d8, #0b97f4);
-webkit-background-clip: text;
color: transparent;
浏览器滚动条
element是设置overflow-y: auto;的元素
/*隐藏滚动条*/
element::-webkit-scrollbar { display: none; }
/*整体部分*/
element::-webkit-scrollbar{width，height}
/*滑动部分*/
element::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0px;
background: rgba(0,0,0,0.1);
}
/*滑块*/
element::-webkit-scrollbar-thumb{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
/*滑块效果*/
element::-webkit-scrollbar-thumb:hover{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
}
居中布局
水平居中
display:inline-block + text-align
原理: 先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。
用法: 对子框设置display:inline-block，对父框设置text-align:center。
优点: 兼容性好，甚至可以兼容ie6、ie7
缺点: child里的文字也会水平居中，可以在.child添加text-align:left;还原
display:table + margin
原理: 先将子框设置为块级表格来显示（类似 ），再设置子框居中以达到水平居中。
用法: 对子框设置display:table;再设置margin:0 auto;
优点: 只设置了child，ie8以上都支持
缺点: 不支持ie6、ie7,将div换成table
absolute + transform
原理: 将子框设置为绝对定位，移动子框，使子框左侧距离相对框左侧边框的距离为相对框宽度的一半，再通过向左移动子框的一半宽度以达到水平居中。当然，在此之前，我们需要设置父框为相对定位，使父框成为子框的相对框。
用法: 对父框设置position:relative;对子框设置 position:absolute;left:50%;transform:translateX(-50%);
优点: 居中元素不会对其他的产生影响
缺点: transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀
display:flex + margin
原理: 通过CSS3中的布局利器flex将子框转换为flex item，再设置子框居中以达到居中。
用法: 先将父框设置为display:flex;再设置子框margin:0 auto;
缺点: 低版本浏览器(ie6 ie7 ie8)不支持
display:flex + justify-content
原理: 通过CSS3中的布局利器flex中的justify-content属性来达到水平居中。
用法: 先将父框设置为display:flex;再设置justify-content:center;
优点: 设置parent即可
缺点: 低版本浏览器(ie6 ie7 ie8)不支持
垂直居中
display:table-cell + vertical-align
#需要有固定高度
原理: 通过将父框转化为一个表格单元格显示（类似 <td> 和 <th>），再通过设置属性，使表格单元格内容垂直居中以达到垂直居中。
用法: 将父框设置为display:table-cell;vertical-align:middle;
优点: 兼容性较好，ie8以上均支持
absolute + transform
原理: 类似于水平居中时的absolute+transform原理。将子框设置为绝对定位，移动子框，使子框上边距离相对框上边边框的距离为相对框高度的一半，再通过向上移动子框的一半高度以达到垂直居中。当然，在此之前，我们需要设置父框为相对定位，使父框成为子框的相对框。
用法: 先将父框设置为position:relative; 再设置子框 position:absolute;top:50%;transform:translateY(-50%);
优点: 居中元素不会对其他的产生影响
缺点: transform属于css3内容，兼容性存在一定问题，高版本浏览器需要添加一些前缀
display:flex + align-items
原理: 通过设置CSS3中的布局利器flex中的属性align-times，使子框垂直居中。
用法: 先将父框设置为display:flex，再设置align-items:center。
优点: 只设置parent
缺点: 低版本浏览器(ie6 ie7 ie8)不支持
水平垂直居中
absolute + transform
用法：父元素 position:relative;
让后子元素 position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
inline-block + text-align + table-cell + vertical-align
用法: 对父框设置text-align:center，display:table-cell，vertical-align:middle。
对子框设置display:inline-block。
兼容性好
flex+justify-content+align-items
用法: 父元素，display:flex;justify-content:center;align-items:center;
多列布局(定宽 + 自适应)
float+overflow
原理: 通过将左边框脱离文本流，设置右边规定当内容溢出元素框时发生的事情以达到多列布局。
用法: 先将左框设置为float:left、width、margin-left，再设置实际的右框overflow:hidden。
优点: 简单
缺点: 不支持ie6
float+margin
原理: 通过将左框脱离文本流，加上右框向右移动一定的距离，通过向右框添加一个父框，再加上设置左、右父框属性使之产生BFC以去除bug。以达到视觉上的多列布局。
用法: 先将左框设置为float:left、margin-left，position:relative，再设置右父框float:right、
width:100%、 margin-left，最后设置实际的右框margin-left。
优点: 简单，易理解
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="rigth-fix">
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</div>
.left {
float: left;
width: 100px;
position: relative;
}
.right-fix {
float: right;
width: 100%;
margin-left: -100px;
}
.right {
margin-left: 120px;
}
table
原理: 通过将父框设置为表格，将左右边框转化为类似于同一行的td，从而达到多列布局。
用法: 先将父框设置为display:table、width:100%、table-layout:fixed，再设置左右框display:table-cell，最后设置左框width、padding-right。
flex
原理: 通过设置CSS3布局利器flex中的flex属性以达到多列布局。
用法: 先将父框设置为display:flex;在设置左框width、margin-right;在设置右框为 flex:1;
优点: flex很强大
缺点: 兼容性存在一定问题，性能存在一定问题
全屏布局
position
原理: 将上下部分固定，中间部分使用定宽+自适应+两块高度一样高。
<div class="parent">
<div class="top">top</div>
<div class="left">left</div>
<div class="right">
<div class="inner">right</div>
</div>
<div class="bottom">bottom</div>
</div>
html,body,.parent {margin: 0;height: 100%;overflow: hidden;}
body {color: white;}
.top {position: absolute;top: 0;left: 0;right: 0;height: 100px;background: blue;}
.left {position: absolute;left: 0;top: 100px;bottom: 50px;width: 200px;background: red;}
.right {position: absolute;left: 200px;top: 100px;bottom: 50px;right: 0;
background: pink;overflow: auto;}
.right .inner {min-height: 1000px;}
.bottom {position: absolute;left: 0;right: 0;bottom: 0;height: 50px;background: black;}
flex
原理: 通过灵活使用CSS3布局利器flex中的flex属性和flex-direction属性以达到全屏布局。
<div class="parent">
<div class="top">top</div>
<div class="middle">
<div class="left">left</div>
<div class="right">
<div class="inner">right</div>
</div>
</div>
<div class="bottom"> bottom</div>
</div>
html,body,.parent {margin: 0;height: 100%;overflow: hidden;}
body {color: white;}
.parent {display: flex;flex-direction: column;}
.top {height: 100px;background: blue;}
.bottom {height: 50px;background: black;}
.middle {flex: 1;display: flex;}
.left {width: 200px;background: red;}
.right {flex: 1;overflow: auto; background: pink;}
.right .inner {min-height: 1000px;}
动画
js实现（帧动画）如：setTimeout，setTimeout
css3实现（补间动画）如：transition，animation
transition(过度)
/*组合写法*/
transition:all 1s linear 1s
/*拆分写法*/
transition-property: none|all| property; -----过度的属性名
transition-duration: time;-----过渡效果花费的时间
transition-timing-function:------过渡效果的时间曲线
linear ----------------------匀速运动
ease------------------------慢速开始，然后变快，然后慢速结束的过渡效果
ease-in---------------------以慢速开始的过渡效果
ease-out-------------------以慢速结束的过渡效果
ease-in-out----------------以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n); -----
transition-delay: time; ----- 过渡效果何时开始
animation(动画)
/*用法*/
@keyframes animationName {keyframes-selector {css-styles;}}
nimationName-----动画名
keyframes-selector-----动画持续时间的百分比
合法值：0-100% from (和0%相同) to (和100%相同)
css-styles-----一个或多个合法的CSS样式属性
animation:
name-----指定要绑定到选择器的关键帧的名称
name-----动画名
none-----指定有没有动画（可用于覆盖从级联的动画）
duration -----动画指定需要多少秒或毫秒完成
time------动画播放完成花费的时间
timing-function-----设置动画将如何完成一个周期
linear-----匀速运动
ease-----动画以低速开始，然后加快，在结束前变慢。
ease-in-----动画以低速开始。
ease-out-----动画以低速结束。
ease-in-out-----动画以低速开始和结束。
delay -----设置动画在启动前的延迟间隔
time-----动画开始前等待的时间
iteration-count -----动画的播放次数
n-----一个数字，定义应该播放多少次动画
infinite-----动画应该播放无限次（永远）
direction -----是否应该轮流反向播放动画。
normal-----默认值。动画按正常播放。
reverse----- 动画反向播放。
alternate-----动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse-----动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
fill-mode -----当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
none-----动画在动画执行之前和之后不会应用任何样式到目标元素
forwards-----在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards-----
both-----动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
play-state;-----动画是否正在运行或已暂停。
paused-----暂停动画
running-----正在运行的动画
transform(转换，位移)
transform：
translate(x,y)-----移动
translate3d(x,y,z)
translateX(x)
translateY(y)
translateZ(z)
rotate()-----旋转
rotate3d(x,y,z,angle)
rotateX(angle)
rotateY(angle)
rotateZ(angle)
scale()-----缩放
scale3d(x,y,z)
scaleX(x)
scaleY(y)
scaleZ(z)
skew()-----倾斜
skew(x-angle,y-angle)
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
默认的转换原点在中心，可以用transform-origin改变原点
transform-origin:
x-axis
left center right length %
y-axis
top center bottom length %
z-axis;
length
@媒体查询
@media screen and (max-height: 647px) and (min-height: 520px){}
移动端
touch-action 用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)。
auto
当触控事件发生在元素上时，由浏览器来决定进行哪些操作，比如对viewport进行平滑、缩放等。
none
当触控事件发生在元素上时，不进行任何操作。
pan-x
启用单指水平平移手势。可以与 pan-y 、pan-up、pan-down 和／或 pinch-zoom 组合使用。
pan-y
启用单指垂直平移手势。可以与 pan-x 、pan-left 、pan-right 和／或 pinch-zoom 组合使用。
manipulation
浏览器只允许进行滚动和持续缩放操作。任何其它被auto值支持的行为不被支持。启用平移和缩小缩放手势，但禁用其他非标准手势，例如双击以进行缩放。 禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。 这是“pan-x pan-y pinch-zoom”（为了兼容性本身仍然有效）的别名。
pan-left, pan-right,pan-up,pan-down
启用以指定方向滚动开始的单指手势。 一旦滚动开始，方向可能仍然相反。 请注意，滚动“向上”（pan-up）意味着用户正在将其手指向下拖动到屏幕表面上，同样 pan-left 表示用户将其手指向右拖动。 多个方向可以组合，除非有更简单的表示（例如，“pan-left pan-right”无效，因为“pan-x”更简单，而“pan-left pan-down”有效）。
pinch-zoom
启用多手指平移和缩放页面。 这可以与任何平移值组合。
