标签：0px 边框 padding background 20px 简写 css

css快捷方式

css的属性是非常多的，比如，padding-top、padding-bottom、background-color、background-repeat等。

但是除了这种笨拙的输入以外还有一种比较便捷的方式。

盒子模型的一些简写方式

例一 内边距简写

下面是非常正常的代码输入格式。

padding-top:0px;/*padding内边距*/
padding-right:20px;
padding-bottom:30px
padding-left:10px;

我们可以变换一下这样，css的代码是根据上、右、下、左顺时针的顺序来输入代码。如果想要调整某一个位置就可以自己推算一下。

padding: 0px 20px 30px 10px ;
		/*0上 20右 30下 10左*/

例二 外边距简写

在举一个例子

margin-top:0px;
margin-right:20px;
margin-bottom:30px;
marging-left:10px;

简写方式,也是同样的原理根据顺时针判断内边距每个像素的大小。

marging:0px 20px 30px 10px;
        /*0上 20右 30下 10左*/

例三 内外边距相同简写方法

还有另外一种，如果四个边距的值是相同的，还可以更短的写一下。

padding:20px;   /*上 右 下 左 均为20px*/

例四 内外边距上下和左右相同简写方法

如果上边的内外编剧其中两个像素是相同的还用其他方式i可以写。

margin: 0px 20px;
         /*0px代表上和下
		  20px代表左和右*/

例五 边框简写方式

边框属性也是一样可以简写的

border-width： thin；
/*边框的宽度    thin是细*/
border-style： solid；
/*边框的样式    solid是实线*/
border-color： #007e7e;
/*边框的颜色*/

简写的方式是,边框和内外边距不同，他们是可以用任何顺序组成。

border: thin solid #007e7e;

例子六 背景和边框简写方式

正常的输入格式

background-color:white;
background-image:url(imges/图片.jpg);
background-repeat:repeat-x;

类似与边框，简写也是可以采用任何顺序进行。

background:white url(imges/图片.jpg) repeat-x;

标签：0px,边框,padding,background,20px,简写,css
来源： https://www.cnblogs.com/tallish/p/14882650.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。