DIV CSS布局-固定页面开度布局
生活随笔
收集整理的這篇文章主要介紹了
DIV CSS布局-固定页面开度布局
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
DIV CSS布局中主要CSS屬性介紹：
Float:
?????? Float屬性是DIV CSS布局中最基本也是最常用的屬性，用于實現多列功能，我們知道<div>標簽默認一行只能顯示一個，而使用Float屬性可以實現一行顯示多個div的功能，最直接解釋方法就是能實現表格布局的多列功能。
Margin:
?????? Margin屬性用于設置兩個元素之間的距離。
Padding:
?????? Padding屬性用于設置一個元素的邊框與其內容的距離。
Clear:
?????? 使用Float屬性設置一行有多個DIV后（多列），最好在下一行開始之前使用Clear屬性清楚一下浮動，否則上面的布局會影響到下面。
簡單操作實例：下面使用實例如果做一個簡單又基本的布局，效果如下圖：
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"? "" > <html xmlns= "" > <head> <meta http-equiv= "Content-Type"? content= "text/html; charset=utf-8"? /> <title>DIV CSS布局教程</title> <style type= "text/css" > #Container{ ???? width:1000px; ???? margin: 0? auto; /*設置整個容器在瀏覽器中水平居中*/ ???? background:#CF3; } #Header{ ???? height:80px; ???? background:#093; } #logo{ ???? padding-left:50px; ???? padding-top:20px; ???? padding-bottom:50px; } #Content{ ???? height:600px; ???? /*此處對容器設置了高度，一般不建議對容器設置高度，一般使用overflow:auto;屬性設置容器根據內容自適應高度，如果不指定高度或不設置自適應高度，容器將默認為1個字符高度，容器下方的布局元素（footer）設置margin-top:屬性將無效*/ ???? margin-top:20px;/*此處講解margin的用法，設置content與上面header元素之間的距離*/ ???? background:#0FF; ????? } #Content-Left{ ???? height:400px; ???? width:200px; ???? margin:20px;/*設置元素跟其他元素的距離為20像素*/ ???? float:left;/*設置浮動，實現多列效果，div Css布局中很重要的*/ ???? background:#90C; } #Content-Main{ ???? height:400px; ???? width:720px; ???? margin:20px;/*設置元素跟其他元素的距離為20像素*/ ???? float:left;/*設置浮動，實現多列效果，div Css布局中很重要的*/ ???? background:#90C; } /*注：Content-Left和Content-Main元素是Content元素的子元素，兩個元素使用了float:left;設置成兩列，這個兩個元素的寬度和這個兩個元素設置的padding、margin的和一定不能大于父層Content元素的寬度，否則設置列將失敗*/ #Footer{ ???? height:40px; ???? background:#90C; ???? margin-top:20px; } .Clear{ ???? clear:both; } </style> </head> <body> <div id= "Container" > ???? <div id= "Header" > ???????? <div id= "logo" >這里設置了padding屬性介紹一下padding的用法,padding將設置文本與邊框的距離。</div> ???? </div> ???? <div id= "Content" > ???????? <div id= "Content-Left" >Content-Left</div> ???????? <div id= "Content-Main" >Content-Main</div> ???? </div> ???? <div class = "Clear" ><!--如何你上面用到 float ,下面布局開始前最好清除一下。--></div> ???? <div id= "Footer" >Footer</div> </div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"? "" > <html xmlns= "" > <head> <meta http-equiv= "Content-Type"? content= "text/html; charset=utf-8"? /> <title>DIV CSS布局流程</title> <style type= "text/css" > #Container{ ???? width:1000px; ???? margin: 0? auto; /*設置整個容器在瀏覽器中水平居中*/ ???? background:#CF3; } #Header{ ???? height:80px; ???? background:#093; } #logo{ ???? padding-left:50px; ???? padding-top:20px; ???? padding-bottom:50px; } #Content{ ???? height:600px; ???? /*此處對容器設置了高度，一般不建議對容器設置高度，一般使用overflow:auto;屬性設置容器根據內容自適應高度，如果不指定高度或不設置自適應高度，容器將默認為1個字符高度，容器下方的布局元素（footer）設置margin-top:屬性將無效*/ ???? margin-top:20px;/*此處講解margin的用法，設置content與上面header元素之間的距離*/ ???? background:#0FF; ????? } #Content-Left{ ???? height:400px; ???? width:200px; ???? margin:20px;/*設置元素跟其他元素的距離為20像素*/ ???? float:left;/*設置浮動，實現多列效果，div Css布局中很重要的*/ ???? background:#90C; } #Content-Main{ ???? height:400px; ???? width:720px; ???? margin:20px;/*設置元素跟其他元素的距離為20像素*/ ???? float:left;/*設置浮動，實現多列效果，div Css布局中很重要的*/ ???? background:#90C; } /*注：Content-Left和Content-Main元素是Content元素的子元素，兩個元素使用了float:left;設置成兩列，這個兩個元素的寬度和這個兩個元素設置的padding、margin的和一定不能大于父層Content元素的寬度，否則設置列將失敗*/ #Footer{ ???? height:40px; ???? background:#90C; ???? margin-top:20px; } .Clear{ ???? clear:both; } </style> </head> <body> <div id= "Container" > ???? <div id= "Header" > ???????? <div id= "logo" >這里設置了padding屬性介紹一下padding的用法,padding將設置文本與邊框的距離。</div> ???? </div> ???? <div id= "Content" > ???????? <div id= "Content-Left" >Content-Left</div> ???????? <div id= "Content-Main" >Content-Main</div> ???? </div> ???? <div class = "Clear" ><!--如何你上面用到 float ,下面布局開始前最好清除一下。--></div> ???? <div id= "Footer" >Footer</div> </div> </body> </html> 注解：Container作為整個頁面的容器，控制著整個頁面在瀏覽器的位置，此處使用margin:0 auto;控制Container容器在瀏覽器中水平居中，一般固定寬度的布局都會用到這就代碼。總結
以上是生活随笔為你收集整理的DIV CSS布局-固定页面开度布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： form中action属性后面?传递参数
- 下一篇： CSS实现文本周围插入符号