【Web】block、inline、inline-block元素与background属性概述(案例实现社交账号注册按钮效果)
步骤三：社交账号注册按钮效果
文章目录
简单记录 - 慕课网 - 前端 步骤三：社交账号注册按钮效果
了解元素的分类，更加灵活的选择标签，学会背景图片的设置和使用、最终实现一个社交账号注册的一个按钮的特效。
案例的演示与分析
行内块级元素
背景图片
在页面内实现水平居中
这几个背景图片在页面内实现水平居中是怎么做到的？
三张图片并排一起，在页面内实现水平居中
- 行内块级元素
- 背景图片
- 在页面内实现水平居中
分别学习去搞定，再去实现吧。
CSS属性与HTML标签
元素分类
块级元素
块级元素
- 块级元素显示会独占一行，例如标题
<h1></h1>,段落<p></p>等。
块级元素可以设置宽和高的。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#box1{
width: 200px;
height:200px;
background: yellow;
}
#box2{
width: 200px;
height:200px;
background: red;
}
</style>
</head>
<body>
<div id="box1">我好呀</div>
<p id="box2">你好呀</p>
<h1>我很好呀，你还好呀。</h1>
<a href="#">这是一个超链接</a>
<a href="#">这是一个超链接</a>
<a href="#">这是一个超链接</a>
<a href="#">这是一个超链接</a>
</body>
</html>
内联元素
内联元素
- 内联元素又称行内元素，多个内联元素处在一行中，例如
<a>等，容不下了会自动换行 。
内联元素一般是不能设置的宽和高得，设置了是没用用的。
例如: 给a标签设置了宽和高，没作用的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#box1{
width: 200px;
height:200px;
background: yellow;
}
#box2{
width: 200px;
height:200px;
background: red;
}
a{
width: 200px;
height: 200px;
background:gray;
}
</style>
</head>
<body>
<div id="box1">我好呀</div>
<p id="box2">你好呀</p>
<h1>我很好呀，你还好呀。</h1>
<a href="#">这是一个超链接</a>
<a href="#">这是一个超链接</a>
<a href="#">这是一个超链接</a>
<a href="#">这是一个超链接</a>
</body>
</html>
行内块级元素
行内块级元素
- 行内块级元素显示会与其他相邻元素出现在同一行中，并且两个相邻元素之间存在空白空间 （默认的）。
行内块级元素是可以设置宽度和高度的。
例如 ，<button>就是一个行内块级元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#box1{
width: 200px;
height:200px;
background: yellow;
}
#box2{
width: 200px;
height:200px;
background: red;
}
a{
width: 200px;
height: 200px;
background:gray;
}
button{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<div id="box1">我好呀</div>
<p id="box2">你好呀</p>
<h1>我很好呀，你还好呀。</h1>
<a href="#">这是一个超链接</a>
<a href="#">这是一个超链接</a>
<a href="#">这是一个超链接</a>
<a href="#">这是一个超链接</a>
<br>
<button>我是一个button按钮滴</button>
<button>我是一个button按钮滴</button>
<button>我是一个button按钮滴</button>
<button>我是一个button按钮滴</button>
</body>
</html>
行内元素有内联元素和块级元素一些特型。
行捏元素的空白区是页面默认存在的，我们可以利用或解决点着空白区的这个问题。
CSS的display属性
CSS的display属性
CSS提供的display属性可以设置任意标签为块级、内联或行内块级元素
- 值为block的话，表示当前标签是块级元素。
- 值位inline的话，表示当前标签是内联元素。
- 值位inline-block的话，表示当前标签是行内块级元素。
CSS的display属性的小案例练习
参考下图，分别将a标签和span标签设置成块级元素，并设置宽度、高度和背景色
效果图：
任务
1、分别将a标签和span标签设置成块级元素
2、分别设置a标签和span标签宽度和高度都是200px
3、设置a标签的背景色是红色，设置span标签的背景色是
任务提示 1、红色是red、绿色是green 2、设置 display:block;就行
实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的display属性</title>
<style>
*{
padding:0;
margin:0;
}
a{
width:200px;
height:200px;
display:block;
background: red;
}
span{
width:200px;
height:200px;
display:block;
background: green;
}
</style>
</head>
<body>
<a href="">请把我变成块元素</a>
<span>请把我变成块元素</span>
</body>
</html>
实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的display属性</title>
<style>
*{
padding:0;
margin:0;
}
a{
width:200px;
height:200px;
display:block;
background: red;
}
span{
width:200px;
height:200px;
display:block;
background: green;
}
</style>
</head>
<body>
<a href="">请把我变成块元素</a>
<span>请把我变成块元素</span>
</body>
</html>
效果
block
inline-block
inline
CSS中的背景图片属性
什么是背景图片？
所谓背景图片就是引入一张外部图片作为某个标签的背景。
引入图片做标签的背景
CSS中背景图片属性有哪些呢？
background-image
background-image属性用于设置一个或多个背景图像
格式是这样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-image属性</title>
<style type="text/css">
h1{
background-image: url("imgs/btn1.png");
}
</style>
</head>
<body>
<h1>我是个h1标签</h1>
</body>
</html>
效果：
background-repeat
background-repeat属性定义背景图像的平铺方式
background-repeat属性的值 no-repeat决定图像不会被重复
no-repeat 不重复 背景图不重复平铺显示
repeat-x 水平重复
repeat-y 垂直重复
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-repeat属性</title>
<style type="text/css">
h1{
background-image: url("imgs/btn1.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>我是个h1标签</h1>
</body>
</html>
效果：
background-position属性
background-position属性用于设置背景图像显示的初始位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-positiont属性</title>
<style type="text/css">
h1{
background-image: url("imgs/btn1.png");
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<h1>我是个h1标签</h1>
</body>
</html>
background-size
background-size属性用于设置背景图像显示的大小
例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-positiont属性</title>
<style type="text/css">
h1{
background-image: url("imgs/btn1.png");
background-repeat: no-repeat;
background-position: center;
background-position: center;
background-size: 800px;
}
</style>
</head>
<body>
<h1>我是个h1标签</h1>
</body>
</html>
显示的大小, 像素大,显示就大。
这些属性都需要自己去敲 ，别看看就行了，你看懂了就会了？ 听和看与自己实现完全是两回事的，来实现一个小案例。
实现社交账号注册按钮案例
三张图片并排一起，在页面内实现水平居中
- 行内块级元素
- 背景图片
- 在页面内实现水平居中
如何实现呢？
两行显示？？？行内块级元素，有内联元素特点 一行显示不下 就换行了。
在页面内实现水平居中，可以利用行内块级元素的特点
使用文本水平居中的属性实现居中效果 。
理论 真实案例
用css中的display属性可以随意转换元素分类
display:block 设置位行内块级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内块级元素对齐方式</title>
<style>
div {
margin: 0 auto;
text-align: center;
}
a {
display: inline-block;
/* 设置为行内块级元素 */
/* 行内块级元素允许设置宽度和高度 */
width: 161px;
height: 40px;
background-repeat: no-repeat;
background-size: 100%;
}
.btn1 {
background-image: url("imgs/btn1.png");
}
.btn2 {
background-image: url("imgs/btn2.png");
}
.btn3 {
background-image: url("imgs/btn3.png");
}
.btn4 {
background-image: url("imgs/btn4.png");
}
</style>
</head>
<body>
<div>
<a class="btn1" href="#"></a>
<a class="btn2" href="#"></a>
<a class="btn3" href="#"></a>
<a class="btn4" href="#"></a>
</div>
</body>
</html>
社交账号注册按钮效果
nine，搞定。
