HTML+web前端学习

position定位

position特性

css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。

position取值

static（默认）

relative相对定位

如果没有定位偏移量，对元素本省没有任何影响，
不使元素脱离文档流，不影响其他元素布局，left、top、right、bottom是相对当前元素滋生进行偏移的

absolute：

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

position定位

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

sticky黏性定位

在指定的位置，进行黏性操作。

z-index定位层次

默认层级为0
嵌套时候的层级问题

css添加省略号

第一步：width

必须有一个固定的宽

第二步：white-space：nowrap

不让内容折行

第三步：overflow：hidden

隐藏溢出的内容

第四步：text-overflow:ellipsis

添加省略号

css Sprite

特性：

css雪碧也叫css精灵是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。

好处：

第一：可以减少图片的质量，网页的图片加载速度快

第二：减少图片的请求的次数，加快网页的打开

css圆角

border-radius

给标签添加圆角

pc端的布局

通栏

自适应浏览器的宽度

版心

固定一个宽度，并且让容器居中