前端學習筆記之3 盒子模型
阿新 • • 發佈：2019-01-03
引言 : 博主目前是一名iOS開發者, 所會的語言有Objective-C 和 Swift, 目前正在學習前端; 這篇文章只是作為我的筆記發在這裡, 供自己業餘時間看看; 全是很基礎的東西, 看到的小夥伴 酌情略過 吧^_^
盒子模型的概念
CSS盒子模型 又稱框模型 (Box Model) ，包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。如圖：
如果想要了解更多, 請看這篇文章; 或自行百度, 這種文章多得是
1. 居中
<!DOCTYPE html>
<html lang="en"> 2. 屬性補充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性補充</title>
<style>
input{
width: 200px;
height: 40px;
padding: 5px;
/*預設是 content-box, 會往外擠*/
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>
<!--
- 預設情況下, 所有網頁標籤都在標準流佈局中
: 從上到下, 從左到右 (跟這滑動)
- 脫離標準流的方法有
: float屬性 浮動在父標籤左邊, 或者右邊
: position屬性 和 left, right, top, bottom屬性
-->
<style>
ul{
display: inline-block; // 變成行內塊級標籤
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: 預設是static*/
position: relative;
}
span{
background-color: green;
position: absolute;
left: 20px;
top: 20px;
}
</style>
</head>
<body>
<div>
<span>哈哈哈哈哈哈哈</span>
</div>
</body>
</html>