可以嘗試以下初始化代碼:
為吉陽等地區用戶提供了全套網頁設計制作服務,及吉陽網站建設行業解決方案。主營業務為網站建設、成都做網站、吉陽網站設計,以傳統方式定制建設網站,并提供域名空間備案等一條龍服務,秉承以專業、用心的態度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求,就會得到認可,從而選擇與我們長期合作。這樣,我們也可以走得更遠!
body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input{ margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;}
ol,ul{ list-style:none;}
img,fieldset{ border:0 none; display:block;}
由于各個版本的瀏覽器,對一些標簽的初始值不一樣,我們需要幫它們初始化成一樣的,用于兼容各個版本的瀏覽器。
塊元素的之間的間距使用margin屬性設置。
CSS margin 屬性
定義和用法
margin 簡寫屬性在一個聲明中設置所有外邊距屬性。該屬性可以有 1 到 4 個值。
說明
這個簡寫屬性設置一個元素所有外邊距的寬度,或者設置各邊上外邊距的寬度。
塊級元素的垂直相鄰外邊距會合并,而行內元素實際上不占上下外邊距。行內元素的的左右外邊距不會合并。同樣地,浮動元素的外邊距也不會合并。允許指定負的外邊距值,不過使用時要小心。
注釋:允許使用負值。
例子 1
margin:10px?5px?15px?20px;
/*
上外邊距是?10px
右外邊距是?5px
下外邊距是?15px
左外邊距是?20px
*/
padding-top:0px; 或者margin-top:0px;不過我看你CSS里面貌似沒有上邊距
你應該寫一個*{margin:0px;padding:0px;} 寫在最上面
在css中加入如下代碼即可:
*{padding:0; margin:0}
padding
定義和用法
padding 簡寫屬性在一個聲明中設置所有內邊距屬性。
說明
這個簡寫屬性設置元素所有內邊距的寬度,或者設置各邊上內邊距的寬度。行內非替換元素上設置的內邊距不會影響行高計算;因此,如果一個元素既有內邊距又有背景,從視覺上看可能會延伸到其他行,有可能還會與其他內容重疊。元素的背景會延伸穿過內邊距。不允許指定負邊距值。
注釋:不允許使用負值。
margin
定義和用法
margin 簡寫屬性在一個聲明中設置所有外邊距屬性。該屬性可以有 1 到 4 個值。
說明
這個簡寫屬性設置一個元素所有外邊距的寬度,或者設置各邊上外邊距的寬度。
塊級元素的垂直相鄰外邊距會合并,而行內元素實際上不占上下外邊距。行內元素的的左右外邊距不會合并。同樣地,浮動元素的外邊距也不會合并。允許指定負的外邊距值,不過使用時要小心。
div向右偏移一定距離,可采用margin外邊距實現、也可以使用padding來實現,這就要看不同情況下如何靈活選擇了。這里thinkcss為大家介紹各種css布局div向右移方法。
兩個盒子前者是藍色的div,后者是紅色的div,就這種情況下靈活讓紅色div向右浮動偏移一定距離的方法教程分別如下。
基本說明:
為了便于實例,兩個盒子并排,我們將兩個div均設置float浮動樣式,兩個div box同時設置相同寬度和高度。
一、設置margin-left實現div右移
1、有邊框或有背景顏色情況下
兩個div均設置float:left布局靠左css樣式,要讓第二個(紅色)div靠右移動一點,通常是對第二個(后者 紅色)div設置margin-left。
2、為設置div靠右移動一點前代碼:
!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titlediv向右移一定距離實例 ;/title
style
.box-a,.box-b{width:200px;height:100px; float:left}
.box-a{ border:1px solid #00F}
.box-b{ border:1px solid #F00}
/style
/head
body
div class="box-a"第一個(前者)div/div
div class="box-b"第二個(后者)div/div
/body
/html
3、截圖
設置div右移前
4、操作設置第二個div左外邊距離樣式
關鍵CSS代碼:
.box-a,.box-b{width:200px;height:100px; float:left}
.box-a{ border:1px solid #00F}
.box-b{ border:1px solid #F00; margin-left:20px}
截圖
設置margin-left實現紅色div右移一定距離
二、使用margin-right讓第二個div靠右產生一定距離
1、使用說明
上一個方法是直接對要右移div設置margin-left自身靠左一定距離,從而實現div自身向右移。
如果使用margin-right就不能對需要向右移div設置,而是對前者(藍色div)設置即可,實現紅色div右移一定距離。
2、CSS代碼:
.box-a,.box-b{width:200px;height:100px; float:left}
.box-a{ border:1px solid #00F;margin-right:20px}
.box-b{ border:1px solid #F00}
3、截圖:
margin-right實現div盒子右移
利用對藍色div設置margin-right外右邊距,這樣讓紅色自然靠藍色div一定距離,從而實現div右篇移
三、使用padding-left設置div右移一定距離
要對右移div本身設置padding-left,有一個前提條件,這個div沒有邊框和div本身背景與div外背景色沒有區別,這樣借助padding-left內左邊距,實現div沒有右移,內容右移,看上去就像div右移的一樣效果。
1、關鍵CSS代碼
.box-a,.box-b{width:200px;height:100px; float:left}
.box-a{ border:1px solid #00F}
.box-b{padding-left:20px}
2、截圖
技巧實現看似div右移效果
四、總結
div css布局html是非常靈活的技術,不同思路不同方法不同代碼實現相同效果。樂趣也在此,把握以最簡單方法和思路來布局出要的效果。多實踐多思考慢慢會建立靈活布局技巧與思維。
網頁題目:css樣式清除邊距,css設置邊框
網站網址:http://vcdvsql.cn/article26/dsdepjg.html
成都網站建設公司_創新互聯,為您提供用戶體驗、手機網站建設、網站設計公司、動態網站、靜態網站、網站改版
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯