Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What are the properties of the CSS box model

2025-01-26 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article mainly explains "what are the properties of the CSS box model". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the properties of the CSS box model".

CSS box model 1. What is a box model

All HTML elements can be thought of as boxes, and in CSS, the term "box model" is used in design and layout.

The CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: margins, borders, padding, and actual content.

The box model allows us to place elements in the space between other elements and the borders of the surrounding elements.

The following picture illustrates the box model (Box Model):

Margin (margin)-clears the area outside the border, which is transparent

Border (border)-the border around the inside margin and outside the content.

Padding (inside margin)-clears the area around the content, and the inside margin is transparent.

Content (content)-the contents of the box, displaying text and images.

Second, border color

Border-top-color Top Border Color border-top-color:#369

Border-right-color right border color border-right-color:#369

Border-bottom-color bottom border color border-bottom-color:#fae45b

Border-left-color left border color border-left-color:#efcd56

Border-color

The four borders are the same color border-color:#eeff34

Top and bottom border color: # 369left and right border color: # 000 border-color:#369 # 000

Top border color: # 369 left and right border color: # 000 lower border color: # f00 border-color:#369 # 000 # f00

Top, right, bottom, left border color: # 369, # 000, # f00, # 00f border-color:#369 # 000 # f00 # 00f

Titlep.one {border-style:solid; border-color:red;} p.two {border-style:solid; border-color:#98bf21;} solid line red border

Solid green border

Note: the "border-color" attribute does not work if used alone. Use the "border-style" property to set the border first.

Running result:

3. Frame thickness (border-width)

Attribute value:

Thin

Medium

Thick

Pixel value

Titlep.one {border-style:solid; border-width:thick;} p.two {border-style:solid; border-width:medium;} p.three {border-style:solid; border-width:1px;} some text.

Some text.

Some text.

Note: the "border-width" attribute does not work if used alone. Use the "border-style" property to set the border first.

Running result:

4. Border style (border-style)

None: no border by default

Dotted: define a dotted border

Dashed: define a dashed border

Solid: define solid border

Double: defines two borders. The width of both borders is the same as the value of border-width

Groove: defines a 3D groove border. The effect depends on the color value of the border.

Ridge: defines the 3D ridge border. The effect depends on the color value of the border.

Inset: defines a 3D embedded border. The effect depends on the color value of the border.

Outset: defines a 3D highlight border. The effect depends on the color value of the border.

Title p.none {border-style:none;} p.dotted {border-style:dotted;} p.dashed {border-style:dashed;} p.solid {border-style:solid;} p.double {border-style:double;} p.groove {border-style:groove;} p.ridge {border-style:ridge;} p.inset {border-style:inset;} p.outset {border-style:outset;} p.hidden {border-style:hidden;} without borders.

Dotted border.

Dotted border.

Solid border.

Double-sided box.

Grooved frame.

Ridge border.

Embed the border.

Convex border.

Hide the border.

Running result:

5. Shorthand of the frame

Set the color, thickness and style of the border at the same time, and the order can be set at will.

Titlep {border:5px solid red;}

Frame abbreviation

Running result:

VI. Outer margin (margin)

Margin clears the surrounding (outer border) area of elements. Margin has no background color and is completely transparent.

Margin can individually change the top, bottom, left, and right margins of an element, or you can change all the attributes at once.

Attribute value:

Margin-top

Margin-right

Margin-bottom

Margin-left

Margin

Title p {background-color:greenyellow;} p.margin {margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;}

This is a paragraph with no margin specified.

This is a paragraph that specifies the margin size.

Running result:

7. Inner margin (padding)

When the padding (fill) margin of an element is cleared, the released area is filled with the background color of the element.

Using the padding property alone, you can change the padding up and down.

Attribute value:

Upadding-left

Padding-right

Padding-top

Padding-bottom

Padding

Titlep {background-color:yellow;} p.padding {padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px;}

This is a paragraph with no padding margin specified.

This is a paragraph that specifies the fill margin.

Running result:

Dimensions of the box model

Titlep {background-color: lightgrey; width: 300px; border: 25px solid green; padding: 25px; margin: 25px;} Box Model Demo

The CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: margins, borders, padding, and actual content.

Here is the actual content of the box. There are 25px inner spacing, 25px outer spacing, 25px green frame.

Running result:

9. Fillet frame (border-radius)

Four attribute values are arranged clockwise

Title # rcorners4 {border-radius: 15px 50px 30px 50px; background: # 8AC007; padding: 20px; width: 200px; height: 150px;} # rcorners5 {border-radius: 15px 50px 30px; background: # 8AC007; padding: 20px; width: 200px; height: 150px;} # rcorners6 {border-radius: 15px 50px; background: # 8AC007; padding: 20px; width: 200px; height: 150px;}

Four values-border-radius: 15px 50px 30px 5px:

Three values-border-radius: 15px 50px 30px:

Two values-border-radius: 15px 50px:

Running result:

Box shadow Title p {width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px # 888888;}

Running result:

Thank you for your reading, these are the contents of "what are the properties of the CSS box model?" after the study of this article, I believe you have a deeper understanding of what the properties of the CSS box model are, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.

Views: 211

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report