CSS高级布局技巧实例分析
今天小编给大家分享一下CSS高级布局技巧实例分析的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
/*假如我们有以上列表：*/
我们希望可以对空元素和非空元素区别处理，那么有两种方案。
/*用:empty选择空元素：*/
.item:empty{
display:none;
}
/*或者用:not(:empty)选择非空元素：*/
.item:not(:empty){
border:1pxsolid#ccc;
/*...*/
}
用:*-Of-Type选择元素
兼容性：不支持IE8
/*给第一个p段落加粗：*/
p:first-of-type{
font-weight:bold;
}
/*给最后一个img加边框：*/
img:last-of-type{
border:10pxsolid#ccc;
}
/*给无相连的blockquote加样式：*/
blockquote:only-of-type{
border-left:5pxsolid#ccc;
padding-left:2em;
}
/*让奇数列的p段落显示红色：*/
p:nth-of-type(even){
color:red;
}
此外，:nth-of-type还可以有其他类型的参数：
/*偶数个*/
:nth-of-type(even)
/*only第三个*/
:nth-of-type(3)
/*每第三个*/
:nth-of-type(3n)
/*每第四加三个，即3,7,11,...*/
: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
/*vw和vh是相对于viewport而言的，所以不会随内容和布局的变化而变。*/
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;
}
/*取消section中button的color设置*/
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高级布局技巧实例分析"这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注行业资讯频道。
