Internetinių svetainių kūrimas dažnai nepavyksta dėl tinkamo elementų matmenų nustatymo. Čia svarbu naudoti teisingas CSS savybes plotį ir aukštį. Šiame vadove sužinosite, kaip efektyviai apibrėžti savybes width (plotis) ir height (aukštis). Kalbama apie statinių ir procentinių rodiklių naudojimą bei atsparaus dizaino privalumų supratimą.
Svarbiausi pastebėjimai
- Savybės width ir height nustato HTML elementų matmenis.
- Galite nurodyti fiksuotus pikselių dydžius arba procentinius dydžius, kad pritaikytumėte savo išdėstymą.
- Procentiniai rodikliai padeda sukurti reaguojančius dizainus, kurie gerai atrodo įvairiuose ekranų dydžiuose.
Žingsnis po žingsnio vadovas
Nustatydami elementų plotį ir aukštį, pradėkite nuo pagrindinių CSS savybių.
1 žingsnis: Apibrėžti fiksuotą plotį ir aukštį
Galite naudoti fiksuotą plotį ir aukštį elementui, kad jis atrodytų taip, kaip norite. Paprastas metodas yra CSS naudojimas su pikseliais.
Rezultatas yra kvadratinis elementas, kurio matmenys 500 x 500 pikselių, kuris visada lieka toks pats. Galite pritaikyti reikšmes pagal norą, kad sukurtumėte stačiakampius ar kitas formas. Svarbu atkreipti dėmesį į jūsų suplanuotų išdėstymo koncepcijų matmenis.
2 žingsnis: Naudoti procentinį plotį ir aukštį
Naudojant reaguojančius dizainus, gaunate lankstumą. Vietoje fiksuotų pikselių reikšmių galite naudoti procentinius rodiklius. Pavyzdžiui, jei apibrėžiate width: 85%;, elementas užims 85% prieinamo pločio. Taip užtikrinate, kad jūsų išdėstymas prisitaikytų prie skirtingų ekranų dydžių.
Išbandykite tai, sumažinę langą. Pamatysite, kaip elementas auga ar mažėja kartu su naršyklės lango pločiu. Tai padeda išvengti būtinybės naudoti slinkties juostas, kurios atsiranda, kai fiksuoti plotiai netelpa į matomą plotą.
3 žingsnis: Nustatyti aukštį procentais
Panašiai kaip ir plotį, galite nustatyti aukštį procentais . Jei naudojate height: 100%;, elementas užims visą savo konteinerio aukštį.
Stebėkite, kaip elementas prisitaiko prie konteinerio pločio, o slinkties juosta dingsta, jei yra pakankamai vietos. Jei vietoj to naudosite height: 85%;, elementas bus skalinamas pagal viršutinio elemento aukštį ir liks prisitaikantis.
4 žingsnis: Sukurti dinamišką išdėstymą
Tinkamas plotų ir aukščių rodiklių supratimas ir taikymas yra esminiai žingsniai jūsų vystymesi. Kuriant dinamišką išdėstymą, kurį galima pritaikyti įvairiems poreikiams, galite derinti fiksuotas ir procentines reikšmes. Šis žinios yra pagrindas pažengusioms temoms, tokioms kaip reaguojantis dizainas, kurį galėsite gilinti vėlesnėse pamokose.
Santrauka – Plotis ir Aukštis HTML ir CSS pagrindai
Norint padaryti jūsų interneto svetaines patrauklias ir naudotojui draugiškas, svarbu protingai apibrėžti elementų matmenis. Naudodami fiksuotus pikselių dydžius galite sukurti stabilius maketus, o procentiniai rodikliai suteikia jums laisvę kurti reaguojančius dizainus, kurie prisitaiko prie skirtingų ekranų dydžių. Šių metodų derinys leidžia sukurti dinamiškas ir patrauklias interneto svetaines.
Dažniausiai užduodami klausimai
Kaip apibrėžti fiksuotą aukštį elementui?Nustatykite height CSS fiksuotą reikšmę pikseliais.
Kas atsitiks, jei nurodysiu plotį procentais?Elementas bus skalinamas atsižvelgiant į viršutinio elemento plotį.
Kodėl turėčiau naudoti reaguojančius dizainus?Reaguojantis dizainas užtikrina, kad jūsų svetainė gerai atrodytų įvairiuose įrenginiuose.
Kaip pikselių reikšmės veikia išdėstymą išmaniuosiuose telefonuose?Fiksuoti pikselių dydžiai gali sukelti turinio užsilikimą už ekrano ribų.
Ar galiu derinti tiek fiksuotus, tiek procentinius aukščius?Taip, derinant abi reikšmes galite sukurti lankstesnius ir patrauklesnius išdėstymus.
