网站导航
- 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:...