CSS总结1

新增：修改placeholder样式

 ::-moz-placeholder{color:red;}              //ff19+
 :-moz-placeholder{color:red}　　　　　　 //ff18-
 ::-webkit-input-placeholder{color:red;}     //chrome,safari
 :-ms-input-placeholder{color:red;}          //ie10

1、内联元素，定义上下边界不会影响到行高

2、只有普通文档流中块框的垂直空白变才会发生空白边叠加，行内框、浮动框或者定位框之间的空白框是不会叠加的

3、居中布局设计：

方式1：margin：0 auto；

方式2：使用定位和负值空白边让设计居中

　　/*将容器的左边缘定位到页面的中间*/

　　#box{

　　width: 720px;

　　  position: relative;

　　  left: 50%;

　　 border: 1px solid;

　　}

　　/*让容器的中间居中*/

　　#box{

　　 width: 720px;

　　position: relative;

　　left: 50%;

　　margin-left: -360px;

　　border:1px solid;

　　}

4、两列右侧宽度自适应布局：设置左侧宽度，右栏不设置任何宽度值

5、三列布局中间列宽度自适应布局

　　#left{

　　width: 220px;

　　height: 200px;

　　background-color: #09f;

　　border:2px solid #06f;

　　position: absolute;

　　top:0;

　　 left: 0;

　　}

　　#right{

　　width: 200px;

　　height: 200px;

　　background-color: #09f;

　　border:2px solid #06f;

　　position: absolute;

　　top:0;

　　right: 0;

　　}

　　#mian{

　　height: 200px;

　　background-color: #09f;

　　border:2px solid #06f;

　　margin:0 204px 0 204px;

　　}

6、两列宽度自适应布局（注意要将整体设置为100%）

　　#left{

　　width: 20%;

　　height: 200px;

　　float: left;

　　}

　　#right{

　　 width: 70%;

　　height: 200px;

　　float: left;

　　}

7、overflow：visible  |　auto    |     hidden   |   scroll

　　visible  :不剪切内容也不添加滚动条

　　auto：该属性值为body对象以及textarea的默认值，在需要时剪切内容并添加滚动条

　　hidden：不显示超过对象尺寸的内容

　　scroll：总是显示滚动条

　　overflow-x以及overflow-y分别设置当前对象的内容超过其指定的宽度时、高度时的处理

8、背景控制：

1. background-origin:border |  padding   | content

border：从border区域开始显示背景

padding ：从padding区域开始显示背景

content：从content区域开始显示背景

1. background-clip:border-box  |   padding-box   |  content-box   |    no-clip

border-box:从border区域向外剪裁背景图像

padding-box：从padding区域向外剪裁背景图像

content-box：从content区域向外剪裁背景图像

no-clip：从border区域向外剪裁背景图像，与border-box的属性值一致

1. background-size：设置背景图片大小

　　　　length: 第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为 "auto"

　　　　percentage : 以父元素的百分比来设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为 "auto"

　　　　cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中

　　　　contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

9、字体样式控制：

1. font-style:italic（斜体） |  oblique（偏斜体）  |  normal（正常）
2. text-transform：capitalize（单词首字母大写） |  uppercase(单词全部大写)  |  lowercase（单词全部小写）
3. 段落垂直对齐：vertical-align：top（段落顶端对齐） |  middle（段落垂直居中对齐）  |   bottom（段落底端对齐）
4. 字间距：letter-spacing：1em；
5. text-shadow: h-shadow v-shadow blur color
6. text-overflow:设置是否使用一个省略标记（…）标示对象内的文本溢出

　　　　text-overflow:   clip（不显示，就是简单的裁切）   |   ellipsis（使用）

　　　　使用省略号掩藏的时候还需要另外设置white-space：nowrap    ；     overflow：hidden

　　　（white-space： pre 空白会被浏览器保留；nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止；pre-wrap 保留空白符序列，但是正常　　　　地进行换行；pre-line 合并空白符序列，但是保留换行符； normal 默认。空白会被浏览器忽略）

1. word-wrap：用于设置当前行超过指定容器的边界时候是否断开转行

　　　　normal：控制连续文本换行

　　　　break-word：内容将在边界内换行，如果需要，词内换行也会发生

10、图片对齐方式：

1. 图片的水平对齐设置:利用text-align属性设置，但其需要通过为其父元素设置定义的text-align样式来达到效果
2. 图片的垂直对齐，vertical-align

11、表单图像域：是指可以用在提交按钮上面的图片，该图片具有按钮的功能

　　<input type="image" name="image" src="">

12、用户界面resize：设置页面中元素的尺寸大小，用户可以进行调节

　　both:用户可以调节高度以及宽度

　　horizontal:用户可以调节元素的高度

　　vertical:用户可以调节元素的高度

13、css滤镜：filter：filter    name（parameters）

.alpha{

filter: alpha(Opacity=opacity,Finishopacity= finishopacity)

}

14、columns :  宽度  ||  栏目数