引言 : 博主目前是一名iOS開發(fā)者, 所會(huì)的語(yǔ)言有Objective-C 和 Swift, 目前正在學(xué)習(xí)前端; 這篇文章只是作為我的筆記發(fā)在這里, 供自己業(yè)余時(shí)間看看; 全是很基礎(chǔ)的東西, 看到的小伙伴 酌情略過(guò) 吧_
盒子模型的概念
CSS盒子模型 又稱框模型 (Box Model) ，包含了元素內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）、外邊距（margin）幾個(gè)要素。如圖：
圖片
如果想要了解更多, 請(qǐng)看這篇文章; 或自行百度, 這種文章多得是
1. 居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中</title>
<!-- 水平居中
行內(nèi)標(biāo)簽和行內(nèi)塊級(jí)標(biāo)簽 在父標(biāo)簽設(shè)置居中
塊級(jí)標(biāo)簽設(shè)置外邊距(margin)左右自動(dòng), 則水平居中
-->
<!-- 垂直居中
行內(nèi)標(biāo)簽和行內(nèi)塊級(jí)標(biāo)簽 讓父標(biāo)簽 line-height == height
塊級(jí)標(biāo)簽: 通過(guò)布局
-->
<style>
div{
background-color: red;
width: 400px;
height: 250px;
line-height: 250px;
/*水平居中, 設(shè)置子標(biāo)簽居中, 要在父標(biāo)簽中設(shè)置*/
text-align: center;
}
span{
background-color: green;
/*line-height: 250px;*/
}
p{
background-color: gold;
width:200px;
/*上下0, 左右自動(dòng)*/
margin: 0px auto;
text-align: center;
}
button{
width: auto;
height: 50px;
}
</style>
</head>
<body>
<div>
<!--<span>行內(nèi)標(biāo)簽</span>-->
<button>行內(nèi)塊級(jí)標(biāo)簽</button>
<!--<p>P塊級(jí)標(biāo)簽</p>-->
</div>
</body>
</html>
2. 屬性補(bǔ)充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性補(bǔ)充</title>
<style>
input{
width: 200px;
height: 40px;
padding: 5px;
/*默認(rèn)是 content-box, 會(huì)往外擠*/
box-sizing: border-box;
}
</style>
</head>
<body>
<input>
</body>
</html>
3. CSS布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS布局</title>
<!--
- 默認(rèn)情況下, 所有網(wǎng)頁(yè)標(biāo)簽都在標(biāo)準(zhǔn)流布局中
: 從上到下, 從左到右 (跟這滑動(dòng))
- 脫離標(biāo)準(zhǔn)流的方法有
: float屬性 浮動(dòng)在父標(biāo)簽左邊, 或者右邊
: position屬性 和 left, right, top, bottom屬性
-->
<style>
ul{
display: inline-block; // 變成行內(nèi)塊級(jí)標(biāo)簽
background-color: red;
}
ul li{
/*float: left;*/
float: right;
}
</style>
</head>
<body>
<ul>
<li>哈哈哈哈哈哈哈哈</li>
<li>哈哈哈哈哈哈哈哈</li>
<li>哈哈哈哈哈哈哈哈</li>
<li>哈哈哈哈哈哈哈哈</li>
<li>哈哈哈哈哈哈哈哈</li>
</ul>
</body>
</html>
4. Position定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Position定位</title>
<style>
div{
background-color: red;
width:200px;
height: 200px;
/*position: 默認(rèn)是static*/
position: relative;
}
span{
background-color: green;
position: absolute;
left: 20px;
top: 20px;
}
</style>
</head>
<body>
<div>
<span>哈哈哈哈哈哈哈</span>
</div>
</body>
</html>
