Bộ định kiểu xếp tầng CSS hiển thị phần tử nội dung HTML

26/05/2019 | Mai Đức Thạch | 294 xem
Định dạng phần tử trong tài liệu HTML

Khu vực
viết nội dung

margin: khoảng cách từ viền phần tử này đến các phần tử bên cạnh

outline: đường bao quanh phía ngoài đường viền. Như vậy đường outline ở vị trí chồng lấn lên vùng margin. Đường outline sẽ hiển thị đè lên phía trên các phần tử khác nếu chúng chồng lấn lên nhau.

border: đường viền bao quanh phần tử.

padding: khoảng cách từ đường viền đến vùng nội dung bên trong phần tử.

Thanh cuộn: trong trường hợp sử dụng thuộc tính overflow: scroll; thì vị trí thanh cuộn nằm sát vị trí đường viền phía dưới, và bên phải chồng lấn lên vùng padding. Vùng nội dung bên trong phần tử nhỏ đi một chút.

margin-top (không áp dụng cho phần tử nội tuyến)

margin-bottom (không áp dụng cho phần tử nội tuyến)

margin-left

margin
-right

padding-top

padding-bottom

padding
-left

padding
-right

border-top-left-radius

border-top-right-radius

border-bottom-left-radius

border-bottom-right-radius

width: chiều rộng phần tử. Đối với phần tử nội tuyến, chiều rộng luôn là auto.
Mặc định thuộc tính box-sizing nhận giá trị content-box, chiều rộng phần tử bằng chiều rộng khu vực viết nội dung; khi giá trị thuộc tính box-sizing nhận giá trị border-box thì chiều rộng phần tử bao gồm thêm cả phần border, padding.
min-width: chiều rộng tối thiểu
max-width: chiều rộng tối đa

height: chiều cao phần tử. Đối với phần tử nội tuyến, chiều cao luôn là auto.
Mặc định thuộc tính box-sizing nhận giá trị content-box, chiều cao phần tử bằng chiều cao khu vực viết nội dung; khi giá trị thuộc tính box-sizing nhận giá trị border-box thì chiều cao phần tử bao gồm thêm cả phần border, padding.
min-height: chiều cao tối thiểu
max-height: chiều cao tối đa

border-radius: tạo đường viền cong bo ở 4 góc.

top: khoảng cách phía trên

top: khoảng cách phía trên

bottom: khoảng cách phía dưới

bottom: khoảng cách phía dưới

left: khoảng cách phía trái

left: khoảng cách phía trái

right: khoảng cách phía phải

right: khoảng cách phía phải

position: xác định vị trí. Với các giá trị:
relative: vị trí tương đối so với góc trên, bên trái của phần tử cụ thể.
absolute: vị trí tuyệt đối so với 4 góc của phần tử cha ở vị trí tương đối.
fixed: vị trí cố định so với 4 góc của trình duyệt.
Tùy vào giá trị của các cặp thuộc tính left, right, top, bottom để xác định góc vị trí phần tử cha. Riêng đối với vị trí tương đối thì tham chiếu đến góc trên, bên trái.
Đối với phần tử áp dụng tuyệt đối, cố định; phần tử luôn được chuyển sang phần tử khối.
Trong trường hợp nhiều phần tử được đặt chồng lên nhau, thuộc tính z-index được sử dụng để sắp xếp thứ tự hiển thị.

border-top

border-bottom

border
-left

border
-right

Đối với thuộc tính margin, padding ta có thể đặt kích thước độ dày theo 4 cách:
margin: {top-right-bottom-left};
hoặc margin: {top-bottom} {left-right};
hoặc margin: {top} {right} {bottom} {left};
hoặc tách riêng thành 4 thuộc tính.
Đối với các thuộc tính border, outline bắt buộc phải khai báo width, style, color theo cú pháp:
border: {width} {style} {color};
outline: {width} {style} {color};
hoặc tách riêng ra thành 3 thuộc tính riêng.
Giá trị của style có thể là:

none: bình thường
hidden: ẩn đường viền
dotter: viền chấm
dashed: viền nét đứt
solid: viền nét liền
double: viền nét đôi
groove: 3D đậm dần
ridge: 3D nhạt dần
inset: 3D nhạt chìm
outset: 3D đậm nổi

Đặt ảnh nền cho đường viền: tùy thuộc vào bộ chọn trình duyệt và tên thuộc tính có cú pháp: border-image: {source} {slice} {width} {repeat}; hoặc có thể tách riêng thành từng thuộc tính.

ĐỊNH DẠNG CSS
KHỐI PHẦN TỬ

float: left|right|none; cho phép phần tử khác tiếp nối bên trái hay bên phải nó.

clear: left|right|both; không cho phép phần tử khác tiếp nối bên trái, bên phải, hay cả 2 bên nó.

display đặt chế độ hiển thị của phần tử thuộc dạng khối, bảng, dòng hay không hiển thị.
visibility đặt chế độ ẩn, hiện nội dung phần tử. Lưu ý, khi bạn đặt ở chế độ ẩn, chỉ phần nội dung phần tử bị ẩn còn phần tử vẫn hiển thị.