css食用技巧

àì夳堔傛蜴生んèń 2023-02-24 14:24 9阅读 0赞

### 目录 ###

*   *  表格布局
     *  块级布局
     *  inline-block
 *  背景图片
 *   *  css选择器
     *  左定宽 右自适应布局
     *   *  弹性布局
         *  margin+float
         *  position+margin
         *  表格布局
     *  ie兼容大法（浮动布局必加）
     *  输入框的属性
     *  事件穿透
     *  小于12px的字
     *  动画
     *   *  无限旋转
     *  边框合并
     *  媒体查询
     *  自动吸顶
 *  React dom事件获取原生的
 *   *  阴影
     *  其他

## 表格布局 ##

父元素

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 //选最后一个

## 左定宽 右自适应布局 ##

布局为：

### 弹性布局 ###

.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);

## 其他 ##

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