Bộ định kiểu xếp tầng CSS hiển thị phần tử nội dung 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ị.