国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

立即前往

首頁/文章專欄/css揭秘筆記——結構與布局

css揭秘筆記——結構與布局

張憲坤發布于2019-08-29 13:50 / 2534人閱讀

摘要：回退方案根據兄弟元素的數量來設置樣式知識點偽類選擇器只有一個列表項等效于一個正好有四個列表項的列表中的第一個列表項它之后的所有兄弟元素因此，有且只有四個列表項的情況就可以表示為如果列表項不是四個，則沒有被選中。

自適應內部元素

我們希望 width 可以像 height 一樣，可以自動適應內容的寬度。假如有如下結構：

Lorem ipsum dolor ...

Lorem ipsum dolor sit...

我們希望 figure 元素跟它所包含的圖片一樣寬（圖片尺寸不固定），而且水平居中。而我們能想到的解決方案，如讓 figure 元素浮動，或者使 figure 的父元素 text-aligin:center、再對所有子元素都設置 text-align:left。這些方法都不是特別理想。

css3中為 width 和 height 又增加了一些新的關鍵字，如min-content，它能使容器的寬度為內部最大的不可斷行元素的寬度。

figure{
    max-width: 300px; /*回退方案*/
    max-width: min-content; 
    margin： auto;
}
figure>img{
    max-width: inherit;
}

根據兄弟元素的數量來設置樣式

知識點：偽類選擇器

只有一個列表項：:only-child 等效于 :first-child:last-child
一個正好有四個列表項的列表中的第一個列表項： :first-child:nth-last-child(4)

ul>li{
    display: inline-block;
    padding: .5em 1em;
    border-radius: .5em;
    background: pink;
    color: white;
}
li:first-child:nth-last-child(4){
    background: deeppink;
}

它之后的所有兄弟元素： :first-child:nth-last-child(4)~li

li:first-child:nth-last-child(4) ~ li{
    background: deeppink;
}

因此，有且只有四個列表項的情況就可以表示為：

li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li{
    background: deeppink;
}

如果列表項不是四個，則沒有被選中。

根據兄弟元素的數量范圍來匹配元素

:nth-child()中的參數不僅可以是具體數字，也可以是an+b這樣的表達式，其中 n 的范圍是0到正無窮。
例如：n+4表示選中從第 4 個開始的所有子元素。（注意：寫成 4+n是不對的）

選中總數是4或是更多時選中所有列表項：

li:first-child:nth-last-child(n+4),
li:first-child:nth-last-child(n+4) ~ li{
    background: deeppink;
}

參數是-n+4可以選中開頭的4個元素

li:nth-child(-n+4){
    background: deeppink;
}

僅當列表中有4個或更少的列表項時，選中所有的列表項：

li:first-child:nth-last-child(-n+4),
li:first-child:nth-last-child(-n+4) ~ li{
    background: deeppink;
}

兩種技巧混合，可以表示當列表項有2~6個時，選中所有列表項。

li:first-child:nth-last-child(n+2):nth-last-child(-n+6),
li:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ li{
    background: deeppink;
}

滿幅的背景，定寬的內容

要實現一個背景占據整個視口，而內容固定寬度，居中布局。如：

一般的解決方案是為每個區塊準備兩層元素，分別為其設置樣式：


    
        Lorem ipsum dolor ...
    


footer{
    background: #333;
    color: white;
    border: 1px solid #333;/*這一行是為了不讓父元素和子元素的margin重疊（父元素margin為0，子元素為1em，重疊以長的為準，即為1em，背景默認background-clip為border-box，margin下面就會沒有背景顏色。）*/
}
.wrapper{
    max-width: 900px;
    margin: 1em auto;
}

CSS3中增加了一個calc()函數，上面代碼中的 margin 的 auto 可以替換為 calc(50%-450px)，這是一個長度值，因此可以作為父元素的 padding 值，代碼可以改為：

 footer{
        background: #333;
        color: white;
        /*border: 1px solid #333;*//*沒有margin重疊問題，也就不需要這一行*/
        padding: 1em calc(50% - 450px);
    }
    .wrapper{
        /*max-width: 900px;*/
        /*margin: 1em auto;*/
    }

因此，最終我們不再需要一個額外的元素：

footer{
    background: #333;
    color: white;
    padding: 1em; /*回退方案*/
    padding: 1em calc(50% - 450px); /*注意：calc中減號兩邊須有空格*/
}

垂直居中

僅水平居中很簡單：

/*針對行內元素*/
text-align: center; 
/*針對塊級元素*/
margin： auto;

如下結構：


    Am I centered yet?
    Center me, please!

基于絕對定位的解決方案

這個方案的前提是元素必須有固定的寬度和高度：

main{

    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -5em;
    margin-left: -10em;
    width: 20em;
    height: 10em;
}

如果一般的塊級元素，且父元素不是，還需要對父元素進行相對定位。

借助calc()函數，就可以省掉兩行

main{
    position: absolute;
    top: calc(50% - 5em);
    left: calc(50% - 10em);
    width: 20em;
    height: 10em;
}

由于translate()函數中的百分比值是相對于自身的寬高計算的，所以可以解決固定寬高的問題：

main{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

基于視口單位的解決方案

如果使用 margin 的百分比值和 auto 關鍵字設置垂直水平居中，得到的效果可能并不是我們想要的：

main{
    width: 20em;
    margin: 50% auto 0;
    transform: translateY(-50%);
}

那是因為 margin 的百分比值是以父元素的寬作為基準的，即使對 margin-top 和 margin-bottom 也是這樣。
如果只是想針對視口居中，可以使用視口單位解決。
1vw 表示視口寬度的 1%
1vh 表示視口高度的 1%
1vmin 表示視口寬高較小的那個（1vw 或 1vh）
1vmax 表示視口寬高較大的那個（1vw 或 1vh）

main{
    width: 20em;
    margin: 50vh auto 0;
    transform: translateY(-50%);
}

基于Flexbox 的解決方案

body{
    display: flex;
}

main{
    margin: auto;
}

當我們使用 Flexbox 時，margin：auto 不僅在水平方向上將元素居中，垂直方向上也是如此。
也可以這么寫：

body{
    display: flex;
    justify-content: center;
    align-items: center;
}

使用這種方法，還可以將匿名容器垂直居中，如沒有被標簽包裹的文本節點：

Center me, please!

mian{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20em;
    height: 15em;
}

緊貼底部的頁腳

我們會遇到這樣的問題，當頁面內容不夠長時，會出現頁腳不能緊貼在最底部，而是緊跟在內容的下方。如下圖：

固定高度的解決方案

如果頁腳和頁頭的高度固定，首先我們計算出頁腳和頁頭的高度，分別是7em和2.5em。

mian{
    min-height: calc(100vh - 7em - 2.5em);
    box-sizing: border-box; /*避免內邊距或邊框搞亂高度的計算*/
}

就OK了。
或者用一個額外的元素包裹住

和

元素：

#wrapper {
    min-height: calc(100vh - 7em);
}

Flexbox解決方案

將 body 設置為flex，main 設置為可伸長。

body{
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
main{
    flex: 1;
}

搞定~

GPU云服務器云服務器 css布局 css布局教程學習css布局云主機與購買筆記本

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112742.html

css編碼技巧【css揭秘讀書筆記】

摘要：最近在看揭秘，于是寫了文章來作筆記，除此以外還會補充一些自己遇到的筆試題。舉例說明以上的代碼有什么問題呢如果需要改變字號，那么同時需要調整行高。那么經過修改后的代碼如下關于使用還是還是百分比，需要根據具體情況來決定。最近在看《css揭秘》，于是寫了文章來作筆記，除此以外還會補充一些自己遇到的筆試題。希望大家都有所收獲。 css編碼技巧盡量減少代碼重復在實踐中，代碼可維護性的最大要...

Miyang 2019-08-30 12:59 評論0 收藏0
CSS技巧

摘要：技巧使你的更加專業這是上關于技巧的一篇譯文，另外你也可以在本項目看到原文。列舉了一些很實用的技巧，比如給空內容的標簽添加內容，逗號分隔列表等等。排序算法看源碼，把它背下來吧排序算法的封裝。主要幫助初學者更好的掌握排序算法的實現。成為專業程序員路上用到的各種優秀資料、神器及框架成為一名專業程序員的道路上，需要堅持練習、學習與積累，技術方面既要有一定的廣度，更要有自己的深度。 Java...

DangoSky 2019-08-22 11:15 評論0 收藏0
CSS技巧

摘要：技巧使你的更加專業這是上關于技巧的一篇譯文，另外你也可以在本項目看到原文。列舉了一些很實用的技巧，比如給空內容的標簽添加內容，逗號分隔列表等等。排序算法看源碼，把它背下來吧排序算法的封裝。主要幫助初學者更好的掌握排序算法的實現。成為專業程序員路上用到的各種優秀資料、神器及框架成為一名專業程序員的道路上，需要堅持練習、學習與積累，技術方面既要有一定的廣度，更要有自己的深度。 Java...

zgbgx 2019-08-29 14:01 評論0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：筆者作為一位，將工作以來用到的各種優秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數組的極值技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續更新… 一、...

Jonathan Shieber 2019-08-29 12:33 評論0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：筆者作為一位，將工作以來用到的各種優秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數組的極值技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續更新… 一、...

SHERlocked93 2019-08-22 11:04 評論0 收藏0