1. 可以是 链接的下划线 去掉。
a {text-decoration: none}
position:absolute  绝对定位
position:relative 相对定位

 ie  图片失真

-ms-interpolation-mode
img {-ms-interpolation-mode:bicubic;}

class 在css中是用“.”, id 是用 “#” 。

px em pt单位区别:
px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的国内推荐;
em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸,国外使用比较多;
pt单位名称为点(Point),绝对长度单位一般老版本的table使用长度大小单位但是现在基本上没有使用。
1. 以前IE无法调整那些使用px作为单位的字体大小,但现在几乎IE都支持 在这里也推荐使用PX作为单位;
2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位;
3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核)。
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的,QQ截图也是使用PX作为长度宽度单位。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。[2]

before after  content  是三个 伪元素。

<!DOCTYPE html>
<html>
<head>
<style>
p:before
{
content:"台词:";
}
</style>
</head> <body> <p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p> <p><b>注释:</b>对于在 IE8 中工作的 :before,必须声明 DOCTYPE。</p> </body>
</html>

结果为:

ol  ul  li  解释。。

ol  是会有 编号的。例如

<div>
<ol>
<li>1111</li>
<li>2111111111</li>
<li>31111111111</li>
<li>4111111111</li>
</ol>
</div>

结果为:

ul 代码:

<div>
<ul >
<li>1111</li>
<li>2111111111</li>
<li>31111111111</li>
<li>4111111111</li>
</ul>
</div>

结果为:

如果 ul 加上style 样式的话,

<div>
<ul style="list-style:none;">
<li>1111</li>
<li>2111111111</li>
<li>31111111111</li>
<li>4111111111</li>
</ul>
</div>

结果为:

会没有前边的 点点。

奇数偶数<p>标签怎么设置不同的背景色。

<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(3n+0)
{
background:#ff0000;
}
</style>
</head>
<body> <h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
<p>第七个段落。</p>
<p>第八个段落。</p>
<p>第九个段落。</p> <p><b>注释:</b>Internet Explorer 不支持 :nth-child() 选择器。</p> </body>
</html>

结果为:

last-child ,frist-child  都是css style 样式。 odd 奇数    even  偶数

css中 有' > '是什么意思。 表示的是从属关系,只有儿子辈的适用该样式,孙子辈的不适用该样式。

打个比方div span{...}这样写,div下的不论是儿子辈的span还是孙子辈的span都应用样式;
也就是说,div下的所有span都有这个样式。 div>span{...}这样写,div下的只有儿子辈的span应用样式;
但是如果是这种情况<span>dddddd<span>aaaaa</span></span>孙子辈的span会继承儿子辈的span样式;
试的时候这样<p><span>aaaaa</span><!--2--></p>才是真正的孙子辈样式
ie6不支持。

浏览器兼容模式。

-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性 css:border-width:10px 5px 20px 1px ******意思********
上边框,右边距,下边距,左边距。(顺时针)

9. 文字上下 居中 css样式:

vertical-align: middle

css 集锦。的更多相关文章

  1. CSS集锦

    div内容自动换行:word-wrap:break-word;word-break:break-all;

  2. Matplotlib数据可视化(3):文本与轴

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

  3. CSS知识点集锦

      CSS知识点集锦 CreateTime--2016年9月29日09:43:10Author:Marydon UpdateTime--2017年3月21日08:03:13 2.CSS样式优先级问题 ...

  4. CSS动效集锦,视觉魔法的碰撞与融合(二)

    引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代 ...

  5. CSS特效集锦:视觉魔法的碰撞与融合(二)

    引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代 ...

  6. CSS Hack技术介绍及常用的Hack技巧集锦

    一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...

  7. CSS效果集锦(持续更新中)

    高亮光弧效果 使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下: 代码如下: <!DOCTYPE html> <html lang ...

  8. CSS 居中方法集锦

    记录收集纯CSS层面实现的水平.垂直居中方法可用于块级.行内快.内联元素以及文字图片等. 水平或垂直居中 1.1 text-align 1.2 margin 1.3 line-height 1.4 p ...

  9. CSS 问题集锦

    [1]让DIV中的内容居中 1.文字垂直居中,关键代码:height:100px;line-height:100px(两个值要相等) <div style="margin:0 auto ...

随机推荐

  1. Centos7下用命令下载jdk7及jboss-eap-6

    计划在南非的一台云主机上搭建一个web环境,首先需要在云主机上搭建我们指定版本的JDK和JBOSS. 在云上搭特定版本的环境,软件包传输是一件十分艰巨的任务.我先后尝试了:公司电信专线.公司联通专线. ...

  2. PHP的一些常用汇总

    1. 使用strcmp()函数[区分大小写] 和strcasecmp()函数按照字节比较.比较结果显示:前和后相同为0,前>后为大于0,前<后为小于0. 2. 格式化字符串:number_ ...

  3. 【PHP设计模式 02_JieKou.php】面向接口开发

    <?php /** * [面向接口开发] * */ header("Content-type: text/html; charset=utf-8"); /*共同接口--连接数 ...

  4. 以雅酷网为实例从技术上说说dedecms的seo优化要注意哪些?

    目前在做雅酷网 ,雅酷卡是雅酷时空公司的产品,我个人感觉用雅酷卡消费还是比较实惠的,而雅酷卡的特色便是雅酷健身卡,很多站长成天的趴电脑上,可以考虑办一张这样的卡,在周末的时候去健身中心活动活动,还是比 ...

  5. 原来样式改变不了(input type="file")

    label { background-color: #979fa8; color: #fff; display: inline-block; padding: .8rem 4rem; cursor: ...

  6. [算法][包围盒]球,AABB,OBB

    参考地址请看图片水印:http://www.cnblogs.com/iamzhanglei/archive/2012/06/07/2539751.html http://blog.sina.com.c ...

  7. 如何实现百度外卖APP个人中心头像"浪"起来的动画效果

    作为一个中午下班不肯离开工作岗位且勤奋工作的骚年来说,叫外卖就成了不可或缺的习惯.某日瞬间发现百度外卖的APP波浪效果很是吸引人.相比较其他的外卖APP,颜值略高些.(淘宝也有波浪的效果),遂就思考如 ...

  8. 2016年7月2日 星期六 --出埃及记 Exodus 14:29

    2016年7月2日 星期六 --出埃及记 Exodus 14:29 But the Israelites went through the sea on dry ground, with a wall ...

  9. IIS与Apache共用80端口方法[试用成功]

    然后假设apache服务器已经安装完成,打开httpd.conf配置文件,找到这些地方去掉#开启代理模块: LoadModule proxy_module modules/mod_proxy.so L ...

  10. ocruntime

    原作: http://www.jianshu.com/p/25a319aee33d 三种方法的选择 Runtime提供三种方式来将原来的方法实现代替掉,那该怎样选择它们呢? Method Resolu ...