定位与浮动

来源：互联网发布：python实现dbscan 编辑：程序博客网时间：2024/06/06 02:16

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 居中

百分比：

班级90分数以上的占 100%，意味着 90分以上的人 / 总人数 = 100%

我们说 header width=100% ，header的div 占包含他的元素的比例

/*height:800px;*/

/*background:green; 测试用*/

3，分割头部为3部分

<html>

<head>

</head>

<body>

</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浏览器不会，你给他分配多少他就是用多少

定位 与浮动

定位与浮动