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.
