整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
SS全稱“Cascading Style Sheet”，它的意思是“層疊樣式表”或“級(jí)聯(lián)樣式表”，CSS盒子模型是在網(wǎng)頁(yè)設(shè)計(jì)中用到的CSS技術(shù)中引用的一種思維模型。CSS盒子模型由內(nèi)容區(qū)、填充、邊框、空白邊組成。
由于CSS盒子模型是CSS中的一個(gè)重要概念，每一個(gè)元素都可以當(dāng)作一個(gè)矩形的盒子，這個(gè)矩形盒子可以描述元素所占空間內(nèi)容。CSS盒子模型更方便了設(shè)計(jì)者對(duì)網(wǎng)頁(yè)設(shè)計(jì)的整體把控。
用億圖圖示繪制CSS盒子模型十分簡(jiǎn)單，只需要找到指定模板即可，新手參考以下幾個(gè)步驟即可完成CSS盒子模型的繪制。
第一步：下載“億圖圖示”軟件，啟動(dòng)軟件界面，登錄賬號(hào)開(kāi)始操作。
第二步：點(diǎn)擊搜索框輸入“CSS盒子模型”，尋找符合設(shè)計(jì)要求的CSS盒子模型模板，點(diǎn)擊“使用”打開(kāi)CSS盒子模型模板。
第三步：點(diǎn)擊操作區(qū)的CSS盒子模型，根據(jù)自己的需要，在模板上修改各層次的注釋，在上方操作區(qū)更改字體為黑體，并更改字體大小。
第四步：雙擊CSS盒子模型中的“文本”方框，即可輸入CSS盒子模型中的文本，右側(cè)填充可以修改填充色、邊框顏色。
第五步：完成CSS盒子模型制作之后，點(diǎn)擊左上角的“保存”等按鈕，本次選擇保存為讓圖片格式，修改好分辨率等參數(shù)之后，CSS盒子模型就可以存儲(chǔ)在電腦中。
以上就是CSS盒子模型繪制方法的相關(guān)介紹。
當(dāng)有繪制CSS盒子模型的需求時(shí)，選擇億圖圖示這款國(guó)產(chǎn)矢量繪圖軟件，讓用戶繪圖事半功倍。
億圖圖示是一款與眾不同的矢量繪圖軟件，它采用了與其他繪圖軟件完全不同的思維模式設(shè)計(jì)開(kāi)發(fā)，在滿足了用戶基本的繪圖需求基礎(chǔ)上，開(kāi)發(fā)了模板套用功能，讓繪圖的效率提高許多，同時(shí)，在云存儲(chǔ)的加持下，億圖圖示用戶可以隨時(shí)隨地繪制作品。
使用億圖圖示繪制CSS盒子模型，直接套用一個(gè)模板，在原有基礎(chǔ)上修改、添加需要的元素，提升繪圖效率。
1、可靠軟件，值得信賴：億圖圖示經(jīng)過(guò)了九個(gè)大版本的升級(jí)，軟件可靠程度大幅增加，現(xiàn)在已經(jīng)擁有超過(guò)900萬(wàn)用戶，龐大的使用群體是億圖圖示經(jīng)受住市場(chǎng)優(yōu)勝劣汰的體現(xiàn)。
2、軟件資源庫(kù)強(qiáng)大，滿足繪圖需求：億圖圖示擁有數(shù)量龐大的矢量符號(hào)庫(kù)和模板庫(kù)，當(dāng)用戶繪圖時(shí)可以很輕松的找到自己需要的符號(hào)，即使符號(hào)很特殊在庫(kù)中找不到，用戶也可以自行繪制或者導(dǎo)入本地符號(hào)圖形、從庫(kù)外調(diào)用。
3、先用后付，性價(jià)比高：億圖圖示為新用戶謀福利，凡是新注冊(cè)的億圖圖示賬戶，均可長(zhǎng)期使用免費(fèi)基礎(chǔ)版本。當(dāng)有高級(jí)需求的時(shí)候，可以再升級(jí)購(gòu)買(mǎi)會(huì)員版。
人人都是產(chǎn)品經(jīng)理【起點(diǎn)學(xué)院】，BAT實(shí)戰(zhàn)派產(chǎn)品總監(jiān)手把手系統(tǒng)帶你學(xué)產(chǎn)品、學(xué)運(yùn)營(yíng)。
產(chǎn)品設(shè)計(jì)時(shí)細(xì)節(jié)是產(chǎn)品經(jīng)理最頭疼的問(wèn)題，一個(gè)button，一個(gè)鏈接都要考慮太多的細(xì)節(jié)問(wèn)題。作者整理了常見(jiàn)的一些功能設(shè)計(jì)問(wèn)題，一篇文章看懂這些功能設(shè)計(jì)。來(lái)學(xué)習(xí)吧。
鏈接也稱為超鏈接，所謂的超鏈接是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同網(wǎng)頁(yè)上的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序。而在一個(gè)網(wǎng)頁(yè)中用來(lái)超鏈接的對(duì)象，可以是一段文本或者是一個(gè)圖片。當(dāng)瀏覽者單擊已經(jīng)鏈接的文字或圖片后，鏈接目標(biāo)將顯示在瀏覽器上，并且根據(jù)目標(biāo)的類型來(lái)打開(kāi)或運(yùn)行。
鏈接可以是一個(gè)字或是一段字這樣的文本，也可以是一個(gè)按鈕，一張圖片，當(dāng)你點(diǎn)擊后跳轉(zhuǎn)到另一個(gè)目標(biāo)，當(dāng)你把鼠標(biāo)指針移到某個(gè)鏈接時(shí)會(huì)變成一個(gè)小手，當(dāng)然在手機(jī)上沒(méi)有這一特點(diǎn)。
文本樣式的鏈接一般在搜索引擎的網(wǎng)站呈現(xiàn)藍(lán)色字樣，大多會(huì)在下面加上下劃線以便識(shí)別，不過(guò)現(xiàn)如今考慮到不影響文本的可讀性與用戶體驗(yàn)，逐漸取消了下劃線。而在一些別的網(wǎng)站考慮到界面設(shè)計(jì)風(fēng)格各方面的因素而不用藍(lán)色。
谷歌的文本鏈接是藍(lán)色，沒(méi)有下劃線
百度的文本鏈接也是藍(lán)色，關(guān)鍵詞是紅色，有下劃線
而京東的文本鏈接有灰色，有白色，有黑色
按鈕樣式的鏈接比文本樣式的更容易識(shí)別，每一個(gè)按鈕都是一樣鏈接。
按鈕樣式鏈接
圖片樣式的鏈接可以是單獨(dú)的一張圖片，也可以是文字與按鈕一起組成一張圖片，只是鼠標(biāo)指針掃過(guò)圖片的任何一個(gè)部位都會(huì)變成小手。
如桌面彈出這種游戲小窗口的圖片式鏈接
由文字/圖/按鈕樣式一起構(gòu)成的一張圖片式按鈕，鼠標(biāo)可以點(diǎn)擊圖中任何一部位
鏈接打開(kāi)的方式有三種：第一種是在當(dāng)前頁(yè)面刷新跳轉(zhuǎn)，國(guó)外的網(wǎng)站大多是這樣的打開(kāi)式；第二種是在新標(biāo)簽頁(yè)面打開(kāi)鏈接，國(guó)內(nèi)大多采用這種；第三種是提示用APP打開(kāi)。當(dāng)然現(xiàn)在出現(xiàn)了一種新的打開(kāi)方式，那就是二維碼掃描。
提示用美拍APP打開(kāi)
按照連接路徑的不同，網(wǎng)頁(yè)中超鏈接一般分為以下3種類型：內(nèi)部鏈接，錨點(diǎn)鏈接和外部鏈接。
鏈接還可以分為動(dòng)態(tài)鏈接和靜態(tài)鏈接。動(dòng)態(tài)超鏈接指的是可以通過(guò)改變HTML代碼來(lái)實(shí)現(xiàn)動(dòng)態(tài)變化的鏈接，例如我們可以實(shí)現(xiàn)將鼠標(biāo)移動(dòng)到某個(gè)文字鏈接上，文字就會(huì)象動(dòng)畫(huà)一樣動(dòng)起來(lái)或改變顏色的效果，也可以實(shí)現(xiàn)鼠標(biāo)移到圖片上圖片就產(chǎn)生反色或朦朧等等的效果。而靜態(tài)鏈接，顧名思義，就是沒(méi)有動(dòng)態(tài)效果的鏈接。
與外部鏈接（即反向鏈接）相反，內(nèi)部鏈接是指同一網(wǎng)站域名下的內(nèi)容頁(yè)面之間互相鏈接。如頻道、欄目、終極內(nèi)容頁(yè)之間的鏈接，乃至站內(nèi)關(guān)鍵詞之間的Tag鏈接都可以歸類為內(nèi)部鏈接，因此內(nèi)部鏈接我們也可以稱之為站內(nèi)鏈接，對(duì)內(nèi)部鏈接的優(yōu)化其實(shí)就是對(duì)網(wǎng)站的站內(nèi)鏈接的優(yōu)化。
HTML中的鏈接，正確的說(shuō)法應(yīng)該稱作"錨點(diǎn)"，它命名錨點(diǎn)鏈接（也叫書(shū)簽鏈接）常常用于那些內(nèi)容龐大繁瑣的網(wǎng)頁(yè)，通過(guò)點(diǎn)擊命名錨點(diǎn)，不僅讓我們能指向文檔，還能指向頁(yè)面里的特定段落，更能當(dāng)作"精準(zhǔn)鏈接"的便利工具，讓鏈接對(duì)象接近焦點(diǎn)。便于瀏覽者查看網(wǎng)頁(yè)內(nèi)容。類似于我們閱讀書(shū)籍時(shí)的目錄頁(yè)碼或章回提示。在需要指定到頁(yè)面的特定部分時(shí)，標(biāo)記錨點(diǎn)是最佳的方法。
外部鏈接，又常被稱為：“反向鏈接”或“導(dǎo)入鏈接”，是指通過(guò)其他網(wǎng)站鏈接到你的網(wǎng)站的鏈接。
外部鏈接指的是針對(duì)搜索引擎，與其它站點(diǎn)所做的友情鏈接。高質(zhì)量的外部鏈接指：和你的網(wǎng)站建立鏈接的網(wǎng)站知名度高，訪問(wèn)量大，同時(shí)相對(duì)的外部鏈接較少，有助于快速提升你的網(wǎng)站知名度和排名的其他網(wǎng)站的友情鏈接。
如果按照使用對(duì)象的不同，網(wǎng)頁(yè)中的鏈接又可以分為：文本超鏈接，圖像超鏈接，E-mail鏈接，錨點(diǎn)鏈接，多媒體文件鏈接，空鏈接等。
鏈接是一種對(duì)象，它以特殊編碼的文本或圖形的形式來(lái)實(shí)現(xiàn)鏈接，如果單擊該鏈接，則相當(dāng)于指示瀏覽器移至同一網(wǎng)頁(yè)內(nèi)的某個(gè)位置，或打開(kāi)一個(gè)新的網(wǎng)頁(yè)，或打開(kāi)某一個(gè)新的WWW網(wǎng)站中的網(wǎng)頁(yè)。
鏈接在交互上一般會(huì)呈現(xiàn)4種狀態(tài)，即默認(rèn)狀態(tài)/懸停時(shí)狀態(tài)/點(diǎn)擊時(shí)狀態(tài)/點(diǎn)擊后狀態(tài)。比如谷哥網(wǎng)站的交互體驗(yàn)。如下圖：
點(diǎn)擊前
懸停時(shí)，下面浮現(xiàn)半透明線條
點(diǎn)擊時(shí)，有波紋暈開(kāi)的動(dòng)態(tài)效果
點(diǎn)擊后，下面線條粗
有時(shí)候是3種狀態(tài)，比如百度網(wǎng)和知乎應(yīng)用：
默認(rèn)狀態(tài)
點(diǎn)擊時(shí)鏈接變紅
點(diǎn)擊后鏈接變成紫色
IOS系統(tǒng)知乎應(yīng)用的3種狀態(tài)，而在Android系統(tǒng)沒(méi)有用力點(diǎn)擊這一狀態(tài)。
默認(rèn)狀態(tài)
點(diǎn)擊狀態(tài)
用力點(diǎn)擊會(huì)彈出預(yù)覽小窗口
有些時(shí)候只有2種狀態(tài)，如下圖谷歌網(wǎng)：
默認(rèn)和點(diǎn)擊后狀態(tài)一樣
鼠標(biāo)懸停時(shí)出現(xiàn)下劃線
默認(rèn)狀態(tài)
點(diǎn)擊時(shí)
而有時(shí)候比如在APP里有時(shí)候就一直只有一種狀態(tài)，也可以稱靜態(tài)鏈接，之前的可以稱之為動(dòng)態(tài)鏈接。在不同的使用場(chǎng)景會(huì)因?yàn)楫?dāng)時(shí)的情況選擇最合適的交互體驗(yàn)設(shè)計(jì)。有的情況下還會(huì)加上點(diǎn)擊的音效，使用戶體驗(yàn)更暢快，這在移動(dòng)端用的使用情況多一些。
總之鏈接是網(wǎng)頁(yè)不可缺少的構(gòu)成部分，每一個(gè)鏈接的呈現(xiàn)都是經(jīng)過(guò)深思熟慮的。
作者：潘瑤瓊（簡(jiǎn)書(shū)作者）
本文由 @潘瑤瓊 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
實(shí)，CSS就三個(gè)大模塊： 盒子模型 、 浮動(dòng) 、 定位，其余的都是細(xì)節(jié)。要求這三部分，無(wú)論如何也要學(xué)的非常精通。
所謂盒子模型就是把HTML頁(yè)面中的元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容器。每個(gè)矩形都由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。
看透網(wǎng)頁(yè)布局的本質(zhì)
網(wǎng)頁(yè)布局中，我們是如何把里面的文字，圖片，按照美工給我們的效果圖排列的整齊有序呢？
其實(shí)，行內(nèi)元素比如 文字 類似牛奶，也需要一個(gè)盒子把他們裝起來(lái)，雙標(biāo)簽都是一個(gè)盒子。有了盒子，我們就可以隨意的，自由的，擺放位置了。
看透網(wǎng)頁(yè)布局的本質(zhì)： 把網(wǎng)頁(yè)元素比如文字圖片等等，放入盒子里面，然后利用CSS擺放盒子的過(guò)程，就是網(wǎng)頁(yè)布局。
盒子模型（Box Model）
首先，我們來(lái)看一張圖，來(lái)體會(huì)下什么是盒子模型。
所有的文檔元素（標(biāo)簽）都會(huì)生成一個(gè)矩形框，我們成為元素框（element box），它描述了一個(gè)文檔元素再網(wǎng)頁(yè)布局匯總所占的位置大小。因此，每個(gè)盒子除了有自己大小和位置外，還影響著其他盒子的大小和位置。
盒子邊框（border）
邊框就是那層皮。 橘子皮。。柚子皮。。橙子皮。。。
語(yǔ)法：
border : border-width || border-style || border-color
邊框?qū)傩浴O(shè)置邊框樣式（border-style）
邊框樣式用于定義頁(yè)面中邊框的風(fēng)格，常用屬性值如下：
none：沒(méi)有邊框即忽略所有邊框的寬度（默認(rèn)值） solid：邊框?yàn)閱螌?shí)線(最為常用的) dashed：邊框?yàn)樘摼€ dotted：邊框?yàn)辄c(diǎn)線 double：邊框?yàn)殡p實(shí)線
盒子邊框?qū)懛偨Y(jié)表
表格的細(xì)線邊框
以前學(xué)過(guò)的html表格邊框很粗，這里只需要CSS一句話就可以美觀起來(lái)。 讓我們真的相信，CSS就是我們的白馬王子（白雪公主）。
table{ border-collapse:collapse; } collapse 單詞是合并的意思
border-collapse:collapse; 表示邊框合并在一起。
圓角邊框(CSS3)
從此以后，我們的世界不只有矩形。radius 半徑（距離）
語(yǔ)法格式：
border-radius: 左上角 右上角 右下角 左下角;
內(nèi)邊距（padding）
padding屬性用于設(shè)置內(nèi)邊距。 是指 邊框與內(nèi)容之間的距離。
padding-top:上內(nèi)邊距
padding-right:右內(nèi)邊距
padding-bottom:下內(nèi)邊距
padding-left:左內(nèi)邊距
注意： 后面跟幾個(gè)數(shù)值表示的意思是不一樣的。
外邊距（margin）
margin屬性用于設(shè)置外邊距。 設(shè)置外邊距會(huì)在元素之間創(chuàng)建“空白”， 這段空白通常不能放置其他內(nèi)容。
margin-top:上外邊距
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:上外邊距
margin:上外邊距 右外邊距 下外邊距 左外邊
取值順序跟內(nèi)邊距相同。
外邊距實(shí)現(xiàn)盒子居中
可以讓一個(gè)盒子實(shí)現(xiàn)水平居中，需要滿足一下兩個(gè)條件：
然后就給左右的外邊距都設(shè)置為auto，就可使塊級(jí)元素水平居中。
實(shí)際工作中常用這種方式進(jìn)行網(wǎng)頁(yè)布局，示例代碼如下：
.header{ width:960px; margin:0 auto;}
文字盒子居中圖片和背景區(qū)別
text-align: center; /* 文字居中水平 */ margin: 10px auto; /* 盒子水平居中 左右margin 改為 auto 就闊以了 */
section img {
width: 200px;/* 插入圖片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入圖片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入當(dāng)圖片也是一個(gè)盒子 */
}
aside {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-size: 200px 210px; /* 背景圖片更改大小只能用 background-size */
background-position: 30px 50px; /* 背景圖片更該位置 我用 background-position */
}
清除元素的默認(rèn)內(nèi)外邊距
為了更方便地控制網(wǎng)頁(yè)中的元素，制作網(wǎng)頁(yè)時(shí)，可使用如下代碼清除元素的默認(rèn)內(nèi)外邊距：
* {
padding:0; /* 清除內(nèi)邊距 */
margin:0; /* 清除外邊距 */
}
注意： 行內(nèi)元素是只有左右外邊距的，是沒(méi)有上下外邊距的。 內(nèi)邊距，在ie6等低版本瀏覽器也會(huì)有問(wèn)題。
我們盡量不要給行內(nèi)元素指定上下的內(nèi)外邊距就好了。
外邊距合并
使用margin定義塊元素的垂直外邊距時(shí)，可能會(huì)出現(xiàn)外邊距的合并。
相鄰塊元素垂直外邊距的合并
當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí)，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現(xiàn)象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。
嵌套塊元素垂直外邊距的合并
對(duì)于兩個(gè)嵌套關(guān)系的塊元素，如果父元素沒(méi)有上內(nèi)邊距及邊框，則父元素的上外邊距會(huì)與子元素的上外邊距發(fā)生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會(huì)發(fā)生合并。
解決方案：
content寬度和高度
使用寬度屬性width和高度屬性height可以對(duì)盒子的大小進(jìn)行控制。
width和height的屬性值可以為不同單位的數(shù)值或相對(duì)于父元素的百分比%，實(shí)際工作中最常用的是像素值。
大多數(shù)瀏覽器，如Firefox、IE6及以上版本都采用了W3C規(guī)范，符合CSS規(guī)范的盒子模型的總寬度和總高度的計(jì)算原則是：
/*外盒尺寸計(jì)算（元素空間尺寸）*/ Element空間高度 = content height + padding + border + margin Element 空間寬度 = content width + padding + border + margin /*內(nèi)盒尺寸計(jì)算（元素實(shí)際大小）*/ Element Height = content height + padding + border （Height為內(nèi)容高度） Element Width = content width + padding + border （Width為內(nèi)容寬度）
注意：
1、寬度屬性width和高度屬性height僅適用于塊級(jí)元素，對(duì)行內(nèi)元素?zé)o效（ img 標(biāo)簽和 input除外）。
2、計(jì)算盒子模型的總高度時(shí)，還應(yīng)考慮上下兩個(gè)盒子垂直外邊距合并的情況。
3、如果一個(gè)盒子沒(méi)有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會(huì)影響本盒子大小。
盒子模型布局穩(wěn)定性
開(kāi)始學(xué)習(xí)盒子模型，同學(xué)們最大的困惑就是， 分不清內(nèi)外邊距的使用，什么情況下使用內(nèi)邊距，什么情況下使用外邊距？
答案是： 其實(shí)他們大部分情況下是可以混用的。 就是說(shuō)，你用內(nèi)邊距也可以，用外邊距也可以。 你覺(jué)得哪個(gè)方便，就用哪個(gè)。
但是，總有一個(gè)最好用的吧，我們根據(jù)穩(wěn)定性來(lái)分，建議如下：
按照 優(yōu)先使用 寬度 （width） 其次 使用內(nèi)邊距（padding） 再次 外邊距（margin）。
width > padding > margin
原因：
盒子陰影
語(yǔ)法格式：
box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色 內(nèi)/外陰影；
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
