---

1.定位

1.1 定位基础

• 需要定位的原因：
  1.当需要某个元素自由的在盒子内移动位置，并且压住其他盒子时。
  2.当滚动窗口时，需要固定在屏幕上的盒子。

• 定位组成：

  • 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，只是在按照定位的方式来移动盒子。
  • 定位=定位模式+边偏移
  • 定位模式：用于指定一个元素在文档中的定位方式。
  • 边偏移：决定了该元素的最终位置。

• 定位模式：

  • 语法：通过CSS的position属性来设置，有4个取值

  值	语义
  static	静态定位
  relative	相对定位
  absolute	绝对定位
  fixed	固定定位

• 边偏移：

• 语法：有top、bottom、left、right这4个属性

  边偏移属性	示例	描述
  top	top:80px	顶端偏移量，定义的元素相对于其父元素上边线的距离
  bottom	bottom:80px	底部偏移量，定义的元素相对于其父元素下边线的距离
  left	left:80px	左侧偏移量，定义的元素相对于其父元素左边线的距离
  right	right:80px	右侧偏移量，定义的元素相对于其父元素右边线的距离

1.2 定位模式

1.2.1 静态定位

• 作用：静态定位时元素的默认定位方式，未定位的意思
• 语法：选择器{ position: static; }
  • 静态定位按照标准流特性摆放位置，它没有边偏移。
  • 静态定位在布局时很少用到。

1.2.2 相对定位

• 作用：相对定位是在元素移动位置时，相对于它原来的位置来说的。
• 语法：选择器 { position: relative; }
• 特点：
  • 是相对于自己原来的位置移动的，参考点是自己原来的位置。
  • 原来的位置继续保留，不会被其他元素顶替。原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待（不脱标，继续保留原有位置）

相对定位最典型的应用是给绝对定位当爹的

1.2.3 绝对定位

• 作用：绝对定位是元素在移动时，是相对于它的祖先元素来说的。
• 语法：选择器{position:absolute;}
• 特点：
  • 如果没有祖先元素或祖先元素没有定位，则以浏览器为准进行定位。
  • 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点进行移动。
  • 绝对定位不再占有原来的位置。（脱标）

1.2.4 子绝父相

• 含义：子级使用绝对定位，父级则需要使用相对定位
• 原因：
  1.子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
  2.父盒子需要加定位，限制子盒子在父盒子内显示。
  3.父盒子布局时，需要占有位置，防止后面的盒子顶替原有的位置，因此父盒子只能是相对定位。

1.2.5 固定定位

• 作用：固定定位是元素固定于浏览器可视区的位置，主要使用于浏览器页面滚动时元素的位置不会改变。
• 语法：选择器{ position:fixed; }
• 场景：网页中固定在浏览器的广告
• 特点：
  • 以浏览器的可视窗口为参考点进行移动。
    • 跟父元素没有任何关系
    • 不随滚动条滚动。
  • 固定定位不占有原先的位置。 （脱标）
    • 可以把固定定位看做特殊的绝对定位。

1.2.6 固定在版心的右侧：

• 小算法：

1. 让固定定位的盒子left:50%，走到浏览器可视区的的一半位置（即版心的中间）。
2. 让固定定位的盒子margin-left:版心宽度的一半距离。即再多走版心宽度的一半，就可以让固定定位的盒子紧贴着版心右侧对齐了。

注意： 固定定位的盒子一定要写在版心盒子的前面，否则，固定定位的盒子会被版心盒子盖住。

1.2.7 粘性定位

• 作用：粘性定位可被看作 相对定位和固定定位的混合。 sticky：粘性的
• 语法：选择器 {position: sticky; top:10px; }
• 场景：
• 特点：
  • 以浏览器可视窗口为参照点移动（固定定位的特点）
  • 粘性定位占有原先的位置（相对定位的特点）
  • 必须添加top、left、right、bottom 其中一个才有效
• 缺点：兼容性较差，IE不支持。

1.2.8 绝对定位盒子居中算法

• 原因：加了绝对定位的盒子不能通过margin:0 auto;来水平居中。
• 算法：
  1.left:50%;： 让盒子的左侧移动到父级元素的水平中心位置。
  2.margin-left:-100px;： 让盒子向左移动自身宽度的一半。（注意是左移负值）

1.2.9 定位的特殊特性

1. 绝对定位和固定定位也和 浮动类似。
   • 行内元素添加 绝对或固定定位，可以直接设置宽度和高度。
   • 块级元素添加 绝对或固定定位，如果不给宽高，默认大小是内容的大小。
2. 浮动元素、绝对定位 和 固定定位的元素，都不会触发外边距合并问题
3. 绝对定位和固定定位 会完全压制盒子
   • 浮动元素不同，只会压住它下面标准流的盒子，但不会压住下面标准流盒子里的文字（图片）。因为浮动产生的目的，最初就是为了做文字环绕效果的。
   • 但是绝对定位和固定定位会完全压住。

1.2.8 定位总结

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否（占有位置）	相对自身位置移动	常用
absolute 绝对定位	是（不占位置）	带有定位的父级	常用
fixed 固定定位	是（不占位置）	浏览器可视区	常用
sticky 粘性定位	否（占有位置）	浏览器可视区	当前阶段很少

• 注意：
  1.三大定位的两个特点： 1.是否脱标 2.以谁为基准点移动位置。
  2.重点是子绝父相。

1.3 定位叠放次序

• 作用：使用定位布局时，可能会出现盒子重叠的情况。因此，可以使用 z-index来控制盒子的前后次序（z轴）
• 语法： 选择器{z-index:1;}
  • 数值可以是正整数、负数或0，默认是auto，数值越大，盒子越靠上。
  • 只有定位的盒子才有z-index属性
  • 如果数值相同，则按照书写顺序，后来居上。
  • 数字后面不能加单位。

---

2.网页布局总结

• 大部分的HTML标签是一个盒子

• 一个完整的网页，是由标准流、浮动、定位一起完成布局的，每个都有自己专门的用法

• 1.标准流
  可以让盒子上下排列或左右排列，垂直的块级盒子显示就用标准流布局。

• 2.浮动
  可以让多个块级元素一行显示 或 左右对齐盒子，多个块级盒子水平显示就用浮动布局。

• 3.定位
  定位最大的特点是 有层叠的概念，就是可以让多个盒子前后层叠来显示，如果元素自由在某个盒子内移动就用定位布局。

---

3.元素显示和隐藏

• 作用：让一个元素在网页中隐藏或显示出来。
• 场景：类似一个网页广告，点击关闭就不见了，但是刷新网页会重新出现。
• 分类： display显示隐藏， visibility显示隐藏， overflow溢出显示隐藏

3.1 display属性

• 作用：display属性用于设置一个元素如何显示
• 语法：
  • display:none; 隐藏对象
  • display:block; 除了转化为块级元素之外，还有显示元素的意思
• 特点： display 隐藏元素后，不再占有原来的位置
  后面的应用很广，搭配JS可以做很多网页特效。

3.2 visibility 可见性

• 作用：visibility属性 用于指定一个元素应该 可见还是隐藏。
• 语法：
  • visibility:visible;，元素可视
  • visibility:hidden;，元素隐藏
• 特点： visibility隐藏元素后，继续占有原来的位置

3.3 overflow 溢出

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

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll	不管是否超出内容，都显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

注意：
1.一般情况下，都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
2.如果有定位的盒子，慎用overflow:hidden;，因为会隐藏多余的部分。

---

4.CSS技巧

4.1 精灵图

• 原因：有效减少服务器接受和发送请求的次数，提高网页的加载速度，出现了精灵图（CSS Sprited/CSS 雪碧）技术。
• 原理：将网页中的一些小背景图像整合在一张大图里，这样服务器只需要一次请求就可以了。这个大图也称为 sprites 精灵图。
• 使用：
  • 移动背景图片位置，使用background-position。
  • 移动的距离就是这个目标图片的x和y值。注意：y轴是向下为正的。
  • 一般情况是往上往左移动，所以数值是负值。
  • 在使用精灵图的时候要精确测量，每个小背景图片的大小和位置。

注意： 移动的是背景图，不是移动的选择框。

4.2 字体图标

• 字体图标使用场景：网页中通用、常用的一些小图标。
• 不使用精灵图的原因：
  • 精灵图还是比较大的
  • 图片本身放大和缩小会失真。
  • 一旦图片制作完毕更换会很麻烦。
• 字体图标：iconfont，展示的是图标，本质是字体。
  • 优点：
    1.轻量级-减少服务器的请求，图标渲染快。
    2.灵活性-本质是文字，可以随意更改颜色、大小、阴影、透明、旋转等。
    3.兼容性-几乎支持所有的浏览器。
  • 缺点：字体图标不能代替精灵技术，只是对图标部分的技术提升和优化。
• 字体图标的引入：
  1.把下载包里的font文件夹放入页面的根目录下。
  2.在CSS样式中全局声明字体：可以理解为把这些字体通过CSS引入页面中。(不需要记忆，直接复制)

  @font-face {
              font-family: 'icomoon';
              src:  url('fonts/icomoon.eot?q17km');
              src:  url('fonts/icomoon.eot?q17km#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?q17km') format('truetype'),
                url('fonts/icomoon.woff?q17km') format('woff'),
                url('fonts/icomoon.svg?q17km#icomoon') format('svg');
              font-weight: normal;
              font-style: normal;
              font-display: block;
            }
  span{
    font-family:  'icomoon';
    font-size: 14px;
  }
  
  ...
  
  <span> 小方框1</span>
  <span> 小方框2</span>
  

  3.声明字体的种类，font-family:'iconmoon';
  4.复制下载下来的字体图标网页里的小方框，粘贴到HTML标签中。
• 字体图标的追加：
  • 把压缩包里的 selection.json 重新上传，然后选中想要的新图标，重新下载压缩包，替换原来的文件即可。

4.3 CSS三角

• 语法：border-size属性决定了三角形的大小。

  .box{
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left-color: pink;
                        line-height:0;
                        font-size:0;
        }
  

  后两句代码是为解决兼容性问题。

4.4 CSS用户界面样式

4.4.1 鼠标样式

• 作用：改变鼠标的显示样式
• 语法：选择器 { cursor:pointer;}

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

4.4.2 轮廓线

• 作用：改变表单选中时的边框
• 语法：input { outline:none;}，去掉默认的蓝色边框。

4.4.3 防止拖拽文本域

• 作用：防止文本域可拖拽，即去掉右下角。
• 语法：textarea {resize:none;}

注意：要想文本域里的输入，起始和边框没有距离，只需要把<textarea></textarea>放在一行里即可。

4.5 vertical-align 属性应用

• 作用：用于设置图片或表单（行内块元素） 和 文字的垂直对齐。
• 解释：设置一个元素的垂直对齐方式，只针对行内元素和行内块元素有效。
• 语法：
  vertical-align: baseline | top |middle |bottom;

  值	描述
  baseline	默认，元素放置在父元素的基线上
  top	把元素的顶端和行中最高元素的顶端对齐
  middle	把此元素放置在父元素的中部
  bottom	把元素的底端和行中最低的元素的底端对齐

4.6 解决图片底部默认空白缝隙

• 问题：图片底侧会有一个空白缝隙，原因是 行内块元素 会和 文字的基线对齐。
• 解决方法：
  1.给图片添加vertical-align: middle | bottom | top ;（提倡）
  2.把图片转换为块级元素：display:block;

4.7 溢出的省略号显示

• 单行文本溢出省略号
  • 必须满足三个条件：

  /*1. 先强制一行内显示文本*/
  white-space: nowrap; ( 默认 normal 自动换行)
   /*2. 超出的部分隐藏*/
  overflow: hidden;
   /*3. 文字用省略号替代超出的部分*/
    text-overflow: ellipsis;
  

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

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

---

5.常见布局技巧

• margin负值的运用
  1.让每个盒子 margin 往左侧移动 -1px，正好压住相邻盒子边框。
  （防止相邻盒子边重叠，造成加粗现象）
  2.鼠标经过某个盒子时，提高当前的盒子层级。没有定位，则加相对定位（保留位置）；如果有定位，则加z-index。
  （鼠标经过显示边框颜色，会出现边框颜色显示不全的现象。设置层级，可以压住其他盒子，显示完整。）

• 文字围绕浮动元素

  • 方法：直接在大盒子里写上文字，然后让图片浮动在盒子里，文字就会自动围绕图片排列。

• 行内块的巧妙运用

  • 设置页数跳转。直接设置一个大盒子，然后在里面设置很多a标签，在样式里使用display:inline-block;，可以方便设置。

• CSS三角强化

  • 制造直角三角形：
    1.将边框的宽和高都设置为0；
    （此时相当于四个三角形上左下右，拼成一个正方形(各边宽度相等的情况下)）
    2.左边和下边的边框宽度设置为0；
    （下边的边框宽度为0，使下面的三角形减小到消失，同时左右的三角形逐渐变成直角三角形，最终剩下的三个三角形成为一个长方形；左边的同理，左边的三角形缩小到消失，右边的三角形不变，上三角形逐渐变成直角三角形，和右三角形成为一个小的长方形。）
    3.把上边框的宽度调大，颜色为透明。（直角边的高度）
    （上边框宽度越大，则长方形的高度越高，将上边框设置为透明，则上三角形消失，只剩下右边的直角三角形。）

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