海阔天空

手机扫码查看

HTML和CSS

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

position取值：
static(默认值)，relative(相对定位)，absolute(绝对定位)
fixed(固定定位)，sticky(粘性定位)

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

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

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

sticky：粘性定位(吸顶)
在指定的位置，进行粘性操作
div{position:sticky;top:0;}

定位层级z-index
默认层级为0，嵌套时候的层级

 

css添加省略号

width必须要一个宽度
white-space:nowrap不让内容折行
overflow:hidden隐藏溢出的内容
text-overflow:ellipsis添加省略号

---

css雪碧Sprite

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

好处：
可以减少图片的质量，网页的图片加载速度快
减少图片的请求的次数，加快网页的打开

---

css圆角
border-radius