<style>
* {
margin: 0;
padding: 0;
color:#fff;
}
.parent {
width: 1000px;
height:800px;
background: #aaa;
}
a{
background:red;
}
span{
background:blue;
width:300px;
}
img{
vertical-align: middle;
}
input{
width:150px;
height:30px;
background:grey;
border:1px solid #09f;
}
h2{
color:green;
}
.a{
}
</style>
</head>
<body>
<div class="parent">
<h2>1:块级元素独占一行</h2>
<h2>2:块级元素可设width,height</h2>
<h2>3:块级元素可用margin/padding:left/right/top/bottom</h2>
<h3>h3 块级元素</h3>
<p>p 块级元素</p>
<ul>
<li>ul li 块级元素</li>
<li>ul li 块级元素</li>
</ul>
<ol>
<li>ol li 块级元素</li>
<li>ol li 块级元素</li>
</ol>
<dl>
<dt>dl dt dd 块级元素</dt>
<dd>dl dt dd 块级 元素</dd>
</dl>
<h2>1:行级元素不独一行，相互连接</h2>
<h2>2:行级元素不可设width,height</h2>
<h2>3:行级元素可用margin/padding:left/right。不可用margin/padding:top/bottom</h2>
<a href="">第一个a inline行级元素</a><a href="">第二个a inline行级元素</a>
<a href="" class="a">第三个a inline行级元素</a> <a href="" class="a">第四个a inline行级元素</a>
<input type="text" value="input inline行级元素"/>
<input type="text" value="input inline行级元素"/>
<h2>1:行级元素，行块级元素标签不紧凑连接中间有空格时会显示在网页上</h2>
<h2>2:解决方法：浮动行级，行块级元素
<h2>1:行块级元素不独占一行，可相互连接</h2>
<h2>2:行块级可设width,height</h2>
<h2>3:行块级元素可rgin/padding:left/right/top/bottom</h2>
<span>span 行级元素</span><span>span 行级元素</span>
<img width="100px" height="50px" title="行块级元素" src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1682403853,827686528&fm=173&s=4D280BD068B37C9E05A0D15A0300D0D3&w=640&h=418&img.JPEG">
<img width="100px" height="50px" title="行块级元素" src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1682403853,827686528&fm=173&s=4D280BD068B37C9E05A0D15A0300D0D3&w=640&h=418&img.JPEG">
</div>
</body>
</html>
时间： 2024-11-08 19:45:00