1 Introduction
All elements in the page can be regarded as a box and occupy a certain page space. There are many such boxes on a page, and the boxes affect each other.
The box model consists of the following four properties, as well as two auxiliary properties: width and height.
| Attributes | illustrate |
|---|---|
| border | (border) element border |
| margin | (Margin) is used to define the distance between elements in the page |
| padding | (padding) is used to define the distance between the content and the border |
| content | (content) can be text or pictures |
<1>. Content area
The center of the CSS box model, which presents the main information content of the box, which can be text, pictures and other types. The content area is an integral part of the box model. The other three parts are optional.
Attributes:
- width and height: Specify the width and height, for the content area, excluding the padding part.
- overflow: overflow property, when too much content information exceeds its occupied range, you can use the property to specify the processing method.
<2>. Padding
Refers to the space between the content and the border, which can be regarded as the background area of the content area, and negative values are not allowed.
<3>. Border
Consistent with the border property.
<4>. Margin
Refers to the distance between two boxes, which may be the distance between the child element and the parent element, or the distance between the sibling elements.
Margins prevent elements from being tightly connected together, and are an important means of CSS layout.
CSS allows to specify a negative value for the margin property, then the entire box will move in the opposite direction of the specified negative value, which can produce the overlapping effect of the box.
2. Width width and height height
grammar:
width:像素值;
height:像素值;Note:
Only block elements can set width and height, and inline elements cannot set width and height.
3. border
grammar:
border:像素值 边框类型 颜色值Note:
The two attribute values must be separated by a space.
4. Padding
<1>. Local style
grammar:
padding-top:像素值; 上
padding-right:像素值; 右
padding-bottom:像素值;底
padding-left:像素值; 左Description:
Separately set the inner margins of the box in the four directions of up, down, left, and right.
<2>.padding concise writing
grammar:
padding:10px; 表示四个方向内边距都是10px.
padding:10px 20px:表示上下内边距是10px,左右内边距是20px.
padding:10px 20px 30 40px 表示上、右、下、左边距分别是10 20 30 40,按照顺时针的方向。5. Margin
Refers to the part from the border to the parent element or sibling element.
<1>.margin local style
* grammar:*
margin-top:像素值; 上外边距
margin-right:像素值; 右
margin-bottom:像素值; 底
margin-left:像素值; 左<2>.margin concise style
Consistent with padding.