【前端】CSS基础学习笔记（Part4）

前言

• 该笔记是学习 黑马Pink老师的的HTML+CSS基础课程所记录的，纯手码~若对您有帮助，请给个赞，谢谢！
• 相关视频：前端Html5+Css3+移动Web教程，前端Web入门教程，零基础前端开发视频教程
• 课程相关代码已上传到个人Github，如有需要请自取：Github版HTML+CSS笔记和代码

各章节笔记对应链接：

【前端】HTML基础学习笔记

【前端】CSS基础学习笔记（Part1）

【前端】CSS基础学习笔记（Part2）

【前端】CSS基础学习笔记（Part3）

【前端】CSS基础学习笔记（Part4）

【前端】HTML5和CSS3学习笔记

CSS笔记

11 定位

11.1 需要定位的原因

1. 浮动可让多个块级盒子在一行没有缝隙排列显示，经常用于横向排列盒子
2. 定位则可以让盒子自由的在某个盒子内移动位置或固定在屏幕中某个位置，并且可以压住其它盒子

11.2 定位的组成

定义：将盒子定在某一个位置 —— 也是用于摆放盒子1

组成：定位 = 定位模式 + 边偏移

定位模式：用于指定一个元素在文档中的定位方式

边偏移：决定该元素的最终位置

一、 定位模式

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

二、边偏移

定义：定位盒子移动到最终位置。有top、bottom、left、right 4个属性

11.3 定位模式

11.3.1 静态定位 static（了解）

定义：静态定位是元素的默认定位方式，即无定位

语法：选择器 { position: static; }

注意：

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

11.3.2 相对定位 relative（重要）

定义：相对定位是相对于自身原来的位置移动的（自恋型）

语法：选择器 { position: relative; }

相对定位特点（务必记住）：

1. 相对于自身移动（移动位置时参照自己原来的位置）
2. 原来在标准流位置继续占有，不影响后面盒子（不脱标，继续保留原来位置）

因此，相对定位并没有脱标；它最典型的应用是给绝对定位当爹的

11.3.3 绝对定位 absolute（重要）

定义：绝对定位是相对于它祖先元素来移动位置的（拼爹型）

语法：选择器 { position: absollute; }

绝对定位的特点（务必记住）：

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准（Document 文档）

2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置

3. 绝对定位不再占有原先的位置（脱离标准流）

11.3.4 定位模式的准则

子绝父相准则：子级用绝对定位，父级用相对定位，原因：

1. 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
2. 父盒子需要加定位限制子盒子在父盒子内显示
3. 父盒子布局时，需要占有位置（不能影响后面布局），因此父亲使用相对定位

故：相对定位经常用来作为绝对定位的父级

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位；但子绝父相不是永远不变的，若实际父元素不需要占有位置，子绝父绝等也会遇到

11.3.5 固定定位 fixed（重要）

定义：固定定位是固定于浏览器可视区的位置

语法：选择器 { position: fixed; }

固定定位的特点（务必记住）：

1. 以浏览器可视窗口为参照点移动元素；跟父元素没关系、不随滚动条滚动
2. 固定定位不占有原先位置（脱标）；其实固定定位也可以看做是一种特殊的绝对定位

固定定位小技巧：固定在版心右侧位置，如下（小算法）：

1. 让盒子left:50%; 走到浏览器可视区（或版心）的一半位置
2. 再用margin-left 使盒子再走版心宽度一半的位置，即可固定在版心右侧

11.3.6 粘性定位 sticky（了解）

定义：粘性定位是相对定位和固定定位的混合

语法：选择器 { position: sticky; }

粘性定位特点（务必记住）：

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
2. 粘性定位占有原先的位置（相对定位特点）
3. 必须添加top 、left、right、bottom 其中一个才有效

需跟页面滚动搭配使用。 兼容性较差，IE 不支持；也可用JS写。

11.3.7 定位模式的总结

一定要记住 相对定位、绝对定位、固定定位 的两大特点：

1. 是否占有位置（脱标否）
2. 以谁为基准点移动位置

以及：重点 —— 子绝父相准则！

11.4 定位叠放次序 z-index

定义：使用定位布局时，可能会出现盒子重叠的情况；此时，可用z-index来控制盒子的前后次序(Z轴)

语法：选择器 { z-index: 1; }

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

11.5 定位的拓展

11.5.1 绝对定位的盒子居中

定义：加了绝对定位的盒子不能通过 margin: 0 auto 水平居中，需通过计算实现水平或者垂直居中，方法如下：

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

11.5.2 定位的特殊特性

（1）绝对定位和固定定位也和浮动类似：

1. 行内元素添加绝对或者固定定位，可以直接设置高度或宽度
2. 块级元素添加绝对或者固定定位，如果不给宽度或高度，默认大小是内容的大小

（2）脱标的盒子不会触发外边距塌陷

• 浮动元素、绝对定位 (固定定位) 元素的都不会触发外边距合并的问题

（3）绝对定位（固定定位）会完全压住盒子

• 浮动元素不同，只会压住它下面标准流的盒子，但不会压住下面标准流盒子里面的文字（图片）

• 但绝对定位（固定定位）会压住下面标准流所有的内容

• 浮动之所以不会压住文字，是因为浮动产生的目的最初是为了做文字环绕的效果（文字会围绕浮动元素）

11.6 元素的显示与隐藏

本质：让一个元素在页面中隐藏或显示出来

11.6.1 display属性（重要）

定义：display 属性用于设置一个元素如何显示

• display: none; 隐藏对象
• display: block; 除了转换为块级元素外，同时还有显示元素的意思

display隐藏元素后，不再占有原来的位置

后面应用极其广泛，搭配JS可做很多的网页特效

11.6.2 visibility 可见性

定义：visibility 属性用于指定一个元素 可见 或 隐藏

• visibility: visible 元素可视
• visibility: hidden 元素隐藏

visibility 隐藏元素后，继续占有原来的位置。

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

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

11.6.3 overflow 溢出

定义：overflow 属性用于设置 —— 当内容溢出一个元素的框时，如何显示

一般情况，都不想让溢出内容显示，溢出部分会影响布局。但如果有定位的盒子，请慎用overflow: hidden，因为它会隐藏多余的部分

11.6.4 显示和隐藏总结

1. display 显示隐藏元素，但不保留位置
2. visIbility 显示隐藏元素，但保留原来位置
3. overflow 溢出的显示和隐藏，但是只对于溢出的部分进行处理

11.7 网页布局总结

1.通过盒子模型，知道大部分HTML标签都是一个盒子

2.通过CSS浮动、定位可以让每个盒子排列成网页

3.一个完整的网页，是标准流、浮动、定位一起完成布局的：

• 标准流：让盒子上下、左右排列，垂直的块级盒子显示就用标准流布局
• 浮动：让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
• 定位：最大特点是有层叠的概念，可让多个盒子前后叠压显示；若元素自由在某个盒子内移动就用定位布局

12 CSS高级技巧

12.1 精灵图

一、为什么需要精灵图

答：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）

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

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

二、精灵图（sprities）的使用

1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中

2.移动背景图片位置，找到所需背景图片，此时可以使用background-position

3.移动的距离就是这个目标图片的 x 和 y 坐标；一般情况下都是往上往左移动，故一般都是负值（注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）

4.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

12.2 字体图标

12.2.1 字体图标的产生

虽然精灵图有很多优点，但缺点也很明显：

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

因此，诞生了字体图标iconfont（展示的是图标，本质是字体），优点：

• 轻量级：一个图标字体要比一系列的图像要小
• 灵活性：本质是文字，可以随意的改变颜色、产生阴影、透明效果、旋转等
• 兼容性：几乎支持所有的浏览器，放心使用

总结：遇到一些结构和样式比较简单的小图标，就用字体图标；遇到一些结构和样式复杂一点的小图片，就用精灵图。

12.2.2 字体图标的使用

1.上网下载字体图标

• icomoon 字库
• 阿里 iconfont 字库

2.把下载包里面的fonts文件夹放入页面根目录下，不同字体文件格式是为了兼容不同浏览器

3.在CSS样式中全局声明字体（引入），打开style.css复制

4.打开icomoon文件夹中的demo.html，复制相应图标的字符到盒子中，并在页面中使用处，设置：font-family: 'icomoon';

12.2.3 字体图标的追加

1.打开网页，选择import icons，上传selection.json文件，继续选择需要的图标

2.重新下载icomoon文件夹，解压后，替换旧的icomoon文件夹

12.3 CSS三角

三角样式、代码如下所示：

div {
    width: 0;
    height: 0;
    /* 行高和字号可不写，照顾低版本浏览器*/
    font-size: 0;	
    border: 50px solid transparent;
    border-left-color: pink;
}

再用绝对定位，加到大盒子中，做出三角的效果

12.4 用户界面样式

界面样式：更改用户一些操作样式，提高用户体验；主要讲几方面：

• 更改用户鼠标 样式
• 表单轮廓
• 防止表单域拖拽

12.4.1 鼠标样式 cursor

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

12.4.2 表单轮廓线

1.给表单添加outline: 0; 或者 outline: none;样式，就可去掉默认的边框，如：

input {
    outline: none;
}

2.实际开发时，需要去掉文本域右下角的拖拽按钮

textarea {
    resize: none;
}

注意：文本域的标签，建议写在一行，不然文本框中会出现空格

12.5 vertical-align 属性应用

1.vertical-align 属性使用场景：常用于设置图片或者表单(行内块元素）和文字的垂直对齐（用于设置行内或行内块元素的垂直对齐方式）

语法（默认为baseline）：

vertical-align: baseline | top | middle | bottom

示例：

总结：实际开发中，建议让文字和图片垂直居中对齐

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

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

解决方法有两种：

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

12.7 溢出的文字省略号显示

12.7.1 单行文本

单行文本溢出时显示省略号 —— 必须满足三个条件，代码如下：

/* 1.强制文本在一行内显示 （white-space的默认值为normal）*/
white-space: nowrap;
/* 2.溢出部分隐藏起来 */
overflow: hidden;
/* 3.文字溢出的用省略号显示 */
text-overflow: ellipsis;

12.7.2 多行文本

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

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

注意：该功能建议让后台人员做，因为它们可以设置显示多少个字，操作更简单

12.8 常见的布局技巧

12.8.1 margin负值运用

1. 让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框

2. 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

12.8.2 文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性，做到文字围绕浮动元素

12.8.3 行内块巧妙运用

巧妙运用行内块，制作以下效果：

页码在页面中间显示:

1. 把这些链接盒子转换为行内块， 之后给父级指定 text-align:center;

2. 利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中

12.8.4 CSS三角强化

制作直角三角形，代码如下：

width: 0;
height: 0;
/*1、只保留右边框的颜色*/
border-color: transparent red transparent transparent;
border-style: solid;
/*把上边框设置大点，把右边挤成直接三角形*/
border-width: 22px 8px 0 0;

12.9 CSS初始化

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

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

Unicode编码字体：把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题，如：

• 黑体 \9ED1\4F53

• 宋体 \5B8B\4F53

• 微软雅黑 \5FAE\8F6F\96C5\9ED1