HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Hướng dẫn CSS

TRANG CHỦ CSS Giới thiệu CSS Cú pháp CSS Bộ chọn CSS CSS Cách thực hiện Nhận xét CSS Màu CSS
Màu sắc RGB HEX HSL
Nền CSS
Màu nền Hình nền Bối cảnh Lặp lại Tệp đính kèm nền Tốc ký nền
Đường viền CSS
Biên giới Chiều rộng biên giới Màu viền Các mặt biên giới Tốc ký biên giới Rounded Borders
Lề CSS
Margins Margin Collapse
CSS Padding Chiều cao / Chiều rộng CSS Mô hình hộp CSS Đề cương CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Văn bản CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Phông chữ CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Biểu tượng CSS Liên kết CSS Danh sách CSS Bảng CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Hiển thị CSS Chiều rộng tối đa CSS Vị trí CSS CSS Z-index CSS Overflow CSS Float
Float Clear Float Examples
Khối nội tuyến CSS Căn chỉnh CSS Bộ kết hợp CSS Lớp giả CSS Phần tử giả CSS Độ mờ của CSS Thanh điều hướng CSS
Navbar Vertical Navbar Horizontal Navbar
Trình đơn thả xuống CSS Thư viện hình ảnh CSS Hình ảnh CSS Sprites Bộ chọn CSS Attr Biểu mẫu CSS Bộ đếm CSS Bố cục trang web CSS Đơn vị CSS Đặc tính CSS CSS! Quan trọng Các hàm toán học CSS

CSS nâng cao

Góc làm tròn CSS Hình ảnh đường viền CSS Nền CSS Màu CSS Từ khóa màu CSS CSS Gradients
Linear Gradients Radial Gradients Conic Gradients
Bóng CSS
Shadow Effects Box Shadow
Hiệu ứng văn bản CSS Phông chữ Web CSS Chuyển đổi CSS 2D Chuyển đổi CSS 3D Chuyển đổi CSS Hoạt ảnh CSS Chú giải công cụ CSS Hình ảnh phong cách CSS Phản chiếu hình ảnh CSS CSS object-fit Vị trí đối tượng CSS Mặt nạ CSS Các nút CSS Phân trang CSS CSS Nhiều cột Giao diện người dùng CSS Biến CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Kích thước hộp CSS Truy vấn phương tiện CSS Ví dụ về CSS MQ CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS đáp ứng

Giới thiệu về RWD RWD Viewport Chế độ xem lưới RWD Truy vấn phương tiện RWD Hình ảnh RWD RWD Video Khung RWD Mẫu RWD

Lưới CSS

Grid Intro Vùng chứa lưới Mục lưới

CSS SASS

Hướng dẫn SASS

Ví dụ về CSS

Mẫu CSS Ví dụ về CSS câu đố css Bài tập CSS Chứng chỉ CSS

Tham chiếu CSS

Tham chiếu CSS Bộ chọn CSS Chức năng CSS Tham chiếu CSS Aural Phông chữ An toàn trên Web CSS Hoạt hình CSS Đơn vị CSS Công cụ chuyển đổi CSS PX-EM Màu CSS Giá trị màu CSS Giá trị mặc định của CSS Hỗ trợ trình duyệt CSS

Chiều cao và chiều rộng CSS

❮ Trước Kế tiếp ❯

CSS heightvà widththuộc tính được sử dụng để đặt chiều cao và chiều rộng của một phần tử.

Thuộc tính CSS max-widthđược sử dụng để đặt chiều rộng tối đa của một phần tử.

Phần tử này có chiều cao là 50 pixel và chiều rộng là 100%.

CSS Cài đặt chiều cao và chiều rộng

Thuộc tính heightvà widthđược sử dụng để thiết lập chiều cao và chiều rộng của một phần tử.

Các thuộc tính chiều cao và chiều rộng không bao gồm phần đệm, đường viền hoặc lề. Nó đặt chiều cao / chiều rộng của vùng bên trong phần đệm, đường viền và lề của phần tử.

Giá trị chiều cao và chiều rộng CSS

Các thuộc tính heightvà widthcó thể có các giá trị sau:

  • auto- Đây là mặc định. Trình duyệt tính toán chiều cao và chiều rộng
  • length - Xác định chiều cao / chiều rộng bằng px, cm, v.v.
  • % - Xác định chiều cao / chiều rộng theo phần trăm của khối chứa
  • initial - Đặt chiều cao / chiều rộng thành giá trị mặc định của nó
  • inherit - Chiều cao / chiều rộng sẽ được kế thừa từ giá trị mẹ của nó

Ví dụ về chiều cao và chiều rộng CSS

Phần tử này có chiều cao là 200 pixel và chiều rộng là 50%

Thí dụ

Đặt chiều cao và chiều rộng của phần tử <div>:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Phần tử này có chiều cao là 100 pixel và chiều rộng là 500 pixel.

Thí dụ

Đặt chiều cao và chiều rộng của phần tử <div> khác:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

Lưu ý: Hãy nhớ rằng các thuộc tính heightvà widththuộc tính không bao gồm phần đệm, đường viền hoặc lề! Họ đặt chiều cao / chiều rộng của khu vực bên trong phần đệm, đường viền và lề của phần tử!

Đặt chiều rộng tối đa

Thuộc max-widthtính được sử dụng để đặt chiều rộng tối đa của một phần tử.

Có max-widththể được chỉ định trong các giá trị chiều dài , như px, cm, v.v., hoặc phần trăm (%) của khối chứa hoặc đặt thành không (đây là mặc định. Có nghĩa là không có chiều rộng tối đa).

Sự cố với điều <div>trên xảy ra khi cửa sổ trình duyệt nhỏ hơn chiều rộng của phần tử (500px). Sau đó, trình duyệt sẽ thêm một thanh cuộn ngang vào trang.

Thay vào đó, trong tình huống này, việc sử dụng max-widthsẽ cải thiện khả năng xử lý các cửa sổ nhỏ của trình duyệt.

Mẹo: Kéo cửa sổ trình duyệt đến chiều rộng nhỏ hơn 500px để xem sự khác biệt giữa hai div!

Phần tử này có chiều cao là 100 pixel và chiều rộng tối đa là 500 pixel.

Lưu ý: Nếu vì lý do nào đó bạn sử dụng cả thuộc widthtính và thuộc max-widthtính trên cùng một phần tử, và giá trị của thuộc widthtính lớn hơn thuộc max-widthtính; thuộc max-widthtính sẽ được sử dụng (và thuộc widthtính sẽ bị bỏ qua).

Thí dụ

Phần tử <div> này có chiều cao là 100 pixel và chiều rộng tối đa là 500 pixel: 

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Hãy tự mình thử - Ví dụ


Ví dụ này trình bày cách đặt chiều cao và chiều rộng của các phần tử khác nhau.


Ví dụ này trình bày cách đặt chiều cao và chiều rộng của hình ảnh bằng cách sử dụng giá trị phần trăm.


Ví dụ này trình bày cách đặt chiều rộng tối thiểu và chiều rộng tối đa của một phần tử bằng cách sử dụng giá trị pixel.


Ví dụ này trình bày cách đặt chiều cao tối thiểu và chiều cao tối đa của một phần tử bằng cách sử dụng giá trị pixel.

Kiểm tra bản thân với các bài tập

Bài tập:

Đặt chiều cao của phần tử <h1> thành "100px".

<style>
h1 {
  : 100px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Tất cả các thuộc tính thứ nguyên CSS

Property Description
height Sets the height of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
width Sets the width of an element

❮ Trước Kế tiếp ❯