css
文章平均质量分 73
时间被海绵吃了
on the way
展开
-
CSS hack
!import!import的用处有两个,在非ie6下,!import可以设置css样式的优先级,比如如下css样式#box{ background-color: #ff9000 !important; background-color: #ff0000;}虽然按照css的规则,后面的样式会覆盖前面的样式,但是因为有了!import,在浏览器中显示的效果为橙色。(优先级高)原创 2015-06-29 18:28:39 · 846 阅读 · 0 评论 -
W3C盒模型和IE盒模型的区别
盒模型在初学css的时候就会接触到,其实很容易理解,这里也不多废话,但是实际上在布局的时候还是会出现很多问题。对于盒模型的认识不能只停留在知道一个盒模型由哪些部分构成,也要更多的了解如何在不同情况下利用盒模型的特点进行布局。 这里讨论一下两种不同的盒模型: W3C盒模型和IE盒模型。 其实IE的盒模型问题只会出现在IE5.5及其更早的版本中,因为在IE6及更新的版本在标准兼容模式下使用的是W3C原创 2015-06-29 10:42:45 · 20434 阅读 · 4 评论 -
css 实现一个带尖角的正方形
前些天在牛课网上看到了一个百度的面试题,题目如下:请用CSS实现如下图的样式,相关尺寸如图示,其中dom结构为:刚看到这个题目觉得无从下手,感觉一般这种不都是一个背景图片吗,怎么还能用css写的?? 后来看到网友的答案,试着运行了一下发现真的和图上的一模一样,最伤心的是看到答案竟然还看不懂。。觉得自己还是好水,仔细琢磨了一下,现将心得整理一下:实现图示的效果涉及原创 2015-02-09 22:08:54 · 12934 阅读 · 2 评论 -
CSS 圣杯布局和双飞翼布局
今天在网上看到圣杯布局和双飞翼这两种布局说法, 去查了一下,把心得整理一下。这两个布局是应用在三栏布局上的(当然也可以改成多栏),三栏布局实现有很多方法,但是一般而言我们是这样写的: left main right这样写出来的三栏布局在dom结构加载时就会先加载左边再中间最后右边,然而我们的主要内容一般都在main里面,那为了让main原创 2015-05-18 22:41:40 · 951 阅读 · 0 评论 -
CSS3实现整屏切换效果
总是能看见很多广告或者网站都是使用整屏滚动的效果,一直看着都心痒痒,想自己也实现一个。最近刚学习到css3的动画效果,所以尝试使用css3做了一个整屏切换。页面结构实现思路与大众方法类似,如图 每个section就是一页内容,它的大小充满了屏幕(红色区域),一个container由多个section构成,我们通过改变container的位置,来达到页面切换的效果。container向下走,页面原创 2015-07-02 12:20:27 · 6658 阅读 · 1 评论 -
CSS 层叠 学习笔记
看了一天控制器和视图头都大了,于是去微博上逛了逛,看到了一个讨论CSS权重的博客,于是把书翻了翻,对CSS中的层叠做一个笔记。先从一个实例说起:小明写了一个列表,并给里面的列表项添加了一些样式:#list li{ color: #000;}<ul id="list"> <li>Javascript</li> <li>HTML</li> <li>CSS</li></原创 2015-07-26 00:11:20 · 1254 阅读 · 0 评论 -
CSS 中 px,em和rem 的区别 学习笔记
简单讲,px是绝对单位,em和rem是相对单位。px大家都熟悉,这里主要讨论em和rem。现在有以下一个段落:<p>当斧头来到树林的时候,好多树都说,至少<span>它的手柄</span>是自己人</p>当不给它设置字体大小时,使用默认大小,也就是16px大小,效果如下:emem是指相对于父元素的大小,也就是说对于p和span而言,它的大小都是1em,这里的1em = 16px。我们将span的大小原创 2015-07-26 11:22:26 · 1479 阅读 · 1 评论 -
CSS BFC学习笔记
BFC,全称是Block Formatting Context,块级格式化上下文。 具体是什么,可以理解为页面元素的一种特性,触发了BFC的元素往往会产生一些对初学者而言意想不到的效果。 触发BFC的方法有下面几种,满足其中任意一种就能触发BFC:浮动元素(float除了none以外任意值)绝对定位元素(position为absolute或fixed)display为inline-bloc原创 2015-07-22 00:47:27 · 1317 阅读 · 0 评论