033.4 Bài 1
Chứng chỉ: |
Web Development Essentials |
---|---|
Phiên bản: |
1.0 |
Chủ đề: |
033 Tạo kiểu Nội dung CSS |
Mục tiêu: |
033.4 Bố cục và Mô hình Hộp trong CSS |
Bài: |
1 trên 1 |
Giới thiệu
Mỗi phần tử hiện hữu trong tài liệu HTML đều được hiển thị dưới dạng một chiếc hộp hình chữ nhật. Do đó, thuật ngữ mô hình hộp mô tả cách tiếp cận mà CSS sử dụng để sửa đổi các đặc tính trực quan của các phần tử. Giống như các hộp có kích thước khác nhau, các phần tử HTML cũng có thể được lồng bên trong các phần tử chứa — thường là phần tử div
— để chúng có thể được phân chia thành từng phần riêng biệt.
Chúng ta có thể sử dụng CSS để sửa đổi vị trí của các hộp, từ những điều chỉnh nhỏ đến những thay đổi lớn trong cách bố trí các phần tử trên trang. Bên cạnh luồng thông thường, vị trí của mỗi hộp có thể được dựa trên các thành phần xung quanh nó, có thể là mối quan hệ của hộp với vùng chứa mẹ hoặc của hộp với khung nhìn - khu vực hiển thị cho người dùng của trang. Không có một cơ chế đơn lẻ nào có thể đáp ứng tất cả các yêu cầu về bố cục; do đó, ta có thể sẽ cần phải kết hợp chúng.
Luồng thông thường
Cách mặc định mà trình duyệt hiển thị cây tài liệu được gọi là luồng thông thường. Các hình chữ nhật tương ứng với các phần tử sẽ ít nhiều được đặt theo cùng một thứ tự như trong cây tài liệu và tương quan với các phần tử mẹ. Tuy nhiên, tùy thuộc vào loại phần tử, hộp tương ứng có thể sẽ tuân theo các quy tắc định vị riêng biệt.
Một cách hay để hiểu được logic của luồng thông thường là làm cho các hộp có thể nhìn thấy được. Chúng ta có thể bắt đầu với một trang rất cơ bản chỉ có ba phần tử div
riêng biệt, mỗi phần tử có một đoạn văn bản ngẫu nhiên:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Box Model and Layout</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="first">
<h2>First div</h2>
<p><span>Sed</span> <span>eget</span> <span>velit</span>
<span>id</span> <span>ante</span> <span>tempus</span>
<span>porta</span> <span>pulvinar</span> <span>et</span>
<span>ex.</span></p>
</div><!-- #first -->
<div id="second">
<h2>Second div</h2>
<p><span>Fusce</span> <span>vitae</span> <span>vehicula</span>
<span>neque.</span> <span>Etiam</span> <span>maximus</span>
<span>vulputate</span> <span>neque</span> <span>eu</span>
<span>lobortis.</span> <span>Phasellus</span> <span>condimentum,</span>
<span>felis</span> <span>eget</span> <span>eleifend</span>
<span>aliquam,</span> <span>dui</span> <span>dolor</span>
<span>bibendum</span> <span>leo.</span></p>
</div><!-- #second -->
<div id="third">
<h2>Third div</h2>
<p><span>Pellentesque</span> <span>ornare</span> <span>ultricies</span>
<span>elementum.</span> <span>Morbi</span> <span>vulputate</span>
<span>pretium</span> <span>arcu,</span> <span>sed</span>
<span>faucibus.</span></p>
</div><!-- #third -->
</body>
</html>
Mỗi từ đều nằm trong phần tử span
để chúng ta có thể tạo kiểu cho các từ và xem cách chúng cũng được xử lý dưới dạng hộp. Để hiển thị các hộp, chúng ta phải chỉnh sửa tệp biểu định kiểu style.css
được tham chiếu bởi tài liệu HTML. Các quy tắc sau đây sẽ làm được điều này:
* {
font-family: sans;
font-size: 14pt;
}
div {
border: 2px solid #00000044;
}
#first {
background-color: #c4a000ff;
}
#second {
background-color: #4e9a06ff;
}
#third {
background-color: #5c3566da;
}
h2 {
background-color: #ffffff66;
}
p {
background-color: #ffffff66;
}
span {
background-color: #ffffffaa;
}
Kết quả sẽ được hiển thị trong Figure 1.
Figure 1 cho ta thấy rằng mỗi thẻ HTML sẽ có một hộp tương ứng trong bố cục. Các phần tử div
, h2
và p
sẽ mở theo chiều rộng của phần tử mẹ của chúng. Chẳng hạn như phần tử mẹ của các phần tử div
là phần tử body
; vì vậy, chúng sẽ mở rộng theo chiều rộng của phần thân, trong khi phần tử mẹ của mỗi phần tử h2
và p
là phần tử div
tương ứng của nó. Các hộp mở rộng theo chiều rộng của phần tử mẹ được gọi là các phần tử khối. Một số thẻ HTML phổ biến nhất được hiển thị dưới dạng khối là h1
, h2
, h3
, p
, ul
, ol
, table
, li
, div
, section
, form
và aside
. Các phần tử khối cùng cấp — các phần tử khối chia sẻ trực tiếp cùng một phần tử mẹ — sẽ được xếp chồng lên nhau bên trong phần tử mẹ của chúng theo chiều từ trên xuống dưới.
Note
|
Một số phần tử khối không được nhắm đến việc trở thành vùng chứa cho các phần tử khối khác. Ví dụ: có thể chèn một phần tử khối bên trong phần tử |
Bên cạnh văn bản, các phần tử như h1
, p
và li
chỉ cho phép các phần tử nội tuyến làm phần tử con của nó. Giống như hầu hết các tệp lệnh phương Tây, các thành phần nội tuyến sẽ tuân theo luồng văn bản từ trái sang phải. Khi không còn chỗ trống ở phía bên phải, luồng của các thành phần nội tuyến sẽ tiếp tục ở dòng tiếp theo giống như văn bản. Một số thẻ HTML phổ biến được coi là hộp nội tuyến là span
, a
, em
, strong
, img
, input
và label
.
Trong trang HTML mẫu của chúng ta, mỗi từ bên trong đoạn văn bản đều được bao quanh bởi thẻ span
; vì vậy, chúng có thể được đánh dấu bằng quy tắc CSS tương ứng. Như được thể hiện trong hình ảnh, mỗi phần tử span
đều được đặt theo chiều ngang, từ trái sang phải cho đến khi không còn chỗ trong phần tử mẹ.
Chiều cao của phần tử phụ thuộc vào nội dung của nó; vì vậy, trình duyệt sẽ điều chỉnh chiều cao của phần tử chứa để phù hợp với các phần tử khối lồng nhau hoặc các dòng của phần tử nội tuyến. Tuy nhiên, một số đặc tính CSS sẽ ảnh hưởng đến hình dạng, vị trí của hộp và vị trí của các thành phần bên trong hộp.
Các đặc tính margin
(lề) và padding
(đệm) đều ảnh hưởng đến tất cả các loại hộp. Nếu không thiết lập các đặc tính này một cách rõ ràng, trình duyệt sẽ tự thiết lập một số giá trị tiêu chuẩn. Như đã thấy trong Figure 1, các phần tử h2
và p
được hiển thị có khoảng cách giữa chúng. Những khoảng cách này là lề trên và lề dưới mà trình duyệt mặc định thêm vào các phần tử này. Chúng ta có thể xóa chúng bằng cách sửa đổi các quy tắc CSS cho bộ chọn h2
và p
:
h2 {
background-color: #ffffff66;
margin: 0;
}
p {
background-color: #ffffff66;
margin: 0;
}
Kết quả sẽ được hiển thị trong Figure 2.
margin
có thể thay đổi hoặc loại bỏ lề khỏi các phần tử.Theo mặc định, phần tử body
cũng có một lề nhỏ tạo ra một khoảng trống xung quanh. Khoảng cách này cũng có thể được loại bỏ bằng cách sử dụng đặc tính margin
.
Trong khi đặc tính margin
xác định khoảng cách giữa phần tử và môi trường xung quanh thì đặc tính padding
của phần tử sẽ xác định khoảng cách bên trong giữa ranh giới của vùng chứa và các phần tử con của nó. Ví dụ: hãy xem xét các phần tử h2
và p
bên trong mỗi div
trong đoạn mã mẫu. Chúng ta có thể sử dụng đặc tính lề của chúng để tạo khoảng cách với đường viền của div
tương ứng, nhưng việc thay đổi đặc tính padding
của vùng chứa sẽ đơn giản hơn:
#second {
background-color: #4e9a06ff;
padding: 1em;
}
Chỉ có quy tắc cho div
thứ hai được sửa đổi. Do đó, kết quả (Figure 3) cho thấy sự khác biệt giữa div
thứ hai và các vùng chứa div
khác.
div
khác nhau có thể có các phần đệm khác nhau.Đặc tính margin
là cách viết tắt của bốn đặc tính kiểm soát bốn cạnh của hộp: margin-top
(lề trên), margin-right
(lề phải), margin-bottom
(lề dưới) và margin-left
(lề trái). Khi margin
được chỉ định một giá trị như trong các ví dụ, cả bốn lề của hộp đều sẽ sử dụng giá trị đó. Khi có hai giá trị được chỉ định, giá trị đầu tiên sẽ xác định lề trên và dưới, trong khi giá trị thứ hai sẽ xác định lề phải và trái. Ví dụ: ta sử dụng margin: 1em 2em
để xác định khoảng cách 1 em cho lề trên và lề dưới và khoảng cách 2 em cho lề phải và trái. Việc đặt bốn giá trị sẽ đặt lề cho bốn cạnh theo chiều kim đồng hồ, bắt đầu từ cạnh trên cùng. Các giá trị khác nhau trong đặc tính tốc ký không bắt buộc phải sử dụng cùng một đơn vị.
Đặc tính padding
cũng là một cách viết tắt và tuân theo các nguyên tắc giống như đặc tính margin
.
Trong hành vi mặc định của chúng, các phần tử khối sẽ kéo dài để vừa với chiều rộng có sẵn. Nhưng điều này không phải là bắt buộc. Đặc tính width
có thể đặt kích thước ngang cố định cho hộp:
#first {
background-color: #c4a000ff;
width: 6em;
}
Việc thêm width: 6em
vào quy tắc CSS sẽ thu nhỏ div
đầu tiên theo chiều ngang và để lại một khoảng trống ở phía bên phải của nó (Figure 4).
width
sẽ thay đổi độ rộng theo chiều ngang của div
đầu tiên.Thay vì để div
đầu tiên được căn sang bên trái, chúng ta có thể căn nó vào giữa. Căn giữa cho hộp cũng tương đương với việc đặt lề có cùng kích thước ở cả hai bên. Vì vậy, chúng ta cũng có thể sử dụng đặc tính lề để căn giữa hộp. Kích thước của không gian có sẵn có thể sẽ khác nhau; vì vậy, chúng ta sẽ sử dụng giá trị auto
cho lề trái và phải:
#first {
background-color: #c4a000ff;
width: 6em;
margin: 0 auto;
}
Lề trái và phải sẽ được trình duyệt tự động tính toán và hộp sẽ được căn giữa (Figure 5).
margin
được sử dụng để căn giữa div
đầu tiên.Như được hiển thị, việc làm cho một phần tử khối hẹp hơn sẽ không cho phần tử tiếp theo khoảng trống còn lại. Luồng tự nhiên vẫn được giữ nguyên như thể phần tử hẹp hơn vẫn chiếm hết chiều rộng có sẵn.
Tùy chỉnh Luồng thông thường
Luồng thông thường có tính chất đơn giản và tuần tự. CSS cũng cho phép bạn phá vỡ luồng thông thường và định vị các phần tử theo những cách riêng, thậm chí có thể ghi đè lên thao tác cuộn trang nếu muốn. Chúng ta sẽ xem xét một số cách để kiểm soát vị trí của các phần tử trong phần này.
Phần tử Nổi
Ta có thể làm cho các phần tử khối cùng cấp chia sẻ cùng một không gian theo chiều ngang. Một cách để làm việc này là thông qua đặc tính float
(nổi) và loại bỏ phần tử khỏi luồng thông thường. Như tên gọi của nó, đặc tính float
sẽ làm cho hộp nổi lên trên các phần tử khối theo sau. Vì vậy, chúng sẽ được hiển thị như thể chúng đang nằm dưới hộp nổi. Để làm cho div
đầu tiên nổi sang bên phải, hãy thêm float: right
vào quy tắc CSS tương ứng:
#first {
background-color: #c4a000ff;
width: 6em;
float: right;
}
Các lề tự động sẽ bị bỏ qua trong hộp nổi; do đó, thuộc tính margin
có thể sẽ bị xóa. Figure 6 hiển thị kết quả của việc di chuyển div
đầu tiên sang bên phải.
div
đầu tiên đang nổi và không phải là một phần của luồng thông thường.Theo mặc định, tất cả các phần tử khối xuất hiện sau phần tử nổi sẽ nằm bên dưới nó. Do đó, nếu có đủ chiều cao, hộp nổi sẽ bao phủ tất cả các phần tử khối còn lại.
Mặc dù một phần tử nổi sẽ nằm trên các phần tử khối khác, nội dung nội tuyến bên trong vùng chứa của phần tử nổi vẫn sẽ bao quanh phần tử nổi. Nguồn cảm hứng cho điều này đến từ bố cục trong tạp chí và báo (ví dụ như việc sử dụng càng phần văn bản để bao quanh một hình ảnh).
Hình ảnh trước đã cho thấy cách div
đầu tiên bao phủ div
thứ hai và một phần của div
thứ ba. Giả sử chúng ta muốn div
đầu tiên nổi trên div
thứ hai chứ không phải div thứ ba. Giải pháp ở đây sẽ là sử dụng đặc tính clear
trong quy tắc CSS tương ứng cho div
thứ ba:
#third {
background-color: #5c3566da;
clear: right;
}
Đặt đặc tính clear
thành right
sẽ làm cho phần tử tương ứng bỏ qua bất kỳ phần tử nào trước đó được đặt nổi sang bên phải và tiếp tục luồng thông thường (Figure 7).
clear
trở lại luồng thông thường.Tương tự như vậy, nếu một phần tử trước đó nổi sang trái, chúng ta sẽ sử dụng clear: left
để tiếp tục luồng bình thường. Khi bạn muốn bỏ qua các phần tử nổi ở cả bên trái và bên phải, hãy sử dụng clear: both
.
Định vị Hộp
Trong luồng thông thường, mỗi hộp sẽ đi sau các hộp trước đó trong cây tài liệu. Các phần tử cùng cấp trước đó sẽ “đẩy” các phần tử theo sau chúng, di chuyển chúng sang phải và xuống dưới bên trong phần tử mẹ. Phần tử mẹ có thể có những phần tử cùng cấp cùng làm điều tương tự với nó. Nó giống như việc đặt những viên gạch cạnh nhau trên tường, bắt đầu từ trên cùng.
Phương thức định vị các hộp này được gọi là phương thức tĩnh và là giá trị mặc định cho đặc tính position
(vị trí) trong CSS. Ngoài việc xác định lề và phần đệm, không có cách nào khác để định vị lại hộp tĩnh trong trang.
Giống như hình ảnh các viên gạch trên một bức tường, việc đặt hộp tĩnh không phải là bắt buộc. Đối với gạch, ta có thể đặt các hộp ở bất cứ đâu mình muốn, thậm chí là che phủ lên các hộp khác. Để làm điều tương tự như vậy, hãy gán đặc tính position
cho một trong các giá trị sau:
relative
(tương đối)-
Phần tử sẽ tuân theo luồng thông thường của tài liệu, nhưng nó có thể sử dụng các đặc tính
top
,right
,bottom
vàleft
để đặt độ lệch so với vị trí tĩnh ban đầu của nó. Độ lệch cũng có thể là số âm. Các phần tử khác sẽ vẫn giữ nguyên vị trí ban đầu của chúng như thể phần tử tương đối vẫn đang ở trạng thái tĩnh. absolute
(tuyệt đối)-
Phần tử sẽ bỏ qua luồng thông thường của các phần tử khác và tự định vị trên trang theo các đặc tính
top
,right
,bottom
vàleft
. Các giá trị của chúng có liên quan đến phần thân của tài liệu hoặc với vùng chứa chính không tĩnh. fixed
(cố định)-
Phần tử sẽ bỏ qua luồng thông thường của các phần tử khác và định vị chính nó theo các đặc tính
top
,right
,bottom
vàleft
. Các giá trị của chúng liên quan đến khung nhìn (tức là vùng màn hình nơi tài liệu được hiển thị). Các phần tử cố định sẽ không di chuyển khi khách truy cập cuộn qua tài liệu mà sẽ giống như một nhãn dán cố định trên màn hình. sticky
(dính)-
Phần tử sẽ tuân theo luồng thông thường của tài liệu. Tuy nhiên, thay vì đi biến mất khỏi khung nhìn khi tài liệu cuộn, nó sẽ dừng ở vị trí được thiết lập bởi các đặc tính
top
,right
,bottom
vàleft
. Ví dụ: nếu giá trịtop
là10px
thì phần tử sẽ ngừng cuộn dưới phần trên cùng của khung nhìn khi nó đạt đến 10 pixel tính từ giới hạn trên cùng của khung nhìn. Khi điều này xảy ra, phần còn lại của trang vẫn sẽ tiếp tục cuộn, nhưng phần tử dính sẽ hoạt động giống như một phần tử cố định ở vị trí đó. Nó sẽ quay trở lại vị trí ban đầu khi tài liệu cuộn trở lại vị trí của nó trong khung nhìn. Các phần tử dính ngày nay thường được sử dụng để tạo các menu đầu trang luôn cần được hiển thị.
Các vị trí không bắt buộc phải sử dụng tất cả các đặc tính top
, right
, bottom
và left
. Ví dụ: nếu bạn đặt cả hai đặc tính top
và height
của một phần tử tuyệt đối thì trình duyệt sẽ ngầm tính toán đặc tính bottom
của nó (top + height = bottom).
Đặc tính display
Nếu thứ tự do luồng thông thường đưa ra không phải là vấn đề trong thiết kế của bạn nhưng bạn lại muốn thay đổi cách các hộp tự sắp xếp trong trang thì hãy sửa đổi đặc tính display
(hiển thị) của phần tử. Đặc tính display
thậm chí có thể làm cho phần tử biến mất hoàn toàn khỏi tài liệu được hiển thị bằng cách đặt display: none
. Điều này sẽ hữu ích khi bạn muốn hiển thị phần tử sau này bằng JavaScript.
Ví dụ như đặc tính display
cũng có thể làm cho một phần tử khối hoạt động giống như một phần tử nội tuyến (display: inline
). Tuy nhiên, việc này không phải là một ý hay. Có các phương pháp tốt hơn để đặt các phần tử vùng chứa cạnh nhau, chẳng hạn như mô hình hộp linh hoạt.
Mô hình hộp linh hoạt được phát minh để khắc phục những hạn chế của các phần tử nổi và để loại bỏ việc sử dụng các bảng không phù hợp trong việc cấu trúc bố cục trang. Khi đặt đặc tính display
của phần tử chứa thành flex
để biến nó thành vật chứa hộp linh hoạt, các phần tử con trực tiếp của nó sẽ hoạt động giống như các ô trong một hàng của bảng.
Tip
|
Nếu muốn kiểm soát nhiều hơn nữa đối với vị trí của các phần tử trên trang, hãy xem tính năng lưới (grid) CSS. Lưới là một hệ thống mạnh mẽ dựa trên các hàng và cột để tạo các bố cục phức tạp. |
Để kiểm tra hiển thị linh hoạt, hãy thêm một phần tử div
mới vào trang ví dụ và biến nó thành vật chứa cho ba phần tử div
hiện có:
<div id="container">
<div id="first">
<h2>First div</h2>
<p><span>Sed</span> <span>eget</span> <span>velit</span>
<span>id</span> <span>ante</span> <span>tempus</span>
<span>porta</span> <span>pulvinar</span> <span>et</span>
<span>ex.</span></p>
</div><!-- #first -->
<div id="second">
<h2>Second div</h2>
<p><span>Fusce</span> <span>vitae</span> <span>vehicula</span>
<span>neque.</span> <span>Etiam</span> <span>maximus</span>
<span>vulputate</span> <span>neque</span> <span>eu</span>
<span>lobortis.</span> <span>Phasellus</span> <span>condimentum,</span>
<span>felis</span> <span>eget</span> <span>eleifend</span>
<span>aliquam,</span> <span>dui</span> <span>dolor</span>
<span>bibendum</span> <span>leo.</span></p>
</div><!-- #second -->
<div id="third">
<h2>Third div</h2>
<p><span>Pellentesque</span> <span>ornare</span> <span>ultricies</span>
<span>elementum.</span> <span>Morbi</span> <span>vulputate</span>
<span>pretium</span> <span>arcu,</span> <span>sed</span>
<span>faucibus.</span></p>
</div><!-- #third -->
</div><!-- #container -->
Thêm quy tắc CSS sau vào biểu định kiểu để biến vật chứa div
thành vật chứa hộp linh hoạt:
#container {
display: flex;
}
Kết quả là ba phần tử div
bên trong được hiển thị cạnh nhau (Figure 8).
Việc sử dụng giá trị inline-flex
thay vì flex
về cơ bản sẽ mang lại cùng một kết quả, nhưng nó sẽ làm cho phần tử con hoạt động giống các phần tử nội tuyến hơn.
Thiết kế Đáp ứng
Chúng ta đã biết rằng CSS cung cấp các đặc tính điều chỉnh kích thước của các phần tử và phông chữ tương ứng với vùng màn hình có sẵn. Tuy nhiên, ta có thể sẽ muốn tiến xa hơn và sử dụng những thiết kế khác nhau cho các thiết bị khác nhau, ví dụ như cho một hệ thống máy tính để bàn so với thiết bị có kích thước màn hình dưới một ngưỡng nhất định. Cách tiếp cận này được gọi là thiết kế web đáp ứng và CSS có cung cấp các phương thức được gọi là truy vấn phương tiện để thực hiện điều này.
Trong ví dụ trước, chúng ta đã sửa đổi bố cục trang để đặt các phần tử div
cạnh nhau thành các cột. Bố cục đó phù hợp với màn hình lớn, nhưng nó sẽ quá lộn xộn trên các màn hình nhỏ hơn. Để giải quyết vấn đề này, chúng ta có thể thêm một truy vấn phương tiện vào biểu định kiểu chỉ phù hợp với màn hình có chiều rộng ít nhất 600px
:
@media (min-width: 600px){
#container {
display: flex;
}
}
Các quy tắc CSS bên trong lệnh @media
(phương tiện) sẽ chỉ được sử dụng nếu tiêu chí trong ngoặc đơn được đáp ứng. Trong ví dụ này, nếu chiều rộng của khung nhìn nhỏ hơn 600px
thì quy tắc sẽ không được áp dụng cho vật chứa div
và các phần tử con của nó sẽ được hiển thị dưới dạng các phần tử div
thông thường. Trình duyệt sẽ đánh giá lại các truy vấn phương tiện mỗi khi kích thước khung nhìn thay đổi; do đó, bố cục có thể được thay đổi trong thời gian thực, cùng lúc thay đổi kích thước cửa sổ trình duyệt hoặc chiều xoay của điện thoại thông minh.
Bài tập Hướng dẫn
-
Nếu đặc tính
position
không được sửa đổi thì trình duyệt sẽ sử dụng phương pháp định vị nào? -
Làm cách nào để có thể chắc chắn rằng hộp của phần tử sẽ được hiển thị sau bất kỳ phần tử nổi nào trước đó?
-
Làm cách nào để có thể sử dụng đặc tính tốc ký
margin
để đặt lề trên/dưới thành4px
và lề phải/lề trái thành6em
? -
Làm cách nào để có thể căn giữa theo chiều ngang một phần tử chứa tĩnh có chiều rộng cố định trên trang?
Bài tập Mở rộng
-
Hãy viết một quy tắc CSS khớp với phần tử
<div class="picture">
để văn bản bên trong các phần tử khối tiếp theo sau sẽ nằm về phía bên phải của nó. -
Làm thế nào để thuộc tính
top
ảnh hưởng đến một phần tử tĩnh liên quan tới phần tử mẹ của nó? -
Việc thay đổi đặc tính
display
của một phần tử thànhflex
sẽ ảnh hưởng như thế nào đến vị trí của nó trong luồng thông thường? -
Tính năng CSS nào cho phép bạn sử dụng một bộ quy tắc riêng tùy thuộc vào kích thước của màn hình?
Tóm tắt
Bài học này đã nói về mô hình hộp trong CSS và cách chúng ta có thể tùy chỉnh nó. Ngoài luồng thông thường của tài liệu, nhà phát triển có thể sử dụng các cơ chế định vị khác nhau để triển khai một bố cục tùy chỉnh. Bài học đã đi qua các khái niệm và quy trình sau:
-
Luồng thông thường của tài liệu.
-
Điều chỉnh lề và phần đệm của hộp phần tử.
-
Sử dụng đặc tính float và clear.
-
Cơ chế định vị: tĩnh, tương đối, tuyệt đối, cố định và dính.
-
Các giá trị thay thế cho đặc tính
display
. -
Khái niệm cơ bản về thiết kế đáp ứng.
Đáp án Bài tập Hướng dẫn
-
Nếu đặc tính
position
không được sửa đổi thì trình duyệt sẽ sử dụng phương pháp định vị nào?Phương thức
static
. -
Làm cách nào để có thể chắc chắn rằng hộp của phần tử sẽ được hiển thị sau bất kỳ phần tử nổi nào trước đó?
Đặt đặc tính
clear
của phần tử thành ` both`. -
Làm cách nào để có thể sử dụng đặc tính tốc ký
margin
để đặt lề trên/dưới thành4px
và lề phải/lề trái thành6em
?Có thể là
margin: 4px 6em
hoặcmargin: 4px 6em 4px 6em
. -
Làm cách nào để có thể căn giữa theo chiều ngang một phần tử chứa tĩnh có chiều rộng cố định trên trang?
Sử dụng giá trị
auto
trong đặc tínhmargin-left
vàmargin-right
.
Đáp án Bài tập Mở rộng
-
Hãy viết một quy tắc CSS khớp với phần tử
<div class="picture">
để văn bản bên trong các phần tử khối tiếp theo sau sẽ nằm về phía bên phải của nó..picture { float: left; }
-
Làm thế nào để thuộc tính
top
ảnh hưởng đến một phần tử tĩnh liên quan tới phần tử mẹ của nó?Đặc tính
top
không áp dụng cho các phần tử tĩnh. -
Việc thay đổi đặc tính
display
của một phần tử thànhflex
sẽ ảnh hưởng như thế nào đến vị trí của nó trong luồng thông thường?Bản thân vị trí của phần tử sẽ không thay đổi, nhưng các phần tử con trực tiếp của nó sẽ được hiển thị cạnh nhau theo chiều ngang.
-
Tính năng CSS nào cho phép bạn sử dụng một bộ quy tắc riêng tùy thuộc vào kích thước của màn hình?
Truy vấn phương tiện sẽ cho phép trình duyệt xác minh kích thước khung nhìn trước khi áp dụng quy tắc CSS.