浏览器兼容及css3属性基础
来源:互联网 发布:3dmax mac 编辑:程序博客网 时间:2024/04/29 22:08
浏览器兼容问题解决方法
1.特殊符号
下划线:IE6及以下版本能识别星号:IE8,9,10不能用!important:火狐,IE7能识别 -----------------------结合资料掌握
2.条件注释法:
a.在IE下生效 <!--[if IE]>内容<![end if]-->b.在IE6下生效 <!--[if IE6]>内容<![end if]-->c.在IE6及以上版本下生效 <!--[if IE]>内容<![end if]-->d.在IE下生效 <!--[if gte IE6]>内容<![end if]-->e.在IE8下生效 <!--[if!IE8]>内容<![end if]-->f.非IE下生效 <!--[if!IE]>内容<![end if]-->
css常用选择器集合
.div 选择 class="div" 的所有元素。 #div 选择 id="div" 的所有元素。 * * 选择所有元素。 p 选择所有 <p> 元素。 div,p 选择所有 <div> 元素和所有 <p> 元素。 div p 选择 <div> 元素内部的所有 <p> 元素。 div>p 选择父元素为 <div> 元素的所有 <p> 元素。div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。[target] 选择带有 target 属性所有元素。 [target=_blank] 选择 target="_blank" 的所有元素。d p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。 p:before 在每个 <p> 元素的内容之前插入内容。 p:after 在每个 <p> 元素的内容之后插入内容。 p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。 p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元 素。 p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。 p:nth-child(n) 选择属于其父元素的第n个子元素的每个 <p> 元素 p:nth-last-child(n) 同上,从最后一个子元素开始计数。 p:nth-of-type(n) 选择属于其父元素第n个 <p> 元素的每个 <p> 元素。 p:nth-last-of-type(n) 同上,但是从最后一个子元素开始计数。 p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。 :root 选择文档的根元素。 p:empty 选择没有子元素的每个 <p> 元素(包括文本节点)。 input:enabled 选择每个启用的 <input> 元素。 input:disabled 选择每个禁用的 <input> 元素input:checked 选择每个被选中的 <input> 元素。 :not(p) 选择非 <p> 元素的每个元素。 ::selection 选择被用户选取的元素部分。
CSS3边框属性
圆角边框
border-radius:1px 2px 3px 4px 表示边框的四个角左上,右上,右下,左下是以1,2,3,4px为半径的圆。border-radius:1px 2px 3px 4px/4px 3px 2px 1px 表示边框的四个角左上,右上,右下,左下是以1/4,2/3,3/2,4/1px为半径的椭圆,斜线前表示X方向半径,斜线后表示y方向半径。
阴影边框
box-shadow:inset 1px 2px 3px 4px black; inset代表内阴影,不写则代表外阴影1px代表x方向的阴影,正值为方向为右2px代表y方向的阴影,正值为方向为下3px代表阴影羽化程度值4px代表阴影延伸值 只能为正值black代表阴影颜色
图片边框
border-image:url() 30/40px stretch30代表切割的位置多少40px代表显示的边框宽度 也可以在边框宽度先设置好stretch代表填充方式拉伸,还有repeat平铺,round铺满
CSS3背景属性
background-clip 规定背景的绘制区域。
border-box 背景被裁剪到边框盒 即从边框往里显示背景图。 padding-box 背景被裁剪到内边距框 即从内边距框往里显示背景图。。 content-box 背景被裁剪到内容框 即从内容区域显示背景图。。
background-origin 规定背景图片的定位区域
(背景开始显示的起点定位,图片的大小不会变化)
padding-box 背景图像相对于内边距框来定位。 border-box 背景图像相对于边框盒来定位。 content-box 背景图像相对于内容框来定位。
background-size 规定背景图片的尺寸。
(通常可以用数值以及百分比来设置) 还需掌握: cover 扩大图片至每一个边都延伸至边框 contain 扩大图片有一边延伸至边框即可
加多张背景图片
加图片的顺序1,2.3.。。。n。则显示在最上层的是1,最下层的是n
文本属性
超出部分用...显示
text-overflow:clip
文本不换行
white-space:nowrap
文本自动换行
word-break:break-all或者word-wrap:break-all
文本阴影
text-shadow:2px 3px 4px black;2px代表x方向的阴影,正值为方向为右3px代表y方向的阴影,正值为方向为下4px代表阴影羽化值 black代表阴影颜色
0 0
- 浏览器兼容及css3属性基础
- CSS3新属性及兼容代码一览
- IE浏览器兼容CSS3新属性border-radius
- 浏览器兼容、CSS3 选择器
- CSS3浏览器兼容前缀
- CSS3 浏览器兼容
- css3浏览器前缀兼容
- CSS3属性兼容处理
- CSS3手机浏览器兼容情况
- 跨浏览器兼容css3样式
- 【CSS3】浏览器前缀兼容写法
- IE低版本浏览器兼容CSS3的属性的工具htc
- 浏览器兼容及解决
- 部分IE8及更低版本不兼容的CSS3样式属性及部分解决方案
- css3 阴影处理及兼容
- CSS3新增基础属性
- css3 animation基础属性
- Html5和Css3的基础标签及常用属性
- 表单元素
- Listview中几个注意
- No result defined for action com.xiao.action.Haha and result success
- 第一天代码2015-09-26
- js计时器
- 浏览器兼容及css3属性基础
- 关于view位移后无法获取点击事件的情况
- 谈面向对象编码的粒度
- Centos6环境下DNS服务器的搭建
- __name__指示模块应如何被加载
- 动画基础
- 电商、营销、移动互联网等专业词汇大全
- 第108讲:Akka中的Actor消息的处理、消息回复、消息转发学习笔记
- 软件测试基础知识整理