前端CSS,css3,H5,ES6
fangqun663775
这个作者很懒,什么都没留下…
展开
-
《css知多少》系列完结
《css知多少》系列就此完结了。常来光顾的朋友可能会觉得突然:css的知识点还有很多,怎么突然就完了,还没讲完呢?这样说是对的。不过凡事都有一个定位,如果盲目求多,定位模糊,那样就没有目的没有方向了。 我的身份不是前端开发人员,而是产品经理。我规划的产品是一款项目管理软件,我也是一个PMP。我深知一个项目一定要有目标、范围、进度和质量要求。一旦达到,项目即可结束,准备下一个项目的启动。我转载 2015-03-13 09:29:44 · 522 阅读 · 0 评论 -
将一个div中的两个P元素同一行居中显示
.header{ width:100%; float:left; height:60px;}.p1{ float:left; ====或者 替换为 display:inline; 两者的作用都是将块级元素转为行内元素,破坏原本的格式 background-image:url(../../images/png.png);原创 2017-03-03 09:56:37 · 17246 阅读 · 0 评论 -
display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始; 高度,行高以及顶和底边距都可控制; 宽度缺省是它的容器的100%,除非设定一个宽度 , , , , 和 是块元素的例子。 display:inline就是将元素显示为行内元素. inline元素的特点是: 和其他元素都在一行上; 高,行高及顶和底边距不可改转载 2016-01-04 16:01:55 · 272 阅读 · 0 评论 -
CSS(8)-float上篇
1. 引言 对于我们所有的web前端开发人员,float是或者曾经一度是你最熟悉的陌生人——你离不开它,却整天承受着它所带给你的各种痛苦,你以为它很简单就那么一点知识,但却驾驭不了它各种奇怪的现象。 这就是我们又爱又恨的——float。所以,系统的学一学float是非常非常重要的。除了看书和看博客文章之外,我推荐大家去看一个奇葩(声音很有磁性,你懂得)录制的教程《CSS深入理解转载 2015-06-16 15:23:33 · 366 阅读 · 0 评论 -
CSS(7)-盒子模型
1. 引言 从这一节开始,我们就进入本系列的第三部分——css呈现。本部分将描述css在页面的几种布局和呈现的特性。包括两类:文字、块。 第一类——文字。这部分相对比较简单一些,例如设置字号、字体、颜色、背景色、是否加粗等。重点的地方在于设置字体、设置行高、文字相关的距离都用相对值,这些东西在《css知多少(4)——解读浏览器默认样式》那一节已经说过了。另外还有一个重点,就是w转载 2015-06-16 15:21:42 · 440 阅读 · 0 评论 -
CSS(9)-float下篇
float内容比较多,咱们分上、下两篇来介绍,上篇已经写完,这是下篇。建议大家先把上篇看了,再来看下文,精彩内容不要掠过啊。1. 清除float 《上篇》中我们提到,float具有“破坏性”,它会导致父元素“坍塌”,这将不是所要看到的。如何去避免float带来的这种影响呢(也就是我们常说的“清除浮动”) ?方法有很多种,我在这里介绍4中供大家参考,大家可根据实际情况来选择。转载 2015-06-16 15:34:44 · 483 阅读 · 0 评论 -
CSS(5)-选择器
1. 引言 从本节开始,就进入本系列的第二个部分——css和html的结合——说白了就是选择器。 CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得不通过选择器。让浏览器知道css选择了哪一个dom节点,浏览器就会乖乖的把相应的样式渲染成视图。 至于css能把页面渲染成什么样子,这是本系列的第三部分。 第一部分讲css样式的加载和层叠,第二转载 2015-06-16 15:18:25 · 393 阅读 · 0 评论 -
CSS(4)-解读浏览器默认样式
上一节《css知多少(3)——样式来源与层叠规则》介绍了样式的五种来源,咱们再通过一张图回顾一下。 对于上面的三层,咱们大概都比较熟悉了。下面的两层中,用户自定义样式一般也就是改一改字号大小和字体样式,也没甚好说的。而最有的说的就是浏览器的默认样式。 不同浏览器的默认样式多少有些区别,特别是老版本的浏览器之间,现在高级浏览器越来越向统一的标准靠拢,对前端程序猿来说是转载 2015-06-16 15:10:10 · 589 阅读 · 0 评论 -
CSS(6)-选择器的优先级
1. 引言 上一节《css知多少(5)——选择器》最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明。 上图中,css中的两个选择器都是针对的,而且两个设置的颜色不一样,这里的到底听从谁的命令? 上面还是比较简单的,下面在来一个复杂的: 上图中的该显示成什么颜色呢?2. 特指度 要解决以上问题,转载 2015-06-16 15:20:19 · 397 阅读 · 0 评论 -
CSS(2)-学习css的思路
1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式。 记得之前看过一个段子,也可能是一件真事儿,这不重要。大体内容如下:一个香港的教授说:我们香港的大学和大陆的大学差的很远啊,大陆的大学连看门保安都懂得哲学,因为当你想要进入校园时,保安都会问你一个很哲学的问题“你是谁,你从哪里来,你到哪里去?”。 看完段子的第一反映转载 2015-06-16 14:58:51 · 438 阅读 · 0 评论 -
CSS(1)-常见的一些问题解答
1. 引言 各位前端或者伪前端(比如作者本人)的同志们,css对你们来说不是很陌生。比如我,在几年之前上大学的时候,给外面做网站就用css,而且必须用css。这样算下来也得六年多了,有些功能可能轻车熟路,有些功能可能需要上网查查,看似能应付得了工作的事情——我之前也是(现在工作上不做开发了,只是业余还写代码)。 世界上没有绝对简单的东西,只是我们认为它是简单的。就像我们公司现在转载 2015-06-16 15:00:32 · 530 阅读 · 0 评论 -
CSS(3)-样式来源与层叠规则
1. “层叠”的概念 CSS——层叠样式表,其中的“层叠”是什么意思呢?层叠就是浏览器对多个样式来源进行叠加,最终确定结果的过程。举一个简单的例子: 上图中有两个样式来源,第一个是引用的css1.css,第二个是自己在style中编写的样式。“层叠”是个叠加的过程,可通过下图表示: 上面用一个简单的例转载 2015-06-16 15:06:46 · 509 阅读 · 0 评论 -
CSS选择符及优先级计算
行内样式(Inline Style),如...;ID选择符(ID selectors),如#myid;类、属性选择符、伪类(Classes, attributes and pseudo-classes),如 .class {...}、[href$=dudo.org]、:hover;类型(elements)、伪类型选择符(pseudo-elements),如 p {...}、:first转载 2015-03-13 10:21:11 · 470 阅读 · 0 评论 -
CSS的相对定位和绝对定位写得很不错
CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的,不会生效,比如你设置一个距离左边距偏移100px的声明:left:100px 那么这条声明不会起到任何效果。还有z-index属性在这时也不会生效。也就是说我们平转载 2017-06-08 09:50:34 · 2274 阅读 · 0 评论