प्रौद्योगिकी साझेदारी

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

पेटी मॉडल् मध्ये गुणाः

गद्दी

padding एलिमेण्ट् सामग्रीयाः सीमायाः च मध्ये स्थानं नियन्त्रयितुं प्रयुक्तः Padding इत्येतत् एलिमेण्ट् इत्यस्य प्रत्येकस्य पार्श्वे (ऊर्ध्वं, दक्षिणं, अधः, वामम्) पृथक् सेट् कर्तुं शक्यते । पैडिंग् इत्यस्य एककं पिक्सेल (px), प्रतिशतं (%) इत्यादयः भवितुम् अर्हन्ति ।

.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

सीमा

border तत्त्वस्य सीमां सेट् कर्तुं प्रयुक्तम्, यत्र सीमायाः विस्तारः, शैली, वर्णः च सन्ति ।

.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

आकारविशेषणम्

विस्तार

width तत्त्वस्य विस्तारं सेट् कर्तुं प्रयुक्तं यूनिट् पिक्सेल (px), प्रतिशतं (%), व्यूपोर्ट् विड्थ् यूनिट् (vw), इत्यादयः भवितुम् अर्हन्ति ।width केवलं सामग्रीक्षेत्रस्य विस्तारं सेट् करोति, पैडिंग्, सीमां, मार्जिनं च विहाय ।

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

औनत्यम्‌

height तत्त्वस्य ऊर्ध्वतां सेट् कर्तुं उपयुज्यते ।height केवलं सामग्रीक्षेत्रस्य ऊर्ध्वतां सेट् करोति, पैडिंग्, सीमां, मार्जिनं च विहाय ।

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

विन्यासगुणाः

प्रदर्शन

display तत्त्वस्य प्रदर्शनप्रकारं परिभाषितुं गुणानाम् उपयोगः भवति । सामान्यमूल्यानि सन्ति- १.

• block: ब्लॉक-स्तरीय-तत्त्वानि मूल-पात्रस्य सम्पूर्ण-विस्तारं गृह्णन्ति, पूर्वनिर्धारितरूपेण च लपेटयिष्यन्ति ।
• inline: इनलाइन-तत्त्वानि केवलं स्वसामग्रीविस्तारं गृह्णन्ति, न च लपेटयिष्यन्ति ।
• inline-block: इनलाइन ब्लॉक-स्तरीय-तत्त्वानि इनलाइन-तत्त्वानि इव व्यवस्थितानि सन्ति, परन्तु विस्तारः, ऊर्ध्वता च सेट् कर्तुं शक्यते ।
• none: पृष्ठे गुप्ततत्त्वानि न दृश्यन्ते, स्थानं न गृह्णन्ति।
• flex: लचीला पेटीविन्यासं सक्षमं कुर्वन्तु तथा च बालतत्त्वानि पङ्क्तौ व्यवस्थापयन्तु।
• grid: जालविन्यासं सक्षमं करोति, जालपुटे बालतत्त्वानि व्यवस्थापयति ।

.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

अवलोकनम्

संयोगेन padding、border、width、height तथाdisplay अन्ये च विशेषताः, भवन्तः तत्त्वानां आकारं, अन्तरं, विन्यासं च लचीलतया नियन्त्रयितुं शक्नुवन्ति । एते गुणाः प्रतिक्रियाशीलानाम् सुन्दराणां च जालपुटानां निर्माणस्य आधारः भवन्ति । अत्र एकं व्यापकं उदाहरणं दर्शयति यत् एतेषां गुणानाम् एकत्र उपयोगः कथं कृत्वा पैडिंग्, सीमाः, विशिष्टविस्तारः, ऊर्ध्वता च सह ब्लॉक-स्तरीयं तत्त्वं निर्मातव्यम्:

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

अस्मिन् उदाहरणे ..box तत्त्वं ३०० पिक्सेलविस्तारेण १५० पिक्सेलस्य ऊर्ध्वता च खण्डस्तरीयतत्त्वरूपेण स्थापितं भवति, यत्र २० पिक्सेलपैडिंग्, ५ पिक्सेल ठोसकृष्णसीमा च भवति एतेन सेटिङ्ग् इत्यनेन तत्त्वस्य सामग्रीयाः सीमायाः च मध्ये पर्याप्तं स्थानं भवति इति सुनिश्चितं भवति, यदा तु सीमा तत्त्वस्य बाह्यसीमां स्पष्टतया परिभाषयति ।

आशास्ति यत् एतानि व्याख्यानानि सहायकानि भविष्यन्ति, यदि भवतः अन्ये प्रश्नाः सन्ति वा अधिकानि उदाहरणानि आवश्यकानि सन्ति तर्हि कृपया मां सूचयन्तु!