In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
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.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.