1、區塊浮動
絕對定位：脫離正常的文件流，相當於飄起來
向**飄起來，於是就有了float： 1，
div
是塊級元素，他會自動換行
2，對元素使用
float
浮動的話，他會自動的把定位方式變為 絕對定位
如果絕對定位之後，這個元素下面還有元素，會頂上去
注釋：正常情況下，按照上下的順序正常顯示，當浮動起來，他下面的文字開始網上擠，於是生成乙個圍繞的效果
即使浮動起來也是有順序的，按照從左向右的順序
但是有時候，即使某個元素浮動起來，我們也不希望 他下面的元素受影響，於是我們可以使用 clear
：屬性
他有4個值，
left
（左邊不受浮動元素的影響）、
right（右側不受浮動元素的影響）、
both（左右都不受浮動元素的影響）、
none，
瀏覽器---
目的就是美化顯示效果的
1，文字居中：,
line-height：行高，設定為 等於 包含他的父元素的高度
vertical-align：垂直居中
text-align：水平居中 2，
padding-top
失效的解決： 增加
float
浮動即可
專題網頁製作：
整體的結構：
乙個**整體是由3
部分組成：頭部、內容主體部分、尾部
1，頂部
3個導航條
什麼時候使用 id
選擇器？
獨一無二的元素，建議使用 id 2，
body
部分預設和 其他盒子之間有乙個外邊距，通常我們上來先
body
的外邊距清除掉
ie 和 其他瀏覽器 在居中方面區別：
ff/chrome margin-left margin-right 居中
ie 百分比：
班級90
分數以上的 佔
100%
，意味著
90分以上的人 / 總人數
= 100%
我們說 header width=100%
，header
的div
佔 包含他的元素的比例
/*height:800px;*/
/*background:green; 測試用*/
3，分割頭部為3部分
body{
margin:0px;
padding:0px;
text-align:center;
#container{
width:960px;
/*height:800px;*/
/*background:green; 測試用*/
border:1px solid;
margin-left:auto;
margin-right:auto;
#header{
width:100%;
height:80px;
/*background:red;*/
#main{
width:100%;
height:600px;
background:yellow;
#footer{
width:100%;
height:60px;
background:green;
#logo{
float:left;
width:200px;
height:80px;
background:pink;
margin-right:10px;
#banner{
float:left;
width:600px;
height:80px;
background:blue;
#custom{
float:right;
width:140px;
height:80px;
background:#ccc;
4，header
部分 和 內容主體部分有乙個分隔條
解決 ie
和 ff/chrome
分隔條高度上的差別：
ie瀏覽器會自動的調整高度
ff瀏覽器不會，你給他分配多少他就是用多少
浮動與定位
浮動 浮動元素會以某種方式從文件的正常流中刪除，再按照屬性值移動到制定的位置，浮動元素從某種意義上來說自成一派，但是他仍會對文件布局產生影響。注意事項 a.如果要對乙個非替換元素進行浮動，那麼必須為該元素宣告乙個寬度，否則，根據css規則，元素寬度近似為0，元素布局將會出現意想不到的結果。b.元素宣...
浮動與定位
1 元素的浮動屬性float的 基本的格式 選擇器一般他的值包過3個在內 屬性值 描述 left 元素會向左浮動 right 向右 none 不浮動 2 清除浮動 clear的屬性 選擇器屬性值 描述 left 不允許左側有浮動元素 清除左側浮動的影響 right 不允許右側有浮動元素 清除右側浮動...
浮動與定位
定義 float是css樣式中的定位屬性，用於設定標籤物件 如標籤盒子 標籤等html標籤 的浮動布局，浮動也就是我們所說標籤物件浮動居左靠左 float left 和浮動居右靠右 float right 1 浮動元素會脫離正常的文件流，按照其外邊距指定的位置相對於它的上乙個塊級元素 或父元素 顯示...