July 19 = 231-240

10.2.5 table-related Box Model

Css3 also provides the following attribute values for display.

Table: displays the target HTML component as a table.

Table-caption: displays the target HTML component as the table title.

Table-cell: displays the target HTML component as a cell.

Table-column: displays the target HTML component as a table column.

Table-column-group: displays the target HTML component as a table column group.

Table-header-group: displays the target HTML component as the table header.

Table-footer-group: displays the target HTML component as the table footer.

Table-row: displays the target HTML component as a table row.

Table-row: group: displays the target HTML component as a table row group.

 

10.2.6 list-item Box Model

The list-item model can convert the target component to a list element of the <ul> type, or add a list flag before the element.

Code example:

CSS style for setting Div as list element and adding list flag before Element

Div {

Display: List-item;

List-style-type: Square;

}

 

10.2.7 run-in Box Model

The component group of the run-in box model should be used inside the element to be displayed after it. If the component of the run-in box model is followed by a block box model element

Then, the elements of the run-in box model will be displayed in the later elements.

Code example:

Set the run-in box model for the div1 Element

Div1 {

Width: 200px;

Height: 200px;

Display: run-in;

}

Set block box model for div2 Element

Div2 {

Width: 500px;

Height: 500px;

Display: block;

}

The above div1 and div2 style results are displayed in the div2 internal

 

10.3 Add a shadow to the box

Css3 adds the box-shadow attribute to add a shadow to the box model. This attribute can be used to add a shadow to the entire box model.

10.3.1 use the box-shadow attribute

The box-shadow attribute adds a shadow to all elements of the box model. This is a composite attribute. It contains the following five values:

Hoffset: This property value controls the offset of the shadow in the horizontal direction.

Voffset: This property value controls the vertical offset of shadows.

Blurlength: This attribute value controls the Blur degree of the shadow.

Scalelength: This property value controls the degree to which the shadow scales.

Color: This property controls the color of the shadow.

Code example:

Add the CSS style with the upper left shadow to the DIV Element

Div {

Width: 300px;

Height: 300px;

Border: 1px solid;

Margin: 30px;

Box-Shadow:-10px-8px 6px #444;

}

 

10.4 CSS 3 multi-Column Layout

10.4.1 columns added by css3

It is very easy to implement column sharding through css3, as long as the column-count attribute is simply added.

Code example:

// Set the DIV element to display the content in the DIV in two columns

Div {

Column-count: 2;

}

In fact, many attributes are added to css3 to achieve the partition effect, as shown below.

Columns: This is a composite attribute. You can specify both the column width and number of columns. This attribute is equivalent

Specify both the column-width and column-count attributes.

Column-width: This attribute specifies a length value to specify the width of each column.

Column-count: This attribute specifies an integer to specify the number of columns.

Column-rule: This is a composite attribute used to specify the separation bars between columns. This attribute can specify the width and,

Style and color. This attribute is equivalent to specifying both the column-rule-width, column-rule-style, and column-rule-color attributes.

Column-rule-width: This attribute specifies a length value to specify the width of the separation bars between columns.

Column-rule-style: This attribute is used to set the line type of the separator. This attribute supports the following attributes: None, dotted, dashed, solid, and double.

The attribute value has the same meaning as the attribute values when the border line is described earlier.

Column-rule-color: This attribute is used to set the color of the separator bar.

Column-gap: This attribute specifies a length value to specify the spacing between columns.

Column-fill: This attribute is used to control the column height. This attribute supports the following two attribute values.

Auto: the height of each column automatically changes with the content.

Balance: the height of each column is the height of the column with the most content.