<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<!-- 邊框（border） 外邊距（margin） 內邊距（padding） 內容區（content）-->
<style>
#box10{
width: 100px;
height: 200px;
background-color: blueviolet;
/*border:dashed 10px red ;*/
border:solid 10px red ;
/*border:dashed 10px red ;*/
/*border:dotted 10px red ;*/
/*盒子模型內容*/
/*overflow: hidden;!* 內容被剪切，其余內容不可見*!*/
/*overflow: visible;!*內容不被裁剪，會呈現在元素框以外*!*/
/*overflow: scroll;!*內容被剪切，流動條顯示其余內容*!*/
/*overflow: auto;!* 如果內容被剪裁則瀏覽器以流動條顯示其他內容*!*/
/*overflow-x:scroll;*/
/*overflow-y:scroll;*/
/*text-overflow: clip;!*修改文本*!*/
/*text-overflow: ellipsis;!*顯示省略號來代表文本*!*/
/*text-overflow:string;*/
}
/* 元素的邊框*/
/* border 簡寫屬性，用於把針對四個邊的屬性設置在一個聲明。
border-style 用於設置元素所有邊框的樣式，或者單獨地個邊設置樣式
border-width 簡寫屬性用於元素的所有邊框的寬度，或者單獨地為各邊邊框設置寬度
border-color 簡寫屬性設置元素的所有部分 可見部分的顏色，或 四邊分別設置顏色
border-bottom 簡寫屬性，用於把下邊框的所有屬性設置到一個聲明中
border-left 簡寫屬性，用於把左邊框的所有屬性設置到一個聲明中。
border-right 簡寫屬性，用於把右邊框的所有屬性設置到一個聲明中
border-top 簡寫屬性，用於把上邊框的所有屬性設置到一個聲明中
邊框border:
線型（solid/dashed/dotted/double） 粗細（數值+單位） 顏色;
右邊框border-right:
線形（solid/dashed/dotted/double） 粗細（數值+單位） 顏色;
左邊框 border-left:
線形（solid/dashed/dotted/double） 粗細（數值+單位） 顏色;
上邊框 border-top:
線形（solid/dashed/dotted/double） 粗細（數值+單位） 顏色;
下邊框 border-bottom:
線形（solid/dashed/dotted/double） 粗細（數值+單位） 顏色;
solid:實線，dashed:虛線，dotted:點狀線，double:雙線
border-top-style/border-top-width/border-top-color--->border-top
border-right-style/border-right-width/border-right-color--->border-right
border-bottom-style/border-bottom-width/border-bottom-color--->border-bottom
border-left-style/border-left-width/border-left-color--->border-left
border-style/border-width/border-color----border
padding的使用方法
padding：填充，元素邊框與元素內容之間的區域，稱之為內邊距。
用法：
用來調整內容在容器中的位置關系
用來調整子元素在父元素中的位置關系。注：padding屬性需要添加在父元素上。
padding值是額外加在元素原有大小之上的，如想保證元素大小不變，需從元素寬或高上減掉后添加的padding屬性值。
屬性值四種方式：
四個值：上 右 下 左 {padding:10px 20px 30px 40px;}
三個值：上 左右 下 {padding:10px 20px 30px ;}
二個值：上下 左右 {padding:10px 20px ;}
一個值：四個方向 {padding:2px;}
說明：
可單獨設置一方向填充
如：上方向padding-top:10px; 右方向pahdding-right:10px;
下方向padding-bottom:10px; 左方向padding-left:10px;
margin 的使用方法
margin：盒子與盒子之間的距離
屬性：
margin
margin-top：上邊界
margin-right：右邊界
margin-bottom：下邊界
margin-left：左邊界
屬性值四種方式：
四個值：上 右 下 左 {margin:10px 20px 30px 40px;}
三個值：上 左右 下 {magin:10px 20px 30px ;}
二個值：上下 左右 {margin:10px 20px ;}
一個值：四個方向 {margin:2px;}
說明：
{margin: 0 auto; } 在瀏覽器中橫向居中
可單獨設置一方向邊界，如：上邊界margin-top:10px; 右邊界margin-right:10px;
下邊界margin-bottom:10px; 左邊界margin-left:10px;
盒子尺寸的計算
計算公式：
寬 =左右margin+左右border+左右padding+內容width
高 =上下margin+上下border+上下padding+內容height
例如：一個盒子的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px
寬=margin*2 + border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px
高=margin*2 + border*2 + padding*2 + content.height = 20*2 + 1*2 +10*2 + 50 = 112px
注意：
設置padding和margin會撐大盒子，如何解決？
根據外邊距，內邊距，邊框大小重新計算盒子中內容的寬度和高度
*/
</style>
</head>
<body>
<div id="box10">
3.1415926265358979323846264338327950288419716939969513456456456456456456456798797897</div>
</body>
</html>
盒子模型基礎屬性
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。