我已经说过了，我要尝试看看自己能够用多少个小时把一个小白菜鸟变成月薪10000+的前端工程师。这篇文章就是我的尝试系列计划之一。《2个小时上手html+css》的第三篇。
这个教程是一系列，这是第三篇，学习本系列教程你需要：
1.你会基础的电脑操作（会打字，新建文件夹、新建文件、保存文件，知道什么是浏览器，28个英文字母都得熟悉，不能多数了俩）会安装基本的编辑器。
2.每个文件都要一个个的敲，一个不落的调试。
3.不要想太多，不要知道太多，按照步骤做就好了。
这个课程学习需要三个小时，包含练习时间，你将学会：
1.标准和模型和怪异和模型
2.定位和浮动
3.关于图片
4.表单和表格
第一部分标准和模型
在IE6下不加我们的文档声明，也就是
<!DOCTYPE html>
会触发诡异模式，而诡异模式面试经常考，却并不是实用。那么我们先了解一下，不废话上图。
盒模型.jpg
简单的说就是，
标准的和模型实际的宽度 = width+css padding+border
而 诡异盒模型下宽度设置多少就是多少，有边框和padding要内缩而不是外扩。
这个东西知道有啥用呢？在我们写菜单的时候很有用。
看例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
*{
margin: 0;
padding: 0;
}
li{ list-style: none;}
ul li{
float: left;
width:25%;
background: red;
text-align: center;
height: 30px;
line-height:30px;
}
</style>
<script>
</script>
</head>
<body>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</body>
</html>
注意，到这一步位置，所有代码你都应该明白我再写什么，如果不明白那么说明你第一个3个小时的工作不合格！回去搞明白为止再回来学习。
现在菜单都是红色的我想分隔开怎么办呢 加一个border,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
*{
margin: 0;
padding: 0;
}
li{ list-style: none;}
ul li{
float: left;
width:25%;
background: red;
text-align: center;
height: 30px;
line-height:30px;
border:1px solid green;
}
</style>
<script>
</script>
</head>
<body>
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</body>
</html>
然后你会看到 菜单挤下去了，为什么挤下去呢，因为标准和模型每个
li宽度 = 25% +2px (左右两个边) 那么整体就超出了父级的宽度100%，这个时候怎么办呢，在css中，有这么一个属性
ul li{
float: left;
width:25%;
background: red;
text-align: center;
height: 30px;
line-height:30px;
border:1px solid green;
box-sizing:border-box;
}
box-sizing:border-box; 这句话的意思是，li定死就是25%，你加边或者padding 要内缩而不外扩，这样这个问题就解决了，这个在移动端菜单非常常用。
说完了盒子模型你就知道了盒子的样子，其实就是把网页分成一块儿一块儿的豆腐块儿。那既然是一块一块的那么肯定涉及到位置，还有如何排列这些盒子。就是我们马上要说的定位和布局。
在css中，定位分为四种，说白了就是把盒子放在什么位置。
position:static|relative|absolute|fixed;
static加与不加都一样，是默认的，而relative是相对于自己默认的位置。
而absolute是绝对定位，如果存在父级定位那么依照父级定位去定位，不存在参照body去定位。
这里我只想说一个常用的窗口居中代码。
#window{
width:200px;
height:200px;
left:50%;
top:50%;
margin:-100px 0 0 -100px;
background:#ccc;
position: absolute;//fixed;
}
而postion:fixed的意思是，固定在窗口的某个位置，那么它和position:absolute;什么区别呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
}
#window{
width:200px;
height:200px;
left:50%;
top:50%;
margin:-100px 0 0 -100px;
background:#ccc;
position: absolute;
}
</style>
<script>
</script>
</head>
<body style="height: 3000px;">
<div id="window"></div>
</body>
</html>
自己体会下，尤其是滚动鼠标的时候？
清楚了吧。
未完待续。
网友评论