網頁布局方式
1.什麼是網頁的布局方式?
網頁的布局方式其實就是指瀏覽器是如何對網頁中的元素進行排版的
1.標準流(文件流/普通流)排版方式
1.1其實瀏覽器預設的排版方式就是標準流的排版方式
1.2在css中將元素分為三類, 分別是塊級元素/行內元素/行內塊級元素
1.3 在標準流中有兩種排版方式, 一種是垂直排版, 一種是水平排版
垂直排版, 如果元素是塊級元素, 那麼就會垂直排版
水平排版, 如果元素是行內元素/行內塊級元素, 那麼就會水平排版
2.浮動流排版方式
2.1浮動流是一種"半脫離標準流"的排版方式
2.2浮動流只有一種排版方式, 就是水平排版. 它只能設定某個元素左對齊或者右對齊
注意點:
1.浮動流中沒有居中對齊, 也就是沒有center這個取值
2.在浮動流中是不可以使用margin: 0 auto;
特點:1.在浮動流中是不區分塊級元素/行內元素/行內塊級元素的
無論是級元素/行內元素/行內塊級元素都可以水平排版
2.在浮動流中無論是塊級元素/行內元素/行內塊級元素都可以設定寬高
3.綜上所述, 浮動流中的元素和標準流中的行內塊級元素很像
3.定位流排版方式
浮動元素的脫標現象
1.什麼是浮動元素的脫標?
脫標: 脫離標準流
當某乙個元素浮動之後, 那麼這個元素看上去就像被從標準流中刪除了一樣, 這個就是浮動元素的脫標
2.浮動元素脫標之後會有什麼影響?
如果前面乙個元素浮動了, 而後面乙個元素沒有浮動 , 那麼這個時候前面乙個元就會蓋住後面乙個元素
1.浮動元素排序規則
1.1相同方向上的浮動元素, 先浮動的元素會顯示在前面, 後浮動的元素會顯示在後面
1.2不同方向上的浮動元素, 左浮動會找左浮動, 右浮動會找右浮動
1.3浮動元素浮動之後的位置, 由浮動元素浮動之前在標準流中的位置來確定(這句話的意思就是:浮動之前標籤在標準流第一行,浮動之後就在浮動的第一行,浮動之前標籤在標準流的第二行,浮動之後就浮動在第二行)
浮動元素的貼靠現象
1.什麼是浮動元素貼靠現象?
1.如果父元素的寬度能夠顯示所有浮動元素, 那麼浮動的元素會併排顯示
2.如果父元素的寬度不能顯示所有浮動元素, 那麼會從最後乙個元開始往前貼靠
3.如果貼靠了前面所有浮動元素之後都不能顯示, 最終會貼靠到父元素的左邊或者右邊
浮動元素字圍現象
1.什麼是浮動元素字圍現象?
浮動元素不會擋住沒有浮動元素中的文字, 沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現象
浮動元素的高度問題
1.在標準流中內容的高度可以撐起父元素的高度
2.在浮動流中浮動的元素是不可以撐起父元素的高度的
清除浮動的方式
1.清除浮動的第一種方式
給前面乙個父元素設定高度
注意點:
在企業開發中, 我們能不寫高度就不寫高度, 所以這種方式用得很少
< div class=「box1」>
< p>我是文字1< /p>
< p>我是文字1< /p>
< p>我是文字1< /p>
< /div>
< div class=「box2」>
< p>我是文字2< /p>
< p>我是文字2< /p>
< p>我是文字2< /p>
< /div>
比如這樣乙個例子,如果讓p元素都左浮動,那麼六個p元素都會顯示在一行,為了解決這個問題,就得在第乙個div設定高度,這樣才不會顯示在一行裡面
1.清除浮動的第二種方式
給後面的盒子新增clear屬性
clear屬性取值:
none: 預設取值, 按照浮動元素的排序規則來排序(左浮動找左浮動, 右浮動找右浮動)
left: 不要找前面的左浮動元素
right: 不要找前面的右浮動元素
both: 不要找前面的左浮動元素和右浮動元素
注意點:
當我們給某個元素新增clear屬性之後, 那麼這個屬性的margin屬性就會失效
1.清除浮動的第三種方式
隔牆法2.外牆法
2.1在兩個盒子中間新增乙個額外的塊級元素
2.2給這個額外新增的塊級元素設定clear: both;屬性
注意點:
外牆法它可以讓第二個盒子使用margin-top屬性
外牆法不可以讓第乙個盒子使用margin-bottom屬性
3.內牆法
3.1在第乙個盒子中所有子元素最後新增乙個額外的塊級元素
3.2給這個額外新增的塊級元素設定clear: both;屬性
注意點:
內牆法它可以讓第二個盒子使用margin-top屬性
內牆法它可以讓第乙個盒子使用margin-bottom屬性
4.外牆法和內牆法區別?
外牆法不能撐起第乙個盒子的高度, 而內牆法可以撐起第乙個盒子的高度
5.在企業開發中不常用隔牆法來清除浮動
偽選擇器
1.什麼是偽元素選擇器?
偽元素選擇器作用就是給指定標籤的內容前面新增乙個子元素或者給指定標籤的內容後面新增乙個子元素
2.格式:
標籤名稱::before
給指定標籤的內容前面新增乙個子元素
標籤名稱::after
給指定標籤的內容後面新增乙個子元素
1.清除浮動的第四種方式
利用偽元素選擇器清除浮動
本質上就是內牆法, 只不過是直接通過css**新增了內牆, 其它特性和內牆法都一樣
注意點:
ie6中不支援這種方式, 為了相容ie6必須給前面的盒子新增*zoom:1;屬性
1.清除浮動的第五種方式
1.overflow: hidden;作用
1.1可以將超出標籤範圍的內容裁剪掉
1.2清除浮動
1.3可以通過overflow: hidden;讓裡面的盒子設定margin-top之後, 外面的盒子不被頂下來
css 網頁布局方式
1.網頁布局方式 其實就是指瀏覽器是如何對網頁中的元素進行排版的。1 標準流 文件流 普通流 排版方式 2 在css中將元素分為三種，分別是 塊級元素 行內元素 行內塊級元素 3 在標準流中有兩種排版方式，一種是垂直排序，一種是水平排序 垂直排序 如果元素是塊級元素，那麼就會垂直排版 水平排序 如果...
網頁布局流式布局
工具所用到外掛程式 masonry 是 一款非常強大的jquery動態網格布局外掛程式，可以幫助開發人員快速開發類似剪貼畫的介面效果。和css中float的效果不太一樣的地方在 於，float先水平排列，然後再垂直排列，使用masonry則垂直排列元素，然後將下乙個元素放置到網格中的下乙個開發區域。...
網頁布局 table布局
table 的特性決定了它非常適合用來做布局，並且 中的內容可以自動居中，這是之前用的特別多的一種布局方式 而且也加入了display table dispaly table cell來支援 teble 布局。1.簡單布局 1 doctype html 2 html lang en 3 head 4...