首頁 > 文章 > web前端 > CSS原生佈局方法有哪些？

CSS原生佈局方法有哪些？

零下一度原創: 2017-06-26 09:14:451059瀏覽

前言

網頁原生佈局的方法其實網路上有很多，大概是Flow（流動佈局模型）、Float（浮動佈局模型）、Layer（層級佈局模型）。
fc430c7db1eecf4621f4fc8a5479f894

Flow佈局

流動佈局模型其實就是預設的網頁佈局模式。也就是說網頁在預設狀態下的HTML網頁元素都是根據流動模型來分佈網頁內容的。
流動佈局將會有兩個比較典型的特徵，
第一，區塊級元素都會在所處的最近父級容器元素內自上而下按順序垂直順延分佈，因為在預設狀態下，區塊級元素的寬度都是100%（即父級元素寬度的100%）。實際上，塊狀元素都會以行的形式佔據位置。如下程式碼所示，

<html><body><h1>我是h1</h1><div>我是div</div></body></html>

如上述程式碼所示，在沒有外在樣式的影響下，h1和div的寬度都會是100%（為頁面的預設寬度）。
第二，在流動模型下，內嵌元素都會在所處的最近父級容器元素內從左到右水平分佈顯示。

<html><body><a>我是a</a><span>我是span</span></body></html>

內聯元素不會像區塊級元素那樣獨自佔據的一行。

Float佈局

任何元素在預設的情況下都是處於整個文件流程中的，不會浮動的。當我們為某一個元素設定浮動時，即可讓該元素擺脫目前文件流，成為浮動元素。
如下程式碼，給div元素設定浮動，讓兩個div並排顯示。

div{width:200px;height:200px;border:2px red solid;float:left;
}

<div id="div1">我是div1</div>
<div id="div2">我是div2</div>

這裡有一點要注意，如果我給div設定的浮動是float: right，那麼div1將會貼在右側，而div2將會貼在div1的左側。

Layer佈局

什麼是層級佈局模型？

層級佈局模型就像是圖像軟體PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網頁設計領域，由於網頁大小的活動性，層級佈局模型沒能受到熱捧。但是在網頁上局部使用層級佈局還是有其方便之處的。
應用層級佈局，往往需要定位屬性的配合。 CSS中有3種定位類型，

絕對定位(position: absolute)
相對定位(position: relative)
#固定定位(position: fixed)

絕對定位

如果想為元素設定層級佈局模型中的絕對定位，則需要設定position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含區塊，則相對於body元素，即相對於瀏覽器視窗。

相對定位

如果想為元素設定層級佈局模型中的相對定位，則需要設定position:relative（表示相對定位），它透過left、right、top、bottom屬性來決定元素在正常文檔流中的偏移位置。相對定位完成的過程是先按static(float)方式產生一個元素(並且元素像層一樣浮動了起來)，然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
相對定位與絕對定位最大的區別在於，前者沒有脫離當前文檔流而後者已經脫離了當前文檔流。脫離目前文件流的意思是，該元素的前後元素在計算位置和偏移時將不再計算該元素的大小和位置。

固定定位

position: fixed，表示固定定位，與absolute定位類型類似，但它的相對移動的座標是視圖（螢幕內的網頁視窗）本身。由於視圖本身是固定的，它不會隨瀏覽器視窗的捲軸滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內視圖的某個位置，不會受文件流影響，這與background-attachment:fixed;（用於定位背景圖片的位置）屬性功能相同。
固定定位在某一種場景下很有用，當我們需要在頁面的某一位置固定的展示某一元素，且不受頁面滾動條的影響。例如，常見的「返回頂部」之類的按鈕。

混合使用

現代網頁佈局中，經常將相對定位和絕對定位混合使用，以達到更靈活的目的。如下程式碼，

<style>#box1{width:200px;height:200px;position:relative; /* 前辈元素的定位必须设置为relative */
}#box2{position:absolute; /* 相对于最近的一个定位设置为relative的前辈元素的绝对定位 */top:20px;left:30px;
}</style><div id="box1"><div id="box2">相对参照元素进行定位</div></div>

即，box2相對於box1是絕對定位的。當改變box1的位置時，box1內部的子元素是不會改變的，因為他們都是相對box1絕對定位的。

常見佈局方式(兩列)

兩列情況暫定左側寬為100PX

方法一：

 float + calc().right {width: calc(100% - 100px);
}

方法二：

position / float + margin-left//html部分同上//css.left {  position:absolute;left: 0; /*或 float:left; */  width: 100px;  background: blue;
}
.right{  margin-left: 100px;  background: red;  text-align:center;
}

兩列佈局中，左邊固定，右邊自適應如何實現。

1.左浮動，右邊用margin-left長度為左邊的固定寬度，寬為100%

2.利用的是创建一个新的BFC（块级格式化上下文）来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响。它可以通过以下任何一种方式来创建：

float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
overflow的值不为visible

三列布局左右固定中间自适应

圣杯

思路

首先有三行，头部和尾部各占一行，中间内容区一行，头尾不重要
中间内容分为三列对应三个div,为了先展示中间的主要内容所以把中间那列放前面，然后是左和右对应的div
中间内容自适应宽度为100%，此时已经把3个div所在的父容器占满了，所以想办法让左右2个div放置在左右侧，
左侧采取margin-left取-100%让其在最左侧，

右侧同理取值-200px(像素值为宽度大小)，保证刚好占满自身宽度
这时候测试发现已经有自适应效果了，但是缩小到一定程度页面就出问题了，左右不在了，
所以加上最低宽度就是左右2个DIV的宽度（另外得考虑浏览器默认的body下的margin为8px,做了样式重置不考虑）
这时候发现中间的内容文字被左右遮挡了，对父容器用pading左右值为左右元素宽度，
为什么不对中间的DIV设置padding,我发现设置了不起作用，具体的原因我暂时也搞不懂来龙去脉，
发现padding后左右有留白，这个时候左边需要用 left: -200px;position: relative;来设置DIV位置，
办法确实巧妙。右边实现同理。

这时候发现已经大致有了点样子了，效果也看的到，此时典型的三栏布局，左右固定，中间内容自适应已经完成。

总结：

其实这个布局已经有点年头（圣杯布局），通过左右两块DIV来遮挡了中间div宽度为100%的区域，
然后压缩了三个DIV共有的父容器，来实现对中间内容展示的完善，也使左右2个不在遮挡中间了。
然后我又趁机试了下z-index属性，这里有个小问题要注意（要让z-index起作用有个小小前提，
就是元素的position属性要是relative，absolute或是fixed）

我之前的想法是让中间的内容置于顶层，不受div会因为某种hack导致位置变更遮挡了中间内容。
只需要设置下z-index属性值即可，左右可不设置，也可以设置以防万一，不同浏览器对z-index的默认值解析不同，可能会导致问题。

基本的布局架构就是如此，根据实际项目需求在此架构上完善，或者以后遇到这种类似的问题能打开思路，便算是有点收获了。

核心代码

  <style>body {/*因为浏览器默认body为margin:8px所以多加了16px*/min-width: 616px;
        }header {width: 100%;height: 40px;background-color: darkseagreen;
        }.container {/*height: 200px;*//*overflow: hidden;*/padding: 0 200px;
        }.middle {width: 100%;height: 200px;background-color: deeppink;float: left;/*position: relative;*/
        }.left {width: 200px;height: 200px;background-color: blue;float: left;margin-left: -100%;left: -200px;position: relative;
        }.right {width: 200px;height: 200px;background-color: darkorchid;float: left;margin-left: -200px;right: -200px;position: relative;
        }footer {clear: both;width: 100%;height: 30px;background-color: darkslategray;
        }</style>

<header><h4>Header内容区</h4></header><div class="container"><div class="middle"><h4>中间弹性区</h4><p>
                我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容</p></div><div class="left"><h4>左边栏</h4></div><div class="right"><h4>右边栏</h4></div></div><footer><h4>Footer内容区</h4></footer>

双飞翼

思路

双飞翼布局的方式跟圣杯在前部分是一样，不同之处主要在于如何处理中间的内容块被遮挡的问题
圣杯用padding的思路，使之压缩，但是父容器压缩，左右DIV位置变更，只能用相对位置进行left
设置位移为元素宽度来调整
而双飞翼的路线为采用的方式相比圣杯的父容器padding，
改变的是中间内容的内层div的外边框，相对来说对布局的破坏不大，
但是要采用这种方式又不破坏页面结构，就只能在中间内容div内部的再加个DIV设置margin或padding.
使之内容变相“压缩”等同padding效果，并且不会改变中间内容DIV外部的结构，只是内部的。
细心的人留意下我注释的代码，这里其实还有个CSS浮动的样式问题，出现这种情况有各种方式清除浮动，
我就不多讲解。大概有6种。

清除浮动(常用)

1.一般目前常用就是用：after伪元素给使用的浮动的父容器设置。

     新浪使用方式.clearfix:after{ content: &#39;&#39;;display: block;clear: both;height: 0;visibility: hidden;
        }.clearfix:after{  /*最简方式*/content: &#39;&#39;;display: block;clear: both;
        }

2.给父元素定高

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>.outer{border: 1px solid black;width: 300px;height: 50px;
        }.inner{width: 50px;height: 50px;background-color: #ff4400;margin-right: 20px;float: left;
        }.footer{background-color: #005FC3;width: 200px;height: 100px;
        }</style></head><body><div class="outer"><div class="inner"></div><div class="inner"></div><div class="inner"></div></div><div class="footer"></div></body></html>

3.利用 overflow:hidden 属性

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>.outer{border: 1px solid black;width: 300px;overflow: hidden;zoom: 1;/*兼容 IE*/
        }.inner{width: 50px;height: 50px;background-color: #ff4400;margin-right: 20px;float: left;
        }.footer{background-color: #005FC3;width: 200px;height: 100px;
        }</style></head><body><div class="outer"><div class="inner"></div><div class="inner"></div><div class="inner"></div></div><div class="footer"></div></body></html>

核心代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>双飞翼</title><style>header {width: 100%;height: 40px;background-color: darkseagreen;
        }.container {/*height: 200px;*//*overflow: hidden;*/
        }.middle {width: 100%;height: 200px;background-color: deeppink;float: left;word-break: break-all;
        }.left {width: 200px;height: 200px;background-color: blue;float: left;margin-left: -100%;
        }.right {width: 200px;height: 200px;background-color: darkorchid;float: left;margin-left: -200px;
        }footer {width: 100%;height: 30px;background-color: darkslategray;clear: both;
        }.div-middle {margin: 0 200px;/*padding: 0 200px;*/
        }</style></head><body><header><h4>Header内容区</h4></header><div class="container"><div class="middle"><div class="div-middle"><h4>中间弹性区</h4><p>
                    我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容</p></div></div><div class="left"><h4>左边栏</h4></div><div class="right"><h4>右边栏</h4></div></div><footer><h4>Footer内容区</h4></footer></body></html>

End

本篇只做阶段性的初级总结，原谅我没有贴出代码的效果图，以后有机会再扩展并进行效果图片展示，希望大家自己在编辑器下尝试效果。

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流

以上是CSS原生佈局方法有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Grunt壓縮圖片和JS實例詳解下一篇：Grunt壓縮圖片和JS實例詳解

看更多