HTML基础-10

vertical-align属性介绍:

作用: 设置元素在垂直方向的对齐方式.

注意:
	1. 所有的行内块元素和table标签中都默认支持vertical-align.
	
	2. 为什么行内块元素底部默认会多出若干像素(3)
	 	因为行内块元素默认的vertical-align对齐方式是基线对齐
	
	3. vertical-align属性应用的场景一般用来解决图片底部多的3像素空白.
	 	vertical-align: baseline | top | middle | bottom
	 	将行内块元素转为块级元素.
    
    4. 通过vertical-align属性实现图片垂直居中.
	 	步骤:
	 		 先设置行高等于容器的高度(让中线居中)
	 		 再给图片设置vertical-align:middle;

标签包含规范:

  1. 在网页中,段落和标题是同一级的,不能相互嵌套

  2. 在网页布局中,不要使用段落（P）或者标题（H1-H6）包含div标签

  3. 不推荐使用行内元素包含其他块级元素

元素隐藏方式:

 ◇ display: none;    将元素隐藏,不占位置   | display: block;   将元素显示出来

 ◇ visibility: hidden;  占位置

 ◇ overflow: visible(默认超出父元素的部分也是可以看到的) | hidden  将溢出部分隐藏| scroll (如果内容超出父容器,那么会给父元素添加一个滚动条) | auto

网页样式初始化:

 ◇为什么要进行页面标签的样式初始化?
 	原因: 为了保证同一个页面,在不同浏览器中看到的显示效果是一致的。

 ◇样式初始化过程中,我们需要注意哪些细节?

 	 1. 哪些标签有默认自带的样式,我们需要考虑。

 	 2. 给标签设置一个基本的样式(不能影响网页布局)
 	 	比如：设置文字大小, 设置文字字体, 文字颜色....

 	 3. 样式初始化参考代码:
		/* 块级元素 */
		body,ul,dl,ol,p,h1,h2,h3,h4,h5,h6 {
			margin:  0;  //清除外边距
			padding:  0;  //清除内边距
			list-style: none;  //去除li标签的小圆点
			font-weight: 400;  //设置字体不加粗
			color: #666;  //设置文字颜色
			font-size: 12px;  //设置文字大小
			font-family: "宋体";  //设置文字字体
		}

		/* 行内元素 */
		a {
			text-decoration: none;  //去除a标签默认下划线
			color: #666;  //设置a标签字体颜色
		}

		/* 行内块元素 */
		img,input {
			border:  0 none;  //去除边框
			outline-style: none;   //去除轮廓线
			padding:  0; //清空内边距
			vertical-align: top; //垂直对齐方式-顶部对齐
		}

其他选择器

◇ 结构伪类选择器:
	被选中的当前标签是html结构中第一个子元素
	:first-child{}

	被选中的当前标签是html结构中最后一个子元素
	:last-child {}


	如果希望选中html结构中第n个子元素
	n的取值是大于等于0的
	:nth-child(n) {}

	可以倒着选中页面中的标签:
	:nth-last-child(n) {}


◇ 目标伪类选择器: 该选择器一般配合锚链接使用

   :target {}

   只有标签被锚链接指向的时候,才会触发目标伪类选择器


◇ 属性选择器: 通过标签的属性选中对应的标签.
	/* 选中具有type属性的标签 */
	/* [type] {
		color: red;
	} */
	
	/* 选中type属性为text的标签 */
	/* [type="text"] {
		color: red;
	} */
	/* 选中type属性为t开头的标签 */
	/* [type^="t"] {
		color: red;
	} */
	
	/* 属性值包含字母t */
	/* [class*='t'] {
		color: red;
	} */
	
	/* 属性中以字母结束 */
	[class$='t'] {
		color: red;
	}

精灵图（雪碧图）:

产生目的：
	1.很多网站在首次加载的时候都需要加载很多的小图片，每一次加载都要向服务器请求一次，考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。
	2.所谓精灵图就是把很多的小图片合并到一张较大的图片里。

作用：
	用来作为网页的背景图。

使用过程:
	1. 将整个精灵图作为元素的背景图，通过background-image：URL（图片地址） 来设置。
	2. 改变背景的位置,只能向左和向上移动，通过background-position：top  left ；来设置。

图标字体:

本质: 也是一个字体,像一个图标

使用: 借助第三方平台实现.例如：iconfont(阿里巴巴矢量图标) 、icomoon....