近期学习css+javascript

CSS:

pc端

1 元素水平居中的方法 （元素width=w）

{

  position:absolute;

left:50%;

margin-left:-1/2(W);

}

2 position:

relative:相对位置 设置top等属性会生效

absolute:绝对位置 设置top等属性会生效

fixed:固定位置 设置top等属性会生效

static:默认布局 设置top等属性不会生效

3、display:

inline:行内元素 不换行

block:块元素 会换行

inline-block: 兼具inline与block 可以理解为内部inline 但是以block块元素影响其他外部元素

4、清除浮动

overflow:hidden;

或者 clear:both;

5、两栏布局 左边div固定 右边div宽度自适应

 .left{

float:left;

width:200px;

margin-right:-100%;

}

.right{

float:left;

width:100%;

}

.right_content{

margin-left:200px;

}

webapp端

1 移动端meta:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">   //编码

<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>

<meta name=”apple-mobile-web-app-capable” content=”yes” />  // 离线应用的另一个技巧     

<meta name=”apple-mobile-web-app-status-bar-style” content=black” />  // 隐藏状态栏        

<meta content="black" name="apple-mobile-web-app-status-bar-style" /> //指定的iphone中safari顶端的状态条的样式        

<meta content="telephone=no" name="format-detection" />       //告诉设备忽略将页面中的数字识别为电话号码      

<meta name="Author" contect="Mr.peng"/ >

解释：

width -             //  viewport 的宽度 （范围从200 到10,000，默认为980 像素）

height -            //  viewport 的高度 （范围从223 到10,000）

initial-scale -     //  初始的缩放比例 （范围从>0 到10）

minimum-scale -    //   允许用户缩放到的最小比例

maximum-scale -    //   允许用户缩放到的最大比例

user-scalable -    //   用户是否可以手动缩 (no,yes)

2 flex

display:-webkit-flex;

display:flex;

3 浏览器前缀，适用兼容性写法

-moz-  Firefox

-webkit- Chorme/safari

-ms- IE

1. -o- Opera