HTML+CSS基础篇7----详解页面布局

 页面布局是非常非常重要的内容,如果对布局的相关知识点掌握的不够好,在设计页面时将会出现一系列的问题。

在本章的内容里,主要介绍浮动,绝对定位,相对定位,固定定位这四种定位。表格布局在下一章的内容中再来详细介绍。 

1.HTML网页的默认布局方式是什么?

   HTML网页的默认布局是流动布局。

   流动布局有以下特点:

   1)对于块元素来说自上而下垂直分布,默认的宽度都是浏览器的宽度。

   2)对于内联元素来说从左到右水平显示,(直到占满该行又从左右往右排列)

 

2.什么是浮动?如何正确的使用浮动?

浮动是一种布局方式。

浮动元素的页面流向:1)块元素从上往下,内联元素从左上往右下依次布局

                                    2)2.遇到浮动元素,尽可能的放在最左边or最右边,然后从流中删除这个段落

                                    3)按照1)的步骤依次执行,不过内联元素定位时,会考虑到浮动元素的边界,因此会绕着浮动元素走

 

如何浮动一个元素:  1)为元素指定一个标识(可以是类也可以是id属性)

                                   2)为该元素指定一个宽度(如:width:200px;)

                                   3)为想要浮动的元素增加float样式(如:float: right;)

图解可以参考图解浮动。

 

3.如何修正(当主内容区和浮动元素区下面扩展,会导致页面不美观)主内容区与浮动元素的两栏问题?

   1)计算浮动页面的边栏宽度=(内+外边距+边框)*2+width(内容宽度)

   2)让内容区的外边距宽度与浮动页面的边栏宽度相等

 

4.如何解决使用浮动元素所引起的页面重叠问题?

   选择重叠区域的元素,使用clear属性来禁止左边,右边,或者两边有浮动元素存在。clear可选的值有:left,right,both。

 

5.什么是绝对定位?如何使用绝对定位? 

   绝对定位的定位方式是将使用绝对定位的元素完全中正常的HTML文档流中删除,内联元素也不会绕着绝对定位的元素走,完全就像没有这个元素一样处理。

   对一个元素使用绝对定位:1)先确定绝对定位的元素是相对于什么元素定位的,定位原则是最近的已经定位的祖先元素

                                              2)确定定位元素想要移动的位置(top bottom,left,right)以及元素的宽度(width)

                                              3)  将元素的的布局方式设置为: position:absolute;

   图解可以参考图解绝对定位。

 

6.什么是相对定位?如何使用相对定位?

   设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。

   对一个元素使用相对定位:1)相对定位是相对于自身元素本身的位置进行定位的。

                                              2)确定元素想要移动的位置(top bottom,left,right)以及元素的宽度(width)

                                              3)将元素的布局方式设置为:position:relative;

图解可以参考图解相对定位。

 

7.什么是固定定位?固定定位如何使用?

  固定定位是不随页面滚动而改变位置,是相对于浏览器定位的。

  对一个元素使用固定定位:1)固定定位是相对于浏览器位置进行定位的。

                                             2)确定元素想要移动的位置(top bottom,left,right)以及元素的宽度(width)

                                             3)将元素的布局方式设置为:position:fixed;

 

8.浮动,绝对定位,相对定位,固定定位这四种方式的不同点有哪些?

  首先,使用好这些布局方式的一个前提是:知道每一种布局是相对于什么元素进行定位的!!1(非常重要)

浮动与绝对定位:同样是将元素从流中删除,但是浮动定位时,普通流的内联元素是会绕开浮动元素的,但是不会绕开绝对定位元素。

绝对定位和相对定位(固定定位):绝对定位不占据页面空间,相对定位保留本来元素的空间,绝对定位相对于最近的已定位的祖先元素进行定位,相对定位是相对于元素本身的位置进行定位(或者说发生偏移),而固定定位是相对于浏览器进行定位的。

 

本博客由博主原创,如需转载需说明出处!谢谢支持!

 

你可能感兴趣的:(前端开发)