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

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

前端杂货铺

专栏作者

123

文章

181895

阅读量

39

订阅数

样式化加载失败的图片

本片文章翻译自 Styling Broken Images 翻译过程中可能会在原意不变的基础上有些细微改动，望读者见谅加载失败的图片是比较丑陋的，比如但是我们可以让结果变得更美好。通过给元素设置CSS相关属性可以实现更美的呈现。 IMG元素你需要知道的两点知识我们可以针对IMG元素设置排版相关的CSS样式（诸如font等属性）。一旦IMG的可替换文本（即alt属性）出现，则设置的CSS样式应用于这些文本； IMG元素属于可替换元素（可替换元素是指元素的外观和大小受外部源所影响，常见的可替换元素如IM

2018-03-15

2.6K0

reflow和repaint（摘录自张鑫旭的翻译）

//正文开始关于回流(reflows)与重绘(repaints)，我已经在twitter和delicious上发布，但是并没有在演讲中提到或是以文章形式发布。第一次让我开始思考关于回流(reflows)与重绘(repaints)的问题是在和ParisWeb上的Mr. Glazman做一个firey交换的时候。我可能有一些顽固，但是我确实听了他的一些理论。 Stoyan和我开始讨论如何量化这个问题。展望性能社区，除了一些典型的黑盒实验外，需要与浏览器厂商有更多的合作。对于性能，浏览器制造者知道哪些是重

2018-03-15

1.1K0

关于BFC不会被浮动元素遮盖的一些解释

简介在清除浮动一文中提到BFC不会被浮动元素遮盖，并没有详细探究表现行为。规范中指出，在同一个BFC内，作为子元素的BFC的border-box不应该覆盖同为子元素的浮动元素的margin-box。其实，浏览器在内部通过隐式的给子BFC设置margin值来防止覆盖。例证创建两个浮动元素和一个BFC，然后改变BFC的margin值和浮动元素的margin值，观察它们的位置。 .f1r { background: skyBlue; float: left; width: 200px; }

2018-03-15

9730

绝对定位下的盒模型

元素被绝对定位，那么元素将会脱离正常流（normal flow），并依据包含块来定位。包含块的概念及其判定可以看这里。在负margin的应用一文中，我们提到了一个对于任意一个块元素所形成的框的尺寸的计算公式：　　BoxWidth = MarginLeft + BorderLeftWidth + PaddingLeft + ContentWidth + PaddingLeft + BorderRightWidth + MarginRightWidth; 但是在含有绝对定位元素的包含块内，包含块的尺寸却不能

2018-03-15

8020

负margin的原理以及应用

　　负margin在布局中往往起到意想不到的效果，比如在多栏等高布局中就是用该技巧。　　虽说网络上关于负margin的实践有很多，但对margin负值为什么会出现这样的效果却没有多少讲解，本篇的目的就是阐述负margin 产生或者作用的原因。　　margin负值之所以可以修改元素在文档流中的位置，也可以改变元素的宽度，主要因为一个公式：　　　　BoxWidth =ChildMarginLeft + ChildBorderLeftWidth + ChildPaddingLeft + ChildWidth

2018-03-15

1.1K0

元素的盒模型有几个较为重要的属性，本篇文章主要将脚垫聚集在与height相关的属性上。对于一个并未显式设置高度块框来说，其height的高度不仅仅取决去内容的高度，而且还与该块框的宽度有关。宽度越窄，相应的需要容纳相同内容所需要的空间越大，高度越高。而对于一个非替换行内元素而言（所谓非替换元素，就是呈现的内容都在文档中，比如span，a；而替换元素的典型就是img和表单元素），是无法通过设置高度或者外边距来改变行内元素的高度的，但是内边距对行内元素的background还是有影响的，这个后面再仔细分

2018-03-15

1K0

翻译：如何使用CSS实现多行文本的省略号显示

本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动，并添加译者的一些感想，请各位读者谅解。合理的截断多行文本是件不容易的事情，我们通常采用几种方法解决： overflow: hidden直接隐藏多余的文本 text-overflow: ellipsis只适用于单行文本的处理各种比较脆弱的javascript实现。之所以说这种实现比较脆弱是由于需要文本长度的变化时刻得到回流（relayout）后的布

2018-03-15

2.8K0

position:sticky的兼容性尝试

开篇笔者刚刚结束淘宝的工作，现在加入了一家有青春活力的垂直电商公司，正对着阿里巴巴的西溪园区，最近一直在熟悉新的工作环境和规范，因此博客有好些时间没有更新了，在此抱歉！在忙碌完公司的发布系统之后，逐渐接触到具体的业务。在这里主要介绍下关于css3草案的position：sticky属性的兼容。问题目前前端的h5有个需求，就是“当页面上的若干个标题被拖动到视口的顶部时，则显示一个被定位到视口的顶部的tab标签，可对这个tab标签进行点击导航，并在某个特殊的情况下隐藏”。最简单粗暴的做法就是针对doc

2018-03-15

3.6K0

CSS3的flex布局

flex的一些属性 CSS3中引入了另一种框--flexbox，flexbox有一些block和inline不同的性质，比如：自适应子元素（flex item，又称伸缩项目）的宽度伸缩项目的float，clear，vertical-align属性失效不能继承flex框，但可以依次设置可以修改flex流的方向以及布置规则现在就大体讲述下这个具体属性的表示含义。设置flexbox的兼容性将一个容器设置为flexbox（又称伸缩容器）很简单，但是却存在一些兼容性的问题，比如

2018-03-15

1.4K0

3d效果的图片轮播

CSS3的3d变换 CSS3给我们提供了一个新的功能，那就是3d变换。3d变换和2d变换的基本API函数类似，只不过多了些在Z轴上的操作，不难使用。但是，为了让元素拥有3d变换的功能，我们需要给他的父元素设置相应的变换属性。与其相关的属性为perspective和transform-style。在新版的Chrome中已不需要添加私有前缀，不过为了兼容之前版本的浏览器，建议还是加上私有前缀（本例中并未添加私有前缀）。 perspective属性取值为：none|number。

2018-03-15

2.1K0

IE滤镜及其使用技巧

Gradient Filter和AlphaImageLoader Filter 　　这两个属性是legend IE(IE6,7,8)中的渐变滤镜和透明滤镜，我们先详细介绍下这两个属性的用法，详情可查看MSDN。透明滤镜的使用方式很简单，只需在样式中定义　　　　"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)" 即可。其中，关键部分就是sProperties。sProperties包括3部分，分别设置enab

2018-03-15

1.4K0

CSS3实现圆形进度条

介绍　　闲来无事，去了CSS3Plus网站逛了逛，发现了一个很有意思的实现--css3实现进度条。粗略看了下代码，发现原理其实很简单，不难理解。现在在此讲述下原理并实现一个1s更新的进度条。　　技术细节是这样的：进度条由两个半圆环组成，首先我们的任务是实现左右两个半圆环。圆环可以用border-radius实现，这样就意味着该方法不兼容IE8.可以使用clip来完成对整圆环的剪切；使用rotate函数完成圆环的旋转，通过设置两个半圆环的旋转角度来实现不同进度值的显示。　　clip属性是css2属性

2018-03-15

2.5K0

不要给<a>设置outline:none

outline属性有什么作用原文链接 a{outline:none} do not do it 当用户使用tab键进行链接切换时，该属性会在当前选中的链接（获得焦点）使用该属性，一般来说是虚线框的长方形。这对于没有使用鼠标输入的用户而言尤其有用，它可以作为视觉反馈来告知用户当前的输入。所以说如果设置outline属性为none，则对这些人来说将会是很差的用户体验。给链接元素设置获得焦点属性是非常有必要的，对任何使用键盘来操作用户界面的模式，焦点指示器需可见。为什么有些开发者

2018-03-15

1.8K0

css截断长文本显示

实现截断长文本显示处理，以前是通过后台的截取，但这种方法容易丢失数据，不利于SEO。而通过前端css的截断，则灵活多变，可统一运用与整个网站。这项技术主要运用了text-overflow属性，这个虽是css3的属性，但是在各大浏览器却兼容非常好，ie6系列全部兼容。 .e{ display:inline-block;width: 40px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;

2018-03-15

1.6K0

关于IE6的PNG图像透明使用AlphaImageLoader的缺点

PNG32的alpha透明效果在IE6下会出现bug，出现灰色背景。而目前的解决方案就是 IE提供的滤镜。需要注意的是滤镜并不是对原图片进行修改，而是对相应的html元素进行修改。所以在一个html中的多处使用alpha滤镜，那么性能的损耗将会累加。现总结使用滤镜的缺点：　　1，IE6下使用滤镜，那么无法对该PNG图片进行定位。可以通过其他解决方案完成。这篇文章提到了两种解决方案，分别是硬编码和clip方案。　　2，使用滤镜会冻结IE6的渐进渲染。渲染往往是从css下载完毕开始进行，然而对于使用滤

2018-03-15

8270

定位浮动拾遗

---恢复内容开始--- 浮动元素处在正常文档流上的浮动流上，浮动元素的渲染方式很特殊，首先按照正常文档流进行布局，然后将该元素从文档流中取出并对该元素尽量向左或者向右移动，周围的内容将会环绕该元素。所以，浮动会对兄弟元素的布局造成影响，而且其效率较低，代价较高。绝对定位则是完全脱离文档流，直接相对于包含块进行定位，对兄弟元素的布局没有影响。绝对定位是根据定位元素的包含外边距的框（外边框）到包含块内边界（边框内部）的偏移进行定位。 display,float,position之间的爱恨纠葛：（转自W

2018-03-15

5770

隐藏的几种实现

页面布局上隐藏，但是对屏幕阅读器可见的几种方式: 1, .h{position:relative; left:-900em;top:-900em;} 2, .h{position:absolute; clip:rect(1px 1px 1px 1px)} //采用clip必须对该元素进行绝对定位！采用clip来对其隐藏，对clip的详解请看下面的转载！！ 3, .h{text-indient: -999em;} 4, html5boilerplate的实现方式

2018-03-15

8530

IE6下的png透明图片的背景定位

在IE6下PNG透明图片做背景，无法使用background-position进行定位。但是可以使用margin和绝对定位来进行。另外，由于IE6下的：hover 只对<a>支持，对其他元素都不起作用，所以需要对IE6单独打补丁。可以使用微软提供的 csshover.htc文件进行修复。 <ul class="nav"> <li> <a href="void 0" class="a"><img class="i1" src="img/png_btn.png"><

2018-03-15

1K0

table-cell实现宽度自适应布局

利用table-cell可以实现宽度自适应布局。 table-cell有一些比较好用的属性，比如垂直居中，自适应高度宽度等，为元素设置table-cell布局之后，元素的margin失效，padding有效，而且一旦元素设置了float或者absolute，则table-cell也会失效。 table-cell不兼容IE6,7.但是可以通过触发hasLayout来实现近似的效果。以下可以实现宽度自适应布局： <div class="wrapper"> <img src="../../im

2018-03-15

2K0

清除浮动的原理剖析

常用的清除浮动的几种方法总结下：　　1，手动设置一个标签（在浮动元素下方），然后对其设置clear属性　　　　2，给浮动元素设置 :after伪类，创建块元素，设置clear属性　　3，给父元素设置浮动　　4，给父元素设置overflow设置非visible值（auto，hidden）　　5，给父元素的display设置为table-cell 　　7，在ie6,7中，设置zoom或者width，height来触发haslayout，使父元素包含浮动元素原理剖析：　　1,2方法之所以可以成功，是

2018-03-15

9730

点击加载更多

社区活动

腾讯技术创作狂欢月

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

Python精品学习库

代码在线跑，知识轻松学

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

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

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

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