CSS原生布局方式

时间 2019-11-13

标签 css 原生布局方式栏目 CSS 繁體版

原文原文链接

前言

网页原生布局的方法其实网上有不少，大概为Flow（流动布局模型）、Float（浮动布局模型）、Layer（层级布局模型）。
css

Flow布局

流动布局模型其实就是默认的网页布局模式。也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。
流动布局将会有两个比较典型的特征，
第一，块级元素都会在所处的最近父级容器元素内自上而下按顺序垂直顺延分布，由于在默认状态下，块级元素的宽度都是100%（即父级元素宽度的100%）。实际上，块状元素都会以行的形式占据位置。以下代码所示，html

<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的左侧。app

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: ''; display: block; clear: both; height: 0; visibility: hidden; } .clearfix:after{ /*最简方式*/ content: ''; 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

本篇只作阶段性的初级总结，原谅我没有贴出代码的效果图，之后有机会再扩展并进行效果图片展现，但愿你们本身在编辑器下尝试效果。

学习过程当中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群343599877，咱们一块儿学前端！