html5善于盒模型定位,2个小时上手html+css-003盒模型和定位

我已经说过了，我要尝试看看自己能够用多少个小时把一个小白菜鸟变成月薪10000+的前端工程师。这篇文章就是我的尝试系列计划之一。《2个小时上手html+css》的第三篇。

这个教程是一系列，这是第三篇，学习本系列教程你需要：

1.你会基础的电脑操作(会打字，新建文件夹、新建文件、保存文件，知道什么是浏览器，28个英文字母都得熟悉，不能多数了俩)会安装基本的编辑器。

2.每个文件都要一个个的敲，一个不落的调试。

3.不要想太多，不要知道太多，按照步骤做就好了。

这个课程学习需要三个小时，包含练习时间，你将学会：

1.标准和模型和怪异和模型

2.定位和浮动

3.关于图片

4.表单和表格

第一部分标准和模型

在IE6下不加我们的文档声明，也就是

会触发诡异模式，而诡异模式面试经常考，却并不是实用。那么我们先了解一下，不废话上图。

盒模型.jpg

简单的说就是，

​ 标准的和模型实际的宽度 = width+css padding+border

​ 而 诡异盒模型下宽度设置多少就是多少，有边框和padding要内缩而不是外扩。

这个东西知道有啥用呢？在我们写菜单的时候很有用。

看例子：

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

*{

margin: 0;

padding: 0;

}

li{ list-style: none;}

ul li{

float: left;

width:25%;

background: red;

text-align: center;

height: 30px;

line-height:30px;

}

• 菜单1
• 菜单2
• 菜单3
• 菜单4

注意，到这一步位置，所有代码你都应该明白我再写什么，如果不明白那么说明你第一个3个小时的工作不合格！回去搞明白为止再回来学习。

现在菜单都是红色的我想分隔开怎么办呢 加一个border,

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

*{

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;

}

• 菜单1
• 菜单2
• 菜单3
• 菜单4

然后你会看到 菜单挤下去了，为什么挤下去呢，因为标准和模型每个

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;什么区别呢？

*{

margin: 0;

padding: 0;

}

#window{

width:200px;

height:200px;

left:50%;

top:50%;

margin:-100px 0 0 -100px;

background:#ccc;

position: absolute;

}

自己体会下，尤其是滚动鼠标的时候？

清楚了吧。

未完待续。