Vì vậy, một trong những điều bạn có thể nhận thấy khi bạn đã trải qua các
mã khác là đôi khi khi bạn lộn xộn với chiều cao và chiều rộng của một phần tử.
Bạn tìm ra rằng nó không còn đủ lớn để giữ tất cả các văn bản mà bạn
muốn hiển thị.
Vì vậy, bạn có thể làm gì khi nội dung không phù hợp lâu hơn
bên trong hộp mà bạn đã thực hiện với chiều cao và chiều rộng của bạn.
Vâng, bạn có thể sử dụng một tràn tài sản để xác định cách mọi người sẽ có thể
truy cập nội dung đó, hoặc nếu họ thậm chí có thể truy cập nó ở tất cả.
Bốn giá trị cho tràn,
bao gồm có thể nhìn thấy, mà về cơ bản có nghĩa là nếu bạn đã vẽ một hộp.
Và có một loạt các văn bản bên trong nó,
văn bản thực sự sẽ đi ra ngoài hộp.
Vì vậy, không có vấn đề gì, nội dung có thể nhìn thấy ngay cả khi nó đi ra ngoài các dòng.
Hidden làm khá nhiều ngược lại.
Nó nói, [SOUND] nếu bạn có thứ gì đó bên trong cái hộp này và nó quá lớn,
nó sẽ biến mất.
Anh không thể nhìn thấy nó.
Bây giờ đây không phải là một ý tưởng tuyệt vời, bởi vì nó sẽ gây ra vấn đề
nếu người dùng tăng kích thước phông chữ trên trình duyệt của họ.
Vì vậy, nếu bạn đã làm một số loại hộp 600 x 800 pixel,
và bạn nghĩ, ồ điều này sẽ rất tuyệt, không có vấn đề gì.
Bất cứ ai cũng có thể đọc được điều này.
Điều gì sẽ xảy ra nếu ai đó đi vào và tăng kích thước phông chữ?
Hộp của bạn không lớn hơn bất kỳ, nhưng văn bản có, vì vậy
họ có thể không nhìn thấy nội dung.
Vì vậy, một lựa chọn thứ ba là để cung cấp cho cuộn tràn.
Và điều này sẽ làm là nó sẽ thực sự đưa ra một
thanh cuộn ngang và dọc cho phần tử.
Ngay cả khi nó chỉ là một đoạn văn, tất cả đột nhiên đoạn văn của bạn có một thanh cuộn để mọi
người có thể nhìn thấy tất cả mọi thứ trong đó.
Giá trị cuối cùng là tự động, và những gì nó làm là nó nói, oh,
tôi sẽ chỉ thêm thanh cuộn khi cần thiết.
Tùy thuộc vào cách người xem trang web ngay bây giờ.
Tôi sẽ đi trước và
liệt kê một số tài nguyên để cho bạn thấy một số ví dụ về cách tràn trông.
Nhưng ngay bây giờ, chúng ta sẽ tiếp tục và tiếp tục tiếp tục.
Bởi vì những gì tôi muốn chia sẻ với các bạn là ý tưởng về các giá trị hiển thị khác.
Một lần nữa các trình duyệt luôn thay đổi.
HTML5 và các phiên bản tương lai luôn thay đổi và
họ đang cố gắng thêm hỗ trợ mới.
Vấn đề là khi bạn nhìn thấy những
công cụ mới tuyệt vời này, chúng không phải lúc nào cũng hoạt động trên mọi trình duyệt.
Vì vậy, nội tuyến, khối nội tuyến, khối và không có sẽ làm việc ở khắp mọi nơi.
Nhưng đây là một vài thứ nữa đang dần bắt đầu đạt được sự chấp nhận.
Và đó là bàn, lưới điện và flexbox.
Đối với lưới điện và flexbox, tôi sẽ để nó cho bạn loại chơi với nó.
Nhưng tôi đã muốn cho bạn thấy một ví dụ về nơi mà rất nhiều sinh viên của tôi thấy
màn hình bảng thực sự hữu ích.
Làm thế nào một bảng hiển thị hoạt động là bạn không tạo một bảng thực tế với
mã HTML của bạn, cũng không có bảng thẻ.
Nhưng bạn đang nói với trình duyệt của bạn rằng bạn muốn cấu trúc nó như thể nó là một bảng.
Vì vậy, bạn sẽ thực hiện bất kỳ loại hiển thị phần tử chứa: bảng.
Và sau đó bất cứ điều gì mà bạn muốn xếp hàng trong các cột đẹp,
bạn sẽ sử dụng hiển thị: table-cell.
Điều này nghe có vẻ rất khó hiểu vì vậy
tôi muốn đảm bảo rằng tôi đã đưa ra một ví dụ để trải qua với tôi.
Vì vậy, tôi có ở đây một số mã mà về cơ bản chỉ
là một div, một vài divs với một số đoạn văn trong đó.
Và điều tôi muốn làm là tôi muốn đảm bảo rằng họ không có
tất cả cùng một nội dung.
Như bạn có thể thấy, mỗi divs bây giờ là bên cạnh nhau bởi vì chúng tôi đã nói với nó rằng
chúng tôi không muốn họ ở bên dưới nhau.
Nhưng điều này thực sự không phải là những gì bạn mong đợi cho nó trông như thế.
Vì vậy, chúng ta hãy tiếp tục và thử thêm phao bên trái.
Cứu lấy, tôi sẽ đi tới đây và làm mới.
Và bạn có thể thấy, nó trông khá hơn một chút.
Vì vậy, điều này là tuyệt vời bởi vì chúng tôi muốn mọi thứ được bên cạnh nhau.
Nhưng những gì tôi sẽ làm bây giờ là tôi sẽ cho các bạn thấy một thứ không thành
công.
Và đó là ý tưởng khi tôi thay đổi kích thước nó.
Bây giờ bạn có thể thấy ý tưởng này về việc tràn có thể thực sự quan trọng bởi vì
bây giờ mọi thứ đang đi ra ngoài divs mình.
Thêm vào đó, tôi thực sự không có bất kỳ loại lề nào giữa chúng.
Vì vậy, chúng ta hãy tiếp tục và thêm tràn, Ẩn,
hoặc cuộn, chỉ để cho bạn thấy những gì tôi đã nói về ở đó trong một giây.
Tôi sẽ tiếp tục làm mới nó.
Và bây giờ bạn có thể thấy rằng tất cả mọi thứ được chứa trong hộp nội dung, và
tôi thực sự có thể vào đây và tôi có thể cuộn từng cái trong số này.
Tôi thực sự không phải là một fan hâm mộ lớn của điều này,
bởi vì tôi không thích rằng mọi người sẽ cần phải biết rằng họ có thể di chuyển.
Vì vậy, chúng tôi sẽ thử một cái gì đó mới ở đây, thay vào đó những gì tôi sẽ làm là thiết lập
chiều rộng 30%, và tôi sẽ đi trước và sử dụng khối nội tuyến.
Và chúng ta hãy xem cái này trông như thế nào.
Tôi cần phải nhớ, tôi đang sử dụng một bảng phong cách mới, vì vậy tôi cần phải đi vào và
thay đổi HTML của tôi vì vậy tôi đang sử dụng bảng phong cách đó.
Số lần khi tôi đã đưa ra những ví dụ này cho bạn, nơi tôi quên
thay đổi bảng phong cách, hoặc tôi quên và đặt tên nó sai là thực sự xấu hổ.
Vì vậy, tôi hy vọng các bạn sẽ tránh những vấn đề tương tự như tôi đã gặp.
Ở đây tôi sẽ làm mới nó.
Bạn có thể thấy đây không phải là cái nhìn mà chúng tôi đang hy vọng.
Nó thay đổi kích thước, nhưng nó chỉ không làm những gì chúng ta muốn bởi vì mỗi người có
chiều cao riêng của nó bởi vì chúng tôi thực sự muốn nó chỉ phù hợp với điều đó.
Đây là nơi mà tế bào bảng đi vào.
Tôi sẽ thay đổi màn hình của tôi từ khối nội tuyến sang ô bảng.
Và một lần, khi tôi đi làm mới,
tôi sẽ thực sự biết tại sao điều này không hiệu quả.
Nhưng tôi muốn cho bạn thấy, khi tôi nhấn làm mới nó thực sự ổn ngay
tại đây bởi vì nó đã làm cho nó để tất cả hoạt động ra.
Bây giờ tùy thuộc vào trình duyệt bạn đang sử dụng, điều này có thể không hoạt động.
Bởi vì những gì bạn thực sự muốn nói là, nếu tôi sẽ tiếp tục
tạo ra tế bào bàn được sử dụng này, đừng quên đi vào cơ thể bạn và nói màn hình.
Được rồi và tôi sẽ làm mới và nó sẽ trông giống nhau,
nó chỉ là một phong cách mã hóa tốt hơn.
Bây giờ, tôi sẽ cố gắng đặt rất nhiều ví dụ về mã hóa ở đây,
trong khóa học CSS này, vì vậy bạn có thể chơi với nó.
Nhưng, tôi không thể nhấn mạnh đủ điều đó, đôi khi nó sẽ không hoạt động chính xác như nhau
cho bạn, bởi vì bạn có thể đang sử dụng một trình duyệt khác.
Bạn có thể đang sử dụng cùng một trình duyệt, nhưng một phiên bản khác.
Điều quan trọng nhất là bạn có thể vào đó,
và tiếp tục thử những giá trị mới này, nhìn thấy những gì xảy ra và chơi đùa với nó.
Khi nói đến thời gian cho dự án cuối cùng của bạn, đó là khi phải thực sự cụ thể
về việc đảm bảo rằng mọi thứ trông tốt trên mọi trình duyệt.
Điều cuối cùng tôi muốn đề cập đến rất nhanh là ý tưởng về tầm nhìn này.
Và nó xác định có hay không một phần tử sẽ được nhìn thấy bởi một người dùng.
Bây giờ chúng tôi đã nói về điều này trước đó khi tôi nói về hiển thị không có
gì nhưng những gì xảy ra trên tầm nhìn là bạn thực sự có thể thấy rằng không gian còn lại cho nó.
Chẳng có gì ở đó cả.
Vì vậy, khi bạn sử dụng khả năng hiển thị, các tùy chọn sẽ hiển thị, ẩn hoặc
thu gọn nếu bạn đang sử dụng bảng.
Nếu bạn thấy điều này và bạn đang tự hỏi sự khác biệt giữa hiển thị và
khả năng hiển thị là gì.
Chỉ cần nhớ rằng với việc hiển thị không có
trình duyệt hoạt động như thể nó thậm chí không có ở đó.
Anh không thấy gì cả.
Với khả năng hiển thị ẩn, trình duyệt sẽ rời khỏi không gian
mà phần tử đó sẽ mất, nó chỉ không hiển thị nó.
Vì vậy, cuối cùng, chúng ta hãy đi trước và xem xét.
Hiển thị chỉ là một công cụ của nhiều chúng tôi sẽ sử dụng để
định vị các yếu tố trên trang của bạn.
Thiết kế sớm, quyết định những gì bạn muốn trang của bạn trông như thế nào trước khi bạn bắt đầu mã hóa,
sẽ làm cho mọi thứ dễ dàng hơn.
Đừng lập trình suy nghĩ tôi muốn sử dụng thiết kế đúng phao, và sau đó quyết định oh,
tôi sẽ phải sử dụng phao ngay tại đây.
Sử dụng tất cả các công cụ khác nhau chúng tôi có,
chẳng hạn như kiểm tra yếu tố, để xem các tùy chọn khác nhau của bạn.
Và nó sẽ làm cho cuộc sống mã hóa của bạn dễ dàng hơn nhiều.
Chúng tôi muốn tránh lưu làm mới, lưu làm mới.
Thay vào đó, sử dụng những công cụ đó và
bạn sẽ thấy rằng bạn đang đưa ra quyết định thực sự tốt trong thiết kế và mã của bạn.
Cảm ơn.