Detailed explanation of common CSS operation classification methods-CSS Tutorial-php.cn

Detailed explanation of common CSS operation classification methods

高洛峰

Release： 2017-03-26 11:13:13

Original

1587 people have browsed it

This article mainly explains in detail the classification methods of common Css operations. Interested friends can refer to it

1. Size operation

height Setting element height

line-height Set the line height

.p1{
    width: 400px;
    line-height: normal;
}
 
.p2{
    width: 400px;
    line-height: 200%;
}
 
.p3{
    width: 400px;
    line-height: 50%;
}

Copy after login

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对齐</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p class="p1">This is my web page
        This is my web page
        This is my web page
        This is my web page
        This is my web page
        This is my web page
    </p>
 
    <p class="p2">This is my web page
        This is my web page
        This is my web page
        This is my web page
        This is my web page
        This is my web page
    </p>
 
    <p class="p3">This is my web page
        This is my web page
        This is my web page
        This is my web page
        This is my web page
        This is my web page
    </p>
</body>
</html>

Copy after login

max-height Set the maximum height of the element

max-width Set the maximum width of the element

.p1{
    line-height: normal;
    max-width: 250px;
}

Copy after login

min-width Set the minimum width of the element

min-height Set the minimum height of the element

width Set the width of the element

2. Classification operation

clear Sets whether other floating elements are allowed on the side of an element

cursor Specifies the type of pointer displayed when pointing to an element

p{
    cursor: auto;
}

Copy after login

p{
    cursor: alias;
}

Copy after login

p{
    cursor: cell;
}

Copy after login

display Sets whether it is timed When to display elements

li{
    display: inline;
}
<ul>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
</ul>

Copy after login

float Define the direction in which the element floats

position Place the element in a static, relative, absolute, fixed position

Visibility Set whether the element is visible or invisible

li{
    display: inline;
    visibility: hidden;
}

Copy after login

li{
    display: inline;
    visibility: visible;
}

Copy after login

The above is the detailed content of Detailed explanation of common CSS operation classification methods. For more information, please follow other related articles on the PHP Chinese website!