WEB 3.CSS

1. 选择器优先级进阶

<div id=”item” class=”box”>
<p></p>
</div>
#item p{}
.box p{}
 
id                    100
class               10
标签选择器     1
行间优先级是  1000
 计算方式 : 让每一个选择器对应的值相加  谁的值大谁的优先级高
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1.优先级</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		/*设置1.优先级,这三个比较,101 21 110,第三个大*/
		/*设置2.优先级,与行间优先级1000比,均小*/
		#box p {
			color: green;
		}
		.wrap .item p{
			color: red;
		}
		#el .item p{
			color: gold;
		}
	</style>
</head>
<body>
	<div class="wrap" id="el">
		<div class="item" id="box">
			<p >1.优先级</p>

			<p style="color: blue">2.优先级</p>
		</div>
	</div>	
</body>
</html>

2. 文本属性

text-indent: 设置首行缩进
text-align: 文本的水平对其方式
text-decoration: 设置下划线
line-height: 行高
设置行于行之间的间距
一般用于单行文本的垂直居中
vertical-align:设置垂直对齐方式,一般用于有图片的时候
默认的时候:图片和文字底边对齐
文字在图片的中间,就需要这个属性,需要在img里面去设置vertical-align:middle

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文本属性</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		.item{
			width: 400px;
			height: 400px;
			border:1px solid red;
			/*一个字符默认16px*/
			/*设置首行缩进*/
			text-indent: 32px;
			/*设置居中显示*/
			text-align: center;
			/*设置行高*/
			line-height: 30px;
		}
		.item1{
			width: 400px;
			height: 400px;
			border:1px solid red;
			/*文本水平对其方式  一般用于单行文本*/
			text-align: center;
			/*添加下划线*/
			/*text-decoration:underline;*/
			/*上划线*/
			/*text-decoration: overline;*/
			/*中划线*/
			text-decoration: line-through;

			/*设置垂直居中*/
			line-height: 400px;
		}
		a{
			/*去除下划线*/
			text-decoration:none;
		}
		.item2 img{
			/*默认是和下面对齐*/
			/*让图片和文本的中间对其*/
			/*vertical-align:middle;*/
			/*vertical-align:top;*/
		}
	</style>
</head>
<body>
	<div class="item">
		<span>帝高阳之苗裔兮,朕皇考曰伯庸。</span>
		
		摄提贞于孟陬兮,惟庚寅吾以降。
		皇览揆余初度兮,肇锡余以嘉名:
		名余曰正则兮,字余曰灵均。
		纷吾既有此内美兮,又重之以修能。
		扈江离与辟芷兮,纫秋兰以为佩。
		汩余若将不及兮,恐年岁之不吾与。
		朝搴阰之木兰兮,夕揽洲之宿莽。
		日月忽其不淹兮,春与秋其代序。
	</div>
	<div class="item1">
		帝高阳之苗裔兮
	</div>
	<a href="http://www.baidu.com">百度</a>

	<div class="item2">
		摄提贞于孟陬兮,惟庚寅吾以降。<img  src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2491562693,485434067&fm=26&gp=0.jpg" alt="">
	</div>	
</body>
</html>

3. 布局属性

块元素: 独占一行 宽度默认是父元素的100% 默认高度由内容决定
支持所有的样式
就算设置了宽度也会独占一行
行内元素:不会独占一行 元素排在一行显示
默认宽度是0 高度由内容决定
不支持宽高属性和margin的上下属性
行内块: 不会独占一行 支持所有的样式 默认宽度0 默认高度由内容决定
display: 规定元素以哪种元素类型显示
none 隐藏
block 以块元素显示
inline-block 以行内快元素显示 此属性已经被废弃 但是还能用
inline: 以行内元素显示
一般情况下 我们都是将行内元素转变成块元素或者行内块,不会将块元 素转成行内元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素类型</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		.wrap{
			width: 500px;
			height: 500px;
			border:1px solid red;
		}
		.inner{
			width: 200px;
			height:200px;
			background-color: pink;
			/*将div以行内元素显示*/
			/*display:inline;*/
			/*将div转换成 行内块*/
			display: inline-block;			
		}
		span{
			width: 200px;
			height: 200px;
			background-color: red;
			/*margin只对左右起作用*/
			margin: 20px;
			padding:40px;
			/*将span转成块*/
			/*display: block;*/

			display: inline-block;
		}
		img{
			width: 80px;
			margin: 20px;
			padding:20px;
		}
	</style>
</head>
<body>
	<div class="wrap"> 
		<div class="inner">1</div>
		<span>2</span>
		<span>3</span>
		<img src="./0.jpg" alt="">
		<span>4</span>
	</div>
</body>
</html>

overflow:
Visible: 默认值
hidden: 超出部分隐藏
Scroll: 添加滚动条
Auto: 自检测并添加滚动条
清除当前元素内部对外部元素的影响,理解:因为如果图片太大,就会超过这个范围,影响外面的元素。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>overflow</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		.item{
			width: 100px;
			height: 100px;
			border:1px solid red;
			/*超出部分隐藏*/
			/*overflow:hidden;*/
			/*添加滚动条*/
			/*overflow:scroll;*/
			/*自动检测内容是否超出 如果超出自动添加滚动条*/
			overflow:auto;
		}
	</style>
</head>
<body>
	<div class="item">
		<img src="./0.jpg" alt="">
	</div>
	overflow
</body>
</html>

4. 浮动

float:
left
right
文档流:元素以从上到下,从左向右的排列方式 这种排列规则就是文档流
A. 浮动会脱离文档流 会将后面没有浮动的元素覆盖
浮动不会覆盖文字
B. 浮动只有两个方向,左浮动或者右浮动
C. 当浮动元素碰到父元素的边界时会停止浮动,碰到前面有浮动元素也会停止浮动,并排在一排显示 如果浮动元素的宽度超过父元素的宽度 会自动换行
D. 如果前面有未浮动的元素 会另起一行进行浮动

浮动遇到的问题:当父元素没有设置固定高度时,子元素全部浮动,会导致父元素高度无法撑开

解决办法:

  1. 给父元素设置固定高度
  2. 给父元素添加overflow:hidden
  3. 给父元素的最后添加一个空标签设置clear:both
    这种方式会添加无意义的空标签 影响页面结构 所以不推荐
  4. 使用伪元素选择
    给父元素添加伪类 after
 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动</title>
	<style>
		.wrap{
			width:300px;
			border:2px solid red;

			/*清除浮动对外部元素的影响*/
			/*overflow:hidden;*/
		}
		/*清除浮动*/
		.wrap:after{
			content:'';
			display: table;
			clear:both;
		}
		.item1{
			width:100px;
			height:100px;
			background: green;

			/*添加左浮动*/
			float:left;
			/*右浮动*/
			/*float:right;*/
		}
		.item2{
			width:105px;
			height:105px;
			background: blue;

			/*左浮动*/
			float:left;
		}
		.item3{
			width:100px;
			height:100px;
			background: #f39;
			float:left;
			/*清除某一个元素的浮动,可以在里面加clear:both;*/
		}
		.clear{
			/*width:100px;
			height:100px;*/
			/*background:yellow;*/


			/*清除浮动
				clear:
					both   清除两边元素浮动产生的影响
					left   清除前面元素左浮动 带来的影响
					right  清除前面元素右浮动带来的影响
			*/
			clear:both;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="item1">1</div>
		<div class="item2">2</div>
		<div class="item3">3</div>
		<!-- <div class="clear"></div> -->
	</div>
</body>
<html>

5. 定位

position
相对定位 relative
相对于元素原来的位置进行偏移 参考点是原来位置的起始点
不会脱离文档流。
绝对定位 absolute
会脱离文档流 默认以body的00点位参考点进行位移
如果父元素有定位属性,绝对定位就以父元素的00点位参考点进行偏移
如果父元素没有定位属性,就找爷爷元素,以此向上找,找到body为止
固定定位(绑定定位) fixed
脱离文档流
相对于浏览器窗口进行定位
定位的层级:
只能给有定位属性的元素设置
z-index:层级是数字,谁的数字大,谁就在上层显示
相对定位:

<!-- 定位 参考点  相对于元素原来的位置
相对位置,参考位置是原来所在位置 -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定位</title>
	<style type="text/css">
		.item1{
			width: 600px;
			height: 600px;
			border:1px solid red;
			margin-left: 100px; 
			position: relative;
			top: 200px;
		}
		.item2{
			width: 200px;
			height: 200px;
			background-color: blue
			/*相对定位*/
			position: relative;
			top: 200px;/*它是浮动元素,所以会覆盖其他。*/
			left: 200px;

		}
		.item3{
			width: 200px;
			height: 222px;
			background-color: gold;
		}
</style>
</head>
<body>
	<div class="item1">
		<div class="item2"></div>
		<div class="item3"></div>
	</div>
</body>
</html>

绝对定位:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位</title>
	<style>
		*{margin:0;padding:0;}
		.wrap{
			width:400px;
			height:400px;
			border:1px solid red;
			margin-left:100px;

			position:relative;
		}
		.item1,.item2{
			width:100px;
			height:100px;
		}
		.item1{
			background:yellow;
			/*绝对定位*/
			position:absolute;
			top:100px;
			left:100px;

			z-index:1;
		}
		.item2{
			background:blue;

			position:absolute;
			top:100px;
			left:100px;
			z-index:2;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="item1">1</div>
		<div class="item2">2</div> 
	</div>
</body>
</html>

固定定位:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
		body{
			height:2000px;
		}
		.top{
			width:100px;
			height:50px;
			background:green;
			text-align:center;
			line-height:50px;

			/*固定定位*/
			position:fixed;
			right:20px;
			bottom:20px;
		}
	</style>
</head>
<body>
	<div class="top">返回顶部</div>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在信号处理领域,DOA(Direction of Arrival)估计是一项关键技术,主要用于确定多个信号源到达接收阵列的方向。本文将详细探讨三种ESPRIT(Estimation of Signal Parameters via Rotational Invariance Techniques)算法在DOA估计中的实现,以及它们在MATLAB环境中的具体应用。 ESPRIT算法是由Paul Kailath等人于1986年提出的,其核心思想是利用阵列数据的旋转不变性来估计信号源的角度。这种算法相比传统的 MUSIC(Multiple Signal Classification)算法具有较低的计算复杂度,且无需进行特征值分解,因此在实际应用中颇具优势。 1. 普通ESPRIT算法 普通ESPRIT算法分为两个主要步骤:构造等效旋转不变系统和估计角度。通过空间平移(如延时)构建两个子阵列,使得它们之间的关系具有旋转不变性。然后,通过对子阵列数据进行最小二乘拟合,可以得到信号源的角频率估计,进一步转换为DOA估计。 2. 常规ESPRIT算法实现 在描述中提到的`common_esprit_method1.m`和`common_esprit_method2.m`是两种不同的普通ESPRIT算法实现。它们可能在实现细节上略有差异,比如选择子阵列的方式、参数估计的策略等。MATLAB代码通常会包含预处理步骤(如数据归一化)、子阵列构造、旋转不变性矩阵的建立、最小二乘估计等部分。通过运行这两个文件,可以比较它们在估计精度和计算效率上的异同。 3. TLS_ESPRIT算法 TLS(Total Least Squares)ESPRIT是对普通ESPRIT的优化,它考虑了数据噪声的影响,提高了估计的稳健性。在TLS_ESPRIT算法中,不假设数据噪声是高斯白噪声,而是采用总最小二乘准则来拟合数据。这使得算法在噪声环境下表现更优。`TLS_esprit.m`文件应该包含了TLS_ESPRIT算法的完整实现,包括TLS估计的步骤和旋转不变性矩阵的改进处理。 在实际应用中,选择合适的ESPRIT变体取决于系统条件,例如噪声水平、信号质量以及计算资源。通过MATLAB实现,研究者和工程师可以方便地比较不同算法的效果,并根据需要进行调整和优化。同时,这些代码也为教学和学习DOA估计提供了一个直观的平台,有助于深入理解ESPRIT算法的工作原理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值