2021-03-23html+css笔记

权重
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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值