为了账号安全,请及时绑定邮箱和手机立即绑定
  • 对于block水平元素:    padding影响元素的尺寸

    但是width:auto 或box-sizing为border-sizing为border-box时,padding不影响尺寸,除非padding大小超过了宽高的大小,padding则同样影响元素尺寸


    查看全部
  • 三道杠的实现 background-clip:content-box 背景色只在内容区域实现,所以背景色没有覆盖padding
    查看全部
  • padding与布局 1、使用百分比单位构建固定比例布局结构 2、配合margin实现等高布局 3、实现两栏自适应布局 padding在容器上 <div class="pbox"> <img src="abc.jpg>本例子实现的是,图片宽度固定,然后后面的文字自适应的效果。原理如下:容器有个固定的padding-lfet值,此时图文应该在120px处显示,但是,由于图片margin负值浮动(或者绝对定位)到容器左上角,因此,文字... </div> .pbox{ padding-left:120px;//图文距离容器边缘120px处显示 } .pbox img{ float:left;//让文字浮动,所以不占据空间; margin-left:-120px;//图片与文字之间的距离 } padding在子元素上 <div> <img src="abc.jpg"> <div class="auto">本例子实现的是,图片宽度固定,然后后面文字信息自适应的效果。原理如下:两栏元素均有自己的标签,其中文字栏有个固定的padding-left值,此时文字应该在距离容器120像素处显示,但是,由于图片浮动,不在流中,所以文字。。。</div> </div> img{ float:left;//破坏了容器 } .auto{ padding-left:120px;//设置padding值,使其距离容器边缘120px显示; }
    查看全部
  • 标签元素的内置padding 1、ol/ul列表 i.ol/ul元素内置padding-left,但是单位是px而不是em; ii.所以如果字号很小/很大,间距就会很开 (平时开发font-size:是12/14,padding-left:22/25px相对合适) 2、所有浏览器input/textarea输入框内置padding 3、所有浏览器botton按钮内置padding 4、所有浏览器radio/checkbox单复选框无内置padding 5、button按钮元素的padding最难控制! 在不同浏览器上使用不同的padding i.chrome浏览器 padding:0;即可以 ii.FireFox浏览器设置padding:0 左右依然有padding! 可以设置 button:-moz-focus-inner{padding:0;} iii.IE浏览器下 按钮文字越多,左右padding逐渐变大 button{overflow:visible;} padding与高度计算的不兼容 button{ line-height:20px; padding:10px; border:none;} !!!更好的是利用<label>标签模拟按钮,但是有时需要button提交,所以,利用<button>的可用性并可访问性隐藏 <button id="btn"></button> <label for="btn">按钮</label> label{ display:inline-block; line-height:20px; padding:1px; } #btn{ z-inde:-1;//藏在背景色之下 } 或者#btn{ absolute:-999em;//藏在屏幕之外}
    查看全部
  • 1、padding不支持任何形式的负值 2、padding百分比相对于宽度计算 1。block元素实现移动端屏幕题图占一半 <div class="container"> <div class="example"> <h2>你的指尖...</h2> <h3>慕课网...</h3> </div> </div> .container { padding:50%; background: url(exp.jpg); background-size: 100%; position:relatvie; } .example { position:absolute; top:0; right:0; bottom:0; left:0; } 3、inline水平元素的padding百分比值 .同样相对于宽度计算 。默认的高度宽度细节有差异 。padding会断行 inline就算是空白元素,padding高和宽也不想等 是因为:inline元素的垂直padding会让“幽灵空白节点”显现,也就是规范中的"strut"出现。
    查看全部
  • .eye{border:10px solid #000;padding:10px;background:silver;background-clip:content-box;width:150px;height:150px;border-radius:50%;} .eye1{width:90px;height:90px;border:10px solid blue;border-radius:50%;background-color:silver;background-clip:content-box;padding:10px;margin:10px;} .eye2{width:30px;height:30px;border:10px solid green;border-radius:50%;background-color:#dc0000;background-clip:content-box;padding:10px;margin:10px;}
    查看全部
  • 这节很重要
    查看全部
  • 实现左边右边登高布局 <style type="text/css"> *{font-family:Arial;} .container{ overflow:hidden; resize:vertical; color:white; } .child-green,.child-orange{ margin-bottom:-600px; padding-bottom:600px; float:left; } .child-green{ background:green; } .child-orange{ background:orange; } </style> <body> <div class="container"> <div class="child-orange">左黄</br>左黄</br>左黄</div> <div class="child-green">右绿</div> </div> </body>
    查看全部
  • 移动端1:1头图布局
    查看全部
  • 网友开发时,文字大小一般为12-14,这时候,padding的值一般为22,不大于25,能实现文字和图片对齐
    查看全部
  • padding实现三道杠
    查看全部
  • 内联元素的宽度
    查看全部
  • 高度可控分割线。
    查看全部
  • inline元素 影响背景色
    查看全部
  • block元素
    查看全部
首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
本课程适合学习过CSS系列课程的同学,通过学习本课程来深入理解CSS中padding的属性和用法。0基础的同学可能看不懂哦!
老师告诉你能学到什么?
了解padding与元素尺寸之间关系; 了解padding负值和百分比值; 标签元素的内置padding; 利用padding和其他一些CSS来绘制图形; padding在布局这块一些比较好的应用。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!