css食用技巧

表格布局

父元素

display: table;
table-layout: fixed; /**为了限制超出表格宽度 **/
box-sizing: border-box;
width: 100%;

子元素

display: table-cell;
vertical-align: middle; /**定位位置 弹性居中 **/

• 表格布局内只有外padding才能撑开

子元素

display: table-cell;

如果内部是个图，需要外面加一层a标签
a标签的宽度和高度想撑起了就要用

height: 48px;
width: 48px;
box-sizing: border-box;
display: block;
margin: 0 auto;
position: relative;
left: auto;
top: auto;

内部的img需要设置为 display: block;

• display: table;会自动撑高2px；需要overflow: hidden;处理

块级布局

如果设置了块的宽度为100%
一定配合box-sizing: border-box;使用

width: 100%;
box-sizing: border-box;

可以让padding和边框都包裹在宽度里面

vertical-align: middle;
是个好标签，可以做到垂直水平居中

一行多余显示省略号

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

多行多余显示省略号 （2行）

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; 
line-clamp: 2;
-webkit-box-orient: vertical;

多行的隐藏需要额外加上min-height:xxpx;属性用于兼容ie
兼容ie的多余隐藏写法

&_div{
width: 100%;
position: relative;
line-height: 24px;
max-height:48px;
overflow: hidden;
}
div::after {
content: "...";
position: absolute;
bottom: 0;
right: 8px;
padding-left: 30px;
background: -webkit-linear-gradient(left, transparent, #fff 50%);
background: -o-linear-gradient(right, transparent, #fff 50%);
background: -moz-linear-gradient(right, transparent, #fff 50%);
background: linear-gradient(to right, transparent, #fff 50%);
}

inline-block

• inline-block 本身会在下方占据一点空白，默认不用居中对齐时，加上 vertical-align: top 消除掉
  所以 inline-block 需要和vertical-align: top 配合

display:inline-block;
vertical-align: top;

inline-block需要在父元素（非）inline-block处添加 font-size: 0

背景图片

背景图片默认设置居中啥的

width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;

默认的背景图标

width: 16px;
height: 16px;
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
background-position: inherit;
font-size: 0;
background-image: url("xxxx");

css选择器

:first-child //选第一个

:nth-child(2) //选第二个

:last-child //选最后一个

左定宽 右自适应布局

布局为：

<div class="content">
	<div class="left"></div>
	<div class="right"></div>
</div>

弹性布局

.content{
	display:flex;
}
.left{
	width: 200px;
	background-color: red;
	height: 100px;
}
.right{
	flex: 1;
	background-color: blue;
	height: 100px;
}

margin+float

.content{
}
.left{
	width: 200px;
	background-color: red;
	height: 100px;
	float: left;
}
.right{
	background-color: blue;
	height: 100px;
	margin-left: 200px;
}

position+margin

.content{
	position: relative; /** 可有可无看情况 **/
}
.left{
	width: 200px;
	background-color: red;
	height: 100px;
	position: absolute;
}
.right{
	background-color: blue;
	height: 100px;
	margin-left: 200px;
}

表格布局

.content{
	display: table;
	table-layout: fixed;
	box-sizing: border-box;
	width: 100%;
}
.left{
	width: 200px;
	background-color: red;
	height: 100px;
	display: table-cell;
	vertical-align: middle;
}
.right{
	background-color: blue;
	height: 100px;
	display: table-cell;
	vertical-align: middle;
}

ie兼容大法（浮动布局必加）

&::before{
	content: "";
	display: table;
}
&::after{
	clear: both;
	content: "";
	display: table;
}

输入框的属性

cursor-spacing:
类型：Number
指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离

auto-focus:true
类型：Boolean
自动聚焦，拉起键盘。如果你设置为true,那边你打开页面就会弹出键盘，这时可能会遮挡一些控件。
此功能即将废弃，尽量使用focus

focus:
类型：boolean
获取焦点

confirm-type
类型：boolean
设置键盘右下角按钮的文字，这个很有意思，可以根据需求填写

confirm-hold
类型：boolean
点击键盘右下角按钮时是否保持键盘不收起

事件穿透

阻止事件传播 - 点击事件添加
e.stopPropagation()

允许事件穿透 - 样式添加
pointer-events: none;

小于12px的字

transform: scale3d(0.83,0.83,1);

动画

无限旋转

animation:loading 1.2s linear infinite;
@keyframes loading
{
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

边框合并

border-collapse: collapse; //可以合并子元素的边框 
//仅仅只可在表格布局中使用

媒体查询

@media screen and (max-width: 1420px) {
    /** 小于1420 **/
}
@media screen and (min-width: 1790px) {
	/** 大于1790 **/
}

自动吸顶

position: sticky;

React dom事件获取原生的

event.nativeEvent

阴影

box-shadow: 0 4rpx 8rpx 0 rgba(3, 27, 80, 0.06);

ios手机底部适配

padding-bottom:15rpx;
padding-bottom:calc(15rpx + constant(safe-area-inset-bottom));
padding-bottom:calc(15rpx + env(safe-area-inset-bottom))

其他

1. 改写组件样式时，一定要用>去选择样式来改
2. …

待补充…