CSS使用总结
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>¥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使用总结的更多相关文章
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- ++i 与 i++ 区别
i++返回原来的值 ++i 返回i+1的值 但是i++ i的值也会增加1 但是返回还是原来的值 int i = 1; i = i++; System.out.println(i); 输出 1 i ...
- Oracle的Connect By理解
connect by中的条件就表示了父子之间的连接关系 比如 connect by id=prior pid,但如果connect by中的条件没有表示记录之间的父子关系那会出现什么情况? 常见的,c ...
- Android 高德地图No implementation found for long com.autonavi.amap.mapcore.MapCore
此篇博客最后更新时间写自2016.5.18.当下高德地图jar版本为3.3.1. 使用高德地图碰到此问题,纠结许久(接近4个多小时). 记录在此,希望遇到相同问题的读者可以有所借鉴. 错误截图: 导致 ...
- App_global.asax.pdb: 另一个程序正在使用此文件，进程无法访问。
页面修改后,浏览报错,信息如下. 编译错误 说明: 在编译向该请求提供服务所需资源的过程中出现错误.请检查下列特定错误详细信息并适当地修改源代码. 编译器错误消息: CS0042: 创建调试信息文件“ ...
- 使用 robotframework 自动化测试系列 二 -----环境搭建
环境搭建是测试人员基础,本质都是不难的,按照流程和步骤一步步做,遇到问题不要担心,解决的问题越多,你理解的也就越多. 1. 安装python环境,python现在有python2 和python3.由 ...
- javascript中的自增与自减
一直都对自增与自减的执行顺序有点糊涂,今天查了资料,来总结一下 a++(a--),就是指当时计算a,当下一次使用这个变量的时候才执行++或者-- ++a(--a),就是指当时就计算++或者-- 例1: ...
- 十九、Java基础--------IO流之字节流
在上一篇文章中介绍了IO体系以及一些基本概念和字符流的相关应用,本文着重介绍字节流的相关操作. 字节流 它的操作与字符流类似,可以参与字符流的定义.读取.写入.处理异常的格式,只不过是处理的数据不同, ...
- 怎样将GB2312编码的字符串转换为ISO-8859-1编码的字符串？
String s1 = "你好"; String s2 = new String(s1.getBytes("GB2312"), "ISO-8859-1 ...
- Java虚拟机学习（2）：垃圾收集算法
跟踪收集器 跟踪收集器采用的为集中式的管理方式,全局记录对象之间的引用状态,执行时从一些列GC Roots的对象做为起点,从这些节点向下开始进行搜索所有的引用链,当一个对象到GC Roots 没有 ...
- 公历和农历转换JS代码
<!-- function CalConv(M) { FIRSTYEAR = 1936; LASTYEAR = 2031; LunarCal = [ new tagLunarCal(23, 3, ...