? ? ?? 經(jīng)過近期的學(xué)習(xí)抹竹，我獲益良多，我是轉(zhuǎn)行而步入學(xué)習(xí)父泳，每次上課前都很緊張般哼，擔(dān)心自己聽不懂吴汪，心里壓力特別大，感謝授課老師和班主任還有身邊的同學(xué)朋友的耐心輔導(dǎo)和幫助蒸眠，現(xiàn)在心里壓力降低了漾橙，規(guī)律的學(xué)習(xí)心態(tài)了，之前讓我介紹IT類的WEB《html5》是做什么的我都不知道楞卡，因?yàn)閷?duì)布局屬性的理解還不夠深刻霜运，常常會(huì)在糾結(jié)中浪費(fèi)大量時(shí)間，對(duì)框架臀晃，布局或者元素觉渴，盒子這類詞糾結(jié)，現(xiàn)在已經(jīng)在自己的腦海中構(gòu)架了相對(duì)的知識(shí)體系徽惋，不足的是至今還沒掌握靈活變通，對(duì)選擇器理解還很不到位座韵，我說說我是如何學(xué)習(xí)的险绘？

CSS相關(guān)布局概要

一.文檔聲明格式：

??????? 注意：文檔聲明必有，而且必須在文檔頁面的第一行誉碴！HTML5已經(jīng)簡化了宦棺，H4以前較為繁瑣，就不重復(fù)描述以前繁瑣的格式黔帕。

<代咸！DOCTYPE>? :? 例子 ：代表當(dāng)前文檔類型是html

? ??? title: ? ? < title>標(biāo)題<title/>

???? head ?: ?html頁面的兩部分之一

????? body ?: ?html頁面的兩部分之一

?meta標(biāo)簽：描述文檔的類型和編碼；

1.charset:設(shè)置文檔的字符集編碼格式

?HTML5中設(shè)置字符集編碼： >>>常見的字符集編碼格式：

a.GB2312：國標(biāo)碼成黄，簡體中文呐芥；

b.GBK,擴(kuò)展的國標(biāo)碼；

c.UTF-8,萬國碼Unicode

2奋岁，http-equiv:將我們的信息寫給瀏覽器看思瘟，按照里面的要求去執(zhí)行，需要配合content屬性使用闻伶。

（http-equiv屬性只是表明需要設(shè)置哪一部分滨攻，具體的設(shè)置內(nèi)容放到content屬性中）

可選屬性值：content-type(文檔類型) ;refresh（網(wǎng)頁定時(shí)刷新） ;

set-cookie（設(shè)置瀏覽器cookie緩存）

3，name屬性：使用方法同http-equiv蓝翰。常用且需要掌握的屬性值：author（作者） keyword（網(wǎng)頁關(guān)鍵字） description（網(wǎng)頁描述）光绕。

二.文檔流

????? 運(yùn)用css布局首先要具備一些概念上的知識(shí)，文檔流的概念充斥著布局的整個(gè)過程畜份。瀏覽器渲染頁面是有先后順序的诞帐，其順序是至上而下，根據(jù)HTML的文檔結(jié)構(gòu)進(jìn)行渲染漂坏。

1景埃、div+css

??? 耳熟能詳?shù)膁iv+css布局指的是：僅用容器標(biāo)簽div配合css樣式進(jìn)行布局媒至。

2、display: none / block/ inline / inline-block

設(shè)置元素的顯示方式谷徙，以上為常見的取值拒啰。這是布局中非常重要的概念

block塊元素：獨(dú)自占據(jù)一行的元素,可控制寬高。如 div p h1~h6 ...

inline內(nèi)聯(lián)元素：不占據(jù)一行完慧，谋旦，不能控制寬高，需要內(nèi)容撐開屈尼。如 a span ...

inline-block: 內(nèi)聯(lián)的塊元素册着，不占據(jù)一整行，但是可以控制寬高

CSS:

.box1{

????????? display: block;

?????????? width: 100px;

??????????? height: 100px;

??????????? background-color: #aaa;

}

.box2{

??????? display: inline;

????? ? width:100px;

???????? height:100px;　?

???????? background-color: #f45;? ? }

? .box3{? ? ?

? ? ? ? ? display: inline-block;??

? ?????? width: 100px;? ?

? ?????? height: 100px;? ?

? ?????? background-color: #567;? ? }

HTML:容器一容器二容器三

可以看出脾歧，inline和inline-block都不會(huì)獨(dú)自占據(jù)一行甲捏，且inline無法控制寬高。

三.盒模型

1.盒子模型由 外邊距margin border邊界padding內(nèi)邊距 內(nèi)容尺寸width/height 四種樣式組成的鞭执。

《盒子的尺寸包括? 內(nèi)容尺寸? 盒子尺寸? 區(qū)域尺寸》

???? 內(nèi)容尺寸：content 司顿；

???? 盒子的尺寸content+padding+border；

???? 區(qū)域尺寸content+padding+border+margin兄纺；

2.盒子模型分為標(biāo)準(zhǔn)盒模型大溜，與怪異盒模型

標(biāo)準(zhǔn)盒模型width|height尺寸=content尺寸；

怪異盒模型width|height尺寸=content+border邊界+padding內(nèi)邊距尺寸估脆；

盒子與盒子之間用margin 钦奋；

盒子內(nèi)部用padding ；

盒子尺寸盡量用auto疙赠；

好了付材，以上就是布局需要熟悉掌握的概念，接下來還有學(xué)習(xí)屬性布局棺聊，背景樣式浮動(dòng)伞租，等等，后面慢慢介紹...........