Re: [問題] 縮放瀏覽器版型跑掉
※ 引述《tas72732002 (蔥頭)》之銘言：
想說順便解說一下一些觀念，所以回一篇比較快一點
: 請問一下各位大大, 我在進行瀏覽器的縮放的時候, 原本正常的版型, 就會發生異常
: 正常版型 : ------- -------
: |s1 ||s2 |
: | || |
: ---------------
: ----------------
: |s3 |
: ----------------
: 縮小瀏覽器後的版型 :
: -------
: |s1 |
: | |
: -------
: -------
: |s2 |
: | |
: -------
: ----------------
: |s3 |
: ----------------
: 我的html :
: <div class="stream-body-content">
: <div>
: <!-- 左上 -->
: <div class="s1"></div>
: <!-- 右上 -->
: <div class="s2"></div>
: </div>
: <!-- 下上 -->
: <div class="s3"></div>
: </div>
: 我的css :
: .stream-body-content { width:90%; background-color:black;padding: 1em; }
: .s1 { width:70%; }
: .s2 { border-style:groove;width:29%;height:420px;margin-bottom:1em;
: float:left; }
: .s3 { width:99%;height:260px;border:groove;margin-bottom:1em;
: float:left;}
: 要如何才可以避免我瀏覽器縮放的時候, div不會跑掉呢?
首先是釐清這狀況為何會發生：
S1+S2可顯示的區為寬度70%+29%=99%，你有預留1%寬度可供給S2的邊框使用
但視窗縮小之後，S2發生放不進右邊區域的問題，就在於「預留的1%不夠放下邊框」
S2的border-style:groove不會被計算進width的29%之中，
因為預設的容器模型寬度中：「邊框的寬度要另外計算」
border-style:groove預設會產生3px的寬度，在S2的中左右邊框佔了6px
一旦你的顯示stream-body-content可用寬度<600px，就會發生這個問題（裝不下）
因為： 「邊框的6px」 > 「預留空間1% X 可用寬599px」
=================
以下提供幾個解法：
1.直接解決邊框寬度的方式：
a.設定border:none; 把所有邊框都拿掉（如果邊框不重要的話）
b.縮小S1和S2百分比，增加預留的空間（不建議此解）
c.把width改用px固定寬度設定（如果不需顧及自動縮放）
2.我會採用的作法 inblock：（CSS3 不支援IE8以下）
2-1. 將所有容器模型設定為 box-sizing: border-box; (CSS3專用屬性 文後解釋)
2-2. 把float:left改用 display:inline-block; (避免父容器失去高度)
2-3. 修正inline-block的bug: 將DIV寫在同一行
https://jsfiddle.net/iamstanley/bvo8Lbqd/
3.2.我會採用的作法 float：（CSS3 不支援IE8以下）
2-1. 所有容器模型設定為 box-sizing: border-box; (CSS3專用屬性 文後解釋)
2-2. S1也設定float:left，stream-body-content的容器新增一個clear_fix的class
2-3. 使用:after產生元素將S2 S3後的float清除，避免父容器失去高度
https://jsfiddle.net/iamstanley/o06t17w4/11/
為了方便辨識，我加了底色和內容，在參考看看吧。
=====================
主要是三個重點：
1.box-sizing： 容器模型的寬度標準，會影響容器寬度的計算方式
在這個例子中將所有容器（*）都改用box-sizing: border-box
代表容器的寬度設定會包含了padding以及border的數值
預設的設定為content-box，padding和border都需另外計算
請參閱：http://zh-tw.learnlayout.com/box-sizing.html
2.inline-block：容器模型的表現方式，修正inline-block自動產生的4px空白
http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements
3.float：浮動元素造成父元素失去高度，一些作法會在HTML中加入新的DIV來清除
我比較推薦用CSS的:after偽元素來做，避免HTML插入太多無謂DIV
這方面相關資訊會比較多，就請自行搜尋了
以上，希望能看得懂
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 125.230.90.6
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1451199900.A.AFD.html
※ 編輯: sjlxup6 (125.230.90.6), 12/27/2015 15:09:30
※ 編輯: sjlxup6 (125.230.90.6), 12/27/2015 15:15:52
推
12/27 17:07, , 1F
12/27 17:07, 1F
推
12/28 00:05, , 2F
12/28 00:05, 2F
推
12/28 09:29, , 3F
12/28 09:29, 3F
推
12/28 12:20, , 4F
12/28 12:20, 4F
推
12/28 19:48, , 5F
12/28 19:48, 5F
推
12/29 09:10, , 6F
12/29 09:10, 6F
討論串 (同標題文章)