programing tip

기본적으로 display : inline-block?

itbloger 2020. 12. 2. 08:12
반응형

기본적으로 display : inline-block?


<div> 기본값은 block

<span> 기본값은 inline

기본값이있는 것이 inline-block있습니까?

그렇지 않다면 CSS를 사용하여 '인라인 블록'을 적용하는 데 적합한 특수 태그 이름은 무엇입니까?
아니면 수업을 계속 사용해야합니까?


내가 말할 수있는 것은 <img>태그가 inline-block기본적으로 유일한 것입니다. 안전한 편이 되려면 수업을 추천하고 싶습니다. 특정 유형의 모든 요소를 ​​변경하면 언제 다시 물릴 지 알 수 없습니다. 또는 언제든지 자신 만의 태그를 만들어 할당 display:inline-block;할 수 있습니다. 이렇게하면 표준 요소의 기본 기능을 변경하지 않습니다.

편집하다

또한 나타납니다 button, textarea, input, 및 select요소도 있습니다inline-block

출처 :

에 따르면이 img있다 inline-block http://dev.w3.org/html5/markup/img.html#img-display

그리고 여기 buttontextarea, 등이 있다고 주장합니다 . http://www.w3.org/TR/CSS2/sample.html

# 2 수정

위의 소스는 img태그가 http://jsfiddle.net/AQ2yp/ 인inline-block 것처럼 보입니다 (Alohci 덕분에)라고 주장하지만inline

다음은 Firefox에서 테스트되었습니다.

buttonis inline-block: http://jsfiddle.net/GLS4P/

textareais inline: http://jsfiddle.net/235vc/

inputis inline: http://jsfiddle.net/RFKe8/

selectis inline-block: http://jsfiddle.net/5B4Gs/


기본값이있는 것이 inline-block있습니까?

엄밀히 말하면, 어떤 존재하지 않습니다 . W3 HTML 사양은 영원히 기본 CSS 속성 값을 지정하지 않은 모든 요소. HTML 4에 대한 "기본 스타일 시트"제공 하지만 개발자는이 를 사용하는 것이 좋습니다 . 요구 사항이나 어떤 종류의 명령도 아닙니다. HTML 5 사양은 "전형적인 기본 표시 속성"을 나타내지 만 다시 한 번 필수 사항은 아닙니다 (HTML 5는 여전히 작업중인 초안 임을 염두에 두십시오 ).

따라서 모든 기본값은 브라우저와 개발자가 실제로 요소가 사용자에게 표시되어야한다고 느끼는 방식에 달려 있습니다. 어느 누구도 특정 요소가 inline-block다른 사람의 브라우저에서 또는 다른 방식으로 표시 될 것이라고 보장 할 수 없습니다 . 원하는 경우 항상 명시 적으로 설정해야합니다. "기본값"에 의존하지 마십시오.

그렇지 않다면 CSS를 사용하여 '인라인 블록'을 적용하는 데 적합한 특수 태그 이름은 무엇입니까? 아니면 수업을 계속 사용해야합니까?

이것은 귀하와 귀하의 페이지를 디자인하는 방법에 달려 있습니다. 항상 그 안에 포함 된 내용에 의미 상 적절한 요소를 사용해야합니다. 요소가 항상inline-block 표시 가 필요한 컨텍스트에서 사용되는 경우, 반드시 스타일 시트의 요소로 설정하십시오. 그렇지 않으면 요소가 제대로 표시되도록하기 위해 클래스 또는 더 구체적인 선택기에 의존해야합니다.


다음은 대부분의 HTML 태그에 대한 기본 표시 값을 가져 오는 Fiddle입니다.

깡깡이

크롬에서 기본 인라인 블록 요소는 다음과 같습니다. "INPUT", "BUTTON", "TEXTAREA", "SELECT"


원칙적 display으로 각 요소에 대한 속성 의 기본값은 브라우저에 따라 다릅니다 . HTML5 초안조차도 CSS 측면에서 요소의 "예상 렌더링"을 나타내지 만 사용해야하는 값을 규정하지 않습니다.

따르면 기본 스타일 시트 는 CSS 2.1 사양에 HTML를 들어,이 요소 display: inline-block기본적으로는 button, input, select, 및 textarea. 브라우저는 이러한 설정을 사용 합니다. 단, Firefox에서는 buttonselect.

HTML5 CR 렌더링 섹션에서 meterprogress요소는 "예상 렌더링"으로 인라인 블록이있는 것으로 추가로 설명되며 이러한 요소를 구현 한 브라우저는 그런 방식으로 작동하는 것으로 보입니다. keygen요소는 인라인 블록 인 것으로 설명하지만, 파이어 폭스 즉, (가 구현하지 않는 keygen것처럼 내부적으로 select는 DOM에서); IE는 전혀 지원하지 않습니다 keygen. Chrome은 제안 된대로이를 구현합니다.

이러한 모든 요소는 다소 특화된 의미, 기능 및 렌더링 특이성을 가지고 있기 때문에 기본적으로 인라인 블록이며 다양한 의미를 가질 수있는 요소로 일반적인 사용에 적합하지 않습니다. 이러한 요소에 사용할 수 있는 것은 기본 렌더링으로 인라인 또는 블록을 선호하는지에 따라 일반적으로 span또는 div입니다.


기본적 으로 모든 HTML 요소와 display속성으로 코드 펜확인할 수 있습니다 . 일부 태그는 구문이 깨졌지만 우리의 목적에는 중요하지 않습니다.

현재, 거기에 5 개 와 요소 display: inline-blockFF는 :

  1. <button>
  2. <select>
  3. <meter>
  4. <progress>
  5. <marquee>

Chrome에서 추가 2 개 (위의 5 개 포함) :

  1. textarea
  2. input

button, textarea, input, and select default to inline-block.

In the event you would want to inline-block a div you'd give it a class name.

.inline-block {
    display: inline-block
}

Then...

<div class="inline-block"></div>

CORRECTION

I was mistaken about img. It seems it defaults to inline and not inline-block


Now you can create a Custom Element (for example: <inline-block> or whatever) that will have its CSS property display set to inline-block by default.

customElements.define( 'inline-block', class extends HTMLElement {
    constructor() {
        super()
        this.attachShadow( { mode: 'open' } )
            .innerHTML = `<style> :host { display: inline-block } </style>
                          <slot></slot>`
    }
} )
#hw { background-color: lightblue }
<inline-block id="hw">Hello World</inline-block>


My solution to this is declaring what I call a slice.

CSS

sl {
    display: inline-block;
}

Usage

<sl>inline block stuff</sl>

This isn't really a true answer to the question right now, but with enough support, it may someday be.

<seg> short for "segment". As in, segments of a line.

with the polyfill:

<style> seg { display: inline-block; } </style>

It really would be nice if there was an official one, but there is not, so here is the best (IMO) suggested name for such an element that I know of.


YES there is an element that defaults to inline.

The answer is the span element.

<span>

참고URL : https://stackoverflow.com/questions/21614938/html-element-which-defaults-to-displayinline-block

반응형