HTML学习笔记---11day

1.精灵图

核心：多个小背景图片整合到一张图片中。

目的：为了有效减少服务器接收和发送请求的次数，提高页面加载速度。

使用：

1.移动背景图片位置：background-position。

2.以X,Y轴为坐标，网页坐标与现实坐标有所不同。X轴右边走是正值，左边走是负值，Y轴同理。

3.移动距离就是目标图片的X，Y轴坐标，一般情况下兜售往上往左移动，所以数值是负值。

4.使用精灵图是需要精确测量目标图片的大小和位置。

2.字体图标

展示的是图标，本质是字体。

结构和样式比较简单的小图标就用字体图标，结构和样式复杂的小图片就用精灵图。

字体声明：

@font-face {
			  font-family: 'icomoon';
			  src:  url('fonts/icomoon.eot?latr1z');
			  src:  url('fonts/icomoon.eot?latr1z#iefix') format('embedded-opentype'),
			    url('fonts/icomoon.ttf?latr1z') format('truetype'),
			    url('fonts/icomoon.woff?latr1z') format('woff'),
			    url('fonts/icomoon.svg?latr1z#icomoon') format('svg');
			  font-weight: normal;
			  font-style: normal;
			  font-display: block;
			}

路径是下载的font文件所在位置。

3.css三角

选择器{
    width: 0;
	height: 0;
    line-height: 0;(兼容低版本浏览器)
    font-size: 0;(兼容低版本浏览器)
	border: 数值 solid transparent;
	border-方向-color:三角颜色;
}

数值：所需三角大小。

方向：三角头朝向是由top，left，right，bottom决定，与所选方向相反。

三角颜色：所需颜色。

4.css用户界面样式

1.鼠标样式cursor

设置或检索对象上移动的鼠标指针采用哪种光标形式。

选择器{
cursor: 属性值;
}

常用： 

属性值	描述
default	默认
pointer	手
move	移动
text	文本
not-allowed	禁止

2.轮廓线outline

取消表单轮廓线：

input{
outline:none;
}

 在想取消轮廓线上的选择器上添加outline。

3.防止拖拽文本域resize

textarea{
resize:none;
}

文本域默认可以拖动。

5.vertical-align属性应用

设置图片或者表单（行内块元素）和文字垂直对齐。（块级元素不能用）

vertical-align ：baseline / top / middle / bottom;

 

 选择不同属性值，图片/表单与文字对齐方式不同。

属性值	描述
baseline	与文字基线对齐（默认）
top	与文字顶线对齐
middle	与文字中线对齐（常用）
bottom	与文字底线对齐

文本域也可以应用。

图片底部空白缝隙解决。

1.给图片添加vertical-align: minddle | top | bottom;(提倡使用)

2.把图片转换为块级元素。（可能会影响布局）

6.溢出文字省略号显示

1.单行文本溢出

强制一行内显示

white-space: nowrap;

超出的部分隐藏

overflow:hidden;

文字用省略号替代超出部分

text-overflow: ellipsis;

2.多行文本溢出

            overflow: hidden;
			text-overflow: ellipsis;
			/* 弹性伸缩盒子模型显示 */
			display: -webkit-box;
			/* 限制一个块元素显示的文本行数 */
			-webkit-line-clamp: 2;
			设置或检索伸缩盒对象的子元素的排列方式
			-webkit-box-orient: vertical;

汉字可用，英文或数字不显示。而且这种方式兼容性较差。

7.常见布局技巧

1.margin负值的应用

让每个盒子通过margin负值正好压住边框。

盒子需要悬停等效果：

（1）如果盒子没有定位，添加相对定位即可。

（2）如果盒子有定位，添加z-index提高层级。没有定位添加z-index没有效果。

2.文字环绕浮动元素

浮动本就是为了文字环绕方式而设计的，开启浮动不会覆盖文字。

所以可以直接添加文字在浮动的盒子旁边，添加在浮动盒子前面，左侧环绕，添加在浮动盒子后面，右侧环绕。

3.行内块运用

利用行内块元素本身的性质，对与类似网页数字页码进行设计。