Posts in current category
May 04, 2021 01:00 CSS
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 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
as the distance
the left inner boundary to the
the distance from
upper inner boundary to the lower inner
The layout of the document can be determined by combining different widths, heights, margins, and margins.
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.
widthelement. ( where margin-left, margin-right, width can be set to auto ) is set
autowill 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
widthare set to 100px, the left margin
automargin will be 200px. Y ou can
autobridge the gap between the actual value and the required synthesis. ck.
autothe width is not enough for the width of the parent block area,
margin-rightset to auto by default
automeet the requirement that the sum is equal to the parent block.
margin-bottomalso be set to
auto. ( If
autothen they are automatically set to 0).
float ( left , right , none )
noneis generally used inside the document to override the style table, and none is generally
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). )
relativecontains blocks consisting of the nearest block-level box, table cell, or in-row block.
positioncontains an ancestor element whose most recent
staticis not static
spansuch 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-blockA t the same
display:inline-blockthe child element itself has inline properties, so
text-align：centercenter the child element horizontally among the parent element as a whole.
display:inline-blockyou can make an
floatown width and height without the float property, while at the same time making the element centered on the parent element.
display:inline-blockfound that IE6 and IE7 look the same as other browsers, but the fact is that ie7 and earlier
inline-blocktriggers the layout of the
display: inline-blockto 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: inlinethat it does not produce line changes. W ill
display:inline;Written on the same style,
display:inlineso 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
layoutdoes not disappear).
display:inline-blockelements. W orkaround: The parent element
font-size:0to remove the horizontal white space of the block element in the row, and the
vertical-alignto 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!
flex-wrap: wrap;// 显示 wrap一行显示不完的时候换行
flex-flowis set to
columnthe scalable items are arranged from top to bottom.
-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+ */ }
content: " ";
border: 3px solid lightblue;
100% height "spare tire" by after or
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:
results are obtained by transforming the display into a table and then using a vertically centered approach.
This element is displayed as a block-level table (similar to
with line breaks before and after the table).
This element is displayed as a table cell (similar to
Method 3 (thanks to super curriculum Hu Jin brother tips), flexbox layout:
Telescopic container: An
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
item is the width
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
The parent element sets the width height, and then sets the property
/? Horizontal center . . .
line-height = height
you want to
layout, refer to the
and Elastic Box Model"
1) Let the picture on the left float left or position absolutely,
2) Let the picture on the left float or position absolutely,
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,
/?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
horizontal label, floating with):
word-wrap: break-word; //性允许长单词或 URL 地址换行到下一行
word-break: normal; //让浏览器实现在任意位置的换行
is a control wrap.
whether or not a word is broken.
Force English words to break lines
lithan a certain length, to omit the sign display
In analog IE6, the width of the inner element is
2)width:-moz-calc(75% -1rem * 2); w
idth:-webkit-calc(75% - 1rem * 2); w
idth: calc(75% - 1rem * 2);
value is subtracted
Adding an extra container to the inside of the element
this new internal container is a fix and is supported by many browsers.
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.
autothe container's contents have
rightthe 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.
clearto clear to clear the float. N ote that for IE6 and IE7 browsers, add a zoom:1 to