常见的CSS知识点

css
字数统计: 2.9k   |   阅读时长≈ 11 分钟

常见的 CSS 知识点

声明，这里也包含了部分 CSS 预处理器知识，愿各位不要纠结于此。

position:fixed 降级问题

不知道曾经的你是不是遇到吸顶效果，就是使用 position:fixed 这个属性。其实如果其父元素中有使用 transform， fixed 的效果会降级为 absolute。 解决方案： 既然会降级为 absolute 效果，我们该怎么解决这个问题呢？我们就改考虑什么情况下 fixed和 absolute 的表现效果会是一样的。 即当使用 fixed 的直接父元素的高度和屏幕的高度相同时 fixed 和 absolute 的表现效果会是一样的。 如果这个直接父级内的元素存在滚动的情况，那就加上 overflow-y:auto。

合理使用变量

一般设计稿中的某一类的文字（元素）都是用相同的字体大小、颜色、行高等样式属性，所以这些值我们不必每次都重复写，因为当 UI 更新设计方案，你需要改的地方就很多了。这些重复使用的值我们完全可以存放在变量里面。 Sass 和 Less 稍微有点区别：

1
2
3
4
// sass
$direction: left;
// less
@direction: left;

当然 CSS 原生也是存在变量的，使用规则如下： 变量定义的语法是：–；// *为变量名称。 变量使用的语法是：var()；

  1. 无论是变量的定义和使用只能在声明块 {} 里面
  2. CSS 变量字符限制为：[0-9]、[a-zA-Z]、_、-、中文和韩文等。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    :root {
    --blue_color: #3388ff;
    --main_bgcolor: #fafafa;
    --font_size_12: 12px;
    --font_size_14: 14px;
    --color: 20px;
    }
    .div1{
    background-color: var(--main_bgcolor);
    font-size: var(--font_size_12);
    }

    3. 使用 Mixin 归类重复样式

和重复变量一样，重复的样式也可以归类。我觉得优秀的代码其中有一条肯定是代码的复用性强。 之前我们写 CSS 的时候，也会将一些重复使用的代码放在一个 class 中，这样的确达到了一定的复用性，不过最后的效果可能就是在一个元素里面放了很多 class 这样下一个接手得人难免会有点迷糊，而且这样会造成样式越来越难修改。 这个时候，mixin( 可以理解成 class 中的 class )就能发挥它的作用了。 这是一个描述性文字的样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.font-description {
.font-des-style(24px,#fff,1.5em);
.line-camp(2);
}

// less
/* 多行显示 */
.line-camp( @clamp:2 ) {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: @clamp;
-webkit-box-orient: vertical;
}


.font-des-style( @fontSize, @color, @lineHeight, @textAlign:left ) {
font-size: @fontSize;
color: @color;
line-height: @lineHeight;
text-align: @textAlign;
}

只是一个简单的例子，我们可以把可复用的样式放在 mixin 中，这样接手项目的人只需要熟悉你写的 mixin.less 就可以开始迭代需求了

1px 方案

做过移动端需求的前端肯定是避免不了处理 1px 细线问题，这个问题的原因就是 UI 对页面美观度的要求越来越高（不要和我说这是 retina 屏的问题）。 代码如下：

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.min-device-pixel-ratio(@scale2, @scale3) {
@media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
transform: @scale2;
}
@media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {
transform: @scale3;
}
}
.border-1px(@color: #DDD, @radius: 2PX, @style: solid) {
&::before {
content: "";
pointer-events: none;
display: block;
position: absolute;
left: 0;
top: 0;
transform-origin: 0 0;
border: 1PX @style @color;
border-radius: @radius;
box-sizing: border-box;
width: 100%;
height: 100%;
@media screen and (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
width: 200%;
height: 200%;
border-radius: @radius * 2;
transform: scale(.5);
}
@media screen and (min-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3) {
width: 300%;
height: 300%;
border-radius: @radius * 3;
transform: scale(.33);
}
}
}

.border-top-1px(@color: #DDD, @style: solid) {
&::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
border-top: 1Px @style @color;
transform-origin: 0 0;
.min-device-pixel-ratio(scaleY(.5), scaleY(.33));
}
}

内联首屏关键 CSS

性能优化中有一个重要的指标 —— 首次有效绘制（FMP），即指页面的首要内容（primary content）出现在屏幕上的时间。这一指标影响用户看到页面前所需等待的时间，而 内联首屏关键 CSS（即 Critical CSS，可以称之为首屏关键 CSS） 能给用户一个更好的心理预期。 我们知道内联 CSS 能够使浏览器开始页面渲染的时间提前，即在 HTML 下载完成之后就能渲染了。 既然是内联关键 CSS，也就说明我们只会将少部分的 CSS 代码直接写入 HTML 中。至于内联哪些 CSS 你可以使用 Critical。

文字两端对齐

需求中我们也经常遇到这样的需求，这里直接提供方案。

1
2
3
4
5
// html
<div>姓名</div>
<div>手机号码</div>
<div>账号</div>
<div>密码</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
// css
div {
margin: 10px 0;
width: 100px;
border: 1px solid red;
text-align: justify;
text-align-last:justify;
}
div:after{
content: '';
display: inline-block;
width: 100%;
}

样式的顺序

CSS 代码：

1
2
3
4
5
6
.red {
color: red;
}
.blue {
color: blue;
}

HTML 代码：

1
2
<div class="red blue">这是什么颜色</div>
<div class="blue red">这是什么颜色</div>

记得之前这是一道比较火的 CSS 考题，当时好像是有不少的人答错（30% 以上）

浏览器会从右到左解析 CSS 选择器

浏览器会对上面的例子做如下的步骤处理：

  1. 首先找到页面所有的 <a> 元素
  2. 然后向上找到被 <p> 元素包裹的 <a> 元素
  3. 再向上查找到一直到 .content_box 的元素

从上面的步骤我们可以看出，越靠右的选择器越具有唯一性，浏览器解析 CSS 属性的效率就越高。 所以一定换成使用具体的 class 编写 CSS 代码。

每个单词的首字母大写

其实我第一次看到这个功能的时候就是使用 JS 去实现这个功能： 直到有一天看到 CSS 也能做这个功能的时候，我才反应过来明明一句 CSS 就能解决的问题，我却使用了更复杂的方案。  

text-transform 简单介绍

这是 CSS2 中的属性，参数有 capitalize | uppercase | lowercase | none 参数介绍：

  1. none：默认。定义带有小写字母和大写字母的标准的文本。
  2. capitalize：文本中的每个单词以大写字母开头。
  3. uppercase：定义仅有大写字母。
  4. lowercase：定义无大写字母，仅有小写字母。

从这个属性我们可以知道全部大写（小写）的需求这个属性也能轻易实现。

单选高亮

可能你看到“单选高亮”没反应过来，直接来张图片你就马上清楚了 ~选择器：查找某个元素后面的所有兄弟元素 +选择器：查找某个元素后面紧邻的兄弟元素

多列等高问题

有三种 CSS 的处理方案：

  1. 每列设置一个很大的 padding，再设置一个很大的负的 margin
  2. 使用 display:table;
  3. 使用 flex

第一种有明显的缺陷：

  1. border-bottom 看不到了
  2. 设置的下方的两个圆角也不见了

所以可以使用 display:table; 或者 flex布局 的方式来实现等高。 建议不要一味的抵触 table，有的场景还是可以使用的。

11 个有趣实用的 JS 特性

在日常开发中总是和各种 API 打交道，我们名为前端工程师实为 API 调用工程师。这里分享 11 个实用又有趣的 JS 特性，使用得当可以提高你应用的友好性。

监听屏幕旋转变化接口: orientationchange

定义： 这个 API 可以将你手机是否横屏的情况暴露给需要知道的人知道。 使用：

orientation.angle 值

屏幕方向

0

竖屏

90

向左横屏

-90/270

向右横屏

180

倒屏

通过这个 API 我们在横屏和竖屏的时候可以添加一些动作或者是样式的改变。

如果只是样式的改变也可以通过媒体查询来监听：

1
2
3
4
5
6
7
8
/* 竖屏 */
@media screen and (orientation: portrait) {
// some css code
}
/* 横屏 */
@media screen and (orientation: landscape) {
// some css code
}

电池状态：navigator.getBattery()

定义： 这个 API 可以将你手机电池状态的情况暴露给需要知道的人知道。 这个 api 返回的是一个 promise 对象，会给出一个 BatteryManager 对象，对象中包含了以下信息：

key

描述

备注

charging

是否在充电

可读属性

chargingTime

若在充电，还需充电时间

可读属性

dischargingTime

剩余电量

可读属性

level

剩余电量百分数

可读属性

onchargingchange

监听充电状态的改变

可监听事件

onchargingtimechange

监听充电时间的改变

可监听事件

ondischargingtimechange

监听电池可用时间的改变

可监听事件

onlevelchange

监听剩余电量百分数的改变

可监听事件

使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
getBatteryInfo: function(){
let self = this;
if(navigator.getBattery){
navigator.getBattery().then(function(battery) {
// 判断是否在充电
self.batteryInfo = battery.charging ? `在充电 : 剩余 ${battery.level * 100}%` : `没充电 : 剩余 ${battery.level * 100}%`;
// 电池充电状态改变事件
battery.addEventListener('chargingchange', function(){
self.batteryInfo = battery.charging ? `在充电 : 剩余 ${battery.level * 100}%` : `没充电 : 剩余 ${battery.level * 100}%`;
});
});
}else{
self.batteryInfo = '不支持电池状态接口';
}
},

让你的手机震动: window.navigator.vibrate(200)

定义： 这个 API 可以让你的手机按你的想法震动。 使用： 震动效果会在很多游戏使用。比如欢乐斗地主中，地主打完王炸后手机都会有震动的效果，以此来表达地主嘚瑟的心情也很是合理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
示例代码如下：
vibrateFun: function(){
let self = this;
if( navigator.vibrate ){
navigator.vibrate([500, 500, 500, 500, 500, 500, 500, 500, 500, 500]);
}else{
self.vibrateInfo = "您的设备不支持震动";
}
<!--
// 清除震动
navigator.vibrate(0);
// 持续震动
setInterval(function() {
navigator.vibrate(200);
}, 500);
-->
},

当前语言：navigator.language

定义： 这个 API 可以告诉你当前应该使用什么语言。 如果你需要和我一样做多语言适配，这个 API 或许可以给你提供一个不错的思路。 使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
不同浏览器返回的值稍微有点差异。你可以通过以下封装好的方法来消除这种差异：
function getThisLang(){
const langList = \['cn','hk','tw','en','fr'\];
const langListLen = langList.length;
const thisLang = (navigator.language || navigator.browserLanguage).toLowerCase();
for( let i = 0; i < langListLen; i++ ){
let lang = langList\[i\];
if(thisLang.includes(lang)){
return lang
}else {
return 'en'
}
}
}

不同的语言就对应不同的语言文案就好。

联网状态：navigator.onLine

定义： 这个 API 可以告诉让你知道你的设备的网络状态是否连接着。 可以准确的告诉用户“您的网络无法连接，请检查”。这样用户是不是可以有更好的体验呢？

1
2
3
4
5
6
7
8
9
10
11
12
代码如下：
mounted(){
let self = this;
window.addEventListener('online', self.updateOnlineStatus, true);
window.addEventListener('offline', self.updateOnlineStatus, true);
},
methods: {
updateOnlineStatus: function(){
var self = this;
self.onLineInfo = navigator.onLine ? "online" : "offline";
},
}

注意：navigator.onLine 只会在机器未连接到局域网或路由器时返回 false，其他情况下均返回 true。也就是说，机器连接上路由器后，即使这个路由器没联通网络， navigator.onLine仍然返回 true。

  • 版权声明： 本博客所有文章，未经许可，任何单位及个人不得做营利性使用！转载请标明出处！如有侵权请联系作者。
  • Copyrights © 2015-2023 翟天野

请我喝杯咖啡吧~