Summarize several common examples of div+css layout

Learning the front-end HTML and CSS technology, the most important thing is to practice, no matter how many friends have seen the tutorial, video lessons or related books, only to practice in order to have a new understanding of these. Sometimes look at someone's code at a glance can understand, but they do not know how to write, sometimes do not understand the technical knowledge and problems, how to think also do not understand and so on. This article will introduce to friends a variety of common div+css layout methods and practical skills.

DIV + CSS Layout related content

1. DIV+CSS layout Style Detailed

A meets the standards of the company, Microsoft and other companies are supporters of the consortium.

B can be the layout of Web pages, fonts, colors, backgrounds and other graphic effects to achieve more precise control, adjustment more convenient, now many sites use P+CSS framework mode, more confirm p+css is the trend

C separates the format and structure, facilitates the reuse of formats and maintenance of Web pages, and makes it easier to work together in team development to reduce the correlation

The great advantage of the D CSS is shown in the introduction code, making the volume smaller, downloading faster, saving a lot of bandwidth, and it is well known that search engines like concise code.

Using CSS style sheet, you can point all the pages on the site to the same CSS file, so that many pages can be updated at the same time.

2. Code sharing for Html+css layout tips

We all know that everyone has a different hobby, some people like to eat sweets, some people like to eat spicy things, some people do not like to eat celery, some people do not like to eat mutton and so on. Some of the elements in CSS are the same, some of them are only interested in milk, some just like to eat nuts and jelly, and hate milk. And Vertical-align, is a more picky eaters, it just like to eat jelly, grew up eating jelly, no jelly, it will make a temper, you ignore. I call it the "jelly-dependent element", also known as the "Inline-block dependency element", meaning that only one element belongs to the inline or inline-block (Table-cell can also be understood as inline-block level), The Vertical-align property on the body will only work.

3. Solution of Adaptive height in div+css layout

It is not easy to move from a fixed, pixel-based design approach to a resilient, relative design approach. But if used properly, it can be a natural selection to enhance affinity and ease of use without sacrificing design.

It may be easier to adopt a printed fixed design, because if the dimensions are not changed, then there are relatively few things to consider. But if you adopt a flexible design approach, you can make the most of your computer's display and browser.

4. Detailed description of the CSS layout of the Grail layout and the two-wing layout example

In the HTML code, the middle section is first placed in the front of the container, and then the Left,right
1) Set all three Float:left, position:relative (because the relative positioning will be used later)
2) Middle Set width:100% fills a line
3) Middle occupy a line at this time, so to pull left to the middle row of the leftmost, using margin-left:-100%
4) then left to pull back to the left side of the middle line, but will cover middle content of the ieft, to pull out middle content, so in the peripheral container plus padding:0 210px
5) Middle content pulled out, but left also followed out, so to restore, the left to use relative positioning left:-210px
6) In the same vein, right is pulled to the rightmost side of the middle line, using margin-left:-210px,right:-210px

5. Must-see CSS layout tips to share

In order to avoid the bad experience of left and right scroll bars, you can use Max-width when the width of the page is shrinking. The page is smaller than the width of the hour, will automatically shrink Oh ~

After you set the Box-sizing:border-box on an element, the width is not changed by setting padding and border after the widths are determined. You can set the global

The size of the border adaptive content, without overflow

6. CSS Layout center alignment, left fixed width right Adaptive detailed introduction

CSS page layout is the most basic skills of web front-end development, this article will introduce some common layout methods, involving the box layout, column layout, flex layout and other content. In this article, you can see some methods for horizontal vertical centering, fixed width on the left, and adaptive on the right.

Related questions

1. CSS layout table cellspacing

2. Foot layout and CSS layout issues

3. CSS Layout Setup Issues

"Recommended"

1. Div+css layout Getting Started Tutorial: 5 DIV+CSS 0 Basic Introductory tutorials recommended

2. DIV+CSS Box Model Knowledge Summary, easy to master the Div+css layout