1、区块浮动
绝对定位:脱离正常的文档流,相当于飘起来
向哪里飘起来,于是就有了float:
1,div 是块级元素,他会自动换行
2,对元素使用 float 浮动的话,他会自动的把定位方式变为 绝对定位
如果绝对定位之后,这个元素下面还有元素,会顶上去
注释:图片正常情况下,按照上下的顺序正常显示,当图片浮动起来,他下面的文字开始网上挤,于是生成一个围绕的效果
即使浮动起来也是有顺序的,按照从左向右的顺序
但是有时候,即使某个元素浮动起来,我们也不希望 他下面的元素受影响,于是我们可以使用 clear:属性
他有4个值,left(左边不受浮动元素的影响)、
right(右侧不受浮动元素的影响)、
both(左右都不受浮动元素的影响)、none,
浏览器---目的就是美化显示效果的
1,文本居中:,
Line-height:行高,设置为 等于 包含他的父元素的高度
Vertical-align:垂直居中
Text-align:水平居中
2,Padding-top 失效的解决: 增加float浮动即可
专题网页制作:
整体的结构:
一个网站整体是由3部分组成:头部、内容主体部分、尾部
1,顶部3个导航条
什么时候使用 id 选择器?
独一无二的元素,建议使用 id
2,Body 部分默认和 其他盒子之间有一个外边距,通常我们上来先body 的外边距清除掉
IE 和 其他浏览器 在居中方面区别:
FF/Chrome margin-left margin-right 居中
IE
百分比:
班级90分数以上的 占 100%,意味着 90分以上的人 / 总人数 = 100%
我们说 header width=100% ,header的div 占 包含他的元素的比例
/*height:800px;*/
/*background:green; 测试用*/
3,分割头部为3部分
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"></div>
<div id="banner"></div>
<div id="custom"></div>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
</html>
body{
margin:0px;
padding:0px;
text-align:center;
}
#container{
width:960px;
/*height:800px;*/
/*background:green; 测试用*/
border:1px solid;
margin-left:auto;
margin-right:auto;
}
#header{
width:100%;
height:80px;
/*background:red;*/
}
#main{
width:100%;
height:600px;
background:yellow;
}
#footer{
width:100%;
height:60px;
background:green;
}
#logo{
float:left;
width:200px;
height:80px;
background:pink;
margin-right:10px;
}
#banner{
float:left;
width:600px;
height:80px;
background:blue;
}
#custom{
float:right;
width:140px;
height:80px;
background:#ccc;
}
4,header 部分 和 内容主体部分有一个分隔条
解决 IE 和 FF/Chrome 分隔条高度上的差别:
IE浏览器会自动的调整高度
FF浏览器不会,你给他分配多少他就是用多少