How to make a flexible box in css3

Sometimes we need to write a flexible box in CSS3, so how to make this code? This requires the use of our box-shadow attribute, which allows the box to produce a shadow effect when displayed. Here is a detailed explanation of how to write

:

       box-shadow:length length length color;

The first parameter represents the horizontal distance of the shadow from the box

The second parameter represents the vertical distance of the shadow from the box

The third parameter represents the blur radius of the shadow

The fourth parameter represents the color of the shadow

Use shadows for elements in the box

You can individually apply shadows to the elements in the box Elements use shadows.

You can use the first-letter selector or the first-line selector to only have the first text or the first line have a

shadow effect

for the table Use shadows in cells

You can use the box-shadow property to create a shadow effect on tables and cells within the table.

Specify the calculation method for the width and height of the element

In css3, use the box-sizing attribute to specify the calculation method for the width and height of the element

box- Sizing attribute

In CSS, use the width attribute and height attribute to specify the width and height of the element.

But using the box-sizing attribute, you can specify whether the width and height values ​​specified with the width attribute and height attribute respectively include the padding area inside the element, as well as the width and height of the border.

The attribute values ​​that can be specified for the box-sizing attribute are the content-box attribute value and the border-box attribute value. The former means that the width and height of the element do not include the internal padding area, and the width and height of the border

, while the latter means that the width and height of the element include the internal padding area, and the width and height of the border.

Previously, the default was to use the content-box attribute value.

In addition, you can specify the attribute value

in the box-sizing attribute as

padding

-box, that is, the specified width and height content include The width and height of the content and the width and height of the inner padding area, excluding the width and height of the border

The purpose of use is to control the total width of the element , if this attribute is not used, the

used by default in the style is the content-box attribute value, which only specifies the width of the content, but does not specify the

total width of the element. Make the designation.

In some cases, using the border-box attribute value will make

page layout

more convenient.

For example, as long as the border-box attribute value of the two div elements is set to 50%, you can ensure that the two div

elements are displayed side by side. This is how to make a flexible box. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to insert pictures in html

What should you pay attention to when centering a div in html

How to use if comments in html

The above is the detailed content of How to make a flexible box in css3. For more information, please follow other related articles on the PHP Chinese website!