Chủ Nhật, 29 tháng 12, 2013
CSS Align
Trong CSS, một số thuộc tính được sử dụng để sắp xếp các yếu tố theo chiều ngang.
Sắp xếp Khối yếu tố
Một yếu tố khối là một yếu tố mà chiếm toàn bộ chiều rộng có sẵn, và có một ngắt dòng trước và sau nó.
Ví dụ về các yếu tố khối:
- <h1>
- <p>
- <div>
Trong chương này, chúng tôi sẽ cho bạn thấy làm thế nào để sắp xếp theo chiều ngang chặn các yếu tố cho mục đích bố trí.
Gắn kết trung tâm Sử dụng biên tài sản
Yếu tố khối có thể căn giữa bằng cách thiết lập lề trái và phải để "tự động".
 | Lưu ý: Sử dụng margin: auto; sẽ không làm việc trong IE8 và trước đó, trừ khi một DOCTYPE được khai báo!. |
|---|
Thiết lập lề trái và phải để tự động xác định rằng họ nên chia phần lợi có sẵn như nhau. Kết quả là một yếu tố trung tâm:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</body>
</html>
Thử nó cho mình »
Mẹo: Trung tâm san bằng không có tác dụng nếu chiều rộng là 100%.
Trái và phải canh chỉnh Sử dụng tài sản trí
Một phương pháp sắp xếp các yếu tố là sử dụng định vị tuyệt đối:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</body>
</html>
Thử nó cho mình »
Lưu ý: các yếu tố vị trí tuyệt đối được đưa ra khỏi dòng chảy bình thường, và có thể chồng lên nhau thành phần.
Crossbrowser Vấn đề tương thích
Khi sắp xếp các yếu tố như thế này, nó luôn luôn là một ý tưởng tốt để ấn định trước margin và padding cho các phần tử body. Điều này là để tránh sự khác biệt hình ảnh trong trình duyệt khác nhau.
Có một vấn đề với IE8 và trước đó, khi sử dụng bất động sản vị trí. Nếu một yếu tố container (trong trường hợp của chúng tôi <div class="container">) có chiều rộng chỉ định, và khai báo DOCTYPE! Là mất tích, IE8 và phiên bản trước đó sẽ bổ sung thêm một biên độ 17px ở phía bên phải. Điều này có vẻ là không gian dành cho một thanh cuộn. Luôn luôn thiết lập khai báo DOCTYPE khi sử dụng bất động sản vị trí:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="container">
<div class="right">
<p><b>Note: </b>When aligning using the position property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p>
</div>
</div>
</body>
</html>
Thử nó cho mình »
Trái và phải canh chỉnh Sử dụng tài sản float
Một phương pháp sắp xếp các yếu tố là sử dụng tài sản float:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
</body>
</html>
Thử nó cho mình »
Crossbrowser Vấn đề tương thích
Khi sắp xếp các yếu tố như thế này, nó luôn luôn là một ý tưởng tốt để ấn định trước margin và padding cho các phần tử body. Điều này là để tránh sự khác biệt hình ảnh trong trình duyệt khác nhau.
Có một vấn đề với IE8 và trước khi sử dụng bất động sản nổi. Nếu khai báo DOCTYPE! Là mất tích, IE8 và phiên bản trước đó sẽ bổ sung thêm một biên độ 17px ở phía bên phải. Điều này có vẻ là không gian dành cho một thanh cuộn. Luôn luôn thiết lập khai báo DOCTYPE khi sử dụng bất động sản nổi:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p><b>Note: </b>When aligning using the float property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p>
</div>
</body>
</html>
Thử nó cho mình »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét