Teknologian jakaminen

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Ominaisuudet laatikkomallissa

pehmuste

padding Käytetään säätämään elementin sisällön ja reunuksen välistä tilaa. Täytön yksikkö voi olla pikseliä (px), prosenttiyksikköä (%) jne.

.element {
    padding: 10px; /* 上下左右的内边距都为10像素 */
    padding-top: 20px; /* 上边距为20像素 */
    padding-right: 15px; /* 右边距为15像素 */
    padding-bottom: 10px; /* 下边距为10像素 */
    padding-left: 5px; /* 左边距为5像素 */
}
1
2
3
4
5
6
7

rajaa

border Käytetään elementin reunan asettamiseen, mukaan lukien reunuksen leveys, tyyli ja väri.

.element {
    border: 2px solid #000; /* 设置2像素宽的实线黑色边框 */
    border-width: 2px; /* 设置边框宽度 */
    border-style: solid; /* 设置边框样式 */
    border-color: #000; /* 设置边框颜色 */
    border-radius: 5px; /* 设置圆角边框 */
}
1
2
3
4
5
6
7

koko attribuutti

leveys

width Käytetään elementin leveyden asettamiseen Yksikkö voi olla pikseliä (px), prosenttiyksikköä (%), näkymän leveyden yksikköä (vw) jne.width Asettaa vain sisältöalueen leveyden, pois lukien täyte, reunukset ja marginaalit.

.element {
    width: 200px; /* 设置宽度为200像素 */
    width: 50%; /* 设置宽度为父元素宽度的50% */
}
1
2
3
4

korkeus

height Käytetään elementin korkeuden asettamiseen Yksikkö voi olla pikseliä (px), prosenttiyksikköä (%), näkymän korkeusyksikköä (vh) jne.height Asettaa vain sisältöalueen korkeuden, pois lukien täyte, reunukset ja marginaalit.

.element {
    height: 100px; /* 设置高度为100像素 */
    height: 50%; /* 设置高度为父元素高度的50% */
}
1
2
3
4

Asetteluominaisuudet

näyttö

display Ominaisuuksia käytetään määrittämään elementin näyttötyyppi. Yleisiä arvoja ovat:

• block: Lohkotason elementit kattavat ylätason säilön koko leveyden ja rivitetään oletuksena.
• inline: Sisäiset elementit täyttävät vain sisällön leveyden, eivätkä ne rivity.
• inline-block: Upotetut lohkotason elementit järjestetään kuten upotetut elementit, mutta leveys ja korkeus voidaan asettaa.
• none: Piilotetut elementit eivät näy sivulla eivätkä vie tilaa.
• flex: Ota käyttöön joustava laatikon asettelu ja järjestä alatason elementit riville.
• grid: Mahdollistaa ruudukon asettelun ja alielementtien järjestämisen ruudukossa.

.element-block {
    display: block; /* 设置为块级元素 */
}

.element-inline {
    display: inline; /* 设置为内联元素 */
}

.element-inline-block {
    display: inline-block; /* 设置为内联块级元素 */
}

.element-none {
    display: none; /* 隐藏元素 */
}

.container-flex {
    display: flex; /* 启用弹性布局 */
}

.container-grid {
    display: grid; /* 启用网格布局 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Yleiskatsaus

yhdistämällä padding、border、width、height jadisplay ja muita määritteitä, voit ohjata joustavasti elementtien kokoa, väliä ja asettelua. Nämä ominaisuudet ovat perusta responsiivisten ja kauniiden verkkosivujen rakentamiselle. Tässä on kattava esimerkki siitä, kuinka näitä ominaisuuksia käytetään yhdessä luomaan lohkotason elementti, jossa on täyte, reunukset ja tietty leveys ja korkeus:

.box {
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 5px solid #000;
    display: block;
}
1
2
3
4
5
6
7

Tässä esimerkissä.box Elementti on asetettu lohkotason elementiksi, jonka leveys on 300 pikseliä ja korkeus 150 pikseliä, jossa on 20 pikseliä täyte ja 5 pikseliä yhtenäinen musta reunus. Tällä asetuksella varmistetaan, että elementin sisällön ja reunuksen väliin jää riittävästi tilaa, kun taas reunus määrittelee selvästi elementin ulkorajan.

Toivottavasti näistä selityksistä on apua. Kerro minulle, jos sinulla on kysyttävää tai tarvitset lisää esimerkkejä!