2018-10-30

一、設(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>

效果圖:

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1、什么是scss? scss是css的預(yù)處理器,css是標(biāo)記語(yǔ)言,不可以定義變量、封裝、引用等。 2、...
    w_01閱讀 652評(píng)論 0 0
  • 就比樂(lè)閱讀 214評(píng)論 0 0

友情鏈接更多精彩內(nèi)容