CSS Layout (ii) box model properties

Properties of the box model

Wide Height Width/height

In CSS, you can set an explicit height for any block-level element.

If the specified height is greater than the height required to display the content, the extra height produces a visual effect, as if there is an extra padding;

If you specify a height that is less than the height required to display the content, depending on the overflow property, the scrollbar needs to be set to Overflow:auto.

Auto

The width height and margin can be set to auto. For block-level elements, the width is set to auto, which is as wide as possible. In detail, the element width = contains the block width-element horizontal margin-element horizontal padding Width-element horizontal inner margin;

The height is set to auto, it is as narrow as possible. In detail, the height of the element = exactly enough to contain the height of the inline content

[Note] If you do not explicitly declare the height of the containing block, the percentage height of the element is reset to auto

" Maximum minimum width height"

Min-width | Min-height

Initial value: 0

Applies To: block-level elements and replacement elements

Percent: Width relative to the containing block (height)

Max-width | Max-heightt

Initial value: None

Applies To: block-level elements and replacement elements

Percent: Width relative to the containing block (height)

[note] When the minimum width (height) is greater than the maximum width (height), the value with the minimum width and height is whichever

Internal margin padding

Compared to other properties of the box model (such as a margin that often uses negative values in positioning), padding seems to be a lot more modest, with no compatibility, and no special problems.

For inline elements, the left padding is applied to the beginning of the element, the right padding is applied to the end of the element, the vertical padding does not affect the row height, but it affects its size, and the background color can be seen

[note] The padding cannot be negative

Padding

Initial value: undefined

Percent: Width relative to the containing block

"50%"

Block-level elements can achieve a square effect through padding:50%, because the percentage values for horizontal and vertical padding are determined relative to the width of the containing block, and are often used to move the end head graph

Margins margin

Setting margin margins creates extra white space outside the element, which usually refers to an area where other elements cannot be placed, and the background of the parent element can be seen in this area

Margin

Initial value: undefined

Applies to: all elements

Percent: Width relative to the containing block

[note] For ordinary elements, the containing block is the block-level parent element, and for the anchor element, the containing block is the parent of the anchor. So, the margin percentage of the normal element is relative to the width of the block-level parent element, and the margin percentage of the anchor element is relative to the width of the anchor parent

Margin can be set to negative values, margin and width-height support auto, and margin has very strange overlapping characteristics.

Introduces several key parts of margin margins, including overlapping, auto, and invalid cases

1. Overlap

Premise

?? Margin overlap is also called margin merger, this happens there are two prerequisites

?? 1. only on block elements (excluding float, absolute, inline-block elements)

?? 2, only in the vertical direction (regardless of Writing-mode)

Classification

?? The case of margin overlap

1. Adjacent sibling elements

<style>p{    line-height: 2em;    Margin: 2px 0;    Background-color: LightBlue; display: Inline-block; width: 100%;} </style><p> Brothers one </p><p> Brothers II </p>

2. the parent element and the first or last child element, the parent-child margin overlap is also called the margin pass

<style>.box{    background-color: Pink;    Height: 30px;}. Inner{margin-top: 1em; Background-color: LightBlue;

In the layout of the Web page, because of the margin overlap, we often use margin as a "problem style" with minimal effort. But in fact, it's a big part of it,

So, we want to make the best use of overlap, and we can work with both Margin-top and Margin-bottom in list items. This makes the page structure more robust, with the last element removed or position swapped, without destroying the native layout

2.auto

?? Only Width/height and margin can set auto.

"Why Margin:auto cannot be vertically centered"

?? The horizontal direction can be centered because the width of the block-level element defaults to the parent element, if the width is set to a fixed value, and the left and right margin is set to auto, you can split the remaining space

?? The vertical direction is not centered because the height of the block-level element is the content height by default, not directly related to the height of the parent element, and the up and down margin is set to auto, which is reset to 0

margin:0 Auto;

"Why the picture cannot be centered horizontally using Margin:auto"

?? The picture cannot be centered horizontally, similar to block-level elements that cannot be centered vertically. Because the width of the picture is width by default, it is not directly related to the width of the parent element. Left and right margin set to auto, will be reset to 0

?? So, to center the picture horizontally, you need to set the Display:block element

3. Invalid case

?? 1, inline element vertical margin invalid

?? Because inline element vertical layout is primarily influenced by row height line-height and vertical alignment vertical-align, vertical margin does not affect them, so vertical layout is not affected. In the display mode, the margin area does not display the element background, so it does not affect the display of its own elements, so the inline element vertical margin is not valid. [note] does not include Inline-block

2. Some table class element margin is invalid

<thead> ' <tbody> ' <tfoot> ' <tr> ' <col> ' <colgroup> ' and ' <td> ' <th> Cannot set margin.

3, BFC caused by the margin seems invalid

?? The left element uses a float, and the right element uses Overflow-hidden to implement a two-column adaptive layout, and the Margin-left value of the right element is only large enough to see the effect. This is because Margin-left is relative to the left side of the parent element, not to the right of the picture

Border border

The outer margin of the element is the bounding rectangle of the element, which consists of the border, the style, and the color, regardless of the order of precedence

Base style

 border: border-width border-color border-style border: 1px red solid;

Border Style

?? If a border does not have a style, the border will not exist at all

?? About dashed dashed, under Chrome/firefox, the line width to height ratio is 3/1, while in IE, the line width to height ratio is 2/1. So in IE, the dotted line appears to be more dense

?? On the point line dotted, under Chrome, the point line is the square point, while under Ie/firefox, the dots are dots.

Border-style:none (default) border-style:hidden/dotted/dashed/solid/double/groove/ridge/inset/outset (total 9 kinds)

Border unilateral

  Border-top/border-right/border-bottom/border-left

Rounded border

Border-radius:none (default) border-radius:6px
40px Four value order is top left, top right, bottom right, bottom left
border-top-  on top left

"Special Graphics"

Circular

?? The width of the element is the same, and the fillet radius is half the width of the height

div{    width:100px;    height:100px;    border-radius:50%;}

Semicircle

?? The width and height of the element are different, and the fillet radius is fit with the width

div{    width:100px;    height:50px;    border-radius:50px 50px 0 0;}

Sector

?? Element width height and one fillet radius are the same

div{    width:50px;    height:50px;    border-radius:50px 0 0 0;}  

Box Shadow

?? Box Shadow Box-shadow You can set a shadow for an element

Horizontal shadow Position (required) Vertical Shadow Position (required)blur:     blur distance (optional) spread:   Shadow size (optional)color:    shadow color, default and text color consistent (optional) inset:    internal Shadow (optional)    box-shadow:10px 10px red,20px 20px Blue;

?? When using the box shadow Box-shadow, there are a few things to note:

?? 1, multiple shadows can be used, but too much will cause poor performance

?? 2, the border is above the shadow, the inner shadow above the background picture, the background picture above the back color, the back color on the outside shadow

?? 3. The inner shadow has no effect on the element

?? 4, the first write the shadow at the top level

?? 5, this property and Border-radius same strain, if the Border-radius is set to a fillet, then the final rendering of Box-shadow will also be rounded

CSS Layout (ii) box model properties