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

資訊專欄INFORMATION COLUMN

CSS小技巧（二）：布局

Pink / 1972人閱讀

摘要：在我們寫代碼的過程中，可以養(yǎng)成記錄一些小技巧的習(xí)慣。不到萬不得已，盡量少使用或在可控范圍內(nèi)使用。可以在縮小瀏覽器窗口時(shí)等比例縮放。但此時(shí)不能加左右的，否則總寬度會(huì)超過的寬度。我們?yōu)檫_(dá)到目的讓同一類和左右排布不同類上下排布。

在我們寫CSS代碼的過程中，可以養(yǎng)成記錄一些小技巧的習(xí)慣。

1.

一般特定的元素都有自己默認(rèn)的樣式，但是在我們的整體布局中，可能適得其反。
我們可以去掉其默認(rèn)樣式。

* {
  margin: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

等等

2.

border大法

在調(diào)試一個(gè)盒子的時(shí)候，我們可以為其加上邊框。更易于直觀地看出盒子的位置以及樣式。

.bd {
  border: 1px solid red;
}
3.

一定要善用Chrome開發(fā)者工具檢查網(wǎng)頁(yè)代碼。

可以在網(wǎng)頁(yè)結(jié)構(gòu)上直接作出暫時(shí)性的修改，非常的方便。還可以查看每個(gè)元素的樣式。
關(guān)于這點(diǎn)我們?cè)谥蟮牟┛瓦M(jìn)行詳細(xì)說明。

4.

盡量少用width和height這兩個(gè)屬性。

在定義元素的高度時(shí)，我們知道一個(gè)元素的高度是由內(nèi)容決定的，比如div高度由其內(nèi)部文檔流高度總和決定。

這樣直接用width輸入像素值，很容易造成內(nèi)部溢出而顯示錯(cuò)誤或超出范圍。
在定義元素高度時(shí)，如果直接用height輸入像素也會(huì)因一些變化或其他css樣式而引起顯示問題。不到萬不得已，盡量少使用或在可控范圍內(nèi)使用。

我們可以根據(jù)實(shí)際大小位置需要，用margin和padding控制元素的位置以及樣式大小。

5.

如果要規(guī)定div的寬度，盡量使用max-width。可以在縮小瀏覽器窗口時(shí)等比例縮放。

max-width: 600px;
6.

固定定位

position: fixed;
top: 0;
left: 0;

一般在制作導(dǎo)航欄時(shí)會(huì)用到固定定位，使該元素脫離文檔流，可以相對(duì)于屏幕固定。

但是固定定位會(huì)導(dǎo)致元素樣式收縮，可以用width: 100%;來解決。
但此時(shí)不能加左右的padding，否則總寬度會(huì)超過body的寬度。
解決辦法是給一個(gè)父元素div 可以用來調(diào)整padding和margin。
div寬度無法超過body，而且會(huì)自適應(yīng)。

.parentNav {
  padding: 0 6px;
}
.parentNav .topNavBar {
  position: fixed;
  top: 0;
  left: 0;
  padding: 24px 0;
  width: 100%;
}
7.

如何實(shí)現(xiàn)dl中的dt和dd左右布局？

將dt和dd一起設(shè)置通向浮動(dòng)后，發(fā)現(xiàn)所有元素并排排在一起；雖然自動(dòng)換行，但是是無序的。
我們?yōu)檫_(dá)到目的：讓同一類dt和dd左右排布；不同類上下排布。

可以利用自動(dòng)換行的原理，為dt和dd分別設(shè)置百分比寬度，總和達(dá)到100%即可。
同時(shí)用padding調(diào)節(jié)上下間距。


  

    
Age: 

    
20

    
Gender: 

    
Male

    
Height: 

    
180cm

  


.text dl dt {
  float: left;
  width: 30%;
  padding: 6px 0;
}
.text dl dd {
  float: left;
  width: 70%;
  padding: 6px 0;
}



持續(xù)更新中...




Written by：EdenSheng
Email：singlesaulwork@gmail.com

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/117061.html

相關(guān)文章

  • [譯]148個(gè)資源讓你成為CSS專家

    摘要：層疊樣式表二修訂版這是對(duì)作出的官方說明。速查表兩份表來自一份關(guān)于基礎(chǔ)特性，一份關(guān)于布局。核心第一篇一份來自的基礎(chǔ)參考指南簡(jiǎn)寫速查表簡(jiǎn)寫形式參考書使用層疊樣式表基礎(chǔ)指南，包含使用的好處介紹個(gè)方法快速寫成高質(zhì)量的寫出高效的一些提示。 迄今為止，我已經(jīng)收集了100多個(gè)精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設(shè)計(jì)脫穎而出。 CSS3 資源 20個(gè)學(xué)習(xí)CSS3的有用資源 C...

    impig33 評(píng)論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

    princekin 評(píng)論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁(yè)面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁(yè)性能管理詳解離線緩存簡(jiǎn)介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁(yè)面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁(yè)性能管理詳解 HTML5 ...

    jsbintask 評(píng)論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁(yè)面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁(yè)性能管理詳解離線緩存簡(jiǎn)介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁(yè)面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁(yè)性能管理詳解 HTML5 ...

    muddyway 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<