search

Home >Web Front-end >JS Tutorial >What are the CSS native layout methods?

What are the CSS native layout methods?

零下一度
零下一度Original
2017-06-26 09:14:451129browse

Preface

There are actually many methods for native layout of web pages on the Internet, probably Flow (flow layout model), Float (floating layout model), and Layer (hierarchical layout model).
fc430c7db1eecf4621f4fc8a5479f894

Flow layout

The flow layout model is actually the default web page layout mode. That is to say, the HTML web elements of the web page in the default state distribute the web page content according to the flow model.
Flow layout will have two typical characteristics.
First, block-level elements will be distributed vertically and sequentially from top to bottom within the nearest parent container element, because in the default state , the width of block-level elements is 100% (that is, 100% of the width of the parent element). In fact, block elements all occupy positions in the form of rows. As shown in the following code, 

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

As shown in the above code, without the influence of external styles, the width of h1 and div will be 100% (the default width of the page).
Second, under the flow model, inline elements will be displayed horizontally from left to right within the nearest parent container element. 

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

Inline elements do not occupy a line by themselves like block-level elements.

Float layout

Any element is in the entire document flow by default and will not float. When we set float to an element, we can let the element get out of the current document flow and become a floating element.
The following code sets float for the div element so that the two divs can be displayed side by side. 

div{width:200px;height:200px;border:2px red solid;float:left;
}
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>

One thing to note here is that if the float I set for the div is float: right, then div1 will be attached to the right side, and div2 will be attached to the left side of div1.

Layer layout

What is the hierarchical layout model?

The hierarchical layout model is like the very popular layer editing function in the image software PhotoShop. Each layer can accurately position the operation. However, in the field of web design, due to the mobility of web page size, the hierarchical layout model It wasn't a hit. However, there are still conveniences in using hierarchical layout locally on web pages.
Application hierarchical layout often requires the cooperation of positioning attributes. There are 3 positioning types in CSS,

  • Absolute positioning (position: absolute)

  • Relative positioning (position: relative)

  • Fixed positioning (position: fixed)

Absolute positioning

If you want to set the absolute positioning in the hierarchical layout model for the element, you need to set it position:absolute (meaning absolute positioning), the function of this statement is to drag the element out of the document flow, and then use the left, right, top, and bottom attributes to perform absolute positioning relative to its closest parent containing block with a positioning attribute. . If no such containing block exists, it is relative to the body element, that is, relative to the browser window.

Relative positioning

If you want to set relative positioning in the hierarchical layout model for an element, you need to set position: relative (indicating relative positioning), which determines the element through the left, right, top, and bottom attributes. An offset position in the normal document flow. The process of relative positioning is to first generate an element in static (float) mode (and the element floats like a layer), and then moves relative to the previous position. The direction and amplitude of the movement are determined by the left, right, top, and bottom attributes. , the position before offset remains unchanged.
The biggest difference between relative positioning and absolute positioning is that the former has not broken away from the current document flow and the latter has broken away from the current document flow. Detaching from the current document flow means that the elements before and after the element will no longer calculate the size and position of the element when calculating the position and offset.

Fixed positioning

position: fixed, indicating fixed positioning, similar to the absolute positioning type, but its relative movement coordinates are the view (web page window within the screen) itself. Since the view itself is fixed, it will not change as the scroll bar of the browser window scrolls, unless you move the screen position of the browser window on the screen, or change the display size of the browser window, so fixedly positioned elements will always be in A certain position of the view within the browser window that will not be affected by the flow of the document. This has the same function as the background-attachment:fixed; (used to position the position of the background image) attribute.
Fixed positioning is useful in a certain scenario, when we need to display a certain element fixedly at a certain position on the page without being affected by the page scroll bar. For example, the common "return to top" button.

Mixed use

In modern web page layout, relative positioning and absolute positioning are often used together to achieve more flexible purposes. The following code, 

<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>

means that box2 is absolutely positioned relative to box1. When the position of box1 is changed, the child elements inside box1 will not change because they are all absolutely positioned relative to box1.

Common layout method (two columns)

In the case of two columns, the left side width is tentatively 100PX

Method one: 

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

Method two: 

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;
}

In a two-column layout, how to implement the left side being fixed and the right side being adaptive.

1. Float on the left, use margin-left on the right, the length is the fixed width on the left, and the width is 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

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


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

The above is the detailed content of What are the CSS native layout methods?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of Grunt compressed images and JS examplesNext article：Detailed explanation of Grunt compressed images and JS examples

Related articles

See more