腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

PHP 开发

基于 PHP(Laravel, Spiral) 的 Web 全栈开发技术干货

专栏作者

56

文章

108669

阅读量

47

订阅数

webkit中BFC元素临近浮动元素时的边距bug

一直以来我们都很熟悉IE的“浮动边距加倍”的bug，并且绝大多数重构人员都已经很擅长在需要浮动时就直接绕过他。其实以webkit为核心的浏览器，包括但不限于Safari和Chrome，也有一个关于浮动和边距的bug，同样会造成布局错误。我在最近三个月的前一个月连续遭遇了两次这个bug，后两个月虽然避免了再次出现，但是直到现在才把这个bug彻底弄清楚。触发这个bug的条件是：在一个非浮动元素上应用overflow，且其值不为visible（这将形成一个Block Formatting Context元素）

2018-03-06

1.6K0

容易被误解的overflow:hidden

为了页面的健壮性，我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开，有时候是为了配合其它规则实现文字截断，还有时候纯粹是为了创建块级上下文。但是，很多人对这个属性是存在着一定的误解的，网上很多入门的资料或文章都只提到用overflow:hidden加固定的宽度（或高度）可以强制隐藏内部的超出容器的内容。包括之前我们在使用overflow:hidden创建块级上下文的方式来实现图文混排时，都认为overflow:hidden造成了特殊情况下的麻烦（详见[cref flexible-t

2018-03-06

3.2K0

禁用Firefox自带的元素查看工具

对于web前端工程师来说，用Firefox+Firebug进行CSS和JavaScript的调试已经是非常熟悉和习惯了。如今，新版本的Firefox中又内嵌了一个元素查看工具（图1），类似Firebug，但是初步体验下来，功能远不如Firebug（图2），使用起来也远不如Firebug方便。但是右键菜单中的两个“查看元素”选项（图3），常常一不小心就按错了。这个新增的内置元素查看工具，不但没有给我带来便利，反而造成了许多不便。幸好，我们可以轻松地禁用它。禁用新版Firefox自带的元素查看器的方法很简单

2018-03-06

1.5K0

前台开发从头说起：理解css盒模型

在掌握了丰富而强大的css选择符之后，就具备了将css样式根据需要应用到网页中任何元素的能力。能够应用规则了，接下来就需要熟练掌握规则的制定方法——什么样的属性组合能够实现什么样的效果。一般的颜色、字体、字号、行高等的设置比较容易掌握，而初学者在应用css的时候，主要头疼的还是如何用css实现复杂的网页布局，从两栏布局、三栏布局，到表单设计等。在布局的时候，实际上主要是借助元素的宽、高、定位、浮动、边距、边框、间距、背景颜色、背景图片的组合来实现的。而所有这些，都要基于对css盒模型的理解。网上对盒模型的论

2018-03-06

1.3K0

前台开发从头说起：谈谈CSS选择符

以前我接受了网上不少博文的说法，一直认为学习css的三大最重要问题是：盒模型、定位、浮动。因为这三块的内容决定了css布局的能力。但是通过上一篇日志的分析，xhtml要实现和css的解耦，就要尽量不依赖于css（或者说不要纯粹为了给css预留接口而添加不必要的class和id），那么，在用css布局之前，其实就有一个更紧迫的任务摆在我们的面前——如何将css规则准确应用到目标元素。于是，css选择符的地位在这个前提下就空前的提高了。所以，在开始学习盒模型、浮动、定位之前，有必要回顾一下选择符。一般稍微接触

2018-03-06

1K0

自适应的多列图文混排改进

关于网页两栏、三栏的布局讨论由来已久，有各种各样上佳的方案。本文重点讨论的不是两栏、三栏布局这样通用的解决方案，而是一个专门针对两栏图文混排的特定需求的改进型方案。当然其中的原理也可以被应用于两栏布局甚至更多，那是你举一反三，不是本文讨论的重点。你也可以先看一下最终的示例页面。开始之前，首先来看一下我们的需求：一个通用的结构，可以放在不同宽度的布局列中；该结构基本构成为左图（头像）右文（多种结构），左右宽度均不固定；左栏宽度由内容最小宽度确定，右栏无论内容多少要占满容器剩余宽度；右栏可能有定

2018-03-02

1.3K0

[译]CSS边框实现“无图化”设计

原文：http://www.yuiblog.com/blog/2011/03/08/css-border-tricks-with-collapsed-boxes/ 译文：[cref css-borde

2018-03-02

8270

深入解析CSS样式层叠权重值

读到《重新认识CSS的权重》这篇，鬼哥在文章最后给出了便于记忆的顺序：“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承”。那么这个顺序是怎么得出来的呢？实际上在CSS2规范关于具体性(specificity)的定义中，描述是非常明确的，但是很多中文版本的 CSS 图书中采用了 10 进制的简单相加计算方式（包括第一版《CSS 权威指南》，第二版中已经纠正）。因此把规范中对CSS层叠优先级的相关定义意译一下，希望给初入门或对权重计算尚有疑惑的

2018-03-02

1.1K0

[译]clearfix改良及overflow:hidden详解

原文:clearfix Reloaded + overflow:hidden Demystified clearfix 和 overflow:hidden 可算得上是不增加额外标签清除浮动的两个最流行的技术了。这篇短文介绍了如何改进clearfix进行增强，同时对overflow:hidden进行了深入的解释。 clearfix 曾经在网上流行的一种clearfix的方法： .clearfix:after { content: "."; display: block; height

2018-03-02

1.3K0

动态实现指定图片半透明及鼠标事件

html javascript css

说明：在不改变HTML代码的前提下，通过CSS和JavaScript，对指定的图片实现半透明效果。并为该图片添加鼠标滑过和滑出特效。具体实现： 1.假设我们要操作的图片放置在一个id="imgbox"的div容器中。如下面的代码： <div id="imgbox" style="width:700px;margin:auto;"><img src="/images/logof.gif"></div> 2.首先，在css中增加两个类定义，为了避免影响到其它图片，最好是用选择限定符加以限定。如下代码： #im

2018-03-02

1.1K0

没有更多了

社区活动

腾讯技术创作狂欢月

“码”上创作 21 天，分 10000 元奖品池！

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态