Posts in current category

The basic method of CSS layout and css layout techniques


May 04, 2021 01:00 CSS


Table of contents


css is the coat of a web page, the page is good or bad depends on the css style, and layout is the more important part of css, when the product put a requirement design into the hands, I first want to do is a little bit of anatomy of these requirements, the first thought is html structure, according to the compatible browser, data stitching, code maintainability, scalability to choose css layout method. Sometimes, a good layout can reduce a lot of code, with css to deal with the layout of the web page there are a lot of tricks, let's introduce you to some examples of css layout techniques and css layout model.


The underlying layout method of css

1. Introduction to block areas

<body>

<div>

<p>这是一个段落.</p>

</div>

</body>

The inclusion block of the p element is the div element because as a block-level element, a table cell, or an in-row element, which is the most recent ancestor element, similarly, the div's inclusion block is body. Therefore, the layout of p depends on the layout of div, while the layout of div depends on the layout of body.

Block-level elements automatically restart a row.


2. Block-level elements
Normal flow layout

The basic method of CSS layout and css layout techniques

Typically, the width of an width as the distance from the left inner boundary to the height the distance from the upper inner boundary to the lower inner boundary.

The layout of the document can be determined by combining different widths, heights, margins, and margins.


Horizontal layout

Simple rule that the sum of the horizontal parts of a block-level element box in a normal stream is equal to the width of the parent element . Suppose there are two paragraphs in a div, and the margin of the two paragraphs is set to 1 em, and the width of the paragraph content width is added to its left, right inner margin, border, or margin together exactly the width of the div content.


7 properties: margin-left border-left padding-left width padding-right border-right margin-right

The values of these 7 properties together must be the width value of the width element. ( where margin-left, margin-right, width can be set to auto ) is set auto will automatically match to the width of the parent block according to the above rules, for example, the 7 properties must be 400 pixels, no margin or margin is set (default 0) and the right margin and width are set to 100px, the left margin auto margin will be 200px. Y ou can auto bridge the gap between the actual value and the required synthesis. ck. auto auto the width is not enough for the width of the parent block area, margin-right set to auto by default auto meet the requirement that the sum is equal to the parent block.

If the two margins are set to auto, they are equally long, so the elements are centered in their father element.

If all three properties are set to auto, the margin will be 0 and the width will be as long as possible.

You can use percentages, but the width of the border cannot be a percentage.

Vertical layout
7 properties: margin-top, border-top, padding-top, height, padding-bottom, border-bottom, margin-bottom, again, the sum of the values of these 7 properties is the parent element height value.

Where, margin-top height margin-bottom also be set to auto . ( If margin-top margin-bottom set to auto then they are automatically set to 0).

3. Floating and positioning (confirming the basic layout)

(1) Floating
When an element floats, the other "wraps" the element, and the floating element sets a width .

float ( left , right , none ) none is generally used inside the document to override the style table, and none is generally none .

Floating elements automatically generate a block-level box.

Floating element rules
A floating element cannot exceed the left and right boundaries of the block that contains it. ( 1,2 left and right boundaries restricted)

The basic method of CSS layout and css layout techniques

If a floating element appears before the floating element, it must be after the floating element (cannot be overwritten) (limited on the left of 2).

The basic method of CSS layout and css layout techniques

If floating elements are added together too wide, they will automatically go down. (The width is limited.) )

The basic method of CSS layout and css layout techniques

The vertical direction must not exceed the top of the block area, the same can not exceed the floating elements above it. (The upper boundary is limited.) )

The basic method of CSS layout and css layout techniques

After the first floating element, the second is at the bottom of it, as they are, and the third is on its right. (2 Upper restricted.) )


The top of a floating element cannot be higher than the top of all previous floating or block-level elements (top is limited). )


The basic method of CSS layout and css layout techniques

The left and right boundaries between floating elements cannot be overwritten, as follows 1,2,3, and cannot be overwritten between (limited between elements). )

The basic method of CSS layout and css layout techniques

Floating elements are placed as high as possible

The basic method of CSS layout and css layout techniques

Floating elements are left to right as much as possible

The basic method of CSS layout and css layout techniques

clear to prevent floating elements from being specified on neither side of the clear element

(2) Positioning
Positioning allows you to define exactly where an element box should appear relative to its normal position, or another element or even a browser window relative to the parent element.

position : static | r elative | a bsolute | f ixed

static : The element box is generated normally

relative : The element box offsets a distance

Absolute : The element box is completely removed from the document flow and is determined relative to its inclusion block. T he containing block may be another element in the document or the initial containing block.

fixed : Similar to absolute, but its inclusion block is the window itself.

Contains blocks:
The root element ( html or body ) , the initial containing block is a window - sized rectangle.

Non-root elements:

- A non-root element, if position relative or relative contains blocks consisting of the nearest block-level box, table cell, or in-row block. static

- A non-root element, if its position contains an ancestor element whose most recent position static is not static absolute

It is important here that an element can be positioned outside its containing block.

css layout tips

1, multi-element level center


Effect:

The basic method of CSS layout and css layout techniques

The image above shows that the effect is centered horizontally for multiple elements, i.e. they can be centered horizontally as a whole, regardless of the base of elements (small black boxes).

In the site layout, many times, child elements use span such as span or block element li labels and the number of labels is variable, and we want this block to always be centered regardless of the number of (the overall width of the child element is variable). T his requires setting the child display:inline-block A t the same display:inline-block the child element itself has inline properties, so text-align:center center the child element horizontally among the parent element as a whole.

main{

text-align:center;

}

div{

display:inline-block;

*display:inline;/*hack IE*/

*zoom:1;/*hack IE*/

}

Using display:inline-block you can make an float own width and height without the float property, while at the same time making the element centered on the parent element.

Defining the display:inline-block found that IE6 and IE7 look the same as other browsers, but the fact is that ie7 and earlier display:inline-block

Under IE, display: inline-block triggers the layout of the layout F or display: inline-block to div only guarantees that the div has the characteristics of a block element (you can set width, height, etc.), but still produces line changes. N ext, you set display: inline that it does not produce line changes. W ill display:inline-block display:inline; Written on the same style, inline-block does not layout so we'll zoom:1 to trigger layout

In addition to the effective methods mentioned above, there is another method:

Trigger block display:inline-block then define display:inline so that block elements are presented as inline objects (two displays have to be placed in two CSS-style declarations in order to have an effect, which is a classic bug of IE, if display:inline-block and then display inline or block layout does not disappear).

div {display:inline-block;...} div {*display:inline;}

Note, however, display:inline-block elements. W orkaround: The parent element font-size:0 to remove the horizontal white space of the block element in the row, and the vertical-align to remove the vertical white space of the block element in the row.


Tip: If you want to set up horizontal vertical positioning of elements, you can refer to the contents of the "How CSS makes elements horizontally positioned vertically" section of this site!

2, bar-gate layout

Effect:

The basic method of CSS layout and css layout techniques

display: flex;

flex-direction: column;//上面两行等同于flex-flow:colomn

flex-wrap: wrap;// 显示 wrap一行显示不完的时候换行

height: 440px;

width: 660px;

A Flexbox layout consists of a flex container and a flex items project in that container.

Retract direction and line-up (flex-flow)

The telescopic container has a CSS property called flex-flow that determines how the scaling project is laid out.

If the telescopic container has a flex-flow value of row, the scaling items are arranged from left to right.

The basic method of CSS layout and css layout techniques

If flex-flow is set to column the scalable items are arranged from top to bottom.

The basic method of CSS layout and css layout techniques

Make a 20%, 60%, and 20% grid layout

.main-content {

width: 60%;

}

.main-nav,.main-sidebar {

-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */

-moz-box-flex: 1;         /* OLD - Firefox 19- */

width: 20%;               /* For old syntax, otherwise collapses. */

-webkit-flex: 1;          /* Chrome */

-ms-flex: 1;              /* IE 10 */

flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */ }


3, the unknown height of multi-line text vertical center


Method one, using display:inline-block plus pseudo-elements: http://codepen.io/floralam/pen/WbBrwV?editors=110

The basic method of CSS layout and css layout techniques

.container{

position: fixed;

left: 0;

top:0;

height: 100%;

width: 100%;

text-align: center;

}

.mask:after{

content: " ";

display: inline-block;

vertical-align: middle;

height: 100%

}

.dialog{

display: inline-block;

border: 3px solid lightblue;

}

box container after 100% height "spare tire" by after or before and its height is consistent with the height of the container, which is centered vertically relative to the "spare tire" and visually centered vertically relative to the container.


Method 2 (thanks to the tips of brother Hu Jin of the super curriculum), use display:table-cell:


http://codepen.io/floralam/pen/yNeMPg

The display results are obtained by transforming the display into a table and then using a vertically centered approach.

display:table This element is displayed as a block-level table (similar to <table> with line breaks before and after the table).

display:table-cell This element is displayed as a table cell (similar to <td> <th>


Method 3 (thanks to super curriculum Hu Jin brother tips), flexbox layout:


http://codepen.io/floralam/pen/yNeMvM

flexbox properties:

Telescopic container: An display:flex display:inline-flex
Scalable item: A child element of a telescopic container
Spindle, spindle direction: The user agent configures the scaling project along the spindle of a telescopic container, which is an extension of the spindle direction.
Spindle start, spindle end: The configuration of the telescopic item starts at the starting edge of the container and ends at the spindle end.
Spindle length, spindle length properties: The width or height of a telescopic item in the direction of the spindle is the spindle length of the project, and the width item is the width height which is determined in the direction of the spindle.
Side axis, side axis direction: The axis perpendicular to the spindle is called the side axis and is an extension of the side axis direction.
Side axis start point, side axis end: The configuration of the telescopic row that fills the item starts at the starting edge of the side axis of the container and ends at the end edge of the side axis.
Side axis length, side axis length attribute: The width or height of the telescopic item in the direction of the side axis is the side axis length of the project, and the side axis length attribute of the telescopic item is the "width" or "height" attribute, which is determined in the direction of the side axis.


In addition, for a single line of text, setting line-height=height is simpler:


http://codepen.io/floralam/pen/eNJvyE

The parent element sets the width height, and then sets the property

text-align:center; /? Horizontal center . . .
line-height: 300px; /* line-height = height */


Tip: If you want to flexbox layout, refer to the "CSS3 Flexbox and Elastic Box Model" section.

4, multi-column adaptive layout


For mobile browsers: http://codepen.io/floralam/pen/NPVwgz?editors=110

.container{

display:-webkit-box;

}

.left{

-webkit-box-flex:1;

}

.right{

-webkit-box-flex:1;

}

Implements the left and right elements, and the text of the right element does not overflow to the left position.
The basic method of CSS layout and css layout techniques

1) Let the picture on the left float left or position absolutely,

http://codepen.io/floralam/pen/wBbPPj

.right{

margin-left: 150px;

}


2) Let the picture on the left float or position absolutely,

http://codepen.io/floralam/pen/gbJogQ

.right{

overflow: hidden; / - Let the text on the right and the picture on the left automatically column out /

}


3) The picture on the left is set to float left,

http://codepen.io/floralam/pen/bNyaaX?editors=110

.right{

display: table-cell; /?Let the text on the right and the picture on the left automatically column out /

}


The generic class statement for a two-column or multi-column adaptive layout is block horizontal label, floating with):

http://codepen.io/floralam/pen/vEwpjV

.cell{

padding-right:10px;

display: table-cell;

*display: inline-block;

*width: auto;

}


The basic method of CSS layout and css layout techniques

5, force not to line up

white-space:nowrap;

Line-up

word-wrap: break-word; //性允许长单词或 URL 地址换行到下一行

word-break: normal; //让浏览器实现在任意位置的换行

word-wrap is a control wrap. break-word whether or not a word is broken.


Force English words to break lines

div{

word-break:break-all;

}

6, li than a certain length, to omit the sign display

http://codepen.io/floralam/pen/zxQjrK

nowrap li{

white-space:nowrap;

width:100px;

overflow:hidden;

text-overflow: ellipsis;

}


7, left navigation

The basic method of CSS layout and css layout techniques

.nav{

position:relative;

float:left;width:190px;

margin-right:-190px;

background:lightblue;

}

.container{

float:right;

width:100%;

background:pink;

}

.content{

margin-left:200px;

}


8, repair the sidebar

Adding navigation and main content to the outer container, when the width of the navigation and the main content plus the value of the inner and outer margins is greater than the width of the outer container minus the value of the inner margin, results in the navigation and the main content (one of which, the element behind the html code row) is squeezed.

The basic method of CSS layout and css layout techniques

http://codepen.io/floralam/pen/XJLRYq?editors=110


Solution:

1) Section box-sizing:border-box In analog IE6, the width of the inner element is width not width padding and margin. margin


2)width:-moz-calc(75% -1rem * 2); w idth:-webkit-calc(75% - 1rem * 2); w idth: calc(75% - 1rem * 2); width value is subtracted padding property


3) http://codepen.io/floralam/pen/yydPOE

Adding an extra container to the inside of the element padding this new internal container is a fix and is supported by many browsers.


9, css depicts triangles

http://codepen.io/floralam/pen/azgGmZ

Much of the title about using css3 to depict a particular image, using code instead of a picture implementation (multiple mountain packs, back to the top), depends on depicting triangles.


10. Tips for clearing floats

The basic method of CSS layout and css layout techniques
In a non-IE browser, such as Firefox, when the container's height auto the container's contents have float left right the height of the content, causing the content to overflow outside the container and affect (or even destroy) the layout. T his phenomenon is called floating overflow, in order to prevent the appearance of this phenomenon CSS processing, called CSS clear floating.

1) Add the last element of the "clear:both"-lt;/div>


2) Parent element setting overflow: hidden;


3) Using CSS: after pseudo-elements

An invisible space "020" or "." is added to the inner element of the container by the CSS pseudo-element, and clear to clear to clear the float. N ote that for IE6 and IE7 browsers, add a zoom:1 to clearfix zoom:1; Trigger haslayout