Style boxSizing ominaisuus

Määrittely ja käyttö

boxSizing Ominaisuus mahdollistaa erityisellä tavalla määrittämisen tietyn alueen tiettyä elementtiä.

Esimerkiksi, jos tarvitset rinnakkain asettamisen kaksi reunaviivoja omaavaa laatikkoa, voit asettaa box-sizing-arvon "border-box". Tämä mahdollistaa selaimen näyttämisen määritellyllä leveydellä ja korkeudella varustetun laatikon, ja reunaviivat ja sisätilat sijoitetaan laatikkoon.

Lisäksi:

CSS viittausoppikirja:box-sizing ominaisuus

Esimerkki

Muuta boxSizing ominaisuus:

document.getElementById("myDIV").style.boxSizing = "border-box";

Kokeile itse

Syntaksi

Palauta boxSizing ominaisuus:

objekti.style.boxSizing

Aseta boxSizing ominaisuus:

objekti.style.boxSizing = "content-box|border-box|initial|inherit"

Ominaisuusarvo

Arvo Kuvaus
content-box

Oletusarvo. Tämä on CSS2.1:n määrittämä leveys- ja korkeus行为的规范。

Määritetyt leveys ja korkeus (sekä min/max ominaisuudet) sovelletaan elementin sisällön kontin leveyteen ja korkeuteen.

Elementin sisätilat ja reunaviivat sijoitetaan ja piirretään määritetyn leveyden ja korkeuden ulkopuolelle.
border-box

Elementin leveys ja korkeus määrittävät elementin reunaviivakontin.

Tämä tarkoittaa, että elementille määritetyt kaikki sisätilat ja reunaviivat piirretään asetetun leveyden ja korkeuden sisällä.

Sisällön leveys ja korkeus saadaan vähentämällä reunaviivat ja sisätilat asetetusta leveydestä ja korkeudesta.
initial Aseta tämä ominaisuus sen oletusarvoon. Katso initial。
inherit Tämä ominaisuus perii vanhemmalta elementiltään. Katso inherit。

Tekninen yksityiskohta

Oletusarvo: content-box
Palautusarvo: merkkijono, joka ilmaisee elementin box-sizing ominaisuus。
CSS-versio: CSS3

Selaintuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki