整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
多程序员朋友，在用CSS进行边距调整时，老分不清楚外边距margin和内边距padding的区别，在我部门，就有两个迷糊虫。于是我上网找了一幅图，一副不可描述的图(你可不要想歪了)，他们一看就完全明白了，现在分享给你。
在什么场景中使用padding，在什么场景中使用margin，这是一个学问。你掌握了，学问就有了。
这是用padding的学问
（1）需要在border内侧添加空白，在文字与边框留有距离时；
（2）空白处需要背景色时；
（3）上下相连的两个盒子之间的空白希望等于两者之和时，比如15px+20px的padding，将得到35px的空白。
这是用margin的学问
（1）需要在border外侧添加空白时;
（2）空白处不需要有背景色时;
(3）上下相连的两个盒子之间的空白需要相互抵消时，比如15px+20px的margin，将得到20px的空白。
在CSS中，通过外边距margin属性，可设置元素周围的空间。可用margin统一指定4边，也可用margin-top等属性，特指其中一边。这种方案，在CSS中是很常见的。padding和margin的作用不同，但用法是一样的。为了区分效果，我只在一个div中用了padding，通过比较，一目了然。
在CSS表文件ys2.css中的代码
/*单独指定一个边距*/
.one-margin {
margin-left: 100px;
}
/*4个边距*/
.four-margin {
background: cadetblue;
width: 400px;
height: 200px;
margin: 10px 20px 30px 50px;
}
/*加上padding*/
.use-padding {
background: cadetblue;
width: 400px;
height: 200px;
margin: 10px 20px 30px 50px;
padding-top: 20px;
}在HTML文件中的代码
<div class="big-div">
<h1 class="one-margin">margin用法</h1>
<div class="four-margin">
margin一个值：4个边距;<br/>
margin两个值：上下边距、左右边距;<br/>
margin三个值：上边距、左右边距、下边距;<br/>
margin四个值：上边距、右边距、下边距、左边距。
</div>
<div class="use-padding">
padding一个值：4个边距;<br/>
padding两个值：上下边距、左右边距;<br/>
padding三个值：上边距、左右边距、下边距;<br/>
padding四个值：上边距、右边距、下边距、左边距。<br/>
为了区分margin和margin，我只用 padding-top,你能看出效果么?
</div>
</div>输出结果
好了，有关CSS边距的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。
#前端##HTML5##CSS##程序员##Web#
篇中我们介绍了文本的一些样式，这篇接着讲文本样式。
6.文本下划线
一般文本下划线都用在什么地方呢？我想到一个就是画重点考前划重点，有没有画面感，^v^。
用css来实现划重点，也是别具风格呀。
<!DOCTYPE html>
<html>
<head>
<title>css颜色与度量单位</title>
<style>
span{
text-decoration:underline;
}
</style>
</head>
<body>
<p>
在做等离子物理对撞实验的时候，如果把第三能量的极坐标，向负方向调整三个阿尔法单位，那么对最终的结果将会产生多少影响?
<br>
<span>2伽马一步徐龙根号3</span>
</p>
</body>
</html>text-decoration可以给文本设置下划线，上划线，删除线，取消线。
上面代码实现效果如下：
这个效果看起来两行之间的距离有点拥挤，我们可以调整的它们的距离，稍微远一点，让它们看起不那么拥挤。
7.文本的行间距
用line-height来指定行间距，因为文本都包含在p标签中，所以我们给p标签加了行间距为50px
调整后的效果如下：
看起来下划线的文字还是不够显眼啊，我们再给它加点颜色上去，会更好。
这回好多了。够显眼，就绝对记得住。
text-decoration后面可以设置的值如下：
值 | 说明 |
none | 让本身有划线装饰的文本取消掉 |
underline | 让文本的底部出现一条下划线 |
overline | 让文本的头部出现一条上划线 |
line-through | 让文本的中部出现一条删除线 |
blink | 让文本进行闪烁，基本不支持了 |
text-decoration：none这个会让本身有划线装饰的文本取消掉的意思，例如a标签，天生就带下划线，那要不想要自带的下划线就可以利用这个样式给它去掉。
来尝试一下
<!DOCTYPE html>
<html>
<head>
<title>css颜色与度量单位</title>
<style>
p{
line-height: 50px;
}
span{
text-decoration:underline;
color: red;
}
</style>
</head>
<body>
<p>
在做等离子物理对撞实验的时候，如果把第三能量的极坐标，向负方向调整三个阿尔法单位，那么对最终的结果将会产生多少影响?
<br>
<span>2伽马一步徐龙根号3</span>
<br>
<a href="http://www.baidu.com">百度</a>
</p>
</body>
</html>百度两个字下面天生就带了下换线，要去掉请使用text-decoration：none
其余几个大家可以自己动手尝试一下效果。
8.设置英文文本转换为大小写
这个标题很好理解，就是专门针对英文的，如果想把英文文本转换大小写可以使用
<!DOCTYPE html>
<html>
<head>
<title>css颜色与度量单位</title>
<style>
p{
line-height: 50px;
}
span{
text-decoration:underline;
color: red;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<p>
在做等离子物理对撞实验的时候，如果把第三能量的极坐标，向负方向调整三个阿尔法单位，那么对最终的结果将会产生多少影响?
<br>
<span>2伽马一步徐龙根号3</span>
<br>
<a href="http://www.baidu.com">百度</a>
<br>
<span class="english">
no zuo no die you why cry
<br>
you zuo you die don't ask why
</span>
</p>
</body>
</html>页面效果如下：
这里的英文文本也是写在了span标签里面，受span标签样式的影响这里也变成了红色，也加了下划线。我们给它取消掉这些样式。并给它设置让英文单词首字母变成大写的样式。
下面给出text-transform的值和作用的表格，大家可以自行动手尝试效果。
值 | 说明 |
none | 将已被转换大小写的值恢复到默认状态 |
capitalize | 将英文单词首字母大写 |
uppercase | 将英文转换为大写字母 |
lowercase | 将英文转换为小写字母 |
9.文本添加阴影
text-shadow:5px 5px 5px red;
这里有四个值（3个5px和一个red）：第一个值代表水平偏移；第二个值代表垂直偏移；第三个值代表阴影模糊度（可选）；第四个值代表阴影颜色（可选）。
10.设置文本的对齐方式
我们可以设置文本的对齐方式，如果你用过word文档的话，那一定知道左对齐、右对齐、居中对齐。css里面同样有
我们来尝试一下居中对齐
值 | 说明 |
left | 靠左对齐，默认 |
right | 靠右对齐 |
center | 居中对齐 |
justify | 内容两端对齐 |
start | 让文本处于开始的边界 |
end | 让文本处于结束的边界 |
start和end属于css3新增的功能，IE和Opera浏览器可能不支持。
11.处理文本之间的距离（letter-spacing）
也就是两个字间的距离，通过例子来感受一下
很明显的可以看到字间距变大了。
12.设置英文单词之间的距离（word-spacing）
13.文本首行的缩进（text-indent）
一般每个段落的首行都要缩进，这是书写书信文件时的规定。
我们去掉了居中对齐的样式，是为了更好地演示首行缩进的效果。
看效果图红框的地方，明显有缩进。
好了，以上就是今天的内容了。
希望大家可以早日学会编程，踏上高薪之路，早日成为白富美、高富帅。动手练，听我的没错。
景样式
1.背景属性缩写
Background: 背景色 背景图片 背景平铺方式 背景定位
例：body {
background-color:# EDEDED;
background-image:url(images/bg.png);
background-repeat:no-repeat;
background-position:50% 30px;
}
缩写后：
body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}
尺寸样式
1.宽度
width : auto | length
例：
p { width:300px;} div { width:50%;}
2.高度
height : auto | length
例：
img { height:200px;}
div { height:100px;}
边框样式
1.边框线
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
例：div { width:300px; height:100px; border-style:solid; ｝
border-top-style 设置上边框线
border-bottom-style 设置下边框线
border-left-style 设置左边框线
border-right-style 设置右边框线
2.边框宽度
border-width : medium | thin | thick | length
例：
div { width:300px; height:100px; border-style:solid; border-width:1px; ｝
border-top-width 设置上边框宽度
border-bottom-width 设置下边框宽度
border-left-width 设置左边框宽度
border-right-width 设置右边框宽度
3.边框颜色
border-color : color
例：div {
width:300px;
height:100px;
border-style:solid;
border-width:1px;
border-color:#FF0000;
}
border-top-color 设置上边框颜色
border-bottom-color 设置下边框颜色
border-left-color 设置左边框颜色
border-right-color 设置右边框颜色
4.边框样式缩写
border : border-width || border-style || border-color
例：div {
width:300px;
height:100px;
border-style:solid;
border-width:1px;
border-color:#FF0000;
}
缩写后：div {
width:300px;
height:100px;
border:1px solid #FF0000;
}
外边距
margin : auto | length
例：div { width:300px; height:100px; margin:10px;}
div { width:300px; height:100px; margin:0 auto;}
margin-top 设置上边的外边距
margin-bottom 设置下边的外边距
margin-left设置左边的外边距
margin-right设置右边的外边距
缩写型式：
margin: 上边距 右边距 下边距 左边距
margin: 上下边距左右边距
margin: 上边距 左右边距 下边距
内边距
padding : length
例：
div { width:300px; height:100px; padding:10px;}
padding-top 设置上边的内边距
padding-bottom 设置下边的内边距
padding-left设置左边的内边距
padding-right设置右边的内边距
缩写型式：
padding: 上边距 右边距 下边距 左边距
padding : 上下边距左右边距
padding : 上边距 左右边距 下边距
列表样式
1.项目符号
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha |
katakana | katakana-iroha | lower-latin | upper-latin
例：
ul { list-style-type:disc;}/*实心圆*/
ul { list-style-type:circle;}/*空心圆*/
ul { list-style-type:square;}/*实心方块*/
ul { list-style-type:none;}/*不显示项目符号*/
ol { list-style-type:decimal;}/*阿拉伯数字*/
ol { list-style-type:lower-roman;}/*小写罗马数字*/
ol { list-style-type:upper-alpha;}/*大写英文字母*/
2.自定义项目符号
list-style-image : none | url ( url )
例：
ul {list-style-image:url(images/arrow.gif)}
链接样式
1.链接没有被访问时的样式
a:link
例： a:link { color:#ff0000; }
2.链接被访问后的样式
a:visited
例： a:link { color:#0000ff; text-decoration:none; }
3.鼠标悬停在链接上的样式
a:hover
例： a:link { background-color:#ccc; }
4.鼠标点击链接时的样式
a:active
例：a:active { background-color:#ff0000;}
*请认真填写需求信息，我们会在24小时内与您取得联系。
