前端学习——css实用技术
一，css控制文本样式
文本相关的css属性有很多，包括：
color;font-size;font-weight;text-transform(大小写uppercase等);text-decoration(下划线等)；letter-spacing;word-spacing;text-shadow(css3新特性)；line-height;text-align;text-indent;
其中，text-align（left,right,center,justify）只能用于块元素，可以使得块元素中的所有内联元素集中（不仅仅限于文本）,也可以被任何嵌套的块元素继承;
vertical-align(top,bottom,middle)用于控制垂直方向的对其，注意这个对齐仅仅是指内容部分，如果单元格设置了padding，那么内容就永远不会真正向着底部或者顶部对齐，因为总会有一个padding的间隙，同时，这个特性不能被继承。当图片和文字相邻放置时，一般为图片添加vertical-align:middle．否则垂直方向有时候会出现意想不到的效果。
还有一些伪类：：first-letter;:first-line;
列表相关的属性主要包括：
list-style-type;list-style-position;list-style-image;
二、css控制marging,padding,和border
web浏览器把每一个标签就当做盒子处理，有两种盒子类型：block box(块级盒子)，inline box(行内盒子)，他们分别对应于两种标签类型：块级标签，和内连/行内标签。
块级标签：<p>,<h>,<div>,<table>,列表<ul>，<ol>,<dl>,<li>，<form>等，浮动元素
行内标签：<a>,<img>,<strong>等；
块内标签会独占一行，默认情况下，其宽度为自动填充满其父元素的宽度。
块级元素可以设置width,height(这个属性的设置要小心)，块级元素即使设置了width，依旧独占一行；行内元素设置width,height无效。
行内元素通常会忽略对块元素所做的诸多设置，包括width，height，和text-align;
此外，对于margin和padding的处理，浏览器对两种盒子的处理不同，
可以使用left/right padding,或left/right margin在行内元素的左边或者右边添加空格，但却无法利用top/bottom padding 或top/bottom margin来增加行内元素的高度。对于行内元素来说，竖直方向的margin看不到任何效果，竖直方向的padding虽然增大了行内元素的面积，但并没有和相邻元素拉开距离；不过<img>标签和其他内连元素不同，其width,padding和margin属性，更接近于块状元素。
可以使用display来更改这一属性，它有多种取值：inline,block,inline-block(这个取值可以使项目不独占一行，而是保持在行内，但是会把它当做方框处理，此时top/bottom margin/padding都能派上用场)，并且最好和这个设置结合使用：vertical-align:middle
2，边距折叠现象
每当垂直方向的margin碰到一起，当元素的bottom margin碰到另一个元素的top margin时，就可能出现一些怪异的算术，此时浏览器不是把这两个边距相加，而是应用它们之间比较大的那一个;想要解决这种现象，可以利用top padding或者bottom padding代替margin；或者为以上两个元素都创建BFC环境。
当一个元素处在另一个元素里面时候，给内部元素设置margin，该margin反而会出现在外部元素的上方。针对这种情况，可以在外围元素周围加上一点padding，或者添加一条border，也可以为两个元素都创建BFC环境。
3,css3的新特性
css3的一些新属性：border-radius(边界圆角，对于这个属性正在试验当中，因此最好在前面使用一些浏览器的前缀，该特性还可以设置椭圆边框);box-shadow;box-sizing(添加前缀，很有用的一个特性，是的元素多占的空间不用通过width,padding,margin计算，在响应式布局中很好用)；
4，元素高度，宽度设置
给元素设置height需要特别小心，该属性很适合用来控制包含图片的div高度，页面的横幅区域（高寒log，搜索框，导航条等）的高度，因为事先可以知道图片高度，但是最好不要用height设定包含文本的元素高度，因为用户一旦使用web浏览器放大了字号，文字的尺寸就会超出方框的高度。
按照css规定，除了图片元素外，所有的浮动元素都要设置宽度。
三、css设置图片样式
css处理图片有两种方式<img>和background；一般情况下，有潜在下载需求的使用img，如logo等。其他的一律建议使用background.注意background设置的图片不可被打印。
img是行内元素，但是其某些特性，诸如width，padding，margin更类似于块状元素。
background相关的特性有：
控制重复：
background-repeat;repeat/no-repeat/repeat-x/repeat-y。默认为repeat，因此该属性一般都需要重新赋值、
定位背景图片：
background-position:关键字/精确值/百分比。
其中，控制水平方向的关键字有left/center/right;控制垂直方向的关键字有：top/center/bottom。
精确值可以是px或者em。一个值指定图片左侧到容器左侧的距离，另一个值指定图片定边和样式定边的距离。所以，还没有办法实现从右侧和底侧的精准定位。此时，可以使用图片编辑软件在图片的右侧或者下方添加空格。
此外，还可以使用百分比进行定位。
固定图片：
bockground-attachment:scroll/fixed
告诉浏览器应该在相对于元素的边框，边距还是内容开始显示背景图片：
background-origin:border-box/padding-box/content-box
告诉浏览器在哪些区域显示图片：
background-clip:border-box(显示区域包含border)/padding-box(包含padding，不包含边框)/content-box(只显示在内容区域)
背景图片缩放：
background-size:可以是数值/百分比（相对于当前添加样式元素的长和宽）；也可以使用关键字
backgound-size:100% 100%;使得背景完全适应于当前元素的长和宽，图片本身的长宽比可能发生变化；
background-size:contain；图片的长宽比不变，进行尺寸（同时调整长和宽）调整以便适应元素的宽度或者高度；
background-size:cover；图片的长宽比不便，进行宽度或者高度的调整（只调整一边），以便适应元素；
background快捷属性：
background:backgound-image background-position background-repeat background-attachment background-color;
此外，css3还可以在一个元素的背景上添加多张图片，如：
background:url(img1.jpg) center top no-repeat,
url(img2.jpg) center bottom no-repeat.
background-position(如果垂直方向的定位是bottom时，图片未必显示在浏览器的底部，当网页的内容比浏览器的窗口短的时候，就会出出现上述现象，此时，可以在样式表上加上,html(height:100%));
此外，css3还可以使用渐变来设置背景色，这里不多赘述。
html5引入了新元素用于创建说明性的图片：figure和figcaption
<figure>
<img src="./img/images" alt="">
<figcaption>Figure1</figcaption>
</figure>
四、css装饰网站导航
1.与链接a相关的伪类选择器，注意顺序（LoVe HaTe）
a:link 未访问过的链接
a:visited 访问过的链接
a:hover 鼠标正悬停在上方的链接
a:active 正在被单击的链接（作用时间极短，可忽略）
2.创建链接导航
水平导航栏有两种方法：
1.inline-block方法。
a.为a设置display:block属性；b.为li添加display:inlin-block属性，设置合适的宽度。
该方法的优点是，可以通过为父元素设置text-align:center来实现导航栏水平居中。缺点是li之间存在缝隙。
2.浮动方法
a.为a设置display:block;b.为li设置宽度，或者为a添加padding；c.为li设置float:left,并未ul设置overflow:hidden
该方法的优点是：li之间没有空格，但是如果要居中对齐，需要其他手段
五、css设置表格
html中用来创建表格的标签非常多，包括：
<table>
<caption>table1</caption>
<colgroup>
<col id="brand"></col>
<col id="price"></col>
</colgroup>
<thead>
<tr><th>brand</th><th>brand</th></tr>
</thead>
<tbody>
<tr><td>chicken</td><td>34</td></tr>
<tr><td>duck</td><td>23</td></tr>
</tbody>
</table>
一般情况下并不需要用到上述所有标签，但是这些标签提供了许多有用的“钩子”。
1）padding属性不能被继承，因此给<table>标签设置paddding没有意义。可以给ｔｄ或者ｔｈ设置ｐａｄｄｉｎｇ．
２）表格单元中元素的居中可以采用
text-align:left/right/center(可以被继承)
vertial-align:bottom/top/middle/baseline（不能被继承）
2）浏览器一般会在表格的单元之间插入间隔，如果将border-sapcing属性值设置为0移除这部分多余的空间，那么在相邻边框接触的地方就会出现双边框线，border-collapse：separate/collapse，其中，collapse属性可以解决这个问题，并消除表格间的间隔，此时border-sapcing将不起作用。
六：css装饰表单
常见的表单元素有：
fieldset;legend;这两个元素用来集中相关的表单问题，ｌｅｎｇｅｎｄ会为一组域提供标签；
text fields（文本域）：包括input[type=text],input[type=password],textarea 大部分ｃｓｓ属性都可以用来修饰这些元素
buttons（按钮）:input[type=submit] 大部分ｃｓｓ属性都可以用来修饰这些元素
下拉菜单：select，浏览器自带的select一般有默认的样式，能够更改的程度有限，如果想要更大程度的改变下拉菜单的样式，可以使用ul列表来自定义下拉菜单
复选框和单选框：大部分浏览器不允许对这些元素设定格式
在表单布局中有以下几点值得注意：
１）表单元素一般和label结合使用，其ｆｏｒ属性指向对应元素的ｉｄ，checkbox,radio一般作为label的子元素存在，此时能够扩大对应字段获取焦点的区域（这点在有些布局中很有用）；其他表单元素则一般与label平级
２）表单布局中可以借助ｔａｂｌｅ
