那么什么是块元素，什么是内嵌元素他们都有什么特征呢请看下面的代码？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
一、块的特征
1、默认独占一行
2、没有宽度时，默认撑满一排
3、支持所有css命令
1.无默认样式：
<div ><nav><section><header><footer>
2.有默认样式
<h></h>标题 margin 字体加粗 字体大小
<p></p> 段落margin
<dl></dl>列表maigin
<dd></dd>列表项maigin
<ul></ul> 无序maigin padding
<ol></ol>有序maigin padding
<li></li>列项表项 list-style：none
二、内嵌(内联、行内)的特征
1、同排可以继续跟同类的标签
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin和padding
5、代码换行被解析
1.无默认样式：
<span></span>
2.有默认样式：
a标签 默认有颜色、下划线
strong 默认有字体加粗，强调的意思
em，i 默认有字体倾斜
mark 默认有背景颜色、字体颜色
table 默认有表格边框颜色，边框间隙
big 默认有字体加大
b 默认有字体加粗
table表格边框颜色、边框间隙。
big字体加大
三、内联块 img input
-->
<style>
span{
width: 200px;
height:200px;
background-color: red;
padding: 30px;
}
div{
width: 200px;
height: 200px;
border:1px solid black;
margin-top: 10px;
}
.span{
background: blue;
/*margin: 30px;*/
padding: 30px;
}
</style>
</head>
<body>
<span>内联元素不支持宽高</span>
<div><span class="span">span1</span></div>
</body>
</html>
我们再来了解一下他们之间是如何转换的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
1、块转内联:display: inline;
2、内联转块:display:block;
3、内联块:display: inline-block;
注意:IE67需要加.inlineB{*display: inline;*zoom: 1;}
IE67用*前缀;IE6用_前缀。
inline-block特性：（1）块在一行显示
（2）行内属性支持宽高
（3）没有宽高时内容撑开宽高
问题：（1）内容换行被解析
（2）ie6,7不支持
-->
<style>
.body{
width: 700px;
height: 400px;
border: 1px solid #000000;
font-size: 0;
}
.div1{
display: inline;
width: 200px;
height:200px;
background-color: red;
font-size: 16px;
}
.span1{
display: block;
width: 200px;
height:200px;
background-color: red;
border:10px solid yellow;
margin-top: 70px;
font-size: 16px;
}
#inlineB div,#inlineB span{
display: inline-block;
width: 100px;
height: 100px;
background: #CCCCCC;
border: 1px solid #F0AD4E;
font-size: 16px;
}
.box{
width: 150px;
height: 150px;
background-color: red;
border: 1px solid black;
display: inline-block;
*display: inline;
*zoom: 1;
font-size: 16px;
}
</style>
</head>
<body>
<div class="body">
<div class="div1">div1</div>
<span class="span1">span1</span>
</div>
<div id="inlineB" class="body">
<div>div2</div>
<span>span2</span>
</div>
<div class="body">
<div class="box">box1</div>
<div class="box">box2</div>
</div>
</body>
</html>
最后我们来看一下内嵌元素的问题：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
1、内联换行被解析出一个字体的间距，解决方法是给父集加font-size:0;自己重新设置字体。
*/
#box1 span,#box1 div{
width: 200px;
height: 200px;
border:1px solid black;
background-color: red;
margin-right: 100px;
margin-bottom: 10px;
}
#box2{
font-size: 0;
}
#box2 span{
border:1px solid red;
font-size: 16px;
}
</style>
</head>
<body>
<div id="box1">
<span>span1</span>
<span>span2</span>
<hr />
<span>span1</span>
<div></div>
</div>
<div id="box2">
<span>span1</span><span>span2</span><span>span3</span>
<hr />
<span>span1</span>
<span>span2</span>
<span>span3</span>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/xiangxuemei/p/9392075.html
时间： 2024-10-08 18:20:25