一、盒子模型css
height
width
padding 內邊距
margin 外邊距
border
1.margin 外邊距
margin-top:15px;
margin-right:50px;
margin-bottom:100px;
margin-left:150px;
或者margin:10px 50px 100px 200px;
乙個值代表四個邊
二個值代表
上下左右
三個值代表上左右
下四個值代表上右
下左每個數值之間需要使用空格隔開
2. padding 內邊距
padding-top:10px;
padding-right:50px;
padding-bottom:100px;
padding-left:200px;
或者padding：
10px 50px 100px 200px;
乙個值代表四個邊
二個值代表
上下左右
三個值代表上左右
下四個值代表上右
下左每個值之間都需要使用空格隔開
3.通用選擇器
* 選擇的是所有元素
*是他最常用的屬性作用是去除div和瀏覽器之間的小」鳳鳳」
4.div或者
table
居中顯示
margin:0px auto;
5.字型居中
需要使用text-align 和
line-height
配合將文字垂直居中顯示
/*字型左右居中
*/text-align:center;
/*字型垂直居中
*/line-height:50px;
二、參與布局的常用屬性
1.position 定位
a) absolute 絕對定位
absolute 絕對定位 如果只使用
position:absolute
沒有任何意義的 只是脫離文件流
絕對定位是相對於瀏覽器的0,0點進行定位
需要使用 left top right bottom這幾個方向屬性來配置
會根據父級元素的左上角定位
b) relative 相對定位
是相對於當前位置進行定位
相對定位他的位置和中國固有領土一樣
不容侵犯
c) fixed 固定定位
需要使用top left 配合
d) static 預設值
2 . z-index 設定顯示層級
auto 自動
number 數字
數字越大就會在最上面顯示
3.display 顯示屬性 還有塊級和行內級元素互換功能
none 隱藏 ，文件不保留位置 不佔位隱藏
block 轉換為塊級
inline 轉換為行內級
inline-block 轉換為行塊級
4.visibility 是否可見
visible 可見
hidden 隱藏 佔位隱藏
5.overflow 超出部分處理
visible 總是可見
(預設值
)hidden 超出部分隱藏處理
scroll 滾動條 宣告時候都有滾動條
auto 自動 如果超出出現滾動條 否則沒有
6.float 浮動
left
right
設定浮動
脫離普通文件流
浮動元素都會變成塊級元素
如果不設定寬度
會盡可能的窄
如果你使用浮動了
請將你的元素計算精確
如果不精確會有弊端！
7.clear 清除浮動
left
right
both 只用它就好了
就是讓你脫離文件流的內容(float)回到文件中
推薦: 每次看見浮動都要記得清除浮動
為什麼我只能告訴你沒有為什麼
就這樣記
如果不清除浮動你的頁面會亂的一逼
什麼地方出現就在什麼地方清除(同一級別清除一次
) 不能說統一一次就全部清除裡面的浮動 要出現就清除
再次強烈推薦
一定要寫清除浮動
三、布局
浮動布局
三列浮動布局
二列浮動布局
總結：這裡要注意，盒子的大小是有
height
width
padding 內邊距
margin 外邊距
border
5個組成的，排版的時候一定要注意每個位置的值，以免換行錯位。
定位的使用，一般我們都是先用相對定位之後對子集進行絕對定位，很少單獨使用絕對定位或相對定位。
display：none； visible ：hidden ；這兩個隱藏的區別，乙個隱藏不佔原來的位置，乙個隱藏佔原來的位置
DIV CSS 盒子模型
盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型。他們對盒子模型的解釋各不相同，先來看看我們熟悉的標準盒子模型 看不清楚？這裡檢視原圖 大圖 從上圖可以看到標準w3c 盒子模型的範圍包括 margin border padding content，並且 content 部分不包含其他部...
div css 盒子模型
那麼它為什麼叫盒子呢？先說說我們在網頁設計中常聽的屬性名 內容 content 填充 padding 邊框 border 邊界 margin css盒子模式都具備這些屬性。我們可以把它想像成現實中上方開口的盒子，然後從正上往下俯視，邊框相當於盒子的厚度，內容相對於盒子中所裝物體的空間，而填充呢，相當...
css盒子模型，div css布局
css盒子模型 border border width 邊框的寬度 border color 邊框的顏色 border style 邊框的線型 border top 上邊框 border bottom 下邊框 border left 左邊框 border right 右邊框 padding 代表邊框...