2012-06-10 34 views
5

Tôi là sinh viên khoa học máy tính (lý thuyết) và việc điều tra ngữ nghĩa của ngôn ngữ lập trình là một trong những môn học của tôi (wikipedia).Ngữ nghĩa chính thức về định vị hộp CSS

Tôi đã chơi rất nhiều với CSS và có sự hiểu biết hợp lý về các quy tắc định vị hộp. (Nếu bạn yêu cầu tôi tạo một trang với bố cục nhất định, tôi thường có thể nghĩ ra cách tiếp cận hộp chính xác và các quy tắc CSS áp dụng.)

Sẽ rất thú vị nếu có một số ngữ nghĩa chính thức cho các quy tắc định vị hộp CSS, nhưng sau khi tìm kiếm trong một thời gian, tôi không thể tìm thấy bất cứ điều gì hữu ích.

Tôi hầu như chỉ kết thúc ở các đặc tả CSS, được định dạng là văn bản dài với thuật toán giả (không phải là vấn đề đọc lớn nhất --- tôi chưa đọc bất kỳ thông số nào trong số này).

Không ai cố chính thức hóa lý thuyết “ ” này thành một số mô hình toán học, nghiêm ngặt hơn so với thông số kỹ thuật cần cung cấp? Tôi không tìm kiếm một cái gì đó hoàn chỉnh hoặc dứt khoát, nhưng nó chắc chắn sẽ gọn gàng (và hữu ích!) Nếu, ít nhất, các hộp cách nên được định vị có thể được mô hình một cách chính thức.

Có ai biết nghiên cứu như vậy không?

+0

có một bài viết hay: http://www.brainjar.com/css/positioning/ – gandil

+0

Tôi không chắc chắn ý của bạn là "chính thức", nhưng bản thân đặc điểm kỹ thuật chính là ** định nghĩa chính thức ** những thứ này. Đó là * đặc điểm kỹ thuật *, sau khi tất cả. Đây là [mục lục] (http://www.w3.org/TR/CSS21/cover.html#toc). Bạn sẽ muốn tập trung vào các phần 8, 9 và 10 bao gồm mô hình định dạng chuyên sâu. – BoltClock

+0

@Bolt chính thức theo nghĩa toán học; các thông số kỹ thuật của W3C không chính thức theo nghĩa này. –

Trả lời

2

Không phải là câu trả lời!Đây là một ví dụ về việc chính thức hoá một trường hợp rất đơn giản (xem bình luận của tôi ở trên).

Say, ví dụ, chúng tôi đang làm việc trong một thế giới có tính năng (1) một màn hình được biết đến rộng enter image description here, (2) một danh sách có thứ tự các enter image description here hộp enter image description here mà không được lồng nhau, không có lề/đệm của/biên giới , được thả nổi trái và trong đó chúng ta biết chiều cao (2.1) và chiều rộng (2.2) của chúng thông qua các hàm toán học wh.

Chúng tôi sẽ xác định các chức năng enter image description hereenter image description here, trong đó nêu rõ tọa độ của góc trên bên trái của mỗi hộp.

Chúng tôi sẽ xác định/sử dụng các mối quan hệ "enter image description here bắt đầu xếp hàng enter image description here" và "enter image description here có chiều cao enter image description here".

Trước hết, enter image description here bắt đầu xếp hàng 0.

Sau đó, nếu enter image description here bắt đầu xếp hàng l, và hơn nữa nếu chắc chắn m in N

enter image description here

...chúng tôi kết luận rằng:

  1. box heights in certain line
  2. box widths in certain line
  3. l có chiều cao lineheight
  4. bm+1 bắt đầu xếp hàng l 1 iff m le N

Những quy định này xác định vị trí của hộp được đưa ra trong một hình thức cách thức. Nó chỉ là một cách để làm như vậy, tất nhiên, và có lẽ không phải là thông minh nhất (chỉ nghĩ nhanh lên), nhưng nó chính xác hóa cách thức hoạt động của phao (modulo typos, tôi đã không kiểm tra nó quá đủ).

Khi giao dịch với các ngôn ngữ lập trình, người ta có thể chọn nhiều trong số các hình thức này, mỗi hình thức được phát minh cho các mục đích cụ thể (xem wikipedia).

Tôi chỉ quan tâm nếu có ai từng cố gắng đưa ra một số hình thức hóa để định vị hộp CSS. Tất nhiên các thông số kỹ thuật đi một chặng đường dài, nhưng chúng không hoàn toàn nghiêm ngặt như cách toán học buộc bạn phải như vậy.

Các vấn đề liên quan