引入padding後導致div布局混亂解決辦法

2021-08-03 14:42:29 字數 1353 閱讀 1116

增加padding的同時要注意總寬度夠不夠!

如果不夠,可以縮小div的寬度

只需要把div的寬和高減去padding*2的值

charset="utf-8">

實戰首頁布局-margin設定title>

type="text/css">

#container

#header

/*若父親div未設定高度,其子div為浮動型且設定了高度

此時父div的高度不隨子div的高度自變化 沒有實際高度 是飄起來的

可以給父div設定乙個實際高度

若想讓其自變化 加上overflow:hidden*/

#main

#lsite

/*類的css寫法*/

.four

#rsite

#footer

style>

head>

id="container">

id="header">

div>

id="main">

id="lsite">

class="four">

邊框屬性(border)用來設定乙個元素的邊線。

邊距屬性(margin)是用來設定乙個元素所佔空間的邊緣到相鄰元素之間的距離。

間隙屬性(padding)是用來設定元素內容到元素邊界的距離。

div>

class="four">

邊框屬性(border)用來設定乙個元素的邊線。

邊距屬性(margin)是用來設定乙個元素所佔空間的邊緣到相鄰元素之間的距離。

間隙屬性(padding)是用來設定元素內容到元素邊界的距離。

div>

class="four">

邊框屬性(border)用來設定乙個元素的邊線。

邊距屬性(margin)是用來設定乙個元素所佔空間的邊緣到相鄰元素之間的距離。

間隙屬性(padding)是用來設定元素內容到元素邊界的距離。

div>

class="four">

邊框屬性(border)用來設定乙個元素的邊線。

邊距屬性(margin)是用來設定乙個元素所佔空間的邊緣到相鄰元素之間的距離。

間隙屬性(padding)是用來設定元素內容到元素邊界的距離。

div>

div>

id="rsite">

div>

div>

id="footer">

div>

div>

body>

html>

引入bootstrap導致布局混亂

專案網頁copy模板,使用後發現引入bootstrap導致頁面布局變小了等問題,查詢後發現,引入樣式的順序應該是 應該將bootstrap首先引入,然後再在下面編寫css或者是引入其他css檔案。一定要將jquery.js檔案放在bootstrap.js之前才行,將重複的js檔案刪除即可 style...

div的float導致的問題

原來的想法是想在左邊顯示一棵樹,右邊放乙個div顯示內容,所以右邊的div就用了float right。如下 content 這樣就會發現在ie下content的背景色不是白色,得不到想要的結果,而當把content中的 position relative float left 刪除掉,就可以正常顯...

子Div使用Float後如何撐開父Div

乙個div包含了多個子div,並且子div使用了浮動後,父div確不能被撐開,如下圖 部分 如下 1 style 2 div1 3 div2,div3 4style 56 div id div1 7 div id div2 twodiv 8 div id div3 onediv 9div 如果想要撐...