Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use the table and box model in Css. It is very detailed and has a certain reference value. Friends who are interested must read it!

Form

Border-collapse adjacent cell border processing, merge table = collapse

Border-spacing: adjacent cell spacing

Caption-side: title location

Empty-cells: whether empty cells are displayed

List

List-style-tyle: marking styles at the front of the list, dots, square dots, etc.

List-style-image: list image marker

Abbreviation: all properties of the list-style:none cancel list are generally used for navigation

Horizontal navigation: li {display:inline}

Transparency

Opacity: set transparency (value between 0-1)

Cursor shape

Cursor: sets the shape of the cursor, when the cursor is over a div, sets the wait shape, hand shape, etc.

Day03

Box model

The box model is divided into elements, inner margin, border and outer margin.

1. Set elements of a certain size

1)。 Width: sets the element width 2). Height: setting element height

two。 Set the inner margin

Padding-top/bottom/right/left

Padding: abbreviated form

3. Set the outer margin (the distance from the border to the edge of the browser or to the next box)

Margin-top/bottom/left/right

Margin: abbreviated form

4. Set the minimum and maximum size (when the width is set to a percentage, expand or shrink the browser or change the large or small screen monitor to prevent element dislocation or overflow)

Min-width: the minimum value is the addition of two div widths

Max-width: maximum

5. Deal with element content overflow

Overflow-x/y:x or y-axis overflow

Overflow: abbreviated form: scroll sets scroll bar (overflow handling)

6. Change element type

1)。 Element types are as follows:

Inline inline element: width and height cannot be set in the page, nor will it occupy a single line.

Inline-block inline block-level elements: cannot occupy a single line, but can set width and height .img elements

Block block-level element: exclusive row, width and height can be set, pcenture div element

2)。 Change the element type display:

The types of elements can be converted to each other, and the properties of elements change after the transformation.

Div is generally not converted to inline elements, will be discarded, and cannot be set high

3)。 Hidden element: display:none

7. Float and prevent elements from stacking

Floating: float:left/right

Eliminate elements stacked together: clear:both (eliminate both left and right)

The above is all the contents of the article "how to use tables and Box models in Css". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.