随笔分类 - Css
摘要：本文翻译自 "CSS Ellipsis: How to Manage Multi Line Ellipsis in Pure CSS" ,文中某些部分有些许改动，并添加译者的一些感想，请各位读者谅解。 合理的截断多行文本是件不容易的事情，我们通常采用几种方法解决： 直接隐藏多余的文本 只适用于单行文
阅读全文
摘要：开篇 笔者刚刚结束淘宝的工作，现在加入了一家有青春活力的垂直电商公司，正对着阿里巴巴的西溪园区，最近一直在熟悉新的工作环境和规范，因此博客有好些时间没有更新了，在此抱歉！ 在忙碌完公司的发布系统之后，逐渐接触到具体的业务。在这里主要介绍下关于css3草案的position：sticky属性的兼...
阅读全文
摘要：困境 在响应式布局中，我们应该小心对待iframe元素，iframe元素的width和height属性设置了其宽度和高度，但是当包含块的宽度或高度小于iframe的宽度或高度时，会出现iframe元素溢出的现象：这样溢出的iframe会破坏页面的布局。我们可以采用一种方法让iframe元素也具有响应...
阅读全文
摘要：flex的一些属性 CSS3中引入了另一种框--flexbox，flexbox有一些block和inline不同的性质，比如： 现在就大体讲述下这个具体属性的表示含义。 设置flexbox的兼容性 将一个容器设置为flexbox（又称伸缩容器）很简单，但是却存在一些兼容性的问题，比如在IE10下，早
阅读全文
摘要：简介 在清除浮动一文中提到BFC不会被浮动元素遮盖，并没有详细探究表现行为。规范中指出，在同一个BFC内，作为子元素的BFC的border-box不应该覆盖同为子元素的浮动元素的margin-box。其实，浏览器在内部通过隐式的给子BFC设置margin值来防止覆盖。例证 创建两个浮动元素和一个B...
阅读全文
摘要：Gradient Filter和AlphaImageLoader Filter 这两个属性是legend IE(IE6,7,8)中的渐变滤镜和透明滤镜，我们先详细介绍下这两个属性的用法，详情可查看MSDN。 透明滤镜的使用方式很简单，只需在样式中定义 "filter:progid:DXIm...
阅读全文
摘要：outline属性有什么作用 原文链接 a{outline:none} do not do it 当用户使用tab键进行链接切换时，该属性会在当前选中的链接（获得焦点）使用该属性，一般来说是虚线框的长方形。这对于没有使用鼠标输入的用户而言尤其有用，它可以作为视觉反馈来告知用户当前的输入。所以说如...
阅读全文
摘要：实现截断长文本显示处理，以前是通过后台的截取，但这种方法容易丢失数据，不利于SEO。而通过前端css的截断，则灵活多变，可统一运用与整个网站。这项技术主要运用了text-overflow属性，这个虽是css3的属性，但是在各大浏览器却兼容非常好，ie6系列全部兼容。 .e{ ...
阅读全文
摘要：PNG32的alpha透明效果在IE6下会出现bug，出现灰色背景。而目前的解决方案就是IE提供的滤镜。需要注意的是滤镜并不是对原图片进行修改，而是对相应的html元素进行修改。所以在一个html中的多处使用alpha滤镜，那么性能的损耗将会累加。现总结使用滤镜的缺点： 1，IE6下使用滤镜，那么...
阅读全文
摘要：元素被绝对定位，那么元素将会脱离正常流（normal flow），并依据包含块来定位。包含块的概念及其判定可以看这里。 在负margin的应用一文中，我们提到了一个对于任意一个块元素所形成的框的尺寸的计算公式： BoxWidth = MarginLeft + BorderLeftWidth + Pa
阅读全文
摘要：包含块简介在 CSS2.1 中，很多框的定位和尺寸的计算，都取决于一个矩形的边界，这个矩形，被称作是包含块( containing block )。 一般来说，(元素)生成的框会扮演它子孙元素包含块的角色；我们称之为：一个(元素的)框为它的子孙节点建造了包含块。包含块是一个相对的概念。 ...
阅读全文
摘要：一个元素如果被设置为display：inline-block，那么这个元素将表现为行内块的性质。被设为行内块的元素对内（子元素）表现为块级框，具体为可以设置高度宽度，可以设置垂直margin和padding等；对兄弟元素则表现为行内框，具体表现为相邻行内块可在同一行显示，而且有着行内元素的特点，就是...
阅读全文
摘要：利用table-cell可以实现宽度自适应布局。table-cell有一些比较好用的属性，比如垂直居中，自适应高度宽度等，为元素设置table-cell布局之后，元素的margin失效，padding有效，而且一旦元素设置了float或者absolute，则table-cell也会失效。table-...
阅读全文
摘要：在IE6下PNG透明图片做背景，无法使用background-position进行定位。但是可以使用margin和绝对定位来进行。另外，由于IE6下的 ：hover 只对支持，对其他元素都不起作用，所以需要对IE6单独打补丁。可以使用微软提供的csshover.htc文件进行修复。 ...
阅读全文
摘要：页面布局上隐藏，但是对屏幕阅读器可见的几种方式: 1, .h{position:relative; left:-900em;top:-900em;} 2, .h{position:absolute; clip:rect(1px 1px 1px 1px)} //采用clip必须对该元素进行绝对定位...
阅读全文
摘要：边框有一些特殊的属性，可以采用边框来实现对话框的效果，而且兼容性杠杠的，不过在ie6下面可能会遇到兼容性问题，在后面分析它。首先，我们看看边框的组成结构： 效果图： 可以看到边框的效果，4个等腰梯形。我们设置的各个方向边框高度就是每个等腰梯形的高。可以想象得到，如果div的高度和宽度都为...
阅读全文
摘要：---恢复内容开始---浮动元素处在正常文档流上的浮动流上，浮动元素的渲染方式很特殊，首先按照正常文档流进行布局，然后将该元素从文档流中取出并对该元素尽量向左或者向右移动，周围的内容将会环绕该元素。所以，浮动会对兄弟元素的布局造成影响，而且其效率较低，代价较高。绝对定位则是完全脱离文档流，直接相对于...
阅读全文
摘要：常用的清除浮动的几种方法总结下： 1，手动设置一个标签（在浮动元素下方），然后对其设置clear属性 2，给浮动元素设置 :after伪类，创建块元素，设置clear属性 3，给父元素设置浮动 4，给父元素设置overflow设置非visible值（auto，hidden） 5，给父元...
阅读全文
摘要：众所周知IE6不支持position:fixed，这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天我做自己的博客模板的时候，遇到了这个问题。当时就简单的无视了IE6——尽管有几个使用IE6的朋友，一起BS我……但是对于大项目或商业网站，如果有用到这个属性的时候，是不...
阅读全文
摘要：元素的盒模型有几个较为重要的属性，本篇文章主要将脚垫聚集在与height相关的属性上。对于一个并未显式设置高度块框来说，其height的高度不仅仅取决去内容的高度，而且还与该块框的宽度有关。宽度越窄，相应的需要容纳相同内容所需要的空间越大，高度越高。而对于一个非替换行内元素而言（所谓非替换元素，就是...
阅读全文
