1 of 37

Bài 4 Định vị trí box

2 of 37

NHẮC LẠI BÀI TRƯỚC

Giới thiệu về font

Một số thuộc tính quan trọng của Font Một số thuộc tính quan trọng của Text Kích thước của font, text trong HTML Cách viết CSS rút gọn (shorthand)

Bài 4 - Định vị trí box

2

3 of 37

MỤC TIÊU BÀI HỌC

Bài 4 - Định vị trí thẻ

Tìm hiểu về box (hộp), cấu trúc box trên một trang của website:

Tầm quan trọng Kích thước

Vị trí

Thuộc tính của box: Thuộc tính về nội dung Thuộc tính về vị trí Thuộc tính về hiển thị

3

4 of 37

BOX, CẤU TRÚC BOX TRÊN TRANG WEB

5 of 37

BOX, CẤU TRÚC BOX

Bài 4 - Định vị trí thẻ

5

Là thành phần cấu thành nên trang của website Sự sắp xếp hợp lý các box sẽ tạo nên bố cục trang

6 of 37

BOX, CẤU TRÚC BOX

Bài 4 - Định vị trí thẻ

6

7 of 37

BOX, CẤU TRÚC BOX

Bài 4 - Định vị trí thẻ

7

8 of 37

BOX, CẤU TRÚC BOX

Bài 4 - Định vị trí thẻ

8

background color

border

margin

box

kích thước (width)

background image

padding

nội dung

9 of 37

BOX, CẤU TRÚC BOX

Bài 4 - Định vị trí thẻ

9

10 of 37

BOX, CẤU TRÚC BOX

Border (đường viền): bạn có thể đặt độ dày, kiểu dáng, và màu sắc cho đường viền.

Margin (lề): thiết lập khoảng cách giữa box và các thành phần bên ngoài, xung quanh (tính từ đường viền ra ngoài)

Padding (khoảng đệm): thiết lập khoảng cách từ đường viền vào trong nội dung của box

Bài 4 - Định vị trí thẻ

10

11 of 37

BOX BORDER

Bài 4 - Định vị trí thẻ

11

Width: thin, medium, thick, hoặc số cụ thể (ems, px, %)

Box border

Style: none, hidden, dotted, dashed, solid, double,groove, ridge, inset, outset

Color: giá trị mã màu

12 of 37

BOX BORDER

Bài 4 - Định vị trí thẻ

12

CSS:

p { border-color:#F00; border-style:solid; border-width: 1px}

Hoặc

p { border:#F00 solid 1px} XHTML:

<p>Bạn đã được cảnh báo!</p>

13 of 37

BOX PADDING

Bài 4 - Định vị trí thẻ

13

top

left

padding

right

bottom

Padding: thiết lập khoảng cách từ đường viền vào trong nội dung của box

14 of 37

BOX PADDING

Bài 4 - Định vị trí thẻ

14

CSS:

p { border:#F00 solid 1px ; padding-top:5px; padding-left:10px; padding-right:15px; padding-bottom:20px}

15 of 37

BOX PADDING

Bài 4 - Định vị trí thẻ

15

Áp dụng được cách viết rút gọn (shorthand)

CSS:

p { border:#F00 solid 1px ; padding:5px 15px 20px 10px}

top

Thứ tự: trên, phải,

padding

right

bottom

left

dưới, trái

16 of 37

BOX MARGIN

Bài 4 - Định vị trí thẻ

16

Margin: thiết lập khoảng cách giữa box và các thành phần bên ngoài

top left

margin

right

bottom

17 of 37

BOX MARGIN

Bài 4 - Định vị trí thẻ

17

CSS:

.boxone { border:#F00 solid 1px; margin-top:5px; margin-left:20px; margin-right:20px; margin-bottom:25px}

.boxtwo { border:#903 solid 1px; margin-top:5px; margin-right:10px; margin- bottom:12px; margin-left:8px;}

18 of 37

FLOATING & CLEARING

19 of 37

FLOAT

Dùng để nổi những thành phần (box, image, text,

…) trên trang

Là nền tảng để tạo bố cục nhiều cột

CSS:

p {float:left; margin:0 4px 4px 0;}

Đoạn văn bản được thả nổi về phía

bên phải so với ảnh

Bài 4 - Định vị trí thẻ

19

20 of 37

FLOAT

left right

float

none inherit

Bài 4 - Định vị trí thẻ

20

21 of 37

CLEAR

Không cho phép thẻ nổi

clear

Both left right none inherit

Bài 4 - Định vị trí thẻ

21

22 of 37

CLEAR

Dùng để cố định những thành phần (box, image, text, …) trên page

CSS:

p {margin:0 0 10px 0;}

img {float:left; margin:0 4px 4px 0;}

.clearthefloats {clear:both;}

​

HTML:

<img src="../images/dartmoor-view.jpg" />

<p> Here’s a lovely picture of Dartmoor... </p>

<img src="../images/english-cottage.jpg" />

<p> My sister lived in this delightful cottage

... </p>

<div class="clearthefloats"></div>

<img src="../images/winsor-castle_walls.jpg" />

<p> The Queen of England...</p>

Bài 4 - Định vị trí thẻ

22

23 of 37

CLEAR

Bài 4 - Định vị trí thẻ

23

24 of 37

THUỘC TÍNH VỀ VỊ TRÍ BOX

25 of 37

relative

25

THUỘC TÍNH VỀ VỊ TRÍ BOX

absolute

fixed

position

static

inherit

Bài 4 - Định vị trí thẻ

26 of 37

STATIC

26

Là giá trị mặc định của thuộc tính position

Mỗi thành phần được đặt sau thành phần khác theo dòng chảy trang

Không xảy ra hiện tượng chồng chéo giữa nhiều thành phần

Không cần thiết phải sử dụng các yếu tố căn chỉnh tọa độ: top, left, right, bottom

Bài 4 - Định vị trí thẻ

27 of 37

STATIC

27

CSS:

p#specialpara {color:red; background:#EEE; position:static} XHTML:

<p id="specialpara">Đây là đoạn thứ ba của ví dụ về định vị. Đoạn này có một ID để ta có thể thay đổi giá trị vị trí của nó mà không ảnh hưởng tới các đoạn khác.Mục đích của ví dụ này là thể hiện cho bạn thấy sự khác biệt giữa bốn giá trị định vị: static, relative, absolute và fixed. </p>

Bài 4 - Định vị trí thẻ

28 of 37

ABSOLUTE

28

Định vị hộp theo tọa độ tuyệt đối, thay đổi vị trí theo các thuộc tính:

Top Left Right Bottom

Có thể xếp chồng đè lên các hộp khác Không phụ thuộc vào margin, float

Bài 4 - Định vị trí thẻ

29 of 37

ABSOLUTE

29

CSS:

p#specialpara {position:absolute; top:25px; left:30px; color:red; background:#EEE;} XHTML:

<p id="specialpara">Đây là đoạn thứ ba của ví dụ về định vị. Đoạn này có một ID để ta có thể thay đổi giá trị vị trí của nó mà không ảnh hưởng tới các đoạn khác.Mục đích của ví dụ này là thể hiện cho bạn thấy sự khác biệt giữa bốn giá trị định vị: static, relative, absolute và fixed. </p>

Bài 4 - Định vị trí thẻ

30 of 37

RELATIVE

30

Định vị tương đối so với hộp ngữ cảnh của nó Kết hợp căn chỉnh tọa độ với:

Top Left Right Bottom

Có thể kết hợp với margin, padding để căn chỉnh không xảy ra hiện tượng chồng chéo

Bài 4 - Định vị trí thẻ

31 of 37

RELATIVE

31

CSS:

p#specialpara {position:relative; top:25px; left:30px; color:red; background:#EEE;} XHTML:

<p id="specialpara">Đây là đoạn thứ ba của ví dụ về định vị. Đoạn này có một ID để ta có thể thay đổi giá trị vị trí của nó mà không ảnh hưởng tới các đoạn khác.Mục đích của ví dụ này là thể hiện cho bạn thấy sự khác biệt giữa bốn giá trị định vị: static, relative, absolute và fixed. </p>

Bài 4 - Định vị trí thẻ

32 of 37

FIXED VÀ INHERIT

32

Fixed (định vị cố định): tương tự như định vị tuyệt đối, ngoại trừ việc ngữ cảnh định vị của hộp là công cụ hiển thị (ví dụ như cửa sổ trình duyệt hoặc màn hình của một thiết bị cầm tay).

Hộp không di chuyển khi trang được cuộn khi sử dụng fixed

Inherit: kế thừa được thuộc tính định vị của các hộp liền kề

Bài 4 - Định vị trí thẻ

33 of 37

THUỘC TÍNH DISPLAY

34 of 37

THUỘC TÍNH DISPLAY

Bài 4 - Định vị trí thẻ

34

Cung cấp khả năng mạnh mẽ, cho phép bạn những khả năng như buộc một thẻ cục bộ lấp đầy thẻ chứa nó

Phạm vi ứng dụng: tạo menu drop down

CSS:

p {display:inline;} a {display:block}

block inline

​

display

35 of 37

BOX, CẤU TRÚC BOX

Bài 4 - Định vị trí thẻ

35

Block: cho phép những thành phần (đoạn văn, tiêu đề, danh sách, …) được hiển thị

Inline: cho phép những thành phần được hiển thị trên trình duyệt và chỉ xuất hiện trên dòng mới khi không có không gian hiển thị

Áp dụng mạnh mẽ để dàn layout cho những thành phần trên trang web (menu dropdown, …)

36 of 37

TỔNG KẾT

Tất cả những thành phần được bố trí trên trang web được gọi là box

Thuộc tính chính của box bao gồm:

Border Margin Padding Nội dung Background

Dùng thuộc tính float để làm nổi box và clear để hủy nổi

Bài 4 - Định vị trí thẻ

36

37 of 37

TỔNG KẾT

Bài 4 - Định vị trí thẻ

37

Thuộc tính quan trọng của box:

Thuộc tính về vị trí (position): thường sử dụng giá trị relative, static

Thuộc tính về hiển thị (display): thường được áp dụng trong cách dàn menu dropdown