一.流动模型：Flow
1.首先它是网页默认的布局方式，有两个基本的特征：
I.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
II.在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
二.浮动模型 Float
1.任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。
如下代码可以实现两个 div 元素一行显示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>三.层模型
1.如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。
CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
层模型--固定定位
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。
由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，
或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，
这与background-attachment:fixed;属性功能相同。
以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。
并且拖动滚动条时位置固定不变。
四.Relative与Absolute组合使用
使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，
大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。
使用position:relative来帮忙，但是必须遵守下面规范：
1、参照定位的元素必须是相对定位元素的前辈元素
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
2、参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
} 3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了
#box2{
position:absolute;
top:20px;
left:30px;
} 这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
五.水平居中设置
1.块状定宽元素
当被设置元素为块状元素时用 text-align：center 就不起作用了，
这时也分两种情况：定宽块状元素和不定宽块状元素。这一小节我们先来讲一讲定宽块状元素。
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
我们来看个例子就是设置 div 这个块状元素水平居中：
<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>css代码
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:500px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style> 注意：元素的“上下 margin” 是可以随意设置的。
2.块状不定宽
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：
1.加入 table 标签
2.设置 display;inline 方法
I.改变块级元素的 display 为 inline 类型，然后使用 text-align:center 来实现居中效果。
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body> <style>
.container{
text-align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.container li{
margin-right:8px;
display:inline;
}
</style> 这种方法相比第一种方法的优势是不用增加无语义标签，简化了标签的嵌套深度，
但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，
比如设定长度值。
3.设置 position:relative 和 left:50%;
通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
六.垂直居中-父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
如下代码：
<div class="container">
hi,imooc!
</div>
css代码：
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style> 1.父元素高度确定的多行文本（方法一）
使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
2.父元素高度确定的多行文本（方法二）
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，
激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
css代码：
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style> 这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。
扫一扫
1229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
