整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
lt;!DOCTYPE html>
<html lang="en">
?head>
<meta charset="UTF-8" />
<title?Document?/title>
</head>
<body>
<script>
var a=prompt(“請(qǐng)輸入一個(gè)數(shù)字”)；
var b=prompt(“請(qǐng)輸入另一個(gè)數(shù)字")；
a=parseInt(a);
b=parseInt(b);
if (a?b)
{
console. log (a) ;
｝
else
console. log (b) ;
</script>
</body>
</html>
、PX\EM\PT單位介紹
px單位名稱為像素，相對(duì)長(zhǎng)度單位，像素（px）是相對(duì)于顯示器屏幕分辨率而言的國(guó)內(nèi)推薦；
em單位名稱為相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸，國(guó)外使用較多；
pt單位名稱為點(diǎn)（Point），絕對(duì)長(zhǎng)度單位一般老版本的table使用長(zhǎng)度大小單位但是現(xiàn)在基本上沒(méi)有使用。
html單位簡(jiǎn)短介紹：
Px 像素Pixel；相對(duì)長(zhǎng)度單位。
Pt 點(diǎn)（Point）；絕對(duì)長(zhǎng)度單位
Em 相對(duì)長(zhǎng)度單位，這里em與html標(biāo)簽的"EM"拼寫完全相同，而這里em作為單獨(dú)文本單位。
1. 以前IE無(wú)法調(diào)整那些使用px作為單位的字體大小,但現(xiàn)在幾乎IE都支持 在這里也推薦使用PX作為單位;
2. 國(guó)外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em作為字體單位;
3. Firefox能夠調(diào)整px和em，但是96%以上的中國(guó)網(wǎng)民使用IE瀏覽器(或內(nèi)核)。
px像素(Pixel)。相對(duì)長(zhǎng)度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的，QQ截圖也是使用PX作為長(zhǎng)度寬度單位。
em是相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。
二、html單位對(duì)比案例
1、簡(jiǎn)單小例：
Width:300px 寬度為300像素
Width:300pt 寬度為300點(diǎn)
Width:300em 寬度為300相對(duì)長(zhǎng)度
以上我們?cè)O(shè)置相同數(shù)值的不同單位實(shí)例
2、對(duì)文字設(shè)置不同長(zhǎng)度em px pt單位看看效果：
CSS代碼：
HTML代碼：
3、單位長(zhǎng)度對(duì)比說(shuō)明圖
html px pt em單位案例對(duì)比圖
三、em與px換算
任意瀏覽器的默認(rèn)字體高度16px（16像素）。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡(jiǎn)化font-size的換算，需要在css中的body選擇器中聲明font-size=62.5%，這就使em值變?yōu)?16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說(shuō)只需要將你的原來(lái)的px數(shù)值除以10，然后換上em作為單位就行了。
12px相當(dāng)于9pt長(zhǎng)度；
12px相當(dāng)于0.75em長(zhǎng)度；
9pt相當(dāng)于0.75em長(zhǎng)度；
一般我們使用em換算px較多
高級(jí)em與px換算：
任意瀏覽器的默認(rèn)字體高度16px（16像素）。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡(jiǎn)化font-size的換算，需要在css中的body選擇器中聲明font-size=62.5%，這就使em值變?yōu)?16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說(shuō)只需要將你的原來(lái)的px數(shù)值除以10，然后換上em作為單位就行了。
具體使用時(shí)候：
我們?cè)趯?duì)全體html標(biāo)簽聲明初始一次font-size=62.5%
如：
*{font-size=62.5%}
即可此后面布局可依據(jù)以下技巧進(jìn)行設(shè)置em單位
font-size:1.2em等于font-size:12px
font-size:1.4em等于font-size:14px
以此類推相當(dāng)于初始font-size=62.5%后，em與px單位就只有10倍差距，以便方便計(jì)算與設(shè)置em長(zhǎng)度數(shù)值使用。
四、em單位有如下特點(diǎn)：
1. em的值并不是固定的;
2. em會(huì)繼承父級(jí)元素的字體大小。
我們?cè)趯慍SS的時(shí)候如果要用em為單位，需要注意兩點(diǎn)：
1. body選擇器中聲明Font-size=62.5%;
2. 將你的原來(lái)的px數(shù)值除以10，然后換上em作為單位;
3. 重新計(jì)算那些被放大的字體的em數(shù)值。避免字體大小的重復(fù)聲明。
也就是避免1.2 * 1.2= 1.44的現(xiàn)象。比如說(shuō)你在#content中聲明了字體大小為1.2em，那么在聲明的字體大小時(shí)就只能是1em，而不是1.2em, 因?yàn)榇薳m非彼em，它因繼承#content的字體高而變?yōu)榱?em=12px。
但是12px漢字例外，就是由以上方法得到的12px(1.2em)大小的漢字在IE中并不等于直接用12px定義的字體大小，而是稍大一點(diǎn)。這個(gè)問(wèn)題 Jorux已經(jīng)解決，只需在body選擇器中把62.5%換成63%就能正常顯示了。原因可能是IE處理漢字時(shí)，對(duì)于浮點(diǎn)的取值精確度有限。不知道有沒(méi)有其他的解釋。
五、推薦網(wǎng)頁(yè)單位
所以為了單位換算錯(cuò)誤推薦使用PX（像素）作為網(wǎng)頁(yè)制作單位。
以上為大家介紹了px em pt單位，及換算方式，一般現(xiàn)在我們使用長(zhǎng)度單位都以px為長(zhǎng)度單位。這里我們也推薦使用以px（像素）為網(wǎng)頁(yè)的尺寸長(zhǎng)度單位，符合瀏覽器的像素單位，同時(shí)也為了方便計(jì)算長(zhǎng)度尺寸。
關(guān)于px pt em單位總結(jié)
1）、推薦px像素為單位：通常我們使用px（像素為單位）較多，其次是em單位，平時(shí)推薦大家以px為單位；
2）、我們的顯示屏分辨率以px像素為單位；
3）、我們QQ截圖時(shí)候也是以px像素單位。
三部分 附錄（因?yàn)闀簳r(shí)不支持插入超鏈接所以部分內(nèi)容無(wú)法顯示）
附錄一 DIV命名規(guī)范
附錄二 CSS精靈
a {
display:block;
width:200px;
height:65px;
line-height:65px; /*定義狀態(tài)*/
text-indent:-2015px; /*隱藏文字*/
background-image:url(button.png); /*定義背景圖片*/
background-position:0 0;
/*定義鏈接的普通狀態(tài)，此時(shí)圖像顯示的是頂上的部分*/
}
a:hover {
background-position:0 -66px;
/*定義鏈接的滑過(guò)狀態(tài)，此時(shí)顯示的為中間部分，向下取負(fù)值*/
}
a:active {
background-position:0 -132px;
/*定 義鏈接的普通狀態(tài)，此時(shí)顯示的是底部的部分，向下取負(fù)值*/
}
附錄三 一些tips解決方案
頁(yè)面優(yōu)化實(shí)踐
寫DIV+CSS 的一些常識(shí)
常用代碼片段
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
margin:0; padding:0;
}
body {
background:#fff;
color:#555;
font-size:14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
td,
th,
caption {
font-size:14px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight:normal;
font-size:100%;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style:normal;
font-weight:normal;
}
a {
color:#555;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
img {
border:none;
}
ol,ul,li {
list-style:none;
}
input,
textarea,
select,
button {
font:14px Verdana,Helvetica,Arial,sans-serif;
}
table {
border-collapse:collapse;
}
html {
overflow-y: scroll;
}
.clearfix:after {
content: ".";
display: block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {
*zoom:1;
}
<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>
table-layout: fixed; word-break: break-all;;border-collapse: collapse
<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”> <span style=”background:#f00; display:table-cell; vertical-align:middle;”> <input type=”button” value=”item1″ /> </span> </div>
filter:alpha(opacity=50); /*1-100*/ -moz-opacity:0.5; /*0-1.0*/ -khtml-opacity:0.5; /*0-1.0*/ opacity:0.5; /*0-1.0*/
white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
.fix{zoom:1;}
.fix:after{
display:block;
content:'clear';
clear:both;
line-height:0;
visibility:hidden;
}
一些總結(jié)
一些概念
學(xué)習(xí)從來(lái)不是一個(gè)人的事情，要有個(gè)相互監(jiān)督的伙伴，想要學(xué)習(xí)或交流前端問(wèn)題的小伙伴可以私信“學(xué)習(xí)”小明加群獲取2019web前端最新入門資料，一起學(xué)習(xí)，一起成長(zhǎng)！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
