块级元素的使用-慕课网

首页课程实战体系课手记专栏慕课教程

块级元素的使用

来源：12-2 我要独占一行 - 块级元素

手尖下的世界

2016-05-14 15:40

各位大神，谁能和我详细讲一下块级元素，最好有例子，我没有看明白！谢谢了

写回答关注

4回答

一骑红尘妃子笑

2016-05-14 15:52:02

已采纳

a{display:block;} //块元素独占一行，如果加上a{display:block;} 每个a标签作为块，独占一行，
显示：1111
2222
不加这个a{display:block;}
显示：11112222
<a>1111</a><a>2222</a>
成为块是为了控制样式，有些样式标签不能控制的

2 2

一骑红尘妃子... 回复手尖下的世界

不客气，互相学习

2016-05-18 09:32:16

共 2 条回复 >
南绝枫

2016-05-14 15:53:42

块级元素与内联元素相对，块级元素有四个特性：1.以新行来开始结束2.其高度，行距等属性值可以通过设置而改变3.宽度缺省是它的容器的100%，除非设定一个宽度4.它可以容纳内联元素和其他块元素。比如对于块级元素div，示例其内又容纳了div：
<style type="text/css">
div{
width:300px;
height:300px;
border:1px solid red;
}
#box1{margin-bottom:50px;}
#box2{margin-bottom:10px;}
</style>
</head>
<body>
<div id="box1">
box1
<div id="box2">box2</div>
</div>
</body>

0 0
Persist_waiting

2016-05-14 15:52:21

快元素默认独占一行，宽度默认100% 块级元素有：<p></p> <div></div><h1></h1>...<hr> <ul></ul> <ol></ol>... 你可以加个backgroundcolor就可以分辨出来块级元素和行内元素的去别的

0 0
周叔叔你好

2016-05-14 15:45:42

同在自学！
简单理解来说就是块级元素都是独自占据一行的！
比如 <p>..</p> <div></div>这行代码
即使放在编辑器内的一行之内
显示出来的效果也会是两行！

0 0