Styling with CSS · 用 CSS 设置样式
| English | 中文 | Pinyin · 拼音 |
|---|---|---|
| padding/ˈpædɪŋ/ | 内边距 | nèi biān jù |
| border/ˈbɔːdə/ | 边框 | biān kuāng |
| CSS/ˌsiː es ˈes/ | 层叠样式表 | céng dié yàng shì biǎo |
| selector/sɪˈlektə/ | 选择器 | xuǎn zé qì |
| declaration/ˌdekləˈreɪʃn/ | 声明 | shēng míng |
| the box model/ðə bɒks ˈmɒdl/ | 盒模型 | hé mó xíng |
| margin/ˈmɑːdʒɪn/ | 外边距 | wài biān jù |
| responsive design/rɪˈspɒnsɪv dɪˈzaɪn/ | 响应式设计 | xiǎng yìng shì shè jì |
| media query/ˈmiːdiːə ˈkwɪərɪ/ | 媒体查询 | méi tǐ chá xún |
A 320-pixel card still overflows a 320-pixel screen
- The card's declared width is not always its total width. Padding and borders can add space outside the content width.
- CSS 层叠样式表 applies presentation rules. A selector 选择器 chooses elements; a declaration 声明 gives a property and value, such as
color: navy.
Give one practical reason for keeping reusable presentation rules in a stylesheet.
Example: “A shared stylesheet lets us update matching cards consistently without editing every HTML element.”
Account for every part of the box
- The box model 盒模型 has content, padding 内边距, border 边框 and margin 外边距. Padding and border are inside the painted box; margin separates it from neighbours.
- With
content-box, width 320 px, padding 16 px on both sides and borders 2 px on both sides give 356 px before margins. Withborder-box, the declared 320 px includes that padding and border.
Arrange the box-model areas from the content outward.
Padding and border surround the content; margin separates the box from neighbours.
With content-box, content width is 320 px, left/right padding is 16 px each and left/right border is 2 px each. What is the width before margins, in pixels?
320 + 16 + 16 + 2 + 2 = 356 px.
Make the width flexible
- Responsive design 响应式设计 adapts content and layout to available space. This card fills its container up to 400 px, with padding and border included.
- Use the rule on an element with
class="card". Long unbroken content, parent margins and other rules still need checking; one declaration cannot guarantee the whole page fits.
.card {
box-sizing: border-box;
width: 100%;
max-width: 400px;
padding: 16px;
border: 2px solid currentColor;
overflow-wrap: anywhere;
}
Inside a 280 px container, this card is 280 px wide including its padding and border. Inside a 700 px container, it stops at 400 px. Its outer margins are still additional space.
A padded card should fill its container up to 400 px including its borders. Which rule set best fits?
border-box includes padding and borders in the declared width. Parent layout and content still need testing.
Change layout only when it needs to change
- A media query 媒体查询 applies rules under a condition. For example, change two columns to one when they become too narrow to read.
- Choose the breakpoint from the content, then test several widths and larger text. Do not assume that all phones or all laptops have the same usable width.
Inspect the rule that actually wins
- The cascade considers factors including origin, importance and layers before selector specificity. For otherwise comparable rules, an ID is more specific than a class; a class is more specific than an element selector.
- When comparable rules have equal specificity, later source order can decide. Use browser developer tools to check matched rules, the loaded stylesheet and computed values.
!important participates in the cascade; it does not break CSS. Avoid using it as an unexplained patch. Check the cause first: a missing stylesheet, invalid declaration or overriding rule may all explain an unexpected result.
Two normal rules in the same origin and layer use the identical selector .card and set conflicting colours. No other deciding factors differ. Which colour wins?
Equal specificity does not make order irrelevant. For comparable tied rules, later source order decides.
!important is part of CSS cascade rules, but should not be used as an unexplained patch.
Importance affects precedence. Inspect the conflict and use it deliberately rather than claiming it breaks CSS.
Match the observation to the next useful check.
Inspect the actual cause rather than assuming all failures come from specificity.
Test the box and the reading experience
- Try narrow and wide containers, keyboard focus and enlarged text. Check that text is readable in both colour themes and that content can wrap.
- Explain one overflow repair using the box calculation and one style conflict using the actual matching rules.
Calculate the whole box, prefer flexible sizes, then inspect the cascade. Specificity matters, but it is not the only deciding factor.
Source: W3C CSS cascade.
A card fits at normal text size but overflows when text is enlarged. What should you do?
Responsive behaviour includes changing text and content constraints, not only one viewport screenshot.