HTML块状元素、行内元素、行内块状元素学习笔记

  特点 常用元素 display转换
块状元素

1、每个元素占单独一行

2、可识别宽高

3、margin：上下左右有效

4、padding：上下左右有效

div p section ul-li header

footer

  block
行内元素

1、每个元素默认从左到右排列，不单独占行

2、对宽高属性无效

3、margin：上下无效，左右有效

4、padding：上下左右有效

 span i lable strong img  inline
行内块状元素

1、每个元素默认从左到右排列，不单独占行

2、可识别宽高

3、margin：上下左右有效

4、padding：上下左右有效

    inline-block

 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>行内元素、块状元素、行内块状元素</title>
	<style>
	section{
		border:1px dashed #99cccc;
        width: 100%;
	}
	.item{
		height: 100px;
		width: 100px;
		color: #fff;
		background-color: #ffcccc;		
	}
	.item:nth-child(even){
		background-color: #99cccc;
	}
   .inline-block div{
         display: inline-block;
   }

   .content{
   	float: left;
   	margin-left: 2rem;
   	padding-bottom: 2rem;
   }
   .c02 .item{
   	padding: 1rem;
   	margin: 1rem;
   }
	</style>
</head>
<body>
   <div class="content">
    <p>块状元素</p>
    <section>
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	</section>
 
    <p>行内元素</p>
	<section class="inline">
	<span class="item">1</span>
	<span class="item">2</span>
	<span class="item">3</span>		
	</section>
    <p>行内块状元素</p>
	<section class="inline-block">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
	</section>
	</div>

	 <div class="content c02">
    <p>块状元素 (padding: 1rem ; margin: 1rem)</p>
    <section>
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	</section>
 
    <p>行内元素 (padding: 1rem ; margin: 1rem)</p>
	<section class="inline">
	<span class="item">1</span>
	<span class="item">2</span>
	<span class="item">3</span>		
	</section>
    <p>行内块状元素 (padding: 1rem ; margin: 1rem)</p>
	<section class="inline-block">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
	</section>
	</div>
</body>
</html>

　　

 

posted @ 2018-08-29 16:49  凉の茶  阅读(799)  评论(0)    收藏  举报