分类: HTML/CSS

iframe 隐藏滚动条、高度自适应及父子页面通信

HTML 标签 iframe 用于在当前页面中嵌套另外一个页面,一般我们需要在页面中嵌入一些第三方的视频、地图、广告等展示资源时就会用到它。 但在使用 iframe 时往往会遇到一些问题,比如滚动条问题、高度自适应问题以及浏览器同源策略引起的问题等,这里我们就来看一下该如何解决。

CSS 判断空标签

现在很多文章发布系统用的都是富文本编辑器,这样在编写内容时难免会出现空标签,如果不处理,最终就会影响到页面的排版。 对于这个问题,我们可能会通过正则匹配来处理,但是现在有更简单的办法,那就是通过 CSS3 中的 :empty 选择器来判断。

CSS 判断空标签

CSS 修改文字选中后的颜色

在页面中修改文字被选中后的颜色可以用 ::selection 选择器,它不仅能够修改选中内容的颜色,还可以修改其背景色、光标状态等。

CSS 修改文字选中后的颜色

CSS 禁止选中内容

我们可以通过 user-select 属性来禁止选中页面中的内容,包括文本、图片等,代码示例: .no-select { -moz-user-select: none; -webkit-user-select: none; user-select: none;} <div class="box">这段文字可以被选中</div><div class="box no-select">这段文字不可以被选中</div>

CSS 禁止选中内容

使用 font-display 优化 Web fonts 的加载

Web fonts 的使用越来越广泛,可以允许我们在页面上使用用户终端上没有安装的字体,尤其是在图标的使用上。但由于字体的加载依赖网络环境,因此可能会带来一些性能及显示问题,比如网络环境较差时,Web fonts 并不能及时的显示出来,显示效果可能是一团糟。

使用 font-display 优化 Web fonts 的加载

CSS 中高度100%的问题

在处理 CSS 布局时,很多时候都会用到让元素高度为 100% 的场景,但我们写完 height: 100%; 后却发现没有生效,下面我们来看一下原因。

CSS 中高度100%的问题

CSS3 动画的回调处理

我们在做js动画的时候,很多时候都需要做回调处理,比如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等,但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢?

CSS3 实现3D翻转

CSS3实现3D翻转的思路及源码。 首先,需要增加翻转特效的元素需要有如下的结构: <div class="box"> <div class="front">正面,只是正面</div> <div class="back">反面,这是反面</div></div> .box作为一个容器存放翻转的元素,然后.front是正面显示的内容,.back是反面显示的内容。 然后就是css3的处理了,主要就是transition和transform的应用。