The three cores of page layout: box model, floating, and positioning.
The core of web page layout: placing boxes through CSS.
The components of the box model include: borders, margins, padding, and actual content
padding: displayed against the box by default, controlling the distance between the text and the box
margin: control the distance between boxes
The border includes: border width (thickness), border style (solid line, dotted line, dotted line), border color
div { width: 300px; height: 200px; border-width: 5px; border width border-style: solid; border style: solid border-style: dashed; dotted border-style: dotted; dotted border-style: pink; border color}
border: 1px solid red; no order
How to write the border separately (used to modify a certain edge):
border-top: 1px solid blue; border-bottom:1px solid pink;
When there is only one different border, you can use cascading writing:
border: 5px dashed pink; border-top: 1px solid blue; a top border that covers the entire box above
Thin line borders for tables:
When the spacing between cells in a table is set to 0, because the borders of two adjacent cells are placed together, the width of this part will appear to be greater than the width of the set border of one cell. To solve this problem, you can use the border-collapse attribute.
The border-collapse property controls how the browser draws table borders. It controls the borders of adjacent cells. Merge adjacent borders together:
table { border-collapse: collapse; This attribute must be added to the table to be effective}
Borders will affect the actual size of the box <br/>The presence of borders will increase the size of the box, because there are two options:
(1) When measuring the size of the box, do not measure the border (2) If the border is included in the measurement, you need to subtract the width of the border from the width and height values.
The distance between the border and the content.
Padding will affect the actual size of the box <br/>In order to ensure that the box size is consistent with the rendering, you need to subtract the width of the padding from the values of width and height.
If the box itself does not specify the width and height attributes, the padding will not expand the size of the box : if the width is not specified, the left and right padding will not expand the box; if the height is not specified, the top and bottom padding will not expand the box.
Control the distance between boxes
Typical application: To achieve horizontal centering of a block-level box, two conditions must be met: the box must have a specified width; the left and right margins of the box must be set to auto
Inline elements and inline block elements: If you want to achieve horizontal center alignment, just add text-align: center to its parent element.
Margin merging (1) Collapse of vertical margins of nested block elements: For two block elements with a nested relationship (parent-child relationship), the parent element has a top margin and the child element also has a top margin. At this time, the parent element will collapse more Large margin values.
Solution: Specify an outer border for the parent element; specify an inner margin for the parent element; add an overflow:hidden to the parent (commonly used)
Many web page elements have default inner and outer margins, and the defaults vary from browser to browser, because before layout, the inner and outer margins of web page elements need to be cleared.
* { margin: 0px; Clear padding padding: 0px; Clear padding}
In order to take care of compatibility, try to set only the left and right inner and outer margins for inline elements, and do not set the top and bottom inner and outer margins. However, it is enough to convert them to block-level and inline-level elements.
Make the box rounded corners.
The border-radius property is used to set the rounded corners of the inner and outer borders of an element.
grammar:
border-radius: length; The larger the parameter, the more obvious the arc. This parameter can be a specific array or a percentage.
Its principle:
How to write rounded borders:
(1)圆形的写法
: When the box is a正方形
and length = half the height or width of the box, the box is a circle. Half: can be an exact value or 50%. 】
(2)圆角矩形的写法:参数设置为高度的一半
(3) This attribute is an abbreviated attribute, which is actually: upper left corner, upper right corner, lower right corner, lower left corner (clockwise)
(4) If you only want to set one corner, you can write it as: border-top-left-radius, border-bottom-right-radius, etc. Note that the order cannot be reversed.
The box-shadow property adds a shadow to the box.
grammar:
box-shadow: h-shadow v-shadow blur spread color inset; box default outer shadow
blur: the virtuality and reality of the shadow. The larger the parameter, the blurr it is.
text-shadow
grammar:
text-shadow: h-shadow, v-shadow, blur, color
This concludes this article about CSS box models, rounded borders, and box shadows. For more related CSS box model content, please search previous articles on downcodes.com or continue to browse the related articles below. I hope you will read more in the future. Support downcodes.com!