(11)——position

最后更新于:2022-04-01 05:31:43

## 1\. 引言   本文将用一篇文章介绍position(定位),在学习position之前,我们应该去思考一个问题:什么情况下我们需要定位?如果没有定位将无法满足我们怎样的需求?我们要知道,被人类创造出来的每一个知识,都有它的用途,都要解决一些之前遇到的问题。   如果没有定位,我们做出来的网页将会是按部就班的自上而下、自左而右的平铺在浏览器上,外加通过margin和padding调整一下间距,还有就是通过float来浮动某些元素。做一些简单的网页这样就够了,例如N年之前的yahoo,虽然现在看来很low。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374116485bf.png)   但是有些情况下,这种按部就班的网页排版满足不了我们的要求,我们需要某些元素跑出来,悬浮在网页上面,而且需要给它指定一个位置。这时候我们就需要用到了position,而且是非用不可。如下图:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741167393b.png) ## 2\. relative   查资料可知道,position一共有四个可选属性:static/relative/absolute/fixed。其中static(静态定位)是默认值,即所有的元素如果不设置其他的position值,它的position值就是static,有它跟没有它一样。就不多介绍了。   相对定位relative可以用一个例子很轻松的演示出来。例如我们写4个,出来的样子大家不用看也能知道。       ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741168003b.png)   然后我们在第三个上面,加上position:relative并且设置left和top值,看这个有什么变化。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741168e0e1.png)   上图中,大家应该要识别出两个信息(相信大部分人会忽略第二个信息) 1. 第三个发生了位置变化,分别向右向下移动了10px; 2. 其他的三个位置没有发生变化,这一点也很重要。   因此,relative会导致自身位置的相对变化,而不会影响其他元素的位置、大小的变化。这是relative的要点之一。还有第二个要点,就是relative产生一个新的定位上下文,下文有关于定位上下文的详细介绍,这里可以先通过一个例子来展示一下区别:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741169c742.png)   注意看这两图的区别,下文将有解释。 ## 3\. absolute   说道absolute,推荐大家去看一个[视频教程](http://www.imooc.com/learn/192),讲师对absolute讲的非常透彻,本文的一些内容也是参考了这篇教程,好东西大家一起分享吗!   话归正传,咱们还是拿之前那个例子说事儿,先写一个基本的页面——4个   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374116aa041.png)   然后,我们把第三个改为absolute,看看会发生什么变化。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374116ce131.png)   从上面的结果中,我们能看出几点信息: 1. absolute元素脱离了文档结构。和relative不同,其他三个元素的位置重新排列了。只要元素会脱离文档结构,它就会产生破坏性,导致父元素坍塌。(此时你应该能立刻想起来,float元素也会脱离文档结构) 2. absolute元素具有“包裹性”。之前的宽度是撑满整个屏幕的,而此时的宽度刚好是内容的宽度。 3. absolute元素具有“跟随性”。虽然absolute元素脱离了文档结构,但是它的位置并没有发生变化,还是老老实实的呆在它原本的位置,因为我们此时没有设置top、left的值。 4. absolute元素会悬浮在页面上方,会遮挡住下方的页面内容。   最后,通过给absolute元素设置top、left值,可自定义其内容,这个都是平时比较常用的了。这里需要注意的是,设置了top、left值时,元素是相对于最近的定位上下文来定位的,而不是相对于浏览器定位。下文马上会讲定位上下文。   但是有时候设置top、left值并不是定位的最佳解决方案。例如想要元素A紧跟在元素B的上方,可通过设置元素B为absolute,然后调整B的margin值来确定,这样更有效率。如下图:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741167393b.png)   以上提到的信息,如果展开来说,内容非常多,而且用文本也不好描述,还是推荐大家去看慕课网的那篇[视频教程](http://www.imooc.com/learn/192),讲的很有意思。   最后,再提几个小知识点。 1. 设置absolute会使得inline元素被“块”化,这在上一节将display时已经说过; 2. 设置absolute会使得元素已有的float失效。不过float和absolute同时使用的情况不多; 3. 上文提到了absolute会使元素悬浮在页面之上,如果有多个悬浮元素,层级如何确定?答案是“后来者居上” ## 4\. fixed   其实fixed和absolute是一样的,唯一的区别在于:absolute元素是根据最近的定位上下文确定位置,而fixed永远根据浏览器确定位置。   上文很多次提到了“定位上下文”,那么它到底是一个什么东东?答案马上揭晓。 ## 5\. 定位上下文 **5.1 relative的定位**   relative元素的定位永远是相对于元素自身位置的,和其他元素没关系,也不会影响其他元素。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374116e8c7d.png) **5.2 fixed的定位**   fixed元素的定位永远是相对于浏览器边界的,和其他元素没有关系。但是它具有破坏性,会导致其他元素位置的变化。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374117003b7.png) **5.3 absolute的定位**   absolute的定位相对于前两者要复杂许多。如果为absolute设置了top、left,浏览器会根据什么去确定它的纵向和横向的偏移量呢?答案是浏览器会递归查找该元素的所有父元素,如果找到一个设置了position:relative/absolute/fixed的元素,就以该元素为基准定位,如果没找到,就以浏览器边界定位。如下两个图所示:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741170c68e.png)   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_5637411719ee8.png)   上图中的“某一层祖先元素”就是该absolute元素的定位上下文。讲到这里,我们上文中的那个图,大家能看明白了吧?还有不明白的可以留言给我。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741169c742.png) ## 6\. 总结   我感觉position这篇文章是这一系列中最难写的文章,它的知识点比较多,而且非常难理解,因此position也是css的一个重点知识,不懂position的前端开发人员要抓紧恶补一下。   写了这么多,感觉还是写的不是很全面,或者不是很系统,很希望大家把自己的意见反馈给我。这个系列博客算是这个教程的第一版,我计划后期抽时间会录制一个视频版,到时候希望会更加全面系统一些。
';

(10)——display

最后更新于:2022-04-01 05:31:41

## 1\. 引言   网页的所有元素,除了“块”就是“流”,而且“流”都是包含在“块”里面的(最外层的body就是一个“块”)。在本系列一开始讲《[浏览器默认样式](http://www.cnblogs.com/wangfupeng1988/p/4280801.html)》的时候,大家也都看到了浏览器默认样式中规定了html元素哪些属于“块”(剩下的就是“流”)。这部分知识非常重要也非常基础,因此在所有的前端面试题中,都会问道哪些元素是“块”哪些元素是“流”。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374115d67d0.png)   其实,这部分知识都囊括在display这个样式设置中。在网上查找出display所有的属性,你会发现它有很多,但是不是每个都常用,甚至大部分你都没有用过。这个没关系,学以致用,用不到的就可以先不学,知道就行,什么时候用,什么时候再去详细学——前提是你知道有这么个东西,否则无从下手。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374115e0dfa.png)   看上图。常用的属性有:none、block、inline、inline-block、inherit,其中inherit是继承父元素的样式,不用多说,其他的几个会在下文详解。其他的都不常用,但是有一些还是需要点出来,其实这些已经在《[浏览器默认样式](http://www.cnblogs.com/wangfupeng1988/p/4280801.html)》一节讲到了,这里简单描述一下,详细的可以参考浏览器默认样式一节。 1. list-item:通过它可以模拟li列表样式; 2. table:也是一个“块”,但和block相比,table具有包裹性; 3. table-cell:最新的多列布局解决方案; ## 2\. inline   常用的inline就是文字和图片,其实inline真没什么好说的,大家可以把它想象成一个杯子里的水,它是“流”,是没有大小和形状的,它的宽度取决于父容器的宽度。   因此,针对inline的标签,你设置宽度和高度是无效的,通过监控可以知道,该元素实际的宽度和高度都是auto,并不是我们设定的值。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374115eede0.png)   一个很基础的问题:如何把inline元素转换成“块”元素?相信绝大部分人的回答是display:block,但是你应该知道这不是一个唯一的答案。至少我设置display:table也是可以的吧?        还有两种情况你应该去了解(如果你不知道的话):        第一,对inline元素设置float        还是刚才那个例子,我们对span元素添加一个float:left,运行看看效果,你就会大吃一惊。从显示的效果和监控的结果上看来,span元素已经“块”化。注意,上一节刚刚讲完float,不要忘记float的“破坏性”、“包裹性”,在这里同样适用。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741160a9ff.png)        第二,对inline元素设置position:absolute/fixed        还是有同一个例子做演示,这次在span元素上加上absolute/fixed,效果大家应该能猜到,和加上float的效果相同。至于absolute/fixed有什么特性,会在下一节介绍position时提到。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741161a4ff.png) ## 3\. block   本系列有一节重点讲解了《[盒子模型](http://www.cnblogs.com/wangfupeng1988/p/4287292.html)》,不知道大家看没看过,或者说你已经很了解盒子模型了。   其实对于block,我觉得就是“盒子模型”。一个元素设置了block,它就必须遵循盒子模型的规则。因此,这里也不再去详细写它了,大家可以去盒子模型那一节好好看看,就那么点内容。 ## 4\. inline-block   这个话题还得从《[浏览器默认样式](http://www.cnblogs.com/wangfupeng1988/p/4280801.html)》这一节开始。浏览器默认样式中规定了几个html元素为display:inline-block,回顾一下。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741162e238.png)   初学者对于inline-block可能比较陌生,没关系,一步一步来。首先,你应该知道inline是什么样子的,就是一般的文字、图片;其次,你应该知道block是什么样子的,一般的div就是;最后,inline-block顾名思义,它既有inline的特性,又有block的特性,大家可以想想一般的button、input是什么样子的。   那button举例子。我们在页面中输入若干个,发现它们是“流”式排列的(可以对比一下若干个的排列方式)。但是针对一个button,我们还可以自定义修改它的形状,这样就有“块”的特征。       ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_5637411637cdf.png)   因此,inline-block的特点可以总结为:外部看来是“流”,但是自身确实一个“块”。不知道大家理解也无? ## 5\. 总结   我看《css设计指南》书中关于display的内容就写了不到一页,侧面反映出display的内容不是很多,但是也看你怎么去理解和应用,如果详细品味起来,还是很有意思的。大家有意见的可以留言交流。
';

(9)——float下篇

最后更新于:2022-04-01 05:31:39

float内容比较多,咱们分上、下两篇来介绍,上篇已经写完,这是下篇。建议大家先把上篇看了,再来看下文,精彩内容不要掠过啊。 ## 1\. 清除float   《上篇》中我们提到,float具有“破坏性”,它会导致父元素“坍塌”,这将不是所要看到的。如何去避免float带来的这种影响呢(也就是我们常说的“清除浮动”) ?方法有很多种,我在这里介绍4中供大家参考,大家可根据实际情况来选择。   先介绍两个比较简单,但是不常用的解决方法: 1. 为父元素添加overflow:hidden 2. 浮动父元素   这两个方法比较简单,在这里也就不再演示了,大家有兴趣的可以自己去试试。   第三种方法也不是很常用,但是大家要知道clear:both这个东西。通过在所有浮动元素下方添加一个clear:both的元素,可以消除float的破坏性。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741156685d.png)   接下来的第四种方法是大家最需要掌握的,也是我推荐的,也是bootstrap正在用的——clearfix——不知道的同学一定要去搜一下,要不然就太low了!   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_5637411577258.png)   上图中,我们定义一个.clearfix类,然后对float元素的父元素应用这一样式即可,非常简单吧?注意,你可能会搜出不同版本的clearfix,有的代码比上图中的代码多,你不用理会它,就按照我的贴图的代码写就行。   究其原理,其实就是通过伪元素选择器,在div后面增加了一个clear:both的元素,跟第三种方法是一个道理。 ## 2\. 合理的使用float布局网页   《上篇》中提到,我们使用float做网页布局,是一种误解和“误用”。估计大多数人误解了float的原本设计初衷,但是这里的“误用”是要加引号的,因为这是一种无心插柳的应用。即,用float做网页布局是很合情合理的,鼓励同志们继续使用。   但是用float做网页布局也是有许多技巧的,准确的应用会提高网页的灵活性。下面我列举两个常用的网页布局案例,仅供大家参考,不喜勿喷,善意留言!   第一,三列布局   博客园的主页就是经典的三列布局,很明显的左、中、右。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_5637411582857.png)   对于这种布局,我给出的布局方案是:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_5637411591ea9.png) * 第二,两列布局   以博客园一篇文章的链接为例,它分为左、右结构   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741159f2b0.png)   对于这种布局的格式,我的设计方案是:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374115aea69.png) ## 3\. BootStrap的栅格系统   如果您熟悉并使用bootstrap,那么您将不必自己去操心网页布局,因为bootstrap已经把网页分成了12列,您可以随意设置多列布局,非常方便。这就是bootstrap的栅格系统。此处不会详解栅格系统,就是简单看看栅格系统的实现,它是用float实现的。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374115b9d01.png)   通过浏览器监控每个单元格的css样式,可以发现,单元格通过百分比设置了宽度,通过float:left设置了浮动。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374115c4c3f.png)   对于父元素的清除浮动,bootstrap使用的就是《上篇》中说的clearfix,大家可以自行检测一下试试。   多看看经典软件的源码是学习的一个捷径,学习css可以看看bootstrap,学习js可以看看jquery…… ## 4\. 总结   float内容非常多,有的css书籍中,也很难全面的讲解float这一知识点的全部内容。这就需要自己去多多看书,多多实践,多多看经典系统的源码,才能做到融会贯通,举一反十。   大家共勉吧。
';

(8)——float上篇

最后更新于:2022-04-01 05:31:37

## 1\. 引言   对于我们所有的web前端开发人员,float是或者曾经一度是你最熟悉的陌生人——你离不开它,却整天承受着它所带给你的各种痛苦,你以为它很简单就那么一点知识,但却驾驭不了它各种奇怪的现象。   这就是我们又爱又恨的——float。所以,系统的学一学float是非常非常重要的。除了看书和看博客文章之外,我推荐大家去看一个奇葩(声音很有磁性,你懂得)录制的教程[《CSS深入理解之float浮动》](http://www.imooc.com/learn/121),讲的很好很透彻。 ## 2\. 重新认识float ### 2.1.    误解和“误用”   既然提到“误用”,各位看官就此想想,自己平日是怎么使用float的?另外,既然“误用”加了引号,就说明这样的使用并不是真正的误用,而是误打误撞使用之后,带来了真正的效果。   这样一问大家,我想绝大多数用float都是为了——横向排版、或者多列布局。这样的使用是正确的,大部分人都这样使用,bootstrap的栅格系统也是使用了float来实现的,并且在css3被普及之前,多列布局的最佳解决方案也是使用float——要不然你就用table。   但是,这样使用确实是对float的一种误解和“误用”,因为float被设计出来的初衷是用于——文字环绕效果。即,一个图片一段文字,图片float:left之后,文字会环绕图片。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374114c5a57.png)   但是,当时的多列布局和横向排版主要是依靠table实现,后来人们见见的发现,使用table将导致代码量大、混乱、不利于SEO,然后发现float+div是一个很不错的排版解决方案,于是乎——过去几年“css+div”页面排版一直是一个热门话题,也是各种高大上的面试题必考的一项。   初学float的同学,你如果没有从最基础的知识入手,而是从网络的零散之后或者同事同学的零散代码学起的话,你可能只知道float是用来排版的,但是你却不知道float的许多个特性,这就导致了你在使用float时的许多问题。不信请看下文。 ### 2.2.    破坏性   首先大家来看两个demo,如下图。第一个demo是一个简单不过的例子,显示效果也很正常。第二个demo,唯一的区别就在于加了float:left,上层的却出现了“坍塌”现象。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374114d3f2c.png)   不过,这就是float的“破坏性”——float破坏了父标签的原本结构,使得父标签出现了坍塌现象。导致这一现象的最根本原因在于:被设置了float的元素会脱离文档流。   初次接触“脱离文档流”的朋友可以这样理解:div是父亲,img是它的儿子,原本好好的父子关系,原本爷俩可以体面的展示一个包含关系的效果。直到有一天,img被设置了float。老天爷(浏览器)规定,任何float元素都不允许再呆在自己的家族中,于是img被逐出家门,断绝和div父子关系。于是乎,div没有了img儿子,也就不能再展示这种父子的包含关系,于是两者就各过各的,互不相干。——这样一说,容易理解了吧?   但是,永远都不要忘记float被设计的初衷——实现文字环绕效果。当div中有文字时,文字还是会环绕在img周围的。如下图:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374114ecf9a.png)   好了,大家现在已经知道了float具有破坏性,可能也有很多朋友之前就知道这一特性,但是你有没有思考一下:**float****为什么会被设计成具有破坏性,为什么会脱离文档流?这一点非常重要!**其实原因非常简单——为了要实现文字的环绕效果?   有人可能会问:啊?你刚才不是说了float的初衷就是实现文字环绕效果吗?和破坏性有啥关系?   这时我会反问你:如果float不让父元素坍塌,能实现文字环绕效果吗?给你两个图看看你就知道了。看不明白的可以给我留言讨论。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741151e6b4.png) ### 2.3.    包裹性   “包裹性”也是float的一个非常重要的特性,大家用float时一定要熟知这一特性。咱们还是先从一个小例子看起:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741153166e.png)   如上图,普通的div如果没有设置宽度,它会撑满整个屏幕,在之前的盒子模式那一节也讲到过。而如果给div增加float:left之后,它突然变得紧凑了,宽度发生了变化,把内容“王福朋”三个字包裹了——这就是包裹性。div设置了float之后,其宽度会自动调整为包裹住内容宽度,而不是撑满整个父容器。   注意,此时div虽然体现了包裹性,但是它的display样式是没有变化的,还是block。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374115408f6.png)   说道这里咱们回顾一下,在之前的博客中,也提到了“包裹性”,是哪些样式?你可以在此思考一下,我会在博客的评论中给出答案 。   知道了包裹性之后,我们还是继续思考:float为什么要具有包裹性?其实答案还得从float的设计初衷来寻找,float是被设计用于实现文字环绕效果的。文字环绕图片比较好理解,但是如果想要让文字环绕一个div呢?此时div不被“包裹”起来,那么如何去实现环绕效果?   道理很简单,你也可能是那种一点即通的聪明人,但是关键在于**思考**。 ### 2.4.    清空格   float还有一个大家可能不是很熟悉的特性——清空格。按照管理,咱还是先举例子说明。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_5637411551393.png)   上图中。第一个例子,正常的img中间是会有空格的,因为多个标签会有换行,而浏览器识别换行为空格,这也是很正常的。第二个例子中,img增加了float:left的样式,这就使得img之间没有了空格,四个img紧紧挨着。   如果大家之前没注意,现在想想之前写过的程序,是不是有这个特性。为什么float适合用于网页排版(俗称“砌砖头”)?就是因为float排版出来的网页严丝合缝,中间连个苍蝇都飞不进去。   “清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了,那么它身边的什么换行、空格就都和它没关系的,它就尽量的往一边去靠拢,能靠多近就靠多近,这就是清空格的本质。   (float内容比较多,咱们分上、下两篇来介绍,这是上篇。下篇将马上发出,敬请期待)
';

(7)——盒子模型

最后更新于:2022-04-01 05:31:34

## 1\. 引言   从这一节开始,我们就进入本系列的第三部分——css呈现。本部分将描述css在页面的几种布局和呈现的特性。包括两类:文字、块。   第一类——文字。这部分相对比较简单一些,例如设置字号、字体、颜色、背景色、是否加粗等。重点的地方在于设置字体、设置行高、文字相关的距离都用相对值,这些东西在《[css知多少(4)——解读浏览器默认样式](http://www.cnblogs.com/wangfupeng1988/p/4280801.html)》那一节已经说过了。另外还有一个重点,就是web端最流行的字体库fontAwesome,关于它我之前有一篇文章专门讲过,请参见《[请用fontAwesome代替网页icon小图标](http://www.cnblogs.com/wangfupeng1988/p/4129500.html)》,这里就不再重复去讲了。        第二类——块。这部分的知识点非常多,重要的有:盒子模型,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白色盒子有厚度,虽然很薄(边框),盒子和快递箱子之间还有一层泡沫板(外边距)。这就是一个典型的盒子。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741143d0b8.png)   如上图,真正的内容就是这些文字,文字外围有10px的内边距,5px的border,10px的外边距。看到盒子了吧? ## 3\. 盒子的宽度 ### 3.1.    设置了固定宽度的情况下   遇到这种问题,我建议在查询各种资料之前,不如先自己动手做一个实验:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374114470e6.png)   如上图,得到网页效果之后,我们可以用截图工具来量一下文字内容的宽度。发现,文字内容的宽度刚好是300px,就是我们设置的宽度。   因此,在盒子模型中,我们设置的宽度都是内容宽度,不是整个盒子的宽度。而整个盒子的宽度是:(内容宽度 + border宽度 + padding宽度 + margin宽度)之和。这样我们改四个中的其中一个,都会导致盒子宽度的改变。这对我们来说不友好。   没关系,这个东西不友好早就有人发现了,而且已经解决,下文再说。 ### 3.2.    充满父容器的情况下   默认情况下,div的display:block,宽度会充满整个父容器。如下图:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741145558b.png)   但是别忘记,这个div是个盒子模型,它的整个宽度包括(内容宽度 + border宽度 + padding宽度 + margin宽度),整个的宽度充满父容器。   问题就在这里。如果父容器宽度不变,我们手动增大margin、border或padding其中一项的宽度值,都会导致内容宽度的减少。极端情况下,如果内容的宽度压缩到不能再压缩了(例如一个字的宽度),那么浏览器会强迫增加父容器的宽度。这可不是我们想要看到的。 ### 3.3.    包裹内容的情况下   这种情况下比较简单,内容的宽度按照内容计算,盒子的宽度将在内容宽度的基础上再增加(padding宽度 + border宽度 + margin宽度)之和。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_5637411462ea3.png) ## 4\. 再看盒子的宽度   前面提到,为盒子模型设置宽度,结果只是设置了内容的宽度,这个不合理。如何解决这一问题?答案就是:**box-sizing:border-box**   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_5637411471be2.png)   如上图,div设置了box-sizing:border-box之后,300px的宽度是内容 + border + 边框的宽度(不包括margin),这样就比较符合我们的实际要求了。   建议大家在为系统写css时候,第一个样式是:       ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_5637411483e90.png)   大名鼎鼎的bootstrap也把box-sizing:border-box加入到它的 * 选择器中,我们为什么不这样做呢? ## 5\. 纵向margin的重叠   这里提到margin,不得不提一下margin的这一特性——纵向重叠。如下图,的纵向margin是16px,那么两个之间纵向的距离是多少?   按常理来说应该是 16 + 16 = 32px,但是答案仍然是 16px。因为纵向的margin是会重叠的,大的会把小的“吃掉”(可以自己去实验)。       ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741148fa7b.png) ## 6\. 用div画“三角”   “三角”在日常的网页中是很常见的,例如百度首页:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741149b7e6.png)   以及我的开源项目wangEditor(http://www.cnblogs.com/wangfupeng1988/p/4198428.html)中的页面效果:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374114a7e50.png)   你当然可以使用背景图片、fontAwesome来实现这一效果,但是你也可以用div来实现这一效果,很简单,而且可以封装通用:       ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374114b526c.png) ## 7\. 总结   这一节我们用不小的篇幅讲解了盒子模型的相关知识,比较适合初学者,但是更加适合那些没有系统学习过css的有经验的开发人员,还是那句话:建议大家系统的学习知识体系。   下面我们将继续这一部分,再说一说float。
';

(6)——选择器的优先级

最后更新于:2022-04-01 05:31:32

## 1\. 引言   上一节《[css知多少(5)——选择器](http://www.cnblogs.com/wangfupeng1988/p/4282954.html)》最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374113e54ec.png)   上图中,css中的两个选择器都是针对的,而且两个设置的颜色不一样,这里的到底听从谁的命令?   上面还是比较简单的,下面在来一个复杂的:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374113f1fdd.png)   上图中的该显示成什么颜色呢? ## 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的选择器胜过包含元素的选择器;例如下图,第一个特指度更高:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741140a9fd.png)   规则二,不同选择器的特指度比较时,不区分加载的顺序(相同选择器在层叠时,后加载的覆盖前加载的),例如下图,虽然后加载,但是特指度低:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_5637411415775.png)   规则三,设置的样式高于继承的样式,不用考虑特指度。例如:       ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_5637411421a21.png)   其实,大部分情况下,你通过这个简版的规则,即可判断选择器的优先级。 ## 4\. 亲身经历   wangEditor是我自己做的一个富文本编辑器,当我最开始在博客园上配置demo页面的时候,就遇到了css选择器优先级的问题,现在已经解决。Demo地址:[http://www.cnblogs.com/wangfupeng1988/p/4198428.html](http://www.cnblogs.com/wangfupeng1988/p/4198428.html)   对于下来菜单,例如选择字体、字号等,我当时在wangEditor的css中是用Class来设置的,谁知道博客园页面中有一个既有的样式,优先级高于我的:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741142df8f.png)   导致了我配置的demo中,ul的margin-left还是45px,而我写的css明明已经设置成了0px。原因就是博客园这个css选择器优先级要高于我写的优先级。   当然,后来我改成了id选择器,就改过了这个问题。 ## 5\. 总结   本节的内容是一个重点,我在许多的面试题中看到过考css优先级的问题。css优先级并不麻烦,只要你掌握了合适的方法来学习,一晚上就入门个差不多,祝君好运。
';

(5)——选择器

最后更新于:2022-04-01 05:31:30

## 1\. 引言   从本节开始,就进入本系列的第二个部分——css和html的结合——说白了就是选择器。   CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得不通过选择器。让浏览器知道css选择了哪一个dom节点,浏览器就会乖乖的把相应的样式渲染成视图。   至于css能把页面渲染成什么样子,这是本系列的第三部分。   第一部分讲css样式的加载和层叠,第二部分讲选择器以及选择器的等级,第三部分讲呈现的各种样式(背景、字体、定位、浮动等)。这样一个思路,也正式浏览器使用css的流程,是最有效的学习思路。([第二节](http://www.cnblogs.com/wangfupeng1988/p/4276321.html)中讲过,此处再回顾一遍) ## 2\. 选择器 说道css选择器,大家都知道有许多种,但是真要你去掰着手指头数一数的话,你可能需要数几分钟。其实这么多选择器,完全可以分为两类: 1. 标签选择器(*是特殊情况),可但标签,也可上下文多标签; 2. 属性选择器(id和class都是属性,特殊的属性); ### 2.1.    标签选择器 #### 2.1.1 通用选择   通用选择器 大家应该都比较熟悉了,最常用的就是 *{margin:0; box-sizing:border-box;}。mragin:0咱们在上一节已经说过,box-sizing:border-box将在后面的盒子模型那块再详细描述。   例如,我们在检测bootstrap3的样式时,也可以看到它用到了 * 选择器:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_5637411338ba1.png) #### 2.1.2 单标签   单标签选择器是最基础的css知识了,在上一节的浏览器默认样式中,到处都用了单标签选择。这里不再赘述,css基础薄弱的朋友,可以先去补补课。 #### 2.1.3 多标签   多标签选择器一般和html上下文有关,它有以下集中分类 1. 选择一个祖先的所有子孙节点,例如 div p{…} 2. 选择一个父元素的所有直属节点,例如 div > p{…} 3. 选择某一个元素紧挨着的兄弟节点,例如 li + li{…} 4. 选择某一个元素的所有同胞节点,例如 span ~ a{…} 5. 以上各种情况的组合应用(不要组合过于复杂,编码讲求可读性第一)   给大家列举一个比较典型的应用,如下图   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_5637411344a1b.png)   上图中的效果应该比较常见,在各个菜单之间加下划线。我之前的实现是:每个li都加一个border-bottom,在把最后一个li的border-bottom去掉。   其实完全没必要这样麻烦,下面一个样式设置即可解决:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741135278d.png)   有点意思吧? ### 2.2.    属性选择器 #### 2.2.1 特殊1:id选择   基础知识,不再赘述。   按照许多css教程上讲的,id选择器和属性选择器是不同的两个类别,为什么要把id选择器放在属性选择器下面的呢?因为css选择器是根据html节点的特性来设置的,id也是一个属性,只是它是一个比较特殊的属性,每个html节点的id不能重复。   由于特殊,而且比较常用,所以就单独给id选择器一个“#”,本质上就是一个属性选择器。下面两行代码的执行效果完全相同:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741135d6c9.png) ### 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伪类都比较简单常用,我下面简单写几句代码,就不再详细说了。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741136a868.png) #### 3.1.2 结构化伪类(IE低版本不行)   先问大家一个问题:如何实现一个表格间隔显示背景颜色,如图:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374113771b2.png)   最简单的方式莫过于使用结构化伪类,一句样式设置即可实现。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_5637411382b45.png)   结构化伪类有如下书写选项,至于什么意思,从字面意思即可理解:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741138d892.png) ### 3.2.    伪元素   记住,伪元素是一个非常重要的概念!其中,:before和:after 非常常用。   首先,咱们先看看:before和:after是怎么回事儿。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741139885f.png)   上图中,我们可以看到,可以为元素前后添加内容。这里的“内容”还可以写成unicode编码的方式,如下图:       ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374113a5e3f.png)   另外,除了可以添加内容外,你还可以自定义执行内容的样式,如下图:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374113b203e.png)   以上大体了解了两者的基本用法,下面给家介绍两个典型的应用场景:   第一,大家都知道fontAwesome吧,web最流行的icon字体库。这些小图标的应用就是通过伪元素来实现的,如下图:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374113bdec5.png)   (不知道fontAwesome也没关系,我们在讲到css字体时,会详细介绍)   第二,清除浮动的样式大家都知道吧?这就是一个很典型的伪元素应用场景:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374113c8913.png)   (在讲到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节点。不得不佩服这帮人的创造力。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374113d366e.png)   如果你还没用过zen-coding,无论你以后用不用,建议你也一定要去体验一下! ## 5\. 总结   本节总结了css的选择器知识,知道了选择器有若干种类型。但是类型多了不一定是个好事儿,下一节就给大家说说类型太多带来的一个问题,以及解决方案。
';

(4)——解读浏览器默认样式

最后更新于:2022-04-01 05:31:27

 上一节《[css知多少(3)——样式来源与层叠规则](http://www.cnblogs.com/wangfupeng1988/p/4277959.html)》介绍了样式的五种来源,咱们再通过一张图回顾一下。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741122609c.png)   对于上面的三层,咱们大概都比较熟悉了。下面的两层中,用户自定义样式一般也就是改一改字号大小和字体样式,也没甚好说的。而最有的说的就是浏览器的默认样式。   不同浏览器的默认样式多少有些区别,特别是老版本的浏览器之间,现在高级浏览器越来越向统一的标准靠拢,对前端程序猿来说是一件好事情。虽然有些许差异,但是绝大部分还是相同的,我先把代码粘贴出来 ,具体的解读咱们慢慢道来(只说重点,比较容易的或者不常用的就不说了)。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374111ddec5.gif) 浏览器默认样式 ## 1.理念上的转变   在解读代码之前,我先把我看浏览器默认样式最大的体会给大家说一下,这个是非常重要的。就是要先从理念上重新认识html和css。   以前我都是认为浏览器自身本来就认识各种html标签,并且会根据规则设置标签的样子,例如p是block显示,ul有margin-left,h1粗体显示……以前以为这些标签默认的显示方式和css无关,是浏览器自己干的,css设置网页样式是加载之后又渲染的。   现在知道这种想法是错误的。其实浏览器加载了html之后只为一件东西——dom树,浏览器把html变为dom树结构,就完成了对html的结构化。至于后来对视图的渲染,p是block、br换行,那是整合了css之后的事情。而浏览器整合css又是另一个路线,和解析html是分开的。这里的“css”就包含了浏览器默认样式。   可以结合下图理解([第二节](http://www.cnblogs.com/wangfupeng1988/p/4276321.html)的图):       ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741123cf17.png)   一句话,浏览器将载入的html变为dom树,但是此时没有任何显示样式。所以显示的样式,都是css定义的,浏览器只会通过css来渲染视图样式。   ——多好的设计:指责单一,开放封闭! ## 2.block元素   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_5637411253337.png)   为何默认情况下p、h1、ul、div都是block显示,就是这里定义的。所以,不要再说div天生就是block——这句话应该换成:浏览器默认样式天生规定了div是block——所以才导致了div是block!是默认样式规定的,不是浏览器的内核规定的。   没有设置block的元素,默认为inline显示。 ## 3\. display: list-item   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_5637411263951.png)   我们在使用display时,常用的值一般是:inline/block/inline-block,用不到list-item。那这里的list-item到底有什么作用?我们不妨亲自试一试:       ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741126e6d4.png)   看到没有,出现了ul-li中的效果了吧,如果再加一个margin-left是不是就跟ul-li一样了?   所以,ul-li为什么会默认显示成那种样子?——list-item才是“罪魁祸首”。 ## 4\. diplay:table   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741127ae60.png)        先给出一个快速思考题:和在容器尺寸上最大区别是什么(只是容器尺寸,不考虑内容区别)?请在两秒钟内说出答案。        答案是——div宽度和父容器相同,table宽度根据内容而定——即table具有“包裹性”。        举一个例子:    ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_5637411288794.png)        上图中,第一个div默认是block,宽度撑满整个页面。第二个div设置了display:table,宽度根据内容而定。这就是“包裹性”。而提到“包裹性”,又不得不让我想到float和absolute。具体怎样这里无法细说,后面的文章会详细讲到,有兴趣的可以先查着。        各位思考一下,你们做的项目中,哪些地方想要这种“包裹性”,而不是写死宽度或者用js计算宽度?如果想不到,我给大家截个图提醒一下。如下图:       ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374112949d5.png) ## 5\. display: table-cell   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374112a0154.png)   上面的截图中,我们看到了眼花缭乱的好多display,而且都是和table相关的。从字面意思上我们能看出,这是浏览器为了渲染一个完整的表格,而需要的许多显示方式(PS:看似一个简单的表格,渲染规则就这么多,这就提醒我们思考问题的严谨性和逻辑性)。   这里的大部分都是我们一直都不会用到的,用不到的了解即可,没必要深究。但是这个table-cell我们却能用得到,而且是用它来干一件很重要的事情——多列布局。   多列布局在css中有多重要就不用我说了吧,传统模式下大家都使用float来解决这一问题,但是float写出来的东西代码复杂,宽度调整不灵活,浏览器兼容性有问题。所以才有了新方案——table-cell,注意,IE6、7不行!   简单举个例子:       ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374112af333.png)   记得我刚学html时候,不会用div + css做多列布局,我就用table做多列布局。而今,你可以用table-cell,像用table一样做多列布局,做出来的效果和table做出来的效果是一模一样的。 ## 6\. body样式   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374112bdc89.png)   在body中,定义了两个样式,如上图。   第一,在默认情况下,页面中的文字不会直接顶到浏览器的边框,这就是因为默认样式为body设置了margin的缘故。这里需要注意个问题,不同浏览器为body设置的margin值可能不一样,因此大家都知道在css中用 *{margin:0} 来解决这一兼容性问题。   之前已经提到过,*选择器的级别要低于body标签选择器,但是*{margin:0}依然有效的原因,就是浏览器偷偷的做了优先级的手脚。如果在正常情况下,*选择器在遇到标签选择器时,是不会起作用的,及时它是“后加载”的。例如:       ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374112d1522.png)   第二,浏览器默认样式还为body设置了line-height,line-height这个值1.12是对英文比较友好,中文状态下就显得有点拥挤。Line-height是具有继承性的,在body中设置了,body下面所有的文字都会继承生效。   另外注意,这里的line-height: 1.12是一个相对值,即是文字高度的1.12倍。看到这里,我们在写line-height的时候,也一定要注意使用相对值,不要使用绝对值。如下:       ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374112ddb16.png)   上图是编写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。而且浏览器的默认样式也建议我们这样书写:   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374112e870d.png)   如上图,它设置了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的值。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374112f284b.png)   由于font-size和margin都是通过em来定义的,当em被修改时,不管字体大小修改,margin值也会跟着修改。这就是em好用之处!   从现在开始,与字体大小有关的css,全部都用em! ## 8\. 粗体和斜体   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741130d172.png)   上图中,标注了在整个html中,哪些元素设置了粗体/斜体。重点还是一个思维转换的问题:h1不是天生的粗体,而是设置了font-weight:bolder的样式而已……   这里需要提一句题外话:和有啥区别?和有啥区别?——不知道的话自己去查查吧,看到许多面试题考这个。 ## 9\. inline-block   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741131b2a8.png)   我相信最初学习使用inline-block的朋友都有一个困惑:inline-block到底是个啥?这时候如果你非常勤奋好学的话,你就去网上查资料,然后做各种实验。——精神可嘉,行为不可取。   学习还是有捷径的。看看浏览器默认样式告诉你的捷径:button、input就是inline-block!这样以点播你就会一下子明白,最起码能给你一个很好的形象的概念。看看button和input的表现,你就知道inline-block是什么样子了:   能被父容器居中、能设置高度宽度和margin、不会像table或div那样占一正行……——这就是inline-block——记得这是浏览器默认样式告诉你的。 ## 10\. 样式的疑问??   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374113276cd.png)   这里我提出自己的一个疑问。如上图,浏览器默认样式中,对br是这样设置的。 1. 这里的br:before{content:”A”},” A”并没有显示出来啊? 2. 的换行到底是谁导致的,是css还是浏览器?   希望知道答案的朋友,不吝赐教,给我和大家分享一下,谢谢了。 ## 11\. 总结   大家看着是不是很过瘾?反正我写着是挺过瘾的,虽然打字、写代码、画图很累,不过很有成就感——再有你们的鼓励就更好啦!   首先,我觉得浏览器默认样式非常重要,所有详细解读其中的重点,希望能给大家带来一些启发。没有解读到的就是一些比较容易理解的,或者不常用的(例如打印的样式设置),可以直接去看看源码。   其次,这里面也包含了我的一个疑问,很惭愧没有看明白。即便是一时半会儿解决不了,给别人分享一下,让你知道了一个疑问,对你来说,应该也是一个收获。
';

(3)——样式来源与层叠规则

最后更新于:2022-04-01 05:31:25

上一节《[css知多少(2)——学习css的思路](http://www.cnblogs.com/wangfupeng1988/p/4276321.html)》有几个人留言表示思路很好、继续期待,而且收到了9个赞,我还是比较欣慰的。没看过的朋友建议先去看看上一节。   这一节就开始实践上一节的思路! ## 1\. “层叠”的概念   CSS——层叠样式表,其中的“层叠”是什么意思呢?层叠就是浏览器对多个样式来源进行叠加,最终确定结果的过程。举一个简单的例子:    ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374111b1a8f.png)        上图中有两个样式来源,第一个是引用的css1.css,第二个是自己在style中编写的样式。“层叠”是个叠加的过程,可通过下图表示:    ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374111c3765.png)        上面用一个简单的例子来说明了层叠的过程,形象的体验一下。        **层叠是CSS****的核心机制**,理解了它才能以最经济的方式写出最容易改动的CSS,让文档外观在达到设计要求的同时,也给用户留下一些空间,让他们根据需要更改文档的显示效果,例如调整字号。——摘自《CSS设计指南》 ## 2.样式来源        上文中提到,css之所以有“层叠”的概念,是因为有多个样式来源。其实css的样式来源有5个,开发人员只能接触到后面3个。   ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374111d0bad.png) **第一,浏览器默认样式表**        当你不为html设置任何样式时,显示在浏览器上,b标签会显示粗体、p有纵向margin、h1字号比p大一倍……这是为什么呢?        因为浏览器自带一个默认的样式,如果html中没有为标签设置样式,则浏览器会按照自己的样式来显示。但是浏览器默认样式的级别是最低的,一旦有其他地方设置了标签样式,浏览器默认样式就会被冲掉。        注意,不同浏览器的默认样式有些地方是不一样的。例如,我们在写css时,都会首先设置 * {margin:0; padding:0;},这是为何?就是因为有浏览器兼容性问题。干脆,全部弄成0,这样各个浏览器就都统一了。        此处先把默认样式的代码贴出来 ,我们下一节专门解说默认样式,有很多值得玩味的地方。 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374111ddec5.gif) 浏览器默认样式  **第二,用户样式表**        在一些新闻网站中,经常看到可以设置字体大小的快捷菜单,例如下图就是搜狐新闻中的设置。    ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374111e9ad4.png)        这些是给一些有视觉障碍的人看的,反正我是没用过,我也有视觉障碍,不过我是通过近视镜来解决的。        其实浏览器也有这样的设置,例如chrome浏览器中,我们就可以设置字号和字体。       ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_5637411200c74.png)        用户在这里设置了字体和字号之后,它们会覆盖掉浏览器默认的样式。 **第三,引用的css文件**        引用css文件,大家应该都比较熟悉了。 **第四,中编写的样式代码**        中编写样式也都比较熟悉。 **第五,中编写的样式代码**        标签style属性中编写样式,也都用过吧。        后面这三种是咱们程序开发中比较常用的,这里就不多说了,不了解的朋友需要去补一补基础知识了。 ## 3.层叠的规则   由于样式的来源不同,浏览器在加载样式时,需要计算出最终的样式值,这样才能显示出正确的界面效果——浏览器会通过叠加和覆盖这两种方式来生成最终的样式值。        下面是举例说明:    ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_563741120d671.png)        如上图,不同来源的两个样式,第一个样式设置了font-weight,第二个没有,浏览器会把它叠加在一起,即浏览器会把各个零散的整合成一个整体。第一个样式color:red,第二个样式color:blue,浏览器会让后者覆盖前者,最终结果还是color:blue。        覆盖的默认规则是后者覆盖前者,但是又一个特殊情况——!important。    ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_56374112185bb.png)        如上图。虽然color:blue是后来者,但是它没有居上,因为前者color:red跟着!important。这就像得到一个尚方宝剑,有最高执行权,其他人统统让路,否则佛挡杀佛。 ## 4.总结   本文主要讲解了css的5个来源,以及浏览器叠加样式的过程和方法,这是学习css最基础的知识。下一节将带领大家一起看看浏览器默认样式到底是什么样子的,我们又能从其中学到些什么东西?其中有很多好玩的东东,敬请期待!
';

(2)——学习css的思路

最后更新于:2022-04-01 05:31:23

两周之前写过该系列的[第一篇](http://www.cnblogs.com/wangfupeng1988/p/4237249.html),其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程。现在初有成效,就开更吧。 ## 1. 一个段子   开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式。        记得之前看过一个段子,也可能是一件真事儿,这不重要。大体内容如下:一个香港的教授说:我们香港的大学和大陆的大学差的很远啊,大陆的大学连看门保安都懂得哲学,因为当你想要进入校园时,保安都会问你一个很哲学的问题“你是谁,你从哪里来,你到哪里去?”。        看完段子的第一反映肯定是很自嘲的笑了,笑了之后就忘了,该干嘛干嘛去了。        但是我觉得这句话确实有那么一点高达上的意思,虽然我不知道什么是哲学。“你是谁,你从哪里来,你到哪里去”,如果映射到我们这次CSS教程上,可以提这么几个问题: 1. CSS是什么,如何深入理解,它和html是个怎样的关系; 2. CSS有几种来源(5种来源); 3. CSS要干什么事情,如何结合html实现的;   看过我其他教程的朋友都知道我的原则:我要写东西,必须又一个我觉得很特别而且很合理、高效的思路,如果没有我宁可不写。大部分写CSS的人一上来可能写选择器,但是我不会那样。   闲话不说。要想从根上了解这些问题,还是先从浏览器开始吧。 ## 2. 浏览器是如何工作的   之前看过一篇文章,叫做《[浏览器的工作原理:新式网络浏览器幕后揭秘](http://ux.sohu.com/topics/50972d9ae7de3e752e0081ff)》。文章言简意赅的介绍了浏览器的工作过程,web前端程序猿最好了解一下。在此另外推荐一本书《WebKit技术内幕》,笔者很早就关注这本书,已列入近期的读书计划。        文章中的内容暂且不详细提,我们先“断章取义”的只说CSS相关的部分。  ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-11-02_5637411199870.png)        上图是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. …… ## 7. 下一步   下面的文章将会一步一步展开本文的描述,从实例和代码中慢慢道来。继续期待吧!
';

(1)——我来问你来答

最后更新于:2022-04-01 05:31:20

## 1\. 引言   各位前端或者伪前端(比如作者本人)的同志们,css对你们来说不是很陌生。比如我,在几年之前上大学的时候,给外面做网站就用css,而且必须用css。这样算下来也得六年多了,有些功能可能轻车熟路,有些功能可能需要上网查查,看似能应付得了工作的事情——我之前也是(现在工作上不做开发了,只是业余还写代码)。   世界上没有绝对简单的东西,只是我们认为它是简单的。就像我们公司现在的开发情况,开发的大环境刚刚转入B/S,开发领导以前都是用.net做C/S的,在我看来,他们就觉得js、css就是那么回事儿,没多高深。但是我还是抱着敬畏的态度,买了一本《CSS设计指南(第三版)》,不管自己会的,还是不会的,我都统统看一遍。书邮回来之后,我花了三个晚上看完了。我有个习惯,就是做一件事情一定要又一个结果,不能觉得自己脑子里明白了就算了,一定要写出来,甚至做出例子来才算完。于是乎,就写几篇博客呗。利己利人。   下面我把在看书过程中遇到的自己认为比较重要的(掌握不牢固)或者之前不懂的,都先列出来,出几个题目,各位看官可以试着想想。如果您都会了,那您基础很牢固,没得说;如果你有些不会的,着急你就赶紧自己查查答案,不着急你就等着我后面的博客介绍。   闲话说了很多,现在开始! ## 2\. 问题 >[info]**01\. 有些浏览器不完全支持css3,现在可以用哪个工具去检测浏览器是否支持,以及支持哪些项?**   提示:`Mo****zr` >[info]**02\. 常用的html标签,它们的display属性一般默认为block和inline。有哪些常用标签的display不是block和inline,这些标签显示的时候和block/inline有何区别?**   提示:table,input, textarea >[info]**03\. 是否用过@import?** (比较简单) >[info]**04\. 一个表格的第一行显示红色背景,最后一行显示蓝色背景,中间行使用灰色/白色间隔的背景,如何写?**   提示:结构化伪类(比较简单) >[info]**05\. 伪元素 ::before、::after 是否用过?都是在哪些地方用的?**   提示:清除浮动、为一个div增加一个“三角”  重要  >[info]**06\. css——层叠样式表,其中的“层叠”该如何理解?  重要**   提示:层叠,即一层一层叠加起来,关键是知道一共有几层,每一层都是什么 >[info]**07\. 对“特指度(specificity)”了解多少,知道“I-C-E”的计算规则吗?  重要**   提示:参考http://www.cnblogs.com/netlyf/archive/2009/06/19/1506427.html >[info]**08\. 特指度理解不是很麻烦,关键是分析多个css选择符和计算麻烦。有一个简单的解决方案,四句口诀,叫做“查理版简单层叠要点”,是否了解?  重要**    提示:例如,“包含ID的选择符要胜过包含类的选择符...” >[info]**09\. 搜索“浏览器默认样式”,找到它,打开看看,里面是浏览器默认的所有样式,你是否都能看得懂。 重要**   提示:例如 display:table 和 display:block 有何区别? >[info]**10\. 在你开发的系统的第一个css文件的第一行,就要写上 `* {margin:0; padding:0}` ,这是为何?**   提示:浏览器兼容性(比较简单) >[info]**11\. 样式 p{margin-top:50px; margin-bottom:30px;} 将会导致p之间的垂直距离是多少?**   提示:垂直外边距……水平外边距……——比较简单的基础知识   **12\. “盒子模型”大家都了解了(不知道赶紧去恶补!!),盒子模型的width其实是指内容的宽度,不包括padding、border、margin。其实这样对我们做css布局是很不利的,有什么方法可以让width是全部的宽度?  重**要   提示:box-sizing(注意IE低版本的兼容性) >[info]**13\. float的一些影响会让我们经常哭笑不得(特别是初学者),其实了解了float的设计初衷,也许你就会理解这些东西。float的设计初衷是什么?**   提示:就简单的一句话…… >[info]**14\. float具有“包裹性”——例如:abc 和 abc 两者的宽度是不一样的,不信可以为 p 加上背景色试试。是否理解这种“包裹性”?试着想想,还有哪些元素(或css属性)也有这种“包裹性”?**  重**要**    提示:和第13问题有密切关系 >[info]**15\. float还有一个表象是“破坏性”,它会导致父元素高度塌陷,这个大家应该都知道吧?那么这是为何呢?另外,还有哪个css属性,也导致这种“破坏性”   重**要   提示:float和absolute都将导致元素脱离文档流   (针对13、14、15问题,可以参考教程[http://www.imooc.com/learn/121](http://www.imooc.com/learn/121)和[http://www.imooc.com/learn/192](http://www.imooc.com/learn/192),讲的很好,只是讲师的声音很有“磁性”,要忍耐住) >[info]**16\. css清除浮动有三种方法,是否知道。你平时是怎么清除浮动的?业内最常用的经典清除浮动样式是什么? 重要**   提示:搜索“clearfix” >[info]**17\. 相对定位relative如何理解,它和绝对定位absolute的最根本区别是什么?**   提示:一个在文档流内,一个在文档流外 >[info]**18\. “定位上下文”是否知道? 重要** >[info]**19\. 经典的网页三列布局如何实现?如果不考虑IE6、7,最好的实现多列布局的方式是什么? 重要**   提示:table-cell >[info]**20\. 是否用过inline-block,IE6、7如何兼容?**   提示:比较简单,百度即可 ## 3\. 结束   当前就总结了这么多问题,大家可以对照着问题想想答案。如果你觉得还有写比较重要的知识,可以给我留言,我将会考虑加入进来。   另外,接下来我将写一个关于css重点知识的简短的系列文章,以及结合我做过的wangEditor富文本框以及对bootstrap框架的了解,把本文这些问题介绍一下。近期工作很忙,更新起来可能会很慢,敬请期待吧!
';

介绍

最后更新于:2022-04-01 05:31:18

> 原文:http://www.cnblogs.com/wangfupeng1988/p/4325007.html 作者:王福鹏,开源项目——**[wangEditor](https://github.com/wangfupeng1988/wangEditor)**的作者。  《css知多少》系列就此完结了。常来光顾的朋友可能会觉得突然:css的知识点还有很多,怎么突然就完了,还没讲完呢?这样说是对的。不过**凡事都有一个定位**,如果盲目求多,定位模糊,那样就没有目的没有方向了。   我的身份不是前端开发人员,而是产品经理。我规划的产品是一款项目管理软件,我也是一个PMP。我深知一个项目一定要有目标、范围、进度和质量要求。一旦达到,项目即可结束,准备下一个项目的启动。我接下来,要继续优化我的富文本编辑器[wangEditor](https://github.com/wangfupeng1988/wangEditor)。还要把我之前写的《[深入理解javascript原型和闭包](http://www.cnblogs.com/wangfupeng1988/p/4001284.html)》做一次修订,录制成视频教程。另外,我还想录制一个MS Project的使用教程,发挥一下我PMP的作用。Project是一款非常强大的项目进度管理软件,但是真正能用得好的项目经理,并不多。   闲话不扯,书归正传。   《css知多少》的读者建议是了解css基础知识(或者刚刚入门),但是没有系统学习、归纳、总结过的人,还有那些整天忙于coding、bug、加班当饭吃的,而没有时间去看书学习的码工们。《css知多少》里虽然内容不多,但是都是我觉得应该讲的基础,那些不需要讲的基础我就没有讲。所以,如果你是css大牛,那你不必看了(来给我指正一下我也欢迎啊!);如果你css都没有入门,那你也不用看了,我是从来不会写入门教程的。   我的经历告诉我:学习有捷径。**学习的捷径之一就是多看看别人是怎么理解这些知识的**。举两个例子。如果你喜欢《水浒》,千万不要只读原著当故事看,一定要读一读各代名家的批注和点评,看他们是如何理解的。之前学C#时,看《CLR via C#》晦涩难懂,但是我又通过看《你必须知道的.net》而更加了解了。因为后者就是中国一个80后写的,我通过他对C#的了解,作为桥梁和阶梯,再去窥探比较高达上的书籍和知识。   ——《css知多少》也是一样的。 **最后,真诚的希望你能借助别人的力量来提高自己**。我也一直在这样要求我自己。
';