当前阅读教程:微信小程序设计教程 > 内边距 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 框模型概述 | 下一篇: 边框 |
CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距。 1.基础语法元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。 (1)CSS padding 属性CSS padding 属性定义元素边框与元素内容之间的空白区域。padding 属性接受长度值或百分比值,但不允许使用负值。 例如,如果你希望所有 h1 元素的各边都有 10 像素的内边距,只需要这样,代码示例 如下: h1 {padding: 10px;} 你还可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值,代码示例 如下: h1 {padding: 10px 0.25em 2ex 20%;} (2)单边内边距属性也通过使用下面四个单独的属性,分别设置上、右、下、左内边距: n padding-top n padding-right n padding-bottom n padding-left 你也许已经想到了,下面的规则实现效果与上面的简写规则是完全相同的,代码示例 如下: h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; } (3)内边距的百分比数值前面提到过,可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的,这一点与外边距一样。所以,如果父元素的 width 改变,它们也会改变。 下面这条规则把段落的内边距设置为父元素 width 的 10%,代码示例 如下: p {padding: 10%;} 例如:如果一个段落的父元素是 div 元素,那么它的内边距要根据 div 的 width 计算,代码示例 如下: <div style="width: 200px;"> <p>This paragragh is contained within a DIV that has a width of 200 pixels.</p> </div> 注意:上下内边距与左右内边距一致;即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度。 2.小程序应用根据基础的语法,下面在微信小程序中实现如何设定组件的内边距。 .wxml文件代码示例 如下: <view> <view>默认文本,不带内边距</view> </view> <view></view><!--高度10的空白行--> <view> <view>默认文本,内边距25px</view> </view> <view></view><!--高度10的空白行--> <view> <view>默认文本,只有左25px</view> </view> .wxss文件代码示例如下: .hr{min-height: 10px;} /*高度10的空白行*/ .cls1{ width: 100px; height: 100px; background-color:gainsboro; } .cls2{ width: 100px; height: 100px; background-color:gainsboro; padding: 25px; /* 设定内边距 */ } .cls3{ width: 100px; height: 100px; background-color:gainsboro; padding-left: 25px; /*只设定左内边距,其他几个方向雷同*/ } 效果如图4-4所示。 |
|
上一篇: 框模型概述 | 下一篇: 边框 |