浮動布局之 margin

2021-04-21 02:20:16 字數 379 閱讀 1123

上次用padding來控制左中右三列布局中的中部的位置,通過padding-left:***px;來控制中部元素的位置。然後左側欄向左浮動並設定合適的寬度將中部填充部分覆蓋掉。現在採用另一種方法:margin來控制中部位置。

頁面仍然是三欄布局格式。

對應的css:

body

#container

#middle

#right

#left

為了能夠看出效果,我給三列定義高度和背景色。

middle部分左側margin值195px的設定給左側欄留出了空間,左側蘭寬度180px,因此左側欄和中部留有15px的空隙。

左側欄margin值-750px,使其向左側移動750px的距離從而緊貼頁面左部。

CSS布局之浮動 清除浮動

1.2 浮動 float 小結 1.3 浮動 float 的應用 重要 1.4 浮動 float 的擴充套件 2.清除浮動 2.4 清除浮動總結 概念 元素的浮動是指設定了浮動屬性的元素會 脫離標準普通流的控制 移動到指定位置。作用 讓多個盒子 div 水平排列成一行,使得浮動成為布局的重要手段。可...

css布局之浮動

css布局中說到浮動,浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動 框的邊框為止。由於浮動框不在文件的普通流中,所以文件的普通流中的塊框表現得就像浮動框不存在一樣。一float屬性的定義和用法 float屬性 設定元素浮動 可能的值 none 不浮動,在文件流內,預設 left ...

CSS之浮動布局

1.什麼是浮動 在我們布局的時候用到的一種技術,能夠方便我們進行布局,通過讓元素浮動,我們可以使元素在水平上左右移動,再通過margin屬性調整位置。2.浮動的原理 使當前元素脫離普通流,相當於浮動起來一樣,浮動的框可以左右移動,直至它的外邊緣遇到包含框或者另乙個浮動的邊緣 3 浮動的生成 使用cs...