CSS size properties refer to the width and height properties of elements. Although it is very simple, it is a skill that must be mastered. CSS provides several attributes such as width, height, max-width, min-width, max-height and min-height to set the width and height of elements. These elements are very simple to use. Let’s briefly introduce them below.
1.height
(1) Set the height of the element: height attribute
Height: Property specifies the height of an element.
① Scope and objects of application: Default content area
Applicable objects: all elements
non-replaced inline elements, table columns, column groups
Scope of application: By default, this attribute determines the height of the content area.
② Change the scope of application:
If box-sizing is set to border-box, this property determines the height of the border area.
③ Not applicable
Inline non-replaced elements: This attribute is ignored.
Inline elements: cannot set height.
④ Attribute value override
The min-height and max-height properties override height.
(2) High level of grammar
height: auto|length|%|inherit;
Contains experimental attribute values: [ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto
/*Keyword valueKeywordvalue*/height:auto;/*Length value<length>values*/height:120px;height:10em;/*Percentage value<percentage>value*/height:75%;/*Global keyword ValueGlobalvalues*/height:inherit;height:initial;height:unset;
2.width
(1) Set the width of the element: width attribute
① Applicable area
Content Area: By default, it sets the width of the content area.
Not included: You can add padding, borders, and margins outside the content area.
Modify the applicable area: But if box-sizing is set to border-box, it sets the width of the border area.
② Applicable elements
All elements except the following elements
Not applicable elements: non-replaced inline elements, table rows, and row groups
Inline non-replaced elements will ignore this attribute.
③ Cover
The min-width and max-width properties may override width.
(2) Syntax of width
width: auto | length| %| inherit;
Contains experimental attribute values: [ <length> | <percentage> ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto;
/*Length value<length>values*/width:300px;width:25em;/*Percentage value<percentage>value*/width:75%;/*Keyword value Keywordvalues*/width:25emborder-box;width:75 %content-box;width:max-content;width:min-content;width:available;width:fit-content;width:auto;/*Global valuesGlobalvalues*/width:inherit;width:initial;width:unset;
3. max-width and max-height
The max-width and max-height attributes are used to set the maximum width and maximum height of the element's content area respectively. When the max-width and max-height properties are defined, the actual values of the width and height properties will be less than or equal to the values of the max-width and max-height properties, regardless of the actual values of the width or height properties. Optional values for the max-width and max-height properties are as follows:
Take the max-width attribute as an example: (the characteristics of the max-height attribute are similar)
(1) When the value of the max-width attribute is less than the width attribute, the value of the width attribute will be redefined to the same value as the max-width attribute;
(2) When the value of the max-width attribute is greater than width, the max-width attribute will be ignored;
(3) When the value of the max-width attribute is less than min-width, the max-width attribute will be ignored.
4.min-width and min-height
The min-width and min-height attributes are used to set the minimum width and minimum height of the element's content area. When the min-width and min-height attributes are defined, regardless of the actual value of the width or height attribute, the width and height attributes The actual values will be greater than or equal to the values of the min-width and min-height properties. Optional values for the min-width and min-height properties are as follows:
Take the min-width attribute as an example: (the min-height attribute has similar characteristics)
(1) When the value of the min-width attribute is less than width, the min-width attribute will be ignored;
(2) When the value of the min-width attribute is greater than width, the value of the min-width attribute will be redefined to the same value as the min-width attribute;
(3) When the value of the min-width attribute is greater than max-width, the max-width attribute will be ignored.