1, Basic properties of CSS 2
1. Table attributes
|
Attribute name |
purpose |
Value |
|
border-collapse
|
Sets or retrieves whether the edges of rows and cells of a table are merged or independent. |
separate: border independent collapse: adjacent edges are merged |
|
border-spacing |
Spacing between cells when borders are independent |
Number, negative value is not allowed |
|
empty-cells |
Sets or retrieves whether the border of a table cell is displayed when there is no content in the cell. |
Hide: hide the border of the cell. show: displays the border of the cell.
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Table properties</title>
<style>
.separate{
width: 200px;
height: 200px;
border-collapse:separate;
border-spacing:10px;
empty-cells: hide;
}
</style>
</head>
<body>
<table border="1" class="separate">
<td>separate--Border independent</td>
<td>separate--Border independent</td>
<td>separate--Border independent</td>
</tr>
<tr>
<td>collapse--Adjacent edges are merged</td>
<td>collapse--Adjacent edges are merged</td>
<td></td>
</tr>
</table>
</body>
</html>
2. Layout properties
|
Attribute name |
purpose |
Value |
|
display |
Sets or retrieves whether and how objects are displayed |
none: hide objects. Does not reserve its physical space for hidden objects Block: Specifies that the object is a block element. |
|
visibility |
Defines whether the element is visible |
Visible: set the visible object to reserve physical space hidden: set object hiding collapse: mainly used to hide rows or columns of a table. Hidden rows or columns can be used by other content. For other objects outside the table, its function is equivalent to hidden.
|
|
float
|
Defines the floating placement of elements to the left or right
|
none: set the element not to float Left: sets the element to float on the left Right: set the element to float on the right
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.test{
width: 300px;
height: 300px;
float: right;
background-color: red;
}
.table{
width: 300px;
height: 300px;
float: right;
background-color: blue;
}
</style>
</head>
<body>
<div class="test">I will appear on the right side of the screen 1</div>
<div class="table">I will appear on the right side of the screen 2</div>
<br>
<img src="imgs/avatar04.png"/>
</body>
</html>
3. Location properties
|
Attribute name |
purpose |
Value |
|
position
|
Specifies how an element is positioned in the document. |
static: default. Relative: relative positioning [the object follows the regular flow and will not affect any element in the regular flow] Absolute: absolute positioning [object out of normal flow] |
|
top
|
Defines the offset between the upper outer margin boundary of an element and the upper boundary of its containing block
|
Number, negative value is not allowed |
|
right
|
Defines the offset between the right outer margin boundary of an element and the right boundary of its containing block
|
Number, negative value is not allowed |
|
bottom:
|
Defines the offset between the bottom outer margin boundary of an element and the bottom boundary of its containing block
|
Number, negative value is not allowed |
|
left:
|
Defines the offset between the left outer margin boundary of an element and the left boundary of its containing block
|
Number, negative value is not allowed |
|
z-index:
|
Defines the stacking order of an element in the document |
Number [the larger the number, the higher it will be] |
4. Transformation attribute setting
2D Transform Functions:
: [matrix transformation] specify a 2D transformation in the form of a six valued (a,b,c,d,e,f) transformation matrix, which is equivalent to directly applying a [a,b,c,d,e,f] transformation matrix
: Specifies the 2D translation of the object. The first parameter corresponds to the X-axis and the second parameter corresponds to the Y-axis. If the second parameter is not provided, the default value is 0
: Specifies the 2D scale of the object. The first parameter corresponds to the X-axis and the second parameter corresponds to the Y-axis. If the second parameter is not provided, the value of the first parameter is taken by default
Specify the 2D rotation of the object, which requires the definition of the < '> attribute
3D Transform Functions:
: specify a 3D transformation in the form of a 4x4 matrix
:
Specifies the 3D displacement of the object. The first parameter corresponds to the X-axis, the second parameter corresponds to the Y-axis, and the third parameter corresponds to the Z-axis. Parameters cannot be omitted
: Specifies the 3D rotation angle of the object. The first three parameters represent the rotation direction X, y and Z respectively. The fourth parameter represents the rotation angle. Parameters cannot be omitted
: Specifies the 3D scale of the object. The first parameter corresponds to the X-axis, the second parameter corresponds to the Y-axis, and the third parameter corresponds to the Z-axis. Parameters cannot be omitted
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2D Transform</title>
<style>
#div1{
width: 200px;
height: 200px;
background-color: red;
-webkit-transform:matrix(0,1,1,1,10,10);
}
/*
1. The normal value is 1, which defines scaleX. Scale is defined by setting the value of X axis. Value: > = 0
2. The normal value is 0, which defines skew and defines 2D tilt
3. The normal value is 0, which defines the rotation angle of 2D
4. The normal value is 1, which defines scaleY. Scale is defined by setting the value of Y axis. Value: > = 0
5. The normal value is 0, which defines translateX. The left and right displacement is defined by setting the value of X axis. Value: any
6. The normal value is 0, which defines translateY. The up and down displacement is defined by setting the value of Y axis. Value: any
*/
#div2{
width: 200px;
height: 200px;
background-color: red;
transition:all 1s;
}
#div2:hover{
-webkit-transform:translate(100px,100px);
}
/*
translate(100px,100px)translation
Parameter 1 -- moving distance of X axis
Parameter 2 -- moving distance of Y axis
*/
#div3{
width: 200px;
height: 200px;
background-color: red;
transition:all 1s;
}
#div3:hover{
-webkit-transform:scale(2,0.5);
}
/*
transform:scale(2,0.5);---zoom
Parameter 1 -- shrinkage ratio of X axis [multiple of element width]
Parameter 2 -- shrinkage ratio of Y axis [multiple of element height]
*/
#div4{
width: 200px;
height: 200px;
background-color: red;
transition:all 1s;
}
#div4:hover{
transform-origin:50% 50%;
-webkit-transform:rotate(-45deg);
}
/*
rotate(-45deg);rotate
Parameter -- rotation angle [deg]
Transform origin required: 50%; Establish a reference point for rotation.
*/
#div5{
width: 200px;
height: 200px;
background-color: red;
transition:all 3s;
}
#div5:hover{
transform-origin:50% 50%;
-webkit-transform:translate(300px,300px) rotate(-45deg) scale(2,0.5);
}
</style>
</head>
<body>
<!--<div id="div1"></div>-->
<div id="div2"></div>
<hr>
<div id="div3"></div>
<hr>
<div id="div4"></div>
<hr>
<div id="div5"></div>
</body>
</html>