CSS高级布局技巧实例分析

今天小编给大家分享一下CSS高级布局技巧实例分析的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

　　/*假如我们有以上列表：*/

　　<divclass="item">a</div>

　　<divclass="item">b</div>

　　<divclass="item"></div>

　　我们希望可以对空元素和非空元素区别处理，那么有两种方案。

　　/*用: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高级布局技巧实例分析”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。