设计师学习HTML/CSS之路-11
不了解前端的UI不是好美工，以下是慕課網(wǎng)HTML+CSS基礎(chǔ)教程學(xué)習(xí)筆記，不廢話，Start!
第12章 CSS布局模型
11-1 元素分類
在CSS中，html中的標(biāo)簽元素大體被分為三種不同的類型：塊狀元素、內(nèi)聯(lián)元素(又叫行內(nèi)元素)和內(nèi)聯(lián)塊狀元素。
常見的塊狀元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 復(fù)制代碼常見的內(nèi)聯(lián)元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 復(fù)制代碼常見的內(nèi)聯(lián)塊狀元素有： <img>、<input> 復(fù)制代碼11-2 元素分類-塊級元素
塊級元素的特點(diǎn)：
設(shè)置display:block就是將元素顯示為塊級元素。如將內(nèi)聯(lián)元素轉(zhuǎn)換為塊級元素：
span{display:block;} 復(fù)制代碼 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>內(nèi)聯(lián)塊狀元素</title> <style type="text/css"> div,p,h1{background:pink;} div{display:block;} </style> </head> <body> <div>div1</div> <div>div2</div> <p>段落1段落1段落1段落1段落1</p> <h1>asda </h1> </body> </html> 復(fù)制代碼11-3 元素分類-內(nèi)聯(lián)元素
內(nèi)聯(lián)元素（行內(nèi)元素）inline
塊狀元素也可以通過代碼display:inline將元素設(shè)置為內(nèi)聯(lián)元素。
內(nèi)聯(lián)元素特點(diǎn)：
11-4 元素分類-內(nèi)聯(lián)塊狀元素
內(nèi)聯(lián)塊狀元素（inline-block）就是同時(shí)具備內(nèi)聯(lián)元素、塊狀元素的特點(diǎn)，代碼display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素。<img>、<input>標(biāo)簽就是這種內(nèi)聯(lián)塊狀標(biāo)簽。
inline-block 元素特點(diǎn)：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>內(nèi)聯(lián)塊狀元素</title> <style type="text/css"> a{display:inline-block;width:60px;/*在默認(rèn)情況下寬度不起作用*/height:20px;/*在默認(rèn)情況下高度不起作用*/background:pink;/*設(shè)置背景顏色為粉色*/text-align:center; /*設(shè)置文本居中顯示*/ } </style> </head> <body> <a>1</a> <a>2</a> <a>3</a> <a>4</a> </body> </html> 復(fù)制代碼11-6 盒模型-邊框（一）
盒子模型的邊框（border）就是圍繞著內(nèi)容及補(bǔ)白的線，這條線你可以設(shè)置它的粗細(xì)、樣式和顏色（邊框三個(gè)屬性）。
如：
p{border:2px dotted #ccc;} 復(fù)制代碼上面是 border 代碼的縮寫形式，可以分開寫：
p{border-width:2px;border-style:dotted;border-color:#ccc; } 復(fù)制代碼border-style常見樣式有： dashed（虛線）| dotted（點(diǎn)線）| solid（實(shí)線）
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>邊框</title> <style type="text/css"> p{border:2px dotted #ccc;} </style> </head> <body><p>一個(gè)完整的調(diào)色板，應(yīng)包含主色、輔助色和灰度色。主色一般選用App圖標(biāo)使用的品牌色，輔助色是指主色的近似色和對比色。</p><p>方法：先確定主色的HSB，近似色一般在色環(huán)中+-30至50的H值，對比色一般+-180至200的H值。</p> </body> </html> 復(fù)制代碼11-7 盒模型-邊框（二）
css樣式中允許只為一個(gè)方向的邊框設(shè)置樣式：
div{border-bottom:1px solid red;} 復(fù)制代碼同樣可以使用下面代碼實(shí)現(xiàn)其它三邊(上、右、左)邊框的設(shè)置：
border-top:1px solid red; border-right:1px solid red; border-left:1px solid red; 復(fù)制代碼如:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>邊框</title> <style type="text/css"> li{border-bottom:1px dotted red;} </style> </head> <body> <ul><li>第一條內(nèi)容</li><li>第二條內(nèi)容</li><li>第三條內(nèi)容</li> </ul> </body> </html> 復(fù)制代碼11-8 盒模型-寬度和高度
一個(gè)元素的實(shí)際寬度=左邊距+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界。
li{border-bottom:1px dotted #ccc;width:200px;height:30px; } 復(fù)制代碼上段代碼表示為列表設(shè)置寬度為200px，高為30px的下劃線
補(bǔ)充：li是塊狀元素，塊狀元素有一個(gè)特點(diǎn)之一：在不設(shè)置寬度的情況下，顯示為父容器的100%。
11-9 盒模型-填充
元素內(nèi)容與邊框之間是可以設(shè)置距離的，稱之為“填充”。填充也可分為上、右、下、左（順時(shí)針）。如下代碼
div{padding:20px 10px 15px 30px;} 復(fù)制代碼相當(dāng)于以下代碼：
div{padding-top:20px;padding-right:10px;padding-bottom:15px;padding-left:30px; } 復(fù)制代碼如果上、右、下、左的填充都為10px;可以這么寫:
div{padding:10px;} 復(fù)制代碼如果上下填充一樣為10px，左右一樣為20px，可以這么寫：
div{padding:10px 20px;} 復(fù)制代碼 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>填充</title> <style type="text/css"> #box1{width:100px;height:100px;padding:10px;border:1px solid red; } </style> </head> <body> <div id="box1">盒子1</div> </body> </html> 復(fù)制代碼11-10 盒模型-邊界
元素與其它元素之間的距離可以使用邊界（margin）來設(shè)置。邊界也是可分為上、右、下、左。如下代碼：
div{margin:20px 10px 15px 30px;} 復(fù)制代碼也可以分開寫：
div{margin-top:20px;margin-right:10px;margin-bottom:15px;margin-left:30px; } 復(fù)制代碼如果上右下左的邊界都為10px;可以這么寫：
div{ margin:10px;} 復(fù)制代碼如果上下邊界一樣為10px，左右一樣為20px，可以這么寫：
div{ margin:10px 20px;} 復(fù)制代碼總結(jié)一下：padding和margin的區(qū)別，padding在邊框里，margin在邊框外。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>邊距</title> <style type="text/css"> div{width:300px;height:300px;border:1px solid red; } #box1{margin:30px;} </style> </head> <body><div id="box1">box1</div><div id="box2">box2</div> </body> </html> 復(fù)制代碼 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的设计师学习HTML/CSS之路-11的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hadoop-eclipse-plugi
- 下一篇： Linux/Unix 新手和专家教程