div và span

1. div và span khác nhau thế nào 

	div	span
Loại	Block (khối)	Inline (dòng)
Xuống dòng	Tự chiếm cả một dòng	Nằm cùng dòng với chữ xung quanh
width, height	Có tác dụng	Không có tác dụng
margin/padding trên-dưới	Có tác dụng	Gần như không đẩy các dòng khác
Dùng để	Chia bố cục, tạo khối, hộp	Tô màu, in đậm, đánh dấu một đoạn chữ nhỏ

 

2. Thuộc tính CSS hay dùng

2.1. Kích thước

Thuộc tính	Ý nghĩa
width / height	Chiều rộng / chiều cao (đơn vị px, %, vw, vh, rem)
min-width / max-width	Rộng tối thiểu / tối đa
min-height / max-height	Cao tối thiểu / tối đa
box-sizing: border-box	width và height đã tính cả padding và viền

Ví dụ: hộp rộng 50%, không vượt quá 400px.

html

Lưu ý: nếu không có box-sizing: border-box, hộp sẽ rộng hơn 50% vì cộng thêm padding.

---

2.2. Màu sắc và nền

Thuộc tính	Ý nghĩa
color	Màu chữ
background-color	Màu nền
background-image	Ảnh nền, ví dụ url('anh.jpg')
background-size	cover (phủ kín), contain (vừa khung)
background-repeat	no-repeat, repeat
background-position	Vị trí ảnh nền, ví dụ center
opacity	Độ trong suốt, từ 0 (trong) đến 1 (đục)

Ví dụ: nền xanh, chữ trắng, hơi trong suốt.

html

Cách viết màu: tên (red), hex (#ff0000), rgb(255,0,0), rgba(255,0,0,0.5).

---

2.3. Khoảng cách: margin và padding

Thuộc tính	Ý nghĩa
padding	Khoảng đệm bên trong, giữa nội dung và viền
margin	Khoảng cách bên ngoài, giữa hộp này và hộp khác
padding-top/right/bottom/left	Viết riêng từng phía
margin: 0 auto	Căn giữa khối theo chiều ngang (cần có width)

Ví dụ: hộp có đệm trong 15px, cách phần tử trên 20px và nằm giữa trang.

html

Cách viết rút gọn: padding: 10px 20px; nghĩa là trên-dưới 10px, trái-phải 20px. padding: 5px 10px 15px 20px; theo thứ tự trên, phải, dưới, trái.

---

2.4. Viền, bo góc, đổ bóng

Thuộc tính	Ý nghĩa
border	Viết gọn: độ dày, kiểu (solid, dashed, dotted), màu
border-bottom, border-left...	Viền riêng một cạnh
border-radius	Bo góc; 50% thành hình tròn khi rộng = cao
box-shadow	Đổ bóng: lệch ngang, lệch dọc, độ mờ, màu

Ví dụ: thẻ có viền, bo góc và bóng đổ.

html

---

2.5. Chữ (văn bản)

Thuộc tính	Ý nghĩa
font-size	Cỡ chữ
font-weight	Độ đậm: normal, bold, 400, 700
font-family	Kiểu chữ, ví dụ Arial, sans-serif
font-style	italic (in nghiêng)
text-align	Căn lề: left, center, right, justify
text-decoration	underline, line-through, none
text-transform	uppercase (IN HOA), lowercase, capitalize
line-height	Khoảng cách giữa các dòng
letter-spacing	Khoảng cách giữa các chữ cái

Ví dụ: tiêu đề căn giữa, in đậm, in hoa.

html

---

2.6. Kiểu hiển thị: display

Giá trị	Ý nghĩa
block	Chiếm cả dòng (mặc định của div)
inline	Nằm cùng dòng, không đặt được width/height (mặc định của span)
inline-block	Nằm cùng dòng và đặt được width/height
none	Ẩn hẳn, không chiếm chỗ
flex / grid	Bố cục linh hoạt / bố cục lưới

Khác với display: none, visibility: hidden ẩn phần tử nhưng vẫn giữ chỗ trống.

Ví dụ: biến span thành hộp có kích thước.

html

  Nút 1


  Nút 2

Hai nút nằm cùng một hàng và mỗi nút đều có chiều rộng, chiều cao riêng.

---

2.7. Định vị: position

Giá trị	Ý nghĩa
static	Mặc định, theo dòng chảy bình thường
relative	Giữ chỗ cũ; làm mốc cho phần tử con absolute
absolute	Rời khỏi dòng chảy, định vị theo cha gần nhất có position
fixed	Dính cố định theo cửa sổ trình duyệt
sticky	Cuộn bình thường, rồi dính lại khi chạm mép

Đi kèm là top, right, bottom, left (khoảng cách tới mép mốc) và z-index (số lớn hơn nằm đè lên trên).

Ví dụ: nút “Lên đầu trang” luôn nằm góc dưới bên phải màn hình.

html

Ví dụ ở đầu bài (huy hiệu số đỏ) là trường hợp cha relative + con absolute.

---

2.8. Flexbox (bố cục hàng/cột)

Áp dụng cho thẻ cha (display: flex) để sắp xếp các thẻ con.

Thuộc tính	Ý nghĩa
flex-direction	row (ngang), column (dọc)
justify-content	Căn theo trục chính: flex-start, center, flex-end, space-between, space-around
align-items	Căn theo trục phụ: flex-start, center, flex-end, stretch
gap	Khoảng cách giữa các thẻ con
flex-wrap	wrap cho phép xuống dòng khi hết chỗ
flex: 1 (ở thẻ con)	Chia đều không gian còn lại

Ví dụ: chia 3 cột đều nhau, cách nhau 10px.

html

Căn giữa một nội dung ngay giữa hộp (cả ngang lẫn dọc):

html

---

2.9. Tràn nội dung: overflow

Thuộc tính	Ý nghĩa
overflow: visible	Mặc định, nội dung thừa tràn ra ngoài
overflow: hidden	Cắt bỏ phần thừa
overflow: auto	Hiện thanh cuộn khi cần
overflow: scroll	Luôn hiện thanh cuộn
overflow-x / overflow-y	Chỉ áp dụng cho chiều ngang / dọc
text-overflow: ellipsis	Hiện dấu “...” khi chữ bị cắt

Ví dụ: hộp cao 80px, nội dung dài sẽ có thanh cuộn dọc.

html

Cắt chữ thành “...” trên một dòng cần kết hợp ba thuộc tính:

html

---

2.10. Con trỏ chuột và hiệu ứng

Thuộc tính	Ý nghĩa
cursor	Hình con trỏ: pointer (bàn tay), not-allowed, text...
transition	Chuyển động mượt khi thuộc tính thay đổi
transform	rotate(45deg) xoay, scale(1.2) phóng to, translate(10px, 5px) dịch chuyển
:hover	Kiểu áp dụng khi rê chuột vào

Ví dụ: nút đổi màu và phóng to nhẹ khi rê chuột.

html

:hover không viết được trong style="", mà phải đặt trong thẻ

---

---