2.4 Mô hình cái hộp
Mô hình cái hộp (box model) là một trong những khái niệm nền tảng trong CSS. Theo mô hình này, CSS xem mỗi phần tử trong tài liệu HTML là một cái hộp, với các thuộc tính: width, height, padding, borders, và margins. Ở các phần trước, đã từng làm quen với cái hộp này, khi thêm nền cho một phần tử, phần này sẽ tìm hiểu chi tiết các thuộc tính liên quan.
2.4.1 Hộp của phần tử
Một phần tử, dù là kiểu block hay inline đều có cái hộp của riêng nó, hình chữ nhật, gồm nhiều thành phần. Xem hình minh họa,
Giải thích các thành phần của hộp,
Lưu ý: khi làm việc hoặc khi đã hiểu rồi thì nên sử dụng từ tiếng Anh cho ngắn gọn, dễ trao đổi với mọi người. Tuy nhiên, ở đây, để dễ hiểu, sẽ dùng từ tiếng Việt cho các thuộc tính, các khái niệm.
– Vùng nội dung (content area): là vùng trong cùng của hộp, chứa nội dung của phần tử. Vùng màu trắng chứa văn bản ở hình trên
– Cạnh trong (inner edge): là cạnh của Vùng nội dung, nó là đường phân cách giữa Vùng nội dung và Vùng đệm trong (padding area). Đường này không được hiển thị trên trang web
– Vùng đệm trong (padding area): là khoảng không nằm giữa Vùng nội dung và Đường viền. Vùng đệm trong là tùy chọn (có thể có hoặc không). Ở hình trên, Vùng đệm trong có màu cam vàng
– Đường viền (border): là đường bao quanh phần “nhìn thấy trên giao diện” của phần tử và Vùng đệm trong (nếu có thiết lập). Đường viền là tùy chọn. Đường màu đen ở hình trên
– Vùng đệm ngoài (margin area): là khoảng không thêm vào phía ngoài của Đường viền. Ở hình trên, Vùng đệm ngoài có màu xanh lợt. Tuy nhiên, thực tế, Vùng đệm ngoài luôn trong suốt, do vậy phần nhìn thấy sẽ là màu nền của phần tử cha
– Cạnh ngoài (outer edge): là cạnh của Vùng đệm ngoài, đây chính là cạnh giới hạn toàn bộ không gian của một phần tử trên trang web. Ở hình trên, Cạnh ngoài là đường nét đứt, thực tế, đường này không được hiển thị trên trang web. Như vậy, kích thước một phần tử sẽ bao gồm kích thước của Vùng nội dung, Vùng đệm trong, Đường viền, và Vùng đệm ngoài.
2.4.2 Xác định kích thước hộp
Mặc định, kích thước (chiều rộng và chiều cao) của phần tử kiểu block được trình duyệt tự động xác lập (auto). Nó sẽ bằng chiều rộng của cửa sổ trình duyệt, hoặc của phần tử chứa nó; chiều cao sẽ vừa đủ để chứa hết nội dung. Tuy nhiên, có thể sử dụng hai thuộc tính width và height để thiết lập chiều rộng và chiều cao tùy ý.
Như ở các phần trước đã tìm hiểu, hộp của phần tử gồm nhiều thành phần, do vậy việc xác định kích thước cho phần tử không đơn giản là thiết lập giá trị cho hai thuộc tính width và height, mà cần xác định xem giá trị vừa được thiết lập đã bao gồm các thành phần nào.
CSS3 cung cấp hai cách để xác định kích thước của một phần tử. Một là, giá trị width và height sẽ chỉ được tính cho Vùng nội dung (content), như vậy, kích thước của hộp sẽ phải cộng thêm giá trị của Vùng đệm trong (padding) và Đường viền (border). Đây là cách tính mặc định, CSS gọi cách này là content-box. Cách thứ hai là, giá trị width và height sẽ bao gồm kích thước của Vùng nội dung, Vùng đệm trong và Đường viền, CSS gọi cách này là border-box.
Lưu ý, cả hai cách xác định kích thước trên đều chỉ áp dụng cho các phần tử kiểu block và phần tử kiểu inline không chứa văn bản (non-text inline) (ví dụ phần tử ảnh). Nếu vẫn thiết lập kích thước cho phần tử kiểu inline, thì trình duyệt sẽ bỏ qua việc thiết lập này.
Để lựa chọn cách thiết lập kích thước cho phần tử, sử dụng thuộc tính box-sizing. Dưới đây là các đặc tính của box-sizing:
– Giá trị: content-box | border-box
– Mặc định: content-box
– Áp dụng: cho mọi phần tử
– Kế thừa: không
Dưới đây là các đặc tính của thuộc tính width:
– Giá trị: giá trị đo kích thước | % | auto | inherit
– Mặc định: auto
– Áp dụng: các phần tử kiểu block và kiểu inline không chứa văn bản
– Kế thừa: không
Dưới đây là các đặc tính của thuộc tính height:
– Giá trị: giá trị đo kích thước | % | auto | inherit
– Mặc định: auto
– Áp dụng: các phần tử kiểu block và kiểu inline không chứa văn bản
– Kế thừa: không
Thiết lập kích thước kiểu content-box
Mặc định, khi không có khai báo thuộc tính box-sizing, thì giá trị width và height sẽ được tính cho Vùng nội dung, hay nói cách khác là kiểu tính kích thước content-box. Tuy nhiên, lập trình viên cũng có thể thiết lập một cách tường minh bằng đoạn mã box-sizing: content-box.
Ví dụ, đoạn mã sau sẽ thiết lập kích thước cho phần tử p gồm các giá trị: rộng 500px, cao 150px, vùng đệm trong (cả bốn phía) 20px, đường viền (cả bốn cạnh) 2px, vùng đệm ngoài (cả bốn phía) 20px. Giả sử kiểu kích thước là content-box, nên chiều rộng và chiều cao sẽ là của vùng nội dung.
p {
background: #c2f670;
width: 500px;
height: 150px;
padding: 20px;
border: 2px solid gray;
margin: 20px;
}
Kết quả: chiều rộng của phần tử (không tính vùng đệm ngoài) sẽ là 544px (500px vùng nội dung, cộng thêm 40px vùng đệm trong, cộng thêm 4px đường viền) – đây là vùng của phần tử mà người dùng nhìn thấy; chiều rộng của toàn bộ phần tử (tính cả vùng đệm ngoài 40px – vùng này người dùng không nhìn thấy) sẽ là 584px. Biết được kích thước này sẽ giúp việc bố trí giao diện phù hợp, chính xác.
Xem hình minh họa, kích thước kiểu content-box,
Thiết lập kích thước kiểu border-box
Đây không phải là chế độ tính kích thước mặc định, nên cần khai báo tường minh, box-sizing: border-box.
Giá trị width và height sẽ bao gồm kích thước của vùng nội dung, vùng đệm trong và đường viền.
Ví dụ, quan sát kết quả khi thực hiện thiết lập width cho phần tử p là 500px, và height là 150px,
p {
box-sizing: border-box;
width: 500px;
height: 150px;
}
Xem hình minh họa, kích thước kiểu border-box,
Các lập trình viên thường hay sử dụng kiểu tính kích thước border-box, lý do là nó trực quan và đơn giản. Ví dụ, khi xác định kích thước của phần tử, không phải bận tâm tới việc tính thêm kích thước của vùng đệm trong và đường viền. Đặc biệt, kiểu kích thước border-box và đơn vị đo là % chính là nền tảng của kĩ thuật thiết kế tùy biến theo kích thước giao diện (responsive design), ví dụ, nếu muốn tạo thành hai cột bằng nhau, đơn giản chỉ việc thiết lập thuộc tính width là 50% cho mỗi cột.
Để đơn giản, các lập trình viên thường thiết lập cho mọi phần tử của tài liệu HTML đều được tính kích thước theo kiểu border-box bằng khai báo sau,
* { box-sizing: border-box; }
Kích thước tối thiểu, tối đa
Để thiết lập kích thước tối đa hoặc tối thiểu cho một phần tử, sử dụng các thuộc tính sau: max-height, max-width, min-height, min-width.
Giá trị: % | chiều dài | none | inherit
Lưu ý: các thuộc tính này chỉ áp dụng trên các phần tử kiểu block và kiểu inline không chứa văn bản. Nếu kiểu kích thước của phần tử đang được thiết lập là content-box thì các thuộc tính max-height, max-width, min-height, min-width sẽ áp dụng cho vùng nội dung, và khi đó, nếu vùng đệm trong, viền hoặc vùng đệm ngoài cũng được thiết lập thì sẽ làm cho kích thước toàn bộ phần tử lớn hơn giá trị max-height và max-width đã được thiết lập. Không nên sử dụng các thuộc tính max-height, max-width, min-height, min-width trong chế độ border-box vì chúng có thể gây ra các trục trặc liên quan đến trình duyệt.
Xác định chiều cao
Thông thường, chiều cao của phần tử ít được thiết lập, mà nó hay để ở chế độ mặc định. Nghĩa là, chiều cao của phần tử sẽ tùy thuộc vào lượng nội dung, kích thước của phông chữ, các thiết lập của người dùng và các yếu tố khác. Với phần tử chứa văn bản, nếu có thiết lập chiều cao, thì cần để ý trường hợp nội dung vượt quá sức chứa của phần tử.
Trường hợp nội dung văn bản vượt quá sức chứa của phần tử (do thiết lập chiều cao), CSS có một số tùy chọn để hiển thị phần nội dung bị tràn.
Xử lý khi bị tràn nội dung
Khi bị tràn nội dung, có thể sử dụng thuộc tính overflow để chọn cách xử lý.
Dưới đây là các đặc tính của overflow:
– Giá trị: visible | hidden | scroll | auto | inherit
– Mặc định: visible
– Áp dụng: các phần tử kiểu block và kiểu inline không chứa văn bản
– Kế thừa: không
Hình dưới đây là minh họa cho các giá trị của overflow, phần tử chứa văn bản là một hình vuông có kích thước 150px (phần có nền được tô màu).
– visible: chế độ mặc định, nội dung bị tràn vẫn được hiển thị, nhưng nằm ngoài vùng giới hạn của phần tử
– hidden: nội dung bị tràn sẽ bị ẩn đi
– scroll: phần tử có thêm thanh cuộn, giúp đọc được các nội dung bị tràn. Tuy nhiên, thanh cuộn này luôn tồn tại, dù nội dung không bị tràn.
– auto: trình duyệt tự xử lý khi có nội dung bị tràn, thường là sẽ có thanh cuộn. Tuy nhiên, khi nội dung không bị tràn thì thanh cuộn này sẽ tự động mất đi.
2.4.3 Vùng đệm trong
Như đã biết, vùng đệm trong là khoảng không nằm giữa vùng nội dung (content area) và đường viền (border). Nếu đường viền không được thiết lập thì vùng đệm này cũng có thể xem như một “đường viền” cho vùng nội dung.
Với mỗi phần tử, khi thiết lập màu nền và đường viền thì cũng nên thiết lập luôn vùng đệm trong, điều này giúp cho vùng nội dung được gọn gàng, cân đối, tránh tình trạng văn bản nằm quá sát với đường viền.
Có thể thêm vùng đệm trong cho cả hai loại phần tử block và inline.
Có thể thêm vùng đệm trong cho từng cạnh, hoặc cả bốn cạnh một lần.
Để thêm vùng đệm trong cho từng cạnh, sử dụng các thuộc tính sau,
padding-top, padding-right, padding-bottom, padding-left:
– Giá trị: đơn vị đo chiều dài | % | inherit
– Mặc định: 0
– Áp dụng: mọi phần tử, ngoại trừ table-row, table-row group, table-header-group, table-footer-group, table-column, và table-column-group
– Kế thừa: không
Ví dụ,
p {
padding-top: 1em;
padding-right: 3em;
padding-bottom: 1em;
padding-left: 3em;
background-color: #D098D4;
}
Xem hình minh họa,
Đơn vị để thiết lập padding có thể là em, px hoặc % (phần trăm chiều rộng của phần tử cha).
Lưu ý, khi thiết lập padding là %, nếu chiều rộng của phần tử cha thay đổi, sẽ dẫn tới padding bị thay đổi theo, điều này làm cho việc kiểm soát bố cục phức tạp.
Thuộc tính padding
Ngoài cách thiết lập padding cho từng cạnh, có thể sử dụng thuộc tính padding để thiết lập một lần cho bốn cạnh.
Dưới đây là các đặc tính của padding,
– Giá trị: đơn vị đo chiều dài | % | inherit
– Mặc định: 0
– Áp dụng: mọi phần tử
– Kế thừa: không
Thuộc tính padding có thể chấp nhận bốn, ba, hai, hoặc một giá trị.
Khi padding có bốn giá trị, các giá trị này sẽ được áp dụng lần lượt cho các cạnh tương ứng, theo chiều kim đồng hồ, bắt đầu là cạnh trên (top), sau đó đến cạnh phải (right), cạnh dưới (bottom), cuối cùng là cạnh trái (left). Để dễ nhớ, tiếng Anh có từ TRouBLe, mỗi chữ viết hoa sẽ ứng với một cạnh.
Cú pháp,
padding: top right bottom left;
Ví dụ,
p {
padding: 1em 3em 1em 3em;
background-color: #D098D4;
}
Nếu giá trị padding của cạnh trái và phải bằng nhau, thì có thể rút gọn thuộc tính padding còn lại ba giá trị. Khi đó, giá trị của cạnh phải (giá trị thứ hai trong chuỗi giá trị) cũng được sử dụng làm giá trị cho cạnh trái. Thực tế là, khi biên dịch mã CSS, trình duyệt thấy thiếu giá trị của cạnh trái nên nó mặc định lấy giá trị của cạnh phải để thay vào.
Cú pháp,
padding: top right/left bottom;
Ví dụ, luật CSS ở phía trên có thể viết gọn lại như sau,
p {
padding: 1em 3em 1em;
background-color: #D098D4;
}
Tiếp tục, nếu chỉ cung cấp hai giá trị cho thuộc tính padding, thì giá trị đầu tiên sẽ là của cạnh trên và dưới, giá trị thứ hai sẽ là của cạnh trái và phải.
Cú pháp,
padding: top/bottom right/left;
Ví dụ, luật CSS ở phía trên có thể viết gọn lại như sau,
p {
padding: 1em 3em;
background-color: #D098D4;
}
Cuối cùng, nếu chỉ cung cấp một giá trị cho thuộc tính padding, thì giá trị này sẽ là của cả bốn cạnh.
Ví dụ, luật CSS sau sẽ thiết lập padding cho cả bốn cạnh là 15px,
p {
padding: 15px;
background-color: #D098D4;
}
Lab2.4.a (exercise 14-1, exercise 14-1, p.315 [3])
.jpg)
.jpg)
){kind=link}
0 Nhận xét