요소를 수평으로 정렬하는 6가지 방법

우리 모두 알고 있듯이 블록 수준 요소는 기본적으로 세로로 정렬되고 인라인 요소는 기본적으로 div 및 기타 일반적인 블록 수준 태그와 같이 레이아웃에 사용됩니다. 레벨 요소도 가로로 배열되어 있나요? 이 기사에서는 블록 수준 요소를 수평으로 배열하는 6가지 방법을 소개합니다.

첫 번째 유형: 디스플레이: inline-block

우선 블록 요소(블록 요소)와 인라인 요소(인라인 요소)를 이해해야 합니다.

블록 수준 요소: 블록 수준 요소에는 너비 높이가 포함됩니다. , padding, border 여백을 사용하여 위에서 아래로 정렬됩니다. 일반적인 블록 수준 요소에는 div, p, form, ul 등이 있습니다.

인라인 요소: 높이와 너비는 콘텐츠에 따라 결정됩니다. 자체적으로 고정된 크기를 설정할 수 없습니다. 세로 여백과 패딩이 없습니다. 배열은 가로 방향입니다. ,span.,label,button,img,input...

여기서 "버튼, img 및 입력 레이블은 여백과 패딩뿐만 아니라 너비와 높이도 설정할 수 있습니다. 왜 실제로 인라인 요소인가요?"라고 질문하는 분들이 있을 수 있습니다. "사실 HTML 요소를 나누는 방법에는 '블록 수준 요소와 인라인 요소', '대체 가능한 요소와 대체 불가능한 요소'라는 두 가지 주요 방법이 있습니다. 위에서 첫 번째 분할 방법을 소개하고 아래에서 두 번째 분할 방법을 소개합니다.

대체 요소: 대중적으로 이해되는 요소는 너비와 높이 속성이 있는 요소입니다. 대체 요소는 display:inline-block 요소와 유사하며 높이, 너비, 내부 및 외부 여백을 설정할 수 있습니다. 여기에는 주로 img, input, textarea, select, object, audio 및 canvas가 포함됩니다. 대체 요소입니다.

대체 불가능한 요소: 교체 요소를 제외한 나머지는 대체 불가능한 요소입니다(O(∩_∩)O)

디스플레이: 인라인 블록이 요소를 수평으로 정렬할 수 있다는 것을 많이 알고 있지만, 레이아웃에 약간의 문제가 있을 수 있습니다. 예:

<style>
        div{
            display:inline-block;    width:200px;    height:200px;
        }
        .div1{
            background:green;
        }
        .div2{
            background:red;
        }
</style>
<div class = "div1">左边</div>
<div class = "div2">右边</div>

두 div 사이에 공백이 발견된 이유는 무엇입니까?

브라우저에서는 줄 바꿈, 들여쓰기 및 공백을 하나의 공백으로 처리합니다. 공백이 두 개이거나 줄 바꿈에 공백이 하나 더해진 경우에도 하나의 공백으로 구문 분석하여 사용합니다. 이 공간의 크기는 글꼴 크기/2입니다. 이 격차를 제거하는 방법에는 여러 가지가 있습니다.

1. div2의 왼쪽 여백을 설정합니다:-font-size/2

2. 두 div의 상위 태그 글꼴 크기를 0

3으로 설정합니다. 음수 단어 간격

초. :float:left/right

float 속성을 사용하면 요소가 일반 문서 흐름에서 벗어나 컨테이너의 왼쪽 또는 오른쪽을 따라 가로로 정렬될 수 있습니다.

이 방법이 가장 많이 사용된다고 할 수 있지만 적응형 레이아웃에서는 일반적으로 요소의 높이와 너비가 고정되지 않고 콘텐츠 크기에 따라 자동으로 조정된다는 문제가 있습니다. 요소는 모두 부동 요소입니다. 붕괴 정도가 높습니다.

A chestnut

<style>
        span{
            float:left;        width:200px;    height:200px;
        }
        .box1{
            background:green;
        }
        .box2{
            background:red;
        }
</style>
<div>
    <span class = "box1">左边</span>
    <span class = "box2">右边</span>
</div>

여기서는 이전 chestnut의 하위 요소 div를 의도적으로span으로 변경했습니다. 실제로 float는 요소를 암묵적으로 블록 요소로 변환할 수 있다는 것을 표현하고 싶습니다. (위치: 절대/고정도 허용됩니다.) 이므로 자연스럽게 너비와 높이를 설정할 수 있습니다.

상자를 가로로 배열한 후 문제는 무엇인가요? 좋아요! 상위 컨테이너의 높이가 축소됩니다. 이때 상위 컨테이너 div의 높이는 0입니다. 플로팅 요소가 일반 문서 흐름에서 벗어나 높이를 계산할 때 해당 상위 컨테이너가 이를 무시하기 때문입니다. 이렇게 크게 접힌 DIV 뒤에 다른 일반 흐름 태그가 있으면 페이지가 엉망이 되고 다른 바람직하지 않은 결과가 발생하기 때문에 이는 우리가 보고 싶지 않은 것입니다.

플로트를 지우는 방법은 자연스럽게 두 가지가 있습니다.

1.clear:left/right/both는 플로팅 CSS를 지우는 데 특별히 사용됩니다.

2.BFC, BFC에는 "BFC의 높이를 계산할 때 플로팅 요소도 계산에 참여합니다."라는 규칙이 있기 때문입니다.

clear를 사용하여 부동소수점을 지우는 여러 가지 방법에 대해 이야기해 보겠습니다.

1. 마지막 하위 요소 뒤에 빈 태그를 추가한 다음 해당 스타일을 명확하게 설정합니다. 둘 다.

2. 마지막 부동 하위 요소에서 의사 요소::after를 사용하여 부동을 지우는 명확한 스타일을 추가합니다.

세 번째 방법: 테이블 레이아웃

이 레이아웃 방법은 실제로 일반적으로 사용되지 않습니다. 다양한 문제.

렌더링 속도가 느립니다

html 코드의 양이 늘어나고 유지 관리가 어렵습니다.

태그 이름이 html의 의미에 맞지 않습니다. Table은 원래 테이블에 사용되는 것이므로 사용하기에 적합하지 않습니다. 레이아웃

태그 구조는 비교적 엄격하며 나중에 수정될 예정입니다. 비용이 더 많이 듭니다

여기서는 자세히 설명하지 않겠습니다. 즉, 테이블 레이아웃을 사용해 보세요

네 번째 방법: 절대 위치 지정

이 방법은 일상적인 개발에서도 더 많이 사용됩니다. 앞서 언급했듯이 float는 요소를 일반적인 문서 흐름에서 벗어날 수 있습니다. /fixed에도 float 레이아웃에서 언급한 것과 동일한 효과가 처리되었으므로 여기로 전송하면 됩니다.

여기서는 위치:절대 절대 위치 지정에 대해 이야기하고 싶습니다. 위치 지정은 첫 번째 상위 요소를 기반으로 하며 위치:절대/상대/고정과 같은 정적 위치 지정 요소를 찾을 수 없는 경우 루트 요소를 기반으로 합니다. . 위치로. 일반적으로 상위 요소 position:ralative는 하위 요소 position:absolute와 함께 사용됩니다.

다섯 번째 유형: CSS3의 탄력적 레이아웃

弹性布局因为其兼容性所以还没有得到广泛的认可，不过我觉得以后它肯定会独占鳌头，就跟我看好html的视频播放器一样，早晚都会干败flash，只是时间问题！！！

第六种：transform:translate

CSS3中用于动画的一个样式，但是他可是让两个元素横向排列，这里不多说直接上代码，请用谷歌浏览器运行一下：

<style>
        div{
            width:200px;    height:200px;
        }
        .box1{
            background:green;
        }
        .box2{
            transform: translateX(200px) translateY(-200px);
            background:red;
        }
    </style>
<div>
    <div class = "box1">左边</div>
    <div class = "box2">右边</div>
</div>

效果和前几种方式一样。

以上就是我说分享实现横向布局的六种方式，其实每种方式都有很多大学问，我解释描述了冰山一角，并且没有过多的考虑浏览器的兼容性，不过还是希望对你有所帮助。

위 내용은 요소를 수평으로 정렬하는 6가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!