盒模型
Margin(外边距) ：与其他盒模型的距离
Border(边框):可以设置边框样式
Padding(内边距): 边框与内容之间的间隔
Content(内容): 可以放置文字、图片等具体内容；
文字样式
在内部样式表中设置了 p 标签的样式
p{
/* 文字大小 */
font-size: 50px;
/* 设置字体 */
font-family: "微软雅黑";
/* 文字加粗 */
font-weight: 900;
/* 小型大写字母(大小不变，小写英文字母转为大写英文字母) */
font-variant: small-caps;
/* 文本阴影(水平方向阴影 垂直方向阴影 阴影模糊度 阴影颜色) */
text-shadow: 10px 12px 20px slategray;
/* 设置文字颜色 */
color: red;
/* 首字母大写 */
text-transform: capitalize;
/* 文本居中 */
text-align: center;
/* 文本行高 */
line-height: 200px;
/* 设置文本换行(默认) */
word-wrap: break-word;
/* 设置不换行文本 */
white-space: nowrap;
/*设置 p 标签的首行缩进(2em=缩进2字符)*/
text-indent: 2em;
}
引用外部字体
在内部样式表中
@font-face {
font-family: LiMouren; /*给字体起名*/
src: url();/*引用的字体文件路径 */
}
去除 a 标签的下划线
a{
text-decoration:none;
}
背景样式
在内部样式表中设置了 div 块标签的样式
div{
/* 设置 div 块标签高度height和宽width */
width: 500px;
height: 1000px;
/* 设置 div 边框 （粗细 样式 颜色） */
border: 15px groove gray;
/* 添加背景颜色 */
background-color: antiquewhite;
/* 添加背景照片 */
background-image:url(./img/wallhaven-exy7vr.jpg);
/* 背景图片定位 */
background-position: left top;
/* 背景覆盖整个盒模型，但图片可能会被裁剪 */
background-size: cover/100%;
/* 图片展示完全，但盒模型只有上下/左右被完全覆盖 */
background-size: contain;
/* 背景在网页中固定 */
background-attachment:fixed;
/* 背景盒模型定位（默认从padding开始定位） */
background-origin: border-box;
/* 背景裁剪，裁去选择之外的多余部分 */
background-clip: content-box;
}
div 鼠标浮动的阴影效果
div:hover{
/* div 阴影效果(水平方向阴影 垂直方向阴影 阴影模糊度 阴影颜色) */
box-shadow: 20px 20px 10px gray;
/*设置阴影浮现动作*/
transition: 2s;
}
背景样式实例
最终效果：
思路分析：
1.小鸟图片和小人图片的排序显然是在最上层，但是边框是可以看见的，边框是有透明度设置的，图片挨住了边框线，在盒模型中的位置是 Borde;
2.背景有个底色，素材中有底色图片，直接用，边框还能看见，说明底色位置在盒模型中是Padding;
3.格子排序在底色之上,盒模型位置在Content
4.底色和格子有留白，需设置 Padding 距离
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiMouren</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
border: 15px groove rgba(247, 14, 14, 0.3);
padding: 25px;
width: 600px;
height: 800px;
/*插入多个背景照片使用逗号隔开，设置样式也必须一一与之对应*/
background-image: url(小鸟),url(小人),url(格子),url(底色);
/* 背景重复设置 */
background-repeat: no-repeat,no-repeat,repeat,repeat;
/* 背景盒模型定位 */
background-origin:border-box,border-box,content-box,padding-box;
/* 背景定位 */
background-position:left top,right bottom,center,center;
/* 背景裁剪 */
background-clip: border-box,border-box,content-box,padding-box;
}
div>p{
/* 文字缩进 */
text-indent: 2em;
font-size: 14px;
}
</style>
</head>
<body>
<div>
<br>
<br>
<br>
<br>
<br>
<p>今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好</p>
</div>
</body>
</html>
922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
