Thứ Bảy, 28 tháng 12, 2013

CSS Kích thước




Các thuộc tính kích thước CSS cho phép bạn kiểm soát chiều cao và chiều rộng của một phần tử.

CSS chiều cao tài sản

Ví dụ

Thiết lập chiều cao và chiều rộng của một đoạn:
<!DOCTYPE html>
<html>
<head>
<style>
img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}
</style>
</head>

<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br>
<img class="big" src="logocss.gif" width="95" height="84" />
<p class="ex">The height and width of this paragraph is 100px.</p>
<p>This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.</p>
</body>
</html>


Thử nó cho mình » 

thêm ví dụ ở dưới cùng của trang này.

Định nghĩa và sử dụng

Tài sản cao thiết lập chiều cao của một phần tử.

Lưu ý: Các tài sản cao không bao gồm đệm, biên giới, hoặc lợi nhuận; nó đặt chiều cao của khu vực bên trong đệm, biên giới, và lợi nhuận của các yếu tố!

Giá trị mặc định:xe hơi
Thừa kế:không
Phiên bản:CSS1
Cú pháp JavaScript:đối tượng . kêt = "50px"

Hỗ trợ trình duyệt

Internet Explorer Firefox Opera Google Chrome Safari
Tài sản cao được hỗ trợ trong tất cả các trình duyệt chính.

Lưu ý: Giá trị "kế thừa" không được hỗ trợ trong IE7 và trước đó. IE8 đòi hỏi một DOCTYPE!. IE9 hỗ trợ "kế thừa".


CSS tối đa chiều cao tài sản


Ví dụ

Thiết lập chiều cao tối đa của một đoạn văn:
<!DOCTYPE html>
<html>
<head>
<style>
p
{
max-height:50px;
background-color:yellow;
overflow:auto;
}
</style>
</head>

<body>
<p>The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px. The maximum height of this paragraph is set to 50px.</p>
</body>
</html>


Thử nó cho mình »

Định nghĩa và sử dụng

Tài sản tối đa chiều cao được sử dụng để thiết lập chiều cao tối đa của một phần tử.

Điều này ngăn cản các giá trị tài sản cao trở thành lớn hơn tối đa chiều cao.

Giá trị mặc định:không ai
Thừa kế:không
Phiên bản:CSS2
Cú pháp JavaScript:đối tượng . style.maxHeight = "10px"

Hỗ trợ trình duyệt

Internet Explorer Firefox Opera Google Chrome Safari
Tài sản tối đa chiều cao được hỗ trợ trong tất cả các trình duyệt chính.

Lưu ý: Giá trị "kế thừa" được hỗ trợ trong IE8 nếu một DOCTYPE được quy định!. IE9 hỗ trợ "kế thừa".

Lưu ý: IE6 và các phiên bản trước đó không hỗ trợ tài sản tối đa chiều cao.


CSS chiều rộng tối đa tài sản


Ví dụ

Thiết lập chiều rộng tối đa của một đoạn văn:
<!DOCTYPE html>
<html>
<head>
<style>
p
{
max-width:100px;
background-color:yellow;
}
</style>
</head>

<body>
<p>The maximum width of this paragraph is set to 100px.</p>
</body>
</html>


Thử nó cho mình »

Định nghĩa và sử dụng

Tài sản tối đa chiều rộng được sử dụng để thiết lập chiều rộng tối đa của một phần tử.

Điều này ngăn cản các giá trị tài sản rộng trở thành lớn hơn chiều rộng tối đa.

Giá trị mặc định:không ai
Thừa kế:không
Phiên bản:CSS2
Cú pháp JavaScript:đối tượng . style.maxWidth = "100px"

Hỗ trợ trình duyệt

Internet Explorer Firefox Opera Google Chrome Safari
Tài sản tối đa chiều rộng được hỗ trợ trong tất cả các trình duyệt chính.

Lưu ý: Giá trị "kế thừa" được hỗ trợ trong IE8 nếu một DOCTYPE được quy định!. IE9 hỗ trợ "kế thừa".

Lưu ý: IE6 và các phiên bản trước đó không hỗ trợ tài sản tối đa chiều rộng.


CSS min-height tài sản



Ví dụ

Thiết lập chiều cao tối thiểu của một đoạn văn:
<!DOCTYPE html>
<html>
<head>
<style>
p
{
min-height:100px;
background-color:yellow;
}
</style>
</head>

<body>
<p>The minimum height of this paragraph is set to 100px.</p>
</body>
</html>


 Thử nó cho mình »

Định nghĩa và sử dụng

Tài sản min-height được sử dụng để thiết lập chiều cao tối thiểu của một phần tử.

Điều này ngăn cản các giá trị tài sản cao trở thành nhỏ hơn min-height.

Giá trị mặc định:0
Thừa kế:không
Phiên bản:CSS2
Cú pháp JavaScript:đối tượng . style.minHeight = "10px"

Hỗ trợ trình duyệt

Internet Explorer Firefox Opera Google Chrome Safari
Tài sản min-height được hỗ trợ trong tất cả các trình duyệt chính.

Lưu ý: Giá trị "kế thừa" được hỗ trợ trong IE8 nếu một DOCTYPE được quy định!. IE9 hỗ trợ "kế thừa".

Lưu ý: IE6 và các phiên bản trước đó không hỗ trợ tài sản min-height.


CSS min-width tài sản


Ví dụ

Thiết lập chiều rộng tối thiểu của một đoạn văn:
<!DOCTYPE html>
<html>
<head>
<style>
p
{
min-width:150px;
background-color:yellow;
}
</style>
</head>

<body>
<p>The minimum width of this paragraph is set to 150px.</p>
</body>
</html>


Thử nó cho mình »

Định nghĩa và sử dụng

Tài sản min-width được sử dụng để thiết lập chiều rộng tối thiểu của một phần tử.

Điều này ngăn cản các giá trị tài sản rộng trở thành nhỏ hơn min-width.

Giá trị mặc định:0
Thừa kế:không
Phiên bản:CSS2
Cú pháp JavaScript:đối tượng . style.minWidth = "10px"

Hỗ trợ trình duyệt

Internet Explorer Firefox Opera Google Chrome Safari
Tài sản min-width được hỗ trợ trong tất cả các trình duyệt chính.

Lưu ý: Giá trị "kế thừa" được hỗ trợ trong IE8 nếu một DOCTYPE được quy định!. IE9 hỗ trợ "kế thừa".

Lưu ý: IE6 và các phiên bản trước đó không hỗ trợ tài sản min-width.


CSS chiều rộng tài sản


Ví dụ

Thiết lập chiều cao và chiều rộng của một đoạn:
<!DOCTYPE html>
<html>
<head>
<style>
img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}
</style>
</head>

<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br>
<img class="big" src="logocss.gif" width="95" height="84" />
<p class="ex">The height and width of this paragraph is 100px.</p>
<p>This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.
This is some text in a paragraph. This is some text in a paragraph.</p>
</body>
</html>


Thử nó cho mình » 
thêm ví dụ ở dưới cùng của trang này.

Định nghĩa và sử dụng

Sở hữu chiều rộng bộ chiều rộng của một phần tử.

Lưu ý: Các tài sản rộng không bao gồm đệm, biên giới, hoặc lợi nhuận, nó bộ chiều rộng của khu vực bên trong đệm, biên giới, và lợi nhuận của các yếu tố!

Giá trị mặc định:xe hơi
Thừa kế:không
Phiên bản:CSS1
Cú pháp JavaScript:đối tượng . style.width = "50px"

Hỗ trợ trình duyệt

Internet Explorer Firefox Opera Google Chrome Safari
Sở hữu chiều rộng được hỗ trợ trong tất cả các trình duyệt chính.

Lưu ý: Giá trị "kế thừa" không được hỗ trợ trong IE7 và trước đó. IE8 đòi hỏi một DOCTYPE!. IE9 hỗ trợ "kế thừa".
Người đăng: vào lúc
Nhãn: ,
Các tin khác

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)