【前言】
CSS 的盒子模型有很多有趣的東西，我們一起來打開這個盒子看看吧！
- Margin(外邊距)
- Padding(內邊距)
- Border(邊框線)
- Content(內容)
【小知識】
margin
- 外邊距，兩個塊狀標籤之間的距離
- top、 left 、right 、bottom
<style>
div{widht:100px;
height:100px;
}
#outer{background:red;
width:100px;
height:100px
}
#inner{background:blue;
margin-top:50px
}
</style>
</head>
<body>
<div id="outer">易烊千璽</div>
<div id="inner">易烊千璽</div>
</body>
瀏覽器顯示如下：
padding
- 內邊距，主要用來設置裏面內容舉例邊框線之間的距離
<style>
div{widht:100px;
height:100px;
float-left
}
#top{background:red;
margin-left:40px
}
#bottom{background:blue;
padding-left:10px;
padding-top:10px
}
</style>
</head>
<body>
<div id="top">易烊千璽</div>
<div id="bottom">易烊千璽</div>
</body>
瀏覽器顯示如下：
注：設置盒子與邊框線之間距離：margin：5px;padding:5px
border
- 邊框線，對於每一條線來說，都有3個屬性：樣式、寬度、顏色
- top 、right、 left 、bottom
- border-top-style 、border-top-width、 border-top-color
<style>
div{widht:100px;
height:100px;
float:left
}
#top{border-top-style:solid;
border-top-style:10px;
border-top-style:red;
}
/*
border-top/right/left/bottom-style
border-top-style設置線的 樣式:solid,dashed,double,groove
border-top-style設置線的粗細
border-top-color顏色
*/
/*若設置爲四邊都有的邊框線可簡寫爲：border：1px red solid*/
</style>
</head>
<body>
<div id="top">易烊千璽</div>
</body>
瀏覽器顯示如下：
重要：一般都能看到幾乎大部分的網頁都是內容居中對齊，兩邊空出一部分，
圓角邊框
- boder-top-left-radius：30px； //左上角
boder-top-right-radius：30px； //右上角
boder-bottom-left-radius：30px； //右下角
boder-bottom-right-radius：30px； //左下角
- 如果這四個弧度的圓角相同，可以寫成：
border-radius：30px
- 注：百分比大於50%後，形狀就不會再變化了，圓角的半徑不能超過寬/高的一半
瀏覽器顯示如下：
半圓
- 下半圓直接將100和0互換位置
- 其他方向的圓四個位置互換即可
<style>
.one{width:50px;
height:50px;
background:red;
border-radius:100px 100px 0 0;
box-sizing:border-box
}
.two{width:50px;
height:50px;
background:red;
border-radius: 0 0 100px 100px;
box-sizing:border-box
}
.three{width:50px;
height:50px;
background:red;
border-radius:0 100px 100px 0;
box-sizing:border-box
}
.four{width:50px;
height:50px;
background:red;
border-radius: 100px 0 0 100px ;
box-sizing:border-box
}
</style>
瀏覽器顯示如下：
扇形
<style>
.one{width:50px;
height:50px;
background:red;
border-radius:0 50px 0 0;
box-sizing:border-box
}
.two{width:50px;
height:50px;
background:red;
border-radius:50px 0 0 0;
box-sizing:border-box
}
.three{width:50px;
height:50px;
background:red;
border-radius:0 0 50px 0;
box-sizing:border-box
}
.four{width:50px;
height:50px;
background:red;
border-radius:0 0 0 50px;
box-sizing:border-box
}
</style>
瀏覽器顯示如下：
盒子陰影：box-shadow:inset x-offset y-offset blur-radius color;
<style>
.one{widht:150px;
height:150px;
background:red;
box-shadow:5px 5px 5px yellow
}
</style>
</head>
<body>
<div class="one"></div><br>
</body>
瀏覽器顯示如下：
加inset爲內陰影
加div：hover{box-shadow：0 0 5px black;}可以使鼠標觸及時顯現陰影
display：把塊狀標籤變成流狀標籤
<style>
.span{widht:150px;
height:150px;
background:red;
display:block
}
/*
display:block把內聯標籤變成塊狀標籤
inline-block:把轉換後的塊狀標籤在一行內顯示
none：不顯示
*/
</style>
</head>
<body>
<span>前端</span><span>前端</span>
</body>
瀏覽器顯示如下：
none：不顯示,和visibility:hidden等同
背景半透明：background-color:rgba(0,0,0,0.0)
圖片、文字間距：
1.margin：0 25px(數字自由改變)
2.<img sre="" style="margin-left:10px"> (數字自由改變)