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; 
　　margin-bottom:3px; 
　　margin-left:2px; 
　　代码简化为：margin:1px 2px 3px

　　margin-top:1px; 
　　margin-right:2px; 
　　margin-bottom:3px; 
　　margin-left:4px; 
　　代码简化为：margin:1px 2px 3px 4px

　　注意：当属性值是0的时候单位可以不写如：0px 直接就写成0

padding

　　padding的书写方法和margin相类似

　　padding-top:1px; 
　　padding-right:1px; 
　　padding-bottom:1px; 
　　padding-left:1px; 
　　代码简化为：padding:1px

　　padding-top:1px; 
　　padding-right:2px; 
　　padding-bottom:1px; 
　　padding-left:2px; 
　　代码简化为：padding:1px 2px

　　padding-top:1px; 
　　padding-right:2px; 
　　padding-bottom:3px; 
　　padding-left:2px; 
　　代码简化为：padding:1px 2px 3px

　　padding-top:1px; 
　　padding-right:2px; 
　　padding-bottom:3px; 
　　padding-left:4px; 
　　代码简化为：padding:1px 2px 3px 4px

border

　　border-width:1px; 
　　border-style:solid; 
　　border-color:#000000; 
　　代码简化为：border:1px solid #000

background

　　background-color:#CCFFFF; 
　　background-image:url(图片路径); 
　　background-repeat:repeat-x; 
　　background-position:5px 4px; 
　　代码简化为：background:#CFF url(图片路径) repeat-x 5px 4px

font

　　font-size:26px; 
　　font-weight:bold; 
　　font-family: “宋体”; 
　　代码简化为：font:26px bold “宋体”

color属性值

　　color:#000000; 
　　color:#ff0000; 
　　代码简化为：color:#000, color:#f00

赞 (0)

相关推荐

  • 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的标准文档,其中是这样规定的: 如果只提供一个,将用于全部的四条边: 如果提供两个,第一个用于上-下,第二个用于左-右: 如果提供三个,第一个用于上,第二

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

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

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

  • 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

  • js+div+css下拉导航菜单完整代码分享

    js+div+css下拉导航菜单完整代码分享

    效果预览:http://keleyi.com/keleyi/phtml/menu/1.htm 下拉菜单 js+div+css下拉导航菜单完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w

  • CSS的margin边界叠加深度剖析图文演示

    CSS的margin边界叠加深度剖析图文演示

    边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. 当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加,见图: 元素的顶边界与前面元素的底边界发生叠加 当一个元素包含在另一个元素中时(假设没有填充或边框将边界分隔开),它们的顶和/或底边界也发生叠加,见图: 元素的顶边界与父元素的顶边界发生叠加 尽管初看上去有点儿奇怪,但是边界甚至可

  • 纯css下拉菜单 无需js

    纯css下拉菜单 无需js

    再来个今天某人说过的例子:纯css下拉菜单: 效果图 这个的实现很简单,主要是:hover和过渡属性transition的使用. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> *{ margin: 0; padding:0; font-size

  • elementUI实现下拉选项加多选框的示例代码

    elementUI实现下拉选项加多选框的示例代码

    目录 下拉加多选框 升级-添加全部选项 需求改版完善 因产品需求和UI样式调整,和element自带的下拉多选有冲突,索性自己尝试修改如下: 下拉加多选框 效果如下图: 封装如下: <template> <div class="select-checked"> <!-- 下拉加多选框 --> <el-select v-model="value" multiple placeholder="请选择" :po

  • python下实现二叉堆以及堆排序的示例

    堆是一种特殊的树形结构, 堆中的数据存储满足一定的堆序.堆排序是一种选择排序, 其算法复杂度, 时间复杂度相对于其他的排序算法都有很大的优势. 堆分为大头堆和小头堆, 正如其名, 大头堆的第一个元素是最大的, 每个有子结点的父结点, 其数据值都比其子结点的值要大.小头堆则相反. 我大概讲解下建一个树形堆的算法过程: 找到N/2 位置的数组数据, 从这个位置开始, 找到该节点的左子结点的索引, 先比较这个结点的下的子结点, 找到最大的那个, 将最大的子结点的索引赋值给左子结点, 然后将最大的子结点

  • 对numpy下的轴交换transpose和swapaxes的示例解读

    如下所示: 解读: transpose( ) 方法的参数是一个 由 轴编号(轴编号自0 开始) 序列构成的 元组. 开始时,数组的轴编号序列是默认从 0开始的 :0,1,2,, 坐标的顺序也是这个轴编号的顺序,(0,1,2) 当使用 transpose 时候,轴编号的顺序变成了 (1,0,2) 说明 0号轴和1号轴的顺序变了, 那么,坐标的顺序也应该变了, 例如 元素 8: 开始时:根据轴顺序 0,1,2.他的坐标是 (1,0,0) 现在,根据周顺序 1,0,2:他的坐标是(0,1,0). sw

  • Flutter 实现下拉刷新上拉加载的示例代码

    本文介绍了Flutter 实现下拉刷新上拉加载的示例代码,分享给大家,具体如下: 效果图 使用方法 添加依赖 dependencies: pull_to_refresh: ^1.5.7 导入包 import 'package:pull_to_refresh/pull_to_refresh.dart'; 页面代码样例 class _MyHomePageState extends State<MyHomePage> { List<String> items = ["1&quo

  • css font缩写总结附实例

    font的缩写,如果省略family, 如这样子: font:700 14px/22px; 则在Firefox下是不生效的 完整的写法是:font:700 14px/22px arial; .login_top{height:26px;font:bold 14px/26px "宋体"; border:1px solid #000} .login_top2{height:26px; line-height:26px; font-weight:bold;font-size:14px;bor

随机推荐