前端学习——css实用技术

一，css控制文本样式

文本相关的css属性有很多，包括：

color;font-size;font-weight;text-transform(大小写);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的间隙，同时，这个特性不能被继承。

还有一些伪类：：first-letter;:first-line;

列表相关的属性主要包括：

list-style-style;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碰到一起，甚至一个元素处在另一个元素里面时候，margin就会发生折叠。例如：当元素的bottom margin碰到另一个元素的top margin时，就可能出现一些怪异的算术，此时浏览器不是把这两个边距相加，而是应用它们之间比较大的那一个。

想要解决这种现象，针对第一种情况，可以利用top padding或者bottom padding代替margin；针对第二种情况，如果是一个元素处在另一个元素里面，发生了边距折叠，可以在外围元素周围加上一点padding，或者添加一条border。

3,css3的新特性

css3的一些新属性：border-radius(边界圆角，对于这个属性正在试验当中，因此最好在前面使用一些浏览器的前缀);box-shadow;box-sizing(添加前缀，很有用的一个特性，是的元素多占的空间不用通过width,padding,margin计算，在响应式布局中很好用)；

4，元素高度，宽度设置

给元素设置height需要特别小心，该属性很适合用来控制包含图片的div高度，页面的横幅区域（高寒log，搜索框，导航条等）的高度，因为事先可以知道图片高度，但是最好不要用height设定包含文本的元素高度，因为用户一旦使用web浏览器放大了字号，文字的尺寸就会超出方框的高度。

按照css规定，除了图片元素外，所有的浮动元素都要设置宽度。

5，元素浮动与overflow

float有三个取值：left，right，none；overflow有四个取值：hidden,auto,hidden,visible

float可以使得元素移动到左边或者右边（left,right,none）;在这个过程中，浮动元素下方的内容会上移，包围浮动元素；web浏览器会将浮动的元素当做块状元素对待，因此不会碰到padding，margin等困扰行内元素的问题，

不过，注意的是，background和border等不能像其他网页元素一样浮动，要解决这个问题，需要给设置了在浮动下方跑动的背景或者边框的样式加上一条规则：overflow：hidden，该属性能够使任何延伸到浮动下方的背景和边框消失。

要想使得其他标签忽略浮动元素，比如想要版权声明一直显示在浏览器底部，或者避免多个浮动元素高低参差不齐的情况，使用clear属性（取值left，right，both，none）

 

三、css设置图片样式

css处理图片有两种方式<img>和background

img是行内元素，但是其某些特性，诸如width，padding，margin更类似于行内元素。

background相关的特性有：

background-repeat;

background-position(如果垂直方向的定位是bottom时，图片未必显示在浏览器的底部，当网页的内容比浏览器的窗口短的时候，就会出出现上述现象，此时，可以在样式表上加上,html(height:100%));

background-attachment:scroll/fixed.控制背景图片是否随着文本以及其他网页内容一起滚动。

background-origin,background-clip，background-size 这些都是css3的新特性。    

 

四、css设置表格

1）padding属性不能被继承，因此给<table>标签设置paddding没有意义。

2）浏览器一般会在表格的单元之间插入间隔，如果将border-sapcing属性值设置为0移除这部分多余的空间，那么在相邻边框接触的地方就会出现双边框线，border-collapse属性可以解决这个问题。