집 > 기사 > 웹 프론트엔드 > 일반적인 CSS 작업 분류 방법에 대한 자세한 설명

일반적인 CSS 작업 분류 방법에 대한 자세한 설명

高洛峰원래의: 2017-03-26 11:13:131477검색

이 글에서는 주로 일반적인 CSS 연산의 분류 방법을 자세히 설명합니다. 관심 있는 친구들은

1. 크기 연산

높이 요소 높이 설정

line-height 줄 높이 설정

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

rrree

max-height 요소의 최대 높이 설정

max-width 요소의 최대 너비 설정

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

min-width 요소의 최소 너비를 설정

min-height 요소의 최소 높이를 설정

width 요소의 너비를 설정

2. 분류 작업

clear 요소 옆에 다른 부동 요소가 허용되는지 여부를 설정합니다.

커서 가리킬 때 표시되는 포인터 유형을 지정합니다. 요소

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

p{
    cursor: auto;
}

p{
    cursor: alias;
}

디스플레이 표시 시간을 설정하는지 여부를 설정합니다 요소를 표시할 시기

p{
    cursor: cell;
}

float 요소가 부동하는 방향을 정의합니다

위치 요소를 정적 위치에 배치합니다. , 상대, 절대, 고정 위치

Visibility 요소의 표시 여부 설정

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

li{
    display: inline;
    visibility: hidden;
}

위 내용은 일반적인 CSS 작업 분류 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：일반적인 CSS 탐색 모음 작업에 대한 자세한 설명다음 기사：일반적인 CSS 탐색 모음 작업에 대한 자세한 설명