一窑睁、CSS的樣式
1、邊框和尺寸
??border：設(shè)置邊框的樣式
????格式：寬度 樣式 顏色
??????樣式的取值：solid 實線受神，none 無邊俺猿，double 雙線等
??width碘举、height：用于設(shè)置標(biāo)簽的寬度忘瓦、高度。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
border: 1px solid red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2引颈、轉(zhuǎn)換：display
??我在之前的 HTML二 的文章中耕皮，講述了塊標(biāo)簽和行內(nèi)標(biāo)簽。如果我們想要行內(nèi)元素具有塊元素的特性蝙场，需要用display轉(zhuǎn)換凌停。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
border :1px solid #000;
width:100px;
height:40px;
}
</style>
</head>
<body>
<!--默認顯示一行，邊框環(huán)繞售滤，高寬沒有作用-->
<span>顯示1-1</span>
<span>顯示1-2</span>
<!--每一行顯示罚拟，高寬有作用-->
<!--block是display的默認值，表示將對象強制作為塊對象呈遞完箩，為對象之后添加新行-->
<span style="display: block;">顯示2-1</span>
<span style="display: block;">顯示2-2</span>
</body>
</html>
3赐俗、字體
??color：字體顏色
??font：字體類型
??font-size：字體大小
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="height: 50px;width:200px;border:1px solid #000;">
<a href="">點擊</a>
<a href="" style="text-decoration: none;">點擊</a>
</div>
<div style="height: 50px;width:200px;border:1px solid #000;">
<a href="" style="line-height: 50px;">點擊</a>
<a href="" style="color: red;">點擊</a>
</div>
</body>
</html>
4、背景色：background-color
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<ul style="background-color: gray;color: white;">
<li>點擊</li>
<li>點擊</li>
<li style="background-color: black;">點擊</li>
<li>點擊</li>
</ul>
</body>
</html>
5嗜憔、布局
??通常默認的排版方式秃励，將頁面中的元素從上到下一一羅列，而實際開發(fā)中吉捶，需要左右方式進行排版夺鲜，就需要使用浮動。但是浮動也會對頁面中其他元素的排版產(chǎn)生影響呐舔。
浮動格式：
??選擇器{float:屬性值;}
????常用屬性值：
??????left：元素向左浮動
??????right：元素向右浮動
??????none：元素不浮動（默認值）
清除浮動格式：
??選擇器{clear:屬性值;}
????常用屬性值：
??????left：不允許左側(cè)有浮動元素（清除左側(cè)浮動的影響）
??????right：不允許右側(cè)有浮動元素（清除右側(cè)浮動的影響）
??????both：同時清除左右兩側(cè)浮動的影響
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--默認上下布局-->
<div>
<div>區(qū)域1-1</div>
<div>區(qū)域1-2</div>
</div>
<hr />
<!--浮動左右布局-->
<div>
<div style="float: left;">區(qū)域2-1</div>
<div style="float: left;">區(qū)域2-2</div>
</div>
<!--取消浮動币励，另起一行布局-->
<div style="clear:both"></div>
<hr />
<div>
<div style="float: left;">區(qū)域2-1</div>
<div style="float: left;">區(qū)域2-2</div>
<div style="float: left;">區(qū)域2-3</div>
</div>
</body>
</html>
二、盒子模型
??盒子模型主要用于設(shè)置一個元素與其他元素之間的距離珊拼，也用于設(shè)置元素的內(nèi)容與元素邊框之間的距離食呻，一個盒子模型由元素的內(nèi)容、元素的邊框澎现、外邊框以及內(nèi)邊框組成仅胞。
1、內(nèi)邊距：padding
??設(shè)置內(nèi)邊距可以為所有邊設(shè)置統(tǒng)一的屬性值剑辫，也可以按照上干旧、右、下妹蔽、左的順序設(shè)置屬性值椎眯，可以使用像素值或者百分比。
屬性：
??上 border-top
??下 border-bottom
??左 border-left
??右 border-right
2胳岂、外邊距：margin
??設(shè)置外邊距的方式和內(nèi)邊距一樣编整。
屬性：
??上 margin-top
??下 margin-bottom
??左 margin-left
??右 margin-right
3、邊框：border
??可以通過屬性設(shè)置邊框的類型乳丰。
??border-top-style
??border-bottom-style
??border-left-style
??border-right-style
