整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
覽器的兼容性越來越好，移動端基本是清一色的webkit，經(jīng)常會用到css的不同尺寸/長度單位，這里做個整理。
絕對單位
px : Pixel 像素
pt : Points 磅
pc : Picas 派卡
in : Inches 英寸
mm : Millimeter 毫米
cm : Centimeter 厘米
q : Quarter millimeters 1/4毫米
相對單位
% : 百分比
em : Element meter 根據(jù)文檔字體計算尺寸
rem : Root element meter 根據(jù)根文檔（ body/html ）字體計算尺寸
ex : 文檔字符“x”的高度
ch : 文檔數(shù)字“0”的的寬度
vh : View height 可視范圍高度
vw : View width 可視范圍寬度
vmin : View min 可視范圍的寬度或高度中較小的那個尺寸
vmax : View max 可視范圍的寬度或高度中較大的那個尺寸
運算
calc : 四則運算
實例：
h1 { width: calc(100% - 10px + 2rem)單位比例
1in=2.54cm=25.4 mm=101.6q=72pt=6pc=96px
詳細
絕對單位
px - Pixel 像素
像素 px 相對于設備顯示器屏幕分辨率而言。
div { font-size: 12px }
p { text-indent: 24px }pt Points 磅
1 pt=1/72 英寸
div { font-size: 10pt }
p { height: 100pt }pc Picas 派卡
十二點活字（印刷中使用的），相當于我國新四號鉛字的尺寸。
div { font-size: 10pc }
p { height: 10pc }in Inches 英寸
div { font-size: 10in }
p { height: 10in }mm Millimeter 毫米
div { font-size: 10mm }
p { height: 10mm }cm Centimeter 厘米
div { font-size: 10cm }
p { height: 10cm }q Quarter millimeters 1/4毫米
div { font-size: 20q }
p { height: 100q }相對單位
% 百分比
相對于父元素寬度
<body>
em Element meter 根據(jù)文檔計算尺寸
相對于當前文檔對象內(nèi)文本的字體尺寸而言，若未指定字體大小則繼承自上級元素，以此類推，直至 body，若 body 未指定則為瀏覽器默認大小。
<body>
rem Root element meter 根據(jù)根文檔（ body/html ）字體計算尺寸
相對于根文檔對象（ body/html ）內(nèi)文本的字體尺寸而言，若未指定字體大小則繼承為瀏覽器默認字體大小。
ex 文檔字符“x”的高度
相對于字符“x”的高度，通常為字體高度的一半，若未指定字體尺寸，則相對于瀏覽器的默認字體尺寸。
至于為啥是x，我TM也不知道。
ch 文檔數(shù)字“0”的的寬度
同上，相對于數(shù)字“0”的寬度。
一張圖解釋：
vh View height / vw View Width - 可視范圍
相對于可視范圍的高度和寬度，可視范圍被均分為 100 單位的 vh/vw；可視范圍是指屏幕可見范圍，不是父元素的，百分比是相對于包含它的最近的父元素的高度和寬度。
假設設備可視范圍為高度 900px，寬度 750px，則， 1 vh=900px/100=9px，1vw=750px/100=7.5px
。
vmin / vmax 可視范圍的寬度或高度中較小/較大的那個尺寸
假設瀏覽器的寬度設置為 1200px，高度設置為 800px， 則 1vmax=1200/100px=12px， 1vmin=800/100px=8px 。
如果寬度設置為 600px，高度設置為 1080px, 則 1vmin=6px, 1vmax=10.8px 。
假設需要讓一個元素始終在屏幕上可見：
.box {假設需要讓這個元素始終鋪滿整個視口的可見區(qū)域：
.box {em、rem 是實際生產(chǎn)中我們最常用到的單位，可以使用其配合媒體查詢改變 body 字體大小來實現(xiàn)響應式的設計，vh、vw、vmin、vmax也可以很方便地幫助我們控制響應尺寸，但實際的可控性可能不如前者，具體按照我們的業(yè)務需求去實踐吧！
小節(jié)基本要求：
要點：
首先將body.css文件引入到body.html中，body.css文件現(xiàn)在是空的，沒有寫任何代碼
從上上篇分析的網(wǎng)站結構可知，tbody對應的div標簽是最大的框，所以我們這樣來設置它的框。
右鍵運行一下，如圖：
可以發(fā)現(xiàn)什么都沒有，看我設置的代碼：
.tbody{ //最大的框①
background-color: rgba(61,176,203,0.15);
padding: 10px;
overflow: hidden; //這行可忽略,是細節(jié)
}
.tbody .is-main{ //其次框②
width: 85%;
margin: 0 auto; //邊框居中
}
tbody作為最大的框①，我給它設置了一件什么事？
tbody是沒有設置寬與高的，但是沒有寬與高不應該什么都沒嗎？為什么仍然有一個很長的長方形框框呢？
因為我設置了內(nèi)邊距padding，內(nèi)邊距就是邊框朝里面的距離。外邊距margin已經(jīng)講過了，它是邊框朝外的距離。這兩個是相對的！
內(nèi)邊距設置為10px，那么邊框就會朝里空出10px的空間出來。
我為什么不給最大的框①tbody設置寬和高？
一般開發(fā)中為了方便，最大的框是不設置寬和高的，它的大小是由其內(nèi)部的內(nèi)容決定的。
也就是說，它里面能放多少東西，它就能變多大。
其中框②is-main也是同樣的道理，我都不給它設置寬高，因為我們會在他們身體里填東西，它們的大小由里面的內(nèi)容決定。
右鍵運行一下，發(fā)現(xiàn)并沒有任何改變，如下圖：
看代碼：
.is-main .main-left{
width: 71%;
float: left; 向左浮動
}
.is-main .main-right{
width: 28%;
float: right; 向右浮動
}我對放內(nèi)容的左邊框與右邊框做了一件什么事情？
通過網(wǎng)站的樣式可以發(fā)現(xiàn)，左邊邊框較右邊邊框更寬。
瀏覽地址：https://ypt.ink/blog/index
所以，給left樣式設置寬度為71%; 給右邊right設置寬度為28%；
也就是說，現(xiàn)在邊框③也就是left已經(jīng)規(guī)定了寬度大小，邊框④也就是right也規(guī)定了寬度大小。
也就是說，兩邊框內(nèi)放的內(nèi)容不管再多，都不能超過我規(guī)定好的這個寬度。
我為什么不給left框與right框規(guī)定高度？
因為沒必要，還是像上面說的，它們多高不要由它們來決定，讓它們里面的內(nèi)容來決定。否則代碼就寫死了！這個很重要，不論是java還是前端代碼一旦寫成死代碼就意味著涼涼！
什么是向左向右浮動？
float:left 向左浮動的意思就是，讓left這個框③緊貼is-main邊框②的左邊邊框
float:right 就是緊貼著右邊邊框剩下的內(nèi)容放在下一篇吧，這一篇東西有點多了。
全棧攻城獅-每日更新原創(chuàng)IT編程技術及日常實用視頻。
主要內(nèi)容：這是HTML課程的第六課，在這節(jié)課程中主要講解一下HTML中body的屬性，以及表格元素。希望大家根據(jù)這個教程可以學習一下。
上節(jié)回顧
在上節(jié)中主要講解了超鏈接和圖片的知識點。上節(jié)請戳->網(wǎng)頁前端開發(fā)基礎教程05-網(wǎng)頁中插入圖片和超鏈接，界面更絢麗
當然講解的并不是很全面，只是把常用的HTML屬性進行講解了出來，在后期會進行做項目，到時候，直接回顧一下，馬上就能搞懂了。這次直接講解一下HTML中的body屬性以及表格元素。
PS：其實HTML這個東西很簡單，只需要根據(jù)對應的元素，學會標簽指的是什么就可以了，就和諜戰(zhàn)片中中的密碼本一樣，按照密碼本書寫對應的格式，寫上去就能直接顯示了。只是學會這種標簽的樣式而已。自己學習HTML也是可以的。最重要的還是進行實踐。
body的屬性
body是整個頁面的主體元素，我們把內(nèi)容寫入到body元素中，那應該如何設置主體的背景顏色、背景圖片呢？
下面就一一來講解一下。使用Sublime創(chuàng)建一個HTML文件。
設置背景顏色，屬性為bgcolor，值為RGB顏色或者顏色的英文單詞。
2.背景圖片設置，背景圖片照樣可以用路徑的方式寫入到HTML文件中。屬性為background例如：
當然body的屬性值，比較少，而且?guī)缀醪惶?，在以后的時候要使用CSS代替這些東西。
表格
表格在網(wǎng)頁中還是很常用的，比如在按照每行數(shù)據(jù)進行展示的時候，就需要用到表格啦。所以就需要學習一下表格應該如何寫。
OK，我們先建立一個最簡單的學生信息表：
其中table（表格）、tr（一行）、（一個單元格）。這三個時表格最基本的元素。并依次有個上下級嵌套的關系。
表格中的屬性
表格中有很多屬性，正是因為有了這些屬性，才讓表格無比強大。比如在老早的時候，風靡一時的Hao123就是使用表格進行制作的。OK在下節(jié)中咱們也會自己制作一個模仿的Hao123第一版，通過table制作。
border
border是邊框的意思，在以后的學習中你肯定會對這個單詞不陌生，因為這個單詞真的是太常用了。border有兩個值分別為0和1.0表示“沒有邊框”，1表示“有邊框”。
cellpadding:
這個表示的是表格的內(nèi)邊距，也就是表格的邊框到里面的內(nèi)容的距離。
數(shù)值越大，單元格的表框到內(nèi)容的距離越大。
cellspacing
這是單元格和單元格之間的距離，這個值越大，單元格之間的距離越大。
align：
align表示的是單元格的對齊方式，對里面的內(nèi)容進行水平的對齊，其值有三個分別為right（右）、center（居中）、left（左）。
colspan、rowspan：
這是兩個屬性，分別表示行的合并和列的合并。其值為數(shù)字，表示要合并的單元格：
還有其他幾個屬性例如：valign、bgcolor、width、height等在前課程中也講過了。
每天一個知識點，帶你邁向軟件編程大神，一起努力吧。下節(jié)課程，我們一起做一個Hao123的導航頁面。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
