Am i center?
Center me ,please!
資訊專欄INFORMATION COLUMN
摘要：當(dāng)列表中至少包含四項(xiàng)時(shí)，命中包括該項(xiàng)之后的所有列表項(xiàng)當(dāng)然，不止于此，的玩法完全取決于你的腦洞。而且絕對定位對整個(gè)布局的影響也太過強(qiáng)烈。如此，對于響應(yīng)布局也可以不用擔(dān)心了，雖然有點(diǎn)點(diǎn)，但也算完美的解決了，
title: 結(jié)構(gòu)與布局
date: 2016-12-11
tags: CSS Secrets
CSS3 新增寬度屬性值 width:min-content 可以將容器的寬度值設(shè)置為容器內(nèi)最大的不可斷行的寬度(最寬的單詞，圖片，或者具有固定寬度的盒元素)
figure{
width:min-content;
margin: auto;
}
我們知道偽元素選擇器 :only-child,其實(shí)，它可以等效于:first-child:last-child，即是第一項(xiàng)的同時(shí)也是最后一項(xiàng)，所以從邏輯上來講它是唯一的。而:last-child 也是:nth-last-child(1)的快捷寫法。
那么接下來思考一個(gè)問題，li:first-chidl:nth-last-child(4) 代表什么?結(jié)果是 _一個(gè)正好有四個(gè)列表項(xiàng)的列表中的第一項(xiàng)_,ok,再結(jié)合兄弟選擇符~來命中它之后的每一項(xiàng)，就可以達(dá)到這樣一個(gè)目標(biāo)在正好包含四個(gè)列表項(xiàng)的時(shí)候，命中它的每一項(xiàng)
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
background: red;
}
結(jié)合 SASS，將其簡化復(fù)用
/*定義混合器*/
@mixin n-items($n){
&:first-child:nth-last-child(#{$n}),
&:first-child:nth-last-child(#{$n}) ~ &{
@content;
}
}
/*調(diào)用*/
li {
@include n-items(4){
/*屬性與值寫在這里*/
background: red;
}
}
nth-child()的強(qiáng)大之處在于以接受an+b形式的表達(dá)式，那么自然便可以使用其變種 nth-child(n+4) 這種形式，它將會選擇除了第1,2,3個(gè)子元素之外的所有子元素。
ul li:first-child:nth-last-child(n+4),
ul li:first-child:nth-last-child(n+4) ~ li{
/*當(dāng)列表中至少包含四項(xiàng)時(shí)，命中包括該項(xiàng)之后的所有列表項(xiàng)*/
}
當(dāng)然，不止于此，:nth-child()的玩法完全取決于你的腦洞。
有時(shí)，若需要去實(shí)現(xiàn)一個(gè) 背景寬度滿屏，內(nèi)容寬度固定 的布局，也許我們會去這樣設(shè)計(jì) DOM 結(jié)構(gòu)
CSS 樣式:
footer{
background: #333;
}
.wrapper{
max-width: 900px;
margin: 1em auto;
height: 200px;
}
使用 calc() 方法以后，就不必如此麻煩了，我們只需三行代碼即可實(shí)現(xiàn):
footer{
background:#333;
padding:1em calc(50% - 50px);
}
使用了 clac() 便可以在 CSS 中進(jìn)行簡單的算術(shù)運(yùn)行，這使得 DOM 結(jié)構(gòu)變得非常簡潔，沒有任何的冗余，當(dāng)然，缺點(diǎn)也是顯而易見的，這里的代碼只會在 footer 元素的父級超過 900 px 才會看出效果。
calc() 中的百分比是基于其父級進(jìn)行解析的
但，我們初次了解到了CSS3 中cacl() 這個(gè)魔法技巧。
CSS 中有一個(gè)很常見的現(xiàn)象，真正的解決方法往往來自于我們最意想不到的地方。比如，可以結(jié)合 positon:absolute 和 transform:translate() 屬性來實(shí)現(xiàn)垂直居中
因?yàn)?translate() 變形函數(shù)中的百分比是根據(jù)這個(gè)元素自身的寬度和高度為基準(zhǔn)進(jìn)行換算的，如此一來，便可以徹底解除對固定尺寸的依賴。
示例:DOM 結(jié)構(gòu)
Am i center?
Center me ,please!
CSS代碼:
.main{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
不過，該方法也是存在不足的:
1.在某些瀏覽器中，可能會導(dǎo)致模糊顯示，因?yàn)樵赜锌赡鼙环胖迷诎雮€(gè)像素上。
2.在并不適合使用絕對定位的情況下。而且絕對定位對整個(gè)布局的影響也太過強(qiáng)烈。
毫無疑問，這算是目前最佳的解決方案了。并且，現(xiàn)代瀏覽器對 FlexBox 的支持已經(jīng)相當(dāng)高了。
對基于 FlexBox 容器的 items 使用 margin:auto 不僅可以在水平方向方居中，垂直方向上亦是如此，即使不指定任何寬度，因?yàn)檫@個(gè)元素分配到的寬度等于 max-content.
FlexBox 的另一個(gè)好處是可以文本也進(jìn)行垂直居中， 只需對使用display:flex 的元素添加 align-items:center 和 justify-content:center。
.main{
background: deeppink;
width: 50%;
height: 50%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
有時(shí)，我們期望頁頭和頁腳的高度由其內(nèi)部因素來決定，而內(nèi)容區(qū)塊的高度可以自動收縮并占滿所有可用的空間。同樣，利用 FlexBox 這很容易。
body {
min-height: 100vh;
display:flex;
flex-flow: column;
header{
/*heaer style*/
}
.main{
flex:1;
}
footer{
/*footer style*/
}
}
我們給了 body 一個(gè) min-height:100vh 的高度這樣它至少會占據(jù)整個(gè)視口的高度，然后賦予 main 一個(gè)大于 0 的 flex 值就可以了。
問題:如果頁腳是固定在屏幕的底部的呢?如何解決當(dāng)頁面滾動到最后的時(shí)候保證頁腳不會覆蓋內(nèi)容區(qū)？
對于這個(gè)問題，純屬個(gè)人想法，可以在 footer 之后添加一個(gè) div#_footer。
此時(shí)的 DOM 結(jié)構(gòu)如下：
而對于 div#_footer 而言，不需要為其中添加任何的內(nèi)容和樣式，只需要它的高度等于 footer 的高度就可以了，而對于這點(diǎn)，使用 jQuery 就可以輕松搞定。
$("#_footer").height($("footer").height())
如此，對于響應(yīng)布局也可以不用擔(dān)心了，雖然有點(diǎn)點(diǎn)hack，但也算完美的解決了，Bingo!
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/50275.html
摘要：網(wǎng)格單元格網(wǎng)格單元格是指四條網(wǎng)格線之間的空間。所以它是最小的單位，就像表格中的單元格。圖中突出顯示的網(wǎng)格區(qū)域是行線和列線之間的區(qū)域，其主要包括了四個(gè)網(wǎng)格單元格。 CSS Grid現(xiàn)在已經(jīng)被W3C納入到CSS3的一個(gè)布局模塊當(dāng)中，被稱為CSS Grid Layout Module。而我們較為熟悉的還是將其想像成網(wǎng)格或者柵格，也就是早期的960gs。不管是網(wǎng)格還是柵格或者現(xiàn)在的CSS Gr...
摘要：由一道面試題引發(fā)的思考從用戶輸入瀏覽器輸入到頁面最后呈現(xiàn)有哪些過程一道很常規(guī)的題目，考的是基本網(wǎng)絡(luò)原理，和瀏覽器加載，過程。所以抽出時(shí)間研究下瀏覽器渲染頁面的過程。 由一道面試題引發(fā)的思考： 從用戶輸入瀏覽器輸入url到頁面最后呈現(xiàn) 有哪些過程？一道很常規(guī)的題目，考的是基本網(wǎng)絡(luò)原理，和瀏覽器加載css，js過程。 答案大致如下： 用戶輸入U(xiǎn)RL地址 瀏覽器解析URL解析出主機(jī)名 瀏覽...
摘要：當(dāng)列表中至少包含四項(xiàng)時(shí)，命中包括該項(xiàng)之后的所有列表項(xiàng)當(dāng)然，不止于此，的玩法完全取決于你的腦洞。而且絕對定位對整個(gè)布局的影響也太過強(qiáng)烈。如此，對于響應(yīng)布局也可以不用擔(dān)心了，雖然有點(diǎn)點(diǎn)，但也算完美的解決了， title: 結(jié)構(gòu)與布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 寬度自適應(yīng) CSS3 新增寬度屬性值 width:mi...
摘要：當(dāng)列表中至少包含四項(xiàng)時(shí)，命中包括該項(xiàng)之后的所有列表項(xiàng)當(dāng)然，不止于此，的玩法完全取決于你的腦洞。而且絕對定位對整個(gè)布局的影響也太過強(qiáng)烈。如此，對于響應(yīng)布局也可以不用擔(dān)心了，雖然有點(diǎn)點(diǎn)，但也算完美的解決了， title: 結(jié)構(gòu)與布局date: 2016-12-11tags: CSS Secrets 0x00 min-content 寬度自適應(yīng) CSS3 新增寬度屬性值 width:mi...
摘要：代碼如下頁面內(nèi)容樣式接下來，將側(cè)邊欄和主內(nèi)容區(qū)域使用一個(gè)包含起來。列和行布局部分橫跨所有的列。也可以使用簡寫，起始值和結(jié)束值位于同一行上，并用斜杠分隔。設(shè)計(jì)方法總結(jié)以上的布局設(shè)計(jì)中，使用了來進(jìn)行整體布局以及設(shè)計(jì)中的非線性部分。 CSS 浮動屬性一直是網(wǎng)站上排列元素的主要方法之一，但是當(dāng)實(shí)現(xiàn)復(fù)雜布局時(shí)，這種方法不總是那么理想。幸運(yùn)的是，在現(xiàn)代網(wǎng)頁設(shè)計(jì)時(shí)代，使用 Flexbox 和 CSS...
閱讀 1066·2019-08-30 15:55
閱讀 3511·2019-08-30 13:10
閱讀 1336·2019-08-29 18:45
閱讀 2420·2019-08-29 16:25
閱讀 2174·2019-08-29 15:13
閱讀 2491·2019-08-29 11:29
閱讀 617·2019-08-26 17:34
閱讀 1559·2019-08-26 13:57
