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

高洛峰
풀어 주다: 2017-03-26 11:13:13
원래의
1534명이 탐색했습니다.

이 글에서는 주로 일반적인 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
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿