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高級布局技巧實例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。