标签: css layout

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%的问题

页面布局中常用的清除浮动的方法

我们在页面布局时,基本上避免不了使用float,但由此也会引发一些问题,尤其是在容器高度不固定时,此时它的高度完全是由内部的元素撑开的。如果内部元素还是浮动的,那么由于内部的元素脱离了文档流,父容器就不能被撑开了。如果父容器设置的有背景或者边框的话,此时就不能正常显示了,另外,父容器下边的其他容器或内容也会跟着向上“浮”, 占据上面的子容器应该占据的位置。那么,这时就需要清除浮动了。

页面布局中常用的清除浮动的方法

CSS 垂直居中总结

CSS垂直居中总结,包括文字、图片、div。 相关知识点: CSS文字垂直居中 CSS图片垂直居中 这篇主要内容是关于div的垂直居中。