CSS thay đổi kích thước đường viền

Thuộc tính CSS này cho phép người dùng kiểm soát việc thay đổi kích thước của phần tử chỉ bằng cách nhấp hoặc kéo góc dưới cùng bên phải của phần tử

Thuộc tính CSS này được sử dụng để xác định cách người dùng có thể thay đổi kích thước một phần tử. Nó không áp dụng trên các phần tử khối hoặc nội tuyến nơi tràn được đặt thành hiển thị. Vì vậy, để kiểm soát việc thay đổi kích thước của một phần tử, chúng ta phải đặt tràn khác với hiển thị như (tràn. ẩn hoặc tràn. cuộn)

Có thể thay đổi kích thước các phần tử theo hướng ngang hoặc dọc hoặc theo cả hai hướng. Sau khi áp dụng thuộc tính thay đổi kích thước cho một phần tử, chúng ta có thể thấy một núm hình tam giác nhỏ ở góc dưới cùng bên phải của phần tử. Người dùng có thể kéo núm để phóng to vùng văn bản theo chiều dọc, chiều ngang hoặc theo cả hai hướng

Đôi khi thay đổi kích thước phần tử có thể ảnh hưởng đến toàn bộ bố cục theo cách không mong muốn. Vì vậy, tùy thuộc vào bố cục, đôi khi tốt hơn là không cho phép thay đổi kích thước phần tử hoặc hạn chế khả năng thay đổi kích thước chỉ theo một hướng

cú pháp

Giá trị tài sản

Các giá trị thuộc tính của thuộc tính CSS này được định nghĩa như sau

không ai. Đó là giá trị mặc định của thuộc tính này, không cho phép thay đổi kích thước phần tử

nằm ngang. Giá trị này cho phép người dùng thay đổi kích thước chiều rộng của phần tử. Nó thay đổi kích thước phần tử theo hướng nằm ngang. Có một cơ chế ngang một chiều để kiểm soát chiều rộng của một phần tử

thẳng đứng. Nó cho phép người dùng thay đổi kích thước chiều cao của một phần tử. Nó thay đổi kích thước phần tử theo hướng dọc. Có một cơ chế dọc một chiều để kiểm soát chiều cao của một phần tử

cả hai. Nó cho phép người dùng thay đổi kích thước chiều rộng và chiều cao của một phần tử. Nó thay đổi kích thước phần tử theo cả hướng ngang và dọc

ban đầu. Nó đặt thuộc tính thành giá trị mặc định

thừa kế. Nó kế thừa thuộc tính từ phần tử cha của nó

Hãy hiểu CSS này bằng cách sử dụng một số ví dụ

Ví dụ. Sử dụng giá trị ngang

Giá trị này có khả năng thay đổi kích thước một chiều cho phép người dùng điều chỉnh độ rộng của phần tử

Kiểm tra nó ngay bây giờ

đầu ra

Ở kết quả trên, chúng ta có thể thấy việc thay đổi kích thước của phần tử div theo hướng nằm ngang. Chúng ta có thể thấy núm hình tam giác ở góc dưới cùng bên phải của phần tử. Để xem hiệu ứng, chúng ta phải nhấp và kéo núm

Ví dụ. Sử dụng giá trị dọc

Giống như giá trị ngang, nó cũng có khả năng thay đổi kích thước một chiều nhưng cho phép người dùng điều chỉnh chiều cao của phần tử

Kiểm tra nó ngay bây giờ

đầu ra

Trong đầu ra ở trên, chúng ta có thể thấy việc thay đổi kích thước của phần tử div theo hướng dọc. Chúng ta có thể thấy một núm hình tam giác ở góc dưới cùng bên phải của phần tử. Để xem hiệu ứng, chúng ta phải nhấp và kéo núm

Ví dụ. Sử dụng cả hai giá trị

Giá trị này có khả năng thay đổi kích thước hai chiều cho phép người dùng điều chỉnh cả chiều rộng và chiều cao của phần tử

Các ví dụ này cho thấy cách áp dụng thành phần Có thể thay đổi kích thước nổi (mặc định) và được ghim vào thành phần tiêu chuẩn

Lưu ý rằng js không được thu nhỏ để có thể đọc được. Xem cơ bản. js cho mã nguồn đầy đủ

Ví dụ cơ bản
Đây là ví dụ cơ bản khi bạn nhận được. Để thay đổi kích thước hộp, hãy đặt chuột của bạn ở bất kỳ đâu gần cạnh dưới cùng, bên phải hoặc đường viền bên phải của hộp. Ví dụ này sử dụng tay cầm "nổi" mặc định.

var basic = new Ext.Resizable('basic', {
        width: 200,
        height: 100,
        minWidth:100,
        minHeight:50
});

---

Các phần tử được bao bọc
Một số phần tử như hình ảnh và vùng văn bản không cho phép các phần tử con. Trước đây, bạn phải bọc các thành phần này và thiết lập một con Có thể thay đổi kích thước với thay đổi kích thước. kể từ yui-ext. 33 RC2, Resizable sẽ bọc phần tử, tính toán các điều chỉnh cho đường viền/phần đệm và bù đắp phần điều khiển cho bạn. Tất cả những gì bạn phải làm là đặt "quấn. thật". Cách chỉ định thủ công "resizeChild" vẫn được hỗ trợ.

Bộ điều khiển được ghim
Lưu ý ví dụ này có bộ điều khiển thay đổi kích thước "được ghim". Điều này được thực hiện bằng cách thiết lập "ghim. thật".

Định cỡ động
Nếu không thích thay đổi kích thước proxy, bạn cũng có thể bật định cỡ động. Chỉ cần đặt "động. thật".

Đây là một vùng văn bản được bao bọc, có các chốt điều khiển được ghim và đã bật kích thước động

Và hãy xem mã này đơn giản như thế nào, ngay cả bà tôi cũng có thể viết nó

var dwrapped = new Ext.Resizable('dwrapped', {
    wrap:true,
    pinned:true,
    width:450,
    height:150,
    minWidth:200,
    minHeight: 50,
    dynamic: true
});

---

Giữ nguyên tỷ lệ
Đối với một số nội dung như hình ảnh, có thể bạn sẽ muốn giữ nguyên tỷ lệ giữa chiều rộng và chiều cao. Chỉ cần đặt tỷ lệ bảo toàn. thật.

var wrapped = new Ext.Resizable('wrapped', {
    wrap:true,
    pinned:true,
    minWidth:50,
    minHeight: 50,
    preserveRatio: true
});

---

Bộ điều khiển trong suốt
Nếu bạn chỉ muốn phần tử có thể thay đổi kích thước mà không cần bất kỳ bộ điều khiển ưa thích nào, hãy đặt trong suốt thành true.

var transparent = new Ext.Resizable('transparent', {
    wrap:true,
    minWidth:50,
    minHeight: 50,
    preserveRatio: true,
    transparent:true
});

---

Xử lý có thể tùy chỉnh
Các phần tử có thể thay đổi kích thước có thể thay đổi kích thước theo 8 cách. Thay đổi kích thước 8 cách cho phần tử được định vị tĩnh sẽ khiến phần tử được định vị tương đối và đưa ra khỏi luồng tài liệu. Để thay đổi kích thước điều chỉnh x và y của phần tử, phần tử phải được định vị tuyệt đối. Bạn cũng có thể kiểm soát các tay cầm nào được hiển thị bằng cách đặt thuộc tính "tay cầm". Các tay cầm được tạo kiểu bằng CSS để chúng có thể được tùy chỉnh theo cách bạn muốn.

Hình ảnh này có 8 cách thay đổi kích thước, bộ xử lý tùy chỉnh, có thể kéo được và tỷ lệ giữ nguyên 8 cách (điều đó không dễ dàng. ).
Nhấp đúp vào bất kỳ đâu trên hình ảnh để ẩn hình ảnh đó khi bạn hoàn tất.

var custom = new Ext.Resizable('custom', {
    wrap:true,
    pinned:true,
    minWidth:50,
    minHeight: 50,
    preserveRatio: true,
    dynamic:true,
    handles: 'all', // shorthand for 'n s e w ne nw se sw'
    draggable:true
});

---

Chụp nhanh
Có thể thay đổi kích thước cũng hỗ trợ chụp nhanh cơ bản theo từng bước.

var snap = new Ext.Resizable('snap', {
    pinned:true,
    width:250,
    height:100,
    handles: 'e',
    widthIncrement:50,
    minWidth: 50,
    dynamic: true
});

Cảnh báo. Snapping vàserveRatio xung đột và không thể được sử dụng cùng nhau

---

Chuyển tiếp động
Các thao tác thay đổi kích thước cũng có thể được tạo hiệu ứng động. Hoạt ảnh hỗ trợ nới lỏng và thời lượng có thể định cấu hình. Đây là một bản sao rất cơ bản của phần tử đầu tiên, nhưng đã bật hoạt ảnh. Tôi đã sử dụng tính năng nới lỏng "backIn" và làm cho nó chậm hơn một chút so với mặc định.

var animated = new Ext.Resizable('animated', {
    width: 200,
    height: 100,
    minWidth:100,
    minHeight:50,
    animate:true,
    easing: 'backIn',
    duration:.6
});

Cảnh báo. vì những lý do hiển nhiên, không thể sử dụng đồng thời thay đổi kích thước hoạt hình và động

Thuộc tính CSS nào thay đổi kích thước đường viền?

Làm cách nào để thay đổi kích thước div trong CSS?

Cú pháp cho kích thước của đường viền trong CSS là gì?

Làm cách nào để thay đổi kích thước trong CSS?