Kurso Table

Advanced CSS Tutorial

• Labas ng Manwal ng CSS
• Panimula ng CSS
• Pangunahing Syntax ng CSS
• Pang-unang Syntax ng CSS
• Panggagaling na Selector ng CSS
• Selector ng ID ng CSS
• Selector ng Class ng CSS
• Paglikha ng CSS
• Background ng CSS
• Tekstong CSS
• Font ng CSS
• Listahan ng CSS

CSS Box Model

• Ulas ng Panggagaling na Model ng Boks ng CSS
• Padding ng CSS
• Border ng CSS
• Margin ng CSS
• Pagkakasamang Margin ng CSS

CSS Positioning

• Ulas ng Pagkalokasyon ng CSS
• Relatibong Pagkalokasyon ng CSS
• Pangwakas na Pagkalokasyon ng CSS
• Pagkakalat ng CSS

CSS Selector

• Selector ng Elemento ng CSS
• Pagsasama ng Selector ng CSS
• Detalye ng Selector ng Class ng CSS
• Detalye ng Selector ng ID ng CSS
• Detalye ng Selector ng Attribute ng CSS
• Anak na Selector ng CSS
• Selector ng Anak ng Elemento ng CSS
• Selector ng Magkakasunod na Kapatid ng CSS

Pangunahing kurso

Rekomendasyon ng kurso:

• CodeW3C.com Treasure Box

Ang floating box ay maaaring lumilipat pababa o pataas, hanggang ang kanyang panlabas na gilid ay sumakop sa gilid ng kahon na naglalaman o sa gilid ng ibang floating box.

Dahil ang floating box ay hindi nasa normal na flow ng dokumento, ang mga bloke sa normal na flow ng dokumento ay magiging parang wala ang floating box.

Pagkakalat ng CSS

Tingnan ang larawan, kapag ang kahon 1 ay nanggagaling sa kanan, ito ay lumilipat mula sa normal na flow ng dokumento at lumilipat pababa hanggang ang kanyang kanang gilid ay sumakop sa kanang gilid ng kahon na naglalaman:

Tingnan ang larawan, kapag ang kahon 1 ay nanggagaling sa kaliwa, ito ay lumilipat mula sa normal na flow ng dokumento at lumilipat pababa hanggang ang kanyang kaliwang gilid ay sumakop sa kaliwang gilid ng kahon na naglalaman. Dahil hindi na ito nasa normal na flow ng dokumento, hindi ito nakakakuha ng espasyo, at sa katunayan ay tinakpan ang kahon 2, na nagiging hindi nakikita sa panoorin.

Kung ayosin ang tatlong kahon na ito sa kaliwa, ang kahon 1 ay nanggagaling sa kaliwa hanggang sumakop sa kahon na naglalaman, at ang dalawang ibang kahon ay nanggagaling sa kaliwa hanggang sumakop sa kahon na nasa harap na floating box.

Tulad ng ipinapakita sa larawan, kung ang kahon na naglalaman ay napakaliit, hindi makapagtanggap ng tatlong floating elementong nasa horizontal na pag-ayon, kaya ang ibang floating block ay lumilipat pababa hanggang mayroon ng sapat na espasyo. Kung ang taas ng floating element ay magkakaiba, maaaring maging 'nakasitahan' ng ibang floating element kapag lumilipat pababa sila:

Pagkakalat na Attribute ng CSS

Sa CSS, ginagawa namin ang pagfloat ng elemento sa pamamagitan ng property na float.

Para sa mas maraming kaalaman tungkol sa property na float, mangyaring pumunta sa reference manual:Pagkakalat na Attribute ng CSS。

Paragrapo at paglilinis

Ang paragrapo na nasa tabi ng floating box ay nabawasan, upang magbigay ng espasyo sa floating box, at ang paragrapo ay nagsasalisi sa paligid ng floating box.

Kaya, ang paglikha ng floating box ay nagbibigay ng kapahalan sa teksto sa paligid ng imahe:

Para pigilin ang pag-angat ng paragrapo sa paligid ng floating box, kinakailangang ilagay ang property sa kahon na ito. Attribute na clearAng halaga ng attribute na clear ay maaaring maging left, right, both o none, na nangangahulugan kung aling bahagi ng kahon ay hindi dapat magkasing gilid sa floating box.

Upang makuha ang ganitong epekto, ilagay sa elementong ginagamit sa paglilinis ang mga sumusunod na halaga:Mga ibabaw na margay.Magdagdag ng sapat na espasyo sa itaas, para ang itaas na gilid ng elemento ay magbaba ng patungo sa ilalim ng floating box:

Ito ay isang malaking kaagapay, na nagbibigay ng espasyo sa mga elemento sa paligid ng floating na elemento.

Hinahayaan namin na mas detalyaduhin ang floating at paglilinis. May isang imaheng hiniling ninyong ilipat sa kanan ng block ng teksto, at nais ninyong ipakilala ang imaheng iyon at ang teksto sa ibang elemento na may kulay ng background at border. Maaring isulat ninyo ang sumusunod na code:

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

Sa kaso na ito, lumitaw ng problema. Dahil ang floating na elemento ay umalis sa stream ng dokumento, ang div na nagpalibutan ng imaheng text ay hindi tumataglay ng espasyo.

Paano gagawin para ma-visualize ang napapalibutan na elemento sa visual na paligid ng floating na elemento? Kailangan ilagay ang clear: sa anumang lugar ng elemento.

Gayunpaman, lumitaw ng bagong problema, dahil walang magagamit na elemento na maaaring gamitin para sa paglilinis, kaya lang magdagdag kami ng walang laman na elemento at ililinis ito.

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

Ito ay makakamit ang aming hiniling na epekto, ngunit kailangan ng dagdag na code. Madalas mayroon na ang mga elemento na pwedeng gamitin ang clear, ngunit minsan kailangan ng walang kahulugan na tag para sa layout.

Gayunpaman, mayroon pa namin ng isa pang paraan, na ang div container ay ipfloat:

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

Ito ang aming hiniling na epekto. Pero, ang susunod na elemento ay maaaring maapektuhan ng floating na elemento. Upang lutasin ito, madalas na pinili ng iba na ipfloat ang lahat ng bagay sa layout, at gamitin ang may kahulugan na elemento (kalimitan ang pahina ng footer ng site) upang maging clear ang mga floating. Ito ay nakakatulong na mapigilan o mabawasan ang hindi kailangang tag.

Sa katunayan, lahat ng pahina sa CodeW3C.com ay gumagamit ng ganitong teknolohiya. Kapag inyong binuksan ang aming CSS file, makikita ninyo na sinigil namin ang div sa paglilingkod, at ang tatlong div na nasa itaas ay nagfloat sa kanan.

Attribute ng Clear ng CSS

Kami ay may detalyadong pagtatalakay sa prinsipyo ng paglilinis ng CSS at ang paggamit ng attribute na clear. Kung gusto ninyong matuto ng higit pa tungkol sa attribute na clear, mangyaring bisitahin ang reference manual:Attribute ng Clear ng CSS。

Toolbox

Manwal ng CSS

Halimbawa ng CSS

Quiz ng CSS

Tutorial ng CSS

Link ng Sponsor