How to build CSS Box Model
This article mainly shows you "how to build a CSS box model", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to build a CSS box model" this article.
The W3C recommends that all objects on a web page be placed in a box, and designers can control the properties of the box by creating definitions, including paragraphs, lists, headings, pictures, and layers.
The box model mainly defines four areas MBPC: margin, border, padding and content.
CSS Box Model Settings
CSS box model involves three key concepts: boundary [margin], border [border] and filling [padding].
(1) Boundary [margin]
Margin: top (margin-top), right (margin-right), bottom (margin-bottom), left (margin-left)-four margins are arranged clockwise
Basic syntax:
Margin-top: unit of length | Unit of percentage | auto
Margin:20px 40px 60px 80pxram * Top | right | bottom | left * /
Margin:20px 40px 60pxhandle * Top | right and left | bottom * /
Margin:20px 40px; / * up and down | left and right * /
Margin:20px; / * the top, right, bottom and left are the same * /
(2) Border [border]
Border-width: thin, medium, thick, length; compound attributes, divided into top, right, bottom, left four sub-attributes
Border-style: none | dotted | dashed | solid | double | groove [concave Line] | ridge [Convex Line] | inset [embedded Line] | outset [embedded Line]
Border-color: color keyword | RGB value
Border: border thickness border style border color
(3) fill in [padding]
The inner boundary of an element mainly refers to the blank distance between the border and the internal element. When setting the boundary within the element with the padding attribute, it also includes five attributes, and there are also four setting methods.
Basic syntax:
Padding: length | percentage
Padding-top, padding-right, padding-bottom: ditto
Padding:20px 30px 40px 60px inception /
Padding:20px 30px 40px; / * Top | right | bottom | left * /
Padding:20px 30px; / * Top | left / right | Down * /
Padding:20px; / * the top, right, bottom and left are the same * /
These are all the contents of the article "how to build a CSS Box Model". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
