css 학습 노트 - 상자 스타일

display의 몇 가지 매개 변수

1. inline과 Block

라인, 한 줄에서 줄을 바꿀 수 없고, 내연 속성은 상자 크기를 설정할 수 없고, 자동으로 줄을 바꿀 수 없습니다.
Block, 한 줄에 있지 않으면 자동으로 줄을 바꿉니다. 상자의 크기를 설정할 수 있습니다.
기본적으로span은 inline이고 div는 Block입니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            background-color: aqua;
        }
        span{
            background-color: crimson;
        }

        h1{
            background-color: yellow;
        }

    </style>
    <title>display</title>
</head>
<body>
    <div>div block </div>
    <div>div block </div>
    <span>span inline </span>
    <span>span inline </span>
    <h1>h1  block </h1>
    <h1>h1  block </h1>
</body>
</html>

효과는 다음과 같습니다.
기본적으로 그렇지만 디스플레이를 통해 수정할 수 있습니다. 예를 들어 상기 코드의 스타일 부분은

        div{
            background-color: aqua;
            display: inline;
        }
        span{
            background-color: crimson;
            display: block;
        }

        h1{
            background-color: yellow;
            display:inline;
        }

그러면 얻은 효과는 다음과 같다.
확실히div와 h1은 inline이 되었고span은 Block이 되었다.

2.inline-block

앞에서 말했듯이 inline은 크기를 설정할 수 없습니다.
한편, inline-block은 inline과 block의 특성을 동시에 갖추고 있어 크기를 설정할 수 있으며 한 줄에
예를 들어span에 대해 말하자면 그 자체는 inline이다. 여러 span 사이에는 자동으로 줄이 바뀌지 않을 뿐만 아니라 크기도 수정할 수 없다. inline-bock은 이 문제를 해결할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        span{
            display:inline-block;
            background-color: yellow;
            width: 200px;
        }
    </style>
    <title>inline-bock</title>
</head>
<body>
    <span>span inline 1</span>
    <span>span inline 2</span>
    <span>span inline 3</span>
    <span>span inline 4</span>
</body>
</html>

효과는 다음과 같습니다.

3.inline-table

테이블 자체도 Block입니다. 다음 코드를 사용하면:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-table</title>
    <style>
        span{
            background-color: aquamarine;
        }

        table{
            background-color: crimson;
        }


    </style>
</head>
<body>
<span>header</span>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
<span>footer</span>
</body>
</html>

효과는 다음과 같습니다.
그럼 제가 지금 필요한 게 있어요. 헤더와 포터와 테이블이 한 줄에 있어요. 헤더는 왼쪽에 있고 테이블은 중간에 있고 포터는 오른쪽에 있어요.
테이블을 inline-table로 설정하면 됩니다.

        table{
            display: inline-table;
            background-color: crimson;
        }

4.list-item

div의 조합도 리스트의 효과를 보여줄 수 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list-item</title>
    <style>
        div{
            display: list-item;
            list-style-type: circle;
            margin-left: 30px;
            background-color: aqua;
            width: 300px;
            margin-bottom: 10px;
            padding: 5px;
        }
    </style>
</head>
<body>
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
<div>item5</div>
</body>
</html>

효과:
관건은 이 세 줄 코드에 있다.

       1     display: list-item;
       2     list-style-type: circle;
       3     margin-left: 30px;

첫 번째 줄과 두 번째 줄이 동시에 나타나야 하며, 하나가 빠지면 동그라미 효과가 없다
세 번째 줄 코드가 없으면 동그라미가 덮어집니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

초보자를 위한 간단한 카드 호버 애니메이션

html과 css만 사용하여 만든 매우 간단한 카드 호버 애니메이션을 살펴보겠습니다. css 속성을 알고 있다면 이해할 수 있지만 완전히 초보자라면 css의 기초를 배우는 것이 좋습니다. 1단계: 마크업 즉, HTM...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

css 학습 노트 - 상자 스타일

1. inline과 Block

2.inline-block

3.inline-table

4.list-item

좋은 웹페이지 즐겨찾기