4.1 Recognize the box model
width /*盒子模型的宽度*/
height /*盒子模型的高度*/
border /*盒子模型的边框*/
background /*盒子模型的背景*/
padding /*盒子模型的内边距*/
margin /*盒子模型的外边距*/
Although the box model has attributes such as height, width, border, background, padding, and padding, it is not required that each element define these attributes
4.2 Related attributes of the box model
4.2.1 Border properties
1. Set the border style to
none by default, which means there is no border.
Solid border single solid line
dashed dashed
dotted wire
double double solid line
You can set the single side of the box or set the
border-top-style top border style
border-right-style with border style
border-bottom-style bottom border style
border-left-style to do border style
right lower left border border-style on
the right and left border of the
vertical and horizontal frame
about the vertical frame
2 is provided border width
on the border-top-width border width
border-ringht right border width
slightly
Note: you must set the same setting when the border style border width, if No style is set, or set to none, other border attributes are invalid
Border width can also be set individually or comprehensively
. 3. Set border color
border-top-color Upper border color
border-right-color Right border color The
border color can also be set individually or combined together.
Note: When setting the border color, it must also be set Set the border style. If the style is not set, or is set to none, other border properties are invalid.
4 Set the border
border-top: the top border width style color
border-right: the right border width style color
in the setting method above the width style There is no requirement for the color order, in order, you only need to set what you need to set, you do n’t need to set it, you do n’t need to write it as the default value.
4.2.2 Margin properties
The padding property is used to set the inner border as the border property border is also a composite property
padding-top upper
padding padding-right right
padding padding upper padding right padding bottom padding left padding left padding
4.2.3 Margin properties
The margin attribute is used to set the inner border and the border attribute border is also a composite attribute
margin-top top
margin attribute margin-right right
margin margin attribute margin; top margin right margin margin bottom margin left margin
4.2.4 Background properties
1. Set the background color
background-color red
2. Set the background image
body{
background-color:red; /*设置网页的背景颜色*/
background-image；url(img/jianbian.jpg); /*设置网页的背景图片*/
}
3. Set the background image to tile
repeat: tiling in both horizontal and vertical directions is also the default value
no-repeat: no tiling (the image is only displayed once in the upper left corner of the element)
repeat-x: only
repeat along the horizontal -y only tile in the vertical direction
4. Set the position of the background image
body{
background-position；right bottom;
}
5 Set the background image fixed
scroll: the image scrolls along with the element page (default)
fixed: the image is fixed on the screen and does not scroll with the page element
6 comprehensively set the background of the element
The width and height of the box
The calculation principle of the total width and total height of the box model conforming to the CSS specification is as follows
: total width of the box = "width" + sum of left and right inner margins + sum of left and right border widths + sum of left and right outer margins
total height of the box = height + up and down The sum of the inner margin + the difficulty of the upper and lower borders + the sum of the upper and lower margins The
width attribute width and height attribute are only applicable to block-level elements, and are not valid for inline elements ( except for marks and). When
calculating the total height of the box model, also Consider the case where the vertical margins of the upper and lower boxes are merged
