CSS BOX
Định nghĩa và sử dụng
Thuộc tính của box trong css3:
| Thuộc tính | giá trị | ví dụ | Mô tả |
|---|---|---|---|
| box-align | start | box-align: start; | Thành phần sẽ nằm về phía trên cùng của thành phần bao ngoài. |
| end | box-align: end; | Thành phần sẽ nằm về phía dưới cùng của thành phần bao ngoài. | |
| center | box-align: center; | Thành phần sẽ nằm giữa thành phần bao ngoài (theo chiều thẳng đứng). | |
| baseline | box-align: baseline; | Thành phần sẽ nằm theo đường cơ bản (baseline), giá trị được áp dụng đối với các box theo chiều ngang (box-orient: horizontal). | |
| stretch | box-align: stretch; | Thành phần sẽ được nới rộng để phù hợp với thành phần bao ngoài. | |
| box-direction | normal | box-direction: normal; | Hiển thị thành phần từ trên xuống dưới hay từ trái sang phải, đây là dạng mặc định. |
| reverse | box-direction: reverse; | Hiển thị thành phần từ dưới lên trên hay từ phải sang trái. | |
| inherit | box-direction: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). | |
| box-flex | Số nguyên | box-flet: 2; | Ưu tiên linh hoạt theo các thành phần khác. |
| inherit | box-flet: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). | |
| box-ordinal-group | Số nguyên | box-ordinal-group: 1; | Cho biết thứ tự ưu tiên của các thành phần. |
| inherit | box-ordinal-group: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). | |
| box-orient | block-axis | box-orient: block-axis; | Định dạng thành phần dọc theo khối trục. |
| horizontal | box-orient: horizontal; | Định dạng thành phần từ trái sang phải theo chiều ngang. | |
| inline-axis | box-orient: inline-axis; | Định dạng thành phần theo trục nội tuyến. | |
| vertical | box-orient: vertical; | Định dạng thành phần từ trên xuống dưới theo chiều dọc. | |
| inherit | box-orient: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). | |
| box-pack | center | box-pack: center; | Đối với box hướng bình thường cạnh trái của thành phần được được chia đều cho cả hai phía. |
| end | box-pack: end; | Đối với box hướng bình thường cạnh phải của thành phần được đặc mép bên phải, ngược lại cạnh trái của thành phần sẽ được đặt mép bên trái. | |
| justify | box-pack: justify; | Không gian mở rộng sẽ được chia đều giữa các thành phần. | |
| start | box-pack: start; | Đối với box hướng bình thường cạnh trái của thành phần được đặc mép bên trái, ngược lại cạnh phải của thành phần sẽ được đặt mép bên phải. | |
| box-sizing | content-box | box-sizing: content-box; | Thuộc tính height và width chỉ có nội dung, không bao gồm padding, border và margin. |
| border-box | box-sizing: border-box; | Thuộc tính height và width sẽ bao gồm padding và border, nhưng không gồm margin. | |
| inherit | box-sizing: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). | |
| box-shadow | đơn vị (ngang) | box-shadow: 10px 10px; | Đây là thuộc tính bắt buộc, định vị trí bóng nằm ngang cho thành phần, có thể dùng số âm. |
| đơn vị (dọc) | box-shadow: 10px 10px; | Đây là thuộc tính bắt buộc, định vị trí bóng nằm dọc cho thành phần, có thể dùng số âm. | |
| đơn vị (độ mờ) | box-shadow: 10px 10px 10px; | Định khoảng cách mờ cho bóng. | |
| đơn vị (độ lan rộng) | box-shadow: 10px 10px 10px10px; | Tăng hoặc giảm độ lan rộng cho bóng. | |
| mã màu | box-shadow: 10px 10px#cc0000; | Màu sắc cho bóng. | |
| inset | box-shadow: 10px 10px #cc0000 inset; | Thay đổi bóng từ ngoài tối vào trong sáng. |
Ví dụ
Xem thêm ví dụ
HTML viết:
<html> <head></head> <body> <p>box shadow</p> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
box shadow
CSS viết:
p {
background: #cc0000;
height: 50px;
-moz-box-shadow: 5px 10px 5px #000;
-webkit-box-shadow: 5px 10px 5px #000;
box-shadow: 5px 10px 5px #000;
}
Hiển thị trình duyệt khi có CSS:
box shadow
Trình duyệt và hệ điều hành hỗ trợ
Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho thuộc tính box:
| Trình duyệt PC | Smartphone - Tablets | |||||||
 |  |  |  |  |  |  |  | |
| box-align | 10 X | 14 -moz- | 12 X | 20 -webkit- | 5.1 -webkit- | 3.2 -webkit- | 2.1 -webkit- | 8 X |
| box-direction | 10 X | 14 -moz- | 12 X | 20 -webkit- | 5.1 -webkit- | 3.2 -webkit- | 2.1 -webkit- | 8 X |
| box-flex | 10 X | 14 -moz- | 12 X | 20 -webkit- | 5.1 -webkit- | 3.2 -webkit- | 2.1 -webkit- | 8 X |
| box-ordinal-group | 10 X | 14 -moz- | 12 X | 20 -webkit- | 5.1 -webkit- | 3.2 -webkit- | 2.1 -webkit- | 8 X |
| box-orient | 10 X | 14 -moz- | 12 X | 20 -webkit- | 5.1 -webkit- | 3.2 -webkit- | 2.1 -webkit- | 8 X |
| box-pack | 10 X | 14 -moz- | 12 X | 20 -webkit- | 5.1 -webkit- | 3.2 -webkit- | 2.1 -webkit- | 8 X |
| box-sizing | 8 | 11 -moz- | 12 X | 9 | 5.1 -webkit- | 3.2 -webkit- | 2.1 -webkit- | 7.5 |
| box-shadow | 9 | 4 | 10.5 | 10 | 5.1 | 3.2 | 2.1 | 7.5 |
CSS OUTLINE
Thuộc tính outline định dạng các đường viền bao ngoài.
Cấu trúc
tag {
outline: giá trị;
}
Với giá trị như sau:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| outline | Mã màu Kiểu Độ rộng | outline: #ff0000 solid 2px; | Đây là cách viết ngắn gọn, tổng hợpcủa các thuộc tính bên dưới. |
| outline-color | Mã màu | outline-color: #ff0000; | Định dạng màu sắc cho đường bao ngoài. |
| outline-style | dotted | outline-style: dotted; |
Thành phần sử dụng outline
|
| dashed | outline-style: dashed; |
Thành phần sử dụng outline
| |
| solid | outline-style: solid; |
Thành phần sử dụng outline
| |
| double | outline-style: double; |
Thành phần sử dụng outline
| |
| groove | outline-style: groove; |
Thành phần sử dụng outline
| |
| ridge | outline-style: ridge; |
Thành phần sử dụng outline
| |
| inset | outline-style: inset; |
Thành phần sử dụng outline
| |
| outset | outline-style: outset; |
Thành phần sử dụng outline
| |
| inherit | outline-style: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). | |
| outline-width | Độ rộng | outline-width: 2px; | Xác định độ rộng cho đường bao ngoài. |
Ví dụ
HTML viết:
<html> <head></head> <body> <p>HỌC WEB CHUẨN</p> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
HỌC WEB CHUẨN
CSS viết:
p {
outline: 5px double red;
}
Hiển thị trình duyệt khi có CSS:
HỌC WEB CHUẨN
Trình duyệt hỗ trợ
Thuộc tính outline được hỗ trợ trong đa số các trình duyệt.
Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype
0 Bình luận:
Đăng nhận xét
Khi các bạn đóng góp ý kiến nhớ chú ý ngôn từ cho phù hợp với thuần phong ,mỹ tục văn hóa nước ta. Cảm ơn!