css学习笔记一


一、inline,block与inline-block的区别
display: 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时提到。
与之对应的是
display: block; 分行显示
http://www.cnblogs.com/jdonson/archive/2011/06/10/2077932.html

inline-block
我相信最初学习使用inline-block的朋友都有一个困惑:inline-block到底是个啥?这时候如果你非常勤奋好学的话,你就去网上查资料,
然后做各种实验。——精神可嘉,行为不可取。
  学习还是有捷径的。看看浏览器默认样式告诉你的捷径:button、input就是inline-block!这样以点播你就会一下子明白,
最起码能给你一个很好的形象的概念。看看button和input的表现,你就知道inline-block是什么样子了:
  能被父容器居中、能设置高度宽度和margin、不会像table或div那样占一正行……——这就是inline-block——记得这是浏览器默认样式告诉你的。

初学者对于inline-block可能比较陌生,没关系,一步一步来。首先,你应该知道inline是什么样子的,就是一般的文字、图片;其次,
你应该知道block是什么样子的,一般的div就是;最后,inline-block顾名思义,它既有inline的特性,又有block的特性,大家可以想想
一般的button、input是什么样子的。那button举例子。我们在页面中输入若干个<button>,发现它们是“流”式排列的(
可以对比一下若干个<div>的排列方式)。但是针对一个button,我们还可以自定义修改它的形状,这样就有“块”的特征。
 因此,inline-block的特点可以总结为:外部看来是“流”,但是自身确实一个“块”。不知道大家理解也无?

二、清除
我们发现,clearfix 主要是用在浮动层的父层,而 clear 主要是用在浮动层与浮动层之间,和浮动层同一级,如果想要撑开父层的高度,
clear 就要放在最后。

三、相对定位relative如何理解,它和绝对定位absolute的最根本区别是什么?
一个在文档流内,一个在文档流外

http://www.cnblogs.com/zwl12549/archive/2007/04/19/719715.html

四、样式来源
1、内部样式
2、属性样式
3、引用样式
4、浏览器用户自定义样式
5、浏览器默认样式
注意,不同浏览器的默认样式有些地方是不一样的。例如,我们在写css时,都会首先设置 * {margin:0; padding:0;},
这是为何?就是因为有浏览器兼容性问题。干脆,全部弄成0,这样各个浏览器就都统一了。

五、样式显示结果
即浏览器会把各个零散的整合成一个整体。
样式都是后者覆盖前者,加上这个!important就不受影响(去干扰)

六、diplay:table
先给出一个快速思考题:<table>和<div>在容器尺寸上最大区别是什么(只是容器尺寸,不考虑内容区别)?请在两秒钟内说出答案。
答案是——div宽度和父容器相同,table宽度根据内容而定——即table具有“包裹性”。
上图中,第一个div默认是block,宽度撑满整个页面。第二个div设置了display:table,宽度根据内容而定。
这就是“包裹性”。而提到“包裹性”,又不得不让我想到float和absolute。具体怎样这里无法细说,后面的文章会详细讲到,有兴趣的可以先查着。
http://www.cnblogs.com/wangfupeng1988/p/4280801.html
这个table-cell我们却能用得到,而且是用它来干一件很重要的事情——多列布局。
多列布局在css中有多重要就不用我说了吧,传统模式下大家都使用float来解决这一问题,但是float写出来的东西代码复杂,
宽度调整不灵活,浏览器兼容性有问题。所以才有了新方案——table-cell,注意,IE6、7不行!

七、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的时候,也一定要注意使用相对值,不要使用绝对值。

八、em和px
大家在设置文字高度或者与文字有关的距离,如p的margin、line-heigt(上文刚讲完,不再赘述),会用em还是用px?
——反正我之前不熟悉css时候,都是用px。因为px是固定大小,一目了然。——当然,它也不利于扩展。
 因此,我们推荐大家用em。
em是什么?——em是一个浏览器识别的长度单位,但是它不是绝对的、固定的,而是相对的。大家都知道px是一个绝对的长度单位制,
它永远不会改变。浏览器默认情况下令1em === 16px。现在你知道为何p默认是16px了吧。而且你还知道了h1是p高度的两倍,
h2是p高度的1.5倍……(你知道的越来越多了。。。)
 当然,我们可以通过css修改1em的值。--》例子是通过改变字体大小来实现改变em的值。
由于font-size和margin都是通过em来定义的,当em被修改时,不管字体大小修改,margin值也会跟着修改。这就是em好用之处!
 从现在开始,与字体大小有关的css,全部都用em!

九、<b>与<strong>有什么区别?<i>和<em>有啥区别?
在用法上两个是没有区别的,浏览器默认都是给文字加粗,只不过<strong>更符合w3c标准,因为b是IE自创的嘛。 而且更为重要的是,
<strong>表示更为重要,而<b>只是简单加粗,搜索引擎,我这里不是说百度哈,会更看重<strong>里的内容,seo的人是深有体会的。

关于html标签中b和strong两个的区别,我也是今早上才注意的,以前都是混着用的,早上看书的时候才注意到这两个标签的区别。
用在网页上,默认情况下它们起的均是加粗字体的作用,二者所不同的是,<b>标签是一个实体标签,它所包围的字符将被设为bold(粗体),
而<strong>标签是一个逻辑标签,它的作用是加强字符的语气,一般来说,加强字符的语气是通过将字符变为bold(粗体)来实现的。
简单的说strong是web标准中xhtml的标签,strong的意思是“强调”;b是html的,b的意思是bold(粗体)。web标准主张
xhtml不涉及具体的表现形式,“强调”可以用加粗来强调,也可以用其它方式来强调,比如下划线,比如字体加大,比如红色,等等,
可以通过css来改变 strong的具体表现。并不是说有了strong,就淘汰了b,只是这个b很无辜,就因为自己表示的是字体加粗,恰巧跟strong默认
情况下强调的效果一致,其实这个strong完全可以定义成别的样式的强调效果,但是为了符合现在W3C的标准,还是推荐使用strong标签。

后一个和前一个差不多。
i:斜体文本。
em: 斜体文本 + 内容局部强调。
b:粗体文本。
strong:粗体文本 +内容全局强调。
1.i 和 b 仅用来使文本呈现粗体和斜体,区别其它文本,不会产生任何语义的变化。
2.em 是局部强调:从视觉上考虑,em 的强调是有顺序的,阅读到某处时,才会注意到,斜体文本满足这种视觉效果。
strong 是全局强调:strong 的强调是无顺序的,看见文档时,立刻就凸显出来的关键词句。粗体文本满足能满足这种视觉效果。
3.em 表示内容的着重点(stress emphasis);strong 表示内容的重要性(strong importance)。
4.strong 不会改变所在句子的语意;em 则会改变所在句子的语义。em 是句意强调,会引起语义变化。strong
是重要性强调,与局部或全局无关,局部强调也可以用 strong,强调的是重要性,不会改变句意。

十、选择器
1.标签选择器(*是特殊情况),可但标签,也可上下文多标签;
2.属性选择器(id和class都是属性,特殊的属性);
通用选择器 * 大家应该都比较熟悉了,最常用的就是 *{margin:0; box-sizing:border-box;}。
多标签
  多标签选择器一般和html上下文有关,它有以下集中分类
1、选择一个祖先的所有子孙节点,例如 div p{…}
2、选择一个父元素的所有直属节点,例如 div > p{…}
3、选择某一个元素紧挨着的兄弟节点,例如 li + li{…}
4、选择某一个元素的所有同胞节点,例如 span ~ a{…}
5、以上各种情况的组合应用(不要组合过于复杂,编码讲求可读性第一)

伪类和伪元素--见的多,不知道之前不明白
http://www.cnblogs.com/wangfupeng1988/p/4282954.html

十一、优先级别
这个计算叫做“I-C-E”计算公式,
I——Id;
C——Class;
E——Element;
还有一个重点要注意:!important优先级最高,高于上面一切。* 选择器最低,低于一切。
http://www.cnblogs.com/wangfupeng1988/p/4285251.html
属性设置样式级别高于id

十二、内边距,边框,外边距 即padding,border和margin--box-sizing好处
因此,在盒子模型中,我们设置的宽度都是内容宽度,不是整个盒子的宽度。而整个盒子的宽度是:
(内容宽度 + border宽度 + padding宽度 + margin宽度)之和。
盒子的宽度
为盒子模型设置宽度,结果只是设置了内容的宽度,这个不合理。如何解决这一问题?答案就是:box-sizing:border-box
div设置了box-sizing:border-box之后,300px的宽度是内容 + border + 边框的宽度(不包括margin)
<div style="margin:15px;padding:10px; border:5px solid red; width:70px; box-sizing:border-box">
yyyyyyyyyyyyyy
</div>
内容宽度是40px
没有设置box-sizing:border-box
内容宽度是70px
http://www.cnblogs.com/wangfupeng1988/p/4287292.html

十三、纵向margin的重叠
这里提到margin,不得不提一下margin的这一特性——纵向重叠。如下图,<p>的纵向margin是16px,那么两个<p>之间纵向的距离是多少?
  按常理来说应该是 16 + 16 = 32px,但是答案仍然是 16px。因为纵向的margin是会重叠的,大的会把小的“吃掉”(可以自己去实验)。

 样式 p{margin-top:50px; margin-bottom:30px;} 将会导致p之间的垂直距离是多少? 50px;
十四、float
破坏性——“坍塌”现象 就是 子元素脱离父元素,造成父元素高度变窄。被设置了float的元素会脱离文档流。
包裹性——”包裹“按内容大小。div设置了float之后,其宽度会自动调整为包裹住内容宽度,而不是撑满整个父容器。
注意,此时div虽然体现了包裹性,但是它的display样式是没有变化的,还是block。
体现包裹性的css样式还有:display:table、position:absolute
清空格——“清空格”这一特性的根本原因是由于float会导致节点脱离文档流结构。它都不属于文档流结构了,那么它身边的什么换行、
空格就都和它没关系的,它就尽量的往一边去靠拢,能靠多近就靠多近,这就是清空格的本质。(为什么float适合用于网页排版(俗称“砌砖头”))

清除float
我在这里介绍4中供大家参考
1.为父元素添加overflow:hidden
2.浮动父元素
3.通过在所有浮动元素下方添加一个clear:both的元素,可以消除float的破坏性。 (同级下方)
4.接下来的第四种方法是大家最需要掌握的,也是我推荐的,也是bootstrap正在用的——clearfix (父级上--设置一个class类)
我们定义一个.clearfix类,然后对float元素的父元素应用这一样式即可,非常简单吧?注意,你可能会搜出不同版本的clearfix,
有的代码比上图中的代码多,你不用理会它,就按照我的贴图的代码写就行。
  究其原理,其实就是通过伪元素选择器,在div后面增加了一个clear:both的元素,跟第三种方法是一个道理。

十五、 position
http://www.cnblogs.com/wangfupeng1988/p/4322680.html
position一共有四个可选属性:static/relative/absolute/fixed。其中static(静态定位)是默认值,
即所有的元素如果不设置其他的position值,它的position值就是static,有它跟没有它一样。
1.relative
relative会导致自身位置的相对变化,而不会影响其他元素的位置、大小的变化。这是relative的要点之一。
还有第二个要点,就是relative产生一个新的定位上下文,
2.absolute
http://www.imooc.com/learn/192
absolute元素脱离了文档结构。和relative不同,其他三个元素的位置重新排列了。只要元素会脱离文档结构,
它就会产生破坏性,导致父元素坍塌。(此时你应该能立刻想起来,float元素也会脱离文档结构)
absolute元素具有“包裹性”。之前<p>的宽度是撑满整个屏幕的,而此时<p>的宽度刚好是内容的宽度。
absolute元素具有“跟随性”。虽然absolute元素脱离了文档结构,但是它的位置并没有发生变化,还是老老实实的呆在它原本的位置,
因为我们此时没有设置top、left的值。absolute元素会悬浮在页面上方,会遮挡住下方的页面内容。
  最后,通过给absolute元素设置top、left值,可自定义其内容,这个都是平时比较常用的了。这里需要注意的是,
设置了top、left值时,元素是相对于最近的定位上下文来定位的,而不是相对于浏览器定位。
下文马上会讲定位上下文。
 但是有时候设置top、left值并不是定位的最佳解决方案。例如想要元素A紧跟在元素B的上方,可通过设置元素B为absolute,
然后调整B的margin值来确定,这样更有效率。
最后,再提几个小知识点。
设置absolute会使得inline元素被“块”化,这在上一节将display时已经说过;
设置absolute会使得元素已有的float失效。不过float和absolute同时使用的情况不多;
上文提到了absolute会使元素悬浮在页面之上,如果有多个悬浮元素,层级如何确定?答案是“后来者居上”
3.fixed
  其实fixed和absolute是一样的,唯一的区别在于:absolute元素是根据最近的定位上下文确定位置,而fixed永远根据浏览器确定位置。

定位上下文
 relative元素的定位永远是相对于元素自身位置的,和其他元素没关系,也不会影响其他元素。
fixed元素的定位永远是相对于浏览器边界的,和其他元素没有关系。但是它具有破坏性,会导致其他元素位置的变化。
absolute的定位相对于前两者要复杂许多。如果为absolute设置了top、left,浏览器会根据什么去确定它的纵向和横向的偏移量呢?
答案是浏览器会递归查找该元素的所有父元素,如果找到一个设置了position:relative/absolute/fixed的元素,就以该元素为基准定位,
如果没找到,就以浏览器边界定位。

posted @ 2015-07-06 16:06  山水中华  阅读(225)  评论(0编辑  收藏  举报