Tham số chiều rộng và chiều cao CSS để đặt kích thước của các thành phần trang html

CSS sử dụng các đơn vị tuyệt đối và tương đối để định kích thước các phần tử khác nhau. Đơn vị tuyệt đối độc lập với thiết bị đầu ra, nhưng đơn vị tương đối xác định kích thước của một phần tử so với giá trị của kích thước khác.

Đơn vị tương đối

Các đơn vị tương đối thường được sử dụng để làm việc với văn bản. Trong bảng 1 liệt kê các đơn vị tương đối chính.

Đơn vị em là giá trị thay đổi, tùy thuộc vào kích thước phông chữ của phần tử hiện tại (kích thước được đặt thông qua thuộc tính kiểu phông chữ). Mỗi trình duyệt có kích thước văn bản tích hợp được sử dụng khi kích thước này không được chỉ định rõ ràng. Do đó, ban đầu 1em bằng cỡ chữ mặc định được cài đặt trên trình duyệt hoặc cỡ chữ phần tử cha. Ký hiệu phần trăm giống hệt với em, trong đó giá trị của 1em và 100% bằng nhau.

Đơn vị cũ được định nghĩa là chiều cao của ký tự "x" viết thường. ex phải tuân theo các quy tắc tương tự như em, cụ thể là nó bị ràng buộc với kích thước phông chữ mặc định của trình duyệt hoặc kích thước phông chữ của phần tử cha của nó.

Đơn vị ch bằng độ rộng của ký tự "0" đối với phần tử hiện tại và giống như em, phụ thuộc vào kích thước phông chữ.

Sự khác biệt giữa em và rem như sau. em phụ thuộc vào kích thước phông chữ của phần tử gốc và thay đổi theo nó, còn rem được gắn với phần tử gốc, tức là kích thước phông chữ được chỉ định cho phần tử html.

Ngoài ra còn có một nhóm đơn vị tương đối gắn liền với kích thước của khung nhìn trình duyệt. Trong bảng 2 hiển thị danh sách chúng kèm theo mô tả.

Đơn vị tuyệt đối

Đơn vị tuyệt đối là kích thước vật lý- inch, cm, milimét, điểm, picas và pixel. Đối với các thiết bị có dpi thấp (số pixel trên inch xác định mật độ pixel), liên kết là trên mỗi pixel. Trong trường hợp này, một inch bằng 96 pixel. Rõ ràng, inch thật sẽ không khớp với inch trên thiết bị như vậy. Trên các thiết bị có độ phân giải cao, inch thực bằng inch trên màn hình nên kích thước pixel được tính là 1/96 inch. Trong bảng 3 liệt kê các đơn vị tuyệt đối cơ bản.

Ví dụ

tiêu đề 30px

Cỡ chữ 1,5 em

Tiêu đề 24 điểm

Dịch văn bản sang phải 30 mm

Ghi chú

Khi cài đặt kích thước, hãy đảm bảo chỉ định đơn vị đo, ví dụ: chiều rộng: 30px. Nếu không, trình duyệt sẽ không thể hiển thị kết quả mong muốn vì nó không hiểu kích thước bạn yêu cầu. Đơn vị không được thêm vào chỉ khi giá trị 0(lề: 0).

Internet Explorer hỗ trợ đơn vị vm thay vì vmin.

Sự chỉ rõ

Mỗi thông số kỹ thuật đều trải qua nhiều giai đoạn phê duyệt.

• Khuyến nghị - Thông số kỹ thuật đã được W3C phê duyệt và được khuyến nghị làm tiêu chuẩn.
• Đề xuất ứng viên ( Khuyến nghị có thể ) - nhóm chịu trách nhiệm về tiêu chuẩn hài lòng vì đã đáp ứng được mục tiêu của mình nhưng cần có sự trợ giúp từ cộng đồng phát triển để thực hiện tiêu chuẩn.
• Khuyến nghị đề xuất Khuyến nghị được đề xuất) - ở giai đoạn này, tài liệu được gửi tới Hội đồng tư vấn của W3C để phê duyệt lần cuối.
• Bản dự thảo đang hoạt động - Một phiên bản hoàn thiện hơn của bản dự thảo đã được thảo luận và sửa đổi để cộng đồng xem xét.
• Bản thảo của người biên tập ( bản thảo biên tập) - phiên bản dự thảo của tiêu chuẩn sau khi các biên tập viên dự án thực hiện các thay đổi.
• Bản nháp ( Thông số kỹ thuật dự thảo) - phiên bản dự thảo đầu tiên của tiêu chuẩn.

chia thành những loại nguyên tố nào?

Thực tế là không phải tất cả các đoạn trên trang web đều là khối. Các phần tử thường được chia thành các phần tử khối và phần tử nội tuyến. Phần sau có thể dễ dàng viết trên một dòng và không cần viết thêm bất cứ điều gì. Ví dụ đơn giản phần tử nội tuyến- liên kết. Có thể có bao nhiêu liên kết tùy thích trên một dòng, miễn là chúng phù hợp với dòng đó.

Các phần tử khối có hành vi hoàn toàn khác nhau. Nếu không có thêm thao tác, họ sẽ không thể đứng thành một hàng. Một ví dụ về khối như vậy là một đoạn văn, được chỉ định bởi thẻ p. Vì vậy, tại sao tôi lại nói với bạn tất cả những điều này? Nói như vậy để bạn hiểu rằng kích thước chỉ cần được đặt cho các phần tử khối, đó là những gì chúng ta sẽ làm trong bài viết này.

Cơm. 1. Các thuộc tính cơ bản giúp thiết lập kích thước

Thuộc tính đơn giản cho kích thước

nhất tính chất đơn giản, có thể được sử dụng để ghi kích thước là chiều rộng và chiều cao. Chúng có nghĩa là chiều rộng và chiều cao tương ứng. Bạn cũng có thể thêm tiền tố min- và max- cho chúng. Trong trường hợp này, chiều rộng hoặc chiều cao tối thiểu và tối đa sẽ được đặt tương ứng.

Các giá trị có thể được viết bằng pixel hoặc phần trăm. Đôi khi đơn vị tương đối em (chiều cao phông chữ) cũng được sử dụng, nhưng thông thường nó được dùng để xác định kích thước của văn bản. Theo mặc định, tất cả các mắt lưới (chính khu nhà mẫu), trong đó kích thước được xác định theo tỷ lệ phần trăm, được gọi là cao su. Ngoài ra, ký hiệu phần trăm giúp dễ dàng điều chỉnh mẫu, điều này cũng rất quan trọng.

Kích thước tính bằng pixel

Cái gọi là giá trị tuyệt đối. Ví dụ: toàn bộ trang web phải được chứa trong vùng chứa rộng 1000 pixel. Khối này được tạo và chiều rộng được ghi vào nó.

#container( chiều rộng: 1000px; )

Nếu viết như thế này thì chiều rộng của vùng chứa sẽ không thay đổi trong bất kỳ trường hợp nào. Khi bạn thay đổi tỷ lệ hoặc thu nhỏ cửa sổ thì nó vẫn giữ nguyên. Kích thước của trang web sẽ không giảm và nếu cần, nó sẽ xuất hiện sọc ngang cuộn.

Đây được gọi là các mẫu cố định. Ngày nay, nhiều trang web vẫn hoạt động theo cách này. Ví dụ, mạng xã hội Liên hệ với. Hãy thử giảm kích thước cửa sổ trên máy tính của bạn và bạn sẽ thấy mẫu không thay đổi chút nào. Tất nhiên, VKontakte có phiên bản riêng dành cho máy tính bảng và điện thoại thông minh nên họ quyết định để lại một mẫu cố định.

Chưa hết, khả năng thích ứng của lưới trang web với các màn hình mới ngày nay có vai trò rất lớn, bởi vì lưu lượng truy cập di động phát triển. Vì điều này những năm trước Ngày càng thường xuyên hơn, vùng chứa chính cho khung trang web có chiều rộng không cố định. Ví dụ như thế này:

#container( chiều rộng tối đa: 1320px; )

Và điều đó có nghĩa là gì? Và thực tế là, nếu cần thiết, khối sẽ được giảm bớt. Nếu bạn thu nhỏ cửa sổ thì nó cũng sẽ co lại. Đồng thời, nếu độ phân giải màn hình cho phép thì chiều rộng sẽ chính xác là 1320 pixel. Bằng cách giảm cửa sổ bạn sẽ không nhìn thấy cuộn ngang.

Tuy nhiên, bạn cũng có thể đặt chiều rộng tối thiểu ở đây. Nếu thuộc tính này được ghi vào một khối, nó sẽ không hẹp hơn giá trị đã chỉ định. Ví dụ:

#container( chiều rộng tối thiểu: 600px; )

Nếu chiều rộng cửa sổ nhỏ hơn 600 pixel, khối sẽ ngừng thu nhỏ và thanh cuộn ngang tương tự sẽ xuất hiện.

Kích thước theo phần trăm

Việc đặt giá trị theo tỷ lệ phần trăm ngày càng trở nên phổ biến. Nếu sử dụng đúng cách, điều này có thể mang lại khả năng hiển thị trang web tuyệt vời trên các thiết bị khác nhau.

Ví dụ: bạn muốn đặt nó ở phía bên trái trang web của mình thanh bên, và bên phải là khu vực chứa nội dung chính, tại đây sẽ hiển thị nội dung chính thông tin văn bản. Ví dụ: một bài viết, danh mục sản phẩm hoặc chủ đề diễn đàn. Trước tiên, bạn cần xác định kích thước bạn muốn cung cấp cho các thùng chứa này.

#sidebar( float: left; width: 28%; ) #content( float: right; width: 62%; )

Kết quả là thanh bên sẽ nhận được 28% chiều rộng của phần tử gốc (và trong trường hợp của chúng tôi đây là vùng chứa chung) và khối chính - 62%. Tổng chiều rộng của chúng sẽ là 90%. Chúng tôi sẽ để lại 10 phần còn lại cho các lề, khung bên ngoài và bên trong, v.v.

Cơm. 2. Các khối cao su thay đổi kích thước khi cửa sổ trình duyệt bị thu nhỏ

Thụt lề ảnh hưởng đến kích thước khối như thế nào?

Khi bạn đặt chiều rộng của khối bằng thuộc tính chiều rộng, nó có thể không phải là giá trị cuối cùng. Thực tế là bằng cách này, chúng tôi chỉ xác định chiều rộng của phần chứa nội dung trực tiếp. Cần phải nhớ rằng trong phần đệm css tăng kích thước khối, giống như đường viền.

Hãy lấy một cột bên. Chúng tôi đã cho nó 28% toàn bộ chiều rộng của container. Nhưng để ngăn nội dung trong thanh bên dính vào các cạnh, nó cần được thêm một số phần đệm. Bạn cũng có thể muốn thêm đường viền vào cột bên.

#sidebar( đệm: 10px 20px; đường viền: 2px màu đen; )

Xin chào, hôm nay chúng ta sẽ xem xét một thành phần quan trọng của trang web như một khối và bài viết này được liên kết chặt chẽ với bài viết về thiết kế khối, trong đó chúng ta đã xem xét cách bạn có thể tạo cả vùng chứa khối và các thành phần tích hợp cho trang web của chúng tôi trên trang web. Sau khi nghiên cứu bài viết này, tôi chắc chắn rằng chúng ta sẽ hiểu rõ hơn nhiều về cách làm việc với các khối và đây sẽ là một bước rất quan trọng trong việc tạo trang web của riêng chúng ta.

Khối chiều cao và chiều rộng trong CSS.

Bây giờ chúng ta hãy xem xét các chức năng chính sẽ giúp chúng ta quản lý vẻ bề ngoài và vị trí của các khối trang web, sau đó chúng ta sẽ cần áp dụng tất cả kiến ​​​​thức này vào thực tế và chúng ta sẽ tạo một khung đơn giản cho trang web.

Chiều cao của một khối trong CSS được đặt bằng lệnh Height: auto|<высота в единицах измерения>|inherit và như bạn đã hiểu, chúng ta có thể đặt chiều cao của khối bằng lệnh tự động, chúng tôi đưa ra lệnh cho trình duyệt rằng chính nó có thể xác định kích thước của khối và do đó khối sẽ có kích thước như vậy phù hợp với tất cả các yếu tố và không còn nữa.

Lệnh kế thừa sẽ cho phép bạn mượn tham số từ phần tử cha và các giá trị này sẽ chỉ hiển thị nếu tham số đã được đặt cho phần tử cha. Nhưng thông thường, bạn cần đặt kích thước khối một cách cụ thể, chỉ cần chỉ định kích thước theo một trong các giá trị được chấp nhận (thường là các pixel).

Chúng ta cũng có thể đặt kích thước tương ứng với phần tử gốc và để làm được điều này, chúng ta cần sử dụng tỷ lệ phần trăm. Hãy xem điều này trông như thế nào trong thực tế.

Lệnh này cho trình duyệt biết rằng một thành phần cụ thể trên trang phải được đặt ở kích thước bằng 10% kích thước của khối chính.

Độ rộng của một khối trong CSS được đặt bằng tham số chiều rộng: auto|<ширина>|inherit tất cả các tham số đều giống nhau cho cả chiều cao và chiều rộng của khối và tôi nghĩ không có ích gì khi lặp lại nó. Tôi chỉ muốn nói là không cần thiết phải thiết lập cụ thể cả chiều cao và chiều rộng của khối, bạn có thể đặt, ví dụ chiều rộng và chiều cao sẽ tăng tùy theo nội dung, rất tiện lợi nếu bạn không biết nội dung nào sẽ có trên trang cụ thể.

Chiều rộng khối tối thiểu và tối đa.

Ngoài ra, đối với mỗi khối, chúng ta không thể đặt tham số cụ thể mà là mức tối thiểu và tham số tối đa cho bất kỳ khối nào trên trang web. Nhờ đó, bạn có thể lấp đầy các khối mà không sợ chúng vượt ra ngoài cửa sổ trình duyệt.

Để thiết lập điều này rất đơn giản, chúng ta cần thiết lập các tham số sau để đặt chiều rộng và chiều cao tối thiểu:

chiều rộng tối thiểu:<ширина>

chiều cao tối thiểu:<высота>

Và ở mức tối đa, cần có hai tham số:

chiều rộng tối đa:<ширина>
chiều cao tối đa:<высота>

Bây giờ chúng ta có thể đặt cả mức tối đa và kích cỡ nhỏ nhất cho một khối hoặc hoàn toàn cho toàn bộ trang web và điều này rất quan trọng đối với một trang web có thiết kế cao su, nếu sửa thì tham số này sẽ không hoạt động.

Tùy chọn vị trí float trong css.

Trong tất cả các ví dụ trước, nơi chúng tôi tạo các vùng chứa và các phần tử được đặt lần lượt theo thứ tự, nhưng điều này là không đủ để chúng tôi tạo ra một thiết kế, chúng tôi cần khả năng đặt các phần tử theo ý mình và thuộc tính sẽ giúp chúng tôi điều này nổi trong css và bây giờ chúng ta sẽ xem xét ứng dụng của tài sản này về thực hành.

Tham số float có thể nhận một số giá trị và bây giờ chúng ta sẽ tìm hiểu những tham số này là gì:

float: trái|phải|không|kế thừa

Bây giờ chúng ta hãy xem xét từng ví dụ riêng biệt.

Lệnh float: left có nghĩa là khối phải được căn chỉnh về bên trái và tất cả các phần tử khác sẽ di chuyển xung quanh nó về bên phải.

float:right hoàn toàn trái ngược với lệnh trước đó và theo đó, khối sẽ được căn chỉnh sang phải và tất cả các phần tử sẽ di chuyển xung quanh nó sang trái.

float:none là hành vi mặc định cho mỗi khối, đặt các khối lần lượt. Việc sử dụng tham số này hiện không còn phù hợp và nó rất hiếm khi được sử dụng và đơn giản là do mù chữ.

Xóa tham số trong css.

Rất thường xuyên, khi tạo một thiết kế trên các khối bằng lệnh float, bạn cần đưa ra lệnh cho một số khối để chúng không chạy xung quanh khối mà hoạt động như bình thường, được đặt bên dưới tất cả các khối khác. Vấn đề này trước đây đã được giải quyết bằng lệnh float:none khối mong muốn nhưng màn hình hiển thị trong mỗi trình duyệt có thể khác nhau và do đó trong những trường hợp như vậy, việc sử dụng lệnh clear sẽ hợp lý hơn nhiều và bây giờ chúng ta sẽ xem cách thực hiện điều này.

rõ ràng: trái|phải|cả hai|không|kế thừa

Lệnh có bốn tham số và bây giờ chúng ta sẽ tìm hiểu chính xác chức năng mà nó thực hiện với mỗi tham số.

Lệnh clear: left có nghĩa là phần tử được đặt bên dưới tất cả các phần tử có tham số float: left.

Lệnh clear:right đặt một khối bên dưới tất cả các phần tử có float: right.

Tham số clear:both đặt phần tử bên dưới tất cả các khối có cả tham số float: left và float: right.

clear:none là hành vi bình thường đối với một khối. Không nên chỉ định tham số này nếu các container nổi đã được đặt trước đó.

Chúng tôi áp dụng tất cả kiến ​​thức vào thực tế.

Vì vậy, chúng ta đã đi đến kết luận của bài viết, trong đó chúng ta cần xem cách chúng ta có thể áp dụng tất cả những điều này vào thực tế và điều đầu tiên chúng ta sẽ làm là tạo một khuôn khổ đơn giản cho trang web. Khung của chúng ta sẽ trông như thế này.

Như chúng ta có thể thấy, đối với wireframe, chúng ta sẽ cần tạo bốn khối DIV và đối với chúng, chúng ta sẽ cần áp dụng cả tham số kích thước và tham số vị trí.

Chúng tôi đã tạo bốn khối và bây giờ chúng tôi cần điền thông tin vào chúng và đặt nền cho mỗi khối để chúng tôi có thể biết khối nào nằm và ở đâu. Bạn có thể tìm hiểu về cách thiết lập nền. Và đây là loại mã chúng ta nên có.

Sau này, chúng ta cần vào tệp kiểu và viết ra tất cả các lệnh chúng ta cần. Các lệnh đều giống nhau cho tất cả các khối, chỉ mỗi khối có tham số riêng.

Tiêu đề (chiều rộng: 500px; chiều rộng khối
chiều cao: 100px; chiều cao khối
màu nền:#33CCFF;) màu khối

Nội dung (chiều rộng: 400px; chiều rộng khối
chiều cao: 400px; chiều cao khối
màu nền: #33FF33; khối màu
float: trái;) vị trí khối

Thanh bên (chiều rộng: 100px; chiều rộng khối
chiều cao: 400px; chiều cao khối
màu nền: #CCCCCC; khối màu
float:left;) vị trí khối

Footer(width:500px; chiều rộng khối
chiều cao: 100px; chiều cao khối
màu nền: #0000FF; khối màu
rõ ràng:cả hai;) vị trí khối tiêu chuẩn

Và sau khi viết tất cả các lệnh này, chúng ta sẽ có được một khung như vậy cho trang web.

Theo mặc định, các phần tử khối sử dụng băng thông tự động. Điều này có nghĩa là phần tử sẽ được kéo dài theo chiều ngang chính xác như nó vốn có không gian trông. Chiều cao mặc định của các phần tử khối được đặt tự động, tức là Trình duyệt kéo dài vùng nội dung theo chiều dọc để tất cả nội dung được hiển thị. Để đặt thứ nguyên tùy chỉnh cho vùng nội dung của phần tử, bạn có thể sử dụng thuộc tính chiều rộng và chiều cao.

Thuộc tính CSS chiều rộng cho phép bạn đặt độ rộng của vùng nội dung của phần tử và thuộc tính chiều cao chiều cao khu vực nội dung:

Lưu ý rằng các thuộc tính chiều rộng và chiều cao chỉ xác định kích thước của vùng nội dung để tính tổng chiều rộng phần tử khối, bạn cần thêm chiều rộng của vùng nội dung, phần đệm bên trái và bên phải cũng như chiều rộng của khung bên trái và bên phải. Điều tương tự cũng xảy ra với chiều cao tổng thể của phần tử, chỉ có điều tất cả các giá trị đều được tính theo chiều dọc:

Đối với đoạn này, chúng tôi sẽ chỉ đặt chiều rộng và chiều cao.

Đoạn này chứa, ngoài chiều rộng và chiều cao, phần đệm, đường viền và lề.

Ví dụ cho thấy rõ ràng rằng phần tử thứ hai chiếm nhiều không gian hơn hơn cái đầu tiên. Nếu chúng tôi tính toán bằng công thức của mình thì kích thước của đoạn đầu tiên là 150x100 pixel và kích thước của đoạn thứ hai là:

nghĩa là 180x130 pixel.

Tràn phần tử

Khi bạn đã xác định chiều rộng và chiều cao cho một phần tử, bạn nên chú ý đến một điểm quan trọng - nội dung nằm bên trong phần tử có thể vượt quá kích thước quy định khối. Trong trường hợp này, một số nội dung sẽ vượt ra ngoài ranh giới của phần tử; để tránh khoảnh khắc khó chịu này, bạn có thể sử dụng Thuộc tính CSS tràn ra. Thuộc tính tràn cho trình duyệt biết phải làm gì nếu nội dung của khối vượt quá kích thước của nó. Thuộc tính này có thể nhận một trong bốn giá trị:

• hiển thị - giá trị mặc định được trình duyệt sử dụng. Việc đặt giá trị này sẽ có tác dụng tương tự như việc không đặt thuộc tính tràn.
• cuộn - thêm thanh cuộn dọc và ngang vào một phần tử.
• tự động - thêm thanh cuộn nếu cần thiết.
• ẩn - ẩn một phần nội dung vượt ra ngoài ranh giới của phần tử khối.