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

This article will share with you about the properties of the box model in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

2. A simple box model

Box.html

Box model

Standard document streams cannot make exquisite web pages; only by breaking away from standard document streams can we make the web pages we want.

The method of de-standard: floating, absolute positioning, fixed positioning

Floating (float): allows elements to be displayed side by side and set width and height

Attribute value: left (left floating); right (right floating)

The floating element will be displayed on the edge of the parent box, and if not, it will be displayed in the parent box on the next line according to the floating direction (affixed with a box with the same floating direction).

The nature of a float:

1 floating elements deviate from the standard stream and no longer distinguish between block-level elements and inline elements

Can let floating elements display side by side, and set width and height.

two。 The floating element does not collapse with margin, and the distance of the box is the sum of margin-top and margin-bottom.

3. Floating elements will be displayed on the edge, with different directions.

4. Floating elements don't drill boxes.

5. Floating elements give up the position of the standard stream (two layers)

6. Word circumference effect

3. Width/height of the attributes related to the css box model refers to the width and height of the content.

Box.css

.box1 {

Border:2pxsolidred

Height:200px

Width:700px

}

.box2 {

Border:2pxsolid#123456

Height:150px

Width:670px

}

4. Borders of css box model related attributes (width, style, color)

Border:pxstylecolor

Border-top:pxstylecolor

Width: border-width; single border: border-top-width

Box.css

.box1 {

Border:2pxsolidred

Height:200px

Width:700px

Border-top-width:23px

}

Style: border-style

Attribute value: dotted (point)

Dashed (dotted line)

Solid (solid line)

Double (two-wire)

Box.css

.box1 {

Border:5pxdoublered

Height:200px

Width:700px

Border-top-width:11px

Border-top-style:dashed

}

.box2 {

Border:2pxsolid#123456

Height:150px

Width:670px

}

5. The inner margin of the relevant attributes of css box model-padding

Set single orientation: padding-top/padding-bottom/padding-left/padding-right

Box.css

.box2 {

Padding-top:22px

Padding-left:11px

Padding-right:22px

Padding-right:24px

Border-bottom:2pxsolid#123456

Height:150px

Width:670px

}

6. Margin outside related attributes of css box model-margin

Set single orientation: margin-top/margin-bottom/margin-left/margin-right

Box.css

.box2 {

Padding-top:22px

Padding-left:11px

Padding-right:22px

Padding-right:24px

Border-bottom:2pxsolid#123456

Height:150px

Width:670px

Margin-top:23px

Margin-bottom:45px

Margin-left:45px

Margin-right:45px

}

7. Outline of attributes related to the css box model: styles acting outside the border

Outline-width

Outline-style:

Hidden (hidden)

Dotted (dot)

Dashed (dotted line)

Solid (solid line)

Double (two-wire)

Outline-color:

Or:

Outline:pxstylecolor

Thank you for reading! This is the end of this article on "what are the properties of the box model in css?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.