CSS的重点知识

一：字体属性设置

1：字体设置：分为中文字体设置和英文字体设置。英文字体主要有五种：Serif字体，San-serif字体，Monospace字体（等宽体），Cursive字体（草书体），Fantasy字体（奇幻体）

英文字体在各个window平台下的使用率：www.cssfontstack.com.（也称为web安全字体）

常用的中文字体：www.aoao.org.cn/blog/2008/03/font-chinese

2：font-famaily、font-size、font-style、font-weight都具有继承性

3：font简写时注意，必须写上font-size、font-famaily属性，而且是font-size必须在前面，如果加上font-style的话，必须在font-size前面加，切记不可调换顺序。

 

二：文本属性设置

1：文本文字默认大小为16px。

2：注意letter-spacing与word-spacing 的区别。letter-spacing字符之间的间距（汉字也算字符）。word-spacing 指的是单词之间的间距，以空格为分隔符。

3：最重要的一点，也是最容易混淆的一点。line-height设置行高。默认行高为22px，22px=16px+3px+3px。也就是默认文字大小加上文字上下各有3px的间距，这个3px系统按比例算得的，改变字体大小

      会引起改变。这个属性常常用于文字的垂直对齐，假如只有一行文字，只需要将行高设置为区域的高度即可，这样就达到了垂直居中的效果。

4：text-align与vertical-align属性。水平对齐很简单。说起vertical-align（垂直对齐属性），我们需要说到5条线。就像我们写英语单词差不多。首先是baseline基线，对应于我们写单词起步的底线。第二条是

      线是指有些小写字母比如y,g等等的底线。第三条指的是一些小写字母o,c，e等等的顶线，第四条是对于大写字母的线比如G，H等等顶线，最后一条是小写字母h的顶线。

      vertical-align默认的值为baseline，一旦设置text-top对应于第四条线，text-buttom对应于第第二条线，center对应于基线与第三条线的中央。

 

三：盒子模型

1：学习Web技术，一定要学会如何看盒子模型。盒子分为4层，最里面的一层称为填充层，主要放置内容的；第二层为padding内边距；第三层为border边框；第四层为margin外边距。

      box-sizing主要设置两个值，分别为content-box,border-box，默认为content-box。一旦改变为border-box，这会导致边框以内的大小不会在改变，一旦改变padding属性，只会引起填充层高和宽的变化。

2：垂直外边距的折叠问题：指的是两个相邻的兄弟元素各自设置外边距之后，他们之间的外边距不会累加，而是选择会发生重叠。

 

四：display属性

1：取值为inline时，改变高度和宽度不会引起变化（除了image之外），添加外边距也是无效的，可以将多行写成一行。常用于导航栏。

2：取值为block时，刚好与inline相反，它是一个元素会占据一行的空间，不论内容多少。

3：取值为inline-block时，结合了上面两种值的优点。可以改变高度和宽度，可以一行写。

3：取值为none时，内容和内容的大小进行回收了，可以达到隐藏的效果。

 

五：CSS的布局

1：float 属性。主要将上下排列的方式改为左右排列。但是有一个很大的缺点就是会脱离父元素的控制。比如<div>中有三个p元素，一旦全部设置为浮动，着会导致div没有了高度，相当于失效。

2：解决float的缺点的办法：1：向父元素添加overflow：hidden属性 

                                             2：让父元素也浮动起来

                                             3：清除方法；（一般在父元素中写clear：both清除左浮动和右浮动的的影响）

                                             4：添加伪元素（一般定义为类属性）：clearfix::after{content:"."; clear:both;  display:block ;visibility:hiddle; height:0}

3:CSS的定位（及其重要）

常用四个值（static,relative,absolute,fixed）

static:是非定位元素，是所有元素position的默认值。若两个区域重叠，可以使用z-index属性，也就是建议z轴，面对与我们，如果想要看到一个区域的全部范围，着只需要将z-index值设置大一些即可。

relative：相对定位元素（使用偏移量设置）

absolute:绝对定位元素（它是相对最接近的相对定位父元素为参考物）

fixed:固定元素，其实与absolute差不多，主要区别在于浏览器视角的，即往下滑动，他将在固定在同一位置，永远看得见。

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。