css-table-specific properties and positioning

1. Table-specific properties
1. Border Merge
Property: Border-collapse
Value:
1.separate default value, that is, split border mode
2.collapse Border Merge
2. Border margin
Effect: Sets the distance between cells or between cells and tables.
Property: Border-spacing
Value:
1. Give a value: the same horizontal and vertical spacing
2. Give two values:
The first value represents the horizontal spacing
The second value represents the vertical spacing
Attention:
The border margin is valid only in the split border mode, which is border-collapse:separate; when the border-spacing is effective.
3. Table Header Location
Property: Caption-side
Value:
1.top default value, header above the contents of the table
2.bottom title is below table content
4. Show rules
Function: Used to help the browser specify how to lay out a table, that is, specify how TD size is calculated.
Property: Table-layout
Value:
1.auto default, which is the automatic table layout, the size of the column is actually determined by the content.
2.fixed fixed table layout, the column size is determined by the set value.
Auto layout vs Fixed layout:
1. Automatic layout
1. The size of the cell will fit the content
2. When the table is complex, loading speed is slow (disadvantage)
3. Automatic layout will be more flexible (advantages)
4. Used when the table is not too complex and does not determine the size of each column
2. Fixed layout
1. The size of the cell depends on the value you set
2. The display of tables (advantages) will be accelerated in any case
3. Fixed layout not flexible (disadvantage)
4. For determining the size of each column, use
2. Positioning-floating positioning (focus)
1. Positioning
Positioning: Refers to changing the default position of the element in the page (where it should appear).
2. Classification of positioning
According to the effect of positioning, can be divided into the following types:
1. Normal flow positioning (default positioning method)
2. Floating positioning
3. Relative positioning
4. Absolute positioning
5. Fixed positioning
3. General Flow Positioning
General flow positioning, also known as "document flow positioning", the default display of elements in the page.
1. Each element has its own space in the page
2. Default is displayed in the upper left corner of the parent element
3. Block-level elements are arranged in a top-to-bottom manner, with each element exclusive of one row.
4. Inline elements and inline blocks are arranged from left to right, with multiple elements displayed in a single row.
Question: How do I make multiple block levels appear in one row?
4. Floating positioning
1. What is floating & features
If you set the positioning method of an element to float, the element will have the following characteristics:
1. Severity will be excluded from the document flow (out of the document flow), no longer occupies the page space, and the non-floating element is up.
2. Floating elements can only float on the current line.
3. The floating element is docked on the left or right side of its parent element, or on the edge of another element that has been floated.
2. Syntax
Property: Float
Value:
1.left left floats, letting the element dock to the left of the parent element, or to a floating element that is already on the left.
2.right floats right, letting the element dock to the right of the parent element, or to a floating element that is already on the right.
3.none default value, no float
3. Special effects caused by floating
1. When the parent element does not display all of the floating elements, the last one will wrap, however, it is possible for the card owner.
2. Once the element has floated, the width will be the main content (not specified width)
3. Once the element floats, it becomes a block-level element
Allow to modify dimensions;
Vertical margins can be handled normally.
4. Text, inline elements, inline block elements are arranged in a rounded way, and are not to be pressed against the ground, but cleverly avoided.

Practice:
Add two span elements, free content, let SAPN float, and set high-width properties to see the effect
4. Clear the impact of floating
Once the element floats, it will have a certain effect on the subsequent elements (the next step is to complement), and if the subsequent elements do not want to be affected (do not want to occupy), then can be resolved by clearing the float.
Properties: Clear
Value:
1.left clears the effect of the left float of the element before the current element
2.right clears the effect of the right float of elements preceding the current element
3.both clears the effect of any kind of float of the current element
4.none default value, no cleanup action
5. Effects of floating elements on parent elements
The height of the element, whichever is the height of the non-floating element, is not the height of the floating element.
Scenarios for resolving parent Element Heights:
1. Set the height of the parent element directly
Cons: Not knowing the height of the parent element every time
2. Set parent element also floating
Cons: Not all parent elements need to float at any time, and floats affect subsequent elements
3. Set the overflow for the parent element
Value: Hidden or auto
Cons: If there is content to overflow display, it will be hidden together
4. In the parent element, append an empty empty element (block level) and set its clear:both.
3. Display
1. Display mode
1. What is the display method?
Determines the representation of elements in a page (inline, block level, inline block, table)
2. Syntax
Properties: Display
Value:
1.none do not show elements-hidden
Out of the document stream, does not occupy page space.
2.block allows elements to behave as block-level elements
Allow setting high width
3.inline allows elements to behave the same as inline elements
4.inline-block allows elements to behave in line with inline block elements
Features: Allowed to modify the size
Multiple elements are displayed in one row

5.table Display as Table
Features: size is subject to content
Each element is exclusive of one row
Allow modification of dimensions
Practice:
Create 5 A tags in the page, and write content and HREF attributes
1. Set a different display mode for the a mark, respectively
None,block,inline,inline-block,table
2. Set aspect each 200px for all a elements and see the effect.
2. Display effect
1. Show/Hide
Property: Visibility
Value:
1.visible default value, element visible
2.hidden hidden, element not visible
Interview question: Dispaly:none and Visibility:hidden difference?
Dispaly:none will be out of the document stream and not occupy page space
Visibility:hidden not out of document flow, Occupy space
3. Transparency
Property: Opacity
Value: 0.0-1.0
Note: Rgba () and opacity areas
Opacity acts on the element, as well as the transparency of all content within the element. RGBA only acts on the transparency of a property (element color or its background color).
4. Alignment of vertical direction
Property: Vertical-align
Occasion:
1. Use in tables
Value: Top/middle/bottom
2. Use in pictures
Action: Controls the vertical alignment of text on both sides of the picture
Value:
Top Tops
Middle Center
Bottom Bottom
Baseline default value, Baseline alignment
Attention:
When you write a Web page, you typically change the default alignment for all pictures to the alignment other than baseline.
5. Cursor
1. Role
The state of the mouse when you change the mouse hover over the element
2. Syntax
Properties: Cursor
Value:
1.default arrows
2.pointer Small Hand
3.text I
4.wait Waiting
5.crosshair +
6.help Help
4. List
1. List item identification
Property: List-style-type
Value:
1.none
2.disc
3.circle
4.square
2. List item image
Function: Use a custom image as a list identifier
Property: List-style-image
Value: url (picture path);
3. Location of the list item
Property: List-style-position
Function: Places the default list item identifier in the Li's position.
Value:
1.outside default value, place the identity outside of Li
2.inside placing the logo inside Li
4. Shorthand for the list
Property: List-style
Value: type URL () position;
Common ways:
List-style:none;
Practice:
Finish effect
5. Positioning-relative absolute fixation
1. Positioning properties
Property: Position
Value:
1.static static, default value
2.relative relative positioning
3.absolute Absolute Positioning
4.fixed fixed positioning
2. Offset properties
Top/bottom/left/right
The above offset property values are numeric (px)
Ex
top:100px; Offset downward 100px
top:-50px; Offset up to 50px
left:150px; Offset Right 150px
right:-150px; Offset Right 150px
3. Positioning method
1. Relative positioning
1. What is relative positioning
The element offsets a distance relative to its original position
2. Use Cases
Use when making position adjustments
3. Syntax
position:relative;
Coordinate the offset property to fine-tune the position.
Practice:
Add a relative positioning to the above list in the practice and offset the top left by 10px.
2. Absolute positioning
1. Syntax:
Position:absolute;
Modifying the position with offset properties
2. Use Cases
Elements with stacking order
Pop-up menu
3. Features
1. An absolutely positioned element will initialize the position relative to the nearest positioned ancestor, and if there is no positioned ancestor, then the element will initialize the position relative to the body.
2. Element positioning is removed from the document stream and does not occupy page space.

css-table-specific properties and positioning