css布局
QQ:275487025
qq群：854312770
欢迎各种大牛指点，和小白一起学习。
（重点）position定位属性：
relative相对定位特点是：
相对于游览最上边的左上角或者右上角来定位，但是**不会让出原位置**，除非浮动后，才会让出原位置；
absolute绝对定位特点：
这个有两种情况：
情况1：看他是否有脱离文档流（浮动或相对定位）的父元素，有的话就以他的父元素来定位，情况2：如果没有那么就以游览器最上边的左上角或者右上角来定位，让出原位置
（这两种常用，要求必须完全掌握！！！）
fixed固定定位：
通过定位可以将其定位在上下左右角任意一个地方，无论网页上下左右如何滑动，他的位置不变，是以我们的电脑屏幕来定位的。
static(默认)：默认文档流，靠margin来定位,忽略 top, bottom, left, right 或者 z-index 声明。
top上，bottom下，left左，right右
举例说明：
相对：
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>
</html>
绝对：
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>
固定：
<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">更多的文本。</p>
</body>
</html>
浮动属性：
float：
none
left
right
float属性定义元素在哪个方向浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
不论是行内元素还是块元素只要设置了float属性，就可以用width、height设置宽高
（重点来了！！！每写完一层浮动后的代码要脱离浮动！！！不然会影响下面写的代码！！！）
清除浮动：
clear:规定元素的哪一侧不允许其他浮动元素
none:默认值。允许浮动元素出现在两侧
left:在左侧不允许浮动元素
right:在右侧不允许浮动元素
both:在左右两侧均不允许浮动元素
（可以写在css文件中，那层需要可以在HTML里面引用就可以了）
堆叠属性：
z-index
数字越大，离浏览者越近
只针对脱离文档流的元素生效
可见性属性：
visibility:hidden
visibility属性指定一个元素应可见还是隐藏
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间
visibility:visible 默认值，元素是可见的
显示属性：
display
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间
display:visible可以显示某个元素，默认就是visible
块级元素与行级元素：
块级标签：显示为“块”状，独占一行
不管内容多少都会占据一整行
具有宽度和高度，可以通过width、height属性设置宽高
行级标签：在一行内按照先后顺序显示
只占据显示自己内容的宽度，不会占据整行
不能通过width、height属性设置宽高
如果设置了float属性，就可以设置宽高
inline-block:不会占据整行，但可以通过width、height设置宽高
例如：图片，按钮，单复选框，单行/多行文本框等
可以通display属性相互转换：
display:block/inline/inline-block
溢出属性：
overflow |overflow-x |overflow-y
visible(默认允许溢出)
hidden
scroll
auto
使用盒子模型的浮动布局 ：
虽然使用绝对定位可以实现页面布局，但由于调整某个区块框时其它区块的位置并不会跟随着改变，所以并不是布局的首选方式。而使用浮动的区块框可以向左或向右移动，直到它的外边缘碰到包含它区块的边框或另一个浮动框的边框为止。并且由于浮动框不在文档的普通流中，所以文档的普通流中的区块框表现得就像浮动框不存在一样。
使用盒子模型设计页面布局 ：
8.1 区块居中设计
8.2 设置两列浮动的布局
8.3 设置三列浮动的布局
8.4 设置多列浮动的布局
相关阅读
垂直 水平 导航栏 熟练使用导航栏，对于任何网站都非常重要。 使用CSS你尅转换成好看的导航栏而不是枯燥的HTML菜单。 导航
解释： 基本思想：住宅区，生产区，商业区，分别堆井，撞钟，烟花提升建筑加成 关键要点：注意限制工人的走位，因为他们会乱走导致效率低下 最后补
效果如下 完整代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 带语境色彩
说明 vertical-align属性，是CSS属性中一个比较重要的属性，也是比较不好理解的一个。 我们今天就来说说它。 解释 先来看看他的定
苹方提供了六个字重，font-family 定义如下： 苹方-简 常规体 font-family: PingFangSC-Regular, sans-serif; 苹方-简 极细体 font-f