2021-03-23html+css笔记

最新推荐文章于 2024-03-17 22:35:40 发布

qq_55438560

最新推荐文章于 2024-03-17 22:35:40 发布

阅读量78

点赞数

本文链接：https://blog.csdn.net/qq_55438560/article/details/115111956

版权

权重
ID的权重是100
类的权重是10
标签的权重是1
样式最后使用权重大的

比较霸道，自己独占一行；
可以控制width,height,对齐属性‘
宽度默认是容器（父元素宽度）的100%
块元素内可以包括含内元素或块元素。

常见的块元素有<1>-<H6> -<p>-<div>-<ul>-<ol>>-<li>
文字的标签你不能使用块元素，比如···<p>-<h1>-<h6>等标签
主要用于存放文字，因此标签= 不能放块级元素

行内元素只能容纳文本或其他行内元素

常见的行内元素有<a>，<stnog>,<em>,<span>

转换成行内元素：display：inline；
inline：行内元素

转换成块元素·：display：block；
block：块

转换成行内块元素：display：inline–block；
inline–block：行内块

行内块元素
<input/>，<img/>，<td>，同时具有块元素的特点。
一行显示多个，但两个元素之间有空白缝隙
默认宽度是内容本身的宽度
width,height 可控制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>元素显示模式</title>
		<style>
		      div{
		      	/*inline;转换成行内元素*/
		      	      /*inline:行内元素*/
		      	display: inline;
		      	background-color: green;
		      }
		  
			p{
				background-color: red;
				font-size: 45px;
			}
			li{
				background-color: navajowhite;
			}
			
			a{  
				/*转换成块元素*/
				/*block:块*/
				display: block;
				
				width: 1000px;
				height: 200px;
				background-color: aquamarine;
			}
			.li2{
				width: 200px;
				height: 500px;
				background-color: darkcyan;
			}
			.li3{
				background-color: fuchsia;
			}
		</style>
	</head>
	<body>
		<!--元素显示模式：快元素，行内元素，行内块元素-->
		 <p styile="color:green ; font-size: 24px"></p>
		 <div>盒子1</div>
		 <div>盒子2</div>
	    <ul>
	    	<li></li>
	    	<li><a href="li2"></a></li>
	    	<li><a href="li3"></a></li>
	    	<li></li>
	    	<span>文字内容</span>
	    	<span>文字内容</span>
	    	<span>文字内容</span>
	    	
	    	<input type="text" style="width: 200px; height: 20px"/>
	    	<input type="text" style="width: 200px; height: 20px"/>
	    	<input type="text" style="width: 200px; height: 20px"/>
	    	
	    </ul>
	    <a href="#">链接</a>
	    <a href="#">链接</a>
	    <a href="#">链接</a>
	</body>
</html>