2012-06-10 5 views
5

나는 (이론적 인) 컴퓨터 과학 학생이며 프로그래밍 언어의 의미를 조사하는 것이 나의 연구 (wikipedia)의 주제 중 하나입니다.CSS 상자 위치 지정의 형식적인 의미

나는 CSS로 많은 작업을 해왔고 상자 위치 지정 규칙에 대해 충분히 이해했습니다. (특정 레이아웃의 페이지를 만들라고 말하면 정확한 박스 접근법과 적용 가능한 CSS 규칙을 자주 생각할 수 있습니다.)

CSS 상자 위치 지정 규칙에 대한 일종의 형식적 의미를 갖는 것은 멋지지만, 하지만 잠시 동안 그물을 검색 한 후에는 아무 것도 찾을 수 없었습니다.

나는 주로 의사 알고리즘으로 긴 텍스트로 포맷 된 CSS 사양으로 끝납니다 (가장 큰 독서 문제는 아니며, 아직 많은 노력을 기울이지 않은 이들 사양을 읽지 않았습니다).

아무도이 “ 이론 ”을 몇 가지 수학적 모델로 공식화하려고 시도한 적이 없으며, 사양보다 더 엄격합니다. 완전 무결 한 것을 찾는 것이 아니라 상자를 배치해야하는 방식을 공식적인 방식으로 모델링 할 수 있다면 정말 유용 할 것입니다.

누구든지 이러한 연구를 알고 있습니까?

+0

좋은 기사가 있습니다. http://www.brainjar.com/css/positioning/ – gandil

+0

"공식적인"의미는 모르겠지만 사양 자체는 ** 공식적인 정의입니다. 이런 일. 그것은 결국 사양 *입니다. [목차] (http://www.w3.org/TR/CSS21/cover.html#toc)가 있습니다. 서식 설정 모델을 상세하게 다루는 8, 9 및 10 섹션에 중점을두고 싶을 것입니다. – BoltClock

+0

수학적으로 볼 때 @Bolt는 형식적입니다. W3C 스펙은 이러한 의미에서 공식적이지 않습니다. –

답변

2

답변 없음!이것은 매우 단순화 된 사례의 공식화 예입니다 (위의 내 설명 참조).

말, 예를 들어, 우리는 중첩되지 않은 enter image description here 상자 enter image description here (1) 알려진 화면이 enter image description here 폭, (2) 정렬 된 목록을 갖춘 세계에서 작업하는 여백/패딩의/국경이 (2.1) 높이와 (2.2) 너비는 수학 함수 wh을 통해 알 수 있습니다.

각 상자의 왼쪽 위 모서리 좌표를 나타내는 enter image description hereenter image description here 함수를 정의 할 것입니다.

"enter image description here 시작 줄 enter image description here"과 "enter image description here 높이가 enter image description here"인 관계를 정의/사용합니다. 모든

우선, enter image description here 착공 enter image description here 개시가 l 라인이면

0. 라인, 또한 경우에 대한

m in N 특정 enter image description here

...

  1. box heights in certain line
  2. box widths in certain line
  3. l 높이 lineheight
  4. bm+1 시작은이 규칙은 형식에 주어진 상자의 위치를 ​​정의 m le N

IFF에 l 한 라인이있다 : 우리는 결론 방법. 그것은 물론 그렇게하는 유일한 방법 일뿐입니다. 아마도 똑똑하지 않을 것입니다. (빨리 생각해보십시오.)하지만 수레가 작동하는 방식을 올바르게 형식화합니다 (모듈러스 오타, 충분히 점검하지 않았습니다).

프로그래밍 언어를 다룰 때, 각각이 특별한 목적을 위해 발명 된 많은 형식주의 중 하나를 선택할 수 있습니다 (wikipedia 참조).

누구나 CSS 상자 위치 지정에 대한 공식화를 시도해 본 적이 있다면 나는 관심이 있습니다. 물론 스펙은 먼 길을 간다.하지만 수학적 방법만큼 힘들지는 않다.