Xin chào, hôm nay chúng ta sẽ nói về hiển thị và hiển thị trên trang web của bạn.
Bây giờ khi đến lúc tạo trang của bạn, một lần nữa và một lần nữa tôi sẽ nói với
bạn rằng đặt ra nơi bạn muốn mọi thứ là chìa khóa cho một trang thực sự hiệu quả.
Và một trong những điều bạn cần nhớ là mỗi yếu tố chúng ta nhìn vào
cơ bản là một hộp.
Và mô hình hộp là thứ chúng ta sẽ đề cập trong một bài giảng trong tương lai.
Nhưng trước khi chúng ta biết chi tiết cụ thể, tôi chỉ muốn nói về một số chi tiết.
Vì cách hiển thị trên phần tử hiển thị của bạn hoạt động ảnh hưởng đến tất cả các
phần tử lân cận trên trang của bạn.
Vì vậy, trước khi chúng ta bắt đầu, tôi chỉ muốn nhắc nhở bạn tất cả các yếu tố trên trang của bạn là một hộp.
Cứ nghĩ theo cách đó.
Và hiển thị là cách bạn có thể quyết định xem các hộp có nên nằm cạnh nhau hay không,
bên dưới nhau, và những thứ khác nhau như thế.
Vì vậy, khi chúng ta nói về màn hình hiển thị,
có một số giá trị phổ biến mà hầu hết mọi người sử dụng hoặc
chúng chỉ là một mặc định, vì vậy bạn đã sử dụng nó mà không hề biết nó.
Các yếu tố nội tuyến sẽ ngồi cạnh các yếu tố khác, chúng
chỉ chiếm đủ chiều rộng và chiều cao và không còn nữa, khi bạn đặt chúng lên trang.
Vì vậy, tôi nghĩ chúng như là những đứa trẻ tốt của tôi trong các yếu tố xe tải nhỏ.
Sẽ tốt nếu tôi muốn đặt ba đứa trẻ vào ghế sau.
Họ sẽ không khuỷu tay nhau đâu, họ vẫn ổn thôi.
Họ sẽ hòa hợp với nhau.
Loại hiển thị khác là khối.
Và những gì khối làm là nó buộc một ngắt dòng giữa các yếu tố của bạn.
Vì vậy, một lần nữa, với ví dụ của
tôi, tôi có một đứa trẻ thực sự không thể ngồi cạnh bất cứ ai khác.
Tôi phải đặt chúng vào hàng của họ.
Mặc dù cô ấy thực sự nhỏ bé và cô ấy không chiếm nhiều không gian như vậy,
cô ấy có cả một hàng với chính mình khi chúng tôi đang lái xe.
Những gì tốt đẹp về các yếu tố khối là,
trong khi chúng chiếm tất cả các chiều rộng ngang và chỉ đủ chiều cao,
bạn có thể đi vào và bạn có thể thiết lập một chiều cao và chiều rộng trên các yếu tố đó.
Vì vậy, mặc dù nó là khối, và
bạn đã dành toàn bộ chiều rộng của trang, bạn có thể nói, nhưng
tôi thực sự chỉ muốn nó là 40 pixel, hoặc một nửa trang, hoặc một cái gì đó tương tự.
Vì vậy, với nội tuyến, nó chỉ chiếm đủ không gian, và bạn không thể thay đổi điều đó.
Anh không cần phải nói, tôi muốn nó lớn hơn hoặc nhỏ hơn.
Nếu nó là nội tuyến, đó là tất cả những gì bạn nhận được.
Với khối bạn có một chút linh hoạt hơn, nhưng
bạn có vấn đề mà bạn đang đặt rất nhiều không gian.
Vì vậy, tất nhiên,
những gì chúng tôi nghĩ ra là ý tưởng về một cái gì đó tốt nhất của cả hai.
Và đây là khối nội tuyến.
Các yếu tố có hiển thị nội tuyến khối sẽ giống như nội tuyến và
chúng có thể bên cạnh nhau, nhưng chúng cũng sẽ chấp nhận chiều cao và chiều rộng.
Vì vậy, nếu bạn có hai thứ muốn ở bên cạnh nhau, nhưng
bạn muốn cho họ nhiều chỗ, và ngay bây giờ họ đang ở trong dòng.
Vâng, tiếp tục, thay đổi nó thành khối nội tuyến, và
sau đó bạn có thể cho nó một chiều cao và chiều rộng.
Và nếu bạn có một cái gì đó mà là khối và
bạn muốn hai trong số họ bên cạnh mỗi, một lần nữa, không có vấn đề.
Thay đổi chúng thành khối nội tuyến và bạn có thể đặt chiều rộng và chiều cao.
Thứ tư mà chúng tôi không thực sự sử dụng nhiều là ý tưởng không hiển thị.
Và những gì xảy ra ở đây là nếu bạn có một phần tử trên trang của bạn và
bạn cung cấp cho nó hiển thị không có, nó như thể trình duyệt hoàn toàn bỏ qua rằng nó tồn tại.
Nó như thể nó nhấc nó lên và lấy nó ra khỏi trang.
Vì vậy, bốn, nội tuyến, khối nội tuyến, khối nội tuyến và
không có là những cái mà chúng ta thực sự sẽ bắt đầu chơi ngay từ đầu.
Vì vậy, những gì tôi có ngay đây chỉ là một tập tin đơn giản mà sẽ có
ba yếu tố span, ba yếu tố div và ba yếu tố đoạn.
Nếu bạn nhớ, các yếu tố span là nội tuyến, vì vậy
chúng sẽ chỉ chiếm nhiều không gian như họ cần.
Nhưng các divs và các đoạn văn, chúng là khối, nên
chúng sẽ chiếm nhiều không gian hơn.
Ở phía bên kia, những gì tôi đã làm là tôi đã thêm một chút kiểu dáng,
mà có thể hoặc có thể không có ý nghĩa khi chúng ta lần đầu tiên nói về nó, nhưng
tôi đã cho mỗi nhịp của tôi một chiều cao và chiều rộng.
Về cơ bản, tất cả các yếu tố của tôi, chiều cao và chiều rộng và màu nền khác nhau.
Vì vậy, nếu chúng ta nhìn vào nó ngay bây giờ.
Bạn sẽ thấy rằng tôi đã làm cho tất cả các nhịp của tôi màu xanh, tất cả các divs của
tôi màu xanh, và tất cả các đoạn của tôi một loại màu tím hồng.
Và mỗi cái đặt ra chính xác theo mặc định như thế nào nó sẽ đi.
Lý do các divs lớn như họ đang có và
các đoạn văn lớn như họ là, một lần nữa chúng tôi đặt điều đó trong bảng phong cách của chúng tôi.
Bạn có thể thấy chiều cao và chiều rộng của tôi.
Nếu tôi không bao gồm những mặc định, các divs và
đoạn văn sẽ chiếm toàn bộ chiều rộng của màn hình, và
họ sẽ thực sự nhỏ bởi vì họ sẽ chỉ cần đủ không gian để có văn bản đó.
Vì vậy, chúng ta hãy tiếp tục và chơi với điều này.
Thông thường, tôi sẽ đi vào tờ phong cách của tôi và tôi sẽ
đặt những thứ khác nhau vào, thử những màn hình khác nhau và những thứ khác nhau như thế.
Nhưng, tôi hy vọng nó sẽ rõ ràng hơn cho
anh nếu thay vào đó, tôi làm điều này cùng một lúc.
Vì vậy, bạn có thể làm theo cùng với tôi với những gì kiểm tra yếu tố, hoặc bạn
có thể đi trước và thay đổi mã trong tập tin của bạn, lưu nó, làm mới, lưu nó, làm mới.
Vì vậy, tôi đã kiểm tra yếu tố ở đây bằng cách nhấp chuột phải, và
những gì tôi sẽ làm bây giờ là tôi sẽ nhấp chuột phải vào một trong những yếu tố span.
Kiểm tra Element và nó bật lên cho tôi.
Bất kỳ yếu tố nào trên trang của
bạn, bạn có thể chơi với, bạn có thể chơi với chỉ yếu tố cụ thể mà bạn đang
chọc vào ngay đó hoặc tôi có thể nói rằng tôi muốn chơi với tất cả các nhịp.
Vậy hãy nhìn xuống đây.
Ngay bây giờ, tôi có một chiều cao và chiều rộng cho mỗi một trong những yếu tố span của tôi.
Nhưng chúng thực sự không to lắm.
Vậy chúng ta có thể thay đổi điều đó như thế nào?
Nếu có thứ gì đó trong dòng, nhưng anh muốn cho nó một chiều cao và chiều rộng,
chúng ta sẽ xuống để trưng bày, và tôi sẽ đến đây.
Và tôi sẽ thử chặn nội tuyến.
Bùm, ngay lập tức nhịp của tôi đã chiếm lấy những tài sản đó.
Vì vậy, trước khi họ ở trong dòng, họ nhỏ.
Khi họ là khối nội tuyến, tôi có thể định hình chúng thực sự độc đáo.
Và nếu tôi đang thay đổi chúng để chỉ chặn, Bạn có thể nhìn thấy bây giờ họ đang
ở trên đầu trang của nhau bởi vì các yếu tố khối không thích được bên cạnh nhau.
Tài sản cuối cùng tôi sẽ cho các bạn thấy ngay đây là ý tưởng không có ý tưởng nào cả.
Khi bạn không có, nó như thể các nhịp thậm chí không tồn tại.
Bạn đã không tiết kiệm bất kỳ không gian cho họ,
nó không phải là nếu bạn thậm chí sẽ biết nhìn vào trang mà họ đã từng ở đó.
Vì vậy, một điều thú vị để làm và bạn có thể sử dụng nó sau này nếu bạn muốn mọi thứ
xuất hiện một số lần chứ không phải những thứ khác nhưng bạn không muốn để lại một khoảng trắng lớn.
Vậy, cứ tiếp tục và dành một giây và
tôi sẽ bấm vào một vài thứ khác.
Vì vậy, ví dụ divs của tôi, Tôi có thể đi và tôi có thể nói, bạn biết gì, Tôi muốn làm cho chỉ
này một div, Tôi muốn đi trước và làm cho nó inline-block, và chúng ta hãy xem những gì xảy ra.
Điều kỳ quặc là tôi đã thay đổi nó và không có gì thực sự xảy ra và
tôi đang tự hỏi liệu anh có biết tại sao không.
Khi bạn có khối nội tuyến, bạn đang nói oh, tiếp tục và
đặt tôi bên cạnh những người khác nếu tôi phù hợp.
Nhưng nếu hàng xóm của bạn cũng bị chặn, nó sẽ không hoạt động.
Vì vậy, bây giờ, thay vì chỉ thay đổi một, tôi sẽ thay đổi tất cả các divs.
Và bạn có thể thấy điều đó, ồ, bởi vì chúng khoảng 45%,
hai trong số chúng phù hợp với nhau nhưng cái cuối cùng thì không.
Vì vậy, thực sự không có cách nào tốt để cảm thấy thoải mái với màn hình
cho đến khi bạn lấy mã này và bắt đầu chuyển đổi mọi thứ xung quanh.
Điều gì sẽ xảy ra nếu nó là nội tuyến?
Điều gì sẽ xảy ra nếu nó là khối nội tuyến?
Điều gì sẽ xảy ra nếu nó là khoảng thời gian?
Và thực sự chú ý đến thực tế là nó không đủ để biết
màn hình hiển thị là gì cho một yếu tố bạn đang làm việc,
bạn cũng cần phải biết màn hình cho hàng xóm của nó.
Nhưng, chúng ta hãy tiếp tục nói chuyện nhiều hơn một chút.
Khi chúng ta đang nói về màn hình hiển thị,
nó khá phổ biến để cũng nói về hai thuộc tính khác là tốt.
Và chúng được gọi là phao và rõ ràng.
Và những gì nổi và rõ ràng làm là họ không nhất thiết phải nói nơi bạn muốn trang ở
, phần tử trên trang của bạn được cụ thể, nhưng
nơi bạn thường muốn đặt nó.
Theo mặc định, khi trình duyệt đặt mọi thứ lên trang,
nó bắt đầu ở góc trên bên trái.
Và nó chỉ bắt đầu đưa chúng vào, vì vậy nhìn vào trang web của bạn, nó sẽ giống như
điều đầu tiên, điều đầu tiên, ồ, cái tiếp theo là khối nên tôi tốt hơn đặt nó bên dưới.
Và nó cứ tiếp tục thêm mọi thứ vào.
Vì vậy, nếu trình duyệt của bạn thực sự lớn, bạn có thể phù hợp với nhiều yếu tố span bên cạnh nhau,
nếu nó nhỏ, bạn có thể phù hợp ít hơn.
Well float cho phép bạn thực sự định vị lại mọi thứ, và
nó nói hey tôi muốn bạn loại nổi này bất cứ nơi nào
, và nếu tôi nói nổi đúng, tôi muốn bạn đặt nó càng xa bên phải càng tốt.
Nếu tôi nói phao bên trái, tôi muốn anh đặt nó càng xa càng tốt.
Các yếu tố khác về cơ bản nhận thức được nhau, và khi bạn sử dụng phao,
chúng sẽ không chồng lên nhau nhưng mọi thứ sẽ trông hơi điên rồ.
Và khi bạn thêm phao một lần nữa, bạn đang ảnh hưởng đến hàng xóm của
bạn bởi vì hàng xóm của bạn cần phải biết bạn đang đi đâu.
Đó là lý do tại sao chúng ta có tài sản bổ sung này được gọi là rõ ràng.
Bởi vì đôi khi khi bạn đang lập trình, bạn chỉ muốn chắc chắn rằng mọi thứ không
trôi về bên trái hoặc bên phải của bạn.
Bạn muốn thực sự có không gian đó tất cả cho chính mình,
trong trường hợp đó bạn có thể sử dụng rõ ràng trái, rõ ràng phải, hoặc rõ ràng cả hai.
Xoay sang trái để đảm bảo không có gì nổi bên trái.
Rõ ràng bên phải nghĩa là không có gì nổi cho bạn ở bên phải.
Và rõ ràng cả hai, cũng như bạn có thể đoán,
nó có nghĩa là không có gì nên nổi bên cạnh bạn cả.
Vì vậy, chúng ta hãy đi trước và có một cái nhìn khác tại một ví dụ nữa, nơi tôi sẽ
chơi với cùng một mã nhưng tôi sẽ bắt đầu sử dụng phao và rõ ràng là tốt.
Vì vậy, chúng tôi sẽ xem xét cùng một tập tin chính xác mà chúng tôi đã chỉ nhìn vào
khi tôi đang chơi với khối hiển thị, nội tuyến, không có, vv
Nhưng bây giờ, chúng tôi sẽ ném phao và rõ ràng vào hỗn hợp là tốt.
Vì vậy, đây là mã chúng tôi đang xem xét, và đây là trang web.
Và điều đầu tiên tôi sẽ làm là tôi sẽ chơi với các nhịp ở đây và
tôi sẽ thử thả chúng ra.
Vì vậy, hãy nhớ rằng, khi bạn trôi nổi một cái gì đó, bạn về cơ bản nói rằng đặt nó càng xa
sang một bên như bạn có thể và các yếu tố khác gần như sẽ hành động như thể
họ không có ở đó nhưng họ sẽ không chồng chéo nó.
Vì vậy, tôi sẽ xuống đây, xuống phao của tôi.
Nói phao đi.
Bây giờ, điều đầu tiên tôi phải làm là tôi sẽ thả nó sang bên trái,
có nghĩa là chúng sẽ không di chuyển quá nhiều.
Điều tôi muốn các bạn tìm kiếm
là ngay bây giờ, có một chút không gian giữa mỗi nhịp của tôi.
Khi tôi thay đổi nó sang trái, không gian đó biến mất và
div thực sự đi bên dưới nó là tốt, bởi vì các nhịp là trên đầu trang.
Bây giờ khi tôi cố gắng thay đổi nó và thả nổi nó ngay.
Khi tôi thả nó đúng, tôi muốn các bạn chú ý rằng không những chúng không có
khoảng trống ở giữa chúng, rằng chúng lại ở ngay cạnh nhau một lần nữa.
Nhưng nếu bạn nhìn, thứ tự của A, B và C là khác nhau.
Bởi vì các yếu tố đầu tiên nó được đặt trên trang là span A và do
đó nó di chuyển nó xa bên phải như nó có thể.
Và khi nó đang làm nhịp B, nó đang di chuyển xa về bên phải càng tốt, và
nhịp C là tốt.
Vì vậy, đây là một điều thú vị,
và bạn có thể thấy rằng nếu chúng ở bên trái, các divs sẽ chồng chéo chúng.
Được rồi, chúng ta hãy tiếp tục và làm thêm vài thứ nữa.
Và tôi sẽ làm một sự thay đổi tất cả các divs của tôi, để họ cũng có.
Đi đây, trôi về bên trái.
Vì vậy, bây giờ trang này trông khá điên rồ bởi vì mọi thứ đang
diễn ra khắp nơi và bạn thực sự, có lẽ bạn không muốn nó nhìn theo cách này.
Đặc biệt là nếu chúng tôi muốn tất cả các đoạn văn
của chúng tôi thực sự nằm ở cuối trang.
Vì vậy, tôi sẽ đi lên đây để xem đoạn văn của tôi.
Và tôi sẽ tiếp tục và tôi sẽ nói, tôi sẽ không thả nổi những thứ này.
Thay vào đó, tôi sẽ nói rằng tôi đã xong việc trôi nổi, làm
ơn dừng những thứ trôi nổi xung quanh tôi.
Và tôi sẽ dọn sạch cả hai bên.
Vì vậy, các đoạn văn bây giờ đang nói, giúp tôi tránh xa tất cả sự điên rồ nổi này.
Tôi chỉ muốn ở dưới này.
Nổi, dọn dẹp, những thứ khác nhau như thế này.
Khi chúng ta thực hiện những ví dụ mã thực sự đơn giản trong bài giảng,
chúng không phải lúc nào cũng có ý nghĩa như khi bạn đặt chúng vào như
một phần của một cái gì đó lớn hơn.
Nhưng vấn đề là tôi không thể cho các bạn thấy những ví dụ lớn hơn bởi vì
tất cả các bạn đều ngủ thiếp đi khoảng ba hoặc bốn phút vào mã.
Hãy tiếp tục, làm những gì chúng tôi luôn làm và
chỉ chơi với những thứ này một chút cho đến khi bạn hiểu được những gì họ làm.
Khi thời gian trôi qua,
bạn sẽ bắt đầu tìm ra khi nào bạn muốn họ thực sự thực hiện những hành động này.