前端大本营

HTML5,CSS3,Responsive,资料站
 rem 使用CSS指定font-size的时候,我们经常使用[em]和[px],响应式设计的网站,所有的浏览器都已经对应CSS3,我们推荐使用其中的 rem 字体单位。

rem


和em非常相似,和em的区别在于他不继承父元素的值而只继承html根指定的值。简单的等式来解释的话,就是rem = root + em。 Em经常受到父元素的影响,子元素标签字体设定时,需要重复计算,非常麻烦。如果使用rem可以很简单的解决这个问题。

rem的使用方法


Html的font-size指定为62.5%的时候,10px(16*0.625 = 10),1rem = 10px。  rem 更容易理解的方法。  rem
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | font-size rem 化的妙用 智能机网站必备 Responsive 响应式页面的新成员已关闭评论

box-pack 说明

box-pack属性, 指元素内子要素横向配置指定时使用。<规定当框大于子元素的尺寸,在何处放置子元素。该属性规定水平框中的水平位置,以及垂直框中的垂直位置。> box-pack属性,box-orient属性指定要素的配置方向。也就是说水平配置的元素,适用于水平方向, 垂直配置的元素,适用于垂直方向。

属性值

start 标准方向, 第一个子元素左侧开始,其他空间配置后面的子要素。 (默认值) <对于正常方向的框,首个子元素的左边缘被放在左侧(最后的子元素后是所有剩余的空间)对于相反方向的框,最后子元素的右边缘被放在右侧(首个子元素前是所有剩余的空间)> end 标准方向, 最后的子元素右侧开始, 其他空间向左反方向配置。<对于正常方向的框,最后子元素的右边缘被放在右侧(首个子元素前是所有剩余的空间)。对于相反方向的框,首个子元素的左边缘被放在左侧(最后子元素后是所有剩余的空间)。> center 剩余空间,前后等分分配。<均等地分割多余空间,其中一半空间被置于首个子元素前,另一半被置于最后一个子元素后> justify 剩余空间,各子元素均等分配。 第一个子元素和最后一个子元素不分配空间, 只有一个子元素的场合,start的结果相同。<在每个子元素之间分割多余的空间(首个子元素前和最后一个子元素后没有多余的空间)。>
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> box-pack </title>
<style>
div.prefix_sample1 {
width:500px; height:100px;
background-color:yellow;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-pack:start;
-webkit-box-pack:start;
-o-box-pack:start;
-ms-box-pack:start;
}
div.prefix_sample2 {
width:500px; height:100px;
background-color:yellow;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-pack:end;
-webkit-box-pack:end;
-o-box-pack:end;
-ms-box-pack:end;
}
div.prefix_sample3 {
width:500px; height:100px;
background-color:yellow;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-pack:center;
-webkit-box-pack:center;
-o-box-pack:center;
-ms-box-pack:center;
}
div.prefix_sample4 {
width:500px; height:100px;
background-color:yellow;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-pack:justify;
-webkit-box-pack:justify;
-o-box-pack:justify;
-ms-box-pack:justify;
}

div.aka {background-color:red;}
div.midori {background-color:green;}
div.ao {background-color:blue;}
</style>

</head>

<body>
<h4>box-pack:start; </h4>
<div class="prefix_sample1">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

<h4>box-pack:end; </h4>
<div class="prefix_sample2">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

<h4>box-pack:center; </h4>
<div class="prefix_sample3">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

<h4>box-pack:justify; </h4>
<div class="prefix_sample4">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>
</body>
</html>
实例图  box-pack
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | box-pack 元素内子要素横向配置指定 —— CSS3 参考 框布局已关闭评论

box-flex-group 说明

box-flex-group属性, 指定元素元素伸缩比例优先顺序指定时使用。 box-flex属性值为1以上的自然数,这个数值决定伸缩的优先顺序,最优先的值为1。

属性值

数值
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> box-flex-group </title>
<style>
div.sample {
width:500px; height:100px;
background-color:yellow; padding:5px;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
}

div.prefix_aka1 {
background-color:red;
-moz-box-flex:1.0;
-webkit-box-flex:1.0;
-o-box-flex:1.0;
-ms-box-flex:1.0;
}
div.prefix_midori1 {
background-color:green;
-moz-box-flex:1.0;
-webkit-box-flex:1.0;
-o-box-flex:1.0;
-ms-box-flex:1.0;
}
div.prefix_ao1 {
background-color:blue;
-moz-box-flex:1.0;
-webkit-box-flex:1.0;
-o-box-flex:1.0;
-ms-box-flex:1.0;
}

div.prefix_aka2 {
background-color:red;
-moz-box-flex:1.0;
-webkit-box-flex:1.0;
-o-box-flex:1.0;
-ms-box-flex:1.0;
-moz-box-flex-group:1;
-webkit-box-flex-group:1;
-o-box-flex-group:1;
-ms-box-flex-group:1;
}
div.prefix_midori2 {
background-color:green;
-moz-box-flex:1.0;
-webkit-box-flex:1.0;
-o-box-flex:1.0;
-ms-box-flex:1.0;
-moz-box-flex-group:1;
-webkit-box-flex-group:1;
-o-box-flex-group:1;
-ms-box-flex-group:1;
}
div.prefix_ao2 {
background-color:blue;
-moz-box-flex:1.0;
-webkit-box-flex:1.0;
-o-box-flex:1.0;
-ms-box-flex:1.0;
-moz-box-flex-group:2;
-webkit-box-flex-group:2;
-o-box-flex-group:2;
-ms-box-flex-group:2;
}

</style>

</head>

<body>
<h4>子要素不指定box-flex-group</h4>
<div class="sample">
<div class="prefix_aka1">abcde</div>
<div class="prefix_midori1">abcde</div>
<div class="prefix_ao1">abcde</div>
</div>

<h4>子要素指定box-flex-group</h4>
<div class="sample">
<div class="prefix_aka2">abcde</div>
<div class="prefix_midori2">abcde</div>
<div class="prefix_ao2">abcde</div>
</div>
</body>
</html>
实例图  box-flex-group
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | box-flex-group 元素伸缩比例优先顺序指定 —— CSS3 参考 框布局已关闭评论

box-flex 说明

box-flex属性, 指定元素元素伸缩比例指定时使用。<规定框的子元素是否可伸缩其尺寸。> box-flex属性值为2,其内部子要素的值为1时,父元素是子元素伸缩的2倍 默认值为0, 为不伸缩,还有不能指定负数。

属性值

数值
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> box-flex </title>
<style>
div.sample {
width:500px; height:100px;
background-color:yellow; padding:5px;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
}

div.aka1 {background-color:red;}
div.midori1 {background-color:green;}
div.ao1 {background-color:blue;}

div.prefix_aka2 {
background-color:red;
-moz-box-flex:1.0;
-webkit-box-flex:1.0;
-o-box-flex:1.0;
-ms-box-flex:1.0;
}
div.prefix_midori2 {
background-color:green;
-moz-box-flex:2.0;
-webkit-box-flex:2.0;
-o-box-flex:2.0;
-ms-box-flex:2.0;
}
div.prefix_ao2 {
background-color:blue;
-moz-box-flex:3.0;
-webkit-box-flex:3.0;
-o-box-flex:3.0;
-ms-box-flex:3.0;
}

</style>

</head>

<body>
<h4>子要素box-flex不指定</h4>
<div class="sample">
<div class="aka1">abcde</div>
<div class="midori1">abcde</div>
<div class="ao1">abcde</div>
</div>

<h4>子要素box-flex指定</h4>
<div class="sample">
<div class="prefix_aka2">abcde</div>
<div class="prefix_midori2">abcde</div>
<div class="prefix_ao2">abcde</div>
</div>

</body>
</html>
实例图  box-flex
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | box-flex 元素伸缩比例指定 —— CSS3 参考 框布局已关闭评论

box-align 说明

box-align属性, 指定元素内子要素纵方向排列指定时使用。<规定框中子元素的显示次序。> 容器元素比子元素大很多的情况下,使用box-align属性,可以指定子元素的排序顺序,并且可以指定子元素如何表示。 还有,纵方向排列一说,可以解释为元素内子元素的配置方向默认值为水平,使用此属性后垂直方向进行排列。也可以使用 box-orient:vertical来设置子元素排列方向。

属性值

start 标准方向元素,各子要素上端沿着元素上端进行排列,余下的位置向下排序, 反方向元素的话,则沿着下端进行排序,余下的位置向上排序。<对于正常方向的框,每个子元素的上边缘沿着框的顶边放置。 对于反方向的框,每个子元素的下边缘沿着框的底边放置。> end 标准方向元素,各子要素下端沿着元素下端进行排列,余下的位置向上排序, 反方向元素的话,则沿着上端进行排序,余下的位置向下排序。<对于正常方向的框,每个子元素的下边缘沿着框的底边放置。 对于反方向的框,每个子元素的上边缘沿着框的顶边放置。> center 剩余空间,进行均等分配。<均等地分割多余的空间,一半位于子元素之上,另一半位于子元素之下。> baseline inline-axis和horizontal的场合,所有子元素baseline配置排列<如果 box-orient 是inline-axis或horizontal,所有子元素均与其基线对齐。> stretch 各子元素按照容器元素的高来自动排序(默认值)
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> box-align </title>
<style>
div.prefix_sample1 {
width:500px; height:100px;
background-color:yellow;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-align:start;
-webkit-box-align:start;
-o-box-align:start;
-ms-box-align:start;
}
div.prefix_sample2 {
width:500px; height:100px;
background-color:yellow;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-align:end;
-webkit-box-align:end;
-o-box-align:end;
-ms-box-align:end;
}
div.prefix_sample3 {
width:500px; height:100px;
background-color:yellow;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-align:center;
-webkit-box-align:center;
-o-box-align:center;
-ms-box-align:center;
}
div.prefix_sample4 {
width:500px; height:100px;
background-color:yellow;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-align:baseline;
-webkit-box-align:baseline;
-o-box-align:baseline;
-ms-box-align:baseline;
}
div.prefix_sample5 {
width:500px; height:100px;
background-color:yellow;
display:-moz-box;
display:-webkit-box;
display:-o-box;
display:-ms-box;
-moz-box-align:stretch;
-webkit-box-align:stretch;
-o-box-align:stretch;
-ms-box-align:stretch;
}

div.aka {background-color:red;}
div.midori {background-color:green;}
div.ao {background-color:blue;}
</style>

</head>

<body>
<h4>box-align:start;</h4>
<div class="prefix_sample1">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

<h4>box-align:end;</h4>
<div class="prefix_sample2">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

<h4>box-align:center; </h4>
<div class="prefix_sample3">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

<h4>box-align:baseline; </h4>
<div class="prefix_sample4">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

<h4>box-align:stretch; </h4>
<div class="prefix_sample5">
<div class="aka">abcde</div>
<div class="midori">abcde</div>
<div class="ao">abcde</div>
</div>

</body>
</html>
实例图  box-align
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | box-align 元素内子要素纵方向排列指定 —— CSS3 参考 框布局已关闭评论
智能机和台式机的页面中都有 click 事件,出于这个原因,如果你只使用click事件的话,PC机和智能机使用的程序可以是相同的。 然而,在智能机中click事件会出现稍微的延迟现象,在手机程序中很多时候必须需要实时反应。 这个时候我们怎么办? 智能机专用的事件使用 当发生click事件延迟的状况时,我们就有必要使用智能机专用的事件来处理。然而,智能机使用的事件在PC/MAC的浏览器上不能运行,因此,为了使PC/MAC及智能机都能够正常运行,我们必须先对程序在运行的平台进行判断,然后使用相应的事件来进行处理。
var andx,andy;
var touch_dev = false;
//判断使用设备
if (navigator.userAgent.indexOf('iPhone') &gt; 0 || navigator.userAgent.indexOf('iPod') &gt; 0&nbsp;&nbsp;|| navigator.userAgent.indexOf('iPad') &gt; 0&nbsp;&nbsp;|| navigator.userAgent.indexOf('Android') &gt; 0) {
&nbsp;&nbsp;touch_dev = true;
}
//PC添加事件 否则 智能机事件
if (touch_dev == false) {
&nbsp;&nbsp;canvas.addEventListener('click',click_event,false);
} else {
&nbsp;&nbsp;canvas.addEventListener("touchstart", and_start, false);
&nbsp;&nbsp;canvas.addEventListener("touchmove", and_move, false);
&nbsp;&nbsp;canvas.addEventListener("touchend", and_end, false);
}

function execlick(x,y) {
&nbsp;&nbsp;// 相当于单击事件的处理
}

function click_event(event) {
&nbsp;&nbsp;var rct = event.target.getBoundingClientRect();
 var x = event.clientX - rct.left;
 var y = event.clientY - rct.top;
&nbsp;&nbsp;execlick(x,y);
}

function and_start(event) {
&nbsp;&nbsp;var rct = event.target.getBoundingClientRect();
&nbsp;&nbsp;var x = event.touches[0].pageX - rct.left;
&nbsp;&nbsp;var y = event.touches[0].pageY - rct.top;
&nbsp;&nbsp;andx = x;
&nbsp;&nbsp;andy = y;
}

function and_move(event) {
&nbsp;&nbsp;var rct = event.target.getBoundingClientRect();
&nbsp;&nbsp;var x = event.touches[0].pageX - rct.left;
&nbsp;&nbsp;var y = event.touches[0].pageY - rct.top;
&nbsp;&nbsp;andx = x;
&nbsp;&nbsp;andy = y;
}

function and_end(event) {
&nbsp;&nbsp;execlick(andx,andy);
}
按照上面的代码,我们可以判断使用的设备是iphone/ipod/ipad/Android还是 PC系统,然后进行相应的事件处理。 此外,智能机的鼠标单击事件可以使用and_end事件,可是and_end事件发生时,为手指从屏幕上移开的时候,单击的位置不好控制,处于这个原因,在上面的代码中使用and_start/and_move事件来捕捉触摸位置,然后再以and_end事件最后的位置作为单击的位置使用。
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 本站原创 | HTML5中JavaScript click 及触摸技术初探(click事件)已关闭评论