Article Directory
1. Box Composition
Box properties
Each element in a document can be viewed as a rectangular box. It has some properties as shown in the figure.
margin
Margins represent the area around the box. The margins of adjacent elements will merge (margin collapsing)
border
Set between the outer edge of padding and the inner edge of margin, the default value is 0
padding
Padding generates space around element content within any defined bounds
width & height
Used to set the width and height of the content area, which is used to display content. The box height defaults to the height of the content.
Boxes generally refer to block elements, and boxes are an important mechanism for our layout. A box should consist of margins, borders, padding, and content.
- width & height
width
Content width, block-level elements default to 100%, the unit can be: px em %
height
Content height, default 0, filled by child elements, unit can be: px em %
max-width
Defines the maximum width of the element. The attribute value sets a maximum limit on the width of the element. Thus, the element can be narrower than the specified value, but not wider. Negative values are not allowed.
min-height
attribute sets the minimum height of the element. This attribute value sets a minimum limit on the height of the element. Thus, elements can be taller than the specified value, but not shorter. Negative values are not allowed.
- border properties
1. What is a border?
A border is simply the line that wraps around the label's width and height
2. The format of the border attribute
Border width
border-width: 5px;
Border style
border-style: solid;
Border style value:
None defines no border.
hidden Same as "none". Except when applied to tables, for which hidden is used to resolve border conflicts.
dotted defines a dotted border. Renders as a solid line in most browsers.
dashed defines a dashed line. Renders as a solid line in most browsers.
solid defines a solid line.
double defines a double line. The width of the double line is equal to the value of border-width.
groove defines a 3D groove border. Its effect depends on the value of border-color.
ridge defines a 3D ridge border. Its effect depends on the value of border-color.
inset defines the 3D inset border. Its effect depends on the value of border-color.
outset defines the 3D outset border. Its effect depends on the value of border-color.
Border color
border-color: red;
2.1 Literal writing (simultaneously set the border of four sides)
border: the width of the border, the style of the border and the color of the border;
Shortcut key:
bd+ border: 1px solid #000;
Points to note:
1. The color attribute in the continuous writing format can be omitted. After omitting, it will be black by default.
2. The style in the continuous writing format cannot be omitted. After omitting, the border will not be visible.
3. The width in the continuous writing format can be omitted. After omitting still see the border
2.2 Literal writing (set the borders of the four sides separately)
border-top: the width of the border and the color of the border;
border-right: the width of the border and the color of the border;
border-bottom: the width of the border The color of the style border;
border-left: the width of the border and the color of the style border of the border;
Shortcut key:
bt+ border-top: 1px solid #000;
br+
bb+
bl+
2.3 Continuous writing (set the borders of the four sides separately)
border-width: top right bottom left;
border-style: top right bottom left;
border-color: top right bottom left;
Points to note:
1. The values of these three attributes are assigned clockwise, that is, the values are assigned according to top, right, bottom, and left, instead of up, down, left, and right in daily life. 2. The
values of these three attributes Rules when omitting
2.1 Upper Right Lower Left > Upper Right Lower - the value on the left is the same as the right
2.2 Upper Right Lower Left > Upper Right - the value on the left is the same as the right and the lower value is the same as the upper
2.3 Upper Bottom right left > top - Bottom right and left take the same value as top
3. Non-continuous writing (direction + elements)
border-left-width: 20px;
border-left-style: double;
border-left-color: pink;
4.border-radius
Specify the radius value of the rounded border for the element: absolute value px, mm, cm relative value em, rem %
- margin properties
1. What is margin?
The distance between the label and the label is the margin
2. Format
2.1 Non-continuous writing
margin-top: ;
margin-right: ;
Browsers are left-aligned by default. It seems that the margin-right doesn’t take effect, but it actually does. It just doesn’t show the effect when the default is the standard flow. You can add right float to break away from the standard flow.
margin-bottom: ;
margin-left: ;
2.2 Continuous writing
margin: top right bottom left;
3. Rules when the values of these three attributes are omitted
3.1 Up Right Down Left > Up Right Down - the value on the left is the same as that on the right
3.2 Up Right Down Left > Up Right - the value on the left is the same as the
right > Top - bottom right and left take the same value as top
Note:
The part of the margin has no background color
4. Margin merge phenomenon
In the vertical direction of the default (standard flow) layout, the outer margins will not overlap by default, and there will be a phenomenon of merging. Whoever has a larger outer margin will follow.
Margins in the horizontal direction will overlap.
- padding properties
1. What is padding?
The distance between the border and the content is the padding
2. Format
2.1非连写
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
Points to note:
1. After setting the padding for the label, the width and height occupied by the label will change.
2. After setting the padding for the label, the padding will also have a background color
2.2 Continuous writing
padding: top right bottom left;
3. Rules when the values of these three attributes are omitted
3.1 Up Right Down Left > Up Right Down > The value on the left is the same as the right
3.2 Up Right Down Left > Up Right > The value on the left is the same as the right side The value on the bottom is the same as the top
3.3 Up Right Down Left > Top > Right, bottom, and left take the same value as the top
2. CSS box model
The CSS box model is just a vivid metaphor. Every visible HTML element is a box. A box can be divided into four parts from outside to inside: margin (outer margin), border (border), padding (inner margin ) and content (content).
We can find that margin, padding and border are all CSS properties. The three of them are used to control the margin border of the box, and content is to describe the content of the HTML element. The width and height of the content are set through the width/height property.
- Content Box (W3C Box)
Default Box Model W3C Box
Use the box-sizing property to change the box model, and the box with the value "content-box" is the default box model.
The width attribute only indicates the width occupied by the content of the box
The height attribute only indicates the height occupied by the content of the box
W3C box
content area width
width
content area height
height
box width
width+paddingLeft+paddingRight+borderLeft+borderRight
height of the box
height+paddingTop+paddingBottom+borderTop+borderBottom
The width of the screen space occupied by
width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRight
The height of the screen space occupied
height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom
The content box is also called a normal box. Its characteristics are: when we specify the width attribute for a box, the width is actually only the width of the content. When the padding and border become larger, the content width remains unchanged, and the box occupies The overall width of the should be larger.
- Border box (IE box model)
Border box model
The IE box can use the box-sizing property to change the box model, and the box with the value "border-box" is the border box model.
IE box
content area width
width-paddingLeft-paddingRight-borderLeft-borderRight
content area height
height-paddingTop-paddingBottom-borderTop-borderBottom
box width
width
height of the box
height
The width of the screen space occupied by
width+marginLeft+marginRight
The height of the screen space occupied
height+marginTop+marginBottom
The border box is also called the weird box. Its characteristics are: when we specify the width attribute for a box, the width actually includes the width of the border and padding. If the border remains unchanged and the padding becomes larger, the content will become smaller at this time .
- Points to note about the box model
1. If the two boxes are in a nested relationship, then the outer margin at the top of the inner box (child element) is set, and the outer box (parent element) will also be pushed down.
reason
The top border of the child element and the parent element coincide.
Because if the top margin-top of the first child element of the parent element cannot touch a valid border or padding, it will continue to trouble its parent element layer by layer. As long as you set an effective border or padding for the parent element, you can effectively control the margin-top, prevent it from leapfrogging, and execute your own margin-top as the margin-top of the parent element.
2. If the outer box does not want to be pushed down together, you can add a border attribute to the outer box.
3. In enterprise development, in general, if you need to control the distance between nested relationship boxes, you should first consider padding, and then consider margin. Margin is essentially used to control the gap between sibling relationships.
4. Only the vertical margins of the block boxes in the normal document flow will merge the margins. Margins between inline boxes, floated boxes, or absolute positioning are not merged.
5. In the nested box, we can use margin: 0 auto; to make the inner box horizontally centered in the outer box.
margin: 0 auto = margin: 0 auto 0 auto, which means that the top and bottom are 0 , left and right are auto;
6.margin: 0 auto; Only valid for the horizontal direction, not valid for the vertical direction
3. Box background style
- background-color background color
Specially used to set the background color of the label
Values:
Specific words
rgb
rgba
hexadecimal
Shortcut key:
bc background-color: #fff;
- background-image background image
Special shortcut key for setting background image :
bi background-image: url();
Points to note:
1. The address of the picture must be placed in url(). The address of the picture can be a local address or a network address. 2.
If the size of the picture is not as large as the size of the label, it will automatically Tile horizontally and vertically to fill
3. If a picture appears on the web page, the browser will send a request to get the picture again
- background-repeat background tile property
Specially used to control the tiling method of the background image
Values:
repeat Default, both horizontal and vertical tiles are required
no-repeat Horizontal and vertical tiles are not required
repeat-x Only tile in the horizontal direction
repeat-y Only tile in the vertical direction
快捷键
bgr background-repeat:
- background-position background positioning property
Specially used to control the position of the background image
Format:
background-position: horizontal direction vertical direction;
Values
Specific orientation nouns
Horizontal direction: left center right
Vertical direction: top center bottom
Specific pixels
For example: background-position: 100px 200px;
Remember to write the unit, that is, you must write px
Remember that specific pixels can receive negative numbers
快捷键:
bp background-position: 0 0;
Points to note:
The same tag can set the background color and background image at the same time. If the color and image exist at the same time, the image will override the color
- Abbreviation for background property
The format of the abbreviation of the background attribute
background: background color, background image tiling method, association method, positioning method;
Shortcut key:
bg+ background: #fff url() 0 0 no-repeat;
Note:
In the background attribute, any attribute can be omitted
What is contextual context?
By default, the background image will scroll with the scroll bar. If you do not want the background image to scroll with the scroll bar, then we can modify the association between the background image and the scroll bar.
How to modify the background association method?
There is an attribute called background-attachment in CSS, which is specially used to modify the association method
Format
background-attachment: scroll;
Value:
scroll default value, it will scroll with the scroll bar
fixed will not scroll with the scroll bar
Shortcut key:
ba background-attachment:;
-What is the difference between a background image and an inserted image?
The background image is just a decoration and will not take up space.
The inserted image will take up space
The background image has a positioning property, so it is very convenient to control the position of the picture.
Inserting a picture does not have a positioning property, so it is not convenient to control the position of the picture
The semantics of inserting pictures is stronger than that of background pictures, so in enterprise development, if your pictures want to be indexed by search engines, it is recommended to use inserting pictures