前端常用布局方式_前端页面的设计

前端常用布局方式

页面的布局方式是块状元素依次从上至下、从左至右进行布局

布局的作用
对公司、企业而言视觉极佳的布局效果能让在瞬间抓住客户的心，能吸引潜在的合作者。

适用性 ，根据不同行业情况进行不同效果的制作。
吸引性，视觉效果优秀的布局效果能瞬间吸引客户。
布局方式
一、静态布局
静态布局是最为原始的布局方式，没有什么技术性可言，往往是计算机行业刚刚入门的小白使用的布局方式。制作的网页上的元素尺寸一律以px为单位。

.bor{
    width: 360px;
    height: 255px;
    border: 1px solid black;
    margin-bottom: 30px;
}
.bor p{
    color: #000000;
    font-size: 16px;
}
.border-pic{
    width: 360px;
    height: 255px;
    margin-left: 10px;
    margin-top: 10px;
    overflow: hidden;
}
.border-pic img{
    width: 360px;
    height: 255px;
}

布局特点： 页面上的布局是按最初写代码时候的布局方式进行布局的，常规的pc网站是进行设置了宽度值进行布局的，不会随着pc端的屏幕的大小而变化。
优点: 这种布局方式不管是对资深的前端开发工程师还是刚入门的小白来说都是最简单的，最让人容易以接受、学习的，没有我们所说的兼容性的问题。这种布局方式大多用在门户网站和企业的官网上，这些官网的设备的尺寸是固定的，这种布局方式往往是最简单的方法。
缺点： 不会随着pc端的屏幕大小而变化。

二、弹性布局（flexbox）
弹性布局可以简便、完整、响应的实现各种页面上的布局。与静态不同的是，使用em或rem单位（lem=16px，1rem=10px）进行相对布局，相对使用百分比更加方便、灵活，相应同时支持浏览器的字体大小调整和缩放的等正常显示。
优点：
1.适应性强，在做多种不同的屏幕分辨率不同的界面是非常使用。
2.随意按照宽度、比例划分元素的宽高。
3.可以轻松的改变元素的显示顺序。
4.网页布局实现快捷，维护起来更加容易。
如果做移动端时，如果客户对细微的之处的要求不高，使用弹性布局进行制作是最好的选择，一份css+一份js调节font-size搞定。
缺点： 浏览器兼容性较差，只能兼容到IE9及以上。

三、自适应布局（bootstrap）
自适应布局分别为不同屏幕不同分辨率定义布局，即是创建多个静态页面，每个静态页面对应一个屏幕分辨率的一个范围内。在改变不同的屏幕分辨率可以切换到不同的静态布局上，但是布局中的元素位置会发生改变，但是在每个静态布局中，页面中的元素不会随着窗口大小的调整发生变化。使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。
优点：
1.对网站的复杂程度兼容性更大；
2.对开发工程师来说制作的成本代价更低；
3.代码执行效果更高效；
4.测试时更加容易，运营相对更加精准。
缺点： 在现如今的移动端设计百花齐放的时期之下，同一个网站往往需要为不同的设备制作不同的页面，不但会增加开发成本，还会因为客户的需求改变时，可能会改动多套代码、流程相比较来说较繁琐。

四、流式布局（fluid）
流式布局的布局方式是页面的元素的宽度按照屏幕的分辨率进行适配的调整，但是整体布局不变，也称之为栅栏系统。使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
缺点： 屏幕大小变化时，页面元素也随之变化但是布局不变。这就会因为如果屏幕太大或太小都会布局时元素无法正常显示。

五、响应式布局
响应式布局是css3增加的新布局方式，该布局方式2010年提出来的一个概念，说白了就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。响应式几乎成为优秀页面布局的标准。
设计方法： 媒体查询+流式布局。通常使用@media媒体查询，和网格系统配合相对布局单位进行布局，实际上说白了就是综合响应式等技术通过css给单一网页不同设备分辨率返回不式时的技术。
优点： 适应pc端和移动端，如果有足够的耐心，页面效果会很完美。
缺点：
1.只能适应主流的宽高；
2.如果匹配足够多的设备屏幕的大小，对于工程师来说工作量不小，设计更需要多个版本，工作量增大。

六、网格布局（grid）

网格布局（Grid）是最强大的 CSS 布局方案。 Grid 将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。

特点：

1. 固定和灵活的轨道尺寸；
2. 可以使用行号，名称或通过定位网格区域将项目放置在网格上的精确位置；
3. 可以将多个项目放入网格单元格或区域中，它们可以彼此部分重叠。

缺点：

兼容性比较差。

七、浮动布局
浮动布局进行调用浮动属性改变页面中元素的位置，浮动布局应该是目前各大网站用的最多的一种布局方式了，但是也特别复杂。浮动元素是脱离文档流的，但不脱离文本流。浮动元素有左浮动（float : left）和右浮动（float : right）两种

.lian{
    width: 90%;
    padding-left: 5%;
}
.lian img{
    float: right;
    margin-top: -180px;
}
.phone ul li{
    list-style: none;
    margin-top: 50px;
    margin-left: 70px;
    color: #808080;
}
.phone ul li img{
    position: absolute;
    margin-left: -80px;
    float: left;
    margin-top: -5px;
}
.view{
    margin-top: 50px;
    margin-left: -5px;
    float: left;
}
.view input{
    width: 120px;
    height: 40px;
    border-radius: 6px;
    border: 1px solid #3CB371;
    background-color: #3CB371;
    font-size: 16px;
    color: white;
}

优点： 兼容性比较好
缺点： 浮动带来的影响比较多，页面宽度不够的时候会影响布局。

八、定位布局
定位布局时利用position属性控制页面元素设置一些不规则布局。
定位元素的各个属性：
1.static 静态定位： HTML元素的默认值，即没有定位，元素出现在正常的流中。

div.static {
    position: static;
    border: 3px solid #73AD21;
}

2.fixed 固定定位： 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。

p.pos_fixed{
    position:fixed;
    top:30px;
    right:5px;
}

3.relative 相对定位： 相对定位元素的定位是以自身为参照物。对象不可层叠、不脱离文档流，移动相对定位元素，但它原本所占的空间不会改变。通过 top,bottom,left,right 定位。

h2.pos_top
{
    position:relative;
    top:-50px;
}

4.absolute 绝对定位 absolute 定位使元素的位置与文档流无关，因此不占据空间。元素和其他元素重叠。通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位。

h2{
    position:absolute;
    left:100px;
    top:150px;
}

5.sticky 粘性定位 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

6.z-index 因为页面中元素的定位与文档流无关，所以定位的元素可以覆盖在文档流上面。所以z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面/后面）。z-index的值必须取正整数，数值越大显示的优先级就越高。 如果两个定位元素重叠，而且还没有指定z - index，name最后定位在HTML代码中的元素将被显示在最前面。