04月
03

css 小知识

发表于 • 字数统计 2373
文章目录
  1. 利用 css 的 content 属性 attr 抓取资料
  2. 利用：valid 和：invalid 来做表单即使校验
  3. writing-mode
  4. 实现鼠标悬浮内容自动撑开的过渡动画
  5. 移动端 web 页面支持弹性滚动
  6. 美化浏览器自带的 radio ，checkbox 属性
  7. 改变 input 焦点光标的颜色
  8. rem 布局不再使用 JavaScript 设置
  9. 切角效果实现
  10. 响应式页面开发
    1. 使用Media Queries
    2. 样式断点
  11. 1px 细线（普通屏幕下 1px，高清屏下 0.5px 的情况）
  12. 需要保持宽高比的图，应该用 padding-top 实现
  13. input type=file onchange
  14. meta viewport
  15. 字少时居中，多时靠左
  16. CSS 权重
  17. CSS3 动画
    1. 实现动画暂停
  18. 重绘和回流
  19. 首行缩进
  20. 一种奇妙的绝对居中办法

css 在开发中的填坑总结

利用 css 的 content 属性 attr 抓取资料

想要获取伪元素，可以用以下写法：

1
2
<div data-msg="open"></div>
div:hover:after{ content:attr(data-mag); }

利用：valid 和：invalid 来做表单即使校验

  • :required 伪类指定具有 required 属性的表单元素
  • :valid 伪类指定一个通过匹配正确的所要求的表单元素
  • :invalid 伪类指定一个不匹配指定要求的表单元素

writing-mode

使用 writing-mode 这个 CSS 属性实现容器的文字从上往下排列。 writing-mode: vertical-rl;

实现鼠标悬浮内容自动撑开的过渡动画

需要为一个列表添加个动画，容器的高度是不确定的，也就是高度为 auto，悬浮时候撑开内容有个过渡动画。而用 CSS3 实现的话，由于高度的不确定，而 transtion 是需要具体的数值，所以设置 height:auto 是无法实现效果的，可以通过 max-height 这个属性间接的实现这么个效果，css 样式是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul>
  <li>
    <div class="hd">列表1</div>
    <div class="bd">列表内容<br />内容列表内容<br />内容列表内容<br />内容</div>
  </li>
  <li>
    <div class="hd">列表1</div>
    <div class="bd">列表内容<br />内容列表内容<br />内容列表内容<br />内容</div>
  </li>
  <li>
    <div class="hd">列表1</div>
    <div class="bd">列表内容<br />内容列表内容<br />内容列表内容<br />内容</div>
  </li>
</ul>
.bd { max-height:0; overflow:hidden; transition: all 1s ease-out; } li:hover .bd
{ max-height: 600px; transition-timing-function: ease-in; }

移动端 web 页面支持弹性滚动

-webkit-overflow-scrolling: touch;

美化浏览器自带的 radio ，checkbox 属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="radio-beauty-container">
  <label>
    <span class="radio-name">前端工程师</span>
    <input type="radio" name="radioName" id="radioName1" hidden />
    <label for="radioName1" class="radio-beauty"></label>
  </label>
  <label>
    <span class="radio-name">后端工程师</span>
    <input type="radio" name="radioName" id="radioName2" hidden />
    <label for="radioName2" class="radio-beauty"></label>
  </label>
  <label>
    <span class="radio-name">全栈工程师</span>
    <input type="radio" name="radioName" id="radioName3" hidden />
    <label for="radioName3" class="radio-beauty"></label>
  </label>
</div>
.radio-beauty-container { font-size: 0; $bgc: green; %common { padding: 2px;
background-color: $bgc; background-clip: content-box; } .radio-name {
vertical-align: middle; font-size: 16px; } .radio-beauty { width: 18px; height:
18px; box-sizing: border-box; display: inline-block; border: 1px solid $bgc;
vertical-align: middle; margin: 0 15px 0 3px; border-radius: 50%; &:hover {
box-shadow: 0 0 7px $bgc; @extend %common; } }
input[type="radio"]:checked+.radio-beauty { @extend %common; } }

改变 input 焦点光标的颜色

1
2
3
4
<input value="This field uses a default caret." />
<input class="custom" value="I have a custom caret color!" />
input { caret-color: auto; display: block; margin-bottom: .5em; } input.custom {
caret-color: red; }

rem 布局不再使用 JavaScript 设置

现在移动端 css3 单位 vw ,wh 兼容性已经很不错了，在不需要兼容太低版本的安卓机情况下可以这样来：

1
2
3
html {
  font-size: 100vw / 750;
}

切角效果实现

切角效果是时下非常流行的一种设计风格，并广泛运用于平面设计中，它最常见的形态就是把元素的一个或多个切成 45° 的切口，尤其是在最近几年，扁平化设计盖过拟物化设计后，这种切脚设计更为流行，例如下图就是通过切角实现的一个导航栏，在后面将详细论述起实现。

network

响应式页面开发

在页头head标签内添加viewoport meta是实现响应式页面的第一步。

1
<meta name="viewport" content="width=device-width, initial-scale=1" />

使用Media Queries

  • 使用 link 标签 ，根据指定特性引入特定的外部样式文件

    1
    <link rel="stylesheet" media="(max-width:640px)" href="max-640px.css" />

  • 直接在 style 标签或样式文件内使用@media规则

样式断点

  • moblie 移动设备断点 ，视窗宽度<=768px
  • tablet 平板电脑设备断点，视窗宽度>=769px
  • desktop 桌面电脑断点，视窗宽度>=1024px
  • widescreen 宽屏电脑断点，视窗宽度>=1216px
  • fullhd 高清宽屏电脑断点，视窗宽度>=1408px

1px 细线（普通屏幕下 1px，高清屏下 0.5px 的情况）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.mod_grid {
    position: relative;
    &::after {
        // 实现1物理像素的下边框线
        content: '';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #ddd;
        height: 1px;
        left: 0;
        right: 0;
        top: 0;
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            -webkit-transform: scaleY(0.5);
            -webkit-transform-origin: 50% 0%;
        }
    }
    ...
}...

需要保持宽高比的图，应该用 padding-top 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.mod_banner {
  position: relative;
  /* 使用padding-top 实现宽高比为 100:750 的图片区域 */
  padding-top: percentage(100/750);
  height: 0;
  overflow: hidden;
  img {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
  }
}

input type=file onchange

  • 上传同一张图片失效
  • 在微信浏览器内无法上传图片 (经测试是不支持input type=file 就算支持也无法上传 camera 目录下的文件 )
1
2
3
$fileInput.on('change', function (e) {
  e.target.value = ''
})

第二个问题实在没有找到方法 准备使用带有 flash 的插件
使用百度网盘，饿了么的网页在微信中有同样的问题

meta viewport

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html> H5标准声明，使用 HTML5 doctype，不区分大小写
<head lang="”en”">
  标准的 lang 属性写法
  <meta charset="’utf-8′" />
  声明文档使用的字符编码
  <meta http-equiv="”X-UA-Compatible”" content="”IE" ="edge,chrome" ="1″" />
  优先使用 IE 最新版本和 Chrome
  <meta name="”description”" content="”不超过150个字符”" />
  页面描述
  <meta name="”keywords”" content="””" />
  页面关键词
  <meta name="”author”" content="”name," email@gmail.com” />
  网页作者
  <meta name="”robots”" content="”index,follow”" />
  搜索引擎抓取
  <meta
    name="”viewport”"
    content="”initial-scale"
    ="1,"
    maximum-scale="3,"
    minimum-scale="1,"
    user-scalable="no”"
  />
  为移动设备添加 viewport
  <meta name="”apple-mobile-web-app-title”" content="”标题”" />
  iOS 设备 begin
  <meta name="”apple-mobile-web-app-capable”" content="”yes”" />
  添加到主屏后的标题（iOS 6 新增）是否启用 WebApp
  全屏模式，删除苹果默认的工具栏和菜单栏
  <meta
    name="”apple-itunes-app”"
    content="”app-id"
    ="myAppStoreID,"
    affiliate-data="myAffiliateData,"
    app-argument="myURL”"
  />
  添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
  <meta name="”apple-mobile-web-app-status-bar-style”" content="”black”" />
  <meta name="”format-detection”" content="”telphone" ="no," email="no”" />
  设置苹果工具栏颜色
  <meta name="”renderer”" content="”webkit”" />
  启用360浏览器的极速模式(webkit)
  <meta http-equiv="”X-UA-Compatible”" content="”IE" ="edge”" />
  避免IE使用兼容模式
  <meta http-equiv="”Cache-Control”" content="”no-siteapp”" />
  不让百度转码
  <meta name="”HandheldFriendly”" content="”true”" />
  针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓
  <meta name="”MobileOptimized”" content="”320″" />
  微软的老式浏览器
  <meta name="”screen-orientation”" content="”portrait”" />
  uc强制竖屏
  <meta name="”x5-orientation”" content="”portrait”" />
  QQ强制竖屏
  <meta name="”full-screen”" content="”yes”" />
  UC强制全屏
  <meta name="”x5-fullscreen”" content="”true”" />
  QQ强制全屏
  <meta name="”browsermode”" content="”application”" />
  UC应用模式
  <meta name="”x5-page-mode”" content="”app”" />
  QQ应用模式
  <meta name="”msapplication-tap-highlight”" content="”no”" />
  windows phone 点击无高光设置页面不缓存
  <meta http-equiv="”pragma”" content="”no-cache”" />
  <meta http-equiv="”cache-control”" content="”no-cache”" />
  <meta http-equiv="”expires”" content="”0″" />
</head>

字少时居中，多时靠左

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="box">
  <p class="content"></p>
</div>

<!-- CSS -->
<style>
  .box {
    text-align: center;
  }
  .content {
    display: inline-block;
    text-align: left;
    word-break: break-all;
  }
</style>

CSS 权重

权重分为 4 级，分别是：

  • 内联样式:1000
  • id:100
  • 类，伪类和属性选择器 :hover,[attributer],权值为 10
  • 代表元素选择器和伪元素选择器，div

** 需要注意的是：通用选择器（*），子选择器（>）和相邻通报选择器并不在这四个等级中，所以他们的权值为 0**

CSS3 动画

  • animation-name:对应的动画名称
  • animation-duration:是动画时长
  • animation-timing-function:规定动画的速度曲线。默认是 ease
  • animation-delay:规定动画何时开始。默认是 0
  • animation-iteration-count:规定动画播放的次数。默认是 1
  • animation-diraction:规定动画是否在下一周期逆向地播放。默认是 normal
  • animation-play-state:规定动画是否正在运行或暂停。默认是 running
  • animation-fill-mode:规定动画执行之前和之后如何给动画的目标应用，默认是 none，保留在最后一帧可以用 forwords

实现动画暂停

使用animation-play-state可以实现动画暂停

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.play-state {
  width: 100px;
  height: 100px;
  margin: 40px;
  text-align: center;
  line-height: 94px;
  border: 3px solid #e1efde;
  border-radius: 50%;
  animation: play-state 3s linear infinite;
  cursor: pointer;
}
.play-state:hover {
  animation-play-state: paused;
}
@keyframes play-state {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: 200px;
  }
}

重绘和回流

  • 重绘：指的是当前页面中的元素不脱离文档流。而简单的样式的变化，比如修改颜色，背景等，浏览器重新绘制样式
  • 回流：指的是处于文档流中 DOM 的尺寸大小，位置或者默写属性变化时，导致浏览器重新渲染部分或全部文档的情况

首行缩进

1
text-indent: 2em;

一种奇妙的绝对居中办法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
  .wp {
    writing-mode: vertical-lr;
    text-align: center;
  }
  .wp-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
  }
  .box {
    display: inline-block;
    margin: auto;
    text-align: left;
  }
</style>
<div class="wp">
  <div class="wp-inner">
    <div class="box">123123</div>
  </div>
</div>
分享到：
network