CSS layout (2) Box Model attributes and css layout

CSS layout (2) Box Model attributes and css layout

Box Model attributes

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 for the displayed content, the extra height will produce a visual effect, as if there were additional padding;

If the specified height is less than the desired height of the displayed content, it depends on the overflow attribute. You need to set the scroll bar to overflow: auto.

Auto

Auto can be set for width and height and margin. For block-level elements, if the width is set to auto, the width is as wide as possible. In details, the element width = contains the block width-element horizontal margin width-element horizontal padding;

If the height is set to auto, it will be as narrow as possible. In details, the element Height = exactly enough to contain the height of its inline content

[Note] If the height of the block is not explicitly declared, the percentage height of the element is reset to auto

 

【Maximum, minimum, width, and height]

Min-width | min-height

Initial Value: 0

Applied to: block-level elements and replacement Elements

Percentage: the width (height) relative to the contained block)

Max-width | max-heightt

Initial Value: none

Applied to: block-level elements and replacement Elements

Percentage: the width (height) relative to the contained block)

[Note] When the minimum width (height) is greater than the maximum width (height), the value of the minimum width and height prevails.

 

Padding

Compared with other attributes of the box model (for example, the margin with negative values is often used in positioning), padding seems to be quite regular and has no compatibility or special problems.

For an element in a row, the left padding applies to the beginning of the element, and the right padding applies to the end of the element. The vertical padding does not affect the row height, but affects its size, the background color is displayed.

[Note] the padding cannot be a negative value.

Padding

Initial Value: Undefined

Percentage: relative to the width of the contained block

[50%]

Block-level elements can achieve square effects through padding: 50%, because the percentage value of horizontal and vertical padding is determined by the width of the contained block, which is often used to move the end image

 

Margin

When you set the margin, additional white space is created outside the element. The blank space usually indicates the area where other elements cannot be placed, and the background of the parent element can be seen in this area.

Margin

Initial Value: Undefined

Apply to: All elements

Percentage: relative to the width of the contained block

[Note] for common elements, a block is a block-level parent element. for positioning elements, a block is a parent element. Therefore, the margin percentage of a common element is relative to the width of the block-level parent element, and the margin percentage of the positioning element is relative to the width of the parent-level positioning element.

 

Margin can be set to a negative value. margin and width/Height Support auto and margin have very strange overlapping features.

This section describes the key parts of margin, including overlap, auto, and invalid conditions.

1. Overlap

[Prerequisite]

  Margin overlaps with each other and is also called margin merge. In this case, there are two prerequisites.

Limit limit 1: only occurs on block elements (excluding float, absolute, and inline-block elements)

Skip skip 2. It only occurs in the vertical direction (writing-mode is not considered)

[Category]

Overlap between two margin instances

1. Adjacent sibling Elements

<Style> p {line-height: 2em; margin: 2px 0; background-color: lightblue; display: inline-block; width: 100% ;} </style> <p> brother 1 </p> <p> brother 2 </p>

2. The parent-child element overlaps with the first or last child element, which is also called the margin transfer.

<Style>. box {background-color: pink; height: 30px ;}. inner {margin-top: 1em; background-color: lightblue ;} </style> <div class = "box"> <div class = "inner"> sub-level </div>

In webpage layout, because of the overlap of margin, we often use margin as a "problematic style" and try to use it as little as possible. But in fact, it is very useful,

Therefore, we need to make good use of overlap. We can use both margin-top and margin-bottom in the list items. In this way, the page structure is more robust, and the removal or location change of the last element will not damage the native layout.

2. auto

Only width/height and margin can be set to auto.

[Why can't vertical center be implemented by margin: auto]

  Horizontal orientation can be centered because the width of block-level elements is full of parent-level elements by default. If a fixed value is set for the width and the left and right margin is set to auto, the remaining space can be evenly divided.

The vertical direction of the upper and lower margin cannot be centered because the height of the block-level element is the content height by default, which is not directly related to the height of the parent-level element, is reset to 0

margin: 0 auto;

[Why do images use margin: auto cannot be horizontally centered]

The   image cannot be horizontally centered, similar to the vertical center of block-level elements. Because the image width is its own width by default, it has no direct relationship with the width of the parent element. Left and right margin is set to auto and will be reset to 0

Therefore, the image must be horizontally centered and set to the display: block element.

3. Invalid Conditions

Optional bytes 1. The vertical margin of the row element is invalid.

Vertical layout because the vertical layout of elements in a row is mainly influenced by the line height-height and vertical align. vertical margin does not affect them, so it does not affect the vertical layout. In the display mode, the margin area does not display the element background, so it does not affect the display of its own elements. Therefore, the vertical margin of the element in the row is invalid. [Note] inline-block is not included.

2. Some table-class elements, margin, are invalid.

<Thead> ''<tbody>'' <tfoot> ''<tr>'' <col> ''<colgroup>'' <td> ''<th> not configurable margin.

3. The margin caused by BFC seems to be invalid.

When the left-side elements use float, and the right-side elements use overflow-hidden to achieve Adaptive Layout of the two columns, the margin-left value of the right element can only be large enough to see the effect. This is because margin-left is relative to the left side of the parent element, not the right side of the image.

Border

The outer margin of an element is the border of the element. The border consists of three parts: width, style, and color, and the sequence is irrelevant.

Basic Style

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

Border Style

Border border if a border has no style, the border will not exist at all

Zookeeper is about dashed. In chrome/firefox, the width-to-height ratio of the dotted line is 3/1, while in IE, the width-to-height ratio of the dotted line is 2/1. Therefore, the dotted line in IE is relatively dense.

  Dotted: In chrome, vertices are vertices, while in IE/firefox, vertices are dots.

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

Single border

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

Rounded border

Border-radius: none (default) border-radius: 6px
Border-radius: 10px 20px 30px 40px values: top left, top right, bottom right, and bottom left
Border-top-left-radius: 10px 20px; upper left

 

[Special graphics]

Circle

The   element has the same width and height, and the radius of the rounded corner is half the width and height.

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

Halfcircle

The   element has different width and height, and the radius of the rounded corner must be matched with the width and height.

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

Slice

The width and height of the   element are the same as the radius of a rounded corner.

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

Box shadow

You can set a shadow for an element in the box shadow field.

Box-shadow: none (default) box-shadow: (h-shadow v-shadow blur spread color inset) +; h-shadow: horizontal shadow position (required) v-shadow: vertical shadow position (required) blur: blur distance (optional) spread: shadow size (optional) color: shadow color, consistent with the text color by default (optional) inset: Internal shadow (optional) box-shadow: 10px 10px red, 20px 20px blue;

When using box shadow in box shadow, you must pay attention to the following points:

Repeated shadows 1. Multiple shadows can be used, but too many shadows can cause poor performance.

Border 2. Top of the background color, top of the background color, and top of the background color.

Inner Shadow 3.Element has no effect

Margin 4. The shadow written first is at the top layer.

Border 5. This attribute is in the same line as border-radius. If it is set to a rounded corner through border-radius, the final presentation of box-shadow will also be a rounded corner.