CSS3 09 – CSS3 User Interface

0
84

CSS3  cung cấp cho chúng ta một số tính năng về phía người ùng như là thay đổi kích thước thành phần trên website , thay đổi kích thước hộp, phác thảo.

Một số các thuộc tính quy định

  • Box-sizing
  • Outline-offset
  • Resize

1. Thuộc tính Box-Sizing

Box-sizing là thuộc tính CSS3 được sử dụng để thay đổi kích mô hình box mode trong CSS mà  mặc định được sử dụng để tính chiều rộng và chiều cao của các phần tử.

  • Bình thường kích thước thực tế của một khối sẽ là kích thước mà bạn set trong css + border + padding.

Ví dụ

See the Pen ZJvLER by Cao Anh Nhất (@xeko995) on CodePen.dark

Trong ví dụ trên tôi đặt kích thước của một khối có chiều rộng là 200px chiều cao là 100px , khi tối tiến hành thêm padding và border vào thì kích thước khối của tôi ở đây đã thay đổi

Cụ thể: Width = 200 + 2*2 + 20*2 = 244px

Trường hợp bạn muốn có một khối mà padding , border không làm ảnh hưởng đến kích thước của hộp thì box-sazing là một sự lựa chọn hoàn hảo.

Với vị dụ trên khi tôi thêm vào thuộc tính box-sizing thì kích thước của khối vẫn không thay đổi.

See the Pen rzpWoK by Cao Anh Nhất (@xeko995) on CodePen.dark

Để không thay đổi kích thước của khối chúng ta truyền vào box-sizing giá trị là “border-box“.

2. Thuộc tính outline-offset

Outline-offset quy định một đường biên bao ngoài đường biên mặc định
Ví dụ

See the Pen MvrJYG by Cao Anh Nhất (@xeko995) on CodePen.dark

3. Thuộc tính resize

Thuộc tính resize cho phép người dùng thay đổi kích thước của một khối.

Các giá trị trong thuộc tính bao gồm

  • horizontal: cho phép thay đổi theo chiều rộng
  • vertical: cho phép thay đổi theo chiều cao
  • both: cho phép thay đổi cả chiều rộng và chiều cao

Ví dụ

See the Pen PKEWGW by Cao Anh Nhất (@xeko995) on CodePen.dark

 

 

Tác giả: Cao Anh Nhất

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here