Hướng dẫn height css 100% - chiều cao css 100%

Nội dung bài viết

Giới thiệu nội dung bài viết

Như trong bài viết về Sử dụng CSS trong HTML anh đã chia sẻ, các thuộc tính được sử dụng trong CSS nhằm giúp hiển thị, định dạng các phần tử trong HTML khi ta lập trình web. Trong bài viết hôm nay anh sẽ tiếp tục chia sẻ cho các bạn về thuộc tính height và width trong CSS dùng để thiết lập chiều cao và dài cho phần tử HTML. Anh sẽ trình bày và hướng dẫn cách làm cho mỗi thuộc tính thông qua các ví dụ minh hoạ. Trước hết, các bạn sẽ được tìm hiểu các giá trị có trong thuộc tính height và width bao gồm auto, length, phần trăm, initial, inherit. Sau đó tiếp tục đi qua các thuộc tính max-width, min-width, max-height, min-height trong lập trình web CSS. Cụ thể cách thao tác như thế nào với mỗi thuộc tính, các bạn tiếp tục đọc những chia sẻ dưới đây của anh để tìm hiểu thêm nhé!lập trình web. Trong bài viết hôm nay anh sẽ tiếp tục chia sẻ cho các bạn về thuộc tính height và width trong CSS dùng để thiết lập chiều cao và dài cho phần tử HTML.
Anh sẽ trình bày và hướng dẫn cách làm cho mỗi thuộc tính thông qua các ví dụ minh hoạ. Trước hết, các bạn sẽ được tìm hiểu các giá trị có trong thuộc tính height và width bao gồm auto, length, phần trăm, initial, inherit. Sau đó tiếp tục đi qua các thuộc tính max-width, min-width, max-height, min-height trong lập trình web CSS.
Cụ thể cách thao tác như thế nào với mỗi thuộc tính, các bạn tiếp tục đọc những chia sẻ dưới đây của anh để tìm hiểu thêm nhé!

1. Thuộc tính height và width trong css

Chúng ta sử dụng thuộc tính height và width để thiết lập chiều cao và dài cho một phần tử HTML

Thuộc tính height và width có thể có các giá trị sau.

• auto : đây là thuộc tính mặc định. Trình duyệt sẽ tính chiều cao và dài cho một phần tử HTML

• length : sử dụng px, cm, và các đơn vị đo khác để xác định chiều cao và dài cho phần tử HTML

• % : sử dụng phần trăm để tính giá trị chiều cao và dài cho các phần tử HTML

• initial : thiết lập chiều cao và dài cho giá trị ban đầu của phần tử HTML
• inherit : thiết lập chiều cao và dài được kế thừa từ phần tử cha

Ví dụ sau đây ta tạo ra một thẻ div có chiều cao là 200px và chiều dài là chiếm 50%

Ví dụ chúng ta có thể thiết lập chiều cao là 100px và chiều dài là 500px như sau
1
2
3
4
5
6
7
8
9
10
11
12
 






 
Ví dụ chúng ta có thể thiết lập chiều cao là 100px và chiều dài là 500px như sau






2. Thuộc tính max-width trong css
Chúng ta sử dụng thuộc tính max-width để thiết lập giá trị maximum (giá trị lớn nhất) của chiều dài của một phần tử HTML.



Giá trị max-width có thể là px, cm, hoặc %. Ví dụ nếu ta sử dụng thẻ div nếu chiều dài của thẻ div mà lớn hơn chiều dài của trình duyệt thì nó sẽ xuất hiện một thanh kéo ngang như vậy thì rất bất tiện cho người dùng vì họ phải kéo chuột mới thấy hết những nội dung còn lại.
1
2
3
4
5
6
7
8
9
10
11
12
 






 
 
Chúng ta sử dụng max-width để giải quyết bất cập trên.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 






The min-width Property

min-width: none (default):
Lorem ipsum dolor sit amet...

min-width: 500px:
 class="ex1">Lorem ipsum dolor sit amet...



4. Thuộc tính max-height trong css



Thuộc tính max-height để thiết lập giá trị maximum (giá trị lớn nhất) của chiều cao của một phần tử HTML
Nếu nội dung bên trong phần tử HTML mà cao hơn giá trị max-height thì sẽ xuất hiện thanh cuộn theo chiều dọc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21






The max-height Property

max-height: none (default):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.
max-height: 50px:
 class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.



5. Thuộc tính min-height trong css
Sử dụng thuộc tính min-height để thiết lập chiều cao nhỏ nhất (tối thiểu) cho một phần tử HTML. Nó ngược lại với max-height.
Nếu nội dung bên trong phân tử mà nhỏ hơn giá trị min-height thì giá trị min-height sẽ được sử dụng






0 
 
 






1 
6. Thực hành online và source code
Đọc tiếp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 







Set the max-width of an element
This div element has a height of 100px and a max-width of 500px:



Nếu ta thay đổi kích thước của trình duyệt nhỏ lại thì tự động thẻ div sẽ tự điều chỉnh cho vừa với trình duyệt.



 
Nếu ta thay đổi kích thước của trình duyệt nhỏ lại thì tự động thẻ div sẽ tự điều chỉnh cho vừa với trình duyệt và sẽ không xuất hiện thanh kéo ngang.
3. Thuộc tính min-width trong css
Ngược với thuộc tính max-width thì thuộc tính min-width sử dụng để thiết lập giá trị min (nhỏ nhất) của chiều dài của một phần tử HTML.
Nếu nội dung bên trong của phần tử HTML mà nhỏ hơn giá trị min-width thì giá trị min-width sẽ được sử dụng
Nếu nội dung bên trong của phần tử HTML mà lớn hơn giá trị min-width thì giá trị min-width sẽ không được sử dụng
 
Nếu nội dung bên trong phần tử HTML mà không cao hơn giá trị max-height thì giá trị này không được sử dụng
 
Nếu nội dung bên trong phần tử là lớn hơn giá trị min-height thì giá trị min-height không được sử dụng
 








programming
css
Width height CSS
max-height trong css
line-height trong css
Height: auto CSS
Width trong CSS
Height CSS
Size trong CSS
Width trong HTML



Reply
3
0
 Chia sẻ