CSS style changes - clipping, z-index, clearing, changing element properties

灞波儿奔

CSS style changes - clipping, z-index, clearing, changing element properties [Copy link]

Cut a certain area of the element

img{
clip:rect(23px,14px,45px,54px)
}
rect (top, right, bottom, left) sets the shape of the element
auto does not apply any clipping
###2.Z-Index
sets the stacking order of elements

div{
z-index:1
}
p{
z-index:10
}
a{
z-index:-1
}
The larger the z-index value, the closer the element is to the front
###3. Clear Clear
is specifically used to clear floating

div{
clear:both
}
left Clear left floating
right Clear right floating
both Clear left and right floating
none Allow floating
###4. Change the characteristics of elements Display
Swap the characteristics of elements

div{
display:inline
}
none The element will not be displayed.
block The element will be displayed as a block-level element with line breaks around it.
inline The element will be displayed as an inline element with no line breaks around it.
inline-block
The list-item element will be displayed as a list.
run-in The element will be displayed as a block-level element or an inline element depending on the context.
table The element will be displayed as a block-level table with line breaks around it.
inline-table The element will be displayed as an inline table with no line breaks around it.
table-row-group The element will be displayed as a group of one or more rows (similar to <tbody>).
table-header-group The element will be displayed as a group of one or more rows (similar to <thead>).
table-footer-group The element will be displayed as a group of one or more rows (similar to <tfoot>).
table-row The element will be displayed as a table row (similar to <tr>).
table-column-group The element will be displayed as a group of one or more columns (similar to <colgroup>).
The table-column element will display as a column of cells (similar to <col>)
The table-cell element will display as a table cell (similar to <td> and <th>)
The table-caption element will display as a table caption (similar to <caption>)