• css摘抄


    以下内容转载于:http://www.cnblogs.com/wangfupeng1988/p/4325007.html

     

    1. 引言

      各位前端或者伪前端(比如作者本人)的同志们,css对你们来说不是很陌生。比如我,在几年之前上大学的时候,给外面做网站就用css,而且必须用css。这样算下来也得六年多了,有些功能可能轻车熟路,有些功能可能需要上网查查,看似能应付得了工作的事情——我之前也是(现在工作上不做开发了,只是业余还写代码)。

      世界上没有绝对简单的东西,只是我们认为它是简单的。就像我们公司现在的开发情况,开发的大环境刚刚转入B/S,开发领导以前都是用.net做C/S的,在我看来,他们就觉得js、css就是那么回事儿,没多高深。但是我还是抱着敬畏的态度,买了一本《CSS设计指南(第三版)》,不管自己会的,还是不会的,我都统统看一遍。书邮回来之后,我花了三个晚上看完了。我有个习惯,就是做一件事情一定要又一个结果,不能觉得自己脑子里明白了就算了,一定要写出来,甚至做出例子来才算完。于是乎,就写几篇博客呗。利己利人。

      下面我把在看书过程中遇到的自己认为比较重要的(掌握不牢固)或者之前不懂的,都先列出来,出几个题目,各位看官可以试着想想。如果您都会了,那您基础很牢固,没得说;如果你有些不会的,着急你就赶紧自己查查答案,不着急你就等着我后面的博客介绍。

      闲话说了很多,现在开始!

    2. 问题

      01. 有些浏览器不完全支持css3,现在可以用哪个工具去检测浏览器是否支持,以及支持哪些项?

      提示:Mo****zr

      02. 常用的html标签,它们的display属性一般默认为block和inline。有哪些常用标签的display不是block和inline,这些标签显示的时候和block/inline有何区别?

      提示:table,input, textarea

      03. 是否用过@import?

      (比较简单)

      04. 一个表格的第一行显示红色背景,最后一行显示蓝色背景,中间行使用灰色/白色间隔的背景,如何写?

      提示:结构化伪类(比较简单)

      05. 伪元素 ::before、::after 是否用过?都是在哪些地方用的?

      提示:清除浮动、为一个div增加一个“三角”  重要 

      06. css——层叠样式表,其中的“层叠”该如何理解?  重要 

      提示:层叠,即一层一层叠加起来,关键是知道一共有几层,每一层都是什么

      07. 对“特指度(specificity)”了解多少,知道“I-C-E”的计算规则吗?  重 

      提示:参考http://www.cnblogs.com/netlyf/archive/2009/06/19/1506427.html

      08. 特指度理解不是很麻烦,关键是分析多个css选择符和计算麻烦。有一个简单的解决方案,四句口诀,叫做“查理版简单层叠要点”,是否了解?  重 

      提示:例如,“包含ID的选择符要胜过包含类的选择符...”

      09. 搜索“浏览器默认样式”,找到它,打开看看,里面是浏览器默认的所有样式,你是否都能看得懂。 重 

      提示:例如 display:table 和 display:block 有何区别?

      10. 在你开发的系统的第一个css文件的第一行,就要写上 * {margin:0; padding:0} ,这是为何?

      提示:浏览器兼容性(比较简单)

      11. 样式 p{margin-top:50px; margin-bottom:30px;} 将会导致p之间的垂直距离是多少?

      提示:垂直外边距……水平外边距……——比较简单的基础知识

      12. “盒子模型”大家都了解了(不知道赶紧去恶补!!),盒子模型的width其实是指内容的宽度,不包括padding、border、margin。其实这样对我们做css布局是很不利的,有什么方法可以让width是全部的宽度?  重 

      提示:box-sizing(注意IE低版本的兼容性)

      13. float的一些影响会让我们经常哭笑不得(特别是初学者),其实了解了float的设计初衷,也许你就会理解这些东西。float的设计初衷是什么?

      提示:就简单的一句话……

      14. float具有“包裹性”——例如:<p>abc</p> 和 <p style='float:left'>abc</p> 两者的宽度是不一样的,不信可以为 p 加上背景色试试。是否理解这种“包裹性”?试着想想,还有哪些元素(或css属性)也有这种“包裹性”?  重 

      提示:和第13问题有密切关系

      15. float还有一个表象是“破坏性”,它会导致父元素高度塌陷,这个大家应该都知道吧?那么这是为何呢?另外,还有哪个css属性,也导致这种“破坏性”   重 

      提示:float和absolute都将导致元素脱离文档流

      (针对13、14、15问题,可以参考教程http://www.imooc.com/learn/121http://www.imooc.com/learn/192,讲的很好,只是讲师的声音很有“磁性”,要忍耐住)

      16. css清除浮动有三种方法,是否知道。你平时是怎么清除浮动的?业内最常用的经典清除浮动样式是什么? 重要 

      提示:搜索“clearfix”

      17. 相对定位relative如何理解,它和绝对定位absolute的最根本区别是什么?

      提示:一个在文档流内,一个在文档流外

      18. “定位上下文”是否知道? 重要 

      19. 经典的网页三列布局如何实现?如果不考虑IE6、7,最好的实现多列布局的方式是什么? 重要 

      提示:table-cell

      20. 是否用过inline-block,IE6、7如何兼容?

      提示:比较简单,百度即可

    3. 结束

      当前就总结了这么多问题,大家可以对照着问题想想答案。如果你觉得还有写比较重要的知识,可以给我留言,我将会考虑加入进来。

      另外,接下来我将写一个关于css重点知识的简短的系列文章,以及结合我做过的wangEditor富文本框以及对bootstrap框架的了解,把本文这些问题介绍一下。近期工作很忙,更新起来可能会很慢,敬请期待吧!

    ---------------------------------------------------------------

     

    1. 一个段子

      开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式。

           记得之前看过一个段子,也可能是一件真事儿,这不重要。大体内容如下:一个香港的教授说:我们香港的大学和大陆的大学差的很远啊,大陆的大学连看门保安都懂得哲学,因为当你想要进入校园时,保安都会问你一个很哲学的问题“你是谁,你从哪里来,你到哪里去?”。

           看完段子的第一反映肯定是很自嘲的笑了,笑了之后就忘了,该干嘛干嘛去了。

           但是我觉得这句话确实有那么一点高达上的意思,虽然我不知道什么是哲学。“你是谁,你从哪里来,你到哪里去”,如果映射到我们这次CSS教程上,可以提这么几个问题:

    1. CSS是什么,如何深入理解,它和html是个怎样的关系;
    2. CSS有几种来源(5种来源);
    3. CSS要干什么事情,如何结合html实现的;

      看过我其他教程的朋友都知道我的原则:我要写东西,必须又一个我觉得很特别而且很合理、高效的思路,如果没有我宁可不写。大部分写CSS的人一上来可能写选择器,但是我不会那样。

      闲话不说。要想从根上了解这些问题,还是先从浏览器开始吧。

    2. 浏览器是如何工作的

      之前看过一篇文章,叫做《浏览器的工作原理:新式网络浏览器幕后揭秘》。文章言简意赅的介绍了浏览器的工作过程,web前端程序猿最好了解一下。在此另外推荐一本书《WebKit技术内幕》,笔者很早就关注这本书,已列入近期的读书计划。

           文章中的内容暂且不详细提,我们先“断章取义”的只说CSS相关的部分。

     

           上图是webkit内核渲染html和css的流程图。大家可以从图中看到,html的解析是一条线,css的解析是一条线,两者会在某一点结合,形成最终的视图。

           如果我们以CSS为重点看,从上图中我们可以总结出学习CSS的三个突破点。

    1. 浏览器如何加载和解析CSS——CSS的5个来源;
    2. CSS和html如何结合起来——选择器;
    3. CSS能控制那些显示方式——盒子模式、浮动、定位、背景、字体等;

      看到这里,不知道有没有朋友觉得很兴奋?因为我们在学习CSS之前,首先是分析浏览器如何加载、处理、使用CSS的,我们按照这个思路去写CSS的教程。而不是一上来就照本宣科的从id选择器开始。

    我这段时间为何一直没有写博客,其实是在冥思苦想一个更加合理、高效的思路和框架。我如果写出来的东西和别人的一样,那我自己也觉得没意思。

           本系列文章也是按照这个思路和框架,一步一步展开的。

    3. CSS的加载过程

           CSS——Cascading Style Sheets——层叠样式表。“样式表”大家比较好理解,那何为“层叠”呢?从字面意思来看,层叠肯定是需要多层叠加起来。而这个“多层CSS”到底有几层,每一层是什么,我们程序猿用到的将是哪些层?这几个问题将是我们讨论的重点。

           另外,这么多层次叠加,如果出现冲突怎么处理,以哪个为准?这也是我们讨论的重点。

           最后,在这些层次中有一个“浏览器默认样式”层,即浏览器默认的各个html元素的样式。这次我们像浏览器这位“机器人”学习一下,看看它写出来的css能给我们什么帮助。

    4. CSS和HTML的结合

      CSS如何与html结合呢——当然是通过选择器。CSS提供了多种多样的选择器类型,而且每个级别都在不断的增加新的选择器类型,使得选择器更加灵活易用。本系列将拿出一篇文章专门讲解选择器。

      聪明的人类也通过css提供的选择器在其他临近的方面开疆拓土,例如jquery,zen-coding。

      对css选择器来说,有一个很重要的话题——级别。在大部分web前端面试题中,你都会看到css选择器级别的判断问题。《css设计指南》书中给出了一个概念——特指度,而且给出了计算公式和计算规则,还给出了一个简单的背诵口诀。想的真周到。

           最后,与选择器关联密切的还有伪类和伪元素,我们也将拿出一篇文章专门讲解伪类和伪元素,以及它们最典型的用法。

    5. 页面呈现

      页面呈现可以分为两类——文字,块。

    1. 针对文字来说,我们可以设置字体、字号、加粗、斜体、背景色等等;
    2. 对于块来说情况比较多,有盒子模型、浮动、定位、display、背景等;

      本系列会拿出很大的篇幅去讲解其中的基础知识,以及他们的一些重点应用。

    6. 布局

      布局是css的重头戏,每个系统的布局都有其各自的特点。无好无坏,肯定是各有优缺点,不妨拿出几个比较典型的例子来一起分析一下。例如:

    1.  经典三列布局
    2. Bootstrap栅格布局
    3. 百度首页布局
    4. 微博布局
    5. 人人网布局
    6. 瀑布流布局
    7.  ……

    上一节《css知多少(2)——学习css的思路》有几个人留言表示思路很好、继续期待,而且收到了9个赞,我还是比较欣慰的。没看过的朋友建议先去看看上一节。

      这一节就开始实践上一节的思路!

    1. “层叠”的概念

      CSS——层叠样式表,其中的“层叠”是什么意思呢?层叠就是浏览器对多个样式来源进行叠加,最终确定结果的过程。举一个简单的例子:

       

           上图中有两个样式来源,第一个是引用的css1.css,第二个是自己在style中编写的样式。“层叠”是个叠加的过程,可通过下图表示:

       

          

           上面用一个简单的例子来说明了层叠的过程,形象的体验一下。

           层叠是CSS的核心机制,理解了它才能以最经济的方式写出最容易改动的CSS,让文档外观在达到设计要求的同时,也给用户留下一些空间,让他们根据需要更改文档的显示效果,例如调整字号。——摘自《CSS设计指南》

    2.样式来源

           上文中提到,css之所以有“层叠”的概念,是因为有多个样式来源。其实css的样式来源有5个,开发人员只能接触到后面3个。

      

           第一,浏览器默认样式表

           当你不为html设置任何样式时,显示在浏览器上,b标签会显示粗体、p有纵向margin、h1字号比p大一倍……这是为什么呢?

           因为浏览器自带一个默认的样式,如果html中没有为标签设置样式,则浏览器会按照自己的样式来显示。但是浏览器默认样式的级别是最低的,一旦有其他地方设置了标签样式,浏览器默认样式就会被冲掉。

           注意,不同浏览器的默认样式有些地方是不一样的。例如,我们在写css时,都会首先设置 * {margin:0; padding:0;},这是为何?就是因为有浏览器兼容性问题。干脆,全部弄成0,这样各个浏览器就都统一了。

           此处先把默认样式的代码贴出来 ,我们下一节专门解说默认样式,有很多值得玩味的地方。

     浏览器默认样式

            第二,用户样式表

           在一些新闻网站中,经常看到可以设置字体大小的快捷菜单,例如下图就是搜狐新闻中的设置。

       

           这些是给一些有视觉障碍的人看的,反正我是没用过,我也有视觉障碍,不过我是通过近视镜来解决的。

           其实浏览器也有这样的设置,例如chrome浏览器中,我们就可以设置字号和字体。

          

           用户在这里设置了字体和字号之后,它们会覆盖掉浏览器默认的样式。

           第三,<link>引用的css文件

           引用css文件,大家应该都比较熟悉了。

           第四,<style>中编写的样式代码

           <style>中编写样式也都比较熟悉。

           第五,<a style=’ ’>中编写的样式代码

           标签style属性中编写样式,也都用过吧。

          

           后面这三种是咱们程序开发中比较常用的,这里就不多说了,不了解的朋友需要去补一补基础知识了。

    3.层叠的规则

      由于样式的来源不同,浏览器在加载样式时,需要计算出最终的样式值,这样才能显示出正确的界面效果——浏览器会通过叠加和覆盖这两种方式来生成最终的样式值。

           下面是举例说明:

       

           如上图,不同来源的两个样式,第一个样式设置了font-weight,第二个没有,浏览器会把它叠加在一起,即浏览器会把各个零散的整合成一个整体。第一个样式color:red,第二个样式color:blue,浏览器会让后者覆盖前者,最终结果还是color:blue。

           覆盖的默认规则是后者覆盖前者,但是又一个特殊情况——!important。

       

           如上图。虽然color:blue是后来者,但是它没有居上,因为前者color:red跟着!important。这就像得到一个尚方宝剑,有最高执行权,其他人统统让路,否则佛挡杀佛。

    4.总结

      本文主要讲解了css的5个来源,以及浏览器叠加样式的过程和方法,这是学习css最基础的知识。下一节将带领大家一起看看浏览器默认样式到底是什么样子的,我们又能从其中学到些什么东西?其中有很多好玩的东东,敬请期待!

    ---------------------------------------------------------------

    本系列的目录页面:http://www.cnblogs.com/wangfupeng1988/p/4325007.html

    -------------------------------------------------------------------------------------------------------------

     上一节《css知多少(3)——样式来源与层叠规则》介绍了样式的五种来源,咱们再通过一张图回顾一下。

      

      对于上面的三层,咱们大概都比较熟悉了。下面的两层中,用户自定义样式一般也就是改一改字号大小和字体样式,也没甚好说的。而最有的说的就是浏览器的默认样式。

      不同浏览器的默认样式多少有些区别,特别是老版本的浏览器之间,现在高级浏览器越来越向统一的标准靠拢,对前端程序猿来说是一件好事情。虽然有些许差异,但是绝大部分还是相同的,我先把代码粘贴出来 ,具体的解读咱们慢慢道来(只说重点,比较容易的或者不常用的就不说了)。

     浏览器默认样式

    1.理念上的转变

      在解读代码之前,我先把我看浏览器默认样式最大的体会给大家说一下,这个是非常重要的。就是要先从理念上重新认识html和css。

      以前我都是认为浏览器自身本来就认识各种html标签,并且会根据规则设置标签的样子,例如p是block显示,ul有margin-left,h1粗体显示……以前以为这些标签默认的显示方式和css无关,是浏览器自己干的,css设置网页样式是加载之后又渲染的。

      现在知道这种想法是错误的。其实浏览器加载了html之后只为一件东西——dom树,浏览器把html变为dom树结构,就完成了对html的结构化。至于后来对视图的渲染,p是block、br换行,那是整合了css之后的事情。而浏览器整合css又是另一个路线,和解析html是分开的。这里的“css”就包含了浏览器默认样式。

      可以结合下图理解(第二节的图):

          

      一句话,浏览器将载入的html变为dom树,但是此时没有任何显示样式。所以显示的样式,都是css定义的,浏览器只会通过css来渲染视图样式。

      ——多好的设计:指责单一,开放封闭!

    2.block元素

      

      为何默认情况下p、h1、ul、div都是block显示,就是这里定义的。所以,不要再说div天生就是block——这句话应该换成:浏览器默认样式天生规定了div是block——所以才导致了div是block!是默认样式规定的,不是浏览器的内核规定的。

      没有设置block的元素,默认为inline显示。

    3. display: list-item

      

      我们在使用display时,常用的值一般是:inline/block/inline-block,用不到list-item。那这里的list-item到底有什么作用?我们不妨亲自试一试:

          

      看到没有,出现了ul-li中的效果了吧,如果再加一个margin-left是不是就跟ul-li一样了?

      所以,ul-li为什么会默认显示成那种样子?——list-item才是“罪魁祸首”。

    4. diplay:table

      

           先给出一个快速思考题:<table>和<div>在容器尺寸上最大区别是什么(只是容器尺寸,不考虑内容区别)?请在两秒钟内说出答案。

           答案是——div宽度和父容器相同,table宽度根据内容而定——即table具有“包裹性”。

           举一个例子:

       

           上图中,第一个div默认是block,宽度撑满整个页面。第二个div设置了display:table,宽度根据内容而定。这就是“包裹性”。而提到“包裹性”,又不得不让我想到float和absolute。具体怎样这里无法细说,后面的文章会详细讲到,有兴趣的可以先查着。

           各位思考一下,你们做的项目中,哪些地方想要这种“包裹性”,而不是写死宽度或者用js计算宽度?如果想不到,我给大家截个图提醒一下。如下图:

          

    5. display: table-cell

      

      上面的截图中,我们看到了眼花缭乱的好多display,而且都是和table相关的。从字面意思上我们能看出,这是浏览器为了渲染一个完整的表格,而需要的许多显示方式(PS:看似一个简单的表格,渲染规则就这么多,这就提醒我们思考问题的严谨性和逻辑性)。

      这里的大部分都是我们一直都不会用到的,用不到的了解即可,没必要深究。但是这个table-cell我们却能用得到,而且是用它来干一件很重要的事情——多列布局。

      多列布局在css中有多重要就不用我说了吧,传统模式下大家都使用float来解决这一问题,但是float写出来的东西代码复杂,宽度调整不灵活,浏览器兼容性有问题。所以才有了新方案——table-cell,注意,IE6、7不行!

      简单举个例子:

          

      记得我刚学html时候,不会用div + css做多列布局,我就用table做多列布局。而今,你可以用table-cell,像用table一样做多列布局,做出来的效果和table做出来的效果是一模一样的。

    6. body样式

      

      在body中,定义了两个样式,如上图。

      第一,在默认情况下,页面中的文字不会直接顶到浏览器的边框,这就是因为默认样式为body设置了margin的缘故。这里需要注意个问题,不同浏览器为body设置的margin值可能不一样,因此大家都知道在css中用 *{margin:0} 来解决这一兼容性问题。

      之前已经提到过,*选择器的级别要低于body标签选择器,但是*{margin:0}依然有效的原因,就是浏览器偷偷的做了优先级的手脚。如果在正常情况下,*选择器在遇到标签选择器时,是不会起作用的,及时它是“后加载”的。例如:

          

      第二,浏览器默认样式还为body设置了line-height,line-height这个值1.12是对英文比较友好,中文状态下就显得有点拥挤。Line-height是具有继承性的,在body中设置了,body下面所有的文字都会继承生效。

      另外注意,这里的line-height: 1.12是一个相对值,即是文字高度的1.12倍。看到这里,我们在写line-height的时候,也一定要注意使用相对值,不要使用绝对值。如下:

          

      上图是编写line-height的三种形式,大家觉得哪种形式最好?区别是什么?

    1. 情况1:永远按照文字的1.4倍计算,不管文字的高度如何,可适应任何变化;
    2. 情况2:永远按照1.4em计算,随着em的值改变,不管文字高度如何(此时文字高度可能已经通过绝对的px值该表了大小,而不是随em改变的);
    3. 情况3:就是25px,绝对的。

      相信看到这里大家会发现,通过一个line-height我能能窥探到的道道有很多。如果大家看懂了这三种情况,从软件设计和系统扩展的角度说,当然我们都会选择第一种。

    7. em和px

      大家在设置文字高度或者与文字有关的距离,如p的margin、line-heigt(上文刚讲完,不再赘述),会用em还是用px?——反正我之前不熟悉css时候,都是用px。因为px是固定大小,一目了然。——当然,它也不利于扩展。

      因此,我们推荐大家用em。而且浏览器的默认样式也建议我们这样书写:

      

      如上图,它设置了h1字体大小2em、纵向margin是0.67em,h2字体大小1.5em、纵向大小0.75em……p的纵向margin是1.12em,字体大小1em(上图中没有,但在整个文件中有)

      em是什么?——em是一个浏览器识别的长度单位,但是它不是绝对的、固定的,而是相对的。大家都知道px是一个绝对的长度单位制,它永远不会改变。浏览器默认情况下令1em === 16px。现在你知道为何p默认是16px了吧。而且你还知道了h1是p高度的两倍,h2是p高度的1.5倍……(你知道的越来越多了。。。)

      当然,我们可以通过css修改1em的值。

      

      由于font-size和margin都是通过em来定义的,当em被修改时,不管字体大小修改,margin值也会跟着修改。这就是em好用之处!

      从现在开始,与字体大小有关的css,全部都用em!

    8. 粗体和斜体

      

      上图中,标注了在整个html中,哪些元素设置了粗体/斜体。重点还是一个思维转换的问题:h1不是天生的粗体,而是设置了font-weight:bolder的样式而已……

      这里需要提一句题外话:<b>和<strong>有啥区别?<i>和<em>有啥区别?——不知道的话自己去查查吧,看到许多面试题考这个。

    9. inline-block

      

      我相信最初学习使用inline-block的朋友都有一个困惑:inline-block到底是个啥?这时候如果你非常勤奋好学的话,你就去网上查资料,然后做各种实验。——精神可嘉,行为不可取。

      学习还是有捷径的。看看浏览器默认样式告诉你的捷径:button、input就是inline-block!这样以点播你就会一下子明白,最起码能给你一个很好的形象的概念。看看button和input的表现,你就知道inline-block是什么样子了:

      能被父容器居中、能设置高度宽度和margin、不会像table或div那样占一正行……——这就是inline-block——记得这是浏览器默认样式告诉你的。

    10. <br>样式的疑问??

      

      这里我提出自己的一个疑问。如上图,浏览器默认样式中,对br是这样设置的。

    1. 这里的br:before{content:”A”},” A”并没有显示出来啊?
    2. <br>的换行到底是谁导致的,是css还是浏览器?

      希望知道答案的朋友,不吝赐教,给我和大家分享一下,谢谢了。

    11. 总结

      大家看着是不是很过瘾?反正我写着是挺过瘾的,虽然打字、写代码、画图很累,不过很有成就感——再有你们的鼓励就更好啦!

      

      首先,我觉得浏览器默认样式非常重要,所有详细解读其中的重点,希望能给大家带来一些启发。没有解读到的就是一些比较容易理解的,或者不常用的(例如打印的样式设置),可以直接去看看源码。

      其次,这里面也包含了我的一个疑问,很惭愧没有看明白。即便是一时半会儿解决不了,给别人分享一下,让你知道了一个疑问,对你来说,应该也是一个收获。

    ---------------------------------------------------------------

    1. 引言

      从本节开始,就进入本系列的第二个部分——css和html的结合——说白了就是选择器。

      CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得不通过选择器。让浏览器知道css选择了哪一个dom节点,浏览器就会乖乖的把相应的样式渲染成视图。

      至于css能把页面渲染成什么样子,这是本系列的第三部分。

      第一部分讲css样式的加载和层叠,第二部分讲选择器以及选择器的等级,第三部分讲呈现的各种样式(背景、字体、定位、浮动等)。这样一个思路,也正式浏览器使用css的流程,是最有效的学习思路。(第二节中讲过,此处再回顾一遍)

    2. 选择器

    说道css选择器,大家都知道有许多种,但是真要你去掰着手指头数一数的话,你可能需要数几分钟。其实这么多选择器,完全可以分为两类:

    1. 标签选择器(*是特殊情况),可但标签,也可上下文多标签;
    2. 属性选择器(id和class都是属性,特殊的属性);

    2.1.    标签选择器

    2.1.1 通用选择 *

      通用选择器 * 大家应该都比较熟悉了,最常用的就是 *{margin:0; box-sizing:border-box;}。mragin:0咱们在上一节已经说过,box-sizing:border-box将在后面的盒子模型那块再详细描述。

      例如,我们在检测bootstrap3的样式时,也可以看到它用到了 * 选择器:

      

    2.1.2 单标签

      单标签选择器是最基础的css知识了,在上一节的浏览器默认样式中,到处都用了单标签选择。这里不再赘述,css基础薄弱的朋友,可以先去补补课。

    2.1.3 多标签

      多标签选择器一般和html上下文有关,它有以下集中分类

    1. 选择一个祖先的所有子孙节点,例如 div p{…}
    2. 选择一个父元素的所有直属节点,例如 div > p{…}
    3. 选择某一个元素紧挨着的兄弟节点,例如 li + li{…}
    4. 选择某一个元素的所有同胞节点,例如 span ~ a{…}
    5. 以上各种情况的组合应用(不要组合过于复杂,编码讲求可读性第一)

      给大家列举一个比较典型的应用,如下图

      

      上图中的效果应该比较常见,在各个菜单之间加下划线。我之前的实现是:每个li都加一个border-bottom,在把最后一个li的border-bottom去掉。

      其实完全没必要这样麻烦,下面一个样式设置即可解决:

      

      有点意思吧?

    2.2.    属性选择器

    2.2.1 特殊1:id选择器

      基础知识,不再赘述。

      按照许多css教程上讲的,id选择器和属性选择器是不同的两个类别,为什么要把id选择器放在属性选择器下面的呢?因为css选择器是根据html节点的特性来设置的,id也是一个属性,只是它是一个比较特殊的属性,每个html节点的id不能重复。

      由于特殊,而且比较常用,所以就单独给id选择器一个“#”,本质上就是一个属性选择器。下面两行代码的执行效果完全相同:

      

    2.2.2 特殊2:class选择器

      基础知识,不再赘述。

      class也是一个特殊的属性,之所以把它放在属性选择器下,和上文将的id一样。

    2.2.3 属性选择器

      属性选择器有两种情况:

    1. 只通过属性名选择:img[title]{…      }
    2. 通过属性名和属性值选择:input[type=’text’]{…}

      这两个也是比较基础的,再次也就不再详细展开了,不了解的朋友可以去看看基础教程补补课。

    3. 伪类和伪元素

      上文提到了若干种选择器类型,伪类和伪元素可针对任何一种选择器使用。

    3.1.    伪类

      伪类分为UI伪类和结构化伪类。

    3.1.1 UI伪类

      UI伪类都比较简单常用,我下面简单写几句代码,就不再详细说了。

      

    3.1.2 结构化伪类(IE低版本不行)

      先问大家一个问题:如何实现一个表格间隔显示背景颜色,如图:

      

      最简单的方式莫过于使用结构化伪类,一句样式设置即可实现。

      

      结构化伪类有如下书写选项,至于什么意思,从字面意思即可理解:

      

    3.2.    伪元素

      记住,伪元素是一个非常重要的概念!其中,:before和:after 非常常用。

      首先,咱们先看看:before和:after是怎么回事儿。

      

      上图中,我们可以看到,可以为元素前后添加内容。这里的“内容”还可以写成unicode编码的方式,如下图:

          

      另外,除了可以添加内容外,你还可以自定义执行内容的样式,如下图:

      

      

      以上大体了解了两者的基本用法,下面给家介绍两个典型的应用场景:

      第一,大家都知道fontAwesome吧,web最流行的icon字体库。这些小图标的应用就是通过伪元素来实现的,如下图:

      

      (不知道fontAwesome也没关系,我们在讲到css字体时,会详细介绍)

      第二,清除浮动的样式大家都知道吧?这就是一个很典型的伪元素应用场景:

      

      (在讲到css浮动时,会专门讲解clearfix)

    4. 选择器的扩展

      选择器本来是css的一种规则,用于为css选择html节点的。但是聪明的人类还是通过选择器创造出了其他领域非常伟大的作品。

    • jQuery

           jQuery被推广流行的根本原因就是它的“Query”——基于css选择器的“Query”。现在的浏览器都支持querySelectAll()方法了,其实这就是W3C“抄袭”的jQuery的设计。

           相信各位web前端人员对jquery都比较熟悉了,这里点一下即可。

    • zen-Coding

      jquery可以通过一段css选择器表达式从既有的html结构中选择符合表达式的dom组,但是zen-coding反其道而行之——可以根据css选择器表达式创造出html节点。不得不佩服这帮人的创造力。

      

      如果你还没用过zen-coding,无论你以后用不用,建议你也一定要去体验一下!

    5. 总结

      本节总结了css的选择器知识,知道了选择器有若干种类型。但是类型多了不一定是个好事儿,下一节就给大家说说类型太多带来的一个问题,以及解决方案。

    ---------------------------------------------------------------

    1. 引言

      上一节《css知多少(5)——选择器》最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明。

      

      上图中,css中的两个选择器都是针对<span>的,而且两个设置的颜色不一样,这里的<span>到底听从谁的命令?

      上面还是比较简单的,下面在来一个复杂的:

      

      上图中的<li>该显示成什么颜色呢?

    2. 特指度

      要解决以上问题,我们需要引入一个概念——特指度(specificity)。特指度表示一个css选择器表达式的重要程度,可以通过一个公式来计算出一个数值,数越大,越重要。

      这个计算叫做“I-C-E”计算公式,

    1. I——Id;
    2. C——Class;
    3. E——Element;

      即,针对一个css选择器表达式,遇到一个id就往特指度数值中加100,遇到一个class就往特指度数值中加10,遇到一个element就往特指度数值中加1。

      下面举几个css表达式的特指度计算结果,大家也自己算一算,是不是对:

    CSS选择器表达式

    特指度计算结果

    p

    1

    p.large

    11

    P#large

    101

    div p#large

    102

    div p#large ul.list

    113

    div p#large ul.list li

    114

      还有一个重点要注意:!important优先级最高,高于上面一切。* 选择器最低,低于一切。

      好了,你现在可以返回文章一开始提出的两个问题,根据特指度计算公式计算,哪个的计算结果大,浏览器就会以哪个为优先。

    3. 简版规则

      如果你嫌上面的计算过于复杂,有一个简版规则。它只有三个规则,这三个规则能覆盖大多数情况,而且比较好记。

      规则一,包含ID的选择器胜过包含Class的选择器,包含Class的选择器胜过包含元素的选择器;例如下图,第一个特指度更高:

      

      规则二,不同选择器的特指度比较时,不区分加载的顺序(相同选择器在层叠时,后加载的覆盖前加载的),例如下图,虽然后加载,但是特指度低:

      

      规则三,设置的样式高于继承的样式,不用考虑特指度。例如:

          

          

      其实,大部分情况下,你通过这个简版的规则,即可判断选择器的优先级。

    4. 亲身经历

      wangEditor是我自己做的一个富文本编辑器,当我最开始在博客园上配置demo页面的时候,就遇到了css选择器优先级的问题,现在已经解决。Demo地址:http://www.cnblogs.com/wangfupeng1988/p/4198428.html

      对于下来菜单,例如选择字体、字号等,我当时在wangEditor的css中是用Class来设置的,谁知道博客园页面中有一个既有的样式,优先级高于我的:

      

      导致了我配置的demo中,ul的margin-left还是45px,而我写的css明明已经设置成了0px。原因就是博客园这个css选择器优先级要高于我写的优先级。

      当然,后来我改成了id选择器,就改过了这个问题。

    5. 总结

      本节的内容是一个重点,我在许多的面试题中看到过考css优先级的问题。css优先级并不麻烦,只要你掌握了合适的方法来学习,一晚上就入门个差不多,祝君好运。

    ---------------------------------------------------------------

    1. 引言

      从这一节开始,我们就进入本系列的第三部分——css呈现。本部分将描述css在页面的几种布局和呈现的特性。包括两类:文字、块。

      第一类——文字。这部分相对比较简单一些,例如设置字号、字体、颜色、背景色、是否加粗等。重点的地方在于设置字体、设置行高、文字相关的距离都用相对值,这些东西在《css知多少(4)——解读浏览器默认样式》那一节已经说过了。另外还有一个重点,就是web端最流行的字体库fontAwesome,关于它我之前有一篇文章专门讲过,请参见《请用fontAwesome代替网页icon小图标》,这里就不再重复去讲了。

           第二类——块。这部分的知识点非常多,重要的有:盒子模型,float,position,display。本文章讲盒子模型,后面的文章会依次介绍其他的内容。

    2. 什么是“盒子”

      说道“盒子”我还记得好几年之前,我还在上大学的时候,被人问道过“盒子模型”,我当时都不知道什么意思。回到宿舍急忙上网去查,原来就是我早就知道的margin,padding和border,但是我竟然不知道“盒子”这个词。——所以,不要只满足于网上查来的代码段、小技巧,要全面的了解一些知识体系。当然,后来我又知道,盒子模型不仅仅是margin,padding和border,还有其他的知识。

      在此插一句题外话,也是我这几天思考的一点东西。我在思考:web前端的这么知识应该是怎样的一个知识体系架构?之前我以为可以以W3C为纲要,把W3C的东西学会了就够了。后来发现我错了,W3C还不全面。

      真正全面的覆盖了web前端知识体系的东西是——浏览器内核——这并不是说让你去详细了解浏览器内核、做出一个浏览器。浏览器是web前端代码运行的一个平台,浏览器内核里有哪些模块,我们就需要去学习哪些东西。详细的先不说,以后有机会再分享。

      这里照顾一下初学者。初学css的朋友,一开始学css基础知识的时候一定学过padding,border和margin,即内边距、边框、外边距。他们三者就构成了一个“盒子”。就像我们收到的快递,本来买了一个小小的iphone,收到的确实那么大一个盒子。因为iphone白色的包装盒和iphone机器之间有间隔层(内边距),iphone白色盒子有厚度,虽然很薄(边框),盒子和快递箱子之间还有一层泡沫板(外边距)。这就是一个典型的盒子。

      

      如上图,真正的内容就是这些文字,文字外围有10px的内边距,5px的border,10px的外边距。看到盒子了吧?

    3. 盒子的宽度

    3.1.    设置了固定宽度的情况下

      遇到这种问题,我建议在查询各种资料之前,不如先自己动手做一个实验:

      

      如上图,得到网页效果之后,我们可以用截图工具来量一下文字内容的宽度。发现,文字内容的宽度刚好是300px,就是我们设置的宽度。

      因此,在盒子模型中,我们设置的宽度都是内容宽度,不是整个盒子的宽度。而整个盒子的宽度是:(内容宽度 + border宽度 + padding宽度 + margin宽度)之和。这样我们改四个中的其中一个,都会导致盒子宽度的改变。这对我们来说不友好。

      没关系,这个东西不友好早就有人发现了,而且已经解决,下文再说。

    3.2.    充满父容器的情况下

      默认情况下,div的display:block,宽度会充满整个父容器。如下图:

      

      但是别忘记,这个div是个盒子模型,它的整个宽度包括(内容宽度 + border宽度 + padding宽度 + margin宽度),整个的宽度充满父容器。

      问题就在这里。如果父容器宽度不变,我们手动增大margin、border或padding其中一项的宽度值,都会导致内容宽度的减少。极端情况下,如果内容的宽度压缩到不能再压缩了(例如一个字的宽度),那么浏览器会强迫增加父容器的宽度。这可不是我们想要看到的。

    3.3.    包裹内容的情况下

      这种情况下比较简单,内容的宽度按照内容计算,盒子的宽度将在内容宽度的基础上再增加(padding宽度 + border宽度 + margin宽度)之和。

      

    4. 再看盒子的宽度

      前面提到,为盒子模型设置宽度,结果只是设置了内容的宽度,这个不合理。如何解决这一问题?答案就是:box-sizing:border-box

      

      如上图,div设置了box-sizing:border-box之后,300px的宽度是内容 + border + 边框的宽度(不包括margin),这样就比较符合我们的实际要求了。

      建议大家在为系统写css时候,第一个样式是:

          

      大名鼎鼎的bootstrap也把box-sizing:border-box加入到它的 * 选择器中,我们为什么不这样做呢?

    5. 纵向margin的重叠

      这里提到margin,不得不提一下margin的这一特性——纵向重叠。如下图,<p>的纵向margin是16px,那么两个<p>之间纵向的距离是多少?

      按常理来说应该是 16 + 16 = 32px,但是答案仍然是 16px。因为纵向的margin是会重叠的,大的会把小的“吃掉”(可以自己去实验)。

          

    6. 用div画“三角”

      “三角”在日常的网页中是很常见的,例如百度首页:

      

      以及我的开源项目wangEditor(http://www.cnblogs.com/wangfupeng1988/p/4198428.html)中的页面效果:

      

      你当然可以使用背景图片、fontAwesome来实现这一效果,但是你也可以用div来实现这一效果,很简单,而且可以封装通用:

          

    7. 总结

      这一节我们用不小的篇幅讲解了盒子模型的相关知识,比较适合初学者,但是更加适合那些没有系统学习过css的有经验的开发人员,还是那句话:建议大家系统的学习知识体系。

      下面我们将继续这一部分,再说一说float。

    ---------------------------------------------------------------

    1. 引言

      对于我们所有的web前端开发人员,float是或者曾经一度是你最熟悉的陌生人——你离不开它,却整天承受着它所带给你的各种痛苦,你以为它很简单就那么一点知识,但却驾驭不了它各种奇怪的现象。

      这就是我们又爱又恨的——float。所以,系统的学一学float是非常非常重要的。除了看书和看博客文章之外,我推荐大家去看一个奇葩(声音很有磁性,你懂得)录制的教程《CSS深入理解之float浮动》,讲的很好很透彻。

    2. 重新认识float

    2.1.    误解和“误用”

      既然提到“误用”,各位看官就此想想,自己平日是怎么使用float的?另外,既然“误用”加了引号,就说明这样的使用并不是真正的误用,而是误打误撞使用之后,带来了真正的效果。

      这样一问大家,我想绝大多数用float都是为了——横向排版、或者多列布局。这样的使用是正确的,大部分人都这样使用,bootstrap的栅格系统也是使用了float来实现的,并且在css3被普及之前,多列布局的最佳解决方案也是使用float——要不然你就用table。

      但是,这样使用确实是对float的一种误解和“误用”,因为float被设计出来的初衷是用于——文字环绕效果。即,一个图片一段文字,图片float:left之后,文字会环绕图片。

      

      但是,当时的多列布局和横向排版主要是依靠table实现,后来人们见见的发现,使用table将导致代码量大、混乱、不利于SEO,然后发现float+div是一个很不错的排版解决方案,于是乎——过去几年“css+div”页面排版一直是一个热门话题,也是各种高大上的面试题必考的一项。

      初学float的同学,你如果没有从最基础的知识入手,而是从网络的零散之后或者同事同学的零散代码学起的话,你可能只知道float是用来排版的,但是你却不知道float的许多个特性,这就导致了你在使用float时的许多问题。不信请看下文。

    2.2.    破坏性

      首先大家来看两个demo,如下图。第一个demo是一个简单不过的例子,显示效果也很正常。第二个demo,唯一的区别就在于<img>加了float:left,上层的<div>却出现了“坍塌”现象。

      

      不过,这就是float的“破坏性”——float破坏了父标签的原本结构,使得父标签出现了坍塌现象。导致这一现象的最根本原因在于:被设置了float的元素会脱离文档流。

      初次接触“脱离文档流”的朋友可以这样理解:div是父亲,img是它的儿子,原本好好的父子关系,原本爷俩可以体面的展示一个包含关系的效果。直到有一天,img被设置了float。老天爷(浏览器)规定,任何float元素都不允许再呆在自己的家族中,于是img被逐出家门,断绝和div父子关系。于是乎,div没有了img儿子,也就不能再展示这种父子的包含关系,于是两者就各过各的,互不相干。——这样一说,容易理解了吧?

      但是,永远都不要忘记float被设计的初衷——实现文字环绕效果。当div中有文字时,文字还是会环绕在img周围的。如下图:

      

          

      好了,大家现在已经知道了float具有破坏性,可能也有很多朋友之前就知道这一特性,但是你有没有思考一下:float为什么会被设计成具有破坏性,为什么会脱离文档流?这一点非常重要!其实原因非常简单——为了要实现文字的环绕效果?

      有人可能会问:啊?你刚才不是说了float的初衷就是实现文字环绕效果吗?和破坏性有啥关系?

      这时我会反问你:如果float不让父元素坍塌,能实现文字环绕效果吗?给你两个图看看你就知道了。看不明白的可以给我留言讨论。

      

    2.3.    包裹性

      “包裹性”也是float的一个非常重要的特性,大家用float时一定要熟知这一特性。咱们还是先从一个小例子看起:

      

      如上图,普通的div如果没有设置宽度,它会撑满整个屏幕,在之前的盒子模式那一节也讲到过。而如果给div增加float:left之后,它突然变得紧凑了,宽度发生了变化,把内容“王福朋”三个字包裹了——这就是包裹性。div设置了float之后,其宽度会自动调整为包裹住内容宽度,而不是撑满整个父容器。

      注意,此时div虽然体现了包裹性,但是它的display样式是没有变化的,还是block。

      

      说道这里咱们回顾一下,在之前的博客中,也提到了“包裹性”,是哪些样式?你可以在此思考一下,我会在博客的评论中给出答案 。

      

      知道了包裹性之后,我们还是继续思考:float为什么要具有包裹性?其实答案还得从float的设计初衷来寻找,float是被设计用于实现文字环绕效果的。文字环绕图片比较好理解,但是如果想要让文字环绕一个div呢?此时div不被“包裹”起来,那么如何去实现环绕效果?

      道理很简单,你也可能是那种一点即通的聪明人,但是关键在于思考

    2.4.    清空格

      float还有一个大家可能不是很熟悉的特性——清空格。按照管理,咱还是先举例子说明。

      

      上图中。第一个例子,正常的img中间是会有空格的,因为多个<img>标签会有换行,而浏览器识别换行为空格,这也是很正常的。第二个例子中,img增加了float:left的样式,这就使得img之间没有了空格,四个img紧紧挨着。

      如果大家之前没注意,现在想想之前写过的程序,是不是有这个特性。为什么float适合用于网页排版(俗称“砌砖头”)?就是因为float排版出来的网页严丝合缝,中间连个苍蝇都飞不进去。

      “清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了,那么它身边的什么换行、空格就都和它没关系的,它就尽量的往一边去靠拢,能靠多近就靠多近,这就是清空格的本质。

      

      (float内容比较多,咱们分上、下两篇来介绍,这是上篇。下篇将马上发出,敬请期待)

    ---------------------------------------------------------------

     float内容比较多,咱们分上、下两篇来介绍,上篇已经写完,这是下篇。建议大家先把上篇看了,再来看下文,精彩内容不要掠过啊。

    1. 清除float

      《上篇》中我们提到,float具有“破坏性”,它会导致父元素“坍塌”,这将不是所要看到的。如何去避免float带来的这种影响呢(也就是我们常说的“清除浮动”) ?方法有很多种,我在这里介绍4中供大家参考,大家可根据实际情况来选择。

      先介绍两个比较简单,但是不常用的解决方法:

    1. 为父元素添加overflow:hidden
    2. 浮动父元素

      这两个方法比较简单,在这里也就不再演示了,大家有兴趣的可以自己去试试。

      第三种方法也不是很常用,但是大家要知道clear:both这个东西。通过在所有浮动元素下方添加一个clear:both的元素,可以消除float的破坏性。

      

          

      接下来的第四种方法是大家最需要掌握的,也是我推荐的,也是bootstrap正在用的——clearfix——不知道的同学一定要去搜一下,要不然就太low了!

      

      上图中,我们定义一个.clearfix类,然后对float元素的父元素应用这一样式即可,非常简单吧?注意,你可能会搜出不同版本的clearfix,有的代码比上图中的代码多,你不用理会它,就按照我的贴图的代码写就行。

      究其原理,其实就是通过伪元素选择器,在div后面增加了一个clear:both的元素,跟第三种方法是一个道理。

    2. 合理的使用float布局网页

      《上篇》中提到,我们使用float做网页布局,是一种误解和“误用”。估计大多数人误解了float的原本设计初衷,但是这里的“误用”是要加引号的,因为这是一种无心插柳的应用。即,用float做网页布局是很合情合理的,鼓励同志们继续使用。

      但是用float做网页布局也是有许多技巧的,准确的应用会提高网页的灵活性。下面我列举两个常用的网页布局案例,仅供大家参考,不喜勿喷,善意留言!

      

      第一,三列布局

      博客园的主页就是经典的三列布局,很明显的左、中、右。

      

      对于这种布局,我给出的布局方案是:

      

      第二,两列布局

      以博客园一篇文章的链接为例,它分为左、右结构

      

      对于这种布局的格式,我的设计方案是:

      

    3. BootStrap的栅格系统

      如果您熟悉并使用bootstrap,那么您将不必自己去操心网页布局,因为bootstrap已经把网页分成了12列,您可以随意设置多列布局,非常方便。这就是bootstrap的栅格系统。此处不会详解栅格系统,就是简单看看栅格系统的实现,它是用float实现的。

      

      通过浏览器监控每个单元格的css样式,可以发现,单元格通过百分比设置了宽度,通过float:left设置了浮动。

      

      对于父元素的清除浮动,bootstrap使用的就是《上篇》中说的clearfix,大家可以自行检测一下试试。

      多看看经典软件的源码是学习的一个捷径,学习css可以看看bootstrap,学习js可以看看jquery……

    4. 总结

      float内容非常多,有的css书籍中,也很难全面的讲解float这一知识点的全部内容。这就需要自己去多多看书,多多实践,多多看经典系统的源码,才能做到融会贯通,举一反十。

      大家共勉吧。

    ---------------------------------------------------------------

    1. 引言

      网页的所有元素,除了“块”就是“流”,而且“流”都是包含在“块”里面的(最外层的body就是一个“块”)。在本系列一开始讲《浏览器默认样式》的时候,大家也都看到了浏览器默认样式中规定了html元素哪些属于“块”(剩下的就是“流”)。这部分知识非常重要也非常基础,因此在所有的前端面试题中,都会问道哪些元素是“块”哪些元素是“流”。

      

      其实,这部分知识都囊括在display这个样式设置中。在网上查找出display所有的属性,你会发现它有很多,但是不是每个都常用,甚至大部分你都没有用过。这个没关系,学以致用,用不到的就可以先不学,知道就行,什么时候用,什么时候再去详细学——前提是你知道有这么个东西,否则无从下手。

      

      看上图。常用的属性有:none、block、inline、inline-block、inherit,其中inherit是继承父元素的样式,不用多说,其他的几个会在下文详解。其他的都不常用,但是有一些还是需要点出来,其实这些已经在《浏览器默认样式》一节讲到了,这里简单描述一下,详细的可以参考浏览器默认样式一节。

    1. list-item:通过它可以模拟li列表样式;
    2. table:也是一个“块”,但和block相比,table具有包裹性;
    3. table-cell:最新的多列布局解决方案;

    2. inline

      常用的inline就是文字和图片,其实inline真没什么好说的,大家可以把它想象成一个杯子里的水,它是“流”,是没有大小和形状的,它的宽度取决于父容器的宽度。

      因此,针对inline的标签,你设置宽度和高度是无效的,通过监控可以知道,该元素实际的宽度和高度都是auto,并不是我们设定的值。

      

          

      一个很基础的问题:如何把inline元素转换成“块”元素?相信绝大部分人的回答是display:block,但是你应该知道这不是一个唯一的答案。至少我设置display:table也是可以的吧?

           还有两种情况你应该去了解(如果你不知道的话):

           第一,对inline元素设置float

           还是刚才那个例子,我们对span元素添加一个float:left,运行看看效果,你就会大吃一惊。从显示的效果和监控的结果上看来,span元素已经“块”化。注意,上一节刚刚讲完float,不要忘记float的“破坏性”、“包裹性”,在这里同样适用。

      

           第二,对inline元素设置position:absolute/fixed

           还是有同一个例子做演示,这次在span元素上加上absolute/fixed,效果大家应该能猜到,和加上float的效果相同。至于absolute/fixed有什么特性,会在下一节介绍position时提到。

      

    3. block

      本系列有一节重点讲解了《盒子模型》,不知道大家看没看过,或者说你已经很了解盒子模型了。

      其实对于block,我觉得就是“盒子模型”。一个元素设置了block,它就必须遵循盒子模型的规则。因此,这里也不再去详细写它了,大家可以去盒子模型那一节好好看看,就那么点内容。

    4. inline-block

      这个话题还得从《浏览器默认样式》这一节开始。浏览器默认样式中规定了几个html元素为display:inline-block,回顾一下。

      

      初学者对于inline-block可能比较陌生,没关系,一步一步来。首先,你应该知道inline是什么样子的,就是一般的文字、图片;其次,你应该知道block是什么样子的,一般的div就是;最后,inline-block顾名思义,它既有inline的特性,又有block的特性,大家可以想想一般的button、input是什么样子的。

      那button举例子。我们在页面中输入若干个<button>,发现它们是“流”式排列的(可以对比一下若干个<div>的排列方式)。但是针对一个button,我们还可以自定义修改它的形状,这样就有“块”的特征。

          

      因此,inline-block的特点可以总结为:外部看来是“流”,但是自身确实一个“块”。不知道大家理解也无?

    5. 总结

      我看《css设计指南》书中关于display的内容就写了不到一页,侧面反映出display的内容不是很多,但是也看你怎么去理解和应用,如果详细品味起来,还是很有意思的。大家有意见的可以留言交流。

    ---------------------------------------------------------------

    1. 引言

      本文将用一篇文章介绍position(定位),在学习position之前,我们应该去思考一个问题:什么情况下我们需要定位?如果没有定位将无法满足我们怎样的需求?我们要知道,被人类创造出来的每一个知识,都有它的用途,都要解决一些之前遇到的问题。

      如果没有定位,我们做出来的网页将会是按部就班的自上而下、自左而右的平铺在浏览器上,外加通过margin和padding调整一下间距,还有就是通过float来浮动某些元素。做一些简单的网页这样就够了,例如N年之前的yahoo,虽然现在看来很low。

      

      但是有些情况下,这种按部就班的网页排版满足不了我们的要求,我们需要某些元素跑出来,悬浮在网页上面,而且需要给它指定一个位置。这时候我们就需要用到了position,而且是非用不可。如下图:

      

    2. relative

      查资料可知道,position一共有四个可选属性:static/relative/absolute/fixed。其中static(静态定位)是默认值,即所有的元素如果不设置其他的position值,它的position值就是static,有它跟没有它一样。就不多介绍了。

      相对定位relative可以用一个例子很轻松的演示出来。例如我们写4个<p>,出来的样子大家不用看也能知道。

          

      然后我们在第三个<p>上面,加上position:relative并且设置left和top值,看这个<p>有什么变化。

      

      上图中,大家应该要识别出两个信息(相信大部分人会忽略第二个信息)

    1. 第三个<p>发生了位置变化,分别向右向下移动了10px;
    2. 其他的三个<p>位置没有发生变化,这一点也很重要。

      因此,relative会导致自身位置的相对变化,而不会影响其他元素的位置、大小的变化。这是relative的要点之一。还有第二个要点,就是relative产生一个新的定位上下文,下文有关于定位上下文的详细介绍,这里可以先通过一个例子来展示一下区别:

      

      注意看这两图的区别,下文将有解释。

    3. absolute

      说道absolute,推荐大家去看一个视频教程,讲师对absolute讲的非常透彻,本文的一些内容也是参考了这篇教程,好东西大家一起分享吗!

      话归正传,咱们还是拿之前那个例子说事儿,先写一个基本的页面——4个<p>

      

      然后,我们把第三个<p>改为absolute,看看会发生什么变化。

      

      从上面的结果中,我们能看出几点信息:

    1. absolute元素脱离了文档结构。和relative不同,其他三个元素的位置重新排列了。只要元素会脱离文档结构,它就会产生破坏性,导致父元素坍塌。(此时你应该能立刻想起来,float元素也会脱离文档结构)
    2. absolute元素具有“包裹性”。之前<p>的宽度是撑满整个屏幕的,而此时<p>的宽度刚好是内容的宽度。
    3. absolute元素具有“跟随性”。虽然absolute元素脱离了文档结构,但是它的位置并没有发生变化,还是老老实实的呆在它原本的位置,因为我们此时没有设置top、left的值。
    4. absolute元素会悬浮在页面上方,会遮挡住下方的页面内容。

      最后,通过给absolute元素设置top、left值,可自定义其内容,这个都是平时比较常用的了。这里需要注意的是,设置了top、left值时,元素是相对于最近的定位上下文来定位的,而不是相对于浏览器定位。下文马上会讲定位上下文。

      但是有时候设置top、left值并不是定位的最佳解决方案。例如想要元素A紧跟在元素B的上方,可通过设置元素B为absolute,然后调整B的margin值来确定,这样更有效率。如下图:

      

      以上提到的信息,如果展开来说,内容非常多,而且用文本也不好描述,还是推荐大家去看慕课网的那篇视频教程,讲的很有意思。

      

      最后,再提几个小知识点。

    1. 设置absolute会使得inline元素被“块”化,这在上一节将display时已经说过;
    2. 设置absolute会使得元素已有的float失效。不过float和absolute同时使用的情况不多;
    3. 上文提到了absolute会使元素悬浮在页面之上,如果有多个悬浮元素,层级如何确定?答案是“后来者居上”

    4. fixed

      其实fixed和absolute是一样的,唯一的区别在于:absolute元素是根据最近的定位上下文确定位置,而fixed永远根据浏览器确定位置。

      上文很多次提到了“定位上下文”,那么它到底是一个什么东东?答案马上揭晓。

    5. 定位上下文

      5.1 relative的定位

      relative元素的定位永远是相对于元素自身位置的,和其他元素没关系,也不会影响其他元素。

      

      5.2 fixed的定位

      fixed元素的定位永远是相对于浏览器边界的,和其他元素没有关系。但是它具有破坏性,会导致其他元素位置的变化。

      

      5.3 absolute的定位

      absolute的定位相对于前两者要复杂许多。如果为absolute设置了top、left,浏览器会根据什么去确定它的纵向和横向的偏移量呢?答案是浏览器会递归查找该元素的所有父元素,如果找到一个设置了position:relative/absolute/fixed的元素,就以该元素为基准定位,如果没找到,就以浏览器边界定位。如下两个图所示:

      

      

      上图中的“某一层祖先元素”就是该absolute元素的定位上下文。讲到这里,我们上文中的那个图,大家能看明白了吧?还有不明白的可以留言给我。

      

    6. 总结

      我感觉position这篇文章是这一系列中最难写的文章,它的知识点比较多,而且非常难理解,因此position也是css的一个重点知识,不懂position的前端开发人员要抓紧恶补一下。

      写了这么多,感觉还是写的不是很全面,或者不是很系统,很希望大家把自己的意见反馈给我。这个系列博客算是这个教程的第一版,我计划后期抽时间会录制一个视频版,到时候希望会更加全面系统一些。

    ---------------------------------------------------------------

  • 相关阅读:
    《大话设计模式》读书笔记
    设计模式个人笔记
    多线程的单元测试工具
    设计模式六大原则
    时间复杂度和空间复杂度(转)
    排序算法笔记
    《人月神话》读书笔记
    微信公众号开发踩坑记录(二)
    微信公众号开发踩坑记录
    全栈工程师之路
  • 原文地址:https://www.cnblogs.com/haojiahong/p/4763036.html
走看看 - 开发者的网上家园