一、CSS布局屬性
Width：設定對象的寬度(width:45px)。
Height：設定對象的高度(Height:45px;)。
Background：設定對象的背景顔色、背景圖像。
1.背景顔色
background:#09F;
2.背景圖像
background:url(file:///C|/Users/Administrator/Desktop/huipu.jpg) repeat-x;
repeat-x代表橫向重複，還可以設定repeat-y。
Float:Float屬性是DIV+CSS布局中最基本也是最常用的屬性，用于實作多列功能，我們知道
标簽預設一行隻能顯示一個，而使用Float屬性可以實作一行顯示多個div的功能，最直接解釋方法就是能實作表格布局的多列功能。
Float屬性有left、right、none三個值，none預設屬性不用管，主要是left和right兩個屬性最常用。
舉例：
1.float:left屬性
1
2.float:right屬性
Margin: Margin屬性用于設定兩個元素之間的距離。(注：在IE6中預設是此屬性的雙倍值，如何解決請看hack css)
Margin屬性設定值說明：
1.單獨設定
margin-left:20px;設定左邊
margin-right:20px;設定右邊
同理上下分别是margin-top:20px;、margin-bottom:20px;
2.簡寫設定
Margin:10px;設定對象四周。
Margin:10px 5px;設定對象上下為10px,左右為5px;
舉例：
Padding: Padding屬性用于設定一個元素的邊框與其内容的距離。
1.單獨設定
padding-left:20px;設定左邊
padding-right:20px;設定右邊
同理上下分别是padding-top:20px;、padding-bottom:20px;
2.簡寫設定
padding:10px;設定對象四周。
padding:10px 5px;設定對象上下為10px,左右為5px;
Clear: Clear屬性主要是清楚float屬性設定的效果，使用Float屬性設定一行有多個DIV後(多列)，最好在下一行開始之前使用Clear屬性清楚一下浮動，否則上面的布局會影響到下面。
1、如何在上面的例子中橙色方塊的下面另起一行放置一個黑色方塊。
我們直接在html中加入一個div試試
我們看到kwstu-kid3跑到1、2的下面去了，原因就是應為kwstu-kid2使用了float屬性，解決方法可以直接在kwstu-kid3裡面加入clear屬性
2、還有一種布局中常見的問題，此處一定要看。
我們把最外層kwstu屬性的高度去了，看看什麼效果。
跟我們想象的不一樣吧，我們想象中應該是kwstu層把kid1和kid2包裹住才對，為什麼沒有達到我們要的效果呢，原因就是應該kid1和kid2使用了float屬性，此時可以使用clear屬性清楚一下即可。
一般情況都是在css裡面建立一個.clear公共清除浮動類，直接使用一個div調用即可
此問題還有一個解決辦法：直接在kwstu樣式中加入overflow:hidden;屬性即可。
2.還有一個初學div時經常遇到的問題，如果把上邊的clear層去掉，然後再在kwstu層下面開始一行新的布局，然後在下面新的div中使用margin-top屬性，肯定不管用。這個地方是初學者布局中肯定要遇到的問題，一定要注意。
解決辦法：
在kwstu層和kwstu1層直接加一個清除浮動層即可。
DIV+CSS專題：第一天 XHTML CSS基礎知識
歡迎大家學習,也就是我們常說的DIV+CSS.不過這裡的DIV+CSS是一種錯誤的叫法,建議大家還是稱之為web标準. 學習本系列教程需有一定html和css基礎 ...
DIV+CSS常用的網頁布局代碼
單行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...
DIV+CSS:頁腳永遠保持在頁面底部
頁腳永遠保持在頁面底部 有時候,我們用CSS建立一個高度自适應布局,如何保證頁腳(footer)在内容不超過一屏的情況下始終保持在布局最下方是一個比較頭疼的事.我看過一些利用絕對定位的例子,但總感覺不 ...
DIV+CSS+JS基礎+正規表達式
...............HTML系列.................... DIV元素是用來為HTML文檔内大塊(block-level)的内容提供結構和背景的元素.DIV的起始 ...
div+css相容 ie6_ie7_ie8_ie9_ie10和FireFox_Chrome等浏覽器方法
1.div的垂直居中問題 vertical-align:middle; 将行距增加到和整個DIV一樣高 line-height:200px; 然後插入文字,就垂直居中了.缺點是要控制内容不要換行 ...
DIV+CSS 星号*
常常我們在DIV+CSS布局的時候會遇到2處使用星号“*”,一個為以星号*沒有命名名稱的CSS選擇器:另外一個是在CSS選擇器裡以*開頭的CSS屬性單詞樣式-CSS星号-CSS *知識介紹.接下來DI ...
DIV+CSS系統學習：轉載
第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位: web前端開發工程師 web網站架構師 自己創業 轉崗管理或其他 web前端開發的前景展望: 未來IT行業企業需求最多的人才 結合最新的 ...
DIV CSS 網頁相容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌)
CSS相容常用技巧 請盡量用xhtml格式寫代碼,而且DOCTYPE影響 CSS 處理,作為W3C标準,一定要加DOCTYPE聲明. 1.div的垂直居中問題 vertical-align:middl ...
有利于SEO優化的DIV+CSS的命名規則小結
可以先去這裡溫習一下CSS和HTML的知識!DIV+CSS規範命名大全集合 CSS開發技巧整理 一.CSS檔案及樣式命名 1.CSS檔案命名規範 全局樣式:global.css/master.css ...
随機推薦
Create function through MySQLdb
http://stackoverflow.com/questions/745538/create-function-through-mysqldb How can I define a multi-s ...
AFN----AFNetworking
一.介紹 官方介紹: 1.适用于iOS和Mac OS X兩個平台的網絡庫 2.基于Foundation URL Loading System上進行一套封裝 3.提供了豐富的API接口 4.是一個輕量級 ...
解決xshell連接配接linux總是異常斷開的問題？
找到etc下面的profile檔案,可以看到有下面一行: TMOUT=;export TMOUT 注釋掉即可解決. #TMOUT=;export TMOUT
ExtJS4.2學習(五)表格渲染與複選框
鳴謝:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-10/174.html --------------- ...
xcode插件——建立cocos2dx工程
個人制作的一個建立cocos2dx工程的xcode小插件 按照readme安裝一下即可. 建立工程後,将自動彈出finder到工程目錄. 彈出視窗:
原生js封裝cookie擷取、設定及删除
使用cookie(key,value,options) 參數key,value,options(可選) function cookie(key,value,options){ if(typeof va ...
更改file檔案上傳預設CSS樣式
前言: 多數時候我們需要表單上傳檔案,如圖檔.但是浏覽器預設的input[file]樣式很不友好, 需要我們自己手動修改. 如圖基于bootstrap布局的表單, 但file檔案上傳樣式不敢恭維. & ...
React之使用Context跨元件樹傳遞資料
--------------------------------- 講解一 原文:https://blog.csdn.net/xuxiaoping1989/article/details/78480 ...
UVa 11384 Help is needed for Dexter (遞歸)
題意:給定一個n表示1到n的序列,讓你用最小的步數把這個序列都變為0,每個操作可以從序列中選擇一個或多個個,同時減掉一個正整數,求最少的步數. 析:一看這個題,感覺挺高深的,但是靜下心來想想,其實挺簡 ...