Bài đăng nổi bật



Trong CSS, một số thuộc tính có thể được sử dụng để căn chỉnh các phần tử theo chiều ngang.


Căn chỉnh giữa - Sử dụng margin

Thiết lập chiều rộng của phần tử mức-khối (block-level) sẽ ngăn chặn nó trải dài ra đến các cạnh của phần tử chứa nó. Sử dụng margin: auto;, để căn phần tử nằm giữa phần tử chứa nó.
Phần tử sẽ chiếm chiều rộng cụ thể, và không gian còn lại sẽ được chia đều giữa hai lề:
.center {
margin: auto;
width: 60%;
border:3px solid #73AD21;
padding: 10px;
}
Mẹo: Căn giữa không có hiệu lực nếu thuộc tính width không được thiết lập (hoặc được thiết lập là 100%).
Mẹo: Để căn chỉnh văn bản, hãy xem chương Văn bản trong CSS.


Căn trái và phải - Sử dụng định vị

Một phương pháp để căn chỉnh các phần tử là sử dụng position: absolute;:
Ví dụ
.right {
position: absolute;
right: 0px;
width: 300px;
border:3px solid #73AD21;
padding: 10px;
}
Lưu ý: Các phần tử được định vị tuyệt đối (absolute) được gỡ bỏ khỏi luồng (flow) bình thường, và có thể thành các phần tử chồng lấn (overlap).
Mẹo: Khi căn chỉnh các phần tử với position, luôn luôn định nghĩa marginpadding cho phần tử <body>. Điều này là để tránh khác biệt về hình ảnh trong trình duyệt khác nhau.
Cũng có một vấn đề với IE8 và các phiên bản trước đó, khi sử dụng position. Nếu một phần tử chứa (trong trường hợp này là <div class="container">) được chỉ định chiều rộng, và mô tả !DOCTYPE không có, IE8 và các phiên bản trước đó sẽ thêm margin là 17px cho lề phải. Điều này có vẻ là không gian dành riêng cho một thanh cuộn. Vì vậy, luôn luôn phải có mô tả !DOCTYPE khi sử dụng position:
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}


Căn chỉnh trái và phải - Sử dụng float

Phương pháp khác để căn chỉnh các phần tử là sử dụng thuộc tính float:
.right {
float: right;
width: 300px;
border:3px solid #73AD21;
padding: 10px;
}
Mẹo: Khi căn chính các phần tử với float, luôn luôn định nghĩa margin padding cho phần tử <body>. Điều này là để tránh khác biệt về hình ảnh trong các trình duyệt khác nhau.
Cũng có một vấn đề với IE8 và các phiên bản trước đó, khi sử dụng float. Nếu một phần tử chứa (trong trường hợp này là <div class="container">) được chỉ định chiều rộng, và mô tả !DOCTYPE không có, IE8 và các phiên bản trước đó sẽ thêm margin là 17px cho lề phải. Điều này có vẻ là không gian dành riêng cho một thanh cuộn. Vì vậy, luôn luôn phải có mô tả !DOCTYPE khi sử dụng float:
body {
margin: 0;
padding: 0;
}
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}


Tự làm bài tập!

CodeLean.vn
Facebook: CodeLean Community

Post a Comment

Mới hơn Cũ hơn