CSS Box model

3 cách khắc phục lỗi Double margin IE 6

by PT on 19/09/2011, Lượt xem: 5.845

Double margin IE 6 là gì? Lỗi Double margin xảy ra khi ta sử dụng margin-left cho một thành phần đã được gán float: left, hoặc margin-right cho một thành phần đã được gán float: right. Ví dụ ta có thành phần div với class “box” và ta viết mã CSS như sau: Với những trình duyệt khác thì sẽ hiển thị bình thường và thành phần div.box sẽ được canh lề bên trái 50px. Nhưng với trình duyệt IE phiên bản 6 trở về trước  (Tạm gọi là IE 6) thì giá trị margin sẽ bị gấp đôi (Double) và cách bên trái 100px. Cách khắc …

Xem tiếp »

Thiết kế giao diện với Div và CSS

by PT on 04/04/2011, Lượt xem: 66.279

Trước đây những người thiết kế hay sử dụng bảng (table) trong việc thiết kế giao diện cho website. Nhưng để đúng với chuẩn web standard (theo chuẩn) thì kỹ thuật thiết kế giao diện với thẻ div kết hợp với CSS đã dần thay thế bới những ưu việt và hiểu quả do nó mang lại. Bài viết này mình sẽ hướng dẫn các bạn cách thiết kế một giao diện với thẻ div kết hợp với 2 thuộc tính Float và Clear trong CSS. Cấu trúc giao diện chúng ta sẽ thiết kế gồm có header, footer và …

Xem tiếp »

Độ lớn thực sự của Box

by PT on 03/04/2011, Lượt xem: 6.831

Ở bài viết về Box Model trong CSS, mình đã giới thiệu với các bạn về các thành phần của Box Model, nhưng đó chỉ là những khái niệm cơ bản. Bài viết này chúng ta sẽ cùng tìm hiểu về độ lớn thực sực sự của Box (ta có thể gọi là các tính toán trong Box model). Vậy: Tại sao phải tính toán độ lớn của Box? Cách tính độ lớn của Box như thế nào? Trong thiết kế giao diện chúng ta luôn phải biết được thành phần bên trái rộng bao nhiêu px hay bao nhiêu …

Xem tiếp »

Thuộc tính Border trong CSS

by PT on 02/04/2011, Lượt xem: 11.147

Tiếp theo loạt bài viết về Box Model, hôm nay chúng ta sẽ cùng tìm hiểu về thuộc tính Border trong CSS. Đây cũng là một thuộc tính khá quan trọng. Khi thuộc tính Border được khai báo cho phép chúng có thể quy định độ dày, màu sắc và kiểu hiện thị đường viền của một thành phần nào đó, tạo ra sự phân biệt giữa các thành phần với nhau trong trang web được rõ ràng hơn. Các giá trị của border bao gồm: border-style, border-width và border-color Để đường viền được hiện thị thì giá trị border-style …

Xem tiếp »

Margin và Padding trong CSS

by PT on 02/04/2011, Lượt xem: 22.996

Trong bài Box Model trong CSS mình cũng có giới thiệu qua về Margin và Padding, bài viết này chúng ta sẽ tìm hiểu kỹ hơn và cách viết tắt đối với margin và padding. 1. Margin Khi ta khai báo thuộc tính Margin (canh lề) cho một thành phần nào đó, thì nó sẽ tạo ra một khoảng cách giữa thành phần đó với các thành phần xung quanh nó (top, right, bottom và left). Tạo ra sự phân chia giữa các thành phần trong trang web được thể hiện rõ ràng hơn. Giá trị của margin auto: tự …

Xem tiếp »

Box model trong CSS

by PT on 26/03/2011, Lượt xem: 5.152

Box model (mô hình hộp)  là cách mà CSS định dạng khối không gian bao quanh một thành phần. Trong HTML tất cả các thành phần đều tồn tại một hộp bao quanh nó. Mô hình Box model bao gồm padding (vùng đệm), border (đường viền) và margin (canh lề). Mặc định thì tất cả các giá trị này đều bằng 0, do đó chỉ khi nào các thuộc tính này được khai báo thì ta mới nhìn thấy sự thay đổi của chúng.

Xem tiếp »