Web前端从入门到精通（第四周）

position定位

• position特性
  css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。
• position取值
  static（默认）
  relative（相对定位）
  absolute（绝对定位）
  fixed（固定定位）
  sticky（粘性定位）

relative相对定位

• 相关特性：
  如果没有定位偏移量，对元素本身没有任何影响
  不使元素脱离文档流
  不影响其他元素布局
  left、top、right、bottom是相对于当前元素自身进行偏移的

absolute绝对定位

• 相关特性：
  使元素完全脱离文档流
  使内联元素支持宽高（让内联具备块特性）
  使块元素默认宽根据内容决定（让块具备内联的特性）
  如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）

fixed固定定位

• 相关特性：
  使元素完全脱离文档流
  使内联元素支持宽高（让内联具备块特性）
  使块元素默认宽根据内容决定（让块具备内联的特性）
  相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响

sticky粘性定位

• 相关特性：在指定的位置，进行粘性操作。

z-index定位层级

• 相关特性：
  默认层级为0
  嵌套时候的层级问题

CSS添加省略号

• width
  必须有一个固定的宽
• white-space：nowrap
  不让内容折行
• overflow：hidden
  隐藏溢出的内容
• text-overflow：ellipsis
  添加省略号

CSS精灵及好处

CSS Sprite

• 特性：
  CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。
• 好处：
  可以减少图片的质量，网页的图片加载速度快
  减少图片的请求的次数，加快网页的打开

CSS圆角设置

• border-radius
  给标签添加圆角。

PC段布局

• 通栏：自适应浏览器的宽度。
• 版心：固定一个宽度，并且让容器居中。

练习

https://www.csdn.net/?spm=1011.2266.3001.4476