Bài 12 – Chiều rộng và chiều cao | width & height CSS

Home/Học viết code/CSS/Bài 12 – Chiều rộng và chiều cao | width & height CSS

Chiều rộng – width và chiều cao – height

Cho đến tận bài học này, chúng ta vẫn chưa quan tâm mấy đến chiều rộng và chiều cao của các phần tử mà chúng ta đã thực hành. Trong bài này, chúng ta sẽ được xem làm thế nào để xác định chiều cao và rộng một phần tử dễ dàng như thế nào.

Thiết lập thông số chiều rộng [width]

Với thuộc tính width, bạn có thể định chính xác chiều rộng một phần tử.
Ví dụ này cho ta thấy xác định chiều ngang của mô hình hộp này là 200px:

div.box {
        width: 200px;
        border: 1px solid black;
        background: orange;
    }

Xem ví dụ

Thiết lập chiều cao [height]

Ví dụ bên trên cho thấy chiều cao của mô hình hộp bằng chiều cao của nội dung bên trong nó, tuy vậy chúng có thể không chế chiều của nó theo ý muốn bằng thuộc tính height. Ví dụ bên dưới cho ta mô hình hộp có chiều cao là 500px:

div.box {
        height: 500px;
        width: 200px;
        border: 1px solid black;
        background: orange;
    }

Xem ví dụ

Tổng kết

Các bài học 9, 10, 11 đã giới thiệu cho bạn về mô hình hộp CSS. Như bạn cũng đã biết, mô hình hộp cho bạn nhiều tham số. Bạn có thể thực hiện dàn trang HTML theo cách cũ là dùng table, nhưng với CSS và mô hình hộp, bạn có thêm khả năng dàn trang chính xác và đẹp hơn, đúng chuẩn theo những khuyến nghị của tổ chức tiêu chuẩn web toàn cầu W3C. Trong bài tiếp theo, bạn sẽ được học các phần tử nổi – floating elements, một cách giúp bạn tạo ra các mô hình hộp linh động hơn.

Facebook Comments
2020-09-20T11:14:13+00:00Tháng Mười Một 1, 2014|Categories: CSS|Tags: , , , , , |

Tác giả:

Xin chào, đây là Blog của Chung - chuyên trang tìm hiểu về ngành thiết kế web nói chung và các ngành thiết kế đồ họa liên quan. I'm a Freelance Web/Graphic Designer - Lecturer at University of Fine Arts, Hong Bang International University, Văn Lang University, Saigon University, Hong Bang International University, Nguyen Tat Thanh University.
Go to Top