html5 태그는 3가지 범주로 나뉩니다. 1. 너비와 높이를 설정할 수 있는 블록 수준 요소, 자동 줄 바꿈, 위쪽, 아래쪽, 왼쪽 및 오른쪽 여백과 패딩이 유효합니다. 2. 너비와 높이를 설정할 수 없다는 특징이 있는 인라인 요소는 자동으로 줄 바꿈되지 않습니다. 3. 너비와 높이를 설정할 수 있고 자동으로 줄 바꿈되지 않는 것이 특징인 인라인 블록 요소.
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.
HTML5의 마크는 블록 수준 요소, 인라인 요소, 인라인 블록 요소로 구분됩니다.
인라인 요소:
너비와 높이를 설정할 수 없습니다.
위아래 여백은 유효하지 않습니다. 왼쪽과 오른쪽만 유효하며 패딩이 효과적이며 공간이 확장됩니다.
box-sizing:border-box;
는 이 속성이 상자 모델에만 해당되므로 유효하지 않습니다. box-sizing:border-box;
无效,因为该属性针对盒模型。
不会自动换行
块级元素:
能够设置宽高
margin和padding的上下左右均对其有效
可以自动换行
多个块状元素标签写在一起,默认排列方式为从上至下
可以使用margin:0 auto
居中对齐
行内块元素:
不会自动换行
能够设置宽高
默认排列方式为从左到右
可以使用text-align:center
使内容相对于父盒子水平居中对齐,例如img标签,可以使用text-align:center
相对父盒子居中对齐
margin:0 auto
无效
水平排列,但所有元素默认会有1个空格的间隙,因为元素之间在html中书写有回车换行,浏览器解析会将其解析成一个空格。
但标签的类型是可以转换的
display:inline
: 转换为行内元素
display:linline-block
转换为行内块元素
display:block
블록 수준 요소:
너비와 높이를 설정할 수 있습니다. 위쪽, 아래쪽, 왼쪽 및 오른쪽 여백과 패딩이 유효합니다.
자동으로 줄 바꿈 가능
여러 블록 요소 태그는 함께 작성되며 기본 배열은 위에서 아래로 이루어집니다.
margin:0 auto
를 사용하여 가운데 정렬할 수 있습니다
인라인 블록 요소:
자동 줄 바꿈 없음 너비와 높이를 설정할 수 있습니다 기본 배열은 왼쪽에서 오른쪽입니다 text-align:center는 부모 상자를 기준으로 콘텐츠를 만듭니다. img 태그와 같은 수평 중앙 정렬의 경우text-align:center
를 사용하여 상위 상자를 기준으로 가운데 정렬할 수 있습니다. 상위 상자
margin:0 auto
가 유효하지 않습니다
가로로 정렬합니다. 그러나 모든 요소에는 기본적으로 캐리지 리턴과 라인 피드가 있기 때문에 1개의 공백이 있습니다. HTML의 요소이며 브라우저는 이를 공백으로 구문 분석합니다.
그러나 라벨 유형은 변환 가능합니다
display:inline
: 인라인 요소로 변환
display:linline-block
변환 인라인 블록 요소
display:block
를 블록 수준 요소
마스터 요소 카테고리로 변환합니다. 이제 학습된 태그를 다음과 같이 분류합니다.
1. 블록 수준 요소
Title