내연 및 내연 블록 및 블록

각 HTML 요소는 직사각형 또는 정사각형 모양의 블록이며 표시 속성이 있습니다.명시적으로 지정하지 않으면 테이블과 관련 요소를 제외하고 내연, 내연 블록 또는 블록 값이 설정됩니다.이러한 HTML 요소의 행동이 매우 중요하다는 것을 인식하는 것은 우리의 레이아웃의 구축 블록이기 때문이다.

내연

다음은 흔히 볼 수 있는 내연 요소의 목록이다

<a>

<span>

<img>

<strong>

내연 요소는 서로 다른 내연 또는 내연 블록 요소와 한 선에 나란히 배치됩니다.그것들을 위 표지 사진 속의 돌로 상상해라.같은 줄에 더 많은 내연 요소를 수용할 공간이 충분하지 않을 때만 새 줄에서 시작할 수 있다.
나는 여러 개의 내연 요소를 한데 쌓았다.

<a href="#">Link</a>
<img src="https://picsum.photos/30" />
<span>Span</span>
<strong>Strong Player</strong>

 

 
내연 요소를 사용할 때 경고가 있습니다.특정 높이나 너비와 페이지 여백 맨 위나 페이지 여백 밑의 속성을 적용할 수 없습니다.따라서 내부 컨텐트에 따라 내연 요소는 채우기나 측면 여백이 없습니다.
이러한 CSS 속성은 내연 요소에 영향을 주지 않습니다.

<a href="#">Anchor tag</a>

a {
  background: orangered;
  width: 300px;
  height: 300px;
  margin-top: 100px;
  margin-bottom: 100px;
}

 

 
내연 원소를 직접 사용하는 것 외에 매우 흔히 볼 수 있는 예가 하나 있다. 즉, 당신이 특정 원소에 스타일을 제공하고 돌파할 때.

<p>
  Hi, my name is <strong>Phillip</strong> and I am a
  <span>software developer</span>
</p>

span {
  color: lime;
}

 

 

인라인 블록

다음은 일반적인 내연 블록 요소의 목록입니다.

<input>

<button>

<select>

<textarea>

흥미로운 것은 이 원소 중 대다수가 <form> 원소와 관련이 있다는 것을 알게 될 것이다.내연 블록은 본질적으로 내연 원소와 매우 비슷하다.그것들은 내연이 하는 모든 것을 할 수도 있지만, 너비, 높이, 수직 간격을 설정할 수도 있다!
내부 블록 요소를 사용하면 간단한 양식을 쉽게 만들 수 있습니다.내부 블록의 문제는 자체 주위에 공간을 만드는 것이다.(입력과 버튼 사이를 주의하십시오.)

<input type="text" /> <button>Submit</button>

input {
  width: 300px;
  height: 50px;
}

button {
  width: 100px;
  height: 50px;
  margin-top: 20px;
}

 

 

덩어리

다음은 일반적인 블록 요소 목록입니다.

<p>

<h1>

<div>

<header>

블록 요소는 항상 새 행에서 시작됩니다.그것들은 또한 전체 줄이나 전체 너비의 공간을 차지할 것이다.즉, 블록 레벨 요소와 병렬할 수 있는 다른 HTML 요소는 없습니다.너비/높이 및 수직 여백을 설정할 수도 있습니다.
흔히 볼 수 있는 장면은 블로그의 일련의 단락이다.

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde autem,
  consequatur deleniti nobis beatae quo dolore nemo corporis. Ad delectus
  dignissimos pariatur illum eveniet dolor rem eius laborum sed iure!
</p>

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde autem,
  consequatur deleniti nobis beatae quo dolore nemo corporis. Ad delectus
  dignissimos pariatur illum eveniet dolor rem eius laborum sed iure!
</p>

 

 

수용성 및 유연성

어떤 요소는 다른 요소를 포함할 수 있고, 어떤 요소는 할 수 없다.일반적인 경험의 법칙은 큰 것에서 작은 것까지의 차원 구조를 따르는 것이다.div에서 내연 또는 내연 블록 요소를 끼워 넣는 데 문제가 없습니다. 스타일은 예상대로 작동합니다.그러나 블록 요소를 경계 내에 배치하려고 하면 이상한 문제가 발생할 수 있습니다.
봐라, 이것은 매우 이상한 행위다.경계 내의 단락에는 빨간색 배경이 없지만 녹색이 있습니까?

<span>asdf<p>gg</p></span>

span {
  background: red;
  color: green;
}

 

 
지금까지 나는 단지 몇 가지 자연스러운 예만 보여 주었다.그러나 원하는 레이아웃에 맞게 CSS 표시 속성을 수동으로 조작할 수 있습니다.인라인의div 디스플레이를 쉽게 보여 줍니다. 인라인 요소로 사용할 것입니다.예:
div의 배경색이 전체 너비로 확장되지 않았음을 주의하세요!

<div>I am a div</div>

div {
  display: inline;
  background: orange;
}

 

 

요점을 요약하여 다시 말하다.

나는 문장에서 제시한 요점을 포괄하기 위해 표를 만들었다.
내연
인라인 블록
덩어리
신상품
아니오
아니오
맞다
어깨를 나란히 하다
맞다
맞다
아니오
너비/높이 및 여백
아니오
맞다
맞다
포함 가능
아니오
내연
인라인 블록
블록
여기에 유용한 참고 자료가 좀 있다.
Full list of block level elements.
Full list of inline level elements: including inline-block elements.
읽어주셔서 감사합니다!이 글은 다음 css 레이아웃에서 구축 블록을 사용하는 데 도움을 줄 수 있기를 바랍니다.