---恢复内容开始---







html{filter:expression(document.execCommand("BackgroundImageCache",false,true))

_background-image:url(about:blank);_background-attachment:fixed}


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}


table{border-collapse:collapse;border-spacing:0}


fieldset,img{border:0}


address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400}


::-moz-focus-inner{padding:0;border:0}

2：左右浮动的布局方式　　






<div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
// 需清浮动
  .main{ width: 400px; height: 254px; overflow: hidden;zoom:;}
  .left{ float: left; width: 120px; margin-right: 20px; height: 250px; border: 2px solid #f00;}
  .right{ height: 250px; margin-left:140px;  border: 2px solid #f00;}

// 不需要清浮动
 .main{ position: relative; padding-left: 120px; width: 280px; height: 254px;}
 .left{ position: absolute; left: 0px; top: 0px; width: 120px; height: 250px; border: 2px solid #f00;}
 .right{ margin-left: 20px; height: 250px; border: 2px solid #f00;}




3：css命名规范


　　header,container(容器),


mainNav(主导航)，subNav（二级导航），menu（菜单），sidebarA（左边栏），column（栏目），wrapper，banner（广告），


main（主体），footer，tag（标签），msg（提示信息），tip（小技巧），faqs（常见问题），keyword（关键词），forum（论坛）


　　html命名规范：Left.tpl,SerialTemplate:首字母大写


4：css


　　master.css(主要的css)，base.css(公用)，themes.css(主题)，print.css(打印)


5：单位（px,em）


　　5.1：IE无法调整用px作为单位的字体大小,国外的大部分网站能够调整的原因在于其使用了em作为字体单位,Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核).


　　5.2:像素px是相对于显示器屏幕分辨率而言的。em相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。将body{font-size:62.5%}则1em=10px，1.2em=12px；


　　5.3:但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。




---恢复内容结束---










html{filter:expression(document.execCommand("BackgroundImageCache",false,true))

_background-image:url(about:blank);_background-attachment:fixed}


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}


table{border-collapse:collapse;border-spacing:0}


fieldset,img{border:0}


address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400}


::-moz-focus-inner{padding:0;border:0}

2：左右浮动的布局方式　　






<div class="main">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
// 需清浮动
  .main{ width: 400px; height: 254px; overflow: hidden;zoom:;}
  .left{ float: left; width: 120px; margin-right: 20px; height: 250px; border: 2px solid #f00;}
  .right{ height: 250px; margin-left:140px;  border: 2px solid #f00;}

// 不需要清浮动
 .main{ position: relative; padding-left: 120px; width: 280px; height: 254px;}
 .left{ position: absolute; left: 0px; top: 0px; width: 120px; height: 250px; border: 2px solid #f00;}
 .right{ margin-left: 20px; height: 250px; border: 2px solid #f00;}




3：css命名规范


　　header,container(容器),


mainNav(主导航)，subNav（二级导航），menu（菜单），sidebarA（左边栏），column（栏目），wrapper，banner（广告），


main（主体），footer，tag（标签），msg（提示信息），tip（小技巧），faqs（常见问题），keyword（关键词），forum（论坛）


　　html命名规范：Left.tpl,SerialTemplate:首字母大写


4：css


　　master.css(主要的css)，base.css(公用)，themes.css(主题)，print.css(打印)


5：单位（px,em）


　　5.1：IE无法调整用px作为单位的字体大小,国外的大部分网站能够调整的原因在于其使用了em作为字体单位,Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核).


　　5.2:像素px是相对于显示器屏幕分辨率而言的。em相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。将body{font-size:62.5%}则1em=10px，1.2em=12px；


　　5.3:但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。


6：css选择器


　　<body data-spy="scroll"></body>:$('[data-spy="scroll"]')


　　$('a[href="#profile"]');$('a:first');$('a:last');$('a:eq(2)');


7：清除浮动：　　


　　.clearfix:after{ content:".",display:block;height:0;clear:both,visibility:hidden;_zoom:1;}


8:渐变：


　　.a{


　　filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffd1d1d1, endColorStr=#ffa1a1a1);


　　background:#a1a1a1;


　　background:-webkit-gradient(linear,left top,left bottom,from(#d1d1d1),to(#a1a1a1));


　　background:-webkit-linear-gradient(top,#d1d1d1,#a1a1a1);


　　background:-moz-linear-gradient(top,#d1d1d1,#a1a1a1);


　　background:-o-linear-gradient(top,#d1d1d1,#a1a1a1);


　　background:linear-gradient(to bottom,#d1d1d1,#a1a1a1);


　　text-shadow:0 0 1px rgba(185,21,74,.23)


}


.b{display:inline-block;*display:inline;*zoom:1;}


.a{ cursor:not-allowed}
												


											
css study的更多相关文章
	

    
								
  1. Css Study - 纵向Menu - By html and Css
		
    http://www.wikihow.com/Create-a-Dropdown-Menu-in-HTML-and-CSS HTML <div id="leftmenu"&g ...
    
		
    2. 
						
  2. Css Study - 横向MENU
		
    http://cssmenumaker.com/menu/tabbed-chrome-and-blue HTML <div id="topMenu"> <ul&g ...
    
		
    3. 
						
  3. Css Study - Top Menu in Header 横向间隔的菜单
		
    .shortcut ul li { display: inline; } CSS <style> ol, ul { list-style: none; } html, body, ul,  ...
    
		
    4. 
						
  4. CSS易混淆知识点总结与分享－定位与布局
		
    CSS定位有四种模式:static.relative.absolute.fixed,其它static是默认值,下面分别讲解下各自的特点: static:静态定位,处于动态布局流中,按照页面中的各元素先 ...
    
		
    5. 
						
  5. css less
		
    LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量.继承.运算.函数等,更方便CSS的编写和维护. LESSCSS可以在多种语 ...
    
		
    6. 
						
  6. CSS学习（一）
		
    /*</br> * color</br> * background-color background-image background-repeat background-po ...
    
		
    7. 
						
  7. less-符号之逗号，空格，父级选择器
		
    Less符号 逗号 example: .test() { box-shadow+: inset 0 0 10px #555; } .study { .test(); box-shadow+: 0 0  ...
    
		
    8. 
						
  8. Less-mixin判断（守卫）二
		
    mixin卫士--判断 或与且语法 且:()and() 或:(),() --且 examlpe: .test(@a) when (isNumber(@a)) and (@a>=5){ font- ...
    
		
    9. 
						
  9. Less-mixin判断（守卫）一
		
    mixin卫士--判断 类似于JavaScript的if/else example: .test(@a) when (@a>10){//当大于10 font-size:18px; } .test ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. ASP.NET  MVC  介绍
			
    ASP.NET分为WebForm(数据访问层 界面层 业务逻辑层)和MVC MVC : Model(模型)是应用程序中用于处理应用程序数据逻辑的部分. 通常模型对象负责在数据库中存取数据. View( ...
    
			
    2. 
						
  2. 四元数quaternion
			
    四元数的简单方法运用四元数在Unity3D中的作用就是拿来表示旋转. AngleAxis 创建一个旋转,绕着某个轴旋转,返回结果是一个四元数. 跟ToAngleAxis实现的是相反的功能. Angle ...
    
			
    3. 
						
  3. [原创.数据可视化系列之二]使用cesium三维地图展示美国全球军事基地分布
			
    基于浏览器的三维地图还算是一个比较高冷的东西,最主要的技术难点是如何在浏览器上 多快好省 的显示三维数据,很遗憾,还真的没有太好的的方案,只能说还有可行的方案. 很久之前用过skyline,使用CS居 ...
    
			
    4. 
						
  4. c++接口实现与分离（转载）
			
    原文地址:http://www.360doc.com/content/13/0218/10/8363527_266294787.shtml 良好的设计应该只暴露接口给用户,所有的实现细节对用户来说应该 ...
    
			
    5. 
						
  5. Windows版的各种Python库安装包下载地址与安装过程
			
    在用Python开发时(Windows环境),会碰到需要安装某个版本的第三方库,为了以后查找.安装方便,总结如下: windows版的各种Python库安装包下载地址:http://www.lfd.u ...
    
			
    6. 
						
  6. privoxy代理google浏览器访问缓慢
			
    取消--no-daemon <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PU ...
    
			
    7. 
						
  7. win10家庭版快速升级专业版
			
    win10家庭普通版升级专业版方法: 1.点击“开始”,选择控制面板. 2.点击“系统与安全”,选择“Windows Anytime Upgrade”.(或者:单击「开始」按钮,在搜索框中,键入any ...
    
			
    8. 
						
  8. IE11部分图片无法显示的兼容办法
			
    问题描述:写的网页在浏览器中测试兼容问题,FF,Chrome,Edge都完美兼容(包括Edge中的仿真),但是在IE11中却无法显示部分图片,并且报:DOM7009: 无法解码 URL 处的图像 错误 ...
    
			
    9. 
						
  9. ELK：kibana使用的lucene查询语法【转载】
			
    kibana在ELK阵营中用来查询展示数据 elasticsearch构建在Lucene之上,过滤器语法和Lucene相同 全文搜索 在搜索栏输入login,会返回所有字段值中包含login的文档 使 ...
    
			
    10. 
						
  10. em 换算
			
    1 ÷ 父元素的font-size × 需要转换的像素值 = em值 http://www.w3cplus.com/css/px-to-em
    
			
    11.