加载中...
PAGE

css食用技巧

Post on 2021-11-01 51 0

目录

表格布局

父元素

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

其他

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

待补充…

ubuntu16.04 mysql 设置权限 ERROR 1290(HY000)

ubuntu16.04 mysql 设置权限 ERROR 1290(HY000)

阅读更多
css 背景图片自适应属性整理

css 背景图片自适应属性整理

阅读更多
js 获取音乐的音频音谱

js 获取音乐的音频音谱

阅读更多

暂无评论

    发表评论
    返回顶部
    X