我们一起来读书吧 关注:152贴子:2,414
  • 0回复贴,共1

【css世界】4.2

只看楼主收藏回复

4.2主要介绍了盒模型中的padding属性,padding 的性格是最温和的。
所谓“温和”指的是我们在使用 padding进行页面开发的时候很少会出现意想不到的情况,也就是坑比较少。
第一小结介绍了padding与元素的尺寸:
块级元素中,在box-sizing:content-box时,padding会增加元素的尺寸;而在box-sizing: border-box;时,我们认为此时padding不会影响元素的尺寸,实际上并不是这样,当padding足够大的时候,元素的内部的内容表现为:首选最小宽度;
内联元素中,内联元素的 padding在水平和垂直方向同样会影响布局,影响视觉表现,内联元素没有可视宽度和可视高度的说法,垂直方向的行为表现完全受 line-height 和 vertical-align 的影响,视觉上并没有改变和上一行下一行内容的间距
第二小节介绍了padding的百分比值:
1、和 margin 属性不同,padding 属性是不支持负值的;
2、padding 支持百分比值,但是,和 height 等属性的百分比计算规则有些差异,差异在于:padding 百分比值无论是水平方向还是垂直方向均是相对于宽度计算的
第三小节介绍了标签元素内置的padding:
1、ol/ul 列表内置 padding-left,但是单位是 px
2、所有浏览器<input>/<textarea>输入框内置 padding;
3、所有浏览器<button>按钮内置 padding;
4、部分浏览器<select>下拉内置 padding,如 Firefox、IE8 及以上版本浏览器可以设置 padding;
5、所有浏览器<radio>/<chexkbox>单复选框无内置 padding;
另外这一节还特意介绍了button的padding,主要是在不同的浏览器上有不同的兼容性问题
第四小节介绍了padding与图形绘制:包含padding与background-clip配合实现一些css图形的绘制效果


IP属地:北京1楼2024-11-18 22:25回复