css布局更高级的技巧,你知道吗?
作为web前端程序员,一想到IE就头疼,随着html5和css3的出现,IE它开始慢慢的远去了,考虑IE9以上浏览,我们会很开心的,但很多高级的 CSS 特性都已被浏览器原生支持,再不学下就要过时了,css布局更高级的技巧,你知道吗?今天一起来学习下,一些实用的技巧。
用 :empty 区分空元素
兼容性:不支持 IE8
假如我们有以上列表:
1
2
3
|
< div class = "item" >a</ div > < div class = "item" >b</ div > < div class = "item" ></ div > |
我们希望可以对空元素和非空元素区别处理,那么有两种方案。
用 :empty 选择空元素:
1
2
3
|
.item:empty { display : none ; } |
或者用 :not(:empty) 选择非空元素:
1
2
3
4
|
.item:not(:empty) { border : 1px solid #ccc ; /* ... */ } |
用 :*-Of-Type 选择元素
兼容性:不支持 IE8
举例说明。
给第一个 p 段落加粗:
1
2
3
|
p:first-of-type { font-weight : bold ; } |
给最后一个 img 加边框:
1
2
3
|
img:last-of-type { border : 10px solid #ccc ; } |
给无相连的 blockquote 加样式:
1
2
3
4
|
blockquote:only-of-type { border-left : 5px solid #ccc ; padding-left : 2em ; } |
让奇数列的 p 段落先死红色:
1
2
3
|
p:nth-of-type(even) { color : red ; } |
此外,:nth-of-type 还可以有其他类型的参数:
1
2
3
4
5
6
7
8
9
10
11
|
/* 偶数个 */ :nth-of-type(even) /* only 第三个 */ :nth-of-type( 3 ) /* 每第三个 */ :nth-of-type( 3 n) /* 每第四加三个,即 3, 7, 11, ... */ :nth-of-type( 4 n+ 3 ) |
用 calc 做流式布局
兼容性:不支持 IE8
左中右的流式布局:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
nav { position : fixed ; left : 0 ; top : 0 ; width : 5 rem; height : 100% ; } aside { position : fixed ; right : 0 ; top : 0 ; width : 20 rem; height : 100% ; } main { margin-left : 5 rem; width : calc( 100% - 25 rem); } |
用 vw 和 vh 做全屏滚动效果
兼容性:不支持 IE8
vw 和 vh 是相对于 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
|
section { width : 100 vw; height : 100 vh; display : flex; align-items: center ; justify- content : center ; text-align : center ; background- size : cover; background-repeat : no-repeat ; background-attachment : fixed ; } section:nth-of-type( 1 ) { } section:nth-of-type( 2 ) { } section:nth-of-type( 3 ) { } section:nth-of-type( 4 ) { } body { margin : 0 ; } p { color : #fff ; font-size : 100px ; font-family : monospace ; } |
用 unset 做 CSS Reset
兼容性:不支持 IE
1
2
3
4
5
6
7
8
9
10
11
12
|
body { color : red ; } button { color : white ; border : 1px solid #ccc ; } /* 取消 section 中 button 的 color 设置 */ section button { color : unset; } |
用 column 做响应式的列布局
兼容性:不支持 IE9
1
2
3
4
5
6
7
8
9
10
11
|
nav { column-count: 4 ; column- width : 150px ; column-gap: 3 rem; column-rule: 1px dashed #ccc ; column-fill: auto ; } h 2 { column-span: all ; } |
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址:https://tangjiusheng.cn/divcss/96.html
原文地址:https://tangjiusheng.cn/divcss/96.html