Căn lề cho phần tử khối (Block element)
Một phần tử khối sẽ có chiều rộng chiếm toàn bộ chiều rộng của phần tử chứa nó, và sẽ có ngắt xuống dòng ở cả trước và sau của khối.
Đang xem: Căn phải button trong html
Ví dụ, dưới đây là các thẻ tạo phần tử khối:
– ….Ở bài này, tôi sẽ hướng dẫn bạn làm thế nào để căn lề cho một khối, việc này rất cóích trong việc thiết kế Layout.
|
Để căn lề cho cho văn bảntrong khốithì bạn vui lòngxem lại bài CSS Text |
Căn giữa sử dụng thuộc tính margin
Một phần tử khối (Block element) có thể được căn giữa bằng cách thiết lập thuộc tính margin-left và margin-right là auto.
| Bạn sẽ không nhìn thấy rõ một phần tử khối được căn giữa nếu chiều rộng của nó là 100% |
Căn trái và căn phải sử dụng thuộc tính position
Một cách khác để căn trái và căn phải cho phần tử khối là sử dụng thuộc tính position: absolute;
div { position: absolute; right: 0px; width: 350px; border: 1px solid black; padding: 10px;}Xem ví dụ
| Khi căn lề cho phần tử khối bằng thuộc tính position, bạn cần phải xác định margin và padding của thẻ phần tử . Điều này giúp tránh sự khác biệt trực quan của các loại trình duyệt khác nhau.
Xem thêm: Cổng Thông Tin Đào Tạo Theo Tín Chỉ Là Gì Hvtc, Cổng Thông Tin Đào Tạo Theo Tín Chỉ |
body{ margin:0px; padding:0px;}div.container{ position: relative; width: 100%;}div.right{ position: absolute; right: 0px; width: 350px; border: 1px solid black; padding: 10px;}Xem ví dụ
| Khi sử dụng thuộc tính position:absolute nó sẽ làm thay đổi dòng chảy bình thường của các phần tử khác, bạn có thể ôn lại bài CSS Position để rõ hơn. |
Căn trái và căn phải sử dụng thuộc tính float
Một cách khác để căn trái và căn phải cho phần tử khối là sử dụng thuộc tính float
| Khi căn lề cho phần tử khối bằng thuộc tính float, bạn cần phải xác định margin và padding của thẻ phần tử . Điều này giúp tránh sự khác biệt trực quan của các loại trình duyệt khác nhau. |
body { margin: 0; padding: 0;}.right { position: absolute; right: 0px; width: 300px; background-color: #b0e0e6;}Xem ví dụ
| Đối với việc căn lề bằng thuộc tính position và float, bạn cần phải thêm vào đầu tập tin, để đảm bảo các trình duyệt đều hiển thị như nhau.
Xem thêm: Mysql Insert Nhiều Dòng Trong Php Vào Mysql? Chèn Nhiều Hàng Thông Qua Một Mảng Php Vào Mysql |
Tổng quan về CSSLàm thế nào để định dạng cho một phần tử ?Những kiến thức cơ bản trong việc viết mã CSSXác định màu sắc (color) trong CSSCách xác định bộ chọn (selector) của phần tửCấu trúc phần tử trong CSSTạo đường viền (border) cho phần tửĐường viền hình ảnhThiết lập vùng đệm (padding) cho phần tửXác định khoảng cách lề (margin) của phần tửMàu nền (background color)Kích thước phần tửHình nền (background image)Thiết lập độ cong (radius) cho các góc của phần tửTạo cái bóng (shadow) cho phần tửCác thuộc tính định dạng DANH SÁCHCác thuộc tính định dạng VĂN BẢNBộ chọn dựa trên quan hệ huyết thốngCách xác định bộ chọn trong một số trường hợp đặc biệtBộ chọn của các “thành phần” bên trong phần tửCách định dạng cho bảng (table) bằng CSSThuộc tính box-sizing trong CSSCác loại dấu trích dẫn (quote) được hỗ trợ trong CSSChia văn bản thành nhiều cộtTạo một vài hiệu ứng đơn giản cho hình ảnhChỉnh độ trong suốt của phần tửTạo thanh cuộn (scroll) cho phần tửXác định kiểu hiển thị (display) của phần tửThiết lập vị trí cho phần tửHiệu ứng chuyển độngCách sử dụng nhóm thuộc tính TransitionĐịnh dạng cho Liên kếtThuộc tính Float & Clear trong CSSĐộ ưu tiên hiển thị là gì ?
Chúng tôi chuyên cung cấp các bài viết thuộc lĩnh vực lập trình web, tài liệu hướng dẫn học HTML, CSS, Javascript, jQuery, MySQL, PHP.
