CSS总结1

新增:修改placeholder样式

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

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

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

3、居中布局设计:

方式1:margin:0 auto;

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

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

  #box{

      720px;

     position: relative;

     left: 50%;  

     border: 1px solid;

  }

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

  #box{

     720px;

     position: relative;

     left: 50%;  

     margin-left: -360px;

     border:1px solid;  

  }

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

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

  #left{

      220px;

     height: 200px;

     background-color: #09f;

     border:2px solid #06f;

     position: absolute;

     top:0;

     left: 0;

  }

  #right{

      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{

      20%;

     height: 200px;

     float: left;

  }

  #right{

     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 :  宽度  ||  栏目数    

      

      

原文地址:https://www.cnblogs.com/zhanghuiyun/p/5264948.html