網站導航
- zblogPHP模板zbpkf
- zblog免費模板zblogfree
- zblog模板學習zblogxuexi
- zblogPHP仿站zbpfang
display: table-cell 無法使用 margin/ padding 的解法
之前發過一篇，用div+css替代table的文章，因為div+css實在好用。已實際用過display: table的朋友，當你們在使用的時候，也許會碰到「間距調整」的問題，例如要在每一個table-cell裡頭設定margin等間距調整，卻發現修改無效。假設你碰過這種狀況，不妨參考一下我推薦的解法。話不多說，先上個范例！我使用圖片+圖說當作范例，例子包含：正常狀況下，圖片緊密排列使用margin調整的結果將寬度寫死的結果使用bord...
CSS：padding實現兩欄自適應 - 圖片與文字左右排列，文字自適應不限寬度
使用padding來布局，上一篇文章講解了padding來實現兩欄等高布局，本文重點講解下兩欄自適應寬度，在圖片和文字組合一起的時候，讓文字區域寬度自適應。注意：這里的圖片寬度是固定的，而不能隨意寬度！要實現圖片固定，文字不限制寬度的自適應，那么有兩種使用padding的方法。一、padding在容器上：原理如下：容器有個固定的padding-left值，此時圖文應該在120px處顯示，但是，由于圖片margin負值浮動（或者絕對定位）...
純CSS圖形 - padding圓形/同心圓
之前講述過幾個使用純CSS制作的圖形，比如三角形《border繪制三角形（各種角度）》三橫線《三橫線(三道杠)padding制作出來》、《border-style:double制作三橫線》今天來分享下上圖所示的使用CSS繪制同心圓，主要使用padding屬性！代碼如下：<style> .box{ width: 100px; height:&n...
純CSS圖形：三橫線(三道杠)padding制作出來
其實之前已經分享過一篇，用純CSS方式實現三橫線（三道杠）的方法：CSS小技巧:border-style:double制作三橫線具體代碼：{width:120px; height:20px;border-top:60px double;border-bottom:20px solid;}可能比本文實現的還簡單，但既然學習到了padding實現三橫線，那就看看padding是如何來實現的吧！如上圖實現的代碼如...
難纏的button按鈕與padding內邊距蛋疼的瀏覽器兼容性，label解決！
<style> button{ line-height:20px; padding: 10px; border: none;} </style> <button id="btn"...
ol/ul列表默認存在左側外邊距padding-left值，而不是默認左對齊！
ol ul列表大家都知道的，也是最常用的一種標簽了，各種列表中幾乎必備！在使用時候也都會發覺ol ul列表距離左側是有距離的，存在默認的padding-left值！下面就具體說下這個ol/ul列表默認左側距padding-left：1、ol/ul內置元素padding-left，但是單位是px而不是em2、例如在chrome瀏覽器下是40px3、所以如果字號很小，間距就會很開；4、所以如果字號很大，序號會爬到容器外邊...
padding:50% padding百分比 實現正方形
還是分享張鑫旭大神的padding進階學習，padding：50%的作用！如下圖：此時container非inline行內元素時padding:50%表現：截圖來自慕課網大嬸授課學習，padding:50%時候正方形的表現！注：此時container不能直接使用文字圖片等元素，不然引起尺寸改變，就不是正方形，所以采用background-img，然后通過position絕對相對定位來書寫文字。同時，padding百分比是基于寬度計算的！...
inline+padding技巧：間隔符(分割線)與文字高度不一致，間隔豎線高度縮短方法
如圖所示，在前端經常需要用到各種間隔符號，用CSS實現應該是最佳辦法，當然如果你用圖片、用符號都可以實現，但應用起來不如CSS來的那么順，那么爽！今天就用CSS來制作這個間隔符，并且讓間隔符號垂直居中，并且高度低于前后文字，這樣顯得干練！<style> *{font-size: 24px;} span{padding: 16px 6px 1px;&n...
padding和box-sizing:border-box; 外邊框變為內邊框
今天著重說明下padding和box-sizing: border-box;的作用，今天聽慕課網，學習了前端大神張鑫旭講解的padding，其中介紹了pading和box-sizing:border-box的作用！注意兼容性：box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:...