css
文章平均质量分 74
Ailsa-show
努力不一定会成功,但不努力一定不会成功
展开
-
相邻元素的 margin-top重叠问题
margin重叠现象就是相邻的两个普通元素,上下边距不是普通的相加而是取其中较大的边距值(注意是普通元素)同时,父子元素也会发生margin重叠现象,具体情况如下1、两个div,父元素和子元素2、分别定义其margin-top属性值,父元素为100px子元素为20px3、结果如下,取了较大的父元素的margin-top值100px解决方案:因为 火狐下marg原创 2016-09-20 13:49:12 · 929 阅读 · 0 评论 -
巧用浏览器CSS属性值的不兼容向下兼容hack技巧
一、巧用浏览器CSS属性值实现向下兼容CSS3中有很多好的特性,例如box-shadow盒阴影,但是,唯一的问题是IE8浏览器不支持,如果是对外的PC站点,则IE8浏览器不可不顾,尤其一些受众广泛的网站。怎么办呢?我的做法往往是这样,IE9+浏览器使用box-shadow阴影,而IE7,IE8浏览器使用border线框。例如下面截图效果: 也就是针对不同浏览器采原创 2016-10-31 14:22:44 · 1044 阅读 · 0 评论 -
为什么要初始化CSS?
为什么要初始化CSS?CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化CSS样式的属性,为我们将用到的CSS或html标签更加方便准确,使得我们开发网页内容时更加方便简洁,同时减少CSS代码量,节约网页下载时间。CSS初始化示例代码/原创 2016-10-14 12:18:51 · 1937 阅读 · 0 评论 -
CSS中height:100%和height:inherit的异同
一、胡聊海聊凑篇幅上周在微博上无节操吐槽了下inherit的段子,没想到回声还不少:不过inherit确实是个好东西,不仅节约代码,尤其与background之流打交道;而且还利于维护。注意,如果想要继承background的图片,不能这样缩写,会显得很天真:background: #fff inherit left top;可以这样子:ba原创 2016-09-26 12:13:06 · 418 阅读 · 0 评论 -
大小不固定的图片和多行文字的垂直水平居中
一、大小不固定,多行文字的垂直居中① 单行文字可能很多人都知道如何让单行文字垂直居中显示,就是使用line-height,将line-height值与外部标签盒子的高度值设置成一致就可以了。例如:单行文字居中显示测试,css样式为:height:3em; line-height:3em;……② 多行文字但是对于外框高度固定,文字大小个数不固定的多行文字呢?文字可原创 2016-09-24 18:31:34 · 298 阅读 · 0 评论 -
CSS世界中的margin-box
一、前言聊聊技术吧,这个纯粹。本文内容偏理论,非实用技术,对于深入理解CSS的一些概念和设计很有帮助。本文有些概念如果你不知道说的是什么意思,比方说“盒尺寸”,你大可忽略之,并不影响对本文核心观点的理解。这些概念是需要很多积累,而且属于一个完整体系里面的,所谓体系,就是从前往后是连贯下来的,而盒尺寸这个概念处于体系的中间,直接讲盒尺寸就像看电影直接从中间部分看起,肯定会有些困惑,但原创 2016-09-24 18:22:38 · 800 阅读 · 0 评论 -
图片里面加文字, 且文字垂直居中解决方案
文字设置为div等高的line-height然后垂直居中图片文字居中.test {text-align: center;color: #0066CC; margin:5px auto; width:700px; height:120px; line-height:120px; border:1px solid #000000;background: url(原创 2016-09-24 18:08:00 · 510 阅读 · 0 评论 -
稳定、地道HTML书写原则
一、一般原则所有的代码应看似出自一人之手,即使奶妈有多人。严格执行约定的风格。若风格不定,使用现有、常用风格。二、空白你的整个源代码应该只存在一种风格。空白使用前后一致,使用空白提高可读性。到死也不要混用空格符(spaces)和制表符(tabs)实现缩进。柔和缩进(spaces)或真实制表二选一,关键要一站到底。(个人偏好:空格-spaces)如果使用空格,选定一个原创 2016-09-23 21:55:42 · 243 阅读 · 0 评论 -
css行高line-height的一些深入理解及应用
一、前言前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章。这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多数与上面提到的“深入理解css 行高”是不重复的,可以说是补充或是另外一个角度的思考。另外,将结合实际,展示line-height的一些特性和一些常见应用,帮助您对css行高line-height的理解。所讲述的并不原创 2016-09-22 15:14:39 · 2863 阅读 · 0 评论 -
翻译:谷歌HTML、CSS和JavaScript风格规范
注:本文翻译的内容并不是谷歌官方提供的完整HTML/CSS风格规范,而是一种带有总结性质的简单称述。完整的中文翻译,国内已经有(只有HTML/CSS, 无JS),您可以点击这里访问。//zxx: 以下为翻译正文,原作者的吐槽保留,同时免费赠送我自己的吐槽我喜欢浏览风格规范。他们通常有明显的规则,虽然有些有荒诞之感,但是却可以发现之前未注意到的宝石。不幸的是,鲜有公司有这个勇气来发布原创 2016-09-23 21:49:53 · 266 阅读 · 0 评论 -
CSS box-flex属性,然后弹性盒子模型简介
CSS box-flex属性,然后弹性盒子模型简介一、淡淡的开头语昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马,于是习惯性谷歌之,真是不谷不知道,一谷吓一跳。倒不是该属性本身,而是此属性作为导火索,让我了解了下CSS3中新的盒子模型——弹性盒转载 2017-05-26 11:23:34 · 615 阅读 · 0 评论