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

This article mainly explains the "css size frame overflow how to deal with", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "css size frame overflow how to deal with" it!

Web front-end foundation-css- size frame

Dimensions and borders:

I. Dimension

The width and height of an in-line element cannot be set, and its height is supported by the height of the content in the element.

The width and height of the inline block element can be set. When the inline block element does not set the width and height, the width and height of the inline block element is its default width and height.

Block-level element: width and height can be set, but if width is not set, the default width is 100% of the width of the parent element of the block-level element; if no height is set, the default height of the block-level element is the height supported by the content inside the block-level element, if there is no content in the block-level element, the default height is

II. Overflow handling

When the amount of content in an element is too large and the size of the element is not large enough to fully accommodate the content in the element, overflow imagination will occur. The default overflow situation is vertical overflow of content that cannot be accommodated, and the overflow content is displayed. The code is as follows:

Document div {width:200px; height:200px; background-color:yellow;} Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea delectus at nobis consectetur doloremque aliquam ratione repudiandae, incidunt temporibus quis aperiam animi iusto, consequuntur cum facilis quos perspiciatis voluptates ullam?

Here are several values for overflow:

Overflow:scroll (add scroll bars horizontally and vertically regardless of overflow)

Hidden (hide overflowed content) auto (only add scroll bars where there is overflow)

Visible (default)

Common block-level elements: div, h series, li, dt, dd, and p tag elements;

Common inline elements: span, a, b, I, u, em; method to achieve horizontal overflow: horizontal overflow can be achieved by setting the width of the block-level element or ha'e inline block element that holds the content to be larger than the width of its parent element

3. Frame border

Abbreviation for border setting: border:width style color;

Width: the width of the border (that is, the thickness of the border);

Style: the style of the border line, in most cases, the value is solid (the border line is solid), of course, there are other values;

Color: the color of the border line;

Individually sets whether there is a border in a direction: border-top/border-left/border-right/border-bottom:width style color

Shadow of the border: box-shadow:h-shadow v-shadow blur spread color

H-shadow: offset of horizontal shadow

V-shadow: offset of vertical shadow

Blur: the blur distance of the shadow. The higher the value, the more blurred it is.

Spread: size of shadow

Color: color of shadow

5. Box model

Box model-how to calculate the actual space occupied by the element on the page

The actual occupation width of the default element in the browser:

Left outer margin + left border + left inner margin + content area width + right inner margin + right border + right outer margin

The default elements of the browser actually occupy height:

Upper outer margin + upper border + upper inner margin + content area height + lower inner margin + lower border + lower outer margin

* outer margin margin: units are px and%, px: the distance of how many pixels of direct displacement due to the influence of changing the border distance;%: the distance of displacement is the percentage of the width of the parent element

The special values of margin are auto (automatically calculate the left and right margins of block-level elements, so that their block-level elements are horizontally centered within the range of parent elements. Ps:auto cannot be vertically centered for block-level elements, but can only be set for horizontal centering only valid for block-level elements. The value of padding (inner margin) has no auto.

Box-sizing: the default is content-box, that is, the set width (width) is only the width of the content of the element. If the value is set to border-box, the width is actually the width of the content area of the element + border-width+padding (left and right margin), and of course the height is the same.

Summary

Block level element

Inline element

Inline block element

Setting width and height is valid. If you do not set the width, the width is 100% of the width of the parent element. If the height is not set, the height depends on the content.

Setting width and height is not valid. Width and height are supported by content.

Setting width and height is valid. Does not set, comes with default width and height, width and height are 0px.

Monopolize a line

Share one line with other inline elements / inline blocks

Share one line with other inline elements / inline blocks

The upper and lower left and right outer margins are valid.

However, when a block-level element is wrapped by another block-level element, if the margin value of the wrapped block-level element is set to the left and right margin, then the block-level element only moves horizontally, but if b sets a upper and lower margin, the parent element will move up and down as it moves up and down, but it will not move left and right, always keeping the relative position of the parent and child block-level elements unchanged.

The upper and lower outer margin is invalid, the left and right outer margin is valid.

The upper and lower left and right outer margins are valid.

Thank you for your reading, the above is the content of "how to deal with css size frame overflow". After the study of this article, I believe you have a deeper understanding of how to deal with css size frame overflow, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.