This is the 9th day of my participation in Gwen Challenge

1 New box model properties in CSS3

In CSS3, box-sizing can be specified as content-box (classic box model), border-box (CSS3 new box model), which changes the way we calculate the box size.

box-sizing: content-box; The box size is width (applied to content) + padding + border.

box-sizing: border-box; The box size is the size specified by width. In this case, the width property applies to the entire box model, i.e. the box is the size defined by the box. When the padding and border properties are added, the box will expand the space inside the box.

2. Use of inside and outside margins of box models

When setting margins for content in a nested box model, when and how can you achieve the desired layout using both inside and outside margins as well as the width of the content itself?

Generally, width padding margin is used in sequence according to the priority, because margins have margin merging problems, and there are many bugs in MARGINS in IE6. Setting the padding affects the size of the box, so you need to recalculate width. Width can be laid out using either width residuals or height residuals.

3 Box Shadows

You can use the box-shadow property to set the shadow of the box.

Box – shadow attribute values

box-shadowAttribute values describe If necessary
h-shadow The position of the horizontal shadow, allowing negative values necessary
v-shadow The position of the vertical shadow, allowing negative values necessary
blur A fuzzy distance optional
spread Shadow size optional
color Shadow color optional
inset Add external shadows (outsetChange to inner shadow optional

Syntax format:

box-shadow: Horizontal shadow Vertical shadow Blur Distance Shadow size Shadow color Inner/outer shadowCopy the code

Example:

.im {
  border: 3px solid #d093d8;
  box-shadow:5px 5px 10px 8px rgba(0.0.0.0.8);
}
Copy the code

4 Tips

  • The box is horizontally centered (block-level elements)margin: 0 auto;The text in the box is horizontally centeredtext-align: center;
  • When setting elements of different widths, do not set the widthpaddingValue.
  • The difference between insert picture and background picture: the background picture does not occupy the position. When adding new elements, the background picture is displayed from the top of the background picture. Generally, the background picture is used for small ICONS and large pictures, while the insert picture is used for product pictures.
  • The width attributes width and height attributes height only apply to block-level elements, not inline elements.
  • Inline elements have only left and right margins and no upper and lower margins. The top and bottom margins for inline elements also do not look good, and are not supported below IE6. So: try not to specify upper and lower margins for inline elements.

You have no doubt that the article has a cameo appearance, ▽ ʃ♡ too..

If there is any mistake, please leave a message, we will correct it in time