CSS 笔记三（Tables/Box Model/Outline）

CSS Tables

border

border: border-width border-style border-color|initial|inherit;

border-width

border- medium|thin|thick|length|initial|inherit;

border-style

border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Table Borders

Example

table, th, td {
   border: 1px solid black;
}

border-collapse

• Specify whether the table borders are collapsed into a single border or detached as in standard HTML.

border-collapse: separate|collapse|initial|inherit;

border-spacing

• Specify the distance between the borders of adjacent cells (only for the "separated borders" model).

border-spacing: length|initial|inherit;

Example

table {
    border-collapse: separate;
    border-spacing: 10px 50px;
} 

Horizontal Alignment

text-align: left|right|center;

Vertical Alignment

vertical-align: top|bottom|middle;

Caption-side

• Specify the placement of a table caption.

caption-side: top|bottom|initial|inherit;

Table-layout

• Specify the table layout algorithm to be used for a table.

table-layout: auto|fixed|initial|inherit;

Value	Description
auto	Automatic table layout algorithm (this is default): The column width is set by the widest unbreakable content in the cells Can be slow, since it needs to read through all the content in the table, before determining the final layout
fixed	Fixed table layout algorithm: The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells Allows a browser to lay out the table faster than the automatic table layout The browser can begin to display the table once the first row has been received

Empty-cells

• Specify whether or not to display borders and background on empty cells in a table (only for the "separated borders" model).

empty-cells: show|hide|initial|inherit;

Table Padding

• Control the space between the border and the content in a table

Example

th, td {
    padding: 15px;
    text-align: left;
}

 

• Use the :hover selector on <tr> to highlight table rows on mouse over

tr:hover {background-color: #f5f5f5}

Striped Tables

• Use the nth-child() selector and add a background-color to all even (or odd) table rows

tr:nth-child(even) {background-color: #f2f2f2}

Responsive Table

• display a horizontal scroll bar if the screen is too small to display the full content

 Example

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div> 

CSS Box Model

Explanation of the different parts:

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent

Width and Height of an Element

Important:

　　When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.

Example

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

CSS Outline

• An outline is a line drawn around an element - outside the border.
• The outline is NOT a part of an element's dimensions.
• the element's total width and height is not affected by the width of the outline.

outline-style values

• dotted - Defines a dotted outline
• dashed - Defines a dashed outline
• solid - Defines a solid outline
• double - Defines a double outline
• groove - Defines a 3D grooved outline. The effect depends on the outline-color value
• ridge - Defines a 3D ridged outline. The effect depends on the outline-color value
• inset - Defines a 3D inset outline. The effect depends on the outline-color value
• outset - Defines a 3D outset outline. The effect depends on the outline-color value
• none - Defines no outline
• hidden - Defines a hidden outline

Example

p {
    border: 1px solid black;
    outline-color: red;
}

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Result

A dotted outline.

A dashed outline.

A solid outline.

A double outline.

A groove outline. The effect depends on the outline-color value.

A ridge outline. The effect depends on the outline-color value.

An inset outline. The effect depends on the outline-color value.

An outset outline. The effect depends on the outline-color value.

Outline - Shorthand property

• same to border

Example

p {
    border: 1px solid black;
    outline: 5px dotted red;
}

• Specify the space between an outline and the edge or border of an element

outline-offset: length|initial|inherit;

Example:

div {
    border: 2px solid black;
    outline: 2px solid red;
    outline-offset: 15px;
}