Chào.
Hôm nay chúng ta sẽ nói về mô hình hộp.
Và những gì các mô hình hộp là, thực sự là một khái niệm chung của CSS
giúp bạn kích thước và đặt yếu tố của bạn nơi bạn muốn họ đi.
Vì vậy, một trong những điều đầu tiên chúng ta sẽ nói đến là chiều cao và chiều rộng.
Tôi biết tôi đã sử dụng nó một chút trong một số bài giảng khác của tôi, nhưng
tôi muốn rất cụ thể trong cách nó hoạt động.
Và một trong những điều đầu tiên bạn cần biết là chiều cao và chiều
rộng của bất kỳ phần tử nội tuyến nào là nội dung chính nó.
Vì vậy, nếu bạn có một liên kết, chiều cao và
chiều rộng của liên kết đó chỉ là văn bản của phần có thể nhấp được của liên kết. Các
yếu tố không phải là nội tuyến, những thứ đó là khối, khối nội tuyến, những thứ như thế,
chúng có thể lấy các thuộc tính chiều cao và chiều rộng, và chúng tôi đã thấy điều này trong bài giảng Hiển thị.
Vì vậy, bất cứ khi nào bạn có một cái gì đó nội tuyến, nếu bạn cho nó một chiều cao và
chiều rộng, trình duyệt chỉ bỏ qua nó.
Bất cứ điều gì khác, trình duyệt trở nên tuyệt vời, tôi có thể tiếp tục và thay đổi điều đó cho bạn.
Một số điều khác chúng tôi muốn suy nghĩ về sau đó, khi chúng tôi có các yếu tố,
là cách chúng phù hợp trên màn hình.
Một trong những cách dễ nhất
để bạn đặt mọi thứ trên trang của mình một cách chiến lược là đặt đường viền xung quanh chúng.
Ngay cả khi bạn không muốn những đường viền sau này trong sản phẩm cuối cùng của bạn,
tôi thấy nó rất hữu ích để có ý tưởng này về bao nhiêu không gian một phần tử đang chiếm.
Vì vậy, bất kỳ phần tử có thể có một đường viền xung quanh nó cho dù nội tuyến của nó
, hoặc khối, hoặc khối nội tuyến.
Và những thuộc tính biên giới xác định viền kiểu bạn muốn,
chiều rộng của viền và màu gì.
Chúng khá đơn giản.
Kiểu viền là kiểu duy nhất phải được chỉ định.
Nếu bạn không chỉ định một màu, hoặc bạn không chỉ định một chiều rộng, không có vấn đề gì.
Nó sẽ mặc định là màu đen và có thể là một điểm ảnh.
Nhưng bạn phải quyết định loại phong cách bạn muốn.
Vì vậy, trong trường hợp này, tôi đã nói, đối với tất cả các divs của tôi, tôi muốn họ có một
đường viền một điểm ảnh vững chắc xung quanh họ, và tôi không thể cho bạn biết màu đó là gì, vì
tôi không hoàn toàn geeky được nêu ra, nhưng tôi đoán một cái gì đó giống như màu xanh.
Phong cách biên giới mà bạn muốn chỉ định, trong khi hầu hết mọi người luôn sử dụng rắn,
có rất nhiều phong cách khác nhau.
Bạn có thể sử dụng chấm, gạch ngang, rãnh, ridged, ẩn, inset, outset.
Có rất nhiều điều khác nhau bạn có thể làm, và
nó thực sự là một sự khác biệt về phong cách từ phía bạn.
Tôi không thực sự chú ý nhiều đến họ vì tôi đã luôn luôn sử dụng rắn bản thân mình.
Một khi bạn đã quyết định loại phong cách bạn muốn, bạn có thể chỉ định chiều rộng và màu sắc.
Vì vậy, khi nói đến thời gian để thiết lập chiều rộng, nếu bạn quyết định, là bạn có thể thiết lập nó trong
một số pixel hoặc bạn có thể sử dụng các từ khóa, mỏng, trung bình, hoặc lớn.
Khi nói đến thời gian để làm màu sắc,
bạn có thể làm tương tự như chúng tôi đã làm tất cả.
Bạn chỉ có thể sử dụng tên, chẳng hạn như màu xanh, giá trị RGB,
giá trị hex, hoặc chỉ để bạn biết, nó cũng trong suốt.
Vì vậy, nó chỉ có thể lấy màu của bất cứ thứ gì ở bên dưới nó.
Vì vậy, khi nói đến thời gian để bạn xác định mức độ lớn bạn muốn biên giới của bạn đi,
bạn có thể chỉ định theo bốn cách khác nhau.
Trong ví dụ đầu tiên, bạn chỉ cần cung cấp cho nó một số.
Trong trường hợp này, ba pixel.
Và những gì nó sẽ làm,
là nó sẽ đặt một đường viền ba điểm ảnh xung quanh toàn bộ phần tử như thế này.
Nếu bạn quyết định cung cấp cho nó hai giá trị, là nó sẽ thiết lập một biên giới ba điểm ảnh trên
đầu trang và dưới cùng, và một biên giới mười điểm ảnh ở bên trái và bên phải.
Đây là một cách thực sự phổ biến để thiết lập mọi thứ khi bạn đang làm biên giới và
các thuộc tính khác, bởi vì nó là một cách ngắn gọn thực sự tốt đẹp
mà vẫn rất đơn giản để hiểu và đọc.
Nếu bạn cho nó ba giá trị, nó hơi phức tạp hơn một chút, và tôi luôn
vấp ngã về nó là gì, vì vậy tôi sẽ bật bức tranh lên chỉ để chắc chắn.
Giá trị đầu tiên luôn là đầu.
Bạn muốn viền trên cùng của bạn là 3 pixel.
Các điểm ảnh 10 là cho trái và phải, và 20 pixel là cho phía dưới. Điều
cuối cùng là khi bạn đưa ra bốn giá trị, và khi bạn đưa ra bốn giá trị,
điều đó về cơ bản có nghĩa là trên, phải, dưới, trái.
Và điều đó sẽ thiết lập biên giới thành bốn giá trị khác nhau.
Vì vậy, hầu hết mọi người hoặc sử dụng một giá
trị, bốn giá trị, và một vài người sử dụng hai giá trị là tốt.
Hầu hết, và một trong những lý do tôi cho các bạn thấy điều này là, nó có thể thực sự đáng sợ,
và bạn đang tự hỏi mọi người đang làm gì khi họ đang diễn ra.
Đây là những gì họ đang làm.
Họ sử dụng shorthands để họ không cần phải có biên giới bên phải, biên giới bên
trái, biên giới phía trên, biên giới phía dưới.
Margin về cơ bản là không gian nằm ngoài biên giới của bạn.
Đó là giữa, khi tôi nói bạn và hàng xóm của bạn, hoặc
những gì tôi thực sự nên nói là giữa các yếu tố, và hàng xóm của yếu tố.
Vì vậy, nó cung cấp cho bạn căn phòng khuỷu tay nơi bạn không muốn ai chạm vào bạn.
Với lợi nhuận, bất cứ khi nào bạn cung cấp cho nó một lợi nhuận tích cực,
bạn về cơ bản nói, di chuyển phần tử của bạn sang phải hoặc xuống.
Nếu bạn cho nó một biên độ âm,
bạn thực sự có nó di chuyển gần với hàng xóm hơn.
Bạn đang có nó di chuyển sang trái hoặc lên trên.
Padding rất giống nhau trong khái niệm để margin, nhưng
thay vào đó không gian này nằm giữa phần tử và đường viền của nó.
Nó cho nó thêm một chút không gian bên trong.
Bạn gần như có thể nghĩ về nó như squishing văn bản trong một số trường hợp.
Trong cùng một cách, bất cứ khi nào bạn có giá trị dương cho
đệm, bạn đang di chuyển nó ra ngoài từ phần tử.
Bạn đang cho nó nhiều không gian hơn.
Nếu bạn cung cấp cho nó một đệm âm, bạn đang thực sự di chuyển biên giới gần hoặc
thậm chí trên đầu trang của các yếu tố bên cạnh nó.
Vì vậy, với lề và đệm, tất cả những gì bạn sẽ làm là đưa ra một giá trị số.
Bạn sẽ cho nó một cái gì đó như 3 điểm ảnh hoặc 10%.
Bạn không cho nó bất kỳ loại màu sắc nào.
Nó sẽ luôn luôn trong suốt.
Các đệm luôn luôn là sẽ có cùng màu với các yếu tố, và lề
luôn luôn sẽ là cùng màu của cha mẹ, có lẽ là cơ thể của trang.
Họ, giống như biên giới, có thể được định nghĩa trong một đến bốn giá trị đó.
Vì vậy, nếu bạn đặt lề ba điểm ảnh, nó sẽ là một lề ba điểm ảnh xung quanh tất cả mọi thứ.
Nếu bạn nói đệm, mười điểm ảnh, năm điểm ảnh, bạn sẽ có trên,
dưới, trái và phải.
Để tôi cho các bạn xem một bức tranh nhanh về những gì tôi đang nói.
Trong trường hợp này, đây là văn bản của tôi là yếu tố thực tế của tôi.
Tôi đã nói đây là điều tôi muốn tiếp tục.
Màu xanh là biên giới xung quanh yếu tố của tôi.
Màu vàng là lớp đệm.
Đó là khoảng cách giữa văn bản của tôi và biên giới, và màu cam đó là lề, và
những gì bạn đang nói là, đừng đặt tôi gần bất cứ thứ gì khác.
Hãy cho tôi nhiều không gian xung quanh tôi.
Vì vậy, nó có thể di chuyển đoạn văn của bạn xuống.
Nó có thể di chuyển divs của bạn xuống và hơn nữa.
Vì vậy, chỉ cần thực hành điều này.
Và khi bạn chơi với nó nhiều hơn và nhiều hơn nữa,
nó sẽ có ý nghĩa hơn cái nào là một lề và cái nào là đệm.
Một trong những điều bạn cần phải hiểu khi bạn đang làm đệm và biên giới và
lề, và tất cả những điều này là trong HTML nói, chiều cao và chiều
rộng của bạn là phụ gia.
Và vì vậy điều đó có nghĩa là nếu bạn quyết định rằng bạn muốn chiều rộng của phần tử của bạn là
200 pixel, bạn có thể cần phải tính đến
mức độ lớn của tất cả các khía cạnh và thuộc tính khác.
Vì vậy, trong trường hợp này, một phần của chiều rộng là lề, cộng với đường viền,
cộng với phần tử thực tế với chính nó.
Và vì vậy tất cả thực sự thêm lên để có được những gì chúng tôi xem xét chiều
rộng thực tế của phần tử của bạn.
Và điều này sẽ quan trọng khi bạn đang nhìn vào trang của bạn và bạn đang thiết kế
nó và cố gắng quyết định bao nhiêu không gian bạn muốn mỗi yếu tố chiếm.
Vì vậy, nếu chúng ta nhìn vào ví dụ này ngay ở đây nơi tôi có chiều rộng là 100
px, padding là 10px, lề là 5px và biên giới là 1px.
Tôi hy vọng rằng ngay bây giờ, bạn đang làm toán trong đầu của bạn, và
tôi hứa sẽ không cung cấp cho nhiều toán hơn thế này, nhưng bạn đang làm điều đó để tìm ra
bao nhiêu chiều rộng làm yếu tố này, không div này, thực sự cần trên trang.
Và trong trường hợp này chiều rộng là 132 pixel.
100, cộng 10, cộng 5, cộng 1, cộng 1, cộng 5, cộng 10.
Tất cả đều tăng lên.
Chiều cao, theo cùng một cách, là chiều cao của bạn cộng với phần đệm trên và dưới,
lề trên và dưới cùng, và viền trên và dưới cùng.
Được rồi, khi chúng ta nói về lợi nhuận,
tôi chỉ muốn ném slide này vào mặc dù nó
không kết nối với nhiều thứ khác mà chúng ta cần nói về.
Nhưng đó là bởi vì lề là rất quan trọng cho
khi bạn muốn tập trung các yếu tố trên một trang.
Khi chúng tôi muốn trung tâm văn bản, chúng tôi chỉ có thể sử dụng văn bản căn chỉnh trung tâm,
và mọi thứ trông thực sự tốt.
Nhưng khi bạn muốn tập trung các yếu tố, nó khó khăn hơn một chút.
Và do đó, cách mặc định để làm điều này là sử dụng lệnh margin zero auto.
Vì vậy, nếu bạn nhớ, số 0 đầu tiên, nó là viết tắt của trên và dưới, và
vì vậy nó sẽ không thực sự quan tâm đến điều đó.
Tự động là những gì đặt nó trái và phải.
Bây giờ điều này chỉ là sẽ làm việc nếu các yếu tố xảy ra để được hiển thị:block,
nếu các yếu tố không phải là nổi, là các yếu tố có một chiều rộng
mà không phải là tự động, có nghĩa là bạn thiết lập nó.
Và cái cuối cùng này là nếu phần tử không cố định hoặc vị trí tuyệt đối.
Bây giờ tôi vẫn chưa bao gồm vị trí.
Và tin tốt là, vì tôi chưa bao giờ đề cập đến nó, có lẽ bạn đã không
gây rối với nó, và bạn không cần phải lo lắng về hai điều này.
Nhưng khi bạn cố gắng gửi các yếu tố của bạn, hãy quay lại trang chiếu này nếu bạn cần,
và kiểm tra các yếu tố này để đảm bảo rằng tất cả các thuộc tính này phù hợp.
Và đó là cách tốt nhất để tập trung mọi thứ ngay bây giờ.
Cuối cùng, khi chúng ta nói về điều này, tôi muốn thêm một lựa chọn nữa, và
đó được gọi là kích thước hộp.
Và điều kích cỡ hộp làm là nó lấy một số toán học từ chiều cao phụ gia
và chiều rộng phụ gia đó.
Những lựa chọn của bạn là bạn có thể có nội dung hộp, vì vậy hộp kích thước nội dung hộp,
và đó chỉ là phụ gia mặc định của bạn.
Anh sẽ phải nhớ anh đang sử dụng bao nhiêu không gian.
Cái tiếp theo được gọi là hộp biên giới.
Và hộp biên giới thực sự có chiều rộng, nội dung, đệm, và
biên giới tất cả vào xem xét.
Vì vậy, nếu bạn nói rằng bạn muốn chiều rộng là 200 pixel,
nó sẽ không thực sự làm cho các yếu tố 200 pixel.
Nó sẽ làm cho nó 200 điểm ảnh trừ đi phần đệm và đường viền.
Một trong những điều cuối cùng cần nhớ là chúng ta sẽ đưa vào tài khoản đệm và
biên giới, nó sẽ không đưa vào tài khoản lợi nhuận.
Vì vậy, cuối cùng,
một trong những điều tôi sẽ được hiển thị cho bạn trong ví dụ này chỉ trong một giây,
là những cách khác nhau bạn có thể thiết lập chiều cao và chiều rộng của các yếu tố khác nhau.
Và có hai cách phổ biến để làm điều này.
Đầu tiên được gọi là tuyệt đối, và
đó là khi bạn thiết lập một phần tử cho một kích thước cụ thể.
Bạn nói tôi muốn nó có quá nhiều điểm ảnh, hay quá nhiều milimet, hay quá
nhiều centimet.
Pixel là một cách rất phổ biến để đặt kích thước.
Loại đo lường khác là cái mà tôi gọi là chất lưu, và
nó đặt kích thước tương đối với các phần tử xung quanh hoặc các phần tử cha.
Vì vậy, bạn có thể sử dụng những thứ như phần trăm.
Bạn có thể sử dụng vw, viết tắt của
chiều rộng cổng nhìn, vh là viết tắt của chiều cao cổng nhìn.
Bạn thậm chí có thể sử dụng những thứ như em và rem, mà không được sử dụng phổ biến, nhưng
họ thực sự thiết lập kích thước tương đối so với cha mẹ của nó.
Vì vậy, chúng ta hãy tiếp tục và chuyển sang ví dụ của tôi để
chúng ta có thể chơi với điều này chỉ một chút.
Nó sẽ không đủ để chứng minh mọi thứ chúng ta có thể làm, nhưng
hy vọng nó sẽ giúp bạn bắt đầu.
Những gì tôi có ở đây là một tập tin HTML rất đơn giản,
nơi tôi có một bên trái và bên phải.
Nhưng như bạn có thể thấy, chúng không ở bên trái và bên phải ngay bây giờ.
Họ chỉ đứng trên nhau thôi.
Vậy điều đầu tiên tôi muốn biết là, anh có thể đặt mấy divs cạnh nhau không?
Chúng ta sẽ phải sử dụng một loại kết hợp giữa màn hình, chiều cao,
chiều rộng, và đệm.
Vì vậy, chúng ta hãy tiếp tục và làm điều đó.
Vì vậy, ở đây trong tập tin CSS của tôi,
ngay lập tức bạn có thể nhìn thấy loại nền những điều tôi đã làm.
Bây giờ, khi bạn muốn mọi thứ ở bên cạnh nhau, bạn phải cho chúng một chiều rộng,
bởi vì ngay bây giờ chúng chiếm 100%.
Một lựa chọn sẽ là cho bạn để đi trước và đặt nó vào một số loại pixel.
Và nói có thể 200 điểm ảnh và 200 điểm ảnh, và xem điều gì sẽ xảy ra,
xem nó có hiệu quả không.
Vấn đề với việc làm điều đó, khi tôi bỏ nhận xét mã của tôi ở đây, là khi mọi người
đi trên các kích thước trình duyệt khác nhau, số của bạn có thể quá lớn hoặc quá nhỏ.
Vì vậy, những gì tôi đã làm ở đây là tôi đã đi trước và tôi đặt chiều rộng của tôi là 48%.
Bây giờ làm điều đó thật sự tuyệt vời, và tôi sẽ đi ra khỏi dòng này
chỉ trong một giây, bởi vì hầu hết mọi người có ý tưởng rằng bạn muốn
đặt chiều rộng thành một cái gì đó nhỏ hơn.
Những gì họ quên, là mặc dù họ chỉ chiếm 48%,
trên thực tế tôi thậm chí sẽ làm cho nó một cái gì đó thực sự nhỏ bé.
20%, họ sẽ không đi cạnh nhau.
Vì vậy, bạn cần phải nhớ rằng bạn muốn sử dụng các phép đo chất lỏng.
Vì vậy, chúng ta hãy trở lại đây, tôi sẽ đặt nó trở lại 40%.
Ngay cả khi bạn làm cho nó thực sự gầy, cho đến khi bạn nói với trình duyệt
, oh, tôi biết điều này bị chặn nhưng tôi sẽ thay đổi nó thành khối trong dòng,
nó sẽ không bao giờ cho phép các yếu tố khối được bên cạnh nhau.
Vì vậy, đó là lý do tại sao bạn phải nhớ làm cả hai yếu tố đó.
Vì vậy, chúng ta hãy tiếp tục và lưu và tải lại.
Và bạn có thể thấy rằng tôi đã đi trước và tôi đã làm được chiều rộng của mình.
Tôi đã hoàn thành khối hiển thị của tôi.
Tôi có miếng đệm.
Tôi có biên giới, và tôi có một số lợi nhuận.
Vì vậy, điều cuối cùng tôi sẽ làm, chỉ để kết thúc điều này để cho các bạn thấy điều gì đang xảy ra,
là tôi sẽ tiếp tục và
thay đổi nó thành 50%, bởi vì đây là một sai lầm thực sự phổ biến mà mọi người mắc phải.
Họ nói oh, tôi muốn hai thứ bên cạnh nhau.
Vì vậy, tôi sẽ làm cho họ mỗi 50%.
Đừng quên khi bạn làm điều đó,
nó không hoạt động bởi vì đó là 50% trước khi bạn đưa biên giới vào tài khoản.
Vì vậy, hãy chắc chắn rằng bạn đang chơi với tất cả những điều này, rằng bạn đang chơi với
lề, bạn đang chơi với đệm, bạn đang chơi với biên giới.
Vì đó là cách bạn sẽ làm cho mọi thứ hoạt động, bằng cách chỉnh sửa, chỉnh sửa, chỉnh sửa.
Vì vậy, chúng ta hãy đi trước và xem xét.
Khi đến lúc bạn bắt đầu thực hiện tất cả những ý tưởng này,
mô hình hộp của bạn với đệm, nội dung, lề
, vv, bạn thực sự muốn thiết kế các bản phác thảo trên giấy trước, vì thật khó để
đẩy mọi thứ vào sau khi bạn đã đưa ra một phác thảo, được chứ?
Vì vậy, thiết kế đầu tiên, mã thứ hai.
Điều thứ hai bạn có thể muốn làm là sử dụng mô hình hộp
để giảm sự phức tạp của mã của bạn.
Hoặc ít nhất là sự phức tạp của toán học của bạn cố gắng tìm ra
những gì mọi thứ phù hợp với nơi nào.
Cuối cùng, bất kể bạn làm gì,
bạn cần phải nhớ rằng lợi nhuận luôn phải được xem xét.
Nó có thể là khó khăn khi bạn lần đầu tiên bắt đầu cố gắng đặt trang của bạn với nhau,
và đưa mọi thứ đến chính xác nơi bạn muốn họ đi, và
chúng tôi thậm chí chưa nói về định vị, mà thậm chí sẽ là một yếu tố khác.
Vì vậy, ngay bây giờ, thực hành những điều này theo những cách nhỏ.
Sử dụng Inspect Element để chơi với nó và không phải thay đổi mã của bạn quá nhiều.
Cho đến khi bạn có được mọi thứ trông giống như bạn muốn chúng nhìn.
Và đừng lo, tất cả chúng ta đều mắc sai lầm. Tất cả
chúng ta đều làm việc này cùng nhau.
Nhưng tôi nghĩ rằng trang của bạn hy vọng sẽ đến gần hơn và
gần gũi hơn với một cái gì đó mà bạn thực sự muốn đưa ra trên web.
Làm tốt lắm.