Home >Web Front-end >CSS Tutorial >Detailed explanation of common CSS operation classification methods

Detailed explanation of common CSS operation classification methods

高洛峰Original: 2017-03-26 11:13:131541browse

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%;
}

<!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>

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;
}

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;
}

p{
    cursor: alias;
}

p{
    cursor: cell;
}

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>

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;
}

li{
    display: inline;
    visibility: visible;
}

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of common CSS navigation bar operationsNext article：Detailed explanation of common CSS navigation bar operations

See more

Detailed explanation of common CSS operation classification methods

Related articles