2014-02-15 3 views
4

그래서 W3 사이트의 CSS 사양을 읽었으며 "비 위치 지정"이라는 단어를 사용하여 어려움을 겪고 있습니다. http://www.w3.org/TR/CSS2/visuren.html#float-rules 아래의 사용법을 참조하십시오. CSS 위치가 지정되지 않은 상자

플로트가 흐름 아니므

, 아닌 위치 블록 상자 전에 생성 플로트가 존재하지 않는 것처럼 플로트 박스 후 수직 흐름. 그러나 float의 옆에 생성 된 현재 및 이후의 라인 상자는 float의 여백 상자 의 공간을 만들기 위해 필요에 따라 짧아집니다.

http://jsfiddle.net/Kobo/7ASjk/

<div class="case two"> 
    <div class="F">Block F</div> 
    <div class="B">Block B</div> 
    <div class="C">Block C</div> 
</div> 

내 질문/있습니다됩니다 바이올린에 내 샘플 봐, CSS의 맥락에서 비 위치 상자가 무엇인지

  • 를 확인하시기 바랍니다? 그 상자가 정상 흐름인가요? 또는 스타일 속성 위치가 인 상자가 명시 적으로 설정되어 있습니까?
  • 첫 번째 단락은 무엇을 의미합니까? 내 말은 그 사양을 말하는거야. float 된 박스는 OUT 때

    "플로트 옆에 만들어 현재 후속 라인 박스가 떠 박스의 마진 상자를위한 공간을 만들기 위해 단축된다" -OF-FLOW?

미리 답변 해 주셔서 감사합니다.

+0

위치 속성을 명시 적으로 설정하지 않고 상자를 사용하는 것부터 확실히 들립니다. – Shomz

+0

나는 그 가정을 직접 만들었지 만 가정을 테스트했을 때, 그것은 성명의 두 번째 부분에서 실패했습니다. – Kobojunkie

+0

위의 예에서 상자가 정상 흐름이라는 것은 플로팅 상자 아래에 항상 표시된다는 것을 의미합니까? 이 예에서 float-box는 정상 흐름 상자 위에 나타납니다. – Kobojunkie

답변

1

CSS 컨텍스트의 배치되지 않은 상자 란 무엇입니까?

정상적인 흐름의 상자입니다. 다음 플로트로 만들어

현재 및 후속 라인 상자는

라인 상자의 텍스트 라인 주위에 생성 된 블록에있는 부유 박스의 마진 상자를위한 공간을 만들기 위해 단축된다. 바이올린에서 볼 수 있듯이 블록 B 텍스트는 부모 요소와 관련하여 오른쪽으로 이동합니다. 이것은 부유 된 블록 F가 진행되는 중입니다. 즉, 블록 B 라인 박스를 축소하고 F의 여백 상자와 동일한 양만큼 오른쪽으로 이동합니다.

<div class="B"><span>Block B</span></div> 
span { 
    outline: 2px solid cyan; 
} 

은 (바이올린 참조 : http://jsfiddle.net/2VSPy/1/)

라인 박스 개요의 도움으로 볼 수있는 봐

어떻게 대신 사각형을 형성하는 텍스트이 윤곽 스틱 ()

관련 문제