前端初学者。。底层的底层的随笔1

最新推荐文章于 2024-05-08 00:27:28 发布

amnesia_ZhangSan

最新推荐文章于 2024-05-08 00:27:28 发布

阅读量265

点赞数

分类专栏： html 文章标签： .。。小白的随笔

本文链接：https://blog.csdn.net/amensia_ZhangSan/article/details/89164274

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近刚好学到CSS部分，关于块元素及行内元素，行块元素间的转化

<!DOCTYPE html>
<html>
    <head>
		<meta charset="UTF-8">
		<title>元素描述</title>
		<style type="text/css">
			.div1{
				border: 5px solid red;
			height: 40px;
			width: 500px;
			}
			.div2{
				border: 1px  dashed black;
			}
			input{
				width: 100px;
				height: 40px;
				display: inline;   //转行内元素
			}
			span{
				background: #00FF00;
				display: block;    //转块元素
			}
			.ddd{
				border: 5px solid red;
			     height: 40px;
			    width: 500px;
			    display: inline-block; //转行块元素
			}
			</style>
	</head>
     <body>
           <div class="div1">
           <div class="div2">块元素</div>
           </div>
     	<!--特点：1.独占一行
	  			2.可以设置宽高
	 			3.嵌套（包含）下，子块元素宽度（没有定义情况下）和父块元素宽度默认一致。-->
               <span class="span1">行元素</span>
                <span>行元素</span>
                 <span>行元素</span>
     <!--特点：1.在一行上显示
				2.不能直接设置宽高-->
				<input type="button"  value="点一下" />
           <!--特点： 1.在一行上显示
		       2.可以设置宽高-->
		       <div class="ddd">ddd</div>
		        <div class="ddd">eee</div>
     </body>
 </html>