小片段代码简汇之CSS篇

总结在平时开发中遇到的一些小问题,大概很长一段时间就会来这么一次,小片段剧场.

布局

white-space | word-break | word-wrap

white-space

控制空白字符的显示,同时还能控制是否自动换行。它有五个值:normal | nowrap | pre | pre-wrap | pre-line

word-break

控制单词如何被拆分换行。它有三个值:normal | break-all | keep-all

word-wrap(overflow-wrap)

控制长度超过一行的单词是否被拆分换行,是word-break的补充,它有两个值:normal | break-word

兼容Windows、Mac的 font-family

font-family: Helvetica Neue For Number,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,"PingFangSC-Light" ,"Microsoft yahei", Arial, Helvetica, sans-serif
1

关于ios下的input输入框光标上移的问题

一般外框设置高度为auto,取消掉line-height,input本身设置字号大小,使用padding撑开,取消'height、line-height'

下拉框箭头重写

/* --ie清除--*/
select::-ms-expand{ display: none; }

/* --火狐、谷歌清除--*/
select{
  appearance:none;  
  -moz-appearance:none;  
  -webkit-appearance:none;
  padding-right: 30px!important;
  background: #fafafb url("/select-logo.png") 98% 50% no-repeat!important;
}
1
2
3
4
5
6
7
8
9
10
11

用CSS写三角形箭头

.wx-wper-con {
  position: absolute;
  left: 0;
  top: 40px;
  width: 158px;
  height: auto;
  background-color: #fff;
  border: 1px solid #e9e9e9;
  padding: 0px 5px;
  text-align: center;
  z-index: 100;
  box-shadow: 0 0 6px -2px #aaa;
}
.wx-wper-con:before,
.wx-wper-con:after {
  position: absolute;
  top: -9.5px;
  right: 20px;
  display: inline-block;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #dadada;
  border-left: 8px solid transparent;
  content: "";
}
.wx-wper-con:after {
  top: -8.5px;
  border-bottom: 8px solid #fff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

border边框渐变+圆角

.border-test {
  width: 200px;
  height: 200px;
  position: relative;
  border: 4px solid transparent;
  background-color: #fff;
  border-top-right-radius: 50px;
  background-clip: padding-box;
}
.border-test::after {
  content: "";
  display: block;
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  border-top-right-radius: 50px;
  background: linear-gradient(155deg,red, blue);
  z-index: -1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

文字两端对齐

text-align: justify;
text-align-last:justify;
1
2

每个单词的首字母大写

text-transform: uppercase;
1

这是 CSS2 中的属性,参数有 capitalize | uppercase | lowercase | none

参数介绍:

  • none: 默认。定义带有小写字母和大写字母的标准的文本。
  • capitalize: 文本中的每个单词以大写字母开头。
  • uppercase: 定义仅有大写字母。
  • lowercase: 定义无大写字母,仅有小写字母。

单选高亮

原文

.input:checked + .colors {
  border-color: #e63838;
  color: #e63838;
}

<div class="single-check">
    <input class="input" type="radio" name="colors" value="1">
    <div class="colors">天空之境</div> 
</div>
1
2
3
4
5
6
7
8
9
  • ~ 选择器:查找某个元素后面的所有兄弟元素
  • + 选择器:查找某个元素后面紧邻的兄弟元素

多列等高问题

  1. padding + margin:每列设置一个比较大的padding-bottom,然后通过取负值的 margin-bottom,缺点很明显:如下方无法看到圆角,无法看到 border-bottom
  2. display: table
  3. display: flex

学习资料

Last Updated: 9/6/2019, 2:30:51 PM