今天小编给大家分享一下CSS高级布局技巧实例分析的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
<divclass="item">a</div>
<divclass="item">b</div>
<divclass="item"></div>
我们希望可以对空元素和非空元素区别处理，那么有两种方案。
.item:empty{
display:none;
}
.item:not(:empty){
border:1pxsolid#ccc;
}
用:*-Of-Type选择元素
兼容性：不支持IE8
p:first-of-type{
font-weight:bold;
}
img:last-of-type{
border:10pxsolid#ccc;
}
blockquote:only-of-type{
border-left:5pxsolid#ccc;
padding-left:2em;
}
p:nth-of-type(even){
color:red;
}
此外，:nth-of-type还可以有其他类型的参数：
:nth-of-type(even)
:nth-of-type(3)
:nth-of-type(3n)
:nth-of-type(4n+3)
用calc做流式布局
兼容性：不支持IE8
nav{
position:fixed;
left:0;
top:0;
width:5rem;
height:100%;
}
side{
position:fixed;
right:0;
top:0;
width:20rem;
height:100%;
}
main{
margin-left:5rem;
width:calc(100%-25rem);
}
用vw和vh做全屏滚动效果
兼容性：不支持IE8
查看Demo
section{
width:100vw;
height:100vh;
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){
background-image:url('https://unsplash.it/1024/683?image=1068');
}
section:nth-of-type(2){
background-image:url('https://unsplash.it/1024/683?image=1073');
}
section:nth-of-type(3){
background-image:url('https://unsplash.it/1024/683?image=1047');
}
section:nth-of-type(4){
background-image:url('https://unsplash.it/1024/683?image=1032');
}
body{
margin:0;
}
p{
color:#fff;
font-size:100px;
font-family:monospace;
}
用unset做CSSReset
兼容性：不支持IE
查看Demo
body{
color:red;
}
button{
color:white;
border:1pxsolid#ccc;
}
sectionbutton{
color:unset;
}
用column做响应式的列布局
兼容性：不支持IE9
查看Demo
nav{
column-count:4;
column-width:150px;
column-gap:3rem;
column-rule:1pxdashed#ccc;
column-fill:auto;
}
h3{
column-span:all;
}
以上就是“CSS高级布局技巧实例分析”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
