Tak więc jednym z najważniejszych koncepcji, że do tej pory nie pokrywa i ocenia się usytuowanie elementów.
Więc jak możemy rozłożyć stronę lub przenieść div w prawym górnym rogu.
Albo w jaki sposób dokonać tag kotwicy szerszy lub dodać odstępy między kolejnymi zdjęciami.
Wszystko to jest bardzo ważne, i to wszystko jest związane z czymś o nazwie model box.
Tak więc model box jest to podstawowa idea, że ​​naprawdę w centrum wszystkiego w HD ocenić co jest, że w zasadzie każdy element ma prostokątną ramkę wokół niego.
Widzimy więc tutaj tylko pójść do dowolnej strony internetowej na MDA i mam inspektor otwarta i mam zaznaczone lupy.
I jak unoszą się nad każdym elemencie widać, że istnieje pole wokół niego.
Więc to H2 ma niebieską ramkę wokół niego.
Ten ma pudełko.
Nawet rzeczy, które nie są szczególnie boxy.
Więc ten zaokrąglony narożnik dz ..
To nadal ma pole wokół niego.
Za kulisami.
Tak samo jak to tutaj i ten jest naprawdę nie okrągłe lub nie boxy chce mieć te zaokrąglone narożniki, ale nadal jest to okno.
Więc te pudełka są naprawdę użyteczne zakulisowo ponieważ możemy projektować różne właściwości na nich.
Tak więc istnieją cztery właściwości lub cztery różne części każdego pudełka.
Jest dużo więcej właściwości, ale dla części okna możemy manipulować.
Więc załóżmy, że ten schemat, który jest również z MDA, a to z ust.
Więc mam jakiś tekst w akapicie i daję mu pomarańczowy lub żółty granicę i to, co użytkownik widzi jakiś tekst i obramowanie, ale za kulisami Jest rzeczywiście kilka innych rzeczy dzieje.
Więc między granicą a tekst jest tam coś, co nazywa wyściółka.
Tak wypełnienie znajduje się przestrzeń na wewnętrznej granicy.
Więc między treścią a granicą jest wypełnienie, a następnie istnieje również marża, która jest po drugiej stronie to jest między granicą na zewnątrz i nic innego.
Więc używamy margines często dodać odstępy pomiędzy elementami.
Więc jeśli mieliśmy dwa akapity i chciałem im być dalej od siebie to bym użyć margines i zwiększyć tym.
Więc teraz mamy zamiar zrobić trochę głębokiego nurkowania w rzeczywistości składni pewne właściwości, które chcemy wykorzystać, zanim to zrobimy.
Chcę po prostu pokazać dwie rzeczy można oczekiwać, aby zrobić pierwszy jeden z najbardziej ekscytujących, ale ważne jest to, że teraz mamy sposób na zrobienie czegoś, co wygląda jak ten.
Do tej pory nie mamy sposób dokonywania tych pól, które są połączone ze sobą, że mają z nich przypisane są puste, ale nie ma tekstu w środku.
Więc mamy zamiar dowiedzieć o modelu pudełkowego i zastosować że tutaj, aby ten tic tac toe pokładzie, a następnie jedziemy do tego portfela witryny dla fikcyjnej fotografa.
Więc to jest miłe.
To obrazy to reaguje tak zmienia rozmiar zmianę wielkości okna i siatki.
Wszystko to opiera się pojęć masz zamiar dowiedzieć się tutaj.
Więc mam zamiar iść do przodu i otworzyć Sublime tutaj.
I mam bardzo prosty dokument, że już utworzony.
Więc to tylko prosty HTML.
Ma arkusz stylów podłączony.
To jest puste.
Oprócz kilku uwag, a następnie dwa akapity.
Więc jeśli mogę otworzyć tego się można zobaczyć, że jest to bardzo proste, bardzo nudne, a my po prostu się to wykorzystać, aby bawić się z modelu pudełkowego.
Więc mam zamiar iść do mojego sukcesu i mam zamiar wybrać paragrafy i jestem po prostu skopiować te komentarze w środku tak, że mogę napisać kod pod nimi tylko wizualnie powiedzieć, co robię.
Więc zacznijmy dając nich granicy.
Tak powinno to być ocena granicznej i zróbmy z pixel świecić na niebiesko zapisać, że odświeżanie i widać, że mamy ramkę dookoła treści.
A co można również zauważyć, że treść jest tu idzie całą drogę w poprzek ekranu.
Nasza granica nie zatrzymują się tu i to dlatego, że gdy robimy paragraf domyślnie przechodzi przez całą drogę w poprzek ekranu.
Więc jeśli chcę zmienić szerokość samego akapitu tekstu można wykorzystać właściwości width i mam zamiar iść do przodu i dać szerokość jednego.
Zróbmy 200 pikseli, aby rozpocząć.
A gdybym odświeżyć widać mamy teraz zmienić szerokość.
Gdybym skontrolować zawartość nie jest niebieski.
A potem możemy mieć obramowanie wokół niego.
Tak więc treść jest niebieski.
I na tym schemacie, że jest to pole tutaj pole elementem.
A potem mamy granicę, która jest bezpośrednio wokół niego.
Nie ma przestrzeni między granicą oraz treści.
Jeszcze jedno o szerokości, a także nie jest wysokość.
Więc zróbmy wysokość 300 pikseli i zobaczyć Właśnie dodaliśmy sporo przestrzeni.
Mam zamiar pozbyć się tego, ale nie jest to wysokość, że możemy wykorzystać podobnie jak w przypadku.
Nie mamy po prostu użyć pikseli, dzięki czemu możemy korzystać z procentów.
A ci są bardzo przydatne, więc pozwól mi pokazać.
Zróbmy 50 procent i można się zastanawiać, co to jest 50 procent.
A odpowiedź jest taka, że ​​jest to 50 procent elementu nadrzędnego.
Więc w tym przypadku jest to, że ciało akapit jest wewnątrz akapitu przechodzi przez pół ciała.
W naszym przypadku ciało jest cała strona.
Było aż w poprzek.
Tak więc skończyć z pół strony.
I co jest miłe o tym, czy zmienić rozmiar okna również zmienia się tak wiele osób korzysta z tego i użyje faktycznie do wykorzystania w tej siatki obrazu.
Widać, że obrazy zmienić ich szerokość i to jest procent.
OK, więc mam zamiar trzymać go tak jak teraz.
A potem kolejna właściwość będziemy rozmawiać o to dopełnienie i pamiętać, to jest wypełnienie przestrzeni pomiędzy elementem i granicy.
A teraz nie mamy jakiegokolwiek pomieszczenia granice prawo na górze.
Więc nie ma właściwość o nazwie wyściółka i możemy nadać mu pewną liczbę pikseli i zróbmy 10 pikseli, aby rozpocząć.
Zapisz odświeżenia plików.
A teraz mamy 10 pikseli wyściółka ze wszystkich stron.
Więc jeśli mogę sprawdzić teraz zobaczysz tam teraz ten zielony treści, które wprowadził więc mamy niebieską zawartość sam i wtedy mamy zielone wokół niego, które są między granicą i treści, dzięki czemu możemy oczywiście zwiększamy to i uzyskać wiele więcej przestrzeni wewnątrz.
Ale nie jest to jedyny sposób, aby ustawić dopełnienie.
Ustawia się na wszystkich czterech bokach, jak to dokładnie tak samo.
Ale czasami chcemy tylko dopełnienie po jednej lub obu stronach, tak jak z obramowaniem.
Są to skróty do dłuższej wersji, gdzie jest granica górna 10 pikseli granicy dolnej pięć pikseli.
To samo z wyściółką i komentarz, że na zewnątrz i możemy zrobić coś takiego dopełnienia w lewo o 40 pikseli i świeże.
I mamy dopełnienie tutaj.
I to jedyne miejsce na wypełnienie jest.
I pamiętam przestrzeń tutaj ten niebieski nie jest wyściółka, że ​​jest jej rzeczywista zawartość to z tego, ze tutaj.
Tak różne, chociaż wygląda na to, nie ma miejsca na prawej stronie.
To przychodzi z innego miejsca.
Tak więc kolejna rzecz, że możemy tu zrobić, to grać z marginesem.
Więc margines jest ostatnim elementem układanki.
Jest to przestrzeń na zewnątrz granicy.
Tak między elementami.
Więc to będzie przydatne, ponieważ może chcemy zwiększyć lub zwiększyć tę przestrzeń tutaj lub jako przykład tego miejsca tu między obrazami jest ustawiana za pomocą Marjan.
Więc to rzeczywiście wygląda podobnie jak wyściółka więc możemy powiedzieć, margines i zróbmy coś oczywistego jak 100 pikseli, aby rozpocząć i odświeżyć.
A co się stało, teraz mamy 100 pikseli przestrzeni na wszystkich stronach elementu na zewnętrznej granicy.
Więc znaleźć aspekt.
Zobaczysz, że w Chrome, który jest identyfikowane jako pomarańczowo tak błękitne jest treść Green wyściółka w Orange jest margines.
Tak samo jak wyściółką.
Czasem chcemy jedynie ustawić jedną część marginesu jednej strony więc możemy zrobić coś takiego marginesu szczycie wynosi 500 pikseli.
A potem, gdy przyjdzie na to jedno teraz i zapisać, a my tylko dostać miejsca na górze po lewej stronie nie ma nic.
A następnie więcej przestrzeni w górnej części tego.
Nic na dnie lub w lewo lub w prawo.
Więc to jest margines.
Więc czasami dodać wartości do wszystkich stron na marginesie, ale nie chcemy, aby to zrobić z czterech różnych linii.
Więc nie chcemy ich być dokładnie taka sama, jeśli są tutaj, ale nie wszyscy mają do powiedzenia margines górny margines lewy margines prawy dolny margines.
Więc nie ma innego jak skrót do granicy.
Albo możemy robić rzeczy na raz, co możemy zrobić to margines i nadać mu cztery wartości.
Tak więc pierwszy z nich jest na górze, a następnie w prawo, a potem w dół.
Zróbmy 500 pikseli, a następnie w lewo i przez to, że mamy ten miły czterostronne margines, gdzie wartości te są bardzo różne, ale mieliśmy tylko zrobić w jednej linii.
Więc po prostu sprawdzić to tutaj i zobaczyć, czy możemy uzyskać 500 pikseli na dnie, że jest to 20 na górze otrzymujemy setki po lewej stronie, a następnie mamy 40 po prawej stronie.
Więc jest ostatnia rzecz, którą zobaczysz, często z marginesu, który jest margines.
Automatyczny.
Więc co możemy zrobić, to ustawić margines być auto po lewej lub prawej stronie.
A co to jest rzeczywiście zrobi Centrum elementem dla nas.
Więc pozwól mi pokazać, jak to działa.
A komentarz to się ponownie i możemy napisać margines i powiedzmy zerowy margines auto na górze po lewej stronie lub na prawym marginesie zero i dno i auto po lewej stronie.
A jeśli robię to w pełnym rozmiarze i odświeżyć zobaczysz, że ośrodki to rzeczy dla nas.
Więc, co to znaczy, że uznał, że jest to 50 procent, bo powiedział, że tutaj, a następnie dane z lewa jest auto i prawo to auto tak właśnie czyni go tak dużo, jak to musi zrobić i które będą faktycznie centrum to dla nas.
A potem mamy zero na górze i na dole, więc oni scrunched razem.
Co możemy też zrobić tam jeszcze krótsza droga robi to i to wygląda tak marginesem zerowym Otto.
I tak będzie to ustawić górną i dolną do zera w lewo iw prawo, aby auto.
Więc nic się nie zmienia i możemy również użyć tej składni, jeśli chcę dodać 50 pikseli na górze i na auto i chcę dodać 50 pikseli i 20 pikseli.
Jedyną rzeczą do zapamiętania jest to, czego potrzebujesz w X istnieje, chyba że liczba jest równa zero.
Więc jeśli mogę to zrobić, to dodaje 20 na górze, po lewej i prawej stronie, a następnie dodaje 50 na górze i na dole.
Warto więc podsumować tutaj tylko jeden raz.
Mamy wewnętrzną treść, która jest tutaj.
Mamy wyściółkę, która jest pomiędzy granicami więc wszystko, co mamy, to obicie w lewo i wtedy mamy margines, który jest między granicą a po drugiej stronie.
Tak między elementami basically.