HTML笔记7

定位

概念：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

作用：可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置

定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个：

边偏移

边偏移就是定位的盒子移动到最终位置，有top、bottom、left、right四个属性（只有定位可以使用）

静态定位（static）

静态定位是元素的默认定位方式，无定位的意思

语法：

选择器 {position: static;}

静态定位按照标准流特性摆放位置，它没有边偏移
静态定位在布局时很少用到

相对定位（relative）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的

语法：

选择器 {position: relative;}

特点：

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）

绝对定位（absolute）

绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的

语法：

选择器 {position: absolute;}

特点：

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
绝对定位不再占有原先的位置（脱标）

子绝父相的由来

子绝父相即子级是绝对定位的话，父级要用相对定位

子级绝对定位，不会占有位置，可以放到夫盒子里面的任意一个地方，不会影响其他的兄弟盒子
父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局时，需要占有位置，因此父盒子只能是相对定位

总结：

因为父级需要占有位置，因此时相对定位，子盒子不需要占有位置，则是绝对定位
子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到

固定定位（fixed）

固定定位是元素固定于浏览器可视区的位置。主要使用场景：浏览器页面滚动时元素的位置不会改变

语法：

选择器 {position: fixed;}

特点：

以浏览器的可视窗口为参照点移动元素
- 跟父元素没有任何关系
- 不随滚动条滚动
固定定位不再占有原先的位置

固定定位也是脱标的，其实固定定位也可以看作是一种特殊的绝对定位

固定到版心右侧

算法：

让固定定位的盒子left:50%，走到浏览器可视区的一半位置（版心）
让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置

粘性定位

粘性定位可以被认为是相对定位和固定定位的混合

语法：

选择器 {position: sticky; top: 10px;}

特点：

以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原来的位置（相对定位特点）
必须添加top、left、right、bottom其中一个才有效
跟页面滚动搭配使用，兼容性较差，不支持IE

定位的叠放顺序（z-index）

在使用定位布局时，可能会出现盒子重叠的情况，此时可以使用z-index来控制盒子的前后次序（z轴）

语法：

选择器 {z-index: 1;}

数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后买你不能加单位
只有定位的盒子才有z-index属性

绝对定位盒子居中

加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下算法实现水平和垂直居中：

left: 50%; 让盒子的左侧移动到父级元素的水平中心位置
margin-left: -100px; 让盒子向左移动自身宽度的一半

定位的特性

绝对定位和固定定位也和浮动类似

行内元素添加觉得或者固定定位，可以直接设置高度和宽度
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题
浮动元素只会压住它下面标准流的盒子，但是不会压住该盒子里面的文字或图片，绝对定位（固定定位）会压住下面标准流所有的内容

元素的显示与隐藏

display属性

display属性用于设置一个元素应如何显示

display: none; 隐藏对象
display: block; 除了转换为块级元素之外，同时还有显示元素的意思
display隐藏元素后，不再占有原来的位置

visibility可见性

visibility属性用于指定一个元素应可见还是隐藏

visibility: visible; 元素可视
visibility: hidden; 元素隐藏
visibility隐藏元素后，继续占有原来的位置

如果隐藏元素想要原来位置，就用visibility: hidden;

如果隐藏元素不想要原来位置，就用display: none;（用处更多）

overflow溢出

overflow属性制定了如果内容溢出了一个元素的框（超过其指定高度及宽度）时，会发生什么

如果盒子有定位，请慎用overflow: hidden 因为它会隐藏多余的部分

精灵图

CSS精灵技术也称CSS Sprites、CSS雪碧

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

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要请求一次就可以了

精灵图的使用

注意：

移动图片位置，可以使用background-position
移动的距离就是这个目标图片的X和Y坐标，注意网页中的坐标有所不同
因为一般情况下都是往上往左移动，所以数值是负值
使用精灵图的时候需要精确测量每个小背景图片的大小和位置

精灵图的缺点：

图片文件比较大
图片本身放大和缩小会失真
一旦图片制作完毕想要更换非常复杂

字体图标

使用场景：主要用于显示网页中通用、常用的一些小图标

字体图标的本质是字体

字体图标的优点：

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性：几乎支持所有浏览器，不用担心兼容性

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化

字体图标下载

推荐下载网站：
-icomoon字库 http://icomoon.io
-阿里iconfont字库 http://www.iconfont.cn/
全免费

字体图标的使用

把下载包里面的fonts文件夹放入页面根目录下
在CSS样式中全局声明字体：简单理解为把这些字体文件通过CSS引入到页面中

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

html标签内添加小方框

字体图标的追加

如果要追加图标，将fonts目录下的selection.json重新上传，然后重新下载并替换fonts目录即可

CSS三角做法

div {
	width: 0;
	height: 0;
	line-height:0;
	font-size:0;
	border: 50px solid transparent;
	border-left-color: pink;
}

CSS用户界面样式

界面样式就是更改一些用户操作样式，以便更好地提高用户体验

鼠标样式cursor

li { cursor: pointer;}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

轮廓线outline

给表单添加 outline: 0; 或者outline: none;样式之后就可以去掉默认的蓝色边框

input {outline: none;}

防止拖拽文本域resize

textarea {resize: none;}

vertical-align属性应用

使用场景：经常用于设置图片或者表单元素（行内块元素）和文字垂直对齐

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效

语法：

vertical-align : baseline | top | middle | bottom

图片底部默认空白缝隙问题

原因：行内块元素默认和文字的基线对齐

解决方法：

给图片添加vertical-align: middle | top | bottom等（提倡使用）
把图片转换为块级元素display:block

溢出文字省略号显示

单行文本溢出显示省略号

满足条件：

先强制一行内显示文本

white-space: nowrap; （默认normal自动换行）
超出的部分隐藏

overflow: hidden;
文字用省略号替代超出的部分

text-overflow: ellipsis;

多行文本溢出显示省略号

多行文本溢出显示显示省略号，有较大兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核）

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

常见布局技巧

margin负值的运用

使用场景：解决多个盒子并列边框重合的问题

让每个盒子margin往左侧移动-1px正好压住相邻盒子边框
鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置）如果有定位，则加z-index）

文字围绕效果

两种写法：

使用两个盒子（不推荐）
使用文字围绕浮动元素的特性（推荐）

CSS三角强化

代码：

div {
	width: 0;
	height: 0;
	border-color: transparent red transparent transparent;
	border-style: solid;
	border-width: 22px 8px 0 0;
}

实现步骤：

只保留右边的边框有颜色
样式都是solid
上边框宽度要打，右边框宽度稍小，其余的边框为0

最终效果

CSS初始化

为什么要CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化

简单理解：CSS初始化是指重设浏览器的样式（也称为CSS reset）

注意：每个网页都必须首先进行CSS初始化

/*清除所有标签内外边距*/
* {
	margin: 0;
	padding: 0;
}
/*em 和 i 斜体的文字不倾斜*/
em, i {
	font-style: normal;
}
/*清除无序列表（li）前小圆点*/
li {
	list-style: none;
}
img {
	/*照顾低版本浏览器，如果图片带有链接外面会有边框的问题*/
	border: 0;
	/*处理图片底部有空白缝隙的问题*/
	vertical-align: middle;
}
/*当光标经过button时，光标变成小手*/
button {
	cursor: pointer;
}
/*统一设置链接样式：更改颜色，取消下划线*/
a {
	color: #666;
	text-decoration: none;
}
/*当光标经过链接时，改变链接颜色*/
a:hover {
	color: #c81623;
}
/*设置按钮、输入框字体样式*/
button,input {
	font-family: Microsoft YaHei, HeiTi SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
}
/*设置全局字体样式*/
body {
	/*抗锯齿，让文字显示更清晰*/
	-webkit-font-smoothing: antialiased;
	background-color: #fff;
	font: 12px/1.5 Microsoft YaHei, HeiTi SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
	color: #666;
}
/*清除浮动（伪元素）*/
.clearfix:after {
	visibity: hidden;
	clear: both;
	display: block;
	content: ".";
	height: 0;
}