前端学习——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

1，行内盒子，块级盒子及其他

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></td></tr>
            <tr><td>duck</td><td></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平级

２）表单布局中可以借助ｔａｂｌｅ