Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about how to achieve the layout and Header in html5+css3. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Our layout on mobile phones usually looks like this:

Among them, the head is very important to the design of the whole mobile, and there are many holes:

Generally speaking, the whole header of ① is in fixed layout, and the product of fixed has a lot of holes on the mobile side.

② in Hybrid applications, Header often plays a different role, first of all to complete the function of webview (window) as a container, but also to call the interface provided by native

The implementation of Header in Hybrid is often a difficulty, mainly because of the same set of interfaces. It is necessary to ensure that H5 sites and native are in different environments to call the same interfaces and complete different functions.

If ③ uses the header provided by native in Hybrid, mask cannot be covered in full screen, and Header customization will become difficult; but if Header provided by H5 is used in Hybrid, in case js reports wrong, it will lead to devastating fake death, and users will not be able to get out except to close the process.

PS: the problem of fake death caused by js error can be solved with a simple a tag. It has nothing to do with our content today and will not be expanded.

Obviously, the above content has nothing to do with today's article, our main content today is:

Using float and Flexbox to realize our Header

Xiaochai has many deficiencies in learning CSS, and there are also mistakes in understanding. Please correct them, and thank you for the guidance of the left leader.

Layout of CSS3

Evolution of the layout of CSS

The initial layout mainly depends on tables, and the main problems with tables are:

① is inflexible

② is inefficient and will not be displayed until the end of the entire rendering

When it comes to the CSS2.X series, div+css is very popular. To a large extent, layout has become relatively simple for refactoring, but due to the characteristics of block-level elements, multi-column layout is still a headache.

Div cannot have multiple columns, and span is not suitable as a layout element, so multi-column layout is generally implemented by float, and it is necessary to float clearly when using float.

Occasionally multi-column layouts use positioning attributes (in fact, positioning elements are recommended for a wide range of layouts), but absolute positioning in a small range is not very flexible.

Some new layout mechanisms have been introduced into CSS3, which are obviously not suitable for PC browsers, but luckily I'm a mobile front end, so I don't exist!

CSS3 Box Model-box-sizing

I will not repeat the concept of the box model here. In the browser, the elements will be treated as a box model. Some new concepts have been added in CSS3 to supplement the box model.

We often have code like this in our actual work, causing element overflows and horizontal scroll bars:

The code is as follows:

Because for container elements, his height is only 100px (in fact, he also has 2px's border here, which actually occupies 102px).

Therefore, setting width and margin and other attributes directly causes the real width to overflow, but the block-level element itself is 100% laid out, so you don't need to set it here.

But very often, we will set up, often lead to what horizontal scroll bar what BUG, in order to solve this problem, CSS3 put forward a box-sizing feature

The code is as follows:

Box-sizing: content-box | border-box

① content-box, which is the default value, consistent with CSS2.X

② border-box. Once this property is set, it will behave like IE7. If the values of width and margin are set, width will be reset and margin will still have an impact.

PS: in fact, both event bubbles and IE box models make sense.

The code is as follows:

Bfc in float layout

Let's use an example to illustrate it, and then analyze it step by step. now let's look at a simple head layout.

The code is as follows:

Blade Demo .fl {float: left;} .fr {float: right;} .tc {text-align: center;} span {display: inline-block; color: # 099fde;} back more homepage I am the title

One difference in the above code is the .tc class, one overflow and one without setting the whole result is like this.

The above is a common layout of header, but whether or not to set overflow for block-level elements directly affects the true width of tc. What is the reason for this?

As we said earlier, in a web page, each element will behave like a box, and different types (display) will produce different results.

In js, an object is affected by its execution environment, or a js object cannot exist without its execution environment. The whole element is actually a program object for the browser, and it also has its dependent object. Here the so-called object is our formatting context.

BFC is a block-level formatting context, and the layout of block-level elements will be affected by it. It is an independent rendering area, which is like a sandbox, and the inside will not pollute the outside.

Not all block-level elements form a corresponding formatting context. Here, as with js, we are generally in a window environment and are only in a certain function execution environment if necessary. Of course, we have a way to make an element create its own independent environment.

Element triggers (generates) BFC:

The ① root element itself creates a BFC

When ② float is not none

③ positioning elements, elements that are detached from the document stream

④ display is an element of inline-block or flex (IE7's trick to simulate inline block-level elements is zoom:1+inline)

⑤ overflow is not an element of visible

Going back to our example above, each of our span floats for inline-block, so we maintain an independent BFC, so what are the rules for BFC layout? I'll pick a few key points here:

Elements within ① BFC are arranged one per row. Refer to the layout of block-level elements here.

The up-down distance between ② elements is determined by margin, and elements in the same BFC are superimposed by outer margins.

The left side of each element of the ③ (including the margin-left), in contact with the left border of the containing block (the area within the padding), for float elements

The ④ BFC area will not overlap with floating elements, and floating elements within BFC will participate in height calculation (critical)

In general, our div is a block-level element, under the BFC of the root element, so it should be spread horizontally, 100% wide, as shown above

However, after setting overflow, the situation changes. The div element generates a separate BFC space, and the whole layout will change.

According to the above criteria, the BFC region does not overlap with the floating element BFC region, and the space occupied by the whole div is squeezed by the floating element, which is the reason for its width change.

Here is the difference between div triggering bfc and not triggering. The text around the floating element is the best explanation:

Introduction to Flexbox

To put it simply, you don't need to pay attention to the support. The mobile support is good, and you don't have to make concessions for that 5% share, and just use the current upgrading speed of domestic mobile phones.

Flexbox (scalable layout) is proposed so that the width change of the subitems in the root element can always fill the entire element, and the layout of the subprojects can always perform well:

① does not overflow container elements

② will not change lines.

If there are too many ③ projects, it will automatically get smaller when it is crowded.

For example, a scenario like this:

There is no application for Flexbox, the realization of this function is very annoying, and even if resize god horse, he will not change careers, it is essential medicine at home ah!

As you may find from here, the performance of Flexbox, which is somewhat similar to the table, does not overflow the container.

Containers and projects

Now display has added a common attribute: flex | inline-flex; as mentioned earlier, after setting, a separate formatting context is created for the container, and the layout in the container is specialized.

The properties of the container include:

① scalable flow direction flex-direction

① scaling stream direction flex-direction. Default is row.

② scaling line feeds flex-wrap, and scalable items sometimes overflow the container. This property sets whether the project is single-line or multi-line. Default is not changed.

PS: the container also has a flex-flow to set the above properties at the same time

③.

Container project settable properties include:

① display order

② side axis alignment, one is align-items, you can set anonymous items to be aligned with all items, and the other is that align-self is used to override the default alignment on individual items. For anonymous items, the align-self value is the same as the align-items of the associated scaling container.

③ scalability, which is used to change the height or width of the project to add available space.

④ telescopic line.

PS: I didn't come across the above introduction when using this knowledge, and I didn't understand it at all.

As a rookie here, in practical use, the key attribute used is the flex property for the item project, which determines the width, expansion ratio, and shrinkage ratio of the project.

The code is as follows:

.flex {display: flex;} Project one, Project two, Project three, Project four.

When the container element is set to flex, the internal formatting object is changed, so the internal layout follows the flex rule. Even the block-level element div is arranged horizontally. Here, if you set the flex attribute for its child elements

The code is as follows:

.flex > div {flex: 1;}

Then the area occupied by each element is the same, which is really good! This will happen if you manually set flex: 2 for project 2 and manually set the width for project 3

The code is as follows:

Item one

Item 2

Item 3

Item 4

Here, the width of project 3 is determined by min-width, which directly affects the width of other projects, but in any case, the width of project 2 is twice that of other basic projects.

PS: some time ago, flex:2 was parsed into flex:0.5 on a Samsung browser, and I looked at Bonzi's phone and got drunk.

The code is as follows:

CodePen-A Pen by ericlva * {margin: 0; padding: 0;} ul {list-style: none;} html, body {height: 100%;} .font {width: 650px; margin: 10px auto; line-height: 20px;} .mod {display:-webkit-flex; display: flex; width: 600px; margin: auto; text-align: center;} .mod li:nth-of-type (1) {- webkit-flex: 11 200px Flex: 11 200px; background: red;} .mod li:nth-of-type (2) {- webkit-flex: 12 300px; flex: 1 2 300px; background: green;} .mod li:nth-of-type (3) {- webkit-flex: 13 500px; flex: 1 3 500px; background: yellow;} A B C

Total spindle width 600px, child elements set flex-basis, after addition, 200+300+500=1000px, child elements overflow 400px

The child element sets the contraction factor, so the total width is: 200*1+300*2+500*3=2300px

The amount of spillover of child elements is:

Avu 2001Universe 2300 ≈ 2ax 23, then use 2Action23hammer 400 Universe 35

BRV 300 pound 2300 ≈ 2pm 6ax 23, then use 6ax 23pm 400 Universe 104

CRV 500 quarter 3 ≈ 23, then use 15 hand 23 pound 400 Universe 261

The actual width minus the amount of overflow, the final ABC widths are 200-35mm 165,300-104mm 196500-261mm 239 respectively.

Supplement: flex:flex-grow (expansion ratio) flex-shrink (contraction ratio) flex-basis (base value)

PS: thanks to the Leftist League leader here, CSS is so difficult!

The previous concept is a little complicated and not suitable for beginners like me. Here we do another transformation to remove flex: 1 from the div project, which seems to go back to the first scene, but let's make a change.

The code is as follows:

Blade Demo * {box-sizing: border-box; font-size: 12px;} .flex {display: flex;} .flex > div {width: 50px; height: 40px;} Project one, project two, project three, project four.

The above is my superficial understanding of flex, these things will be made up later.

Implementation of Header layout float implementation of layout

Header is usually laid out on the left, middle and right, and the project on the right is uncertain. I will first implement it with float here.

The code is as follows:

Blade Demo body, button, input, select, textarea {font: 40014px/1.5 Arial, "Lucida Grande", Verdana, "Microsoft YaHei", hei;} body, div, dl, dt, dd, ul, ol, li, H2, H2, h3, h4, h5, h6, h7, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, figure, footer, footer, header, header: 0; header: 0 } body {background: # f5f5f5;} ul, ol {list-style: none;} H2, h3, h4, h5, h6, h7 {font-size: 100%; font-weight: 500;} H2 {font: 600 1.286em/2 Tahoma;} H2 {font: 600 1.286em/2 Tahoma;} h3 {font: 600 1.143em/2 Tahoma;} h4 {font: 600 1em/1.5 Tahoma } address, cite, dfn, em, var, I {font-style: normal; font-weight: 400;} body {padding: 10px;} H2 {font-size: 18px;} H2, h3, h4 {line-height: 2; font-weight: normal;} .fl {float: left;} .fr {float: right;} .tc {text-align: center;}. Cui-header {height: 44px; line-height: 44px Background-color: # 099fde; color: # fff;}. Cui-header > span {width: 44px; height: 44px; display: inline-block;}. Cui-header. Cui-title {height: 44px; line-height: 44px; overflow: hidden;} .cui-icon-more {display: inline-block; width: 30px; height: 30px; line-height: 26px; vertical-align: middle; text-align: center;} .cui-icon-more::before {content: "" Display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 5px; background-color: # fff; box-shadow: 10px 0 # fff,-10px 0 # fff;} returns home title h3 {font: 600 1.143em/2 Tahoma;} h4 {font: 600 1em/1.5 Tahoma;} address, cite, dfn, em, var, I {font-style: normal; font-weight: 400 } body {padding: 10px;} H2 {font-size: 18px;} H2, h3, h4 {line-height: 2; font-weight: normal;} .fl {float: left;} .fr {float: right;} .tc {text-align: center;} .cui-header {height: 44px; line-height: 44px; background-color: # 099fde; color: # fff Cui-header > span {width: 44px; height: 44px; display: inline-block;}. Cui-header. Cui-title {height: 44px; line-height: 44px; overflow: hidden;} .cui-icon-more {display: inline-block; width: 30px; height: 30px; line-height: 26px; vertical-align: middle; text-align: center;} .cui-icon-more::before {content: "; display: inline-block; vertical-align: middle Width: 5px; height: 5px; border-radius: 5px; background-color: # fff; box-shadow: 10px 0 # fff,-10px 0 # fff;} returns the home title

Http://sandbox.runjs.cn/show/vpbscpn4

And then implement it with flex.

The code is as follows:

Blade Demo *: not (img), *: before, *: after {box-sizing: border-box;} body, button, input, select, textarea {font: 400 14px/1.5 Arial, "Lucida Grande", Verdana, "Microsoft YaHei", hei } body, div, dl, dt, dd, ul, ol, li, H2, H2, h4, h5, H6, H7, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {margin: 0; padding: 0;} body {background: # f5f5f5;} ul, ul {ol: ol } H2, h3, h4, h5, h6, h7 {font-size: 100%; font-weight: 500;} H2 {font: 600 1.286em/2 Tahoma;} h3 {font: 600 1.143em/2 Tahoma;} h4 {font: 600 1em/1.5 Tahoma;} address, cite, dfn, em, var, I {font-style: normal; font-weight: 400;} body {padding: 10px;} H2 {font-size: 18px } H2, h3, h4 {line-height: 2; font-weight: normal;} .fl {float: left;} .fr {float: right;} .tc {text-align: center;} .cui-header {height: 44px; line-height: 44px; background-color: # 099fde; color: # fff; display: flex; align-items: center;}. Cui-header > span {width: 45px; height: 45px }. Cui-header. Cui-title {height: 44px; line-height: 44px; overflow: hidden; width: 100%;} .cui-icon-more {display: inline-block; width: 30px; height: 30px; line-height: 26px; vertical-align: middle; text-align: center;} .cui-icon-more::before {content: "; display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 5px; background-color: # fff Box-shadow: 10px 0 # fff,-10px 0 # fff;} returns the title home

Here we implement the basic layout of Header with float and flex, but in the case of flex, we feel that the span element is a little crowded, because he doesn't have 45px, in fact he only has 32px.

This is caused by the various deviations in front of us. I am also groping for the specific reasons here. I will not discuss it here for the time being. There will be a special learning blog of flex.

The realization of Header js

In fact, the application and structure of Header is not so simple, about its js implementation, we will talk about it later, to be continued.

After reading the above, do you have any further understanding of how to implement layout and Header in html5+css3? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.