Putting's CSS&HTML的微紀錄

發表文章

目前顯示的是有「RWD」標籤的文章

和 CSS 非常相關的 Viewport

複雜好像又不複雜的 Flex 相關屬性

以前我切版最愛用 Float ，但常常在一些區塊會無法彈性伸縮，現在在了解完 Flex 屬性後，發現 CSS 的世界真是廣大呀！哈~~~ Flex 屬性要套用的第一點，要記得它分為「外框元件」和「內元件」，感覺就像是 table 和 td 的關係，兩者缺一不可。第一步要做的就是，將外框元件設定 display: flex; 沒有做這個設定，後續的設定都白搭。因為這裡會有很多不同的情況，所以我先大略設定一個情況：一組外框元件600px寬度、和三個內元件A、B、C 接下來就是針對「外框元件」的相關設定： flex-direction : row（橫式左往右） | row-reverse（橫式右往左） | column（直式上往下） | column-reverse（直式下往上） flex-wrap : nowrap（超出範圍換行） | wrap（超出範圍不換行） | wrap-reverse（超出範圍換行時反轉） justify-content (水平對齊): flex-start（靠左） | flex-end（靠右） | center（置中） | space-between（左右均分，但內容寬度不變） | space-around（左右均分、內容寬度不變，但最左和最右有間距） align-items （垂直對齊): flex-start（靠上） | flex-end（靠下） | center（置中） | baseline（第一行文字的底部對齊） | stretch（上下均分置中，區塊會撐開) align-content （垂直對齊多行版，但需要先設定 flex-wrap: wrap 才會有用）: flex-start（靠上) | flex-end（靠下） | center（置中） | space-between（上下均分置中，區塊不會撐開） | space-around（上下均分置中，區塊不會撐開、但最上和最下會有間距） | stretch（上下均分置中，區塊會撐開）「內元件」的相關設定： flex-grow （剩餘空間給元件的伸展性）: 0（預設值，都不伸展） | 1（剩餘空間分為1份做伸展），如果有兩個元件皆設定 flex-grow:1，代表剩餘空間分為2份做伸展，未設定的元件就不列入伸展例如：外空間為1000px，裡面包著A、B、C三個區塊，每個區塊寬...

利用css達到左右兩個文字之間出現RWD的連接線

【HTML】 <div class="textzoom-line"> <dd>左側文字1</dd> <em></em> <dt>說明文字1</dt> </div> <div class="textzoom-line"> <dd>標題2</dd> <em></em> <dt>標題說明文字2</dt> </div> <div class="textzoom-line"> <dd>標題3</dd> <em></em> <dt>不曉得要打什麼就隨便啦</dt> </div> <div class="textzoom-line"> <dd>最後一行的標題文字4</dd> <em></em> <dt>說明</dt> </div> 【CSS語法】 .textzoom-line { display: flex;} .textzoom-line dd, .textzoom-line em, .textzoom-line dt {flex-shrink: 0;} .textzoom-line dd { padding-right: 1em;} .textzoom-line em { border-bottom: 1px dotted #000000; height: 0.9em; flex: 2;} .textzoom-line dt { padding-left: 1em; text-align: right;} 【說明】就是把左文字、中間連接線、右文字用一個 te...

固定表格的每一欄 td 寬度，使其不隨內容而改變

【HTML】 <table clas="table-space"> <tr> <td>文字較少</td> <td>這一行的文字較多</td> <td>文字較少</td> </tr> </table> 【示意圖】設定前設定後【CSS語法】 table.table-space { table-layout:fixed;word-break:break-all;} 一般來說，表格內的 td 會隨著內容自動拉出對等的寬度，只有一張表還沒什麼感覺，如果同時有很多張表排列下來，每個表格的欄位寬度都不同，會造成視覺上的不適，這時就可以加上語法來讓每個欄位寬度都是均分的。不過要特別注意，表格的寬度要設定為 100%，不然感覺不出效果。

利用 flex 讓寬度自動配合內容

【HTML】 <section> <h2>flex-direction: row</h2> <div class="flex-container"> <div class="flex-item f1">內容 A</div> <div class="flex-item f2">內容 B</div> <div class="flex-item f3">內容 C</div> <div class="flex-item f4">內容 D</div> <div class="flex-item f1">內容 AA</div> <div class="flex-item f2">內容 BB</div> <div class="flex-item f3">內容 CC</div> <div class="flex-item f4">內容 DD</div> <div class="flex-item f1">內容 AAA</div> <div class="flex-item f2">內容 BBB</div> <div class="flex-item f3">內容 CCC</div> <div class="flex-item f4">內容 DDD</div> <div class="flex-item f1">內容 AAAA</div> <div class="flex-item f2">內容...

解決ipad 、iphone無法讓iframe出現捲軸功能

【HTML】 <iframe .......> ....... </iframe> 【CSS語法】 iframe { -webkit-overflow-scrolling: touch;}

RWD情況下，讓圖片維持固定比例縮放

固定圖片比例為 16:9，寬高比為 1:0.5625 首先設定 .box:after 內容 padding-top:56.25%，設定為 16:9 的比例，並且設定 content 為空的，然後定義 display 為 block，把空間撐出來接著設定圖片的內容，如同圖片水平垂直置中設定過的參數，在設定一次，同時也別忘了 .box 要設定為 position:relative 這樣就可以達到固定比例的圖片（即使圖片不是 16:9 的比例），最後也別忘了要加上 overflow:hidden，讓圖片不會超出 box 的大小 HTML <div class = 'box' > < img class = 'img' src = 'http://placeimg.com/800/600' /> </ div > <div class = 'box' > < img class = 'img' src = 'http://placeimg.com/600/800' /> </ div > <div class = 'box' > < img class = 'img' src = 'http://placeimg.com/160/90' /> </ div > CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 .box { background : #ccc ; position :relative; overflow :hidden; margin : 20px ; } .box :after { padding-top : 56.25% ; content : "" ; display : block...

透過css設定，嵌入Youtube影片維持16:9比例

【HTML】 <div class="video-container"> <ifram ......................(拿掉寬&高的設定)</ifram> </div> 【CSS語法】 .video-container { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden;} .video-container iframe, .video-container object, .video-container embed {position:absolute; top:0; left:0; width:100%; height:100%; } 【其他說明】這裡指的是針對 Youtube 影片比例為 16:9 時的情況，若有其他比例需要再自行調整 padding-bottom 的數值