# CSS BoxModel (內外距 overflow position @media) ###### tags: `CSS` `HTML` ![](https://i.imgur.com/S958MgY.gif) (網路上找的可愛動畫XD) ## 版面綜合應用 * 外距 margin * 內距 padding * 最小與最大寬度 max-width: ; min-width: ; max-height: ; min-height: ; * overflow * overflow:hidden / scroll ; 練習: ```htmlmixed= <style> .box1{ max-width: 500px; min-width: 300px; max-height: 200px; min-height: 100px; background-color: #428bca; color: #f5f5f5; padding: 10px; margin: 5px auto; overflow: hidden; </style> <body> <div class="box1"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi illum, fugiat. Veritatis repellendus laboriosam nostrum tenetur, voluptatum harum, ad amet! Corporis ea molestiae, laudantium veniam eum vero, delectus consequatur reprehenderit, voluptas recusandae deserunt expedita quo iste fuga illo quia tempore.</p> </div> </body> ``` --- ## 區塊元素與行內元素 display ==語法 display:block== | 狀態設定 | 說明 | | ------------ | ------------------------------------ | | inline | 行內元素，元素隨文字段落流動顯示 | block | 區塊元素，元素前會自動分行成為獨立區域 | | inline-block | 區塊元素可與行內元素一樣隨文字段落流動顯示，但保有區塊元素的特性 | | none | 隱藏元素，頁面上不顯示，但原始碼會呈現 | --- ## 保留位置的隱藏 visibility ==語法 visibility: visible（顯示）/ hidden（隱藏）== 練習: ```htmlmixed= <style> .hidden1{ visibility: hidden; } </style> ``` --- ## 浮動元素 flaot ==語法 float: left / right / none（取消）== ![](https://i.imgur.com/Wa0LNr8.png) 設定多個區塊元素float 屬性的顯示方式 ![](https://i.imgur.com/yx6YRQY.png) --- ## 去除浮動元素 clear 若版面中沒有全部的區塊元素都設定float 屬性，有設定的會浮在版面上，沒有設定的會到這些區塊下層，造成版面錯亂 clear可解除這項影響 ==語法 clear: left / right / both（左右）/ none（取消）== ![](https://i.imgur.com/NG5q9Mc.png) ```htmlmixed= .box1{ clear: both; } ``` --- ## 元素位置 position * 定位點都以左上角開始 * ==語法position : relative ;== | 指定方式 | 說　　明 | | --------- | ---------------------------- | | static | 預設方式，不指定顯示位置 | | relative | 以元素現在位置為基準點指定位置 | | absolute | 以父層元素position 為基準點 | | fixed | 以瀏覽器畫面的左上角為基準點指定位置| 練習: ```htmlmixed= ``` --- ## 媒體查詢 @media (CSS3) * orientation裝置方向 portait 垂直方向 / landscape 水平方向 ==在HTML 中可使用以下三種方式加入媒體查詢，格式如下：== 1. 直接在CSS 中定義： @media 媒體類型 and （特性）{ 樣式設定… } 2. 由CSS 中匯入外部樣式檔 @import url("外部樣式檔") 媒體類型 and （特性） 3. 由HTML 中匯入外部樣式檔 &lt;link rel="stylesheet" href="外部樣式檔" media="媒體類型 and （特性）"&gt; 練習: 以螢幕寬度480px 為基準，當螢幕寬度小於480px 時以手機的版型來顯示，螢幕寬度大於480px 時則以桌上型電腦的版型來顯示： ```css= ```