펑션블록과 인라인의 차이점은 무엇인가요?

블록과 인라인의 차이점

블록은 블록 수준 요소라고도 하고, 인라인은 인라인 요소라고도 합니다.

1. 블록 수준 요소
   

• 각 블록 수준 요소는 새롭습니다. 줄의 시작

• 기본 너비는 100%입니다

• 너비와 높이를 설정할 수 있으며 여백과 패딩 속성을 설정할 수 있습니다.

인라인 요소

• 요소 앞뒤에 줄 바꿈이 없습니다. 너비, 높이, 높이 및 너비는 설정할 수 없습니다. 내부 콘텐츠가 채워진 후에 계산됩니다. 디스플레이 설정이 유효하지 않습니다

• 블록 수준 요소는 내부적으로 중첩될 수 없습니다.

• img 입력 텍스트 영역 선택의 너비와 높이 설정도 인라인 요소라고 말할 수 없습니다. 너비와 높이 설정은 모두 대체 요소라고 할 수 있습니다

• 대체 요소는 브라우저가 요소의 태그와 속성을 사용하여 요소의 특정 표시 내용을 결정한다는 의미입니다. 교체 요소에는 일반적으로 고유한 크기가 있으므로 설정할 수 있는 너비와 높이가 있습니다.

• margin-left margin-right padding-left padding-right만 설정할 수 있습니다. 즉, 가로 방향에서는 세로 방향에서는 유효하지 않습니다.

블록 수준 요소 및 인라인 요소는 변경될 수 있습니다. 표시를 지정하여 서로

---

일반적으로 사용되는 블록 수준 요소
　◎ blockquote - 블록 인용
　◎ dir - 디렉토리 목록
　◎ p - 일반적으로 사용되는 블록 수준 요소
　◎ fieldset - GroupPanel과 동일한 형식
　◎ form - form
◎ h1 - 제목
　　◎ h2 - 자막
　◎ h3 - 3급 제목
　◎ h4 - 4급 제목
　◎ h5 - 5급 제목
　◎ h6 - 6급 제목
　◎ hr - 가로 구분선
　◎ ol - 정렬 형식
　◎ p - Paragraph
　◎ pre - Formatted text 입력 형식에 따라 텍스트를 출력합니다
　◎ table - table
　◎ ul - 정렬되지 않은 목록

자주 사용되는 인라인 요소
◎ A 태그 ◎ b - 두꺼운 본문
◎ BR - 줄 바꾸기
◎ CITE -quoted
◎ code -code ◎ em -emphasis
◎font -글꼴 설정(권장하지 않음)
　◎ 입력 - 입력 상자
　◎ 라벨 - 테이블 라벨
　◎ q - 짧은 인용
　◎ 선택 - 항목 선택
　◎ 작은 - 작은 글꼴 텍스트
　◎ 범위 - 일반적으로 사용되는 인라인 컨테이너, 텍스트 내 블록 정의
　◎ 강한 - 두꺼운 본문 강조
　◎ 하위 - 아래 첨자
　◎ sup - 위 첨자
◎ 텍스트 영역 - 여러 줄 텍스트 입력 상자


인라인 요소의 너비 및 높이 여백 패딩 차이 확인

스타일:

---

        span,a{            
        width:100px;            
        height:500px;        
        }

        span,a {            
            margin-top:50px;            
            margin-right:150px;            
            margin-bottom:50px;            
            margin-left:150px;            
            padding-left:10px;            
            padding-right:10px;            
            padding-top:100px;            
            padding-bottom:100px;            
            border:1px solid yellow;            
            background-color:#d1d5d3;        
        }
        
        #p3,#p4{            
            width:400px;            
            height:200px;            
            background-color:black;        
        }

구조:

    <p id="container">
        <span>我是span </span>
        <a href="#">我是a</a>
        <p id="p4">p4</p>
    </p>

결과:

1 여백이 가로에서만 유효한지 확인합니다. 방향

2. 패딩이 가로 방향에서만 유효하고 세로 방향의 검정색 p에는 영향을 주지 않는지 확인하세요

위 내용은 펑션블록과 인라인의 차이점은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!