布局

SunSeekerX ... 2020年4月15日 06:46 大约 2 分钟

# 布局

只推荐阮一峰的教程,很用心,每一个效果都有图片。结合开发实例很好理解上手。

# flex 布局

Flex 布局教程:语法篇 (opens new window) By 阮一峰

Flex 布局教程:实例篇 (opens new window) By 阮一峰

Flexbox 布局的最简单表单 (opens new window) By 阮一峰

# Grid 布局

CSS Grid 网格布局教程 (opens new window) By 阮一峰

# 代码块

# 01.css 禁用鼠标事件

.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}
1
2
3
4
5

# 02.css 禁止用户选择

body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
1
2
3
4
5
6
7
8

# 03. 如何修改 chrome 记住密码后自动填充表单的黄色背景 ?

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background-color: rgb(250, 255, 189); /* #FAFFBD; */
  background-image: none;
  color: rgb(0, 0, 0);
}
1
2
3
4
5
6
7

# 04. 让页面里的字体变清晰,变细用 CSS 怎么做?

-webkit-font-smoothing: antialiased;
1

# 05. 让 overflow:scroll 平滑滚动?

-webkit-overflow-scrolling: touch;
1

# 06. 开启硬件加速

/*
目前,像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速,当检测到某个DOM元素应用了某些CSS规则时就会自动开启,从而解决页面闪白,保证动画流畅。
*/
.css {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
1
2
3
4
5
6
7
8
9

# 07. 消除 transtration 闪屏

.css {
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}
1
2
3
4
5

# 08. 改变输入框内提示文字颜色

::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #999;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #999;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #999;
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #999;
}
input:focus::-webkit-input-placeholder {
  color: #999;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 09. 手机上的多行省略

.overflow-hidden {
  display: box !important;
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /*第几行出现省略号*/
  /*text-align:justify;不能和溢出隐藏的代码一起写,会有bug*/
}
1
2
3
4
5
6
7
8
9

# 10. Css ellipsis

/* 基本写法 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

/* 
    多行
    1.直接用css属性设置(只有-webkit内核才有作用)
    -webkit-line-clamp 用来限制在一个块元素显示的文本的行数,这是一个不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

    display: -webkit-box 将对象作为弹性伸缩盒子模型显示 。

    -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式 。

    text-overflow: ellipsis 以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本。
*/

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 11. Hide scrollbar

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
1
2
3
4
5

# 12 有哪些适合网页显示的字体

  1. robotoregular:(谷歌数字等宽字体)
  2. Work Sans:(细小的字体)
上次编辑于: 2020年11月13日 05:14