CSS盒模型

時間 2019-11-21

標籤 css 模型欄目 CSS 简体版

原文原文鏈接

CSS盒模型是CSS 可視化格式化系統的基石，它是理解樣式表如何工做的核心概念。盒模型用於元素定位和頁面佈局。
元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框之外是外邊距，外邊距默認是透明的，所以不會遮擋其後的任何元素。
內邊距、邊框和外邊距都是可選的，默認值是零。可是，許多元素將由用戶代理樣式表設置外邊距和內邊距。能夠經過將元素的 margin 和 padding 設置爲零來覆蓋這些瀏覽器樣式。這能夠分別進行，也可使用通用選擇器對全部元素進行設置：
* {
margin: 0;
padding: 0;
}
基本語法格式: <style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid black;
border-bottom: 50px solid red;
border-left:50px solid blue ;
border-right: 50px solid pink;
border-top: 50px solid yellow;

}
</style>
<body>
<div>
我是盒子
</div>
經過上述的代碼能夠獲得一個最基本的盒子模型
二、內邊距padding
元素的內邊距在邊框和內容區之間。控制該區域最簡單的屬性是 padding 屬性css

CSS padding 屬性定義元素邊框與元素內容之間的空白區域
padding的使用下面四個單獨的屬性，分別設置上、右、下、左內邊距：
padding-top
padding-right
padding-bottom
padding-left
切記padding的賦值不能爲負數
例:
padding: 10px;//四個方向
padding: 10px 20px; //上下左右
padding: 10px 20px 30px;//上左右下
padding: 10px 20px 30px 40px;//上右下左
padding-bottom: 40px;
padding-left: 20px;
padding-right: 30px;
padding-top: 10px;
padding: 0 20px;
margin: 50px;
三、邊框border
元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線
切記border的賦值能夠爲負數
Border經常使用屬性border-style,boder-width,border-color
例:
div{
width: 300px;
height: 300px;
border: 1px solid black;
border-bottom: 50px solid red;
border-left:50px solid blue ;
border-right: 50px solid pink;
border-top: 50px solid yellow;

}
製做三角形的小技巧:若是將width 和height改成0,並選擇border-left, border-right, border-top的顏色爲透明,則會顯示一個三角形。瀏覽器

4、外邊局合併
外邊距合併指的是，當兩個垂直外邊距相遇時，它們將造成一個外邊距，合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
例：<style type="text/css">
.div1,.div2{
width: 100px;
height: 100px;
border: 1px solid blue;
}
.div1{
margin-bottom: 100px;
}
.div2{
margin-top: 50px;
}佈局

</style>
<body>
<div class="div1">籃球</div>
<div class="div2">足球</div>
</body>
結果顯示爲籃球和足球的外邊距爲100px，取了較大值做爲連個邊框的距離。
5、佈局
默認的瀏覽器中，文檔的佈局是將文件元素從上到下、從左到右的格式佈局，塊級元素從上到下，行內元素從左到右依次排列。
例：<style type="text/css">
.out{
width: 1000px;
height: 150px;
border: 1px solid red;
margin: 50px 50px;
}
.in{
height: 120px;
background: green;
padding:10px;
}
</style>
<body>
<div class="out">
<div class="in">內容</div>
</div>
結果顯示爲in的框套在out框的裏面，切in在沒有寫入width的狀況下，默認與其父級元素的width一致
6、CSS 定位機制
CSS塊級元素和行內元素的轉換
div{
display:none 不顯示
display:block 1.轉換爲塊級元素2.顯示
display:inline 轉換爲行內元素
display:inline-block 不經常使用
}
CSS 有三種基本的定位機制：普通流、浮動和絕對定位
CSS positon屬性
static 靜態的
relative 相對(偏移)
absolute 絕對(脫離)
fixed 固定(脫離)
例:.left,.middle,.right{
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
.middle{
/*//相對定位*/
position:relative;
top: 50px;
left: 50px;
/*//絕對定位*/
position: absolute;
top: 50px;
left: 50px;
}
.out{
padding: 100px;
border: 1px solid red;
height: 300px;
position: relative;
}
<body>
<div class="out">
<div class="left">左</div>
<div class="middle">中</div>
<div class="right">右</div>
</div>
</body>
相對定位:框子轉移後,原來的位置沒有被佔有.
絕對定位:框子轉移後,原來的位置被佔有且相對最初的包含塊來定位完後成爲一個塊級元素.
固定定位
能夠用於網頁兩邊的固定欄
例：<style type="text/css">
.left,.right{
width: 100px;
height: 100px;
border: 1px solid black;
}
.left{
float: left;
position: fixed;
top: 100px;
left: 0;
}
.right{
float: right;
position: fixed;
bottom: 100px;
right: 0;
}代理

</style>
結果顯示爲左右兩個不動的框
CSS水平和垂直居中的幾種實現方法
水平居中：text-align,margin 0 auto,定位
垂直居中：line-height，vertical-align，margin,定位
CSS浮動
浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止，它會脫離文檔流
語法規則：.left,.middle,.right{
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
.middle{
clear: both;
}
其中clear以清除元素爲中心，將後面的元素換行，拉倒其後面文檔

1. css盒模型
2. css－－盒模型
3. CSS盒模型
4. CSS 盒模型
5. CSS-盒模型
6. 【CSS】盒模型
7. CSS：盒模型
8. css 盒模型
9. 盒模型------CSS
更多相關文章...
• ASP.NET MVC - 模型 - ASP.NET 教程
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• 委託模式
• Kotlin學習（二）基本類型

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。