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

Today, the editor will share with you the relevant knowledge points about the dimensions and borders of the Web front end. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Size

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

Border border

Abbreviation for border setting: border:widthstylecolor

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: color of border Lin

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

Shadow of the border: box-shadow:h-shadowv-shadowblurspreadcolor

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

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 contents of the element, overflow imagination occurs; the default overflow is vertical overflow of content that cannot be accommodated, and the overflow content is displayed.

Here are several values for overflow:

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

Hidden (hide overflowed content)

Auto (add scroll bars only where there is an 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

The way to achieve horizontal overflow: horizontal overflow can be achieved by setting the width of the block-level element or inline block element that holds the content to be larger than the width of its parent element.

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.

These are all the contents of this article entitled "what are the dimensions and frame knowledge points of the Web front end?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.