一、設(shè)置網(wǎng)頁(yè)的兼容的問(wèn)題
? ? ? ? <meta? ?name="renderer" content="webkit">
? ? ? ? <meta http-equiv="X-UA-Compatible"? content="IE=edge,chrome=1">
二、設(shè)置網(wǎng)頁(yè)中亂碼的問(wèn)題
? ? ? ? <meta??http-equiv="content-type" content="text/html; charset=utf-8"/>
三、css控制元素的大小
1、盒模型的概念
? ? ? ? 每個(gè)元素都是由一個(gè)盒子組成:盒模型的大小主要是由內(nèi)容區(qū)(width+height)+padding+border。
? ? ? ? 控制盒模型主要是由margin(外邊框)、padding(內(nèi)邊框)、border(邊框的粗細(xì))、width(內(nèi)容區(qū)的寬度)、height(內(nèi)容的高度)。
2、塊元素和行內(nèi)元素
? ? ? ? a、塊元素:p換行? div盒子? ul? li無(wú)序列表? form表單? h1-h6標(biāo)題? table表格? dl自定義列表? ol有序列表。
? ? ? ? ?屬性:獨(dú)占一行、可以通過(guò)css改變寬高。
? ? ? ??b、行級(jí)元素:a 超鏈接 abbr 縮寫 acronym 首字 b 粗體(不推薦) bdo -bidi override
? ? ? ? ? ? ? ? big 大字體? br換行? cite引用? code -計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)
? ? ? ? ? ? ? ? dfn 定義字段 em 強(qiáng)調(diào)? font字體設(shè)定(不推薦)? i斜體? input輸入框?
? ? ? ? ? ? ? ? kbd 定義鍵盤文本? label表格標(biāo)簽? q短引用? s中劃線(不推薦)?span
? ? ? ? ? ? ? ? samp? 定義范例計(jì)算機(jī)代碼? select項(xiàng)目選擇? small小字體文本?
? ? ? ? ? ? ? ? span - 常用內(nèi)聯(lián)容器,定義文本內(nèi)區(qū)塊?strike中劃線?strong粗體強(qiáng)調(diào)
? ? ? ? ? ? ? ? sub - 下標(biāo)? sup上標(biāo)? textarea多行文本輸入框? tt電傳文本? u下劃線? var定義
? ? ? ? ? 屬性:內(nèi)容決定元素所占位置,不可以通過(guò)css改變寬高。
? ? ? ? ? c、行級(jí)塊元素:img
? 3、元素的寬、高度 重點(diǎn)
? ? ? ?沒(méi)有設(shè)置寬度或高度時(shí)網(wǎng)頁(yè)內(nèi)容決定寬和高。如果設(shè)置的寬度和高度,內(nèi)容的寬度由設(shè)置決定,內(nèi)容的高度超出設(shè)置的高度時(shí),內(nèi)容就會(huì)自動(dòng)溢出。
? ? ? ?最大寬度屬性:max-width: 就是說(shuō)寬度是有最大值,但是沒(méi)有最小值。網(wǎng)頁(yè)會(huì)實(shí)現(xiàn)自動(dòng)換行。(不會(huì)出現(xiàn)右左的滾動(dòng)條)
? ? ? ?最小寬度屬性:min-width:也就是說(shuō)寬度有最小值,但是沒(méi)有最大值。(當(dāng)小于最小值值就會(huì)出現(xiàn)右左的滾動(dòng)條)
? ? ? ?最大高度屬性:max-height:用來(lái)定義高度顯示的最大值。當(dāng)內(nèi)容高度小于最大高度的時(shí)候,元素按照內(nèi)容的高度顯示。當(dāng)內(nèi)容高度超出最大高度時(shí),保持最大高度不變,但內(nèi)容顯示出最大高度。
? ? ? ? 最小高度屬性:min-height:用來(lái)定義高度顯示的最小值。當(dāng)內(nèi)容高度小于最小高度的時(shí)候,元素顯示最小高度屬性定義的高度;當(dāng)內(nèi)容高度超出最小高度時(shí),元素顯示的高度和內(nèi)容相同。
? ? ? ? 注意:最小、最大高度屬性是以塊級(jí)元素定義,不是對(duì)行級(jí)元素定義。行級(jí)元素是沒(méi)有高度的。
<!DOCTYPE html>
<html>
<head>
<title>最大小寬度</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style>
.max_w{
max-width:600px;
height:100px;
border:1px solid red;
}
.min_w{
min-width:500px;
height:100px;
border:1px solid orange;
}
</style>
</head>
<body>
<div class="max_w">最大寬度屬性:max-width: 就是說(shuō)寬度是有最大值,但是沒(méi)有最小值。網(wǎng)頁(yè)會(huì)實(shí)現(xiàn)自動(dòng)換行。(不會(huì)出現(xiàn)右左的滾動(dòng)條)</div>
<div class="min_w">最小寬度屬性:min-width:也就是說(shuō)寬度有最小值,但是沒(méi)有最大值。是整行顯示。(當(dāng)小于最小值值就會(huì)出現(xiàn)右左的滾動(dòng)條)</div>
</body>
</html>
效果圖:

<html>
<head>
<title>最大小高度</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style>
.max_h1{
width:200px;
max-height:380px;
background-color:#ff4400;
}
.max_h2{
width:200px;
max-height:80px;
background-color:green;
}
.max_h3{
width:300px;
max-height:180px;
background-color:orange;
}
.min_h1{
width:300px;
min-height:80px;
background-color:#ff3300;
}
.min_h2{
width:300px;
min-height:180px;
background-color:#00ff00;
}
</style>
</head>
<body>
<div class="max_h1">1、最大高度屬性:max-height:用來(lái)定義高度顯示的最大值。當(dāng)內(nèi)容高度小于最大高度的時(shí)候,元素按照內(nèi)容的高度顯示。當(dāng)內(nèi)容高度超出最大高度時(shí),保持最大高度不變,但內(nèi)容顯示出最大高度。</div>
<div class="max_h2">2、最大高度屬性:max-height:用來(lái)定義高度顯示的最大值。當(dāng)內(nèi)容高度小于最大高度的時(shí)候,元素按照內(nèi)容的高度顯示。當(dāng)內(nèi)容高度超出最大高度時(shí),保持最大高度不變,但內(nèi)容顯示出最大高度。</div>
<div class="max_h3">3、最大高度屬性:max-height:用來(lái)定義高度顯示的最大值。當(dāng)內(nèi)容高度小于最大高度的時(shí)候,元素按照內(nèi)容的高度顯示。當(dāng)內(nèi)容高度超出最大高度時(shí),保持最大高度不變,但內(nèi)容顯示出最大高度。</div>
<br/>
<div>一種:內(nèi)容小于最大高度時(shí),最大高度就是內(nèi)容的高度。</div>
<div>二種:內(nèi)容高于最大高度時(shí),內(nèi)容高出部分會(huì)顯示在最大高度外??赡軙?huì)和下一元素標(biāo)簽的內(nèi)容重影。</div>
<br/>
<div class="min_h1">1、最小高度屬性:min-height:用來(lái)定義高度顯示的最小值。當(dāng)內(nèi)容高度小于最小高度的時(shí)候,元素顯示最小高度屬性定義的高度;當(dāng)內(nèi)容高度超出最小高度時(shí),元素顯示的高度和內(nèi)容相同。</div><br/>
<div>一種:當(dāng)內(nèi)容高于最小高度時(shí)。最小的高度就自動(dòng)變大,直到和內(nèi)容一樣的高度時(shí),才做為最小的高度。</div>
<div class="min_h2">2、最小高度屬性:min-height:用來(lái)定義高度顯示的最小值。當(dāng)內(nèi)容高度小于最小高度的時(shí)候,元素顯示最小高度屬性定義的高度;當(dāng)內(nèi)容高度超出最小高度時(shí),元素顯示的高度和內(nèi)容相同。</div>
<div>二種:當(dāng)內(nèi)容低于最小高度時(shí),就取最小高度值做為高度。</div>
<div class="span">
注意:最小、最大高度屬性是以塊級(jí)元素定義,不是對(duì)行級(jí)元素定義。行級(jí)元素是沒(méi)有高度的。</div>
</body>
</html>
效果圖:
