引言 : 博主目前是一名iOS开发者, 所会的语言有Objective-C 和 Swift, 目前正在学习前端; 这篇文章只是作为我的笔记发在这里, 供自己业余时间看看; 全是很基础的东西, 看到的小伙伴 酌情略过 吧^_^
盒子模型的概念
CSS盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图：
如果想要了解更多, 请看这篇文章; 或自行百度, 这种文章多得是
1. 居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中
</title>
<style>
div{
background-color: red;
width: 400px;
height: 250px;
line-height: 250px;
text-align: center;
}
span{
background-color: green;
}
p{
background-color: gold;
width:200px;
margin: 0px auto;
text-align: center;
}
button{
width: auto;
height: 50px;
}
</style>
</head>
<body>
<div>
<button>行内块级标签
</button>
</div>
</body>
</html>
2. 属性补充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性补充
</title>
<style>
input{
width: 200px;
height: 40px;
padding: 5px;
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>
<style>
ul{
display: inline-block; // 变成行内块级标签
background-color: red;
}
ul li{
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: relative;
}
span{
background-color: green;
position: absolute;
left: 20px;
top: 20px;
}
</style>
</head>
<body>
<div>
<span>哈哈哈哈哈哈哈
</span>
</div>
</body>
</html>
