div常见的三种页面布局方法？div页面布局
大家好,今天小编来为大家解答以下的问题，关于div常见的三种页面布局方法，div页面布局这个很多人还不知道，现在让我们一起来看看吧！
简述CSS+DIV布局的常用方法。
【答案】：CSS+DIV布局的常用方法有三种：
一、常规流式布局
元素按照自身的常规显示方式显示，有两个特点：
1.元素按照自身HTML元素定义的位置显示（怎么写的怎么显示）
2.元素按照自身的常规显示特性显示，比如块级元素垂直排列，行级元素水平排列。
二、浮动
具体代码：左浮动 float:left；右浮动 float:right；
三、定位布局
1.静态定位
position:static；默认值，不写position相当于写上position:static;以前没学定位的时候其实都是静态定位，元素在它原本的位置显示，即使加了top、left等也不起作用。
2.相对定位
相对定位是相对于自身的原始位置进行平移，如果设置position：relative；表示相对定位。z-index:值越大越在上面。注意：z-index必须加在已经定位的元素上才起作用。
3.绝对定位
position:absolute；子容器相对于父容器的定位，如果没有父容器，则相对于body定位。
4.fixed固定定位
position:fixed；也是相对定位，相对于窗口的
如何控制div+css适应不同的浏览器
1.ie8下兼容问题，这个最好处理，转化成ie7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了
<meta http-equiv="x-ua-compatible" content="ie=7"/>
2.flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，!important解决，比如
margin-left:10px!important;/*IE7,IE8,FF下是10PX*/;
margin-left:5px;/*IE6下属性写的是5PX，但在显示出来的是10px
3.清除块display，这个可以解决浮动造成的块，造成块后，当DIV背景填色或填图片的时候，会出现背景断开或差一小块。这种兼容出现的不太多，我做到现在，只遇到过两次，方法是在出现兼容的DIV的CSS中写一个display:block，或其它属性，中文什么意思我不知道，我英语差，但能达到想要的效果，6 e" Z+ e%|8 G#|
4.很多朋友DIV+CSS的时候，会出现，在IE的几个浏览器下都好了，但是在FF出问题了，用!important又会把IE7做的不兼容，很头疼，在想，有没有什么方法只对FF下进行操做，我用过这个方法，感觉得是百试不爽，就是在属性前面加符号如：*、&，￥，#，@，—，+，加过符号的属性只有IE的浏览器才识别，而FF不识别，方法如下(注意有符号的属性和没符号的属性的顺序)
height:100px;/*FF下显示100的高*/
+height:120px;/*IE678下显示120高*/
5.有时候，会在布局的时候，发现，有一个DIV浮动了，接下来的一个DIV本来是要在下面显示的，结果跑上面去了，这种情况一般在FF下面会出现，解决的办法就是清除一下浮动，在设置过浮动的那个DIV下面加一个DIV，CSS面写个clear:both;如下<div style="float:left;height:100px; width:500px;">
<div style="clear:both;">
<div style="height:100px; width=300px">
6.再就是居中问题，这个问题在新手身上很多，主要原因是对盒子模型不够理解，没熟记盒子模型，如果发现你的页面没有局中，我现在知道的，有这几个原因：1.一个是没盒子，就是BODY后的一个大DIV把所有DIV装起来的那个，你没写。2.就是你写了，但是宽度没用绝对宽度：而是用一个相对的宽度，想局中，必须用绝对宽度。-
7.扩展：如果我想在设计的时候，实现IE6，IE7,FF下出现三种不同的效果，比如IE6下背景红色，IE7下蓝色FF下绿色，这里，我自己试过，可以，用兼容的方法（注意顺序，可以好好理解一下）。7 L& t- o7 k- a1 I
background:red;/*FF里显示的红色*/
+background:blue!important;/*IE7下面显示的蓝色*/
+background:green;/*IE6下面显示的绿色*/
在这里，我想说一下，虽然兼容给你带来很多郁闷，让人心烦，但同时，在你做多了后，你会发现，兼容有时候会满足你很多不好达到的效果，就像最后一个，要做那种效果，不用兼容的方法，那你就JS去吧，JS还得想想FF和IE下的不同，当然，JS的兼容，我也不会，我没去研究过。以后的事，先把CSS+DIV学熟再说。
多做，做练，始终把盒子模型放在心中，才会熟练，才会运用自如，才会在做的时候，自然而然就知道哪里会有兼容问题，直接在测试前就解决掉那些最常见的兼容问题。
网页的设计有几种方法
第一、靠前、无边框设计。无边框设计在近几年比较流行，在设计页面的时候，将页面中的风格线、边框删掉，用间距来代替的一种设计方法。无边框设计一般是以大图为主，图片本来就是一种分割元素。而内容基本是有规律的，留白间距之间的内容一定要相对一致、重复、紧密，这样用户在浏览的时候才会认为这些内容是一体的。一般来说，小众垂直的产品更适合使用无边框设计。
第二、卡片设计。卡片的设计打破了传统上固定的排版布局方式，提升了版面的使用率，可以给网站建设增加更多的惊喜。那么卡片设计有哪些优势呢？1、可以提高页面的使用率。卡片就好像是一个容器，将类型不一样的内容设置在不一样的卡片中，这样就可以很好地区分内容，还能够统一页面的风格。比如传统列表，内容一般是纵向滚动的方式，能够展示的内容比较有限，卡片式的设计采用的滑动方式，就可以有效地解决空间问题。2、区分卡片上的内容。卡片就好像是一个容器，将不同的内容放置在不同的卡片，更好地区分内容的类型。卡片的维度是不一样的，而且相对独立、有互相有联系，所以通过卡片归纳网站的内容，整个网站就显得更有秩序。3、卡片式设计可以提升可控性、提升体验度。卡片式设计的使用范围比较广泛，可以覆盖、滑动、堆叠，有良好的扩展性和可操作性。
第三、分割线的设计。这也是常见的一种页面布局设计方式，可以更好地帮助用户快速熟悉页面的布局，有良好的内容组织性。分割线可以贯穿整个页面，将不同的内容进行分割，成为独立的信息。
网站建设中的页面布局，有不同的设计方式，而且设计的趋势不断在变化，在设计页面布局之前，就要考虑好合适的样式，不能一味地追求潮流，根据产品的实际需求，选择合适的设计方式。而分割线的设计，想要做得出色，就要处理好线的间距、粗细、颜色等等
关于div常见的三种页面布局方法的内容到此结束，希望对大家有所帮助。