CSS基础知识(3)

标题字：字体、大小、颜色 

正文字：字体、大小、颜色 
重点强调：颜色、字体样式  

控制字体： 
指定字体：font-family:value1,value2;字体可写多个，中间用逗号隔开，字体间的优先级按照先读到哪个就用哪个，第一个字体没有会查找下一个字体，如果用户电脑里所有字体都没有，那么就按照默认的字体来。中文要加双引号，英文不要加。 
字体大小：font-size：value  单位可为px,em,pt等 
字体加粗：font-weight：normal/bold/value(克数)。默认情况下是不加粗的，如果想把默认是粗体的格式设置为不加粗，可以设置font-weight：normal； 
字体样式：font-style：normal/italic 设置是否斜体 
小型大写字母显示：font-variant：normal/small-caps;会把页面中所有的字母在显示时都变成大写字母，但是字号会比正常要小的。  

字体选择的原则：如果是中文，就用中文字体。标题或大字号的字用微软雅黑。小字、正文字体用宋体。如果是英文或数字或英文符号，就用英文字体。Arial：类似于中文里的黑体，一般对应的中文设置为微软雅黑；Times：类似中文里的宋体。  

字体属性font：可以只写一个font将所有属性合在一起写，和background类似，但是background不需要注意顺序，但是font必须按照顺序来写，否则无法实现，另外color是不能写在里面的。为简写属性，包含6个值，可以按顺序设置： 
font:font-style font-variant font-weight font-size font-family;不设置的值，则使用默认设置。  

控制文本格式： 
文本颜色：color:value; 
文本排列text-align：left/right/center;此处的对齐是容器里面的内容物的对齐方式,不仅仅指文本，如果有图片也会对齐。 
文本修饰text-decoration：none/underline(下划线)/overline（上划线） 
行高line-height：value；行高 如果是一整段文字，可以设置line-height来控制行距；如果是单行文本，可以行高=容器高，让文字垂直居中。如果容器里的文字只有一行，可以将行高设置为容器大小，从而实现文本快速垂直居中，用该属性设置文本在容器中的垂直位置是好设置的，但仅限一行。 
首行文本缩进text-indent：value。是对每个段落的首行进行缩进.缩进值要根据已经设置的文字大小来决定，也可以设置为2em，表示两个字的缩进。如果在文字中加了<br/>换行，第二行是没有首行缩进的，要实现第二行也是首行缩进，需要使用<p>来实现换行。 
文本阴影text-shadow：h-shadow v-shadow blur color；类似于box-shadow 
letter-sapcing和word-spacing定义字间距，前者可以定义中英文，后者只能定义英文  

 溢出：

 处理空白：white-space：normal/nowrap（不换行）;决定是否自动换行   

 文本溢出：text-overflow：clip(截掉，默认)/ellipsis（在文本后添加...，需要与overflow：hidden配合使用）；

 注：1）text-overflow要与overflow:hidden;连用才有效果

        2）white-space:nowrap;汉字和英文遇到边框会自动换行，但是如果是英文单词很长很长遇到边框是不会换行的，下一个单词会正常显示在下一行

文本溢出只是针对英文长单词的，对中文不起作用。如果用传统的overflow：hidden来处理，就会直接把文字给截掉了，所以要用专门的文本溢出设置。将white-space设置为normal，英文依然是英文的处理，中文依然是中文的处理（英文不换行中文还是会自动换行），如果将white-space设置为nowrap，中文也会换行。如果设置text-overflow：clip，就会直接裁减掉，如果设置text-overflow：ellipsis,在后面会出现省略的三个点... 
注：要想让裁剪后的效果显示出来，必须将overflow设置为hidden  

长单词换行属性：针对的是英文 
word-wrap:normal（正常，长单词不换行）/break-word（该换行就换行，不管一个单词是否显示完整） 
文本换行：

 word-break（单词可以换行情况下使用）:normal(第一行显示不下会将单词自动换行)/break-all （不管单词是否完整，能塞几个就几个，塞不下的换行）/keep-all不换行

 注：关于word-break：

             normal：使用浏览器默认的换行规则

             break-all：允许在单词内换行

             keep-all：只能在半角空格或连字符处换行

html给table加边框单元格也有边框，border css给table加边框，只能给它加外框，不能给单元格加边框，要加内框需要使用父代选择器 
html里用cellspacing和cellpadding来控制内容间距 
css里用padding来控制  

css表格常用样式属性： 
1.边距属性：padding 
2.尺寸属性：width，height 
3.文本格式化属性 
4.背景属性：背景色或背景图像 
5.border属性：表格边框  

css中table的垂直方向对齐：vertical-align属性，取值和html中的align一样。margin在表格里不好用。  

border-collapse：边框合并，不是td的属性，是table的属性。在html中将padding设置为0边框还是比较粗的，但是在css中用border-collapse边框就比较细了，也就是单线边框效果。 
border-collapse：separate/collapse 
另外，如果设置单元格的border-bottom:transparent，底部的单元格边框还是存在的，因为border-collapse：collapse是一个单元格的下边框和另一个单元格的下边框重合了，但并不代表不存在了，设置了下边框不存在，但是另一个单元格的上边框还是存在的。  

border-spacing：边框边距，这个是表格中margin实现不了的。但是border-collapse：collapse时，是单线边框，此时border-spacing显示不出来的。border-spacing可以定义一个值也可以定义两个值，定义一个值表示所有的边距都是一样，如果定义两个不同值，表示横向边距和纵向边距不一样  

caption-side设置表格位置：caption- side:top（默认）/bottom 
在html中默认情况下caption是位于表头的，只在上面  

table-layout用来设置显示表格单元格、行、列的算法规则。在默认情况下，如果设置了单元格大小，但是当单元格里面的内容超过了单元格大小，表格会自动进行计算，此时单元格的大小还是会发生改变的。可以使用table-layout来解决，可取值：auto（默认，这种情况下效率比较低，因为要进行计算大小），fixed（规定多大就多大，大小不会发生改变，缺点是不够灵活）。如何选择table-layout的值要看项目的使用情况。另外在table-layout：fixed时，可以设置ouverflow:hidden，然后设置text-overflow为...，同时在单元格中添加title属性就能看到完整数字又能提高效率。table-layout属性是用来解决一长串数字或一长串英文单词时使用，对汉字不起作用，中文不会把单元格撑开的。  

td的边框色会覆盖掉table的边框色，但并不代表table的边框色不存在  

<th></th>是表头标签，默认情况下会居中并加粗  

span容器针对文字 
i容器针对小图标 
样式里内联元素不能定义宽和高，应该使用padding  

定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。普通流定位、浮动定位、相对定位、绝对定位。 
普通流定位： 
      页面中的块级元素框从上到下一个接一个地排列，每一个块级元素都会出现在一个新行中，如<p>元素，<div>元素。元素框之间的垂直距离是由框的垂直外边距计算出来的。 
      内联元素将在一行中从左到右排列水平布置，不需要从新行开始，可以使用水平内边距、边框和外边距调整他们的间距  

浮动定位：用来解决同一行中不能排两个块元素的问题。设置了浮动的元素会把没有设置浮动的元素给盖住。如果设置了浮动都为left，那么块元素会从左到右依次排列，如果两个元素都为right，那么将会从右到左依次排列。在外层元素没有设置高度时，默认会随着内容扩展，但是如果里面的元素都设置成了浮动，那么外层元素就没有高度了，此时可以将外层容器的overflow设置为hidden来解决问题。 
浮动元素的外边缘不会超过其父元素的内边缘，浮动元素不会互相重叠，浮动元素不会上下浮动。浮动元素中浮动的是框，里面的内容被挤出来还在原来的位置，不会与其他东西发生重叠。  

float属性语法：float:none/left/right; 
clear:left/right/both;清除元素，定义元素什么地方不允许出现浮动框。  

总结： 
浮动： 
  默认情况下，块元素是按照标准流排列的。如果给元素设置浮动，元素就会跳出标准流。 
  float：left 浮到左边    right 浮到右边 
  设置浮动的元素周围没有浮动的元素会上移与浮动元素元素重叠。浮动会卡住，影响浮动效果的因素很多，所以以实际效果为准。 
  当子元素全部为浮动元素时，父元素不会自动适应高度 
可以为父元素添加overflow：hidden解决该问题  

解决浮动造成的布局混乱：clear 
clear定义的是元素的哪一边不允许出现浮动元素，left、right、both