网站前端布局涉及的知识点总结（上下浮动、横向滚动条、定位）

版权声明：转载请附上文章地址 https://blog.csdn.net/weixin_38134491/article/details/86564356

网页布局方式：

• 固定布局（将网页主体部分长度设置成固定的值，然后配合浮动技术实现布局）

[code]//CSS文件

body,div,ul,ol,li,dl,dd,h1,h2,h3,form,input,textarea,p,img{   //很多块级元素都有默认的外边距
margin:0px;
padding:0px;
}

ul{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}

#header{
width:960px;     /*网站主体部分设置成固定长度*/
height:600px;
background:skyblue;
margin-left:auto;    /*让主体部分居中*/
margin-right:auto;   /*让主体部分居中*/
}
...

 

浮动方面经常出现的问题:

• 上下两个div，如果上面的div设置浮动的话一定要立即给下面的div设置清除浮动（clear:both;加在下面那个div样式上, clear:both; 的意思是不允许上面有浮动)

 

下图为纠正后的正确表现（把清除浮动加在红色div上）：

 

• 上下都有div的情况，设置上下间距时一定要从上往下挤，不能从下往上（用margin-bottom:20px;）

 

谈到浮动，我们还要讲下 块级元素和内联元素的区分和使用：

块级元素有：<div>、<p>、<ul>、<li>、<ol> ....

块级元素：是可以控制宽和高、margin等，并且会换行。

内联元素：是不可以控制宽和高、margin等；并且在同一行显示，不换行。

 

块级元素都独占一行，即使div1的宽度很小，div2也不会排在div1的后面，那么怎么在同一行放多个div呢？

我们用浮动，如果连续多个元素设置 float: left; ，被设置的元素会组成一个流，并且横着紧挨着排列，直到那一行元素的宽度不够才会换下一行排列

我们下载把红色长度变小点就能放到上一行最后边了：

也就是我们上面看到的每一个div上都加了 float:left; 才出现上面的结果。

如果红色div没有加 float:left; 的情况：

1. 红色div长度小于前三个div长度总和时，红色被完全隐藏，根本看不到
2. 红色div长度大于前三个div总长度但又小于网页总长度时，在最后边红色会漏出来一部分，红色左边的大部分被遮挡了

反正要注意一点，任何div的长度都不能超做网页的总长度，否则会出现横向滚动条问题！

 

• 响应式布局（把元素的长度设置成百分比、利用相对定位、绝对定位的方式布局）欢迎斧正！

 

1. 相对定位：相对于原来自己所在的位置偏移，相对定位原来的位置依旧还占据
2. 绝对定位：可以用负值，原来的位置消失了
3. 固定定位：position: fixed;  
4. 重叠元素堆叠：z-index 

 

下面谈谈常用到的一些属性：

• display: block;  把内联元素转化成块级元素（如，把<a href="#"></a>转换成独占一行的块级元素，设置成块级元素后可以像div那样给块级元素设置背景图片：background-image:url(bg.jpg); 

[code]#nav ul li a{
display:block; //变成块级元素后可以设置width height
}

#nav ul li a:hover{
background:url(hover.png);
}

• display:inline; 把块级元素转化为内联元素
• display: none; 隐藏消失
• display: inline-block; 把块级元素变成一行，每个块级元素就不独占一行了（每个块级元素都要加这个属性），其实这个属性是display:inline;和display:block;属性的结合体，有个时候既希望元素具有宽度高度特性，又具有同行特性，这个时候我们可以使用inline-block