这是我参与 8 月更文挑战的第 3 天，活动详情查看： 8月更文挑战
感激相遇 你好 我是阿ken
作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
🌊🌈关于前言：
文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)
本博客暂适用于刚刚接触HTML以及好久不看想要复习的小伙伴
击鼓之后，我们把在黑暗中跳舞的心脏叫做月亮
海子《亚洲铜》
🌊🌈关于内容：
🦞🐙🦀5.2.2 边距属性
CSS的边距属性包括“内边距”和“外边距”两种。
🗨🦁1. 内边距
在网页设计中，为了调整内容在盒子中的显示位置，常需要给元素设置内边距，所谓内边距指的是元素内容与边框之间的距离，也常常称为内填充，在CSS中padding属性用于设置内边距，同边框属性border一样，padding也是复合属性，其相关设置方法如下:\
● padding-top: 上内边距;
● padding-right: 右内边距;
● padding-bottom: 下内边距;
● padding-left: 左内边距:
● padding: 上内边距 [ 右内边距 下内边距 左内边距 ]。
在上面的设置中，padding相关属性的取值可为auto自动(默认值)、不同单位的数值相对于父元素(或浏览器)宽度的百分比(%)，实际工作中最常用的是像素值(px)，不允许使用负值。
同边框相关属性一样，使用复合属性padding定义内边距时，必顶按顺时针顺序采用值复制，一个值为四边、两个值为上下/左右，三个值为上/左右/下。
案例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置内边距</title>
<style type="text/css">
.border {
border: 5px solid #F60;
} /*为图像和段落设置边框*/
img {
padding: 80px;/*图像4个方向内边距相同*/
padding-bottom: 0;/*单独设置下内边距*/
} /*上面两行代码等价于 padding:80px 80px 0;*/
p{
padding: 5%;
} /*段落内边距为父元素宽度的5%*/
</style>
</head>
<body>
<img class="border" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3660691301,837491451&fm=26&gp=0.jpg" alt="阿ken"/>
<p class="border">段落内边距为父元素宽度的5%。</p>
</body>
</html>
由于段落的内边距设置了%数值，当拖动浏览器窗口改其宽度时，段落的内边距会随之发生变化(此时< p>标记的父元素为< body> )。
注意:
如果设置内外边距为百分比，则不论上下或左右的内外边距， 都是相对于父元素宽度 width 的百分比，随父元素 width 的变化而变化，和高度 height 无关。
🗨🦁2. 外边距
网页是由多个盒子排列而成的，要想拉开盒子与盒于之间的距离，合理地布局网页，就需要为盒子设置外边距，所谓外边距指的是元素边框与相邻元素之间的距离。在CSS中margin属性用于设置外边距，它是一个复合属性， 与内边距padding的用法类似，设置外边距的方法如下：
● margin-top: 上外边距;
● margin-right: 右外边距;
● margin-bottom: 下外边距;
● margin-left: 左外边距;
● margin: 上外边距 [右外边距 下外边距 左外边距] 。
margin相关属性的值，以及复合属性margin取 1 ~ 4 个值的情况与padding相同。但是外边距可以使用负值，使相邻元素重叠。
当对块级元素应用宽度属性width，并将左右的外边距都设置为auto,可使块级元素水平居中，实际工作中常用这种方式进行网页布局，示例代码如下：
.header{
width: 960px;
margin: 0 auto;
}
案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置外边距</title>
<style type="text/css">
img{
width: 300px;
border: 5px solid red;
float: left; /*设置图像左浮动*/
margin-right: 50px; /*设置图像的右外边距*/
margin-left: 30px; /*设置图像的左外边距*/
/*上面两行代码等价于margin: 0 50px 0 30px;*/
}
p{
text-indent: 2em;
}
</style>
</head>
<body>
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1471480362,870954799&fm=26&gp=0.jpg" alt="我是阿ken"/>
<p>你好，我是阿ken</p>
</body>
</html>
使用浮动属性float使图像居左，同时设置图像的左外边距和右外边距，使图像和文本之间拉开一定的距离， 实现常见的排版效果(对于浮动，这里了解即可，后面章节将会详细介绍)。
图像和段落文本之间拉开了一定的距离，实现了图文混排的效果。但是仔细观察效果图会发现，浏览器边界与网页内容之间也存在一定的距离， 然而我们并没有对<p>或<body>元素应用内边距或外边距，可见这些元素默认就存在内边距和外边距样式。网页中默认就存在内外边距的元素有<body>、<h1>~<h6>、<p>等。
为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：
* {
padding: 0; /*清除内边距*/
margin: 0; /*清除外边距*/
}
清除元素默认内边距和外边距样式后，浏览器边界与网页内容之间的距离消失。
🦞🐙🦀5.2.3 box-shadow属性
在网页制作中，经常需要对盒子添加阴影效果。CSS中的box-shadow属性可以实现阴影的添加。
基本语法格式：
box-shadow: 像素值1 像素值2 像素值3 像素值4 颜色值 阴影类型;
在上面的语法格式中，box-shadow属性共包含 6个参数值。
box-shadow 属性参数值：
| 参数值 | 说明 |
|---|---|
| 像素值1 | 表示元素水平阴影位置，可以为负值(必选属性) |
| 像素值2 | 表示元素垂直阴影位置，可以为负值(必选属性) |
| 像素值3 | 阴影模糊半径(可选属性) |
| 像素值4 | 阴影扩展半径，不能为负值(可选属性) |
| 颜色值 | 阴影颜色(可选属性) |
| 阴影类型 | 内阴影 ( inset ) /外阴影 (默认) (可选属性) |
其中“像素值1”、“像素值2”为必选参数值不可以省略，其余为可选参数值，不设置”阴影类型“参数时默认为”外阴影“，设置"inset"参数值后，阴影类型变为内阴影。
案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>box-shadow属性</tit1e>
<style type="text/css">
img{
padding: 20px;
border-radius: 50%;
border: 1px solid #CCC;
box-shadow: 5px 5px 10px 2px #999 inset;
}
</style>
</head>
<body>
<img class="border" src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1172960894,4133724990&fm=26&gp=0.jpg" alt="阿ken"/>
</body>
</html>
代码定义了一个水平位置和垂直位置均为5px，模糊半径为10px，扩展半径为2px的浅灰色内阴影。
图片出现了内阴影效果。值得一提的是， 同text-shadow属性(文字阴影属性)一样，box-shadow属性也可以改变阴影的投射方向及添加多重阴影效果。
案例：
box-shadow: 5px 5px 10px 2px #999 inset, -5px -5px 10px 2px #333 inset;
🦞🐙🦀5.2.4 box-sizing 属性
当一个盒子的总宽度确定之后，要想给盒子添加边框或内边距，往往需要更改width属性值，才能保证盒子总宽度不变，操作起来烦琐且容易出错，运用CSS3的box-sizing属性可以轻松解决这个问题。box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框。
基本语法格式：
box-sizing: content-box/border-box;
在上面的语法格式中，box-sizing属性的取值可以为content-box或border-box。
对它们的解释如下：
● content-box: 浏览器对盒模型的解释遵从 W3C 标准， 当定义 width 和 height 时，它的参数值不包括 border 和 padding 。
● border-box: 当定义 width 和 height 时，border 和 padding 的参数值被包含在 width 和 height 之内。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>box-sizing</title>
<style type="text/css">
.box1 {
width: 300px;
height: 100px;
padding-right: 10px;
background: #F90;
border: 10px solid #CCC;
box-sizing: content-box;
}
.box2 {
width: 300px;
height: 100px;
padding-right: 10px;
background: #F90;
border: 10px solid #CCC;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1">content_box属性</div>
<div class="box2">border_box属性</div>
</body>
</html>
在上述代码中定义了两个盒子，并对它们设置相同的宽、高、右内边距和边框样式。并且，对第一个盒子定义 “box-sizing: content-box; ” 样式，对第二个盒子定义 “box-sizing: border-box;” 样式。
应用了 “box-sizing: content-box;” 样式的盒子1，宽度比width参数值多出 30px，总宽度为 330px；而应用了 “box-sizing: border-box;” 样式的盒子2，宽度等于width参数值，总宽度仍为 300px。
可见应用 “box-sizing: border-box;” 样式后，盒子border和padding的参数值是被包含在width和height之内的。
🌴🌵🌳5.3 背景属性
🦞🐙🦀5.3.1 设置背景颜色(background-color)
在CSS中，使用background-color属性来设置网页元素的背景颜色，其属性值与文本颜色的取值一样，可使用预定义的颜色值、十六进制#RRGGBB或RGB代码rgb(r,g,b)。
background-color的默认值为transparent,即背景透明，此时子元素会显示其父元素的背景。
案例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景颜色</title>
<style type="text/css">
body{
background-color: #CCC;
}/*设置网页的背景颜色*/
h2{
font-family: "微软雅黑";
color: #FFF;
background-color: #FC3;
}/*设置标题的背景颜色*/
</style>
</head>
<body>
<h2>你好</h2>
<p>我是阿ken</p>
</body>
</html>
上述代码运行后，标题文本的背景颜色为黄色，段落文本显示父元素body的背景颜色。这是由于未对段落标记<p>设置背景颜色时，会默认为透明背景(transparent)，所以段落将显示其父元素的背景颜色。
🦞🐙🦀5.3.2 设置背景图像(background-image)
背景不仅可以设置为某种颜色，还可以将图像作为元素的背景。在CSS中通过background-image属性设置背景图像。
案例：
body{
background-color: #CCC; /*设置网页的背景颜色*/
background-image: url(#); /*设置网页的背景图像*/
}
<p>阿ken</p>
上述代码运行后，容易看出，背景图像自动沿着水平和竖直两个方向平铺，充满整个页面，并且覆盖了<body>的背景颜色。
🦞🐙🦀5.3.3 背景与图片不透明度的设置
🗨🦁1. RGBA模式
RGBA是CSS3新增的颜色模式，它是RGB颜色模式的延伸，该模式是在红、绿、蓝三原色的基础上添加了不透明度参数。
语法格式:
rgba(r, g, b, alpha);
在上面的语法格式中，前三个参数与RGB中的参数含义相同，alpha参数是一个介于 0.0 ( 完全透明 ) 和 1.0 ( 完全不透明 ) 之间的数字。
案例：
p {
background-color: rgba(255, 0, 0, 0.5);
}/*RGBA模式为p元素指定透明度为0.5，颜色为红色的背景*/
<p>阿ken</p>
🗨🦁2. opacity 属性
在CSS3中，使用 opacity属性能够使任何元素呈现出透明效果。
语法格式:
opacity: opacityValue;
在上述语法中，opacity属性用于定义元素的不透明度，参数opacityVaule表示不透明度的值，它是一个介于 0 ~ 1 的浮点数值。其中，0 表示完全透明，1 表示完全不透明，而 0.5 则表示半透明。
案例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>opacity属性设置图像的透明度</title>
<style type="text/css">
#boxwrap {
width: 330px;
margin: 10px auto;
border: solid 1px #FF6666;
}
img:first-child {
opacity: 1;
}
img:nth-child(2) {
opacity: 0.8;
}
img:nth-child(3) {
opacity: 0.5;
}
img:nth-child(4) {
opacity: 0.2;
}
</style>
</head>
<body>
<div id="boxwrap">
<img src="#" width="160" height="109">
<img src="#" width="160" height="109">
<img src="#" width="160" height="109">
<img src="#" width="160" height="109">
</div>
</body>
</html>
上述代码通过使用opacity属性为同一张图片设置了不同的透明度， 且opacityVaule依次减小。
opacityValue的值越小表示透明度越高。
今日入门学习暂时告一段落
Peace
🌊🌈往期回顾：
阿ken的HTML、CSS的入门指南(一)_HTML基础
阿ken的HTML、CSS的入门指南(二)_HTML页面元素和属性
阿ken的HTML、CSS的入门指南(三)_文本样式属性
阿ken的HTML、CSS的入门指南(四)_CSS3选择器
阿ken的HTML、CSS的入门指南(五)_CSS盒子模型
阿ken的HTML、CSS的入门指南(六)_CSS盒子模型
阿ken的HTML、CSS的入门指南(七)_CSS盒子模型
阿ken的HTML、CSS的入门指南(八)_CSS盒子模型
阿ken的HTML、CSS的入门指南(九)_浮动与定位
阿ken的HTML、CSS的入门指南(十)_浮动与定位
阿ken的HTML、CSS的入门指南(十一)_浮动与定位
🌊🌈关于后记：
感谢阅读，希望能对你有所帮助 博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我 感谢每一位小伙伴不吝赐教
原创不易，「点赞」+「评论」 谢谢支持❤
