CSS(2.1)_Know-it-all_the default display value for <span> is:-优快云博客

本文详细介绍了CSS中的Box Model、视觉格式模型、视觉效果及表格布局等核心概念。包括元素的边距、边界、填充、内容区域的定义，以及display、position属性的作用，还有z-index、overflow等属性的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. Box Model

outline—margin—border—padding—content

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins (margin), borders (border), padding (padding), and the actual content (height, width).
The margin, padding properties can have the following values:
- length (px, pt, cm etc.)
- % of the containing element
- inherit

The margin can also be auto.

Shorthand property:
- val1 val2 val3 val4: top right bottom left
- val1 val2 val3: top (right left) bottom
- val1 val2: (top bottom) (right left)
- val1: all four

2. Visual formatting model

2.1 display

The default display value for most elements is block or inline.

Block-level elements: <div> <h1-6> <p> <form> <header> <footer> <section>
Inline-level elements: <span> <a> <img>

display:none remove element
visibility:hidden hide element

other values:
- list-item: act like a unordered list item
- none:
- initial:
- inline-block:
- table:
- etc.

2.2 position

position: static
Default value. Dont need any top, bottom, right, left properties.
position: relative
is positioned relative to its normal position.
position: fixed
is positioned relative to the viewport.
position: absolute
is positioned relative to the nearest positioned ancestor
The nearest positioned ancestor is the one whose position is anything except static.
If the element has no positioned ancestors, it will use the document body.

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
}

.center {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 18px;
}

.corner {
    position: absolute;
    right: 10px;
    bottom: 6px;
    font-size: 18px;
}

img { 
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Center text in image:</p>

<div class="container">
  <img src="trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="center">Centered</div>
  <div class="corner">Cornered</div>
</div>

</body>
</html>

2.3 z-index (only works for positioned elements)

specifies the stack order of an element. An element can have a positive or negative stack order.

<!DOCTYPE html>
<html>
<head>
<style>
img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>

</body>
</html>

2.4 vertical-align

sets the vertical alignment of an element.
- baseline: default value
- length: raises or lower an element by the specified length, negative values are allowed.
- %: raises or lower in a percent of the “line-height” property, can be negative
- sub\super: subscript\ superscript
- top \ text-top \ middle \ bottom \ text-bottom

3. Visual effects

3.1 overflow overflow-x overflow-y

Overflow property specifies whether to clip content or to add scrollbars when the content of an element is too big to fit in a specified area.
It only works for block elements with a specified height.
- visible: default value. The overflow is not clipped. It renders outside the element’s box.
- hidden: The overflow is clipped, and the rest of the content will be invisible.
- scroll: The overflow is clipped, but a scrollbar is added to see the rest of the content.
- auto: If overflow is clipped, a scrollbar should be added to see the rest of the content.

The overflow-x and overflow-y properties control the element horizontally or vertically.

3.2 visibility

specifies whether or not an element is visible. Even invisible elements take up space on the page.
- visible: default value
- hidden: invisible
- collapse: only for table elements, it removes a row or column, but it does not affect the table layout.
- initial:
- inherit:

4. Table

4.1 caption-side

specifies the placement of a table caption.
- top
- bottom
- initial
- inherit

4.2 table-layout

sets the table layout algorithm to be used for a table.
- auto: default, slow
- fixed:
- initial/ inherit

4.3 table-collapse

sets whether the table borders are collapsed into a single border or detached as in standard HTML.
- separate: default
- collapse: a single border
- initial/ inherit