为了账号安全,请及时绑定邮箱和手机立即绑定

为什么<div1>和<div2>显示在了同一行,把<div2>改成<div>就显示成两行了,这是为什么,<div1>和<div2>不都是块状元素吗?还是说不能写<div1>、<div2>这样的代码,而是要使用标签选择器、类选择器和ID选择器?

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>内联块状元素</title>

<style type="text/css">

div1,p{background:blue;}

div2{background:green;}

a1{display:block;background:green;height:60px;}

a2{background:red;}

</style>

</head>

<body>

<div1>div1</div1>

<div2>div2</div2>

<p>段落1段落1段落1段落1段落1</p>

<p>段落1<a2>段落1段落1</a2>段落1段落1</p>

<a1>段落1段落1段落1段落1段落1</a1>

<a>段落1段落1段落1段落1段落1</a>

<a>段落1段落1段落1段落1段落1</a>

</body>

</html>


正在回答

3 回答

https://img1.sycdn.imooc.com//5cfbaa9f00017ff219200942.jpg这样清楚了吗?只是默认没有外边距而已 其实是单独的

1 回复 有任何疑惑可以回复我~

自己挖的坑自己填系列:div1和div2分别占一行,并且背景色不同。注意以下代码style标签中的.a2里不能写height:30px,因为内联元素的高度、宽度、及顶部和底部边距不可设置。

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>内联块状元素</title>

<style type="text/css">

.div1,p{background:blue;}

.div2{background:green;}

.a1{display:block;background:green;height:60px;}

.a2{background:red;height:30px;}

</style>

</head>

<body>

<div class="div1">div1</div>

<div class="div2">div2</div>

<p>段落1段落1段落1段落1段落1</p>

<p>段落1<a2>段落1段落1</a2>段落1段落1</p>

<a class="a1">段落1段落1段落1段落1段落1</a>

<a class="a2">段落1段落1段落1段落1段落1</a>

<a>段落1段落1段落1段落1段落1</a>

</body>

</html>


0 回复 有任何疑惑可以回复我~

是啊,div就是div啊,这个标签在html默认就是块级元素,写成了<div1>就与<div>两码事了,默认当行级元素识别了,当然就是在一行显示了啊

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么<div1>和<div2>显示在了同一行,把<div2>改成<div>就显示成两行了,这是为什么,<div1>和<div2>不都是块状元素吗?还是说不能写<div1>、<div2>这样的代码,而是要使用标签选择器、类选择器和ID选择器?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信