1. 首頁 > 生活百科 > >

2 CSS布局秘籍-6脈神劍( 三 )

生活百科


  • 區域字符命名，行內空格分割列，行間引號分割 。兩行三列：grid-template-areas: "head head right" "navmain right";
  • 相同命名的格子自動合并單元格，且必須為一個相鄰的矩形 。
  • 所有名字只能出現在一個連續的區域 ， 不能在不同的位置出現 。
  • 使用.符號，讓一個格子留空，就是空著，啥也不干 。
<style>.page{display: grid;/*定義2列、3行*/grid-template-areas: "header header" "left right" "footer footer"; /*圖1布局*/grid-template-areas: "left header" "left right" "footer right"; /*圖2布局*/grid-template-rows: 40px 1fr 40px;grid-template-columns: minmax(100px,200px) auto;height: 300px; margin: 10px;}.page>.header{grid-area: header;}.page>.left{grid-area: left;background-color: lemonchiffon;}.page>.right{grid-area: right;background-color: rgb(170, 236, 238);}.page>.footer{grid-area: footer;}.page>div{background-color: aquamarine;padding: 10px;}</style><div class="page"><div class="header">header</div><div class="left">left</div><div class="right">right</div><div class="footer">footer</div></div>? 調整命名即可實現不同的布局：
2 CSS布局秘籍-6脈神劍

文章插圖
2 CSS布局秘籍-6脈神劍

文章插圖
03、float浮動布局float 屬性讓素左右浮動起來，元素從正常布局流 (normal flow) 中移除，會浮動到父容器的左側或右側 。會改變元素本身和跟隨他后面的（不管層級、類型）其他正常流布局元素的行為，它后面的正常布局的元素圍繞該浮動元素 ， 并填滿其右側（或左側）的空間 。因為float脫離了文檔流，正常流的元素就會和他重疊，但元素的content內容不重疊，就會產生環繞效果 。
屬性描述值float設置元素浮動布局● left：將元素浮動到左側 。● right：將元素浮動到右側 。clear適用于浮動和非浮動元素，清除浮動效果● none：元素不會被向下移動以清除浮動 ?！?left：元素被向下移動以清除左浮動 ?！?right：元素被向下移動以清除右浮動 ?！?both：元素被向下移動以清除左右浮動 。<div><img src="https://www.huyubaike.com/res/qq-128.png" width="80" style="float:left"><img src="https://www.huyubaike.com/res/vedio.png" width="80" style="float:right"><p style="background-color:#0001;">所有元素都是一個盒子Box，盒子Box是頁面布局的基本單位，盒子的不同類型決定了他的布局方式 。一個頁面由各種盒子的組合、嵌套形成 。</p></div>
2 CSS布局秘籍-6脈神劍

文章插圖
在flex、grid網格布局問世之前 ， float是實現頁面布局的重要手段，他也存在一些慘無人道的問題，可以參考上一章節BFC部分內容 。
  • 使用float布局必須精心計算他們的寬度，還要考慮他們的padding、border、margin，推薦啟用代替IE盒模型 ， 避免不受控的溢出 。
  • 而且他本質上還是一維的，不支持跨行 。
  • 浮動使用的越復雜，清除也會越復雜 ， 應盡早清除，避免給后面的元素造成麻煩 。推薦在浮動布局后添加一個空的清除浮動div 。
下面的示例代碼就是典型的傳統基于float浮動實現的柵格布局，把列等分為12份，并窮舉創建橫跨2-12列的樣式類，代碼量多，點都不優雅 。
body {width: 90%;max-width: 980px;margin: 0 auto;}*{box-sizing: border-box;}/* row用來清除row之間的浮動影響 */.row {clear: both;}.col {float: left;margin-left: 2.08333333%;width: 6.25%;}.col.span2 { width: calc((6.25%*2) + 2.08333333%); }.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }/*...*/.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }/* 用來作為空列的偏移*/.offset-by-one {margin-left: calc(6.25% + (2.08333333%*2));}? float表單：
<style>.form-float *{ box-sizing: border-box; }.form-float>.row{clear: both;padding: 5px 0;}.form-float>.row>.col{float: left;background-color: antiquewhite; padding: 5px;}.form-float>.row>.col.lab{width: 15%;text-align: right;}.form-float>.row>.col.span1{ width: 35%; }.form-float>.row>.col.span2{ width: 85%; }.clear{ clear: both; }</style><form class="form-float"><div class="row" id="r1"><label for="" class="col lab" id="l1">姓名：</label><input type="text" class="col span1" value="https://www.huyubaike.com/biancheng/杜牧"><label for="" class="col lab">籍貫：</label><input type="text" class="col span1" value="https://www.huyubaike.com/biancheng/唐"></div><div class="row"><label for="" class="col lab">性別：</label><div class="col span1"><input type="radio"><label for="">男</label>&nbsp;&nbsp;<input type="radio"><label for="">女</label></div><label for="" class="col lab">生日：</label><input type="date" class="col span1"></div><div class="row"><label for="" class="col lab">簡介：</label><textarea name="" id="" cols="100" rows="5" class="col span2">停車坐愛楓林晚 ， 霜葉紅于二月花</textarea></div></form><div class="clear"></div>

推薦閱讀