기본적으로 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
그리고 여기 button
에 textarea
, 등이 있다고 주장합니다 . http://www.w3.org/TR/CSS2/sample.html
# 2 수정
위의 소스는 img
태그가 http://jsfiddle.net/AQ2yp/ 인inline-block
것처럼 보입니다 (Alohci 덕분에)라고 주장하지만inline
다음은 Firefox에서 테스트되었습니다.
button
is inline-block
: http://jsfiddle.net/GLS4P/
textarea
is inline
: http://jsfiddle.net/235vc/
input
is inline
: http://jsfiddle.net/RFKe8/
select
is 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에서는 button
및 select
.
HTML5 CR 의 렌더링 섹션에서 meter
및 progress
요소는 "예상 렌더링"으로 인라인 블록이있는 것으로 추가로 설명되며 이러한 요소를 구현 한 브라우저는 그런 방식으로 작동하는 것으로 보입니다. keygen
요소는 인라인 블록 인 것으로 설명하지만, 파이어 폭스 즉, (가 구현하지 않는 keygen
것처럼 내부적으로 select
는 DOM에서); IE는 전혀 지원하지 않습니다 keygen
. Chrome은 제안 된대로이를 구현합니다.
이러한 모든 요소는 다소 특화된 의미, 기능 및 렌더링 특이성을 가지고 있기 때문에 기본적으로 인라인 블록이며 다양한 의미를 가질 수있는 요소로 일반적인 사용에 적합하지 않습니다. 이러한 요소에 사용할 수 있는 것은 기본 렌더링으로 인라인 또는 블록을 선호하는지에 따라 일반적으로 span
또는 div
입니다.
기본적 으로 모든 HTML 요소와 display
속성으로 내 코드 펜 을 확인할 수 있습니다 . 일부 태그는 구문이 깨졌지만 우리의 목적에는 중요하지 않습니다.
현재, 거기에 5 개 와 요소 display: inline-block
의 FF는 :
<button>
<select>
<meter>
<progress>
<marquee>
Chrome에서 추가 2 개 (위의 5 개 포함) :
textarea
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
'programing tip' 카테고리의 다른 글
.Net Core 및 NuGet (0) | 2020.12.02 |
---|---|
Visual Studio를 사용하는 GCC? (0) | 2020.12.02 |
int-to-Object 비교가 Java 7에서는 유효하지만 Java 8에서는 유효하지 않은 이유는 무엇입니까? (0) | 2020.12.02 |
Android SDK Manager의 Google 웹 드라이버는 무엇입니까? (0) | 2020.12.02 |
패키지 종속성을 자동으로 설치하도록 CRAN에 지시하는 방법은 무엇입니까? (0) | 2020.12.02 |