A moduláris felépítés - css-tulajdonságokat, amelyek szükségesek a regisztrációs egységek

Hol vannak a blokkok

Először meg kell értenünk, hogy nem hoz létre css blokkok - hívja fel őket. Önmagukban ezek vannak kialakítva a HTML - Hypertext Markup Language. Alapértelmezett magasság mértékegység fog helyet egyenlő a magassága annak tartalmát. A szélesség, ő lesz az összes rendelkezésre álló teret, ami a szülő.







Például, ha a szülő konténer szélessége 300 képpont, és ott jön létre egy blokk, akkor is elfoglalni egy szélessége (csak akkor, ha a szülő nincs megadva behúzás). Minden más elem is jön létre a tartályban nem állnak ugyanazon a vonalon az első egység, és mozogni fog.

Normál üres blokk elem használatával van rögzítve egy párosított címke - div. Önmagában ez nem csinál semmit. Például ne felejtsük, hogy sok tag sajátos jelentése: a bekezdés része egy szöveg, felirat, hogy javítani kell a navigációt és az észlelés, stb De a div tag áll, csak egy tartályt.

Ismerős blokk modell

A szokásos viselkedését néhány háztömbnyire létre fog menni, fentről lefelé egymásra. Itt egyszerre van egy komoly probléma, nem? És mit csinál a sidebar, mint a végén, hogy a területek, amelyek ugyanabban a sorban 3-5 bemutattak, és még egy képet? Itt érkezünk el a css és támogatást, amellyel rendezni elemeket az oldalon lehet teljesen semmilyen módon.

A moduláris felépítés - css-tulajdonságokat, amelyek szükségesek a regisztrációs egységek

Gyakorlati tanfolyam adaptív layout Landing semmiből!

Ismerje meg a semmiből elő adaptív Landing HTML5 és a CSS3 a következő 6 napon

A moduláris felépítés a honlap segítségével css: alapvető tulajdonságait

Mint fentebb láttuk, az alapértelmezett egységek nagyon makacs. Ne bevallani magamnak a másik, és még elfoglalja a teljes szélességében. Persze, néha szükség van, hogy helyes, mert a szerkezet sok helyen szükség van rá.

Nézzük először foglalkozik a méreteket. A CSS mérete elemek használata esetén felvehető a szélesség és magasság. Gyakran az érték meghatározott pixel, bár néha százalékban vagy más relatív egységekben.

Itt képzeljük el, hogy van egy nagy szülő konténer és benne van olyan blokk szintű elem. Tulajdonságok meghatározására irányuló át a stíluslapot kell valahogy tetszett neki. Ha írunk ki:

Ez teljesen az összes blokkot lesz olyan széles, hogy nyilvánvalóan nem kell. Tehát, mi kell hozzá, hogy a blokk stílus osztály vagy azonosítóját. Azok bekerülnek a class attribútum és az id, az érték áll bármilyen nevet, de meg kell kezdeni egy angol levelet. Megadjuk az engedélyt használni számokat, kötőjelet, vagy aláhúzás követ. Általában a legfontosabb eleme az oldalon vannak az azonosítóját (fejléc, tartalom, pince), és a kevésbé fontos (menük, fejlécek, stb) style osztályokat.

Azt is mondhatjuk, hogy ez nem fontos, hanem az, hogy ez egy egyedülálló eleme. Nyilvánvaló, hogy a két kupakot a helyszínen nem lehet elvileg (mármint a fő kupak tetején a helyén), de a menüpontok bármilyen szám lehet.







A legfontosabb dolog, hogy emlékezzen - az azonosító kap egy elem egyszer és nem írt bármely más elemet. Ez az egyedülálló címkét. Stílus osztály lehet rögzíteni legalább száz elemet, és egy blokk lehet szóközzel elválasztva feltenni olyan osztályok számát. Íme:

És azt gondolom, hogy most történni vele, ha azt írjuk ezeket a tulajdonságokat?

A moduláris felépítés - css-tulajdonságokat, amelyek szükségesek a regisztrációs egységek

Gyakorlati tanfolyam adaptív layout Landing semmiből!

Ismerje meg a semmiből elő adaptív Landing HTML5 és a CSS3 a következő 6 napon

Hogy blokkolja alkalmazni fogja ezeket a szabályokat, és most néhány pedig olyan elemet nem adja meg, például határon osztály, ő kap egy vastag zöld határon 10 pixel.

A moduláris felépítés - css-tulajdonságokat, amelyek szükségesek a regisztrációs egységek

Néhány háztömbnyire ugyanabban a sorban

Ezután röviden megvitatják két fontos tulajdonsága, hogy lehetővé teszi a blokkok rendezett egy sorban. Azonnal például konténer 1000 pixel széles. Az Ön feladata -, hogy álljon szélessége mentén 3 pixel blokk 300 elhelyezkedhetnek ugyanabban a vízszintes vonal. Hogyan kell csinálni? Kétféle módon.

Először is, minden egység kell állítani osztályban. Általában néhány fejlesztők hozzá a tömb elemei az általános osztályok:

Így minden eleme lehet díszített a maga módján, de vannak azonos utasításokat, mert minden tartalmaznak inline osztályban. És ez felírható a következőképpen:

A moduláris felépítés - css-tulajdonságokat, amelyek szükségesek a regisztrációs egységek

Az első tulajdonság átalakítja az elemeket sorban-blokkban. Nem veszíthetik el tulajdonságaikat, de lehet elhelyezni egy sorban, ha van elég szélessége a szülő.

A második tulajdonság minden eleme nyomódik a bal szélén a szülő konténer. De mivel a második és a harmadik elem nem ragaszkodnak a szélén, állnak az első és alkotnak egy sort.

A relatív méretek

Ahogy ez történik css elrendezésű blokk gumi oldalon? Ez a sablon egy nagy előnye a fix, mert ez változhat attól függően, hogy a szélessége az ablak. Ő elsősorban a következő elv: a közös elem tartály kap egy fix szélességű, és azt helyezzük szerkezeti részeket, amelyek mérete van írva, mint egy százaléka.

Így ez az egész arról szól, hogy lehet megvalósítani. A fennmaradó 8% -át a szélessége a padding szabadság, például. A sablon már kapott egy bizonyos alkalmazkodóképesség - elszárad csökkenő szélessége az ablak a böngészőben.

Természetesen, mielőtt az adaptív elrendezése nagyon messze van, de az ilyen szabályok lefektették azt. Ezután a médialekérdezések lehet szabályozni, hogy milyen széles, hogy átalakítsa a minta egy oszlop, hol és mikor, hogy csökkentsék a szélesség, stb stb

Ezen ma szeretnék befejezni. További információk a blokk elrendezés kaphat a prémium osztály, különösen a tankönyv css kezdőknek. amely leírja az alapvető funkciók, hogy meg kell tudni, hogy mikor dolgozik blokkot tartalmaz.

A moduláris felépítés - css-tulajdonságokat, amelyek szükségesek a regisztrációs egységek

Gyakorlati tanfolyam adaptív layout Landing semmiből!

Ismerje meg a semmiből elő adaptív Landing HTML5 és a CSS3 a következő 6 napon

A legtöbb IT hírek és webfejlesztés A csatorna-távirat

A moduláris felépítés - css-tulajdonságokat, amelyek szükségesek a regisztrációs egységek

HTML5 és CSS3 gyakorlatban nulla az eredmény!




Kapcsolódó cikkek