1、visibility和display的区别：

visibility:visible;　　 显示
visibility:hidden;　　隐藏，但是保留元素所占的空间
display:block;        显示
display:none;        隐藏，不保留元素所占空间

2、margin和padding的区别：

margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。
padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。

（1）margin-left:10px; 左外边距
（2）margin-right:10px; 右外边距
（3）margin-top:10px; 上外边距
（4）margin-bottom:10px; 下外边距
（5）margin:10px; 四边统一外边距
（6）margin:10px 20px; 上下、左右外边距
（7）margin:10px 20px 30px; 上、左右、下外边距
（8）margin:10px 20px 30px 40px; 上、右、下、左外边距

（1）padding-left:10px; 左内边距
（2）padding-right:10px; 右内边距
（3）padding-top:10px; 上内边距
（4）padding-bottom:10px; 下内边距
（5）padding:10px; 四边统一内边距
（6）padding:10px 20px; 上下、左右内边距
（7）padding:10px 20px 30px; 上、左右、下内边距
（8）padding:10px 20px 30px 40px; 上、右、下、左内边距

3、border边框属性：

border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。

border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。

border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。

border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。

border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

例如：

边框各属性独立的样式进行CSS压缩合并
border-color:#000; border-style:solid; border-width:1px
可以简写为：
border:1px solid #000

左边框各属性独立的合并
border-left-color:#000; border-left-style:solid; border-left-width:1px
可以简写为
border-left:1px solid #000

上、下、左相同边框样式，右边无边框
border-left:1px solid #000; border-top:1px solid #000;border-bottom:1px solid #000;
简写为：
border:1px solid #000;border-right:0

向 div 元素添加圆角边框：

div{
    border:2px solid;
    border-radius:25px;
}

4、控制图片变色

下面代码的效果是鼠标滑过图片就变亮了，控制的是图片的透明度

 img {
 　　opacity:0.1;/*取值范围是0-1*/
 　　filter(alpha=10);/*取值范围是0-100*/
 }
 img:hover {
 ;
 　　filter(alpha=100);
 }

以下代码可以使图片变成灰白的，使用的是滤镜

 img{ /*图片置灰的滤镜*/
 　　-webkit-filter: grayscale(100%);
 　　-moz-filter: grayscale(100%);
 　　-ms-filter: grayscale(100%);
 　　-o-filter: grayscale(100%);
 　　filter: grayscale(100%);
 　　filter: gray;
 }

5、居中的实现

最外层的body设置text-align:center|left|right;里面的div设置margin:0 auto;可以实现水平居中，靠左，靠右
外层div设置text-align:center|left|right;里面的图片需设置margin:0 auto;可以实现水平居中，靠左，靠右
max-width:100%;max-height:100%;一起使用代表图片的宽高尺寸最大不能超过它所在的空间的宽高，即等比例压缩图片。

 <body>
     <div style="width:100px;height:100px;text-align:center;">
         <a href="">
             <img src="" style="margin:0 auto;max-width:100%; max-height:100%"/>
         </a>
     </div>
 </body>

使div里面的文字居中：
div设置text-align:center; 可以实现里面的文字左右居中
div设置 一个height，再设置一个line-height, 这两个值设置的一样就能实现里面的文字上下居中

 .ban{
       width:1000px;
       height:30px; /*值要一样，实现上下居中*/
       line-height:30px; /*值要一样，实现上下居中*/
       text-align:center; /*文字左右居中*/
       background:rgb(214, 209, 8); /*设置div的背景色*/
       color:rgb(94,94,94); /*设置字体颜色*/
       font-size:14px;  /*设置字号大小*/
       font-weight: bold;  /*设置字体加粗*/
       margin:auto; /*div居中*/
 }
<div class="ban"><span>累计180天充值100万以上以下设备任选其一！</span></div>

6、背景图片的设置

background-color 　　规定要使用的背景颜色。
background-position 　　规定背景图像的位置。
background-size 　　 规定背景图片的尺寸。
background-repeat 　　规定如何重复背景图像。
background-origin 　　规定背景图片的定位区域。
background-clip 　　 规定背景的绘制区域。
background-attachment 　　规定背景图像是否固定或者随着页面的其余部分滚动。
background-image 　　规定要使用的背景图像。
inherit 　　 规定应该从父元素继承 background 属性的设置。

对背景图片设置属性：background-size：cover;可以实现背景图片适应div的大小。
background-size有3个属性：
auto：当使用该属性的时候，背景图片将保持100% 的大小显示，不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时，图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。
cover：当使用该属性时，图片将被缩放至恰好能覆盖div，并且图片被隐藏的部分最少，这种属性在大图背景中应用比较广泛。这点比较难理解，需要结合实践理解。
contain：当使用该属性时，图片被缩放至最大且能被完全展示出来，但是由于图片的的尺寸比例与div的尺寸比例会有不同，所以当图片不能盖住div时，图片会自动平铺。

background: url(./images/logo.png) no-repeat;  no-repeat为不平铺。

js给DOM对象设置background 属性，在一个声明中设置所有的背景属性
Object.style.background=background-color background-image background-repeat background-attachment background-position
background-color 设置元素的背景色。
　　color-name
　　color-rgb
　　color-hex
　　transparent
background-image 设置背景图像。
　　url(URL)
　　none
background-repeat 设置背景图像是否及如何重复。
　　repeat
　　repeat-x
　　repeat-y
　　no-repeat
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
　　scroll
　　fixed
background-position 设置背景图像的起始位置。
　　top left
　　top center
　　top right
　　center left
　　center center
　　center right
　　bottom left
　　bottom center
　　bottom right
　　x% y%
　　xpos ypos

7、人民币价格的显示

 <div font-family="Arial;">
     <span>¥20.0</span><!--这种方式在不同浏览器可能显示的不一样-->
     <span>&yen;20.0</span><!--推荐这种使用实体符号的写法-->
 </div>
 <div style="text-decoration:line-through">10000元</div><!--划掉价格，一般用于显示原价-->

效果图：

8、光标形状的控制

例子：style="cursor:pointer;"
cursor 属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。

CSS使用总结的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  10. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. (IOS)BaiduFM 程序分析

    本文主要分享下楼主在学习Swift编程过程中,对GitHub上的一个开源app BaiduFM的研究心得. 项目地址:https://github.com/belm/BaiduFM-Swift 一.项 ...

  2. UIView画虚线边框

    //fatherView加虚线边框 -(void)boundingRectangleForView:(UIView *)fatherView{ CAShapeLayer *borderLayer = ...

  3. Pivot C# WPF 代码添加PivotItem

    PivotItem new_PivotItem = new PivotItem();//新建Pivotitem ListView new_ListView = new ListView();//新建l ...

  4. Inside Flask - flask 扩展加载过程

    Inside Flask - flask 扩展加载过程 flask 扩展(插件)通常是以 flask_<扩展名字> 为扩展的 python 包名,而使用时,可用 import flask. ...

  5. 关于缓存中Cookie，Session，Cache的使用

    文章来源:http://canann.iteye.com/blog/1941173 以前实现数据的缓存有很多种方法,有客户端的Cookie,有服务器端的Session和Application. 其中C ...

  6. svg学习（五）ellipse

    <ellipse> 标签 <ellipse> 标签可用来创建椭圆.椭圆与圆很相似.不同之处在于椭圆有不同的 x 和 y 半径,而圆的 x 和 y 半径是相同的. <?xm ...

  7. Eclipse中使用自己封装的jar包的过程

    在包名上右键,选择Export"" 经过上面的步骤,成功导出了可运行jar包,下面在另一个自己的工程里引入这个jar包 最终效果如下:可见包已经可以正常使用了!! 运行自己的jar ...

  8. overflow:hidden---清除浮动，隐藏溢出

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...

  9. session跟cookies区别

    Session和Cookie的使用总结: Session和cookie都是asp.Net中的内置对象,至于他们有什么区别,在这里就不在多说,现在来说说一些比较实用点的东西: 我们知道网站都有一个后台管 ...

  10. 从出租车司机到大BOSS的转型之路

    来深圳之前,曾有人这样告诉我:在深圳千万不能以貌取人,打扮不起眼,也许他转身开的座驾就是宝马.奔驰;不管一个人多么邋遢俗气,也别瞧不起人家,也许他的手提袋里就是成捆的人民币现金;不管一个人打扮的多么土 ...