position

前言 sticky这种设计效果是经常出现的，比如陶宝右侧的工具栏，当我们向下滚动到它的位置时，它就会黏住顶部跟随滚动，类似position: fixed的效果，只不过它的触发条件是当我们滚动到所在位置时，才触发fixed的效果的： 我们经常的做法是用JavaScript去监听滚动事件然后进行处理，比如会用到类似stickyjs的一些插件 http://stickyjs.com/ ，从2017年左右开始css中的position:sticky就是为了这中设计而诞生的，今天我们来认识一下它。 兼容性 差不多两年时间了，兼容性还算可以的，对于那种面向技术人员，后台管理人员的项目，我倒是觉得可以用上，毕竟他们只是升级一下浏览器不仅能体验更好的效果，也能降低码农的工作量： https://caniuse.com/#search=position%3A%20sticky 学习使用 我们来实现陶宝右侧的效果，就特别简单了，没什么好学的，直接设置就行了： .sidebar { position: -webkit-sticky; position: sticky; top: 0; } 简单例子: https://jsbin.com/vivixezule/edit?html,css,output 还有一种设计效果，比如叠加效果也能实现，还有很多效果，具体大家可以根据sticky特性自由发挥： 叠加效果

前言 此文章是 解剖CSS布局原理 的续集，之前那篇文章讲的都是理论，本文章讲具体的实例，根据自己对布局的理解与开发经验分为以下几类。 因为PC端和移动端布局差异较大，所以我将两端布局分开讲，本文章将针对PC端的布局进行讲解，以下代码只写关键代码。如果你发现你写了关键打代码还达不到效果，请检查是否写了不该写的样式。 为了提高网页性能，考虑到repaint/reflow，表格元素尽量少用，有其他选择的情况尽量用其他布局。 居中布局 一、单个元素水平居中 <div id="container"> <div class="box"></div> </div> 1. 宽度固定 方法一： .box { width: 300px; margin: 0 auto; } 比较常用的方法 方法二： #container { position: relative; } .box { width: 100px; position: absolute; left: 0; right: 0; margin: 0 auto; } 此方法适用于定位时的居中方式 2. 宽度不固定 方法一： .box { display: table; margin: 0 auto; } 缺点：设置为表格元素，内部元素的布局有可能收到影响 方法二： #container { position: relative; } .box {

做移动端的Web也有一段时间了，踩过的坑真心不少。 下面列出一些，移动端浏览器兼容性的Bug，供大家参考。 【UC浏览器】video标签脱离文档流 场景：<video>标签的父元素(祖辈元素)设置transform样式后，<video>标签会脱离文档流。 测试环境：UC浏览器 8.7/8.6 + Android 2.3/4.0 。 Demo：http://t.cn/zj3xiyu 解决方案：不使用transform属性。translate用top、margin等属性替代。 【UC浏览器】video标签总在最前 场景：<video>标签总是在最前（可以理解为video标签的z-index属性是Max）。 测试环境：UC浏览器 8.7/8.6 + Android 2.3/4.0 。 【UC浏览器】position:fixed 属性在UC浏览器的奇葩现象 场景：设置了position: fixed 的元素会遮挡z-index值更高的同辈元素。 在8.6的版本,这个情况直接出现。 在8.7之后的版本,当同辈元素的height大于713这个「神奇」的数值时,才会被遮挡。 测试环境：UC浏览器 8.8_beta/8.7/8.6 + Android 2.3/4.0 。 Demo：http://t.cn/zYLTSg6 【QQ手机浏览器】不支持HttpOnly 场景

在开发页面的时候，遇到很多的列表都需要用到箭头，可以直接用图片作背景铺垫，纯CSS也能实现，并且没有兼容性顾虑，不用CSS3,相比而言，比图片更好用。 原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了 梯形代码： html: <div class="arrow"></div> css: arrow{ width:10px; height:10px; border:10px solid #000; border-left-color:orange; } 把高宽设为0，其他边为透明颜色，三角形出来了： html: <div class="arrow"></div> css: arrow{ width:0; height:0; border: 10px solid transparent; border-left-color: orange;//左箭头 } 在开发中，可以利用伪类，定位实现，不改变dom结构，简洁优雅。content提供给三角形的位置，这个属性不能少。 html: <div class="arrow">文字文字</div> css: div{ position:relative; arrow{ width:0; height:0; border: 10px solid transparent;

< html > < head > < title > Title </ title > < style > .bannerbox { width:100%; position:relative; overflow:hidden; height:200px; } .banner { width:3000px; position:absolute; left:50%; margin-left:-1500px; } </ style > </ head > < body > < div class = "bannerbox" > < div class = "banner" > < img src = "t1.jpg" > </ div > </ div > </ body > </ html > 来源： CSDN 作者： Alvin哥哥 链接： https://blog.csdn.net/m0_37412958/article/details/78165531