Boks og kantegenskaber af Cascading Style Sheets (CSS) - dummies

Med boksegenskaberne kan du placere stilte objekter overalt i et browservindue, placere objekter i forhold til de andre objekter på siden og anvende polstring og marginal boks stiler selektivt til nogen af ​​eller alle fire sider af det stilede objekt, såsom venstre og nederste eller øverste, venstre og højre.

Når du styler mindre end alle fire sider, skal du sørge for at tilføje 0 værdier til siderne, der ikke indeholder værdier, i stedet for at lade dem være tomme.

Bredde / højde: Brug bredde- og højdeattributterne til at indstille dimensionerne for et objekt eller en beholder som f.eks. En tabel, en tabelcelle eller et lag. Indstil attributterne til auto for at tvinge objektets størrelse til at matche indholdet af objektet eller indtaste en værdi, positiv eller negativ, i px (pixels), pc (picas), pt (point), i (tommer) mm (millimeter), cm (centimeter), em (ems), ex (exs) eller% (procent).

#rings {højde: auto; bredde: 475px;}

float: Brug denne stil til at styre siden (venstre, højre eller ingen), hvilke andre objekter vil flyde rundt om det stilede objekt.

. saleitems {float: right;}

clear: Denne funktionstype styres ofte, hvis der bruges andre objekter ud for den stilede genstand. Variabler for denne attribut inkluderer venstre, højre, begge og ingen. For eksempel, når et lag vises på siden af ​​et objekt med den angivne klare side, stødes det pågældende objekt i området under laget.

. nyheder {clear: both;}

polstring: Denne egenskab er som margen, kun med polstring, du anvender ekstra mellemrum mellem det stilede objekt og en hvilken som helst kant omkring det, som med en sætning eller et ord inde i en tabelcelle. Indstil polstringstørrelsen på venstre, højre, top og / eller nederste side ved hjælp af en hvilken som helst værdi, positiv eller negativ, i px (pixels), pc (picas), pt (punkter), i (tommer), mm (millimeter), cm (centimeter), em (ems), ex (exs) eller% (procent).

Når ensartede størrelser anvendes på alle fire sider af det stilede objekt, er kun en værdi, som i polstring: 10px;, skal opføres i erklæringen. Ellers angives værdier for alle fire sider:

. sidebarimage {polstring: 10px 0px 10px 0px;}

margin: Brug marginalegenskaben til at tilføje eller trække ekstra mellemrum mellem sidekanten (eller forældrebeholderen) og objektet bliver stylet, f.eks. området omkring et ord eller et lag. Indstil margenstørrelsen på venstre, højre, øverste og / eller nederste side ved hjælp af en hvilken som helst værdi, positiv eller negativ, i px (pixels), pc (picas), pt (punkter), i (tommer), mm (millimeter), cm (centimeter), em (ems), ex (exs) eller% (procent).

Du kan også bruge den automatiske værdi på begge sider af en stylet genstand til at centrere objektet i sin forældrebeholder. Når ensartede værdier anvendes på alle fire sider, skal kun en værdi angives i erklæringen. Ellers skal du angive værdier for alle fire sider:

#contact {margin: 0px auto 0px auto;}

Borderegenskaber definerer farven, stilen og bredden af ​​grænserne omkring enhver stilet objekt. Fordi grænserne kan gå på alle fire sider af et objekt, kan hver side have helt forskellige grænsetegn! For at opnå de bedste resultater, skal du ved at tilføje en 0 eller ingen til enhver sideegenskab, der ikke er stylet:

som med marginer og polstring. bordcel {border-top: 0px none; grænse-højre: 2px prikket # 069; border-bottom: 1px solid # 09C; border-left: 2px stiplet # 069;}

style: Du kan angive grænser i en af ​​følgende stilarter: solid, prikket, stiplet, dobbelt, rille, højderyg, indsats, start eller ingen. Stil skal angives sammen med farve og bredde.

. bordplade {border: 2px dashed # 330066;}

bredde: Du kan indstille muligheder for tykkelsen af ​​grænsen til tynd, medium eller tykt. Eller til mere præcise målinger, brug som en værdi i px (pixel), pc (picas), pt (point), i (tommer), mm (millimeter), cm (centimeter), em (ems), ex), eller% (procent. Angiv bredden sammen med farven og grænsestilen.

. bordcell {border: 1px prikket # 660033;}

farve: For at farvegrænse attributten skal du angive den hexadecimale værdi af den ønskede farve og sørg for at inkludere talesymbolet (#) før hex-værdien. Inkluder også en stiltype og bredde for grænsen.

.bordcelle {border: 5px solid # 003366 <;}