CSS学习笔记Padding 属性中参数的定义与使用

一直都对CSS中Padding 属性中参数个数的定义颇为困惑，例如：
body { padding: 32px;}
body { padding: 32px 24px; }
body { padding: 32px 24px 18px; }
body { padding: 32px 24px 18px 12px; }

今天baidu查看了CSS的标准文档，其中是这样规定的：
如果只提供一个，将用于全部的四条边；
如果提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
body { padding: 36px;}　　　//对象四边的补丁边距均为36px
body { padding: 36px 24px; }
//上下两边的补丁边距为36px，左右两边的补丁边距为24px
body { padding: 36px 24px 18px; }
//上、下两边的补丁边距分别为36px、18px，左右两边的补丁边距为24px
body { padding: 36px 24px 18px 12px; }
//上、右、下、左补丁边距分别为36px、24px、18px、12px

做个记号，表忘记了。

赞 (0)

相关推荐

  • css下margin、padding、border、background和font缩写示例

    下面用一些比较常用的属性来做示例. margin margin-top:1px;  margin-right:1px;  margin-bottom:1px;  margin-left:1px;  代码简化为:margin:1px margin-top:1px;  margin-right:2px;  margin-bottom:1px;  margin-left:2px;  代码简化为:margin:1px 2px margin-top:1px;  margin-right:2px;  mar

  • CSS百分比padding制作图片自适应布局

    CSS百分比padding制作图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比值不一样. 这么设计的原因在我的新书(应该不出几个月就要出版了)中会有说明,这里不展开. 对于padding属性而言,任意方向的百分比padding都现对于宽度计算可以让我们轻松实现固定比例的块级容器,举个例子,假设现在有个<div>元素: div { padding: 50%; } 或者: di

  • Class与ID区别 margin和padding区别 CSS学习笔记

    由于现在百分之99.99%的CMS都是用div+css来构建网页模板的,被逼无奈,一大把年纪了还要学习CSS,说实话没觉得用div来布局比table好在什么地方!但迫于行势,先硬着头皮看吧,能学多少是多少.根据数据与结构分离的原则,CSS最好要独立于网页文件,用 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="../xxx/web.css" /> 语句将CSS文件调入网页

  • CSS学习笔记Padding 属性中参数的定义与使用

    一直都对CSS中Padding 属性中参数个数的定义颇为困惑,例如: body { padding: 32px;} body { padding: 32px 24px; } body { padding: 32px 24px 18px; } body { padding: 32px 24px 18px 12px; } 今天baidu查看了CSS的标准文档,其中是这样规定的: 如果只提供一个,将用于全部的四条边: 如果提供两个,第一个用于上-下,第二个用于左-右: 如果提供三个,第一个用于上,第二

  • ng2学习笔记之bootstrap中的component使用教程

     前序: 现在angular2已经除了集成的angular-cli,建议大家可以基于这个来快速开发ng2的项目,不用自己再搭建环境: 相关内容请前往:https://angular.cn/docs/ts/latest/cli-quickstart.html 正文: 以图片轮播组件carousel为例: 首先安装好ng2-bootstrap,bootstrap npm install ng2-bootstrap bootstrap --save 在需要用到的模块中导入 import { Carou

  • Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解

    本文实例讲述了Python GUI编程学习笔记之tkinter中messagebox.filedialog控件用法.分享给大家供大家参考,具体如下: 相关内容: messagebox 介绍 使用 filedialog 介绍 使用 首发时间:2018-03-04 22:18 messagebox: 介绍:messagebox是tkinter中的消息框.对话框 使用: 导入模块:import tkinter.messagebox 选择消息框的模式: 提示消息框:[返回"ok"] tkint

  • jQuery学习笔记[1] jQuery中的DOM操作

    DOM分为3个方面,即DOM Core,HTML-DOM,CSS-DOM. 1,DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它. JavaScript中的getElementById(),getElementsByTagName()...等方法. 例如:使用DOM Core来获取表单对象的方法: document.getElementsByTagName("form"); 2,HTML-DOM. 在使用JavaScript和DOM为HTML

  • Python学习笔记之函数的参数和返回值的使用

    01.函数参数和返回值的作用 函数根据 有没有参数 以及 有没有返回值,可以相互结合,共有四种: 无参数 无返回值 无参数 有返回值 有参数 无返回值 有参数 有返回值 定义函数时候,是否接收参数,或者时候返回结果,是根据实际功能需求决定的. 如果函数内部处理的数据不确定,就可以将外界的数据以参数形式传递到函数内部. 如果希望一个函数执行完成后,向外界汇报执行结果,就可以增加函数的返回值. 02.函数的返回值-进阶 在程序开发中,有时候,会希望一个函数执行结束后,告诉调用者一个结果,以便调用者针

  • Vue 2.0学习笔记之Vue中的computed属性

    Vue 2.0学习笔记之Vue中的computed属性

    Vue中的 computed 属性称为 计算属性 .在这一节中,我们学习Vue中的计算属性如何使用?记得在学习Vue的模板相关的知识的时候,知道在模板内可以使用表达式,而且模板内的表达式是非常的便利,但这种遍历是有一定的限制的,它们实际上是用于一些简单的运算.也就是说,如果在模板中放入太多的逻辑会让模板过重而且难以维护.咱们先来看一个示例: <div id="app"> <h1>{{ message.split('').reverse().join('') }}

  • vue学习笔记之Vue中css动画原理简单示例

    本文实例讲述了Vue中css动画原理.分享给大家供大家参考,具体如下: 当transition包裹了一个元素之后,vue会自动分析元素的css样式,构建动画流程. so,我们需要定义style. vue中的css动画,其实就是某一个时间点,给元素再增加了一个css样式体现的. v-if.v-show.动态组件 都可以实现过渡效果. 如果没有给transition定义name,vue中默认是.v-enter..v-leave-to. <!DOCTYPE html> <html lang=&

  • jQuery学习笔记之jQuery中的$

    在jQuery中,最常用的莫过于使用美元符号$,它提供了各种各样的丰富功能.包括选择页面中一个或者一类元素.作为功能函数的前缀.windows.onload的完善,创建DOM节点等.本文介绍jQuery的用法.作为基础 1.选择器 在css中,选择器的作用是选择页面的某一类(类别选择器)元素或者某个(id选择器).而jQuery中的"$"作为选择器,同样是选择某类或者某个元素,只不过jQuery提供了更全面的选择方式.而且为用户处理了浏览器兼容问题. 例如在在css<h2>

  • JQuery 学习笔记 element属性控制

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

随机推荐