Thay đổi kích thước - Thủ thuật CSS

Anonim

Các resizekiểm soát tài sản nếu và làm thế nào một phần tử có thể được thay đổi kích cỡ bởi người sử dụng bằng cách nhấn và kéo góc dưới bên phải của phần tử.

.module ( resize: both; )

Điều cực kỳ quan trọng cần biết: resize không làm gì trừ khi thuộc overflowtính được đặt thành thứ khác visible, đó là giá trị ban đầu của nó cho hầu hết các phần tử.

Cũng cần biết rằng Firefox sẽ cho phép bạn thay đổi kích thước một phần tử nhỏ hơn kích thước ban đầu của nó. Các trình duyệt Webkit sẽ không cho phép bạn thay đổi kích thước một phần tử để làm cho nó nhỏ hơn, chỉ lớn hơn (theo cả hai chiều).

Giá trị

  • none: phần tử không thể thay đổi kích thước. Đây là giá trị ban đầu cho hầu hết các phần tử. Phần textareatử là ngoại lệ phổ biến nhất - trong nhiều trình duyệt, resizegiá trị mặc định của nó là both.
  • both: người dùng có thể thay đổi kích thước chiều cao và / hoặc chiều rộng của phần tử.
  • horizontal: người dùng có thể thay đổi kích thước phần tử theo chiều ngang (tăng chiều rộng).
  • vertical: người dùng có thể thay đổi kích thước phần tử theo chiều dọc (tăng chiều cao).
  • inherit: phần tử kế thừa giá trị thay đổi kích thước của phần tử cha của nó.

Khi một phần tử có thể thay đổi kích thước, nó có một tay cầm giao diện người dùng nhỏ ở góc dưới. Tay cầm xuất hiện ở bên phải trên các phần tử trang khi trang directionđược đặt thành ltr(từ trái sang phải) và ở bên trái trên các trang rtl(từ phải sang trái).

Một phần tử không có tay cầm (phía trước) và có tay cầm (phía sau)

Bản giới thiệu

Phần tử có thể thay đổi kích thước trong bản trình diễn này là một đoạn văn. Nhấp vào các nút để thử các resizegiá trị khác nhau .

Xem Demo thay đổi kích thước bút bằng CSS-Tricks (@ css-trick) trên CodePen.

Có liên quan

  • overflow
  • direction

Thêm thông tin

  • Thông số kỹ thuật
  • Tài liệu Mozilla
  • Bài báo của David Walsh
  • Thủ thuật Textarea

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
4 4* Không 79 4

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
88 85 81 Không