bài 10. Chiều cao/Chiều rộng CSS
Nội dung
- Cài đặt chiều cao [Chieu cao] và chiều rộng [Chiều rộng] trong CSS
- Ví dụ 1
- Ví dụ 2
- Max-width setting setting
- Ví dụ 3
- Ví dụ minh họa
- Tất cả các thuộc tính về chiều cao và chiều rộng trong CSS
Hai thuộc tính chiều cao và chiều rộng được sử dụng để đặt chiều cao và chiều rộng tương ứng cho một phần tử trong CSS
Thuộc tính chiều cao và chiều rộng có thể được thiết lập giá trị mặc định là tự động. Ngoài ra giá trị của 2 thuộc tính này sử dụng các đơn vị đo có trong CSS bao gồm pixel [px], centimet [cm], điểm [pt], phần trăm [%]…
Ví dụ minh họa dưới đây cho một phần tử có chiều cao 200 pixel và chiều rộng là 50%
Ví dụ 1
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
Ví dụ dưới đây minh họa cho một phần tử có chiều cao 100 pixel và chiều rộng 500 pixel
Ví dụ 2
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
Chú thích. Thuộc tính
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
4 và
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
5 không bao gồm phần đệm, đường viền[đường viền] hoặc lề[lề] của một phần tử mà chính bằng phần chiều cao/chiều rộng nằm phía trước trong phần đệm, đường viền và lềMax-width setting setting
Thuộc tính chiều rộng tối đa được sử dụng để thiết lập chiều rộng tối đa cho một phần tử
chiều rộng tối đa có thể nhận các giá trị chiều dài bao gồm pixel [px], centimet [cm], điểm [pt], phần trăm [%]. or value none [ở đây là giá trị mặc định]
Sẽ có một vấn đề đặt ra đó là khi cửa sổ duyệt số của chúng ta có chiều rộng nhỏ hơn chiều rộng của một phần tử [500px] thì phần tử đó hiển thị như thế nào? . Sau đó trình duyệt sẽ thêm thanh cuộn ngang vào trang
Thay vì công việc phải sử dụng chiều rộng tối đa, trong trường hợp này, sẽ xử lý các trình duyệt được duyệt khi có cửa sổ nhỏ
Mạch nhỏ. Chúng ta cho cửa sổ duyệt xuống nhỏ hơn 500px, để thấy sự khác biệt giữa hai thẻ
Khi làm việc với Box Model nói riêng và CSS Layout nói chung thì ngoài công việc chúng ta cần tinh chỉnh cách hiển thị cho mỗi phần tử thì còn có một công việc khác nữa mà bạn cũng sẽ rất thường xuyên làm đó là thiết lập kích thước cho
Trong CSS thì hiện tại có tất cả 6 thuộc tính để bạn tùy chọn chiều rộng và chiều cao của phần tử bao gồm
Tên thuộc tínhMô tảCác loại giá trị chiều caoThiết lập chiều cao của một phần tử. autolength
%
inheritmax-heightThiết lập chiều cao tối đa của một phần tử. none
length
%
inheritmax-widthThiết lập chiều rộng tối đa của một phần tử. none
length
%
inheritmin-heightThiết lập chiều cao tối thiểu của một phần tử. length
%
inheritmin-widthThiết lập chiều rộng tối thiểu của một phần tử. length
%
inheritwidthThiết lập chiều rộng của phần tử. auto
độ dài
%
kế thừa
Tại các cột các kiểu giá trị,
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
6 nghĩa là kiểu giá trị kèm theo đơn vị như
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
7,
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
8,
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
9, #parent {
width:50%;
height:30px;
}
#child {
width:inherit;
height:100%;
background-color:red;
}
0 và #parent {
width:50%;
height:30px;
}
#child {
width:inherit;
height:100%;
background-color:red;
}
1, #parent {
width:50%;
height:30px;
}
#child {
width:inherit;
height:100%;
background-color:red;
}
2 là bỏ thiết lập, #parent {
width:50%;
height:30px;
}
#child {
width:inherit;
height:100%;
background-color:red;
}
3 là tự động tính toán theo chiều còn lại và #parent {
width:50%;
height:30px;
}
#child {
width:inherit;
height:100%;
background-color:red;
}
4 là kế thừa giá trị Và xin lưu ý thêm là bạn chỉ có thể thiết lập kích thước cho các phần tử Block, Table và các đối tượng [hình ảnh, video, flash,…] chứ không thể thiết lập cho các phần tử nội tuyến
Đối với các thuộc tính dạng
#parent {
width:50%;
height:30px;
}
#child {
width:inherit;
height:100%;
background-color:red;
}
5,
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
70 thì có nghĩa là nó sẽ sử dụng độ dài của phần tử dựa trên các nội dung bên trong nhưng sẽ có kích thước tối thiểu/tối đa được phép sử dụng. Ví dụ bạn có phần
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
71, bên trong
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
71 bạn có phần
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
73 và thiết lập chiều rộng cho
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
73 là 500px. Thì nếu bạn đặt thuộc tính
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
75 cho #content là 400px thì cái thằng
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
73 nó cũng chỉ giãn được tối đa là 400px chứ không thể hơnLời kết
Như vậy thì cuối bài bạn cũng đã có thể biết toàn diện vì các thuộc tính thay đổi kích thước của các phần tử khối để sau này bạn có thể biết rằng áp dụng khi sử dụng, mọi thứ cũng đơn giản thôi mà chỉ cần bạn thực hiện
Sự hiểu biết của tôi là
#parent {
width:50%;
height:30px;
}
#child {
width:inherit;
height:100%;
background-color:red;
}
6 cho phép chiều rộng của phần tử giống như cha mẹ của nó, trong khi #parent {
width:50%;
height:30px;
}
#child {
width:inherit;
height:100%;
background-color:red;
}
7 chỉ làm điều đó khi chiều rộng của cha mẹ được xác định rõ ràng. Điều này có phải là sự hiểu biết đúng không?Nếu vậy, tôi có vẻ như khi
#parent {
width:50%;
height:30px;
}
#child {
width:inherit;
height:100%;
background-color:red;
}
7 hoạt động, thì #parent {
width:50%;
height:30px;
}
#child {
width:inherit;
height:100%;
background-color:red;
}
6 sẽ luôn hoạt động, vì vậy bạn luôn có thể sử dụng cái sau. Sau đó, mục đích của công việc viết #parent {
width:50%;
height:30px;
}
#child {
width:inherit;
height:100%;
background-color:red;
}
7 là gì? Nếu sự hiểu biết của tôi là sai, sự khác biệt giữa hai người là gì?
Tương tự với
#parent {
width:50%;
height:30px;
}
#child {
width:inherit;
height:100%;
background-color:red;
}
2TIGT
1. 6702 Huy hiệu vàng17 Huy hiệu bạc37 Huy hiệu đồng2 huy hiệu vàng17 huy hiệu bạc37 huy hiệu đồng
hỏi ngày 21 tháng 2 năm 2012 lúc 8. 47 21/02/2012 lúc 8. 47
Xem jsfiddle http. //jsfiddle. net/bt5nj/2/ và http. //jsfiddle. net/bt5nj/3/
Chiều rộng kế thừa #parent {
width:50%;
height:30px;
}
#child {
width:inherit;
height:100%;
background-color:red;
}
3 được xác định bởi cha mẹ. cha mẹHTML
CSS
#parent {
width:50%;
height:30px;
}
#child {
width:inherit;
height:100%;
background-color:red;
}
Điều này làm cho
Chiều rộng của #parent {
width:50%;
height:30px;
}
#child {
width:inherit;
height:100%;
background-color:red;
}
4 là 25%, nhưng nếu tôi xác định lại nó bằng #parent {
width:50%;
height:30px;
}
#child {
width:inherit;
height:100%;
background-color:red;
}
5, thì nó sẽ xác định chiều rộng là #parent {
width:50%;
height:30px;
}
#child {
width:inherit;
height:100%;
background-color:red;
}
4 50%
MANU động mạch
8. 1435 huy hiệu vàng56 Huy hiệu bạc67 Huy hiệu đồng5 huy hiệu vàng56 huy hiệu bạc67 huy hiệu đồng
Đã trả lời ngày 21 tháng 2 năm 2012 lúc 8. 55 21/02/2012 lúc 8. 55
Chuck Norrischuck Norris Chuck Norris
14. 8K12 Huy hiệu vàng89 Huy hiệu bạc122 Huy hiệu đồng12 huy hiệu vàng89 huy hiệu bạc122 huy hiệu đồng
4
Từ khóa kế thừa CSS tạo phần tử lấy giá trị tính toán của thuộc tính từ phần tử cha của nó. Nó có thể được áp dụng cho bất kỳ thuộc tính CSS nào, bao gồm cả tốc độ tài liệu của CSS. Đối với các thuộc tính được kế thừa, điều này củng cố hành vi mặc định và chỉ cần thiết để ghi lại một quy tắc khác