Previous Lesson Next Lesson

Thuộc tính box trong CSS3

Thuộc tính box trong css3 dùng để hiển thị vị trí, định dạng lại vùng không gian, hiển thị độ bóng (shadow) cho thành phần.

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.
box-flex	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.
box-ordinal-group	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 10px 10px;	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ụ

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