2019獨角獸企業重金招聘Python工程師標準>>>

######圖文混排

*{clear:both;/*清除浮動*/ } <div><a href="#" target="_blank"><img align="left" src="./fire.jpg"></a><span>圖文混排右側標題</span><p>圖文混排繞圖片段落文字</p> </div>

######幾種不同的居中布局方法

*{line-height:25px;height:25px;/*文本內容垂直居中：行間距等于行高*/`width:400px;margin:0 auto;/*固定寬度且居中*/ }

######由浮動引起的布局問題的解決方案

######絕對定位與相對定位

######適配iPad屏幕的布局

######經典的Clearfix和升級版的Clearfix 經典的，單獨添加的div在IE和Firefox中會引起高度變化，父元素使用overflow：hidden時，如果子元素定位到部分或全部在父元素之外，父元素會對超出子元素部分進行裁剪。

.clearfix{clear:both;height:1px;margin-top:-1px;/*消除高度影響*/overflow:hidden;/*可清除浮動，但有副作用*/ }

升級版的Clearfix

######滾動條的控制

*{overflow:scroll;/*強制顯示*/ overflow:hidden;/*隱藏滾動條*/ overflow-x:scroll;/*強制顯示*/overflow-x:hidden;/*隱藏IE的水平滾動條*/ overflow:-moz-scrollbars-horizontal; overflow:-moz-scrollbars-vertical;/*強制顯示Mozilla的垂直滾動條，即使需要水平滾動條時也不會出現，上一句同理*/ }

######CSS3文本分列 針對不同內核的瀏覽器，分別加上-webkit-或-moz-,文本自適應text-align:justify;

• column-count定義欄目的數量
• column-width定義每欄的寬度
• column-gap兩欄之間的距離
• column-rule每欄之間的邊框
• column-rule-width每欄之間邊框寬度
• column-rule-style每欄之間邊框樣式（實線、虛線）
• column-rule-color每欄之間邊框的顏色
• column-span定義元素可以在欄目上定位顯示

######Flash參數設定引起的布局問題 浮動層浮動到Flash上方時，可在<object>與</object>間加入<param name="wmode" value="opaque"/>或在<embed/>中加入wmode="opaque"

• wmode=window 在Web頁上用影片自己的矩形窗口來播放應用程序，“Window”表明此Flash應用程序與HTML沒有任何交互，并且始終位于頂層。
• wmode=opaque使應用程序隱藏頁面上位于它后面的所有內容。
• wmode=transparent 使HTML頁的背景可以透過應用程序的所有透明部分顯示出來，可能會降低動畫性能。

######Metro和Flexbox布局風格

轉載于:https://my.oschina.net/jediKnight/blog/512690

總結

以上是生活随笔為你收集整理的学习CSS（页面布局篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。