6 tháng 10, 2019

Các thuộc tính CSS layout thường dùng để thiết kế bố cục Website

1. Thuộc tính float

- Thuộc tính float dùng để chỉ định căn sang bên trái hoặc phải cho phần tử html. Lưu ý là căn lề cả phần tử html chứ không phải chỉ căn nội dung phần tử.
- Float có 2 giá trị là leftright
- Ví dụ: #div{float: left;}

2. Thuộc tính clear

- Thuộc tính clear dùng để xóa bỏ hiệu ứng float của 1 phần tử chịu ảnh hưởng từ hiệu ứng của phần tử liền trước nó.
- Clear có 3 giá trị là left, rightboth tương ứng với xóa bỏ hiệu ứng căn trái, căn phải và cả 2 bên.
- Ví dụ: 
#div1{float: left;}
#div2{clear: both;}


div2 sẽ không bị căn lề trái theo div1

3. Thuộc tính overflow

- Thuộc tính này dùng để chỉ định cách xử lý khi nội dung phần tử html khi nó vượt quá giới hạn cho phép.
- Giá trị gồm
Giá trị
Mô tả
overflow: visible;
Khi chiều cao của box không đủ chứa text, thì text vẫn hiển thị tràn qua box, đây là mặc định.
overflow: hidden;
Khi chiều cao của box không đủ chứa text, thì text bị tràn sẽ được dấu đi.
overflow: scroll;
Tạo thanh trượt để xem phần nội dung vượt qua giới hạn
overflow: auto;
- Nếu phần tử html được giới hạn chiều cao, chiều rộng thì nó sẽ được tạo thanh trượt để xem phần nội dung vượt giới hạn.
- Nếu phần tử html không được giới hạn chiều cao và chiều rộng thì nó kích thước nó sẽ được tự động lớn lên theo nội dung 
overflow: inherit;
Thừa hưởng thuộc tính từ phần tử html cha

4. Thuộc tính width và height

- Width là thuộc tính quy đinh độ rộng cho phần tử html
- Height là thuộc tính quy định chiều cao cho phần tử html
- Giá trị gồm:
Giá trị
Mô tả
Đơn vị đo
Chỉ định độ rộng hoặc chiều cao cho phần tử. Đơn vị tính là px, em,.... hoặc chỉ định tỷ lệ %
auto
Định chiều rộng tự động, đây là dạng mặc định
inherit
Thừa kế thuộc tính từ phần tử html cha
- Ví dụ: height: 500px;

5. Thuộc tính giới hạn độ rộng và chiều cao

Thuộc tính
Giá trị
Mô tả
min-width
Đơn vị đo
Chỉ định độ rộng tối thiểu cho phần tử, tính từ mép trái ngoài cùng. Đơn vị tính là px, em,.... hoặc chỉ định tỷ lệ %
inherit
Thừa hưởng từ phần tử cha.
min-height
Đơn vị đo
Chỉ định chiều cao tối thiểu cho phần tử, tính từ mép trên cùng. Đơn vị tính là px, em, .... hoặc chỉ định tỷ lệ %
inherit
Thừa hưởng từ phần tử cha
max-width
Đơn vị đo
Chỉ định độ rộng tối đa cho phần tử, tính từ mép trái ngoài cùng. Đơn vị tính là px, em, .... hoặc chỉ định tỷ lệ %
none
Không sử dụng chiều rộng lớn nhất, đây là dạng mặc định
inherit
Thừa hưởng từ phần tử cha
max-height
Đơn vị đo
Chỉ định chiều cao tối đa cho phần tử, tính từ mép trên cùng. Đơn vị tính là px, em, .... hoặc chỉ định tỷ lệ %
none
Không sử dụng chiều cao lớn nhất, đây là dạng mặc định
inherit
Thừa hưởng từ phần tử cha
- Ví dụ: max-width: 200px; 

6. Thuộc tính outline

- Thuộc tính này được bổ sung thêm cho thuộc tính border nếu bạn có nhu cầu tạo thêm một đường viền bao quanh đường viền gốc
- Cách khai báo hoàn toàn giống thuộc tính border.
Xem thêm: Thuộc tính border trong CSS


SHARE THIS

Blogger Nguyễn Dương

Có một câu nói mà mình rất thích đó là "Thật sai lầm khi nghĩ rằng một khi rời khỏi trường học, bạn không cần học thêm điều mới nữa". Chính vì thế mà hãy luôn luôn học hỏi, con người chỉ ngừng phát triển khi ngừng học hỏi. Nếu như bạn chưa hiểu nội dung bài viết hoặc đang khúc mắc khi thao tác thì hãy bình luận phía dưới bài viết để mọi người cùng thảo luận nhé!