May 04, 2021 CSS
1. The underlying layout method of css
3. 1, multi-element level center
5. 3, the unknown height of multi-line text vertical center
6. 4, multi-column adaptive layout
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.
<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.
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.
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
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.
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).
width
.
float ( left , right , none )
none
is generally used inside the document to override the style table, and none is generally
none
.
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). )
position
relative or
relative
contains blocks consisting of the nearest block-level box, table cell, or in-row block.
static
position
contains an ancestor element whose most recent
position
static
is not static
absolute
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*/
}
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.
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
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
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).
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!
display: flex;
Flex-direction: column; // The above line is equivalent to flex-flow: color
Flex-wrap: wrap; // Display WRAP is displayed when it is not finished
height: 440px;
width: 660px;
flex-flow
is set to
column
the scalable items are arranged from top to bottom.
.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+ */ }
.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.
.container{
display:-webkit-box;
}
.left{
-webkit-box-flex:1;
}
.right{
-webkit-box-flex:1;
}
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;
}
white-space:nowrap;
Word-wrap: Break-word; // Sex allows long words or URL addresses to come to the next line
Word-break: normal; / / Let the browser implement a wrap in any location
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;
}
li
than a certain length, to omit the sign display
nowrap li{
white-space:nowrap;
width:100px;
overflow:hidden;
text-overflow: ellipsis;
}
.nav{
position:relative;
float:left;width:190px;
margin-right:-190px;
background:lightblue;
}
.container{
float:right;
width:100%;
background:pink;
}
.content{
margin-left:200px;
}
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.
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.
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.
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