From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/--_star_/index.html | 105 + files/zh-cn/web/css/-moz-binding/index.html | 114 + .../web/css/-moz-border-bottom-colors/index.html | 131 + files/zh-cn/web/css/-moz-image-rect/index.html | 143 + .../css/-moz-outline-radius-bottomleft/index.html | 35 + .../css/-moz-outline-radius-bottomright/index.html | 35 + .../web/css/-moz-outline-radius-topleft/index.html | 35 + .../css/-moz-outline-radius-topright/index.html | 35 + files/zh-cn/web/css/-moz-outline-radius/index.html | 97 + files/zh-cn/web/css/-moz-user-input/index.html | 60 + files/zh-cn/web/css/-ms-overflow-style/index.html | 50 + .../zh-cn/web/css/-webkit-border-before/index.html | 103 + files/zh-cn/web/css/-webkit-line-clamp/index.html | 97 + .../web/css/-webkit-mask-attachment/index.html | 103 + .../web/css/-webkit-overflow-scrolling/index.html | 88 + .../web/css/-webkit-tap-highlight-color/index.html | 35 + files/zh-cn/web/css/-webkit-text-stroke/index.html | 147 + .../zh-cn/web/css/-webkit-touch-callout/index.html | 92 + files/zh-cn/web/css/@charset/index.html | 79 + .../css/@counter-style/additive-symbols/index.html | 80 + files/zh-cn/web/css/@counter-style/index.html | 203 ++ files/zh-cn/web/css/@counter-style/pad/index.html | 86 + .../web/css/@counter-style/speak-as/index.html | 123 + files/zh-cn/web/css/@document/index.html | 86 + .../web/css/@font-face/font-display/index.html | 107 + .../web/css/@font-face/font-family/index.html | 114 + .../zh-cn/web/css/@font-face/font-style/index.html | 133 + files/zh-cn/web/css/@font-face/index.html | 178 ++ files/zh-cn/web/css/@font-face/src/index.html | 82 + .../zh-cn/web/css/@font-feature-values/index.html | 129 + files/zh-cn/web/css/@import/index.html | 124 + files/zh-cn/web/css/@keyframes/index.html | 146 + .../@media/-webkit-device-pixel-ratio/index.html | 60 + files/zh-cn/web/css/@media/any-hover/index.html | 76 + files/zh-cn/web/css/@media/any-pointer/index.html | 108 + files/zh-cn/web/css/@media/aspect-ratio/index.html | 120 + .../zh-cn/web/css/@media/device-height/index.html | 52 + files/zh-cn/web/css/@media/hover/index.html | 73 + files/zh-cn/web/css/@media/index.html | 162 + files/zh-cn/web/css/@media/orientation/index.html | 94 + .../web/css/@media/prefers-color-scheme/index.html | 111 + .../css/@media/prefers-reduced-motion/index.html | 137 + files/zh-cn/web/css/@media/width/index.html | 126 + files/zh-cn/web/css/@namespace/index.html | 133 + files/zh-cn/web/css/@page/index.html | 104 + files/zh-cn/web/css/@supports/index.html | 198 ++ files/zh-cn/web/css/@viewport/height/index.html | 79 + files/zh-cn/web/css/@viewport/index.html | 120 + .../zh-cn/web/css/@viewport/orientation/index.html | 109 + .../web/css/@viewport/viewport-fit/index.html | 66 + files/zh-cn/web/css/@viewport/width/index.html | 132 + files/zh-cn/web/css/@viewport/zoom/index.html | 68 + .../web/css/_colon_-moz-only-whitespace/index.html | 90 + .../web/css/_colon_-moz-placeholder/index.html | 66 + .../web/css/_colon_-moz-window-inactive/index.html | 102 + files/zh-cn/web/css/_colon_active/index.html | 128 + files/zh-cn/web/css/_colon_any-link/index.html | 73 + files/zh-cn/web/css/_colon_any/index.html | 189 ++ .../index.html" | 56 + files/zh-cn/web/css/_colon_checked/index.html | 198 ++ files/zh-cn/web/css/_colon_default/index.html | 135 + files/zh-cn/web/css/_colon_defined/index.html | 113 + files/zh-cn/web/css/_colon_dir/index.html | 115 + files/zh-cn/web/css/_colon_disabled/index.html | 173 ++ files/zh-cn/web/css/_colon_empty/index.html | 105 + files/zh-cn/web/css/_colon_enabled/index.html | 101 + files/zh-cn/web/css/_colon_first-child/index.html | 127 + .../zh-cn/web/css/_colon_first-of-type/index.html | 112 + files/zh-cn/web/css/_colon_first/index.html | 138 + .../zh-cn/web/css/_colon_focus-visible/index.html | 126 + files/zh-cn/web/css/_colon_focus-within/index.html | 97 + files/zh-cn/web/css/_colon_focus/index.html | 96 + files/zh-cn/web/css/_colon_fullscreen/index.html | 244 ++ files/zh-cn/web/css/_colon_has/index.html | 62 + files/zh-cn/web/css/_colon_host()/index.html | 90 + .../zh-cn/web/css/_colon_host-context()/index.html | 92 + files/zh-cn/web/css/_colon_host/index.html | 90 + files/zh-cn/web/css/_colon_hover/index.html | 192 ++ files/zh-cn/web/css/_colon_in-range/index.html | 109 + .../zh-cn/web/css/_colon_indeterminate/index.html | 125 + files/zh-cn/web/css/_colon_invalid/index.html | 135 + files/zh-cn/web/css/_colon_is/index.html | 285 ++ files/zh-cn/web/css/_colon_lang/index.html | 99 + files/zh-cn/web/css/_colon_last-child/index.html | 71 + files/zh-cn/web/css/_colon_last-of-type/index.html | 87 + files/zh-cn/web/css/_colon_left/index.html | 75 + files/zh-cn/web/css/_colon_link/index.html | 68 + files/zh-cn/web/css/_colon_not/index.html | 111 + files/zh-cn/web/css/_colon_nth-child/index.html | 218 ++ .../zh-cn/web/css/_colon_nth-last-child/index.html | 193 ++ .../web/css/_colon_nth-last-of-type/index.html | 77 + files/zh-cn/web/css/_colon_nth-of-type/index.html | 105 + files/zh-cn/web/css/_colon_only-child/index.html | 137 + files/zh-cn/web/css/_colon_only-of-type/index.html | 132 + files/zh-cn/web/css/_colon_optional/index.html | 123 + files/zh-cn/web/css/_colon_out-of-range/index.html | 111 + .../web/css/_colon_placeholder-shown/index.html | 92 + files/zh-cn/web/css/_colon_read-only/index.html | 96 + files/zh-cn/web/css/_colon_read-write/index.html | 93 + files/zh-cn/web/css/_colon_required/index.html | 110 + files/zh-cn/web/css/_colon_right/index.html | 71 + files/zh-cn/web/css/_colon_root/index.html | 105 + files/zh-cn/web/css/_colon_scope/index.html | 122 + files/zh-cn/web/css/_colon_target/index.html | 211 ++ files/zh-cn/web/css/_colon_valid/index.html | 84 + files/zh-cn/web/css/_colon_visited/index.html | 171 ++ files/zh-cn/web/css/_colon_where/index.html | 54 + .../css/_doublecolon_-moz-placeholder/index.html | 98 + .../css/_doublecolon_-moz-progress-bar/index.html | 54 + .../_doublecolon_-moz-range-progress/index.html | 73 + .../web/css/_doublecolon_-ms-check/index.html | 169 + .../web/css/_doublecolon_-ms-clear/index.html | 22 + .../_doublecolon_-webkit-progress-bar/index.html | 110 + .../index.html | 65 + .../_doublecolon_-webkit-progress-value/index.html | 67 + .../css/_doublecolon_-webkit-scrollbar/index.html | 80 + .../index.html | 47 + .../_doublecolon_-webkit-slider-thumb/index.html | 49 + files/zh-cn/web/css/_doublecolon_after/index.html | 157 + .../zh-cn/web/css/_doublecolon_backdrop/index.html | 77 + files/zh-cn/web/css/_doublecolon_before/index.html | 244 ++ files/zh-cn/web/css/_doublecolon_cue/index.html | 75 + .../web/css/_doublecolon_first-letter/index.html | 190 ++ .../web/css/_doublecolon_first-line/index.html | 208 ++ .../web/css/_doublecolon_grammar-error/index.html | 97 + files/zh-cn/web/css/_doublecolon_marker/index.html | 91 + files/zh-cn/web/css/_doublecolon_part/index.html | 126 + .../web/css/_doublecolon_placeholder/index.html | 169 + .../web/css/_doublecolon_selection/index.html | 105 + .../zh-cn/web/css/_doublecolon_slotted/index.html | 106 + .../web/css/_doublecolon_spelling-error/index.html | 64 + files/zh-cn/web/css/actual_value/index.html | 36 + .../web/css/adjacent_sibling_combinator/index.html | 84 + files/zh-cn/web/css/align-content/index.html | 294 ++ files/zh-cn/web/css/align-items/index.html | 287 ++ files/zh-cn/web/css/align-self/index.html | 171 ++ files/zh-cn/web/css/all/index.html | 173 ++ .../css/all_about_the_containing_block/index.html | 268 ++ .../web/css/alternative_style_sheets/index.html | 110 + files/zh-cn/web/css/angle-percentage/index.html | 52 + files/zh-cn/web/css/angle/index.html | 77 + files/zh-cn/web/css/animation-delay/index.html | 79 + files/zh-cn/web/css/animation-direction/index.html | 83 + files/zh-cn/web/css/animation-duration/index.html | 125 + files/zh-cn/web/css/animation-fill-mode/index.html | 189 ++ .../web/css/animation-iteration-count/index.html | 135 + files/zh-cn/web/css/animation-name/index.html | 136 + .../zh-cn/web/css/animation-play-state/index.html | 130 + .../web/css/animation-timing-function/index.html | 94 + files/zh-cn/web/css/animation/index.html | 344 +++ files/zh-cn/web/css/appearance/index.html | 1858 +++++++++++ files/zh-cn/web/css/aspect-ratio/index.html | 85 + files/zh-cn/web/css/at-rule/index.html | 61 + files/zh-cn/web/css/attr()/index.html | 309 ++ files/zh-cn/web/css/attribute_selectors/index.html | 230 ++ files/zh-cn/web/css/backdrop-filter/index.html | 145 + files/zh-cn/web/css/backface-visibility/index.html | 207 ++ .../zh-cn/web/css/background-attachment/index.html | 149 + .../zh-cn/web/css/background-blend-mode/index.html | 149 + files/zh-cn/web/css/background-clip/index.html | 127 + files/zh-cn/web/css/background-color/index.html | 183 ++ files/zh-cn/web/css/background-image/index.html | 150 + files/zh-cn/web/css/background-origin/index.html | 169 + .../zh-cn/web/css/background-position-x/index.html | 100 + .../zh-cn/web/css/background-position-y/index.html | 100 + files/zh-cn/web/css/background-position/index.html | 279 ++ files/zh-cn/web/css/background-repeat/index.html | 211 ++ files/zh-cn/web/css/background-size/index.html | 274 ++ files/zh-cn/web/css/background/index.html | 151 + files/zh-cn/web/css/basic-shape/index.html | 172 ++ files/zh-cn/web/css/blend-mode/index.html | 408 +++ files/zh-cn/web/css/block-size/index.html | 103 + files/zh-cn/web/css/border-block-end/index.html | 114 + files/zh-cn/web/css/border-block/index.html | 110 + files/zh-cn/web/css/border-bottom-color/index.html | 143 + .../web/css/border-bottom-left-radius/index.html | 270 ++ .../web/css/border-bottom-right-radius/index.html | 272 ++ files/zh-cn/web/css/border-bottom-style/index.html | 177 ++ files/zh-cn/web/css/border-bottom-width/index.html | 136 + files/zh-cn/web/css/border-bottom/index.html | 106 + files/zh-cn/web/css/border-collapse/index.html | 149 + files/zh-cn/web/css/border-color/index.html | 221 ++ files/zh-cn/web/css/border-image-outset/index.html | 127 + files/zh-cn/web/css/border-image-repeat/index.html | 123 + files/zh-cn/web/css/border-image-slice/index.html | 108 + files/zh-cn/web/css/border-image-source/index.html | 79 + files/zh-cn/web/css/border-image-width/index.html | 133 + files/zh-cn/web/css/border-image/index.html | 92 + files/zh-cn/web/css/border-inline-color/index.html | 92 + files/zh-cn/web/css/border-left-color/index.html | 104 + files/zh-cn/web/css/border-left-style/index.html | 131 + files/zh-cn/web/css/border-left-width/index.html | 143 + files/zh-cn/web/css/border-left/index.html | 157 + files/zh-cn/web/css/border-radius/index.html | 336 ++ files/zh-cn/web/css/border-right-color/index.html | 109 + files/zh-cn/web/css/border-right-style/index.html | 129 + files/zh-cn/web/css/border-right-width/index.html | 145 + files/zh-cn/web/css/border-right/index.html | 155 + files/zh-cn/web/css/border-spacing/index.html | 122 + files/zh-cn/web/css/border-style/index.html | 240 ++ files/zh-cn/web/css/border-top-color/index.html | 113 + .../web/css/border-top-left-radius/index.html | 255 ++ .../web/css/border-top-right-radius/index.html | 284 ++ files/zh-cn/web/css/border-top-style/index.html | 133 + files/zh-cn/web/css/border-top-width/index.html | 140 + files/zh-cn/web/css/border-top/index.html | 110 + files/zh-cn/web/css/border-width/index.html | 175 ++ files/zh-cn/web/css/border/index.html | 134 + files/zh-cn/web/css/bottom/index.html | 161 + .../zh-cn/web/css/box-decoration-break/index.html | 149 + files/zh-cn/web/css/box-orient/index.html | 99 + files/zh-cn/web/css/box-shadow/index.html | 183 ++ files/zh-cn/web/css/box-sizing/index.html | 146 + files/zh-cn/web/css/break-after/index.html | 191 ++ files/zh-cn/web/css/break-before/index.html | 145 + files/zh-cn/web/css/break-inside/index.html | 82 + files/zh-cn/web/css/calc()/index.html | 163 + files/zh-cn/web/css/caption-side/index.html | 147 + files/zh-cn/web/css/caret-color/index.html | 90 + files/zh-cn/web/css/cascade/index.html | 160 + files/zh-cn/web/css/child_combinator/index.html | 117 + files/zh-cn/web/css/clamp()/index.html | 121 + files/zh-cn/web/css/class_selectors/index.html | 123 + files/zh-cn/web/css/clear/index.html | 229 ++ files/zh-cn/web/css/clip-path/index.html | 611 ++++ files/zh-cn/web/css/clip/index.html | 153 + files/zh-cn/web/css/color/index.html | 159 + files/zh-cn/web/css/color_value/index.html | 1730 +++++++++++ files/zh-cn/web/css/column-count/index.html | 138 + files/zh-cn/web/css/column-fill/index.html | 114 + files/zh-cn/web/css/column-gap/index.html | 203 ++ files/zh-cn/web/css/column-rule-color/index.html | 107 + files/zh-cn/web/css/column-rule-style/index.html | 110 + files/zh-cn/web/css/column-rule-width/index.html | 109 + files/zh-cn/web/css/column-rule/index.html | 125 + files/zh-cn/web/css/column-span/index.html | 136 + files/zh-cn/web/css/column_combinator/index.html | 99 + files/zh-cn/web/css/columns/index.html | 96 + files/zh-cn/web/css/comments/index.html | 54 + .../zh-cn/web/css/common_css_questions/index.html | 183 ++ files/zh-cn/web/css/computed_value/index.html | 50 + files/zh-cn/web/css/contain/index.html | 216 ++ files/zh-cn/web/css/content/index.html | 294 ++ files/zh-cn/web/css/counter()/index.html | 145 + files/zh-cn/web/css/counter-increment/index.html | 141 + files/zh-cn/web/css/counter-reset/index.html | 116 + files/zh-cn/web/css/counters()/index.html | 188 ++ .../web/css/css_animated_properties/index.html | 15 + .../detecting_css_animation_support/index.html | 91 + files/zh-cn/web/css/css_animations/index.html | 82 + files/zh-cn/web/css/css_animations/tips/index.html | 100 + .../css_animations/using_css_animations/index.html | 359 +++ .../border-image_generator/index.html | 2628 ++++++++++++++++ .../web/css/css_background_and_borders/index.html | 154 + .../using_css_multiple_backgrounds/index.html | 59 + .../index.html" | 1599 ++++++++++ .../web/css/css_backgrounds_and_borders/index.html | 165 + .../scaling_background_images/index.html | 129 + .../using_multiple_backgrounds/index.html | 61 + .../web/css/css_basic_user_interface/index.html | 69 + .../box_alignment_in_flexbox/index.html | 117 + files/zh-cn/web/css/css_box_alignment/index.html | 255 ++ .../css_box_model/box-shadow_generator/index.html | 2880 +++++++++++++++++ files/zh-cn/web/css/css_box_model/index.html | 112 + .../introduction_to_the_css_box_model/index.html | 82 + .../mastering_margin_collapsing/index.html | 151 + files/zh-cn/web/css/css_color/index.html | 111 + .../css/css_colors/color_picker_tool/index.html | 3245 ++++++++++++++++++++ files/zh-cn/web/css/css_colors/index.html | 119 + .../basic_concepts_of_multicol/index.html | 91 + .../handling_overflow_in_multicol/index.html | 49 + files/zh-cn/web/css/css_columns/index.html | 127 + .../zh-cn/web/css/css_conditional_rules/index.html | 82 + .../using_feature_queries/index.html | 114 + files/zh-cn/web/css/css_containment/index.html | 123 + files/zh-cn/web/css/css_counter_styles/index.html | 121 + .../aligning_items_in_a_flex_container/index.html | 214 ++ .../basic_concepts_of_flexbox/index.html | 233 ++ .../index.html | 207 ++ .../index.html" | 121 + .../web/css/css_flexible_box_layout/index.html | 176 ++ .../mastering_wrapping_of_flex_items/index.html | 99 + .../css/css_flexible_box_layout/mixins/index.html | 408 +++ .../ordering_flex_items/index.html | 137 + .../using_css_flexible_boxes/index.html | 407 +++ .../index.html | 186 ++ .../index.html" | 131 + .../index.html" | 123 + .../index.html | 130 + .../flow_layout_and_overflow/index.html | 82 + .../flow_layout_and_writing_modes/index.html | 118 + files/zh-cn/web/css/css_flow_layout/index.html | 45 + .../intro_to_formatting_contexts/index.html | 90 + .../index.html" | 64 + files/zh-cn/web/css/css_fonts/index.html | 140 + .../css/css_fonts/opentype_fonts_guide/index.html | 219 ++ .../css/css_fonts/variable_fonts_guide/index.html | 221 ++ files/zh-cn/web/css/css_functions/index.html | 257 ++ .../zh-cn/web/css/css_generated_content/index.html | 57 + .../auto-placement_in_css_grid_layout/index.html | 614 ++++ .../basic_concepts_of_grid_layout/index.html | 745 +++++ .../box_alignment_in_css_grid_layout/index.html | 702 +++++ .../index.html | 502 +++ .../index.html | 452 +++ .../css_grid_layout_and_accessibility/index.html | 180 ++ .../css_grid_layout/grid_template_areas/index.html | 541 ++++ files/zh-cn/web/css/css_grid_layout/index.html | 263 ++ .../layout_using_named_grid_lines/index.html | 487 +++ .../line-based_placement_with_css_grid/index.html | 659 ++++ .../relationship_of_grid_layout/index.html | 639 ++++ .../index.html" | 593 ++++ .../basic_conceptsjie/index.html | 71 + .../web/css/css_logical_properties/index.html | 178 ++ files/zh-cn/web/css/css_masking/index.html | 133 + files/zh-cn/web/css/css_positioning/index.html | 108 + .../web/css/css_properties_reference/index.html | 311 ++ files/zh-cn/web/css/css_scroll_snap/index.html | 79 + files/zh-cn/web/css/css_scrollbars/index.html | 86 + .../css_selectors/comparison_with_xpath/index.html | 43 + files/zh-cn/web/css/css_selectors/index.html | 136 + .../web/css/css_shapes/from_box_values/index.html | 83 + files/zh-cn/web/css/css_shapes/index.html | 112 + .../css_shapes/overview_of_css_shapes/index.html | 122 + files/zh-cn/web/css/css_table/index.html | 45 + files/zh-cn/web/css/css_text/index.html | 71 + files/zh-cn/web/css/css_text_decoration/index.html | 66 + files/zh-cn/web/css/css_transforms/index.html | 48 + .../css_transforms/using_css_transforms/index.html | 81 + files/zh-cn/web/css/css_transitions/index.html | 118 + .../using_css_transitions/index.html | 1133 +++++++ files/zh-cn/web/css/css_types/index.html | 66 + .../zh-cn/web/css/css_values_and_units/index.html | 497 +++ files/zh-cn/web/css/css_writing_modes/index.html | 53 + .../css/css_\345\210\206\347\211\207/index.html" | 46 + files/zh-cn/web/css/cssom_view/index.html | 99 + .../index.html" | 178 ++ files/zh-cn/web/css/cursor/index.html | 333 ++ files/zh-cn/web/css/cursor/url/index.html | 125 + files/zh-cn/web/css/custom-ident/index.html | 119 + .../zh-cn/web/css/descendant_combinator/index.html | 109 + files/zh-cn/web/css/dimension/index.html | 74 + files/zh-cn/web/css/direction/index.html | 93 + files/zh-cn/web/css/display-box/index.html | 109 + files/zh-cn/web/css/display-internal/index.html | 74 + files/zh-cn/web/css/display-legacy/index.html | 100 + files/zh-cn/web/css/display-outside/index.html | 85 + files/zh-cn/web/css/display/index.html | 231 ++ files/zh-cn/web/css/easing-function/index.html | 242 ++ files/zh-cn/web/css/element()/index.html | 103 + files/zh-cn/web/css/empty-cells/index.html | 118 + files/zh-cn/web/css/env()/index.html | 133 + .../web/css/filter-function/blur()/index.html | 49 + .../css/filter-function/brightness()/index.html | 36 + .../web/css/filter-function/contrast()/index.html | 45 + .../css/filter-function/drop-shadow()/index.html | 65 + .../web/css/filter-function/grayscale()/index.html | 35 + files/zh-cn/web/css/filter-function/index.html | 68 + .../web/css/filter-function/opacity()/index.html | 40 + files/zh-cn/web/css/filter/index.html | 1118 +++++++ files/zh-cn/web/css/fit-content/index.html | 106 + files/zh-cn/web/css/flex-basis/index.html | 215 ++ files/zh-cn/web/css/flex-direction/index.html | 194 ++ files/zh-cn/web/css/flex-flow/index.html | 110 + files/zh-cn/web/css/flex-grow/index.html | 132 + files/zh-cn/web/css/flex-shrink/index.html | 173 ++ files/zh-cn/web/css/flex-wrap/index.html | 193 ++ files/zh-cn/web/css/flex/index.html | 299 ++ files/zh-cn/web/css/flex_value/index.html | 56 + files/zh-cn/web/css/font-family/index.html | 229 ++ .../zh-cn/web/css/font-feature-settings/index.html | 121 + files/zh-cn/web/css/font-kerning/index.html | 115 + .../web/css/font-language-override/index.html | 100 + files/zh-cn/web/css/font-size-adjust/index.html | 145 + files/zh-cn/web/css/font-size/index.html | 231 ++ files/zh-cn/web/css/font-smooth/index.html | 134 + files/zh-cn/web/css/font-stretch/index.html | 156 + files/zh-cn/web/css/font-style/index.html | 232 ++ files/zh-cn/web/css/font-synthesis/index.html | 96 + .../web/css/font-variant-alternates/index.html | 110 + files/zh-cn/web/css/font-variant-caps/index.html | 133 + .../web/css/font-variant-ligatures/index.html | 211 ++ .../zh-cn/web/css/font-variant-numeric/index.html | 138 + .../zh-cn/web/css/font-variant-position/index.html | 103 + files/zh-cn/web/css/font-variant/index.html | 121 + .../web/css/font-variation-settings/index.html | 154 + files/zh-cn/web/css/font-weight/index.html | 368 +++ files/zh-cn/web/css/font/index.html | 342 +++ files/zh-cn/web/css/frequency/index.html | 74 + files/zh-cn/web/css/gap/index.html | 211 ++ .../web/css/general_sibling_combinator/index.html | 73 + files/zh-cn/web/css/gradient/index.html | 127 + files/zh-cn/web/css/grid-area/index.html | 277 ++ files/zh-cn/web/css/grid-auto-columns/index.html | 206 ++ files/zh-cn/web/css/grid-auto-flow/index.html | 211 ++ files/zh-cn/web/css/grid-auto-rows/index.html | 205 ++ files/zh-cn/web/css/grid-column/index.html | 195 ++ files/zh-cn/web/css/grid-row/index.html | 201 ++ files/zh-cn/web/css/grid-template-areas/index.html | 214 ++ .../zh-cn/web/css/grid-template-columns/index.html | 197 ++ files/zh-cn/web/css/grid-template/index.html | 203 ++ files/zh-cn/web/css/grid/index.html | 190 ++ files/zh-cn/web/css/hanging-punctuation/index.html | 99 + files/zh-cn/web/css/height/index.html | 167 + files/zh-cn/web/css/hyphens/index.html | 812 +++++ files/zh-cn/web/css/id_selectors/index.html | 85 + files/zh-cn/web/css/image-orientation/index.html | 89 + files/zh-cn/web/css/image-rendering/index.html | 143 + files/zh-cn/web/css/image/index.html | 207 ++ files/zh-cn/web/css/index.html | 109 + files/zh-cn/web/css/inherit/index.html | 79 + files/zh-cn/web/css/inheritance/index.html | 74 + files/zh-cn/web/css/initial/index.html | 78 + files/zh-cn/web/css/initial_value/index.html | 51 + files/zh-cn/web/css/inline-size/index.html | 100 + .../web/css/inline_formatting_context/index.html | 58 + files/zh-cn/web/css/integer/index.html | 136 + files/zh-cn/web/css/isolation/index.html | 156 + files/zh-cn/web/css/justify-content/index.html | 359 +++ files/zh-cn/web/css/justify-items/index.html | 164 + files/zh-cn/web/css/justify-self/index.html | 231 ++ .../breadcrumb_navigation/index.html | 50 + .../layout_cookbook/center_an_element/index.html | 51 + .../css/layout_cookbook/column_layouts/index.html | 140 + .../layout_cookbook/contribute_a_recipe/index.html | 91 + files/zh-cn/web/css/layout_cookbook/index.html | 101 + .../layout_cookbook/split_navigation/index.html | 48 + .../\345\215\241\347\211\207/index.html" | 82 + .../index.html" | 86 + files/zh-cn/web/css/layout_mode/index.html | 27 + files/zh-cn/web/css/left/index.html | 210 ++ files/zh-cn/web/css/length-percentage/index.html | 52 + files/zh-cn/web/css/length/index.html | 270 ++ files/zh-cn/web/css/letter-spacing/index.html | 139 + files/zh-cn/web/css/line-break/index.html | 75 + files/zh-cn/web/css/line-height/index.html | 179 ++ files/zh-cn/web/css/linear-gradient()/index.html | 441 +++ files/zh-cn/web/css/list-style-image/index.html | 145 + files/zh-cn/web/css/list-style-position/index.html | 162 + files/zh-cn/web/css/list-style-type/index.html | 558 ++++ files/zh-cn/web/css/list-style/index.html | 143 + files/zh-cn/web/css/margin-block-start/index.html | 95 + files/zh-cn/web/css/margin-block/index.html | 96 + files/zh-cn/web/css/margin-bottom/index.html | 187 ++ files/zh-cn/web/css/margin-left/index.html | 209 ++ files/zh-cn/web/css/margin-right/index.html | 208 ++ files/zh-cn/web/css/margin-top/index.html | 145 + files/zh-cn/web/css/margin/index.html | 176 ++ files/zh-cn/web/css/mask-border-mode/index.html | 58 + files/zh-cn/web/css/mask-border-repeat/index.html | 74 + files/zh-cn/web/css/mask-border-slice/index.html | 126 + files/zh-cn/web/css/mask-border-width/index.html | 86 + files/zh-cn/web/css/mask-border/index.html | 105 + files/zh-cn/web/css/mask-image/index.html | 183 ++ files/zh-cn/web/css/mask-mode/index.html | 114 + files/zh-cn/web/css/mask-repeat/index.html | 186 ++ files/zh-cn/web/css/mask/index.html | 115 + files/zh-cn/web/css/max()/index.html | 120 + files/zh-cn/web/css/max-height/index.html | 117 + files/zh-cn/web/css/max-width/index.html | 214 ++ files/zh-cn/web/css/min()/index.html | 130 + files/zh-cn/web/css/min-height/index.html | 111 + files/zh-cn/web/css/min-width/index.html | 111 + files/zh-cn/web/css/minmax()/index.html | 200 ++ files/zh-cn/web/css/mix-blend-mode/index.html | 661 ++++ files/zh-cn/web/css/number/index.html | 132 + files/zh-cn/web/css/object-fit/index.html | 165 + files/zh-cn/web/css/object-position/index.html | 118 + files/zh-cn/web/css/opacity/index.html | 154 + files/zh-cn/web/css/order/index.html | 164 + files/zh-cn/web/css/outline-color/index.html | 122 + files/zh-cn/web/css/outline-offset/index.html | 137 + files/zh-cn/web/css/outline-style/index.html | 272 ++ files/zh-cn/web/css/outline-width/index.html | 133 + files/zh-cn/web/css/outline/index.html | 135 + .../guide_to_scroll_anchoring/index.html | 92 + files/zh-cn/web/css/overflow-anchor/index.html | 87 + files/zh-cn/web/css/overflow-block/index.html | 139 + files/zh-cn/web/css/overflow-clip-box/index.html | 81 + files/zh-cn/web/css/overflow-x/index.html | 74 + files/zh-cn/web/css/overflow-y/index.html | 202 ++ files/zh-cn/web/css/overflow/index.html | 236 ++ .../zh-cn/web/css/overscroll-behavior-x/index.html | 100 + .../zh-cn/web/css/overscroll-behavior-y/index.html | 85 + files/zh-cn/web/css/overscroll-behavior/index.html | 112 + files/zh-cn/web/css/padding-bottom/index.html | 147 + .../zh-cn/web/css/padding-inline-start/index.html | 142 + files/zh-cn/web/css/padding-left/index.html | 104 + files/zh-cn/web/css/padding-right/index.html | 144 + files/zh-cn/web/css/padding-top/index.html | 150 + files/zh-cn/web/css/padding/index.html | 164 + files/zh-cn/web/css/page-break-after/index.html | 199 ++ files/zh-cn/web/css/page-break-inside/index.html | 132 + files/zh-cn/web/css/paged_media/index.html | 21 + files/zh-cn/web/css/paint-order/index.html | 99 + files/zh-cn/web/css/percentage/index.html | 86 + files/zh-cn/web/css/perspective-origin/index.html | 382 +++ files/zh-cn/web/css/perspective/index.html | 253 ++ files/zh-cn/web/css/place-content/index.html | 245 ++ files/zh-cn/web/css/place-items/index.html | 281 ++ files/zh-cn/web/css/pointer-events/index.html | 148 + files/zh-cn/web/css/position/index.html | 297 ++ files/zh-cn/web/css/position_value/index.html | 164 + .../index.html | 74 + files/zh-cn/web/css/pseudo-classes/index.html | 173 ++ files/zh-cn/web/css/pseudo-elements/index.html | 102 + files/zh-cn/web/css/quotes/index.html | 144 + files/zh-cn/web/css/radial-gradient()/index.html | 191 ++ files/zh-cn/web/css/ratio/index.html | 89 + files/zh-cn/web/css/reference/index.html | 199 ++ files/zh-cn/web/css/repeat()/index.html | 143 + .../web/css/repeating-linear-gradient()/index.html | 296 ++ .../web/css/repeating-radial-gradient()/index.html | 264 ++ files/zh-cn/web/css/replaced_element/index.html | 64 + files/zh-cn/web/css/resize/index.html | 210 ++ files/zh-cn/web/css/resolution/index.html | 98 + files/zh-cn/web/css/resolved_value/index.html | 35 + files/zh-cn/web/css/right/index.html | 131 + files/zh-cn/web/css/rotate/index.html | 116 + files/zh-cn/web/css/row-gap/index.html | 153 + files/zh-cn/web/css/scale/index.html | 117 + .../web/css/scaling_of_svg_backgrounds/index.html | 326 ++ files/zh-cn/web/css/scroll-behavior/index.html | 123 + files/zh-cn/web/css/scroll-margin-top/index.html | 71 + files/zh-cn/web/css/scroll-margin/index.html | 64 + .../web/css/scroll-snap-coordinate/index.html | 201 ++ .../web/css/scroll-snap-destination/index.html | 192 ++ .../zh-cn/web/css/scroll-snap-points-x/index.html | 140 + .../zh-cn/web/css/scroll-snap-points-y/index.html | 141 + files/zh-cn/web/css/scroll-snap-type/index.html | 243 ++ files/zh-cn/web/css/scrollbar-color/index.html | 115 + files/zh-cn/web/css/scrollbar-width/index.html | 110 + files/zh-cn/web/css/selector_list/index.html | 101 + .../zh-cn/web/css/shape-image-threshold/index.html | 123 + files/zh-cn/web/css/shape-margin/index.html | 121 + files/zh-cn/web/css/shape-outside/index.html | 184 ++ .../zh-cn/web/css/shorthand_properties/index.html | 159 + files/zh-cn/web/css/specificity/index.html | 355 +++ files/zh-cn/web/css/specified_value/index.html | 22 + files/zh-cn/web/css/string/index.html | 142 + files/zh-cn/web/css/syntax/index.html | 81 + files/zh-cn/web/css/tab-size/index.html | 117 + files/zh-cn/web/css/table-layout/index.html | 117 + files/zh-cn/web/css/text-align-last/index.html | 113 + files/zh-cn/web/css/text-align/index.html | 492 +++ .../zh-cn/web/css/text-decoration-color/index.html | 113 + .../zh-cn/web/css/text-decoration-line/index.html | 109 + .../zh-cn/web/css/text-decoration-skip/index.html | 102 + .../zh-cn/web/css/text-decoration-style/index.html | 120 + files/zh-cn/web/css/text-decoration/index.html | 133 + files/zh-cn/web/css/text-indent/index.html | 116 + files/zh-cn/web/css/text-justify/index.html | 174 ++ files/zh-cn/web/css/text-orientation/index.html | 108 + files/zh-cn/web/css/text-overflow/index.html | 444 +++ files/zh-cn/web/css/text-rendering/index.html | 211 ++ files/zh-cn/web/css/text-shadow/index.html | 160 + files/zh-cn/web/css/text-size-adjust/index.html | 100 + files/zh-cn/web/css/text-transform/index.html | 434 +++ .../web/css/text-underline-position/index.html | 93 + files/zh-cn/web/css/time-percentage/index.html | 50 + files/zh-cn/web/css/time/index.html | 87 + files/zh-cn/web/css/timing-function/index.html | 265 ++ files/zh-cn/web/css/tools/index.html | 27 + files/zh-cn/web/css/top/index.html | 119 + files/zh-cn/web/css/touch-action/index.html | 134 + files/zh-cn/web/css/transform-box/index.html | 121 + files/zh-cn/web/css/transform-function/index.html | 945 ++++++ .../web/css/transform-function/matrix()/index.html | 84 + .../css/transform-function/matrix3d()/index.html | 153 + .../transform-function/perspective()/index.html | 46 + .../web/css/transform-function/rotate()/index.html | 90 + .../css/transform-function/rotate3d()/index.html | 125 + .../css/transform-function/rotatex()/index.html | 107 + .../css/transform-function/rotatey()/index.html | 107 + .../css/transform-function/rotatez()/index.html | 107 + .../web/css/transform-function/scale()/index.html | 111 + .../web/css/transform-function/scalex()/index.html | 109 + .../web/css/transform-function/scaley()/index.html | 91 + .../web/css/transform-function/skew()/index.html | 139 + .../web/css/transform-function/skewx()/index.html | 107 + .../web/css/transform-function/skewy()/index.html | 130 + .../css/transform-function/translate()/index.html | 152 + .../transform-function/translate3d()/index.html | 138 + .../css/transform-function/translatex/index.html | 129 + .../css/transform-function/translatey()/index.html | 115 + files/zh-cn/web/css/transform-origin/index.html | 457 +++ files/zh-cn/web/css/transform-style/index.html | 76 + files/zh-cn/web/css/transform/index.html | 136 + files/zh-cn/web/css/transition-delay/index.html | 398 +++ files/zh-cn/web/css/transition-duration/index.html | 383 +++ files/zh-cn/web/css/transition-property/index.html | 153 + .../web/css/transition-timing-function/index.html | 632 ++++ files/zh-cn/web/css/transition/index.html | 106 + files/zh-cn/web/css/translate/index.html | 131 + files/zh-cn/web/css/tutorials/index.html | 72 + files/zh-cn/web/css/type_selectors/index.html | 122 + files/zh-cn/web/css/unicode-bidi/index.html | 114 + files/zh-cn/web/css/universal_selectors/index.html | 142 + files/zh-cn/web/css/unset/index.html | 115 + files/zh-cn/web/css/url/index.html | 126 + files/zh-cn/web/css/used_value/index.html | 44 + files/zh-cn/web/css/user-select/index.html | 145 + .../web/css/using_css_custom_properties/index.html | 275 ++ .../web/css/value_definition_syntax/index.html | 431 +++ files/zh-cn/web/css/var()/index.html | 94 + files/zh-cn/web/css/vertical-align/index.html | 255 ++ files/zh-cn/web/css/viewport_concepts/index.html | 160 + files/zh-cn/web/css/visibility/index.html | 75 + files/zh-cn/web/css/webkit_extensions/index.html | 245 ++ files/zh-cn/web/css/white-space/index.html | 158 + files/zh-cn/web/css/widows/index.html | 117 + files/zh-cn/web/css/width/index.html | 202 ++ files/zh-cn/web/css/will-change/index.html | 164 + files/zh-cn/web/css/word-break/index.html | 140 + files/zh-cn/web/css/word-spacing/index.html | 161 + files/zh-cn/web/css/word-wrap/index.html | 147 + files/zh-cn/web/css/writing-mode/index.html | 208 ++ files/zh-cn/web/css/z-index/index.html | 139 + .../web/css/\345\201\217\347\247\273/index.html" | 97 + .../index.html" | 109 + .../index.html" | 119 + .../index.html" | 209 ++ 621 files changed, 109849 insertions(+) create mode 100644 files/zh-cn/web/css/--_star_/index.html create mode 100644 files/zh-cn/web/css/-moz-binding/index.html create mode 100644 files/zh-cn/web/css/-moz-border-bottom-colors/index.html create mode 100644 files/zh-cn/web/css/-moz-image-rect/index.html create mode 100644 files/zh-cn/web/css/-moz-outline-radius-bottomleft/index.html create mode 100644 files/zh-cn/web/css/-moz-outline-radius-bottomright/index.html create mode 100644 files/zh-cn/web/css/-moz-outline-radius-topleft/index.html create mode 100644 files/zh-cn/web/css/-moz-outline-radius-topright/index.html create mode 100644 files/zh-cn/web/css/-moz-outline-radius/index.html create mode 100644 files/zh-cn/web/css/-moz-user-input/index.html create mode 100644 files/zh-cn/web/css/-ms-overflow-style/index.html create mode 100644 files/zh-cn/web/css/-webkit-border-before/index.html create mode 100644 files/zh-cn/web/css/-webkit-line-clamp/index.html create mode 100644 files/zh-cn/web/css/-webkit-mask-attachment/index.html create mode 100644 files/zh-cn/web/css/-webkit-overflow-scrolling/index.html create mode 100644 files/zh-cn/web/css/-webkit-tap-highlight-color/index.html create mode 100644 files/zh-cn/web/css/-webkit-text-stroke/index.html create mode 100644 files/zh-cn/web/css/-webkit-touch-callout/index.html create mode 100644 files/zh-cn/web/css/@charset/index.html create mode 100644 files/zh-cn/web/css/@counter-style/additive-symbols/index.html create mode 100644 files/zh-cn/web/css/@counter-style/index.html create mode 100644 files/zh-cn/web/css/@counter-style/pad/index.html create mode 100644 files/zh-cn/web/css/@counter-style/speak-as/index.html create mode 100644 files/zh-cn/web/css/@document/index.html create mode 100644 files/zh-cn/web/css/@font-face/font-display/index.html create mode 100644 files/zh-cn/web/css/@font-face/font-family/index.html create mode 100644 files/zh-cn/web/css/@font-face/font-style/index.html create mode 100644 files/zh-cn/web/css/@font-face/index.html create mode 100644 files/zh-cn/web/css/@font-face/src/index.html create mode 100644 files/zh-cn/web/css/@font-feature-values/index.html create mode 100644 files/zh-cn/web/css/@import/index.html create mode 100644 files/zh-cn/web/css/@keyframes/index.html create mode 100644 files/zh-cn/web/css/@media/-webkit-device-pixel-ratio/index.html create mode 100644 files/zh-cn/web/css/@media/any-hover/index.html create mode 100644 files/zh-cn/web/css/@media/any-pointer/index.html create mode 100644 files/zh-cn/web/css/@media/aspect-ratio/index.html create mode 100644 files/zh-cn/web/css/@media/device-height/index.html create mode 100644 files/zh-cn/web/css/@media/hover/index.html create mode 100644 files/zh-cn/web/css/@media/index.html create mode 100644 files/zh-cn/web/css/@media/orientation/index.html create mode 100644 files/zh-cn/web/css/@media/prefers-color-scheme/index.html create mode 100644 files/zh-cn/web/css/@media/prefers-reduced-motion/index.html create mode 100644 files/zh-cn/web/css/@media/width/index.html create mode 100644 files/zh-cn/web/css/@namespace/index.html create mode 100644 files/zh-cn/web/css/@page/index.html create mode 100644 files/zh-cn/web/css/@supports/index.html create mode 100644 files/zh-cn/web/css/@viewport/height/index.html create mode 100644 files/zh-cn/web/css/@viewport/index.html create mode 100644 files/zh-cn/web/css/@viewport/orientation/index.html create mode 100644 files/zh-cn/web/css/@viewport/viewport-fit/index.html create mode 100644 files/zh-cn/web/css/@viewport/width/index.html create mode 100644 files/zh-cn/web/css/@viewport/zoom/index.html create mode 100644 files/zh-cn/web/css/_colon_-moz-only-whitespace/index.html create mode 100644 files/zh-cn/web/css/_colon_-moz-placeholder/index.html create mode 100644 files/zh-cn/web/css/_colon_-moz-window-inactive/index.html create mode 100644 files/zh-cn/web/css/_colon_active/index.html create mode 100644 files/zh-cn/web/css/_colon_any-link/index.html create mode 100644 files/zh-cn/web/css/_colon_any/index.html create mode 100644 "files/zh-cn/web/css/_colon_blank\347\251\272\347\231\275\344\274\252\347\261\273/index.html" create mode 100644 files/zh-cn/web/css/_colon_checked/index.html create mode 100644 files/zh-cn/web/css/_colon_default/index.html create mode 100644 files/zh-cn/web/css/_colon_defined/index.html create mode 100644 files/zh-cn/web/css/_colon_dir/index.html create mode 100644 files/zh-cn/web/css/_colon_disabled/index.html create mode 100644 files/zh-cn/web/css/_colon_empty/index.html create mode 100644 files/zh-cn/web/css/_colon_enabled/index.html create mode 100644 files/zh-cn/web/css/_colon_first-child/index.html create mode 100644 files/zh-cn/web/css/_colon_first-of-type/index.html create mode 100644 files/zh-cn/web/css/_colon_first/index.html create mode 100644 files/zh-cn/web/css/_colon_focus-visible/index.html create mode 100644 files/zh-cn/web/css/_colon_focus-within/index.html create mode 100644 files/zh-cn/web/css/_colon_focus/index.html create mode 100644 files/zh-cn/web/css/_colon_fullscreen/index.html create mode 100644 files/zh-cn/web/css/_colon_has/index.html create mode 100644 files/zh-cn/web/css/_colon_host()/index.html create mode 100644 files/zh-cn/web/css/_colon_host-context()/index.html create mode 100644 files/zh-cn/web/css/_colon_host/index.html create mode 100644 files/zh-cn/web/css/_colon_hover/index.html create mode 100644 files/zh-cn/web/css/_colon_in-range/index.html create mode 100644 files/zh-cn/web/css/_colon_indeterminate/index.html create mode 100644 files/zh-cn/web/css/_colon_invalid/index.html create mode 100644 files/zh-cn/web/css/_colon_is/index.html create mode 100644 files/zh-cn/web/css/_colon_lang/index.html create mode 100644 files/zh-cn/web/css/_colon_last-child/index.html create mode 100644 files/zh-cn/web/css/_colon_last-of-type/index.html create mode 100644 files/zh-cn/web/css/_colon_left/index.html create mode 100644 files/zh-cn/web/css/_colon_link/index.html create mode 100644 files/zh-cn/web/css/_colon_not/index.html create mode 100644 files/zh-cn/web/css/_colon_nth-child/index.html create mode 100644 files/zh-cn/web/css/_colon_nth-last-child/index.html create mode 100644 files/zh-cn/web/css/_colon_nth-last-of-type/index.html create mode 100644 files/zh-cn/web/css/_colon_nth-of-type/index.html create mode 100644 files/zh-cn/web/css/_colon_only-child/index.html create mode 100644 files/zh-cn/web/css/_colon_only-of-type/index.html create mode 100644 files/zh-cn/web/css/_colon_optional/index.html create mode 100644 files/zh-cn/web/css/_colon_out-of-range/index.html create mode 100644 files/zh-cn/web/css/_colon_placeholder-shown/index.html create mode 100644 files/zh-cn/web/css/_colon_read-only/index.html create mode 100644 files/zh-cn/web/css/_colon_read-write/index.html create mode 100644 files/zh-cn/web/css/_colon_required/index.html create mode 100644 files/zh-cn/web/css/_colon_right/index.html create mode 100644 files/zh-cn/web/css/_colon_root/index.html create mode 100644 files/zh-cn/web/css/_colon_scope/index.html create mode 100644 files/zh-cn/web/css/_colon_target/index.html create mode 100644 files/zh-cn/web/css/_colon_valid/index.html create mode 100644 files/zh-cn/web/css/_colon_visited/index.html create mode 100644 files/zh-cn/web/css/_colon_where/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_-moz-placeholder/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_-moz-progress-bar/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_-moz-range-progress/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_-ms-check/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_-ms-clear/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_-webkit-progress-bar/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_-webkit-progress-inner-element/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_-webkit-slider-runnable-track/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_-webkit-slider-thumb/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_after/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_backdrop/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_before/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_cue/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_first-letter/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_first-line/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_grammar-error/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_marker/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_part/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_placeholder/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_selection/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_slotted/index.html create mode 100644 files/zh-cn/web/css/_doublecolon_spelling-error/index.html create mode 100644 files/zh-cn/web/css/actual_value/index.html create mode 100644 files/zh-cn/web/css/adjacent_sibling_combinator/index.html create mode 100644 files/zh-cn/web/css/align-content/index.html create mode 100644 files/zh-cn/web/css/align-items/index.html create mode 100644 files/zh-cn/web/css/align-self/index.html create mode 100644 files/zh-cn/web/css/all/index.html create mode 100644 files/zh-cn/web/css/all_about_the_containing_block/index.html create mode 100644 files/zh-cn/web/css/alternative_style_sheets/index.html create mode 100644 files/zh-cn/web/css/angle-percentage/index.html create mode 100644 files/zh-cn/web/css/angle/index.html create mode 100644 files/zh-cn/web/css/animation-delay/index.html create mode 100644 files/zh-cn/web/css/animation-direction/index.html create mode 100644 files/zh-cn/web/css/animation-duration/index.html create mode 100644 files/zh-cn/web/css/animation-fill-mode/index.html create mode 100644 files/zh-cn/web/css/animation-iteration-count/index.html create mode 100644 files/zh-cn/web/css/animation-name/index.html create mode 100644 files/zh-cn/web/css/animation-play-state/index.html create mode 100644 files/zh-cn/web/css/animation-timing-function/index.html create mode 100644 files/zh-cn/web/css/animation/index.html create mode 100644 files/zh-cn/web/css/appearance/index.html create mode 100644 files/zh-cn/web/css/aspect-ratio/index.html create mode 100644 files/zh-cn/web/css/at-rule/index.html create mode 100644 files/zh-cn/web/css/attr()/index.html create mode 100644 files/zh-cn/web/css/attribute_selectors/index.html create mode 100644 files/zh-cn/web/css/backdrop-filter/index.html create mode 100644 files/zh-cn/web/css/backface-visibility/index.html create mode 100644 files/zh-cn/web/css/background-attachment/index.html create mode 100644 files/zh-cn/web/css/background-blend-mode/index.html create mode 100644 files/zh-cn/web/css/background-clip/index.html create mode 100644 files/zh-cn/web/css/background-color/index.html create mode 100644 files/zh-cn/web/css/background-image/index.html create mode 100644 files/zh-cn/web/css/background-origin/index.html create mode 100644 files/zh-cn/web/css/background-position-x/index.html create mode 100644 files/zh-cn/web/css/background-position-y/index.html create mode 100644 files/zh-cn/web/css/background-position/index.html create mode 100644 files/zh-cn/web/css/background-repeat/index.html create mode 100644 files/zh-cn/web/css/background-size/index.html create mode 100644 files/zh-cn/web/css/background/index.html create mode 100644 files/zh-cn/web/css/basic-shape/index.html create mode 100644 files/zh-cn/web/css/blend-mode/index.html create mode 100644 files/zh-cn/web/css/block-size/index.html create mode 100644 files/zh-cn/web/css/border-block-end/index.html create mode 100644 files/zh-cn/web/css/border-block/index.html create mode 100644 files/zh-cn/web/css/border-bottom-color/index.html create mode 100644 files/zh-cn/web/css/border-bottom-left-radius/index.html create mode 100644 files/zh-cn/web/css/border-bottom-right-radius/index.html create mode 100644 files/zh-cn/web/css/border-bottom-style/index.html create mode 100644 files/zh-cn/web/css/border-bottom-width/index.html create mode 100644 files/zh-cn/web/css/border-bottom/index.html create mode 100644 files/zh-cn/web/css/border-collapse/index.html create mode 100644 files/zh-cn/web/css/border-color/index.html create mode 100644 files/zh-cn/web/css/border-image-outset/index.html create mode 100644 files/zh-cn/web/css/border-image-repeat/index.html create mode 100644 files/zh-cn/web/css/border-image-slice/index.html create mode 100644 files/zh-cn/web/css/border-image-source/index.html create mode 100644 files/zh-cn/web/css/border-image-width/index.html create mode 100644 files/zh-cn/web/css/border-image/index.html create mode 100644 files/zh-cn/web/css/border-inline-color/index.html create mode 100644 files/zh-cn/web/css/border-left-color/index.html create mode 100644 files/zh-cn/web/css/border-left-style/index.html create mode 100644 files/zh-cn/web/css/border-left-width/index.html create mode 100644 files/zh-cn/web/css/border-left/index.html create mode 100644 files/zh-cn/web/css/border-radius/index.html create mode 100644 files/zh-cn/web/css/border-right-color/index.html create mode 100644 files/zh-cn/web/css/border-right-style/index.html create mode 100644 files/zh-cn/web/css/border-right-width/index.html create mode 100644 files/zh-cn/web/css/border-right/index.html create mode 100644 files/zh-cn/web/css/border-spacing/index.html create mode 100644 files/zh-cn/web/css/border-style/index.html create mode 100644 files/zh-cn/web/css/border-top-color/index.html create mode 100644 files/zh-cn/web/css/border-top-left-radius/index.html create mode 100644 files/zh-cn/web/css/border-top-right-radius/index.html create mode 100644 files/zh-cn/web/css/border-top-style/index.html create mode 100644 files/zh-cn/web/css/border-top-width/index.html create mode 100644 files/zh-cn/web/css/border-top/index.html create mode 100644 files/zh-cn/web/css/border-width/index.html create mode 100644 files/zh-cn/web/css/border/index.html create mode 100644 files/zh-cn/web/css/bottom/index.html create mode 100644 files/zh-cn/web/css/box-decoration-break/index.html create mode 100644 files/zh-cn/web/css/box-orient/index.html create mode 100644 files/zh-cn/web/css/box-shadow/index.html create mode 100644 files/zh-cn/web/css/box-sizing/index.html create mode 100644 files/zh-cn/web/css/break-after/index.html create mode 100644 files/zh-cn/web/css/break-before/index.html create mode 100644 files/zh-cn/web/css/break-inside/index.html create mode 100644 files/zh-cn/web/css/calc()/index.html create mode 100644 files/zh-cn/web/css/caption-side/index.html create mode 100644 files/zh-cn/web/css/caret-color/index.html create mode 100644 files/zh-cn/web/css/cascade/index.html create mode 100644 files/zh-cn/web/css/child_combinator/index.html create mode 100644 files/zh-cn/web/css/clamp()/index.html create mode 100644 files/zh-cn/web/css/class_selectors/index.html create mode 100644 files/zh-cn/web/css/clear/index.html create mode 100644 files/zh-cn/web/css/clip-path/index.html create mode 100644 files/zh-cn/web/css/clip/index.html create mode 100644 files/zh-cn/web/css/color/index.html create mode 100644 files/zh-cn/web/css/color_value/index.html create mode 100644 files/zh-cn/web/css/column-count/index.html create mode 100644 files/zh-cn/web/css/column-fill/index.html create mode 100644 files/zh-cn/web/css/column-gap/index.html create mode 100644 files/zh-cn/web/css/column-rule-color/index.html create mode 100644 files/zh-cn/web/css/column-rule-style/index.html create mode 100644 files/zh-cn/web/css/column-rule-width/index.html create mode 100644 files/zh-cn/web/css/column-rule/index.html create mode 100644 files/zh-cn/web/css/column-span/index.html create mode 100644 files/zh-cn/web/css/column_combinator/index.html create mode 100644 files/zh-cn/web/css/columns/index.html create mode 100644 files/zh-cn/web/css/comments/index.html create mode 100644 files/zh-cn/web/css/common_css_questions/index.html create mode 100644 files/zh-cn/web/css/computed_value/index.html create mode 100644 files/zh-cn/web/css/contain/index.html create mode 100644 files/zh-cn/web/css/content/index.html create mode 100644 files/zh-cn/web/css/counter()/index.html create mode 100644 files/zh-cn/web/css/counter-increment/index.html create mode 100644 files/zh-cn/web/css/counter-reset/index.html create mode 100644 files/zh-cn/web/css/counters()/index.html create mode 100644 files/zh-cn/web/css/css_animated_properties/index.html create mode 100644 files/zh-cn/web/css/css_animations/detecting_css_animation_support/index.html create mode 100644 files/zh-cn/web/css/css_animations/index.html create mode 100644 files/zh-cn/web/css/css_animations/tips/index.html create mode 100644 files/zh-cn/web/css/css_animations/using_css_animations/index.html create mode 100644 files/zh-cn/web/css/css_background_and_borders/border-image_generator/index.html create mode 100644 files/zh-cn/web/css/css_background_and_borders/index.html create mode 100644 files/zh-cn/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html create mode 100644 "files/zh-cn/web/css/css_background_and_borders/\345\234\206\350\247\222\350\276\271\346\241\206\345\217\221\347\224\237\345\231\250/index.html" create mode 100644 files/zh-cn/web/css/css_backgrounds_and_borders/index.html create mode 100644 files/zh-cn/web/css/css_backgrounds_and_borders/scaling_background_images/index.html create mode 100644 files/zh-cn/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html create mode 100644 files/zh-cn/web/css/css_basic_user_interface/index.html create mode 100644 files/zh-cn/web/css/css_box_alignment/box_alignment_in_flexbox/index.html create mode 100644 files/zh-cn/web/css/css_box_alignment/index.html create mode 100644 files/zh-cn/web/css/css_box_model/box-shadow_generator/index.html create mode 100644 files/zh-cn/web/css/css_box_model/index.html create mode 100644 files/zh-cn/web/css/css_box_model/introduction_to_the_css_box_model/index.html create mode 100644 files/zh-cn/web/css/css_box_model/mastering_margin_collapsing/index.html create mode 100644 files/zh-cn/web/css/css_color/index.html create mode 100644 files/zh-cn/web/css/css_colors/color_picker_tool/index.html create mode 100644 files/zh-cn/web/css/css_colors/index.html create mode 100644 files/zh-cn/web/css/css_columns/basic_concepts_of_multicol/index.html create mode 100644 files/zh-cn/web/css/css_columns/handling_overflow_in_multicol/index.html create mode 100644 files/zh-cn/web/css/css_columns/index.html create mode 100644 files/zh-cn/web/css/css_conditional_rules/index.html create mode 100644 files/zh-cn/web/css/css_conditional_rules/using_feature_queries/index.html create mode 100644 files/zh-cn/web/css/css_containment/index.html create mode 100644 files/zh-cn/web/css/css_counter_styles/index.html create mode 100644 files/zh-cn/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html create mode 100644 files/zh-cn/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html create mode 100644 files/zh-cn/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html create mode 100644 "files/zh-cn/web/css/css_flexible_box_layout/flexbox_\347\232\204_\345\220\221\344\270\213_\346\224\257\346\214\201/index.html" create mode 100644 files/zh-cn/web/css/css_flexible_box_layout/index.html create mode 100644 files/zh-cn/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html create mode 100644 files/zh-cn/web/css/css_flexible_box_layout/mixins/index.html create mode 100644 files/zh-cn/web/css/css_flexible_box_layout/ordering_flex_items/index.html create mode 100644 files/zh-cn/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html create mode 100644 files/zh-cn/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html create mode 100644 "files/zh-cn/web/css/css_flexible_box_layout/\345\205\270\345\236\213_\347\224\250\344\276\213_\347\232\204_flexbox/index.html" create mode 100644 "files/zh-cn/web/css/css_flexible_box_layout/\345\274\271\346\200\247\347\233\222\345\255\220\344\270\216\345\205\266\344\273\226\345\270\203\345\261\200\346\226\271\346\263\225\347\232\204\350\201\224\347\263\273/index.html" create mode 100644 files/zh-cn/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html create mode 100644 files/zh-cn/web/css/css_flow_layout/flow_layout_and_overflow/index.html create mode 100644 files/zh-cn/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html create mode 100644 files/zh-cn/web/css/css_flow_layout/index.html create mode 100644 files/zh-cn/web/css/css_flow_layout/intro_to_formatting_contexts/index.html create mode 100644 "files/zh-cn/web/css/css_flow_layout/\345\234\250flow\344\270\255\345\222\214flow\344\271\213\345\244\226/index.html" create mode 100644 files/zh-cn/web/css/css_fonts/index.html create mode 100644 files/zh-cn/web/css/css_fonts/opentype_fonts_guide/index.html create mode 100644 files/zh-cn/web/css/css_fonts/variable_fonts_guide/index.html create mode 100644 files/zh-cn/web/css/css_functions/index.html create mode 100644 files/zh-cn/web/css/css_generated_content/index.html create mode 100644 files/zh-cn/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html create mode 100644 files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html create mode 100644 files/zh-cn/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html create mode 100644 files/zh-cn/web/css/css_grid_layout/css_grid,_logical_values_and_writing_modes/index.html create mode 100644 files/zh-cn/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html create mode 100644 files/zh-cn/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html create mode 100644 files/zh-cn/web/css/css_grid_layout/grid_template_areas/index.html create mode 100644 files/zh-cn/web/css/css_grid_layout/index.html create mode 100644 files/zh-cn/web/css/css_grid_layout/layout_using_named_grid_lines/index.html create mode 100644 files/zh-cn/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html create mode 100644 files/zh-cn/web/css/css_grid_layout/relationship_of_grid_layout/index.html create mode 100644 "files/zh-cn/web/css/css_grid_layout/\345\210\251\347\224\250css\347\275\221\346\240\274\345\270\203\345\261\200\345\256\236\347\216\260\345\270\270\347\224\250\345\270\203\345\261\200/index.html" create mode 100644 files/zh-cn/web/css/css_logical_properties/basic_conceptsjie/index.html create mode 100644 files/zh-cn/web/css/css_logical_properties/index.html create mode 100644 files/zh-cn/web/css/css_masking/index.html create mode 100644 files/zh-cn/web/css/css_positioning/index.html create mode 100644 files/zh-cn/web/css/css_properties_reference/index.html create mode 100644 files/zh-cn/web/css/css_scroll_snap/index.html create mode 100644 files/zh-cn/web/css/css_scrollbars/index.html create mode 100644 files/zh-cn/web/css/css_selectors/comparison_with_xpath/index.html create mode 100644 files/zh-cn/web/css/css_selectors/index.html create mode 100644 files/zh-cn/web/css/css_shapes/from_box_values/index.html create mode 100644 files/zh-cn/web/css/css_shapes/index.html create mode 100644 files/zh-cn/web/css/css_shapes/overview_of_css_shapes/index.html create mode 100644 files/zh-cn/web/css/css_table/index.html create mode 100644 files/zh-cn/web/css/css_text/index.html create mode 100644 files/zh-cn/web/css/css_text_decoration/index.html create mode 100644 files/zh-cn/web/css/css_transforms/index.html create mode 100644 files/zh-cn/web/css/css_transforms/using_css_transforms/index.html create mode 100644 files/zh-cn/web/css/css_transitions/index.html create mode 100644 files/zh-cn/web/css/css_transitions/using_css_transitions/index.html create mode 100644 files/zh-cn/web/css/css_types/index.html create mode 100644 files/zh-cn/web/css/css_values_and_units/index.html create mode 100644 files/zh-cn/web/css/css_writing_modes/index.html create mode 100644 "files/zh-cn/web/css/css_\345\210\206\347\211\207/index.html" create mode 100644 files/zh-cn/web/css/cssom_view/index.html create mode 100644 "files/zh-cn/web/css/cssom_view/\345\235\220\346\240\207\347\263\273/index.html" create mode 100644 files/zh-cn/web/css/cursor/index.html create mode 100644 files/zh-cn/web/css/cursor/url/index.html create mode 100644 files/zh-cn/web/css/custom-ident/index.html create mode 100644 files/zh-cn/web/css/descendant_combinator/index.html create mode 100644 files/zh-cn/web/css/dimension/index.html create mode 100644 files/zh-cn/web/css/direction/index.html create mode 100644 files/zh-cn/web/css/display-box/index.html create mode 100644 files/zh-cn/web/css/display-internal/index.html create mode 100644 files/zh-cn/web/css/display-legacy/index.html create mode 100644 files/zh-cn/web/css/display-outside/index.html create mode 100644 files/zh-cn/web/css/display/index.html create mode 100644 files/zh-cn/web/css/easing-function/index.html create mode 100644 files/zh-cn/web/css/element()/index.html create mode 100644 files/zh-cn/web/css/empty-cells/index.html create mode 100644 files/zh-cn/web/css/env()/index.html create mode 100644 files/zh-cn/web/css/filter-function/blur()/index.html create mode 100644 files/zh-cn/web/css/filter-function/brightness()/index.html create mode 100644 files/zh-cn/web/css/filter-function/contrast()/index.html create mode 100644 files/zh-cn/web/css/filter-function/drop-shadow()/index.html create mode 100644 files/zh-cn/web/css/filter-function/grayscale()/index.html create mode 100644 files/zh-cn/web/css/filter-function/index.html create mode 100644 files/zh-cn/web/css/filter-function/opacity()/index.html create mode 100644 files/zh-cn/web/css/filter/index.html create mode 100644 files/zh-cn/web/css/fit-content/index.html create mode 100644 files/zh-cn/web/css/flex-basis/index.html create mode 100644 files/zh-cn/web/css/flex-direction/index.html create mode 100644 files/zh-cn/web/css/flex-flow/index.html create mode 100644 files/zh-cn/web/css/flex-grow/index.html create mode 100644 files/zh-cn/web/css/flex-shrink/index.html create mode 100644 files/zh-cn/web/css/flex-wrap/index.html create mode 100644 files/zh-cn/web/css/flex/index.html create mode 100644 files/zh-cn/web/css/flex_value/index.html create mode 100644 files/zh-cn/web/css/font-family/index.html create mode 100644 files/zh-cn/web/css/font-feature-settings/index.html create mode 100644 files/zh-cn/web/css/font-kerning/index.html create mode 100644 files/zh-cn/web/css/font-language-override/index.html create mode 100644 files/zh-cn/web/css/font-size-adjust/index.html create mode 100644 files/zh-cn/web/css/font-size/index.html create mode 100644 files/zh-cn/web/css/font-smooth/index.html create mode 100644 files/zh-cn/web/css/font-stretch/index.html create mode 100644 files/zh-cn/web/css/font-style/index.html create mode 100644 files/zh-cn/web/css/font-synthesis/index.html create mode 100644 files/zh-cn/web/css/font-variant-alternates/index.html create mode 100644 files/zh-cn/web/css/font-variant-caps/index.html create mode 100644 files/zh-cn/web/css/font-variant-ligatures/index.html create mode 100644 files/zh-cn/web/css/font-variant-numeric/index.html create mode 100644 files/zh-cn/web/css/font-variant-position/index.html create mode 100644 files/zh-cn/web/css/font-variant/index.html create mode 100644 files/zh-cn/web/css/font-variation-settings/index.html create mode 100644 files/zh-cn/web/css/font-weight/index.html create mode 100644 files/zh-cn/web/css/font/index.html create mode 100644 files/zh-cn/web/css/frequency/index.html create mode 100644 files/zh-cn/web/css/gap/index.html create mode 100644 files/zh-cn/web/css/general_sibling_combinator/index.html create mode 100644 files/zh-cn/web/css/gradient/index.html create mode 100644 files/zh-cn/web/css/grid-area/index.html create mode 100644 files/zh-cn/web/css/grid-auto-columns/index.html create mode 100644 files/zh-cn/web/css/grid-auto-flow/index.html create mode 100644 files/zh-cn/web/css/grid-auto-rows/index.html create mode 100644 files/zh-cn/web/css/grid-column/index.html create mode 100644 files/zh-cn/web/css/grid-row/index.html create mode 100644 files/zh-cn/web/css/grid-template-areas/index.html create mode 100644 files/zh-cn/web/css/grid-template-columns/index.html create mode 100644 files/zh-cn/web/css/grid-template/index.html create mode 100644 files/zh-cn/web/css/grid/index.html create mode 100644 files/zh-cn/web/css/hanging-punctuation/index.html create mode 100644 files/zh-cn/web/css/height/index.html create mode 100644 files/zh-cn/web/css/hyphens/index.html create mode 100644 files/zh-cn/web/css/id_selectors/index.html create mode 100644 files/zh-cn/web/css/image-orientation/index.html create mode 100644 files/zh-cn/web/css/image-rendering/index.html create mode 100644 files/zh-cn/web/css/image/index.html create mode 100644 files/zh-cn/web/css/index.html create mode 100644 files/zh-cn/web/css/inherit/index.html create mode 100644 files/zh-cn/web/css/inheritance/index.html create mode 100644 files/zh-cn/web/css/initial/index.html create mode 100644 files/zh-cn/web/css/initial_value/index.html create mode 100644 files/zh-cn/web/css/inline-size/index.html create mode 100644 files/zh-cn/web/css/inline_formatting_context/index.html create mode 100644 files/zh-cn/web/css/integer/index.html create mode 100644 files/zh-cn/web/css/isolation/index.html create mode 100644 files/zh-cn/web/css/justify-content/index.html create mode 100644 files/zh-cn/web/css/justify-items/index.html create mode 100644 files/zh-cn/web/css/justify-self/index.html create mode 100644 files/zh-cn/web/css/layout_cookbook/breadcrumb_navigation/index.html create mode 100644 files/zh-cn/web/css/layout_cookbook/center_an_element/index.html create mode 100644 files/zh-cn/web/css/layout_cookbook/column_layouts/index.html create mode 100644 files/zh-cn/web/css/layout_cookbook/contribute_a_recipe/index.html create mode 100644 files/zh-cn/web/css/layout_cookbook/index.html create mode 100644 files/zh-cn/web/css/layout_cookbook/split_navigation/index.html create mode 100644 "files/zh-cn/web/css/layout_cookbook/\345\215\241\347\211\207/index.html" create mode 100644 "files/zh-cn/web/css/layout_cookbook/\345\252\222\344\275\223\345\257\271\350\261\241/index.html" create mode 100644 files/zh-cn/web/css/layout_mode/index.html create mode 100644 files/zh-cn/web/css/left/index.html create mode 100644 files/zh-cn/web/css/length-percentage/index.html create mode 100644 files/zh-cn/web/css/length/index.html create mode 100644 files/zh-cn/web/css/letter-spacing/index.html create mode 100644 files/zh-cn/web/css/line-break/index.html create mode 100644 files/zh-cn/web/css/line-height/index.html create mode 100644 files/zh-cn/web/css/linear-gradient()/index.html create mode 100644 files/zh-cn/web/css/list-style-image/index.html create mode 100644 files/zh-cn/web/css/list-style-position/index.html create mode 100644 files/zh-cn/web/css/list-style-type/index.html create mode 100644 files/zh-cn/web/css/list-style/index.html create mode 100644 files/zh-cn/web/css/margin-block-start/index.html create mode 100644 files/zh-cn/web/css/margin-block/index.html create mode 100644 files/zh-cn/web/css/margin-bottom/index.html create mode 100644 files/zh-cn/web/css/margin-left/index.html create mode 100644 files/zh-cn/web/css/margin-right/index.html create mode 100644 files/zh-cn/web/css/margin-top/index.html create mode 100644 files/zh-cn/web/css/margin/index.html create mode 100644 files/zh-cn/web/css/mask-border-mode/index.html create mode 100644 files/zh-cn/web/css/mask-border-repeat/index.html create mode 100644 files/zh-cn/web/css/mask-border-slice/index.html create mode 100644 files/zh-cn/web/css/mask-border-width/index.html create mode 100644 files/zh-cn/web/css/mask-border/index.html create mode 100644 files/zh-cn/web/css/mask-image/index.html create mode 100644 files/zh-cn/web/css/mask-mode/index.html create mode 100644 files/zh-cn/web/css/mask-repeat/index.html create mode 100644 files/zh-cn/web/css/mask/index.html create mode 100644 files/zh-cn/web/css/max()/index.html create mode 100644 files/zh-cn/web/css/max-height/index.html create mode 100644 files/zh-cn/web/css/max-width/index.html create mode 100644 files/zh-cn/web/css/min()/index.html create mode 100644 files/zh-cn/web/css/min-height/index.html create mode 100644 files/zh-cn/web/css/min-width/index.html create mode 100644 files/zh-cn/web/css/minmax()/index.html create mode 100644 files/zh-cn/web/css/mix-blend-mode/index.html create mode 100644 files/zh-cn/web/css/number/index.html create mode 100644 files/zh-cn/web/css/object-fit/index.html create mode 100644 files/zh-cn/web/css/object-position/index.html create mode 100644 files/zh-cn/web/css/opacity/index.html create mode 100644 files/zh-cn/web/css/order/index.html create mode 100644 files/zh-cn/web/css/outline-color/index.html create mode 100644 files/zh-cn/web/css/outline-offset/index.html create mode 100644 files/zh-cn/web/css/outline-style/index.html create mode 100644 files/zh-cn/web/css/outline-width/index.html create mode 100644 files/zh-cn/web/css/outline/index.html create mode 100644 files/zh-cn/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html create mode 100644 files/zh-cn/web/css/overflow-anchor/index.html create mode 100644 files/zh-cn/web/css/overflow-block/index.html create mode 100644 files/zh-cn/web/css/overflow-clip-box/index.html create mode 100644 files/zh-cn/web/css/overflow-x/index.html create mode 100644 files/zh-cn/web/css/overflow-y/index.html create mode 100644 files/zh-cn/web/css/overflow/index.html create mode 100644 files/zh-cn/web/css/overscroll-behavior-x/index.html create mode 100644 files/zh-cn/web/css/overscroll-behavior-y/index.html create mode 100644 files/zh-cn/web/css/overscroll-behavior/index.html create mode 100644 files/zh-cn/web/css/padding-bottom/index.html create mode 100644 files/zh-cn/web/css/padding-inline-start/index.html create mode 100644 files/zh-cn/web/css/padding-left/index.html create mode 100644 files/zh-cn/web/css/padding-right/index.html create mode 100644 files/zh-cn/web/css/padding-top/index.html create mode 100644 files/zh-cn/web/css/padding/index.html create mode 100644 files/zh-cn/web/css/page-break-after/index.html create mode 100644 files/zh-cn/web/css/page-break-inside/index.html create mode 100644 files/zh-cn/web/css/paged_media/index.html create mode 100644 files/zh-cn/web/css/paint-order/index.html create mode 100644 files/zh-cn/web/css/percentage/index.html create mode 100644 files/zh-cn/web/css/perspective-origin/index.html create mode 100644 files/zh-cn/web/css/perspective/index.html create mode 100644 files/zh-cn/web/css/place-content/index.html create mode 100644 files/zh-cn/web/css/place-items/index.html create mode 100644 files/zh-cn/web/css/pointer-events/index.html create mode 100644 files/zh-cn/web/css/position/index.html create mode 100644 files/zh-cn/web/css/position_value/index.html create mode 100644 files/zh-cn/web/css/privacy_and_the__colon_visited_selector/index.html create mode 100644 files/zh-cn/web/css/pseudo-classes/index.html create mode 100644 files/zh-cn/web/css/pseudo-elements/index.html create mode 100644 files/zh-cn/web/css/quotes/index.html create mode 100644 files/zh-cn/web/css/radial-gradient()/index.html create mode 100644 files/zh-cn/web/css/ratio/index.html create mode 100644 files/zh-cn/web/css/reference/index.html create mode 100644 files/zh-cn/web/css/repeat()/index.html create mode 100644 files/zh-cn/web/css/repeating-linear-gradient()/index.html create mode 100644 files/zh-cn/web/css/repeating-radial-gradient()/index.html create mode 100644 files/zh-cn/web/css/replaced_element/index.html create mode 100644 files/zh-cn/web/css/resize/index.html create mode 100644 files/zh-cn/web/css/resolution/index.html create mode 100644 files/zh-cn/web/css/resolved_value/index.html create mode 100644 files/zh-cn/web/css/right/index.html create mode 100644 files/zh-cn/web/css/rotate/index.html create mode 100644 files/zh-cn/web/css/row-gap/index.html create mode 100644 files/zh-cn/web/css/scale/index.html create mode 100644 files/zh-cn/web/css/scaling_of_svg_backgrounds/index.html create mode 100644 files/zh-cn/web/css/scroll-behavior/index.html create mode 100644 files/zh-cn/web/css/scroll-margin-top/index.html create mode 100644 files/zh-cn/web/css/scroll-margin/index.html create mode 100644 files/zh-cn/web/css/scroll-snap-coordinate/index.html create mode 100644 files/zh-cn/web/css/scroll-snap-destination/index.html create mode 100644 files/zh-cn/web/css/scroll-snap-points-x/index.html create mode 100644 files/zh-cn/web/css/scroll-snap-points-y/index.html create mode 100644 files/zh-cn/web/css/scroll-snap-type/index.html create mode 100644 files/zh-cn/web/css/scrollbar-color/index.html create mode 100644 files/zh-cn/web/css/scrollbar-width/index.html create mode 100644 files/zh-cn/web/css/selector_list/index.html create mode 100644 files/zh-cn/web/css/shape-image-threshold/index.html create mode 100644 files/zh-cn/web/css/shape-margin/index.html create mode 100644 files/zh-cn/web/css/shape-outside/index.html create mode 100644 files/zh-cn/web/css/shorthand_properties/index.html create mode 100644 files/zh-cn/web/css/specificity/index.html create mode 100644 files/zh-cn/web/css/specified_value/index.html create mode 100644 files/zh-cn/web/css/string/index.html create mode 100644 files/zh-cn/web/css/syntax/index.html create mode 100644 files/zh-cn/web/css/tab-size/index.html create mode 100644 files/zh-cn/web/css/table-layout/index.html create mode 100644 files/zh-cn/web/css/text-align-last/index.html create mode 100644 files/zh-cn/web/css/text-align/index.html create mode 100644 files/zh-cn/web/css/text-decoration-color/index.html create mode 100644 files/zh-cn/web/css/text-decoration-line/index.html create mode 100644 files/zh-cn/web/css/text-decoration-skip/index.html create mode 100644 files/zh-cn/web/css/text-decoration-style/index.html create mode 100644 files/zh-cn/web/css/text-decoration/index.html create mode 100644 files/zh-cn/web/css/text-indent/index.html create mode 100644 files/zh-cn/web/css/text-justify/index.html create mode 100644 files/zh-cn/web/css/text-orientation/index.html create mode 100644 files/zh-cn/web/css/text-overflow/index.html create mode 100644 files/zh-cn/web/css/text-rendering/index.html create mode 100644 files/zh-cn/web/css/text-shadow/index.html create mode 100644 files/zh-cn/web/css/text-size-adjust/index.html create mode 100644 files/zh-cn/web/css/text-transform/index.html create mode 100644 files/zh-cn/web/css/text-underline-position/index.html create mode 100644 files/zh-cn/web/css/time-percentage/index.html create mode 100644 files/zh-cn/web/css/time/index.html create mode 100644 files/zh-cn/web/css/timing-function/index.html create mode 100644 files/zh-cn/web/css/tools/index.html create mode 100644 files/zh-cn/web/css/top/index.html create mode 100644 files/zh-cn/web/css/touch-action/index.html create mode 100644 files/zh-cn/web/css/transform-box/index.html create mode 100644 files/zh-cn/web/css/transform-function/index.html create mode 100644 files/zh-cn/web/css/transform-function/matrix()/index.html create mode 100644 files/zh-cn/web/css/transform-function/matrix3d()/index.html create mode 100644 files/zh-cn/web/css/transform-function/perspective()/index.html create mode 100644 files/zh-cn/web/css/transform-function/rotate()/index.html create mode 100644 files/zh-cn/web/css/transform-function/rotate3d()/index.html create mode 100644 files/zh-cn/web/css/transform-function/rotatex()/index.html create mode 100644 files/zh-cn/web/css/transform-function/rotatey()/index.html create mode 100644 files/zh-cn/web/css/transform-function/rotatez()/index.html create mode 100644 files/zh-cn/web/css/transform-function/scale()/index.html create mode 100644 files/zh-cn/web/css/transform-function/scalex()/index.html create mode 100644 files/zh-cn/web/css/transform-function/scaley()/index.html create mode 100644 files/zh-cn/web/css/transform-function/skew()/index.html create mode 100644 files/zh-cn/web/css/transform-function/skewx()/index.html create mode 100644 files/zh-cn/web/css/transform-function/skewy()/index.html create mode 100644 files/zh-cn/web/css/transform-function/translate()/index.html create mode 100644 files/zh-cn/web/css/transform-function/translate3d()/index.html create mode 100644 files/zh-cn/web/css/transform-function/translatex/index.html create mode 100644 files/zh-cn/web/css/transform-function/translatey()/index.html create mode 100644 files/zh-cn/web/css/transform-origin/index.html create mode 100644 files/zh-cn/web/css/transform-style/index.html create mode 100644 files/zh-cn/web/css/transform/index.html create mode 100644 files/zh-cn/web/css/transition-delay/index.html create mode 100644 files/zh-cn/web/css/transition-duration/index.html create mode 100644 files/zh-cn/web/css/transition-property/index.html create mode 100644 files/zh-cn/web/css/transition-timing-function/index.html create mode 100644 files/zh-cn/web/css/transition/index.html create mode 100644 files/zh-cn/web/css/translate/index.html create mode 100644 files/zh-cn/web/css/tutorials/index.html create mode 100644 files/zh-cn/web/css/type_selectors/index.html create mode 100644 files/zh-cn/web/css/unicode-bidi/index.html create mode 100644 files/zh-cn/web/css/universal_selectors/index.html create mode 100644 files/zh-cn/web/css/unset/index.html create mode 100644 files/zh-cn/web/css/url/index.html create mode 100644 files/zh-cn/web/css/used_value/index.html create mode 100644 files/zh-cn/web/css/user-select/index.html create mode 100644 files/zh-cn/web/css/using_css_custom_properties/index.html create mode 100644 files/zh-cn/web/css/value_definition_syntax/index.html create mode 100644 files/zh-cn/web/css/var()/index.html create mode 100644 files/zh-cn/web/css/vertical-align/index.html create mode 100644 files/zh-cn/web/css/viewport_concepts/index.html create mode 100644 files/zh-cn/web/css/visibility/index.html create mode 100644 files/zh-cn/web/css/webkit_extensions/index.html create mode 100644 files/zh-cn/web/css/white-space/index.html create mode 100644 files/zh-cn/web/css/widows/index.html create mode 100644 files/zh-cn/web/css/width/index.html create mode 100644 files/zh-cn/web/css/will-change/index.html create mode 100644 files/zh-cn/web/css/word-break/index.html create mode 100644 files/zh-cn/web/css/word-spacing/index.html create mode 100644 files/zh-cn/web/css/word-wrap/index.html create mode 100644 files/zh-cn/web/css/writing-mode/index.html create mode 100644 files/zh-cn/web/css/z-index/index.html create mode 100644 "files/zh-cn/web/css/\345\201\217\347\247\273/index.html" create mode 100644 "files/zh-cn/web/css/\345\252\222\344\275\223\346\237\245\350\257\242/index.html" create mode 100644 "files/zh-cn/web/css/\346\226\207\346\234\254\350\243\205\351\245\260\347\272\277\345\216\232\345\272\246(\347\262\227\347\273\206)/index.html" create mode 100644 "files/zh-cn/web/css/\347\275\221\346\240\274-\346\250\241\346\235\277-\345\210\227/index.html" (limited to 'files/zh-cn/web/css') diff --git a/files/zh-cn/web/css/--_star_/index.html b/files/zh-cn/web/css/--_star_/index.html new file mode 100644 index 0000000000..039eca7b94 --- /dev/null +++ b/files/zh-cn/web/css/--_star_/index.html @@ -0,0 +1,105 @@ +--- +title: 自定义属性 (--*)：CSS变量 +slug: Web/CSS/--* +tags: + - CSS + - CSS 变量 + - CSS参考 +translation_of: Web/CSS/--* +--- +
{{CSSRef}}
+ +

带有前缀--的属性名，比如--example--name，表示的是带有值的自定义属性，其可以通过 {{cssxref("var")}} 函数在全文档范围内复用的。

+ +

CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来。

+ +

{{cssinfo}}

+ +

语法

+ +
--somekeyword: left;
+--somecolor: #0000ff;
+--somecomplexvalue: 3px 6px rgb(20, 32, 54);
+
+ +
+
<declaration-value>
+
这个值将会由一个或者多个语法执行出来，只要这些语法是正确合理的，不包含非法语句。这个值就理应是有效语法执行出来的值。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +
+

HTML

+ +
<p id="firstParagraph">This paragraph should have a blue background and yellow text.</p>
+<p id="secondParagraph">This paragraph should have a yellow background and blue text.</p>
+<div id="container">
+  <p id="thirdParagraph">This paragraph should have a green background and yellow text.</p>
+</div>
+ +

CSS

+ +
:root {
+  --first-color: #488cff;
+  --second-color: #ffff8c;
+}
+
+#firstParagraph {
+  background-color: var(--first-color);
+  color: var(--second-color);
+}
+
+#secondParagraph {
+  background-color: var(--second-color);
+  color: var(--first-color);
+}
+
+#container {
+  --first-color: #48ff32;
+}
+
+#thirdParagraph {
+  background-color: var(--first-color);
+  color: var(--second-color);
+}
+ +

结果

+ +

{{EmbedLiveSample('示例', 500, 130)}}

+
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Variables", "#defining-variables", "--*")}}{{Spec2("CSS3 Variables")}}Initial definition
+ +

浏览器兼容

+ + + +

{{Compat("css.properties.custom-property")}}

+ +

参阅

+ + diff --git a/files/zh-cn/web/css/-moz-binding/index.html b/files/zh-cn/web/css/-moz-binding/index.html new file mode 100644 index 0000000000..5a26aec3c2 --- /dev/null +++ b/files/zh-cn/web/css/-moz-binding/index.html @@ -0,0 +1,114 @@ +--- +title: '-moz-binding' +slug: Web/CSS/-moz-binding +tags: + - CSS + - CSS参考 + - NeedsBrowserCompatibility + - NeedsUpdate + - XBL + - 不规范的 +translation_of: Archive/Web/CSS/-moz-binding +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

-moz-binding 属性被基于 Mozilla 的应用程序用于附加 XBL 绑定到 DOM 元素。

+ +

{{cssinfo}}

+ +

语法

+ +
/* <uri> value */
+-moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#checkbox);
+
+/* Global values */
+-moz-binding: inherited;
+-moz-binding: initial;
+-moz-binding: unset;
+
+ +

取值

+ +
+
<uri>
+
The URI for the XBL binding (including the fragment identifier).
+
none
+
No XBL binding is applied to the element.
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +
.exampleone {
+  -moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#radiobutton);
+}
+ +

规范

+ +

Not part of any specification.

+ +

浏览器兼容性

+ +
+

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

1. XBL is deprecated and being removed (See {{bug(1397874)}}).

+ +

参见

+ + +
diff --git a/files/zh-cn/web/css/-moz-border-bottom-colors/index.html b/files/zh-cn/web/css/-moz-border-bottom-colors/index.html new file mode 100644 index 0000000000..b5f5ca73d6 --- /dev/null +++ b/files/zh-cn/web/css/-moz-border-bottom-colors/index.html @@ -0,0 +1,131 @@ +--- +title: '-moz-border-bottom-colors' +slug: Web/CSS/-moz-border-bottom-colors +translation_of: Archive/Web/CSS/-moz-border-bottom-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

在Mozilla Firefox中, the -moz-border-bottom-colors CSS 属性的作用是给元素添加下边框的颜色。

+ +

When an element has a border that is larger than a single CSS pixel, each line of pixels uses the next color specified in this property, from the outside in. This eliminates the need for nested boxes. If the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified.

+ +

{{cssinfo}}

+ +

It does not apply

+ +
    +
  1. if {{Cssxref("border-style")}} is dashed or dotted.
    2. +
  2. to tables with border-collapse: collapse.
    3. +
+ +

Syntax

+ +
/* Single <color> value */
+-moz-border-bottom-colors: #f0f0f0;
+
+/* Multiple <color> values */
+-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Global values */
+-moz-border-bottom-colors: inherit;
+-moz-border-bottom-colors: initial;
+-moz-border-bottom-colors: unset;
+
+ +

Values(属性值)

+ +

Accepts a white-space separated list of color values.

+ +
+
<颜色>
+
Specifies the color of a line of pixels of the bottom border. transparent is valid. See {{cssxref("<color>")}} values for possible units.
+
none
+
Default, no colors are drawn or {{cssxref("border-color")}} is used, if specified.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +
<div id="example">Example</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Example", 120, 90)}}

+ +

Specifications

+ +

This property is not part of any specification.

+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatGeckoDesktop("1.7")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/zh-cn/web/css/-moz-image-rect/index.html b/files/zh-cn/web/css/-moz-image-rect/index.html new file mode 100644 index 0000000000..92accbc37e --- /dev/null +++ b/files/zh-cn/web/css/-moz-image-rect/index.html @@ -0,0 +1,143 @@ +--- +title: '-moz-image-rect' +slug: Web/CSS/-moz-image-rect +translation_of: Web/CSS/-moz-image-rect +--- +
{{CSSRef}}{{Non-standard_Header}}
+ +

Summary

+ +

The -moz-image-rect value for CSS {{CSSxRef("background-image")}} lets you use a portion of a larger image as a background. This allows you to, for example, use different parts of one larger image as backgrounds in different parts of your content.

+ +

This works very similarly to the {{CSSxRef("-moz-image-region")}} property, which is used with the {{CSSxRef("list-style-image")}} property to use parts of an image as the bullets in lists. However, this can be used for any CSS background.

+ +

The syntax for the rectangle is similar to the rect() function generating a {{CSSxRef("<shape>")}} CSS type. All four values are relative to the upper left corner of the image.

+ +

Syntax

+ +
-moz-image-rect({{CSSxRef("<uri>")}}, top, right, bottom, left);
+ +

Values

+ +
+
{{CSSxRef("<url>")}}
+
The URI of the image from which to take the sub-image.
+
top
+
The top edge, specified as an {{CSSxRef("<integer>")}} or {{CSSxRef("<percentage>")}}, of the sub-image within the specified image.
+
right
+
The right edge, specified as an {{CSSxRef("<integer>")}} or {{CSSxRef("<percentage>")}}, of the sub-image within the specified image.
+
bottom
+
The bottom edge, specified as an {{CSSxRef("<integer>")}} or {{CSSxRef("<percentage>")}}, of the sub-image within the specified image.
+
left
+
The left edge, specified as an {{CSSxRef("<integer>")}} or {{CSSxRef("<percentage>")}}, of the sub-image within the specified image.
+
+ +

Formal syntax

+ +
{{CSSSyntax}}
+
+ +

Example

+ +

This example loads an image and uses it in four segments to draw the Firefox logo in four {{HTMLElement("div")}} blocks. Clicking on their container causes the four segments to rotate around by swapping the {{CSSxRef("background-image")}} property values among the four {{HTMLElement("div")}} blocks.

+ +

CSS

+ +

The CSS defines one container style, then the styles for the four boxes that comprise the complete image.

+ +

The container looks like this:

+ +
#container {
+  width:267px;
+  height:272px;
+  top:100px;
+  left:100px;
+  position:absolute;
+  font-size:16px;
+  text-shadow:white 0px 0px 6px;
+  text-align:center;
+}
+ +

Then the four boxes defining the segments of the image are defined. Let's look at them one at a time.

+ +
#box1 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+
+ +

This is the top-left corner of the image. It defines a rectangle containing the top-left quarter of the image in the file firefox.jpg.

+ +
#box2 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+
+ +

This defines the top-right corner of the image.

+ +

The other corners follow a similar pattern:

+ +
#box3 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+#box4 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+
+ +

HTML

+ +

The HTML is quite simple:

+ +
<div id="container" onclick="rotate()">
+  <div id="box1" style="left:0px;top:0px;">Top left</div>
+  <div id="box2" style="left:133px;top:0px;">Top right</div>
+  <div id="box3" style="left:0px;top:136px;">Bottom left</div>
+  <div id="box4" style="left:133px;top:136px;">Bottom right</div>
+</div>
+
+ +

This places the four segments of our image in a two-by-two box grid. These four segments are all contained within a larger {{HTMLElement("div")}} block whose primary purpose is to receive click events and dispatch them to our JavaScript code.

+ +

The JavaScript code

+ +

This code handles the click event when the container receives a mouse click.

+ +
function rotate() {
+  var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
+
+  // Now that we've saved the last one, start rotating
+
+  for (var i=1; i<=4; i++) {
+    var curId = "box" + i;
+
+    // Shift the background images
+
+    var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image");
+    document.getElementById(curId).style.backgroundImage = prevStyle;
+    prevStyle = curStyle;
+  }
+}
+ +

This uses {{DOMxRef("window.getComputedStyle()")}} to fetch the style of each element, shifting it to the following element. Notice that before it begins doing so it saves a copy of the last box's style since it will be overwritten by the third element's style. By simply copying the values of the {{CSSxRef("background-image")}} property from one element to the next with each mouse click, we achieve the desired effect.

+ +

What it looks like

+ +

{{EmbedLiveSample("Example","400","400")}}

+ +

Browser compatibility

+ + + +

{{Compat("css.types.-moz-image-rect")}}

diff --git a/files/zh-cn/web/css/-moz-outline-radius-bottomleft/index.html b/files/zh-cn/web/css/-moz-outline-radius-bottomleft/index.html new file mode 100644 index 0000000000..b835080bb6 --- /dev/null +++ b/files/zh-cn/web/css/-moz-outline-radius-bottomleft/index.html @@ -0,0 +1,35 @@ +--- +title: '-moz-outline-radius-bottomleft' +slug: Web/CSS/-moz-outline-radius-bottomleft +translation_of: Web/CSS/-moz-outline-radius-bottomleft +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

在Mozilla应用中， -moz-outline-radius-bottomleft CSS 属性用于设置元素的左下角 {{cssxref("outline")}} 圆角。

+ +

{{cssinfo}}

+ +

示例

+ +

HTML

+ +
<p>看这段话的左下角。</p>
+ +

CSS

+ +
p {
+  margin: 10px;
+  border: solid cyan;
+  outline: dotted green;
+  -moz-outline-radius-bottomleft: 2em;
+}
+ +

结果

+ +

{{EmbedLiveSample("Example")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/-moz-outline-radius-bottomright/index.html b/files/zh-cn/web/css/-moz-outline-radius-bottomright/index.html new file mode 100644 index 0000000000..68e645cfa7 --- /dev/null +++ b/files/zh-cn/web/css/-moz-outline-radius-bottomright/index.html @@ -0,0 +1,35 @@ +--- +title: '-moz-outline-radius-bottomright' +slug: Web/CSS/-moz-outline-radius-bottomright +translation_of: Web/CSS/-moz-outline-radius-bottomright +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

在Mozilla应用中，-moz-outline-radius-bottomright CSS 属性用于设置元素的左下角{{cssxref("outline")}} 圆角。

+ +

{{cssinfo}}

+ +

示例

+ +

HTML

+ +
<p>看这段话的右下角。</p>
+ +

CSS

+ +
p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-bottomright: 2em;
+}
+ +

结果

+ +

{{EmbedLiveSample("Example")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/-moz-outline-radius-topleft/index.html b/files/zh-cn/web/css/-moz-outline-radius-topleft/index.html new file mode 100644 index 0000000000..9a8212a945 --- /dev/null +++ b/files/zh-cn/web/css/-moz-outline-radius-topleft/index.html @@ -0,0 +1,35 @@ +--- +title: '-moz-outline-radius-topleft' +slug: Web/CSS/-moz-outline-radius-topleft +translation_of: Web/CSS/-moz-outline-radius-topleft +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

在Mozilla应用中， -moz-outline-radius-topleft CSS 属性用于设置元素的左上角{{cssxref("outline")}} 圆角。

+ +

{{cssinfo}}

+ +

示例

+ +

HTML

+ +
<p>看这段话的左上角。</p>
+ +

CSS

+ +
p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-topleft: 2em;
+}
+ +

结果

+ +

{{EmbedLiveSample("Example")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/-moz-outline-radius-topright/index.html b/files/zh-cn/web/css/-moz-outline-radius-topright/index.html new file mode 100644 index 0000000000..73996c0855 --- /dev/null +++ b/files/zh-cn/web/css/-moz-outline-radius-topright/index.html @@ -0,0 +1,35 @@ +--- +title: '-moz-outline-radius-topright' +slug: Web/CSS/-moz-outline-radius-topright +translation_of: Web/CSS/-moz-outline-radius-topright +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

在Mozilla应用中， -moz-outline-radius-topright CSS 属性用于设置元素的右上角{{cssxref("outline")}} 圆角。

+ +

{{cssinfo}}

+ +

示例

+ +

HTML

+ +
<p>看这段话的右上角。</p>
+ +

CSS

+ +
p {
+  margin: 5px;
+  border: solid cyan;
+  outline: dotted red;
+  -moz-outline-radius-topright: 2em;
+}
+ +

结果

+ +

{{EmbedLiveSample("Example")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/-moz-outline-radius/index.html b/files/zh-cn/web/css/-moz-outline-radius/index.html new file mode 100644 index 0000000000..334e0e7da7 --- /dev/null +++ b/files/zh-cn/web/css/-moz-outline-radius/index.html @@ -0,0 +1,97 @@ +--- +title: '-moz-outline-radius' +slug: Web/CSS/-moz-outline-radius +tags: + - CSS + - CSS属性 + - CSS：Mozilla扩展 + - 非标准 +translation_of: Web/CSS/-moz-outline-radius +--- +
{{CSSRef}}{{Non-standard_Header}}
+ +

在包括Firefox在内的Mozilla的应用里， -moz-outline-radius CSS 属性可以用作给一个元素 {{cssxref("outline")}} 圆角。

+ +
/* 一个值 */
+-moz-outline-radius: 25px;
+
+/* 两个值 */
+-moz-outline-radius: 25px 1em;
+
+/* 三个值 */
+-moz-outline-radius: 25px 1em 12%;
+
+/* 四个值 */
+-moz-outline-radius: 25px 1em 12% 4mm;
+
+/* 全局值 */
+-moz-outline-radius: inherit;
+-moz-outline-radius: initial;
+-moz-outline-radius: unset;
+
+ +

这个属性是以下四个属性的简写：{{cssxref("-moz-outline-radius-topleft")}}、 {{cssxref("-moz-outline-radius-topright")}}、 {{cssxref("-moz-outline-radius-bottomright")}} 和 {{cssxref("-moz-outline-radius-bottomleft")}}。

+ +

{{cssinfo}}

+ +

语法

+ +

值

+ +
省略的 outlines 和 <percentage> 的值与 {{cssxref("border-radius")}}中描述的语法一致。
+ +

一个、两个、三个或四个 <outline-radius> 的值，代表着以下数值之一：

+ +
+
{{cssxref("<length>")}}
+
可能的值请参考 {{cssxref("<length>")}} 。
+
{{cssxref("<percentage>")}}
+
一个 {{cssxref("<percentage>")}}；详情请参考 {{cssxref("border-radius")}} 。
+
+ + + +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<p>This element has a rounded outline!</p>
+ +

CSS

+ +
p {
+  margin: 5px;
+  border: 1px solid black;
+  outline: dotted red;
+  -moz-outline-radius: 12% 1em 25px;
+}
+ +

结果

+ +

{{EmbedLiveSample('Example')}}

+ +

备注

+ + + +

规范

+ +

这个属性没有在任何CSS标准中被定义。

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.-moz-outline-radius")}}

diff --git a/files/zh-cn/web/css/-moz-user-input/index.html b/files/zh-cn/web/css/-moz-user-input/index.html new file mode 100644 index 0000000000..1478883378 --- /dev/null +++ b/files/zh-cn/web/css/-moz-user-input/index.html @@ -0,0 +1,60 @@ +--- +title: '-moz-user-input' +slug: Web/CSS/-moz-user-input +translation_of: Web/CSS/-moz-user-input +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Summary

+ +

在Mozilla应用程序中, -moz-user-input 决定元素是否将接受用户输入。 A 类似的属性 user-focus 是在CSS3 UI规范的前身的早期草案中提出的，但被工作组拒绝。

+ +

{{cssinfo}}

+ +

-moz-user-input was one of the proposals leading to the proposed CSS 3 {{cssxref("user-input")}} property, which has not yet reached Candidate Recommendation (call for implementations).

+ +

For elements that normally take user input, such as a {{HTMLElement("textarea")}}, the initial value of -moz-user-input is enabled.

+ +

Syntax

+ +
/* Keyword values */
+-moz-user-input: none;
+-moz-user-input: enabled;
+-moz-user-input: disabled;
+
+/* Global values */
+-moz-user-input: inherit;
+-moz-user-input: initial;
+-moz-user-input: unset;
+
+ +

Values

+ +
+
none
+
The element does not respond to user input, and it does not become {{Cssxref(":active")}}.
+
enabled
+
The element accepts user input. For textboxes, this is the default behavior.
+
disabled
+
The element does not accept user input. However, this is not the same as setting {{XULAttr("disabled")}} to true, in that the element is drawn normally.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
input.example {
+  /* the user will be able to select the text, but not change it. */
+  -moz-user-input: disabled;
+}
+
+ +

See also

+ + diff --git a/files/zh-cn/web/css/-ms-overflow-style/index.html b/files/zh-cn/web/css/-ms-overflow-style/index.html new file mode 100644 index 0000000000..895b1cf043 --- /dev/null +++ b/files/zh-cn/web/css/-ms-overflow-style/index.html @@ -0,0 +1,50 @@ +--- +title: '-ms-overflow-style' +slug: Web/CSS/-ms-overflow-style +tags: + - CSS + - CSS属性 + - 参考 +translation_of: Archive/Web/CSS/-ms-overflow-style +--- +
{{CSSRef}}
+ +
{{non-standard_header}}
+ +
+ +

-ms-overflow-style 的CSS 属性是一个 Microsoft extension 用于控制元素内容溢出时滚动条的行为。

+ +

{{cssinfo}}

+ +

语法

+ +

Values

+ +
+
auto
+
  初始值等同于inherit.
+
+
none
+
永远不会显示滚动条，但是如果元素的内容溢出，仍然可以滚动元素。
+
scrollbar
+
如果元素的内容溢出，则显示“传统”滚动条。“传统的”滚动条不会自动隐藏，也不会覆盖元素的内容。因此，内容的布局区域的大小将通过滚动条的宽度(垂直滚动条)或高度(水平滚动条)来减少。
+
-ms-autohiding-scrollbar
+
如果元素的内容溢出，则使用自动隐藏滚动条。自动隐藏滚动条在滚动期间或指针与页面交互后不久显示，在滚动和指针交互停止后不久隐藏。当它们可见时，自动隐藏的滚动条会覆盖元素的内容。
+
+ +

语法形式

+ +
  {{csssyntax}}
+
+ +

说明书

+ +

不是任何规范的一部分

+ +

另请参阅

+ + diff --git a/files/zh-cn/web/css/-webkit-border-before/index.html b/files/zh-cn/web/css/-webkit-border-before/index.html new file mode 100644 index 0000000000..2d0b51372f --- /dev/null +++ b/files/zh-cn/web/css/-webkit-border-before/index.html @@ -0,0 +1,103 @@ +--- +title: '-webkit-border-before' +slug: Web/CSS/-webkit-border-before +tags: + - '-webkit-border-before' + - CSS + - 'CSS:WebKit Extensions' + - CSS属性 + - Reference + - 非标准 +translation_of: Web/CSS/-webkit-border-before +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

-webkit-border-before CSS 属性 是一种用于简写的属性。它用于在样式表的单个位置设置各个起始边框属性值。

+ +
/* Border values */
+-webkit-border-before: 1px;
+-webkit-border-before: 2px dotted;
+-webkit-border-before: medium dashed blue;
+
+/* Global values */
+-webkit-border-before: inherit;
+-webkit-border-before: initial;
+-webkit-border-before: unset;
+
+ +

-webkit-border-before 可以使用以下一个或多个值:

+ +
    +
  1. {{cssxref("-webkit-border-before-width")}}
    2. +
  2. {{cssxref("-webkit-border-before-style")}}
    3. +
  3. {{cssxref("-webkit-border-before-color")}}.
    4. +
+ +

它根据元素的书写模式、方向以及文本方向映射到Border上. 对应到四个边框属性{{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}或{{cssxref("border-left")}} ，具体取决于 {{cssxref("writing-mode")}}、{{cssxref("direction")}}、{{cssxref("text-orientation")}}三个属性定义的值。

+ +

这个属性和 {{cssxref("-webkit-border-after")}}、{{cssxref("-webkit-border-start")}}、{{cssxref("-webkit-border-end")}}三个属性用来定义元素的边界。

+ +

此属性在相关标准上的命名为 {{cssxref("border-block-start")}}.

+ +

{{cssinfo}}

+ +

语法

+ +

可选择的值

+ +

按以下顺序，一个或多个值

+ +
+
<'border-width'>
+
参考 {{cssxref("border-width")}}
+
<'border-style'>
+
参考 {{cssxref("border-style")}}
+
<'color'>
+
参考 {{cssxref("color")}}
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  -webkit-border-before: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

规范

+ +

尽管它和 {{cssxref("border-block-start")}} 属性有关，但现在并不存在与任何一标准规范。

+ +

兼容性

+ + + +

{{Compat("css.properties.-webkit-border-before")}}

+ +

参考

+ + diff --git a/files/zh-cn/web/css/-webkit-line-clamp/index.html b/files/zh-cn/web/css/-webkit-line-clamp/index.html new file mode 100644 index 0000000000..ec8c7b0d89 --- /dev/null +++ b/files/zh-cn/web/css/-webkit-line-clamp/index.html @@ -0,0 +1,97 @@ +--- +title: '-webkit-line-clamp' +slug: Web/CSS/-webkit-line-clamp +translation_of: Web/CSS/-webkit-line-clamp +--- +

{{CSSRef}}

+ +

-webkit-line-clamp CSS 属性 可以把 {{Glossary("块容器")}} 中的内容限制为指定的行数.

+ +

它只有在 {{cssxref("display")}} 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 {{cssxref("-webkit-box-orient")}} 属性设置成 vertical时才有效果

+ +

在大部分情况下,也需要设置 {{cssxref("overflow")}} 属性为 hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ).

+ +

当他应用于锚(anchor)元素时,截取动作可以发生在文本中间,而不必在末尾.

+ +
+

注意: 此属性在WebKit 中已经实现,但有一些问题.他是旧标准的一种支持.CSS Overflow Module Level 3 规范还定义了一个 {{cssxref("line-clamp")}} 属性, 用来代替此属性且避免一些问题.

+
+ +

语法

+ +
/* Keyword value */
+-webkit-line-clamp: none;
+
+/* <integer> values */
+-webkit-line-clamp: 3;
+-webkit-line-clamp: 10;
+
+/* Global values */
+-webkit-line-clamp: inherit;
+-webkit-line-clamp: initial;
+-webkit-line-clamp: unset;
+
+ +
+
none
+
这个值表明内容显示不会被限制.
+
{{cssxref("integer")}}
+
这个值表明内容显示了多少行之后会被限制.必须大于0.
+
+ +

例子

+ +

HTML

+ +
<p>
+  In this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is clamped after three lines.
+  An ellipsis will be shown at the point where the text is clamped.
+</p>
+ +

CSS

+ +
p {
+  width: 300px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+ +

结果

+ +

{{EmbedLiveSample("例子", "100%", "100")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Overflow", "#propdef--webkit-line-clamp", "-webkit-line-clamp")}}{{Spec2("CSS3 Overflow")}}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.-webkit-line-clamp")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/css/-webkit-mask-attachment/index.html b/files/zh-cn/web/css/-webkit-mask-attachment/index.html new file mode 100644 index 0000000000..82e4440a9f --- /dev/null +++ b/files/zh-cn/web/css/-webkit-mask-attachment/index.html @@ -0,0 +1,103 @@ +--- +title: '-webkit-mask-attachment' +slug: Web/CSS/-webkit-mask-attachment +translation_of: Web/CSS/-webkit-mask-attachment +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

如果使用了 {{Cssxref("-webkit-mask-image")}}, -webkit-mask-attachment 将指定蒙版在视口的位置是固定的，还是同包含块一起滚动的。

+ +
/* 关键字 */
+-webkit-mask-attachment: scroll;
+-webkit-mask-attachment: fixed;
+-webkit-mask-attachment: local;
+
+/* 多个值 */
+-webkit-mask-attachment: scroll, local;
+-webkit-mask-attachment: fixed, local, scroll;
+
+/* 全局值 */
+-webkit-mask-attachment: inherit;
+-webkit-mask-attachment: initial;
+-webkit-mask-attachment: unset;
+
+ +

{{cssinfo}}

+ +

语法

+ +

可用的值

+ +
+
scroll
+
使用 scroll 时, 蒙版在视口中同包含它的块一起滚动。
+
fixed
+
使用 fixed 时, 蒙版不会同包含它的元素一起滚动，而是在视口中固定不动。
+
+ +

使用语法

+ +
{{csssyntax}}
+ +

示例

+ +
body {
+  -webkit-mask-image: url('images/mask.png');
+  -webkit-mask-attachment: fixed;
+}
+
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}
+ {{CompatNo}} 24.0		{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatNo}}{{CompatNo}}{{CompatNo}}3.2
+
+ +

另见

+ +

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}

diff --git a/files/zh-cn/web/css/-webkit-overflow-scrolling/index.html b/files/zh-cn/web/css/-webkit-overflow-scrolling/index.html new file mode 100644 index 0000000000..33c9fd5ed1 --- /dev/null +++ b/files/zh-cn/web/css/-webkit-overflow-scrolling/index.html @@ -0,0 +1,88 @@ +--- +title: '-webkit-overflow-scrolling' +slug: Web/CSS/-webkit-overflow-scrolling +tags: + - CSS + - Non-standard + - Reference +translation_of: Web/CSS/-webkit-overflow-scrolling +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

概述

+ +

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.

+ +

值

+ +
+
auto
+
使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
+
touch
+
使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
+
+

示例

+ + 
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */
+
+-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */
+
+
+
+ +

规范

+ +

尚未有相关规范。另在Apple提供的Safari CSS 参考文档中有所提及。

+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+ + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}5.0
+ +

相关链接：

+ + diff --git a/files/zh-cn/web/css/-webkit-tap-highlight-color/index.html b/files/zh-cn/web/css/-webkit-tap-highlight-color/index.html new file mode 100644 index 0000000000..59f16b6fca --- /dev/null +++ b/files/zh-cn/web/css/-webkit-tap-highlight-color/index.html @@ -0,0 +1,35 @@ +--- +title: '-webkit-tap-highlight-color' +slug: Web/CSS/-webkit-tap-highlight-color +translation_of: Web/CSS/-webkit-tap-highlight-color +--- +
{{ CSSRef() }}
+ +

{{ Non-standard_header() }}

+ +

简介

+ +

-webkit-tap-highlight-color 是一个没有标准化的属性，能够设置点击链接的时候出现的高亮颜色。显示给用户的高光是他们成功点击的标识，以及暗示了他们点击的元素。

+ +

{{cssinfo}}

+ +

Syntax

+ +
-webkit-tap-highlight-color: red;
+
+ +

值

+ +

A {{Cssxref("color value")}}.

+ +

基本语法

+ +
{{csssyntax}}
+ +

规范

+ +

不属于规范的一部分. Apple 有自己的safari web 内容指南的文档。

+ +

浏览器兼容

+ +

webkit/safari, Blink/Chrome, 以及IE的一些版本。

diff --git a/files/zh-cn/web/css/-webkit-text-stroke/index.html b/files/zh-cn/web/css/-webkit-text-stroke/index.html new file mode 100644 index 0000000000..b7ae89cb95 --- /dev/null +++ b/files/zh-cn/web/css/-webkit-text-stroke/index.html @@ -0,0 +1,147 @@ +--- +title: '-webkit-text-stroke' +slug: Web/CSS/-webkit-text-stroke +tags: + - CSS + - CSS Property + - CSS3 +translation_of: Web/CSS/-webkit-text-stroke +--- +
+ +

摘要

+ +

 -webkit-text-stroke CSS属性为文本字符指定了宽 和 颜色 . 它是{{cssxref("-webkit-text-stroke-width")}} 和{{cssxref("-webkit-text-stroke-color")}}属性的缩写.

+ +

语法

+ +
/* 宽度和颜色属性 */
+-webkit-text-stroke: 4px navy;
+
+/* 全局属性 */
+-webkit-text-stroke: inherit;
+-webkit-text-stroke: initial;
+-webkit-text-stroke: unset;
+
+ +

值

+ +
+
<length>
+
文本宽.
+
<color>
+
文本颜色.
+
+ +

常规用法

+ +
/* 设置宽度和颜色 */
+-webkit-text-stroke: <length> <color>;
+
+/* 默认设置 */
+-webkit-text-stroke: inherit/initial/unset;
+
+ + + +

用例

+ +

HTML

+ +
<p id="example">The stroke of this text is red.</p>
+ +

CSS

+ +
#example {
+  font-size: 3em;
+  margin: 0;
+  -webkit-text-stroke: 2px red;
+}
+
+ +

规格

+ + + + + + + + + + + + + + + + + + + + + +
规范状况注释
{{SpecName('Compat', '#the-webkit-text-stroke', '-webkit-text-stroke')}}{{Spec2('Compat')}}初始标准化
Safari CSS Reference
+ '-webkit-text-stroke' in that document.		不标准非官方文件初始定义
+ +

浏览器兼容

+ +

  兼容情况一览表

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本支持4{{CompatGeckoDesktop("48.0")}}[1]{{CompatNo}}153.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本支持4{{CompatGeckoMobile("48.0")}}[1]{{CompatNo}}364.1
+
+ +

[1] 此功能在首选项 layout.css.prefixes.webkit 后面实现, 默认为false. 从Gecko 49 {{geckoRelease("49.0")}} 开始，默认为 true.

+ +

参考文档

+ + diff --git a/files/zh-cn/web/css/-webkit-touch-callout/index.html b/files/zh-cn/web/css/-webkit-touch-callout/index.html new file mode 100644 index 0000000000..0f0d3a2182 --- /dev/null +++ b/files/zh-cn/web/css/-webkit-touch-callout/index.html @@ -0,0 +1,92 @@ +--- +title: '-webkit-touch-callout' +slug: Web/CSS/-webkit-touch-callout +translation_of: Web/CSS/-webkit-touch-callout +--- +

{{CSSRef}} {{Non-standard_header}}

+ +

概述

+ +

-webkit-touch-callout 这个CSS 属性禁用了默认的callout展示， callout是指当触摸并按住一个元素的时候出现的提示。
+
+ 当在iOS上一直按住一个目标元素时，Safari会展示一个关于这个链接的callout信息。webkit-touch-callout属性允许禁用掉这一行为。

+ +

语法

+ +
Formal syntax: default | none
+
+ +
-webkit-touch-callout: default   /* displays the callout */
+-webkit-touch-callout: none      /* disables the callout */
+
+-webkit-touch-callout: initial
+-webkit-touch-callout: inherit
+-webkit-touch-callout: unset
+ +

可能的值

+ +
+
default
+
此值表示显示默认的callout
+
none
+
此值表示禁用callout
+
+ +

示例

+ +
.example {
+  -webkit-touch-callout: none;
+}
+
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}[1]
+
+ +

[1] -webkit-touch-callout 属性最早在 iOS 2.0 上实现，后来被添加到WebKit ({{webkitbug(121507)}}).

diff --git a/files/zh-cn/web/css/@charset/index.html b/files/zh-cn/web/css/@charset/index.html new file mode 100644 index 0000000000..ae867c1752 --- /dev/null +++ b/files/zh-cn/web/css/@charset/index.html @@ -0,0 +1,79 @@ +--- +title: '@charset' +slug: Web/CSS/@charset +tags: + - '@charset' +translation_of: Web/CSS/@charset +--- +
{{ CSSRef }}
+ +
 
+ +

概述

+ +

 @charset CSS @规则  指定样式表中使用的字符编码。它必须是样式表中的第一个元素，而前面不得有任何字符。因为它不是一个嵌套语句，所以不能在@规则条件组中使用。如果有多个 @charset @规则被声明，只有第一个会被使用，而且不能在HTML元素或HTML页面的字符集相关 {{ HTMLElement("style") }} 元素内的样式属性内使用。

+ +

此 @规则 在某些 CSS 属性中使用非 ASCII 字符时非常有用，例如 {{ cssxref("content") }}。

+ +

在样式表中有多种方法去声明字符编码，浏览器会按照以下顺序尝试下边的方法（一旦找到就停止并得出结果）：

+ +
    +
  1. 文件的开头的 Unicode byte-order 字符值。
    2. +
  2. 由Content-Type：HTTP header 中的 charset 属性给出的值或用于提供样式表的协议中的等效值。
    3. +
  3. CSS @规则  @charset。
    4. +
  4. 使用参考文档定义的字符编码： {{ HTMLElement("link") }} 元素的 charset 属性。 该方法在 HTML5 标准中已废除，无法使用。
    5. +
  5. 假设文档是 UTF-8。
    6. +
+ +

语法

+ +
@charset "UTF-8";
+@charset "iso-8859-15";
+
+ +

where:

+ +
+
charset
+
它是一个 {{cssxref("<string>")}} 表示字符编码被使用。它必须是在被 IANA-registry 声明过的 web-safe 字符编码中的一个, 还必须被双引号包围, 遵循一个空格字符 (U+0020)，并且立即以分号结束。 如果有多个相关的编码名字，只有被标记为 preferred  的那个才会被使用。
+
+ +

语法格式

+ +
{{csssyntax}}
+
+ +

例子

+ +
@charset "UTF-8";
+@charset "utf-8"; /*大小写不敏感*/
+/* 设置css的编码格式为Unicode UTF-8 */
+@charset 'iso-8859-15'; /* 无效的, 使用了错误的引号 */
+@charset 'UTF-8';       /* 无效的, 使用了错误的引号 */
+@charset  "UTF-8";      /* 无效的, 多于一个空格 */
+ @charset "UTF-8";      /* 无效的, 在at-rule之前多了一个空格 */
+@charset UTF-8;         /* Invalid, without ' or ", the charset is not a CSS {{cssxref("<string>")}} */
+
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS2.1', 'syndata.html#x57', '@charset') }}{{ Spec2('CSS2.1') }}Initial definition
+ +

浏览器兼容性

+ +

{{Compat("css.at-rules.charset")}}

diff --git a/files/zh-cn/web/css/@counter-style/additive-symbols/index.html b/files/zh-cn/web/css/@counter-style/additive-symbols/index.html new file mode 100644 index 0000000000..5d5fe95399 --- /dev/null +++ b/files/zh-cn/web/css/@counter-style/additive-symbols/index.html @@ -0,0 +1,80 @@ +--- +title: additive-symbols +slug: Web/CSS/@counter-style/additive-symbols +translation_of: Web/CSS/@counter-style/additive-symbols +--- +
{{CSSRef}}
+ +

additive-symbols 描述符 定义符号，用于值可累积的可数的 {{cssxref('system')}}的项 。 additive-symbols定义累积的的元组（tuples）,每个元组项都包含一个符号和一个非负整数的权重。additive system被用于构造sign-value numbering （符号-值，指数字的值就是是符号加在一起的值）系统，比如 罗马数字。

+ +
additive-symbols: 3 "0";
+additive-symbols: 3 "0", 2 "\2E\20";
+additive-symbols: 3 "0", 2 url(symbol.png);
+ +

当系统描述符是循环，数字，拼音，象征，或固定的时候，使用 {{cssxref('symbols')}}代替additive-symbols

+ +

{{cssinfo}}

+ +

语法

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<ul class="list">
+   <li>One</li>
+   <li>Two</li>
+   <li>Three</li>
+   <li>Four</li>
+   <li>Five</li>
+</ul>
+ +

CSS

+ +
@counter-style additive-symbols-example {
+  system: additive;
+  additive-symbols:V 5, IV 4, I 1;
+}
+.list {
+  list-style: additive-symbols-example;
+}
+ +

结果

+ +

{{ EmbedLiveSample('示例') }}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'additive-symbols')}}{{Spec2('CSS3 Counter Styles')}}初次定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.counter-style.additive-symbols")}}

+ +

相关链接

+ + diff --git a/files/zh-cn/web/css/@counter-style/index.html b/files/zh-cn/web/css/@counter-style/index.html new file mode 100644 index 0000000000..65ef2e55ec --- /dev/null +++ b/files/zh-cn/web/css/@counter-style/index.html @@ -0,0 +1,203 @@ +--- +title: '@counter-style' +slug: Web/CSS/@counter-style +translation_of: Web/CSS/@counter-style +--- +

{{ CSSRef() }}

+ +

概要

+ +

@counter-style是一个 CSS at-rule ，它让开发者可以自定义counter的样式。 一个 @counter-style规则 定义了如何把一个计数器的值转化为字符串表示。

+ +

最初版的CSS定义了一系列很好用的计数器样式， 尽管近几年又添加了很多样式，但是这种限制方式被证明已经不能满足全球化的排版了。@counter-style规则用一种开放的方式弥补了这一缺点，在预定义的样式不能满足需求时，它可以使开发者自定义他们自己的计数器样式。

+ +

语法

+ +
@counter-style <counter-style-name> {
+    system: <counter system>
+    symbols: <counter symbols>
+    additive-symbols: <additive-symbols>
+    negative: <negative symbol>
+    prefix: <prefix>
+    suffix: <suffix>
+    range: <range>
+    pad: <padding>
+    speak-as: <speak-as>
+    fallback: <counter-style-name>
+}
+
+ +

描述

+ +

 

+ +

每个 @counter-style 由一个名称标识并具有一组描述符

+ +
+
{{cssxref("system")}}
+
指定一个算法，用于将计数器的整数值转化为字符串表示。
+
+ +
+
{{cssxref("negative")}}
+
指定一个符号，当计数器表示的值为负的时候，把这个符号加在值的前面或后面
+
+ +
+
{{cssxref("prefix")}}
+
指定一个符号，加在标记表示符的前面。前缀在最后阶段才会被加上，所以在计数器的最终表示中，它在{{cssxref("negative")}}前。
+
+ +
+
{{cssxref("suffix")}}
+
与{{cssxref("prefix")}}类似，suffix指定一个符号，加在标记表示符的后面。
+
+ +
+
{{cssxref("range")}}
+
 指定一个counter-style生效的范围，如果计数器的值不再这个范围内，那么自定义的counter-style不会生效，counter-style会后退到{{cssxref("fallback")}}的style。
+
+ +
+
{{cssxref("pad")}}
+
在你想要给标记表示符最小值时使用。比如说，你想要计数器从01开始，经过02，03，04，那么这时可以使用pad了。对于大于pad指定值的表示符，标记会恢复为normal。
+
+ +
+
{{cssxref("fallback")}}
+
定义一个备用的系统，当自定义的系统不能使用或者计数器的值超过了定义的范围时使用。如果备用系统也不能表示计数器的值，那么备用系统的备用系统（如果有的话）将会启用。如果没有指定备用系统，或者备用系统链不能够正确表示一个值，那么最终会降为十进制样式表示。
+
+ +
+
{{cssxref("symbols-descriptor", "symbols")}}
+
定义一个符号，用于标记的表示。符号可以包含字符串，图片或自定义的识别码。这个符号怎样构建标记呢？这依赖于system描述符里面所定义的算法。 举个例子，如果system的值是fixed,那么symbols属性指定的固定的N个符号，将被用来表示计数器的前N个值。用完了前N个符号后，列表里剩下的值将使用fallback定义的样式来表示。
+
+ 下面的@counter-style规则使用图片而不是字符标记。
+ + 
@counter-style winners-list {
+  system: fixed;
+  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
+  suffix: " ";
+}
+
+
+ +
+
{{cssxref("additive-symbols")}}
+
尽管symbols属性中指定的符号可以被system中定义的大部分算法所使用，但是一些system属性的值，比如additive，依赖于本描述符所描述的加性元组。Each additive tuple consists of a counter symbol and a non negative integer weight. 每个加性元组包含一个可数的符号和一个非负证书的权重。The additive tuples must be specified in the descending order of their weights.
+
+ +
+
{{cssxref("speak-as")}}
+
定义如何在语音识别器中读出计数器样式，比如屏幕阅读器。例如基于该描述符的值，标记符号的值可以作为有序列表的数字或者字幕作为无序列表的音频提示读出。
+
+ +

例子

+ +
@counter-style circled-alpha {
+  system: fixed;
+  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
+  suffix: " ";
+}
+ +

上面的counter style规则在列表中可以如下使用：

+ +
.items {
+   list-style: circled-alpha;
+}
+
+ +

会产生如下列表：

+ +

Ⓐ One
+ Ⓑ Two
+ Ⓒ Three
+ Ⓓ Four
+ Ⓔ FIve
+ ....
+ ...
+ Ⓨ Twenty Five
+ Ⓩ Twenty Six

+ +

27 Twenty Seven
+ 28 Twenty Eight
+ 29 Twenty Nine
+ 30 Thirty

+ +

查看更多例子 demo page.

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}}{{Spec2('CSS3 Counter Styles')}}Initial definition.
+ +

浏览器支持

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

相关阅读

+ + diff --git a/files/zh-cn/web/css/@counter-style/pad/index.html b/files/zh-cn/web/css/@counter-style/pad/index.html new file mode 100644 index 0000000000..9dcfb0328a --- /dev/null +++ b/files/zh-cn/web/css/@counter-style/pad/index.html @@ -0,0 +1,86 @@ +--- +title: pad +slug: Web/CSS/@counter-style/pad +translation_of: Web/CSS/@counter-style/pad +--- +
{{CSSRef}}
+ +

pad属性和自定义记数样式一起使用时, 可以用来限定记数样式的最小长度. 如果某个记数样式小于pad所指定的长度, 那么会用pad指定的填充字符串来填充至指定长度. 如果比pad所指定的长度长, 则会正常显示. Pad 属性的第一个参数是最小长度, 第二个参数是填充字符串. 一个常见的用处是序号编号需要填充两位的时候, 即需要编号"01","02","03",……, 而不仅仅是1, 2, 3...

+ +

{{cssinfo}}

+ +

参数

+ +
pad: 3 "0";
+
+ +

参数值

+ +
+
<integer> && <symbol>
+
<integer> 表示所有计数样式必须达到的最小长度(必须是非负整数). 如果指定的最小长度没有达到, 将会用<symbol>来填充直到最小长度.
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

样例

+ +

HTML

+ +
<ul class="list">
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+  <li>Five</li>
+</ul>
+ +

CSS

+ +
@counter-style pad-example {
+  system: numeric;
+  symbols: "0" "1" "2" "3" "4" "5";
+  pad: 2 "0";
+}
+
+.list {
+  list-style: pad-example;
+}
+ +

结果

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/@counter-style/pad') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Counter Styles', '#descdef-counter-style-pad', 'pad')}}{{Spec2('CSS3 Counter Styles')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.counter-style.pad")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/@counter-style/speak-as/index.html b/files/zh-cn/web/css/@counter-style/speak-as/index.html new file mode 100644 index 0000000000..5a2031972a --- /dev/null +++ b/files/zh-cn/web/css/@counter-style/speak-as/index.html @@ -0,0 +1,123 @@ +--- +title: speak-as +slug: Web/CSS/@counter-style/speak-as +tags: + - '@counter-style' + - CSS + - CSS Decriptor + - Reference +translation_of: Web/CSS/@counter-style/speak-as +--- +
{{CSSRef}}
+ +

当已明确定义 {{cssxref('@counter-style')}} 后，可以用 speak-as 定义在口语场景中如何表述这个 counter 符号。比如作为一篇文章的作者可以指定，当计算机读出这篇文章时，是以数字序号表示 counter，还是仅仅用语音提示。

+ +

{{cssinfo}}

+ +

语法

+ +
/* Keyword values */
+speak-as: auto;
+speak-as: bullets;
+speak-as: numbers;
+speak-as: words;
+speak-as: spell-out;
+
+/* @counter-style name value */
+speak-as: <counter-style-name>;
+
+ +

值

+ +
+
auto
+
如果 speak-as 的值是 auto，那么它的实际值是由  {{cssxref("system")}} 的值决定的： +
    +
  • 如果 system 的值是 alphabetic，speak-as 的值是 spell-out。
    • +
  • 如果 system 的值是 cyclic，speak-as 的值是 bullets。
    • +
  • 如果 system 的值是 extends，当被继承的样式上也定义了 speak-as: auto，那么 speak-as 的值就和被继承样式的值相同。
    • +
  • 其他场景下，表现都与 speak-as: numbers 相同。
    • +
+
+
bullets
+
用于表示无序的列表项，具体的发音由{{Glossary("user agent")}}决定。
+
numbers
+
根据文档语言的规范，读出计数器标明的数字的值。
+
words
+
在显示上，由用户代理决定计数器的值，读的时候以单词为单位。
+
spell-out
+
依然是用户代理决定了计数器，但它将会以逐个字母的形式被读出。如果遇到某个计数器，用户代理不知道要如何读时，会将它当做 numbers 处理。
+
<counter-style-name>
+
The name of another counter style, specified as a {{cssxref("<custom-ident>")}}. If included, the counter will be spoken out in the form specified in that counter style, kind of like specifying the {{cssxref("fallback")}} descriptor. If the specified style does not exist, speak-as defaults to auto.它的另一个名称是 {{cssxref("<custom-ident>")}}。使用了这个值后，计数器将以被指定的样式名的形式读出，和声明了 {{cssxref("fallback")}} 的效果类似。如果被指定的样式不存在，speak-as 将回退为auto。 
+
+ +

语法

+ +
{{csssyntax}}
+ +

例子

+ +

HTML

+ +
<ul class="list">
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+  <li>Five</li>
+</ul>
+ +

CSS

+ +
@counter-style speak-as-example {
+  system: fixed;
+  symbols:     ;
+  suffix: " ";
+  speak-as: numbers;
+}
+
+.list {
+  list-style: speak-as-example;
+}
+ +

结果

+ +

{{ EmbedLiveSample('例子') }}

+ +

无障碍问题

+ +

这个属性的无障碍支持度不太友好。请别指望靠它能正确地传递出页面的核心信息。

+ +

Let's Talk About Speech CSS | CSS Tricks

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Counter Styles', '#counter-style-speak-as', 'speak-as')}}{{Spec2('CSS3 Counter Styles')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.counter-style.speak-as")}}

+ +

参考

+ + diff --git a/files/zh-cn/web/css/@document/index.html b/files/zh-cn/web/css/@document/index.html new file mode 100644 index 0000000000..0f15af0f55 --- /dev/null +++ b/files/zh-cn/web/css/@document/index.html @@ -0,0 +1,86 @@ +--- +title: '@document' +slug: Web/CSS/@document +tags: + - CSS + - 参考 +translation_of: Web/CSS/@document +--- +
{{CSSRef}} {{ SeeCompatTable}}
+ +

@document CSS at-rule 根据文档的 URL 限制其中包含的样式规则的作用范围。它主要是为用户定义的样式表（UserStyle）而设计的，但也可以在作者定义的样式表上使用。

+ +
@document url("https://www.example.com/") {
+  h1 {
+    color: green;
+  }
+}
+
+ +

语法

+ +

@document 规则可以指定一个或多个匹配函数。如果任何功能适用于给定的 URL，则该规则将对该URL生效。可用的函数如下：

+ + + +

提供给 url()、url-prefix()，和 domain() 函数的参数可以不使用引号括起来。但提供给 regexp() 函数的参数必须用引号括起来。

+ +

提供给 regexp() 函数的正则表达式中的转义字符必须再次进行一次 CSS 转义。例如，一个点号（.），在正则表达式中匹配任意换行符之外的字母.如果想要匹配一个正真的点号，必须首先按照正则表达式的规则转义一次（变为 \.）然后在使用CSS的规则再转义一次（转换为\\.）。

+ +

例子

+ +
@document url(http://www.w3.org/),
+          url-prefix(http://www.w3.org/Style/),
+          domain(mozilla.org),
+          regexp("https:.*")
+{
+  /* 该条CSS规则会应用在下面的网页:
+     + URL为"http://www.w3.org/"的页面.
+     + 任何URL以"http://www.w3.org/Style/"开头的网页
+     + 任何主机名为"mozilla.org"或者主机名以".mozilla.org"结尾的网页
+     + 任何URL以"https:"开头的网页 */
+
+  /* 让上述网页变得超级丑 */
+  body {
+    color: purple;
+    background: yellow;
+  }
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + +
文档状态注释
{{ SpecName('CSS3 Conditional', '#at-document', '@document') }}{{ Spec2('CSS3 Conditional') }}
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.document")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/@font-face/font-display/index.html b/files/zh-cn/web/css/@font-face/font-display/index.html new file mode 100644 index 0000000000..be69002f0d --- /dev/null +++ b/files/zh-cn/web/css/@font-face/font-display/index.html @@ -0,0 +1,107 @@ +--- +title: font-display +slug: Web/CSS/@font-face/font-display +tags: + - CSS + - 参考 + - 字体 +translation_of: Web/CSS/@font-face/font-display +--- +
{{CSSRef}}
+ +

font-display 属性决定了一个@font-face 在不同的下载时间和可用时间下是如何展示的。

+ +

字体显示时间轴

+ +

字体显示时间线基于一个计时器，该计时器在用户代理尝试使用给定下载字体的那一刻开始。时间线分为三个时间段，在这三个时间段中指定使用字体的元素的渲染行为。

+ +
+
字体阻塞周期
+
如果未加载字体，任何试图使用它的元素都必须渲染不可见的后备字体。如果在此期间字体已成功加载，则正常使用它。
+
字体交换周期
+
如果未加载字体，任何尝试使用它的元素都必须呈现后备字体。如果在此期间字体已成功加载，则正常使用它。
+
字体失败周期
+
如果未加载字体，用户代理将其视为导致正常字体回退的失败加载。
+
+ +

{{cssinfo}}

+ +

语法

+ +
/* 关键字值 */
+font-display：auto;
+font-display：block;
+font-display：swap;
+font-display：fallback;
+font-display：optional;
+ +

属性值

+ +
+
auto
+
字体显示策略由用户代理定义。
+
block
+
为字体提供一个短暂的阻塞周期和无限的交换周期。
+
swap
+
为字体提供一个非常小的阻塞周期和无限的交换周期。
+
fallback
+
为字体提供一个非常小的阻塞周期和短暂的交换周期。
+
optional
+
为字体提供一个非常小的阻塞周期，并且没有交换周期。
+
+ +

形式化语法

+ +
{{csssyntax}}
+ +

例子

+ +
@ font-face {
+  font-family：ExampleFont;
+  src：url（/path/to/fonts/examplefont.woff）format（'woff'），
+       url（/path/to/fonts/examplefont.eot）format（'eot'）;
+  font-weight：400;
+  font-style：normal;
+  font-display：fallback;
+}
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}{{Spec2('CSS4 Fonts')}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.font-face.font-display")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/@font-face/font-family/index.html b/files/zh-cn/web/css/@font-face/font-family/index.html new file mode 100644 index 0000000000..1002d02fb4 --- /dev/null +++ b/files/zh-cn/web/css/@font-face/font-family/index.html @@ -0,0 +1,114 @@ +--- +title: font-family +slug: Web/CSS/@font-face/font-family +translation_of: Web/CSS/@font-face/font-family +--- +
{{CSSRef}}
+ +
font-family属性允许我们为页面上的字体指定一个由{{cssxref("@font-face")}} 规则定义的字体族
+ +

The font-family CSS descriptor allows authors to specify the font family for the font specified in an {{cssxref("@font-face")}} rule.

+ +

{{cssinfo}}

+ +

语法

+ +
/* <string> values */
+font-family: "font family";
+font-family: 'another font family';
+
+/* <IDENT> value */
+font-family: examplefont;
+
+ +

取值

+ +
+
<family-name>
+
指定字体族名称
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

示例

+ +
@font-face {
+  font-family: examplefont;
+  src: url('examplefont.ttf');
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#font-family-desc', 'font-family')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("4")}}12.0{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("6.0")}}{{CompatOpera("9.0")}}{{CompatSafari("3.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Basic support{{CompatAndroid("2.2")}}{{CompatGeckoMobile("1.9.1")}}{{CompatIE("10.0")}}{{CompatNo}}{{CompatOpera("12.0")}}{{CompatSafari("3.1")}}
+
diff --git a/files/zh-cn/web/css/@font-face/font-style/index.html b/files/zh-cn/web/css/@font-face/font-style/index.html new file mode 100644 index 0000000000..a8c5e39654 --- /dev/null +++ b/files/zh-cn/web/css/@font-face/font-style/index.html @@ -0,0 +1,133 @@ +--- +title: font-style +slug: Web/CSS/@font-face/font-style +translation_of: Web/CSS/@font-face/font-style +--- +

{{CSSRef}}

+ +

概述

+ +

font-style 描述符允许开发者在@font-rule规则中为指定字体样式(该条目区别于font-style，意指用在@font-rule中的font-style属性)

+ +

For a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the font-style descriptor to explicitly specify the font face's style. The values for the CSS descriptor is same as that of its corresponding font property.

+ +

{{cssinfo}}

+ +

Syntax

+ +
+
font-style: normal;
+font-style: italic;
+font-style: oblique;
+ +

Values

+ +

normal
+ Selects the normal version of the font-family.

+ +

italic
+ Specifies that font-face is an italicized version of the normal font .

+ +

oblique
+ Specifies that the font-face is an artificially sloped version of the normal font.

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

As an example, consider the garamond font family, in its normal form, we get the following result:

+ +
@font-face {
+  font-family: garamond;
+  src: url('garamond.ttf');
+}
+ +

unstyled Garamond

+ +

The italicized version of this text uses the same glyphs present in the unstyled version, but they are artificially sloped by a few degrees.

+ +

artificially sloped garamond

+ +

On the other hand, if a true italicized version of the font family exists, we can include it in the src descriptor and specify the font style as italic, so that it is clear that the font is italicized. True italics use different glyphs and are a bit different from their upright counterparts, having some unique features and generally have a rounded and calligraphic quality. These fonts are specially created by font designers and are not artificially sloped.

+ +
@font-face {
+  font-family: garamond;
+  src: url('garamond-italic.ttf');
+  font-style: italic;
+}
+ +

italic garamond

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.9.1")}}4.0  4.010.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatUnknown}}{{CompatNo}}10.0{{CompatVersionUnknown}}
+
+
diff --git a/files/zh-cn/web/css/@font-face/index.html b/files/zh-cn/web/css/@font-face/index.html new file mode 100644 index 0000000000..1f5430e318 --- /dev/null +++ b/files/zh-cn/web/css/@font-face/index.html @@ -0,0 +1,178 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +tags: + - '@规则' + - 字体 +translation_of: Web/CSS/@font-face +--- +
{{CSSRef}}
+ +
@font-face CSS at-rule 指定一个用于显示文本的自定义字体；字体能从远程服务器或者用户本地安装的字体加载. 如果提供了local()函数，从用户本地查找指定的字体名称，并且找到了一个匹配项, 本地字体就会被使用. 否则, 字体就会使用url()函数下载的资源。
+ +
+ +
通过允许作者提供他们自己的字体，@font-face 让设计内容成为了一种可能，同时并不会被所谓的"网络-安全"字体所限制(字体如此普遍以至于它们能被广泛的使用). 指定查找和使用本地安装的字体名称可以让字体的自定义化程度超过基本字体，同时在不依赖网络情况下实现此功能。
+ +
+ +
在同时使用url()和local()功能时，为了用户已经安装的字体副本在需要使用时被使用，如果在用户本地没有找到字体副本就会去使用户下载的副本查找字体。
+ +
+ +
@font-face 规则不仅仅使用在CSS的顶层，还可以用在任何CSS条件组规则中.
+ +
+ +
@font-face {
+  font-family: "Open Sans";
+  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}
+ +

概述

+ +

这是一个叫做@font-face 的CSS @规则 ，它允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式，@font-face 可以消除对用户电脑字体的依赖。 @font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 条件规则组 中。

+ +

语法

+ +
{{csssyntax}}
+ +

取值

+ +
+
{{cssxref("@font-face/font-family", "font-family")}}
+
所指定的字体名字将会被用于font或font-family属性( i.e. font-family: <family-name>; )
+
{{cssxref("@font-face/src", "src")}}
+
远程字体文件位置的URL或者用户计算机上的字体名称， 可以使用local语法通过名称指定用户的本地计算机上的字体( i.e. src: local('Arial'); )。 如果找不到该字体，将会尝试其他来源，直到找到它。
+
{{cssxref("@font-face/font-variant", "font-variant")}}
+
A {{cssxref("font-variant")}} value.
+
{{cssxref("@font-face/font-stretch", "font-stretch")}}
+
A {{cssxref("font-stretch")}} value.
+
{{cssxref("@font-face/font-weight", "font-weight")}}
+
A {{cssxref("font-weight")}} value.
+
{{cssxref("@font-face/font-style", "font-style")}}
+
对于src所指字体的描述。如果所需字体符合描述，则采用本font-face所定义的字体。
+
{{cssxref("@font-face/unicode-range", "unicode-range")}}
+
在该@font-face中定义的unicode字体范围
+
+ +

示例

+ +

下面的例子简单定义了一个可下载的字体，并应用到了文档的整个body标签上。

+ +

View live sample

+ +
<html>
+<head>
+  <title>Web Font Sample</title>
+  <style type="text/css" media="screen, print">
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  </style>
+</head>
+<body>
+  This is Bitstream Vera Serif Bold.
+</body>
+</html>
+
+ + + +

在接下来的例子中，用到了用户本地字体"Helvetica Neue Bold"的备份；如果当前用户(浏览器)未安装该字体(两种可能的字体名都已经试过)，就会用下载的字体"MgOpenModernaBold.ttf"来代替：

+ +
@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+  local("HelveticaNeue-Bold"),
+  url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+
+ + + +
+

接下来的例子在英文原文中已被删除。

+
+ +

这个例子新定义了一个字体，正常粗细的字采用字体Times New Roman，粗体字采用Consolas。

+ +
@font-face {
+    font-family: myFirstFont;
+    src: local("Times New Roman");
+    font-weight:normal;
+}
+
+@font-face {
+    font-family: myFirstFont;
+    src: local(Consolas);
+    font-weight:bold;
+}
+
+ +

注意

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}{{Spec2('WOFF2.0')}}Font format specification with new compression algorithm
{{SpecName('WOFF1.0', '', 'WOFF font format')}}{{Spec2('WOFF1.0')}}Font format specification
{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

浏览器兼容性

+ +

{{Compat("css.at-rules.font-face")}}

+ +

参考

+ + diff --git a/files/zh-cn/web/css/@font-face/src/index.html b/files/zh-cn/web/css/@font-face/src/index.html new file mode 100644 index 0000000000..e209486348 --- /dev/null +++ b/files/zh-cn/web/css/@font-face/src/index.html @@ -0,0 +1,82 @@ +--- +title: src +slug: Web/CSS/@font-face/src +translation_of: Web/CSS/@font-face/src +--- +
{{CSSRef}}
+ +

{{cssxref("@font-face")}} 中的src描述符指定了包含字体数据的资源。@font-face 规则中需要指定这个属性。

+ +

它的值是一个有优先级的，以逗号分割的外部引用或者本地安装的字体名称。当需要使用字体时，用户代理（指浏览器的意思）将会使用以逗号分隔的参考集中能成功激活的第一个参考值。如果是包含无效数据的字体或者本地的字体资源不存在，用户代理将会忽略当前字体并且加载下一个字体。

+ +

与CSS中的其他URL一样，URL可以是相对的，在这种情况下，它相对于包含@ font-face规则的样式表的位置进行解析。对于SVG字体，URL指向文档中定义的包含SVG字体的元素。如果省略元素引用，则默认引用第一个定义字体。同样，字体容器只加载@font-face 规则给定的其中一种字体。片段标识符用于指示要加载的字体。如果容器格式缺少定义的片段标识符方案，将会使用一个简单的基于1的索引方案（e.g., "font-collection#1" for the first font, "font-collection#2" for the second font, etc.）

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* <url> values */
+src: url(https://somewebsite.com/path/to/font.woff); /* Absolute URL */
+src: url(path/to/font.woff);                         /* Relative URL */
+src: url(path/to/font.woff) format("woff");          /* Explicit format */
+src: url('path/to/font.woff');                       /* Quoted URL */
+src: url(path/to/svgfont.svg#example);               /* Fragment identifying font */
+
+/* <font-face-name> values */
+src: local(font);      /* Unquoted name */
+src: local(some font); /* Name containing space */
+src: local("font");    /* Quoted name */
+
+/* Multiple items */
+src: local(font), url(path/to/font.svg) format("svg"),
+     url(path/to/font.woff) format("woff"),
+     url(path/to/font.otf) format("opentype");
+
+ +

Values

+ +
+
<url> [ format( <string># ) ]?
+
Specifies an external reference consisting of a {{cssxref("<url>")}}, followed by an optional hint using the format() function to describe the format of the font resource referenced by that URL. The format hint contains a comma-separated list of format strings that denote well-known font formats. If a user agent doesn't support the specified formats, it skips downloading the font resource. If no format hints are supplied, the font resource is always downloaded.
+
<font-face-name>
+
Specifies the name of a locally-installed font face using the local() function, which uniquely identifies a single font face within a larger family. The name can optionally be enclosed in quotes.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
@font-face {
+  font-family: examplefont;
+  src: local(Example Font),
+       url('examplefont.woff') format("woff"),
+       url('examplefont.otf') format("opentype");
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#src-desc', 'src')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.at-rules.font-face.src")}}

diff --git a/files/zh-cn/web/css/@font-feature-values/index.html b/files/zh-cn/web/css/@font-feature-values/index.html new file mode 100644 index 0000000000..1a4c5ce32b --- /dev/null +++ b/files/zh-cn/web/css/@font-feature-values/index.html @@ -0,0 +1,129 @@ +--- +title: '@font-feature-values' +slug: Web/CSS/@font-feature-values +translation_of: Web/CSS/@font-feature-values +--- +
{{CSSRef}}
+ +

概要

+ +

@font-feature-values CSS at-rule 允许作者在{{cssxref("font-variant-alternates")}} 中使用通用名称，用于在OpenType中以不同方式激活功能。它允许在使用几种字体时简化CSS。

+ +
@font-feature-values Font One { /* How to activate nice-style in Font One */
+  @styleset {
+    nice-style: 12;
+  }
+}
+
+@font-feature-values Font Two { /* How to activate nice-style in Font Two */
+  @styleset {
+    nice-style: 4;
+  }
+}
+
+…
+
+.nice-look { font-variant-alternates: styleset(nice-style); } /* Independent of the font */
+
+ +

The @font-feature-values at-rule may be used at the top level of a CSS, but also inside any CSS conditional-group at-rule.

+ +

Syntax

+ +

Feature value blocks

+ +
+
@swash
+
Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "swash()", "#swash()")}} functional notation of {{cssxref("font-variant-alternates")}}. A swash feature value definition allows only one value: ident1: 2 is valid when ident2: 2 4 isn't.
+
@annotation
+
Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}} functional notation of {{cssxref("font-variant-alternates")}}. An annotation feature value definition allows only one value: ident1: 2 is valid when ident2: 2 4 isn't.
+
@ornaments
+
Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}} functional notation of {{cssxref("font-variant-alternates")}}. An ornaments feature value definition allows only one value: ident1: 2 is valid when ident2: 2 4 isn't.
+
@stylistic
+
Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}} functional notation of {{cssxref("font-variant-alternates")}}. A stylistice feature value definition allows only one value: ident1: 2 is valid when ident2: 2 4 isn't.
+
@styleset
+
Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}} functional notation of {{cssxref("font-variant-alternates")}}. A stylset feature value definition allows and illimited amount of values: ident1: 2 4 12 1maps to the OpenType values ss02, ss04, ss12, ss01. Note that values higher than 99 are valid, but doesn't map to any OpenType values and are ignored.
+
@character-variant
+
Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}} functional notation of {{cssxref("font-variant-alternates")}}. A character-variant feature value definition allows one or two values: ident1: 2  maps to cv02=1 and ident2: 2 4 maps to cv02)4 and ident2: 2 4 5 isn't valid.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#font-feature-values', '@font-feature-values')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatGeckoDesktop("34")}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("34")}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Experimental implementation of the CSS Fonts Level 3 extensions was available since Gecko 24. It was governed by the preference layout.css.font-features.enabled defaulting to true on Nightly and Aurora only.

+ +

See also

+ + diff --git a/files/zh-cn/web/css/@import/index.html b/files/zh-cn/web/css/@import/index.html new file mode 100644 index 0000000000..8fb3a8aefa --- /dev/null +++ b/files/zh-cn/web/css/@import/index.html @@ -0,0 +1,124 @@ +--- +title: '@import' +slug: Web/CSS/@import +tags: + - '@import' + - CSS +translation_of: Web/CSS/@import +--- +
{{CSSRef}}
+ +

概述

+ +

@import CSS@规则，用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则，{{cssxref("@charset")}} 规则除外; 因为它不是一个嵌套语句，@import不能在条件组的规则中使用。

+ +

因此，用户代理可以避免为不支持的媒体类型检索资源，作者可以指定依赖媒体的@import规则。这些条件导入在URI之后指定逗号分隔的媒体查询。在没有任何媒体查询的情况下，导入是无条件的。指定所有的媒体具有相同的效果。

+ +

语法

+ +
@import url;
+@import url list-of-media-queries;
+
+ +

其中:

+ +
+
url
+
是一个表示要引入资源位置的 {{cssxref("<string>")}} 或者 {{cssxref("<uri>")}} 。 这个 URL 可以是绝对路径或者相对路径。 要注意的是这个 URL 不需要指明一个文件； 可以只指明包名，然后合适的文件会被自动选择 (e.g. chrome://communicator/skin/). See here 了解更多。
+
list-of-media-queries
+
是一个逗号分隔的 媒体查询 条件列表，决定通过URL引入的 CSS 规则 在什么条件下应用。如果浏览器不支持列表中的任何一条媒体查询条件，就不会引入URL指明的CSS文件。
+
+ +

正规语法

+ +
{{csssyntax}}
+ +

示例

+ +
@import url("fineprint.css") print;
+@import url("bluish.css") projection, tv;
+@import 'custom.css';
+@import url("chrome://communicator/skin/");
+@import "common.css" screen, projection;
+@import url('landscape.css') screen and (orientation:landscape);
+
+ +

技术规格

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
技术规格Status备注
{{SpecName('CSS3 Media Queries', '#media0', '@import')}}{{Spec2('CSS3 Media Queries')}}扩展语法以支持任何媒体查询，而不仅仅是简单的媒体类型。
{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}{{Spec2('CSS2.1')}}支持用{{cssxref("<string>")}}直接表示样式表的url，
+ 并要求@import规则必须在CSS文档的开头。
{{SpecName('CSS1', '#the-cascade', '@import')}}{{Spec2('CSS1')}}初始定义
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}5.5{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}5.5{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/zh-cn/web/css/@keyframes/index.html b/files/zh-cn/web/css/@keyframes/index.html new file mode 100644 index 0000000000..369504b8e3 --- /dev/null +++ b/files/zh-cn/web/css/@keyframes/index.html @@ -0,0 +1,146 @@ +--- +title: '@keyframes' +slug: Web/CSS/@keyframes +tags: + - CSS + - 动画 + - 参考 +translation_of: Web/CSS/@keyframes +--- +
{{CSSRef}}
+ +

关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。和 转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。

+ +
@keyframes slidein {
+  from {
+    transform: translateX(0%); 
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+ +

JavaScript 可以通过 CSS对象模型的 {{domxref("CSSKeyframesRule")}} 接口来访问 @keyframes。

+ +

要使用关键帧, 先创建一个带名称的 @keyframes 规则，以便后续使用 {{ cssxref("animation-name") }} 属性将动画同其关键帧声明匹配。每个 @keyframes 规则包含多个关键帧，也就是一段样式块语句，每个关键帧有一个百分比值作为名称，代表在动画进行中，在哪个阶段触发这个帧所包含的样式。

+ +

可以按任意顺序列出关键帧百分比；它们将按照其应该发生的顺序来处理。

+ +

让关键帧序列生效

+ +

如果一个关键帧规则没有指定动画的开始或结束状态（也就是，0%/from 和100%/to，浏览器将使用元素的现有样式作为起始/结束状态。这可以用来从初始状态开始元素动画，最终返回初始状态。

+ +

如果在关键帧的样式中使用了不能用作动画的属性，那么这些属性会被忽略掉，支持动画的属性仍然是有效的，不受波及。

+ +

重复定义

+ +

如果多个关键帧使用同一个名称，以最后一次定义的为准。 @keyframes 不存在层叠样式(cascade)的情况，所以动画在一个时刻（阶段）只会使用一个的关键帧的数据。

+ +

如果一个@keyframes 内的关键帧的百分比存在重复的情况，则@keyframes规则中该百分比的所有关键帧都将用于该帧。如果多个关键帧指定了相同的百分比值，则@keyframes规则内是可以使用层叠样式的。

+ +

属性个数不定

+ +

如果一个关键帧中没有出现其他关键帧中的属性，那么这个属性将使用插值（不能使用插值的属性除外，这些属性会被忽略掉）。例如：

+ +
@keyframes identifier {
+  0% { top: 0; left: 0; }
+  30% { top: 50px; }
+  68%, 72% { left: 50px; }
+  100% { top: 100px; left: 100%; }
+}
+
+ +

例子中，{{ cssxref("top") }} 属性分别出现在关键帧 0%、30% 和 100% 的中，而 {{ cssxref("left") }} 属性分别出现在关键帧 0%、68%、72% 和 100% 中。

+ +

同一关键帧中的相同属性被重复定义

+ +

如果某一个关键帧出现了重复的定义，且重复的关键帧中的 CSS 属性值不同，则以最后一次定义的属性为准。例如：

+ +
@keyframes identifier {
+  0% { top: 0; }
+  50% { top: 30px; left: 20px; }
+  50% { top: 10px; }
+  100% { top: 0; }
+}
+
+ +

上面这个例子中，50% 关键帧中分别最后设置的属性 top: 10px 和 left: 20px 是有效的，但是其他的属性会被忽略。

+ +

{{ fx_minversion_inline("14") }}  Firefox 14 开始支持层叠 keyframes。

+ +

关键帧中的 !important

+ +

关键帧中出现的 !important 将会被忽略。

+ +
@keyframes important1 {
+  from { margin-top: 50px; }
+  50%  { margin-top: 150px !important; } /* 忽略 */
+  to   { margin-top: 100px; }
+}
+
+@keyframes important2 {
+  from { margin-top: 50px;
+         margin-bottom: 100px; }
+  to   { margin-top: 150px !important; /* 忽略 */
+         margin-bottom: 50px; }
+}
+
+ +

语法

+ +

取值

+ +
+
{{cssxref("custom-ident")}}
+
帧列表的名称。名称必须符合 CSS 语法中对标识符的定义。
+
from
+
等价于 0%。
+
to
+
等价于 100%。
+
{{cssxref("<percentage>")}}
+
动画序列中触发关键帧的时间点，使用百分值来表示。
+
+

形式化语法

+ + 
{{csssyntax}}
+
+
+ +

示例

+ +

参见使用 CSS 动画。

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{ SpecName('CSS3 Animations', '#keyframes', '@keyframes') }}{{ Spec2('CSS3 Animations') }}
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.keyframes")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/@media/-webkit-device-pixel-ratio/index.html b/files/zh-cn/web/css/@media/-webkit-device-pixel-ratio/index.html new file mode 100644 index 0000000000..d3f3cd202c --- /dev/null +++ b/files/zh-cn/web/css/@media/-webkit-device-pixel-ratio/index.html @@ -0,0 +1,60 @@ +--- +title: '-webkit-device-pixel-ratio' +slug: Web/CSS/@media/-webkit-device-pixel-ratio +translation_of: Web/CSS/@media/-webkit-device-pixel-ratio +--- +
{{ CSSRef() }}
+ +

{{ Non-standard_header() }}

+ +

-webkit-device-pixel-ratio 是一个非标准的布尔类型CSS媒体类型，是标准 resolution 媒体类型的一个替代方案.

+ +

Its value is the number of device pixels used to represent each CSS px. Although the value is a {{cssxref("<number>")}} and thus doesn't syntactically allow units, its implicit unit is dppx.

+ +

Syntax

+ +

-webkit-device-pixel-ratio is a range value meaning the prefixed -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio are also available.

+ +
@media (-webkit-min-device-pixel-ratio: 2) { ... }
+/* is equivalent to */
+@media (min-resolution: 2dppx) { ... }
+
+/* And likewise */
+@media (-webkit-max-device-pixel-ratio: 2) { ... }
+/* is equivalent to */
+@media (max-resolution: 2dppx) { ... }
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Compat', '#css-media-queries-webkit-device-pixel-ratio', '-webkit-device-pixel-ratio')}}{{Spec2('Compat')}}Initial standardization
Safari CSS Reference
+ 'media query extensions' in that document.		Non-standard unofficial documentationInitial documentation
+ +

See also

+ + diff --git a/files/zh-cn/web/css/@media/any-hover/index.html b/files/zh-cn/web/css/@media/any-hover/index.html new file mode 100644 index 0000000000..195b19371b --- /dev/null +++ b/files/zh-cn/web/css/@media/any-hover/index.html @@ -0,0 +1,76 @@ +--- +title: any-hover +slug: Web/CSS/@media/any-hover +tags: + - '@media' + - CSS + - Reference + - 媒体查询 + - 媒体特性 +translation_of: Web/CSS/@media/any-hover +--- +
{{cssref}}
+ +

any-hover CSS 媒体特性 可以用来测试是否有任意可用的输入机制可以在元素上 hover。

+ +

语法

+ +

any-hover 使用下面列表的值作为关键字。

+ +
+
none
+
可用的输入机制里没有机制可以方便地 hover，或者不存在定点输入机制。
+
hover
+
一个或多个可用的输入机制可以方便地在元素上 hover。
+
+ +

示例

+ +

测试是否有输入机制可以 hover

+ +

HTML

+ +
<a href="#">Try hovering over me!</a>
+ +

CSS

+ +
@media (any-hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}
+ +

结果

+ +

{{EmbedLiveSample("Testing_whether_input_methods_can_hover")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS4 Media Queries', '#descdef-media-any-hover', 'any-hover')}}{{Spec2('CSS4 Media Queries')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.media.any-hover")}}

+ +

更多资料

+ + diff --git a/files/zh-cn/web/css/@media/any-pointer/index.html b/files/zh-cn/web/css/@media/any-pointer/index.html new file mode 100644 index 0000000000..8d05eb28d4 --- /dev/null +++ b/files/zh-cn/web/css/@media/any-pointer/index.html @@ -0,0 +1,108 @@ +--- +title: any-pointer +slug: Web/CSS/@media/any-pointer +tags: + - '@media' + - CSS + - Reference + - 媒体查询 + - 媒体特性 +translation_of: Web/CSS/@media/any-pointer +--- +
{{cssref}}
+ +

any-pointer CSS 媒体特性 测试用户是否拥有任意定点装置（如鼠标）。以及如果存在定点装置，它的精确度是什么样的。

+ +
+

注: 如果你想测试主定点设备的精确度, 使用 pointer 。

+
+ +

语法

+ +

any-pointer 特性使用下面的关键字。

+ +
+
none
+
没有可用的定点设备。
+
coarse
+
至少有一个输入途径包含一个精度有限的定点装置。
+
fine
+
至少有一个输入途径包含一个精确的定点装置。
+
+ +
+

注: 当输入设备拥有不同特性时，可能有多于一个的值被匹配。none 仅当它们都不是定点设备时被匹配。

+
+ +

示例

+ +

这个例子为拥有至少一个精确定点装置的用户创建了一个小 checkbox，为拥有至少一个粗略定点装置的用户创建了一个大 checkbox。大 checkbox 的优先级更高，因为它的声明在小 checkbox 的声明后。

+ +

HTML

+ +
<input id="test" type="checkbox" />
+<label for="test">Look at me!</label>
+ +

CSS

+ +
input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (any-pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (any-pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Examples")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}{{Spec2('CSS4 Media Queries')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.media.any-pointer")}}

+ +

更多资料

+ + diff --git a/files/zh-cn/web/css/@media/aspect-ratio/index.html b/files/zh-cn/web/css/@media/aspect-ratio/index.html new file mode 100644 index 0000000000..d18fb02b2b --- /dev/null +++ b/files/zh-cn/web/css/@media/aspect-ratio/index.html @@ -0,0 +1,120 @@ +--- +title: aspect-ratio +slug: Web/CSS/@media/aspect-ratio +translation_of: Web/CSS/@media/aspect-ratio +--- +
{{cssref}}
+ +

aspect-ratio CSS 媒体属性 可以用来测试 {{glossary("viewport")}} 的宽高比。

+ +

语法

+ +

宽高比属性被指定为{{cssxref("<ratio>")}}值来代表viewport的宽高比。其为一个范围，这意味着你可以使用min-aspect-ratio和max-aspect-ratio分别查询最小和最大的值。

+ +

例子

+ +

下面的例子包含一个 {{htmlElement("iframe")}} ，拥有它自身的viewport。调整的<iframe>宽高来观察aspect-ratio的变化。

+ +

HTML

+ +
<div id='inner'>
+  Watch this element as you resize your viewport's width and height.
+</div>
+
+ +

CSS

+ +
/* 最小宽高比 */
+@media (min-aspect-ratio: 8/5) {
+  div {
+    background: #9af; /* blue */
+  }
+}
+
+/* 最大宽高比 */
+@media (max-aspect-ratio: 3/2) {
+  div {
+    background: #9ff;  /* cyan */
+  }
+}
+
+/* 明确的宽高比, 放在最下部防止同时满足条件时的覆盖*/
+@media (aspect-ratio: 1/1) {
+  div {
+    background: #f9a; /* red */
+  }
+}
+
+ + + +

结果

+ +
+

{{ EmbedLiveSample('_Example', '300px', '400px') }}

+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#aspect-ratio', 'aspect-ratio')}}{{Spec2('CSS4 Media Queries')}}No change.
{{SpecName('CSS3 Media Queries', '#aspect-ratio', 'aspect-ratio')}}{{Spec2('CSS3 Media Queries')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.media.aspect-ratio")}}

diff --git a/files/zh-cn/web/css/@media/device-height/index.html b/files/zh-cn/web/css/@media/device-height/index.html new file mode 100644 index 0000000000..284c9a1b41 --- /dev/null +++ b/files/zh-cn/web/css/@media/device-height/index.html @@ -0,0 +1,52 @@ +--- +title: device-height +slug: Web/CSS/@media/device-height +translation_of: Web/CSS/@media/device-height +--- +
{{cssref}} {{deprecated_header}}
+ +

 device-height CSS media feature 可以用来测试设备的渲染高度。注意，该条媒体查询将会在 媒体查询level4（目前处于候选草案）中废弃

+ +

语法

+ +

device-height feature is specified as a {{cssxref("<length>")}} value. It is a range feature, meaning that you can also use the prefixed min-device-height and max-device-height variants to query minimum and maximum values, respectively.

+ +

例子

+ +

在高度低于800px时加载指定样式

+ +
<link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://foo.bar.com/short-styles.css" />
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#device-height', 'device-height')}}{{Spec2('CSS4 Media Queries')}}Deprecated in Media Queries Level 4.
{{SpecName('CSS3 Media Queries', '#device-height', 'device-height')}}{{Spec2('CSS3 Media Queries')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("css.at-rules.media.device-height")}}

+ +

+ +

diff --git a/files/zh-cn/web/css/@media/hover/index.html b/files/zh-cn/web/css/@media/hover/index.html new file mode 100644 index 0000000000..14c44ff8f7 --- /dev/null +++ b/files/zh-cn/web/css/@media/hover/index.html @@ -0,0 +1,73 @@ +--- +title: hover +slug: Web/CSS/@media/hover +tags: + - '@media' + - CSS + - Reference + - media feature +translation_of: Web/CSS/@media/hover +--- +
{{cssref}}
+ +

该hover CSS {{cssxref("@media")}} 可以根据用户的主要输入机制是否可以悬停在元素之上来应用样式。

+ +

语法

+ +

悬停功能指定为从下面列表中选择的关键字值。

+ +
+
none
+
主要输入机制无法悬停或不方便悬停（例如，当用户执行不方便的长按操作时，许多移动设备模拟悬停），或者没有主指示输入机制。
+
hover
+
主要输入机制可以方便地悬停在元素上。
+
+ +

例子

+ +

HTML

+ +
<a href="#">Try hovering over me!</a>
+ +

CSS

+ +
@media (hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}
+ +

结果

+ +

{{EmbedLiveSample("Example")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#hover', 'hover')}}{{Spec2('CSS4 Media Queries')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.media.hover")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/css/@media/index.html b/files/zh-cn/web/css/@media/index.html new file mode 100644 index 0000000000..90a976dd6f --- /dev/null +++ b/files/zh-cn/web/css/@media/index.html @@ -0,0 +1,162 @@ +--- +title: '@media' +slug: Web/CSS/@media +tags: + - '@media' + - '@标签' + - CSS + - 引用 +translation_of: Web/CSS/@media +--- +
{{CSSRef}}
+ +
@media CSS @规则 可用于基于一个或多个 媒体查询 的结果来应用样式表的一部分。 使用它，您可以指定一个媒体查询和一个CSS块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该CSS块才能应用于该文档。
+ +
+ +
+
注： 在JavaScript中，可以使用{{domxref("CSSMediaRule")}}CSS对象模型接口访问使用@media创建的规则。
+ + +
+ +

语法

+ +

@media 规则可置于您代码的顶层或位于其它任何@条件规则组内。

+ +
/* At the top level of your code */
+@media screen and (min-width: 900px) {
+  article {
+    padding: 1rem 3rem;
+  }
+}
+
+/* Nested within another conditional at-rule */
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+    article {
+      display: flex;
+    }
+  }
+}
+
+ +

有关媒体查询语法的讨论，请参阅使用媒体查询。

+ +

正式语法

+ +
{{csssyntax}}
+ +

媒体特性

+ +

{{page("/zh-CN/docs/Web/Guide/CSS/Media_queries","媒体特性")}}

+ + + +

示例

+ +
@media print {
+  body { font-size: 10pt; }
+}
+
+@media screen {
+  body { font-size: 13px; }
+}
+
+@media screen, print {
+  body { line-height: 1.2; }
+}
+
+@media only screen
+  and (min-width: 320px)
+  and (max-width: 480px)
+  and (resolution: 150dpi) {
+    body { line-height: 1.4; }
+}
+
+ +

媒体查询第4级引入了一种新的范围语法，在测试接受范围的任何特性时允许更简洁的媒体查询，如下面的示例所示：

+ +
@media (height > 600px) {
+    body { line-height: 1.4; }
+}
+
+@media (400px <= width <= 700px) {
+    body { line-height: 1.4; }
+}
+
+ +

更多示例，请查看使用媒体查询。

+ +

可访问性

+ +

为了最好地调整网站文本大小，当您需要{{cssxref("<length>")}} 进行媒体查询时，请使用em。

+ +

em和px都是有效单位，但如果用户更改浏览器文本大小，em的效果会更好。

+ +

考虑使用4级媒体查询来改善用户体验。 例如，使用prefers-reduced-motion以检测用户是否已请求系统最小化其使用的动画或动作量。

+ +

安全

+ +

由于媒体查询可以洞察用户正在使用的设备的功能（以及扩展的功能和设计），因此有可能滥用它们来构造“指纹”来识别设备，或者至少 将其分类为某些细节，这可能是用户不希望看到的。

+ +

由于存在这种潜力，浏览器可能会选择以某种方式捏造返回的值，以防止它们被用来精确地标识计算机。 浏览器可能还会在此区域提供其他措施。 例如，如果启用了Firefox的“抵抗指纹”设置，则许多媒体查询会报告默认值，而不是代表实际设备状态的值。

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationCommentFeedback
{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}Reinstates light-level, inverted-colors and Custom Media Queries, which were removed from Level 4.
+ Adds prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, and prefers-color-scheme media features.		CSS Working Group drafts GitHub issues
{{SpecName('CSS3 Conditional', '#at-media', '@media')}}Defines the basic syntax of the @media rule.CSS Working Group drafts GitHub issues
{{SpecName('CSS4 Media Queries', '#media', '@media')}} +

Adds scripting, pointer, hover, update, overflow-block, and overflow-inline media features.
+ Deprecates all media types except for screen, print, speech, and all.
+ Makes the syntax more flexible by adding, among other things, the or keyword.

+ 		CSS Working Group drafts GitHub issues
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.media")}}

+ +

更多资料

+ + diff --git a/files/zh-cn/web/css/@media/orientation/index.html b/files/zh-cn/web/css/@media/orientation/index.html new file mode 100644 index 0000000000..d55e57ccb2 --- /dev/null +++ b/files/zh-cn/web/css/@media/orientation/index.html @@ -0,0 +1,94 @@ +--- +title: orientation +slug: Web/CSS/@media/orientation +tags: + - '@media' + - CSS + - 参考 +translation_of: Web/CSS/@media/orientation +--- +
{{cssref}}
+ +

CSS 媒体属性屏幕方向（orientation）可用于测试视口 {{glossary("viewport")}}（或者对于分页媒体而言的页面框盒）的横纵方向。

+ +
+

注意：此属性不等价于设备的屏幕旋转方向。在许多设备上，当屏幕方向为纵向时，打开软键盘将导致视口 viewport 的宽度大于高度，从而导致浏览器突然改用横向样式，而不是保持纵向。

+
+ +

语法

+ +

orientation 属性被指定为下列关键字值中的任意一个。

+ +

关键字值

+ +
+
portrait
+
viewport 处于纵向，即高度大于等于宽度。
+
landscape
+
viewport 处于横向，即宽度大于高度。
+
+ +

例子

+ +

HTML

+ +
<div>Box 1</div>
+<div>Box 2</div>
+<div>Box 3</div>
+
+ +

CSS

+ +
body {
+  display: flex;
+}
+
+div {
+  background: yellow;
+}
+
+@media (orientation: landscape) {
+  body {
+    flex-direction: row;
+  }
+}
+
+@media (orientation: portrait) {
+  body {
+    flex-direction: column;
+  }
+}
+ +

结果

+ +

{{EmbedLiveSample("Example")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS4 Media Queries', '#orientation', 'orientation')}}{{Spec2('CSS4 Media Queries')}}No change.
{{SpecName('CSS3 Media Queries', '#orientation', 'orientation')}}{{Spec2('CSS3 Media Queries')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.media.orientation")}}

diff --git a/files/zh-cn/web/css/@media/prefers-color-scheme/index.html b/files/zh-cn/web/css/@media/prefers-color-scheme/index.html new file mode 100644 index 0000000000..cb9c5c422f --- /dev/null +++ b/files/zh-cn/web/css/@media/prefers-color-scheme/index.html @@ -0,0 +1,111 @@ +--- +title: prefers-color-scheme +slug: Web/CSS/@media/prefers-color-scheme +tags: + - CSS + - Web + - prefers-color-scheme + - 参考 + - 媒体查询 +translation_of: Web/CSS/@media/prefers-color-scheme +--- +

prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。

+ +

语法

+ +
+
no-preference
+
表示系统未得知用户在这方面的选项。在布尔值上下文中，其执行结果为 false。
+
light
+
表示用户已告知系统他们选择使用浅色主题的界面。
+
dark
+
表示用户已告知系统他们选择使用暗色主题的界面。
+
+ +
+

译者注：“未得知”、“已告知”等用语，英文原文如此。
+ “未得知”可理解为：浏览器的宿主系统不支持设置主题色，或者支持主题色并默认为/被设为了未设置/无偏好。
+ “已告知”为：浏览器的宿主系统支持设置主题色，且被设置为了亮色或者暗色。

+ +

目前，若结果为 no-preference，无法通过此媒体特性获知宿主系统是否支持设置主题色，或者用户是否主动将其设置为无偏好。出于隐私保护等方面的考虑，用户或用户代理也可能在一些情况下在浏览器内部将其设置为 no-preference。

+
+ +

样例

+ +

这个例子使用了一个有黑色背景和白色文字的元素，当用户使用浅色主题时，会翻转黑白颜色。

+ +

HTML

+ +
<div class="day">Day (initial)</div>
+<div class="day light-scheme">Day (changes in light scheme)</div>
+<div class="day dark-scheme">Day (changes in dark scheme)</div> <br>
+
+<div class="night">Night (initial)</div>
+<div class="night light-scheme">Night (changes in light scheme)</div>
+<div class="night dark-scheme">Night (changes in dark scheme)</div>
+
+ +

CSS

+ +
.day   { background: #eee; color: black; }
+.night { background: #333; color: white; }
+
+@media (prefers-color-scheme: dark) {
+  .day.dark-scheme   { background:  #333; color: white; }
+  .night.dark-scheme { background: black; color:  #ddd; }
+}
+
+@media (prefers-color-scheme: light) {
+  .day.light-scheme   { background: white; color:  #555; }
+  .night.light-scheme { background:  #eee; color: black; }
+}
+
+.day, .night {
+  display: inline-block;
+  padding: 1em;
+  width: 7em;
+  height: 2em;
+  vertical-align: middle;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("Examples")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
+

{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}

+ 		{{Spec2('CSS5 Media Queries')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.media.prefers-color-scheme")}}

+ +

参见

+ + + +
{{QuickLinksWithSubpages("/zh-CN/docs/Web/CSS/@media/")}}
diff --git a/files/zh-cn/web/css/@media/prefers-reduced-motion/index.html b/files/zh-cn/web/css/@media/prefers-reduced-motion/index.html new file mode 100644 index 0000000000..49de3de412 --- /dev/null +++ b/files/zh-cn/web/css/@media/prefers-reduced-motion/index.html @@ -0,0 +1,137 @@ +--- +title: prefers-reduced-motion +slug: Web/CSS/@media/prefers-reduced-motion +translation_of: Web/CSS/@media/prefers-reduced-motion +--- +

CSS 媒体查询特性 prefers-reduced-motion 用于检测用户的系统是否被开启了动画减弱功能。

+ +

语法

+ +
+
no-preference
+
用户未修改系统动画相关特性。
+
reduce
+
这个值意味着用户修改了系统设置，将动画效果最小化，最好所有的不必要的移动都能被移除。
+
+ +

用户偏好

+ +

在火狐中，满足以下条件则 reduce 会生效:

+ + + +

例子

+ +

下面的例子将会展示一组令人心烦的动画，不过当你开启了系统的“减少运动”后就能看到动画减弱的效果了。

+ +

HTML

+ +
<div class="animation">animated box</div>
+
+ +

CSS

+ +
.animation {
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+    animation: none;
+  }
+}
+
+ + + +

Result

+ +

{{EmbedLiveSample("例子")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-reduced-motion', 'prefers-reduced-motion')}}{{Spec2('CSS5 Media Queries')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.media.prefers-reduced-motion")}}

+ +

参考

+ + + +
{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}
diff --git a/files/zh-cn/web/css/@media/width/index.html b/files/zh-cn/web/css/@media/width/index.html new file mode 100644 index 0000000000..79b6612aac --- /dev/null +++ b/files/zh-cn/web/css/@media/width/index.html @@ -0,0 +1,126 @@ +--- +title: width +slug: Web/CSS/@media/width +tags: + - '@media' + - CSS + - NeedsBrowserCompatibility + - Reference + - media feature +translation_of: Web/CSS/@media/width +--- +
{{cssref}}
+ +

可以使用width CSS {{cssxref("@media")}} 基于{{glossary("viewport")}}宽度(或页面框，用于paged media)应用样式。

+ +

语法

+ +

该width特性被指定为{{cssxref("<length>")}}，表示viewport宽度的值。这是一个范围特性，也就是说，您也可以使用前缀min-width和max-width分别查询最小值和最大值。

+ +

例子

+ +

HTML

+ +
<div>改变viewport的宽度的同时，观察这个元素的变化。</div>
+ +

CSS

+ +
/* 精确宽度 */
+@media (width: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* 最小宽度 */
+@media (min-width: 35rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* 最大宽度 */
+@media (max-width: 50rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+
+ +

结果

+ +

{{EmbedLiveSample('Example','90%')}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#width', 'width')}}{{Spec2('CSS4 Media Queries')}}The value can now be negative, in which case it computes to false.
{{SpecName('CSS3 Media Queries', '#width', 'width')}}{{Spec2('CSS3 Media Queries')}}Initial definition. The value must be nonnegative.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}9.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/zh-cn/web/css/@namespace/index.html b/files/zh-cn/web/css/@namespace/index.html new file mode 100644 index 0000000000..e14eb7d0cb --- /dev/null +++ b/files/zh-cn/web/css/@namespace/index.html @@ -0,0 +1,133 @@ +--- +title: '@namespace' +slug: Web/CSS/@namespace +tags: + - '@规则' + - CSS +translation_of: Web/CSS/@namespace +--- +

{{CSSRef}}

+ +

概述

+ +

@namespace 是用来定义使用在CSS样式表中的XML命名空间的@规则。定义的命名空间可以把通配、元素和属性选择器限制在指定命名空间里的元素。@namespace规则通常在处理包含多个namespaces的文档时才有用，比如HTML5里内联的SVG、MathML或者混合多个词汇表的XML。

+ +

任何 @namespace 规则都必须在所有的 @charset 和 @import 规则之后, 并且在样式表中，位于其他任何 style declarations 之前。

+ +

@namespace 可以用来定义默认命名空间。当定义过默认命名空间后, 所有的通配选择器和类型选择器（但不包括属性选择器，详情看下面的note）都只应用在这个命名空间的元素中。

+ +

@namespace 规则也可以用于定义命名空间前缀。当一个通配、类型、属性选择器前面有命名空间前缀修饰时，这个选择器将只匹配那些命名空间与 元素名或属性匹配 的元素。

+ +

在 HTML5 中，已知的 foreign elements(“外语元素，比如SVG和math命名空间中的元素”)将被自动加上命名空间。这意味着即使文档中没有任何xmlns属性，HTML元素也将表现的如同他们在XHTML命名空间内 (http://www.w3.org/1999/xhtml)一样，而 <svg> 和 <math> 元素则将被加上对应的命名空间 (http://www.w3.org/2000/svg 和http://www.w3.org/1998/Math/MathML).

+ +
+

Note: 在 XML中，除非前缀直接定义在了一个属性上（例如：xlink:href），这个属性就不会有命名空间。换句话说，属性将不会继承其所在元素的命名空间，为了符合这个行为，CSS中的默认命名空间不会加到属性选择器中

+
+ +

语法

+ +
/* 默认命名空间 */
+@namespace url(XML-namespace-URL);
+@namespace "XML-namespace-URL";
+
+/* 命名空间前缀 */
+@namespace prefix url(XML-namespace-URL);
+@namespace prefix "XML-namespace-URL";
+ +

标准语法

+ +
{{csssyntax}}
+ +

示例

+ +
@namespace url(http://www.w3.org/1999/xhtml);
+@namespace svg url(http://www.w3.org/2000/svg);
+
+/* 匹配所有的XHTML <a> 元素, 因为 XHTML 是默认无前缀命名空间 */
+a {}
+
+/* 匹配所有的 SVG <a> 元素 */
+svg|a {}
+
+/* 匹配 XHTML 和 SVG <a> 元素 */
+*|a {}
+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}{{Spec2('CSS3 Namespaces')}}Initial definition
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基础支持{{CompatChrome(1.0)}}{{ CompatGeckoDesktop(1.0) }}9.08.01.0
命名空间选择器 (|){{CompatChrome(1.0)}}{{ CompatGeckoDesktop(1.0) }}9.08.03.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
特性AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基础支持{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/zh-cn/web/css/@page/index.html b/files/zh-cn/web/css/@page/index.html new file mode 100644 index 0000000000..3defa1a600 --- /dev/null +++ b/files/zh-cn/web/css/@page/index.html @@ -0,0 +1,104 @@ +--- +title: '@page' +slug: Web/CSS/@page +tags: + - '@page' + - CSS + - Web + - 参考 + - 布局 + - 打印 +translation_of: Web/CSS/@page +--- +
{{CSSRef}}
+ +

@page 规则用于在打印文档时修改某些CSS属性。你不能用@page规则来修改所有的CSS属性，而是只能修改margin,orphans,widow 和 page breaks of the document。对其他属性的修改是无效的。

+ +
@page {
+  margin: 1cm;
+}
+
+@page :first {
+  margin: 2cm;
+}
+ +

@page 规则可以通过 CSS 对象模型接口的 {{domxref("CSSPageRule")}} 访问。

+ +
注意：W3C 正在讨论如何处理和视图窗口有关的 {{cssxref("<length>")}} 的单位：vh、vm、vmin 和 vmax。目前，请不要在 @page 规则中使用他们。
+ +

语法

+ +

描述符

+ +
+
size
+
指定页面盒模型所在的容器的大小和方向。一般情况下，因为一个页面盒模型被渲染到一面纸张上，所以这个属性也指示了目标纸张的大小。
+
+ +
+
marks
+
向文档添加剪切标记和/或注册标记。
+
+ +
+
bleed
+
为页面框盒指定一个限制区域，超过这个区域的页面内容将被裁剪。
+
+ +

形式化语法

+ +
{{csssyntax}}
+ +

示例

+ +

请参考 @page 的各种伪类的例子。

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS Logical Properties', '#logical-page', ':recto and :verso')}}{{Spec2('CSS Logical Properties')}}Adds the :recto and :verso page selectors
{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}{{Spec2('CSS3 Paged Media')}}No change from {{SpecName('CSS2.1')}}, though more CSS at-rules can be used inside a @page.
{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}{{Spec2('CSS2.1')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.page")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/@supports/index.html b/files/zh-cn/web/css/@supports/index.html new file mode 100644 index 0000000000..8d6343dd55 --- /dev/null +++ b/files/zh-cn/web/css/@supports/index.html @@ -0,0 +1,198 @@ +--- +title: '@supports' +slug: Web/CSS/@supports +tags: + - '@规则' + - At-rule + - CSS + - Web + - 参考 + - 支持 +translation_of: Web/CSS/@supports +--- +
{{CSSRef}}
+ +

@supports CSS at-rule 您可以指定依赖于浏览器中的一个或多个特定的CSS功能的支持声明。这被称为特性查询。该规则可以放在代码的顶层，也可以嵌套在任何其他条件组规则中。

+ +
@supports (display: grid) {
+  div {
+    display: grid;
+  }
+}
+ +
@supports not (display: grid) {
+  div {
+    float: right;
+  }
+}
+ +

在 JavaScript 中，可以通过 CSS 对象模型接口 {{DOMxRef("CSSSupportsRule")}} 来访问 @supports。

+ +

语法

+ +

@supports at-rule 由一组样式声明和一条支持条件构成。支持条件由一条或多条使用 逻辑与（and）、逻辑或（or）、逻辑非（not）结合的名称-值对（name-value pair）组成。可以使用圆括号调整操作符的优先级。

+ +

声明语法

+ +

最基本的支持条件就是 CSS 声明，也就是一个 CSS 属性后跟一个值，中间用冒号分开。如果 {{cssxref("transform-origin")}} 的实现语法认为 5% 5% 是有效的值，则下面的表达式会返回 true。

+ +
@supports (transform-origin: 5% 5%) {}
+ +

函数语法

+ +

第二种基本支持条件是支持函数，几乎所有浏览器都支持这种语法，但函数本身仍在标准化进程中。

+ +

selector() {{Experimental_Inline}}

+ +

测试浏览器是否支持经过测试的选择器语法。如果浏览器支持子组合器，则以下示例返回true：

+ +
@supports selector(A > B) {}
+ +

not 操作符

+ +

将 not 操作符放在任何表达式之前就能否定一条表达式。如果 {{CSSxRef("transform-origin")}} 的实现语法认为 10em 10em 10em 是无效的，则下面的表达式会返回 true。

+ +
@supports not (transform-origin: 10em 10em 10em) {}
+ +

和其他操作符一样，not 操作符可以应用在任意复杂度的表达式上。下面的几个例子中都是合法的表达式：

+ +
@supports not (not (transform-origin: 2px)) {}
+@supports (display: grid) and (not (display: inline-grid)) {}
+ +
+

注意：如果 not 操作符位于表达式的最外层，则没有必要使用圆括号将它括起来。但如果要将该表达式与其他表达式连接起来使用，比如 and 和 or，则需要外面的圆括号。

+
+ +

and 操作符

+ +

and 操作符用来将两个原始的表达式做逻辑与后生成一个新的表达式，如果两个原始表达式的值都为真，则生成的表达式也为真。在下例中，当且仅当两个原始表达式同时为真时，整个表达式才为真：

+ +
@supports (display: table-cell) and (display: list-item) {}
+ +

可以将多个合取词并置而不需要更多的括号。以下两者都是等效的：

+ +
@supports (display: table-cell) and (display: list-item) and (display:run-in) {}
+@supports (display: table-cell) and ((display: list-item) and (display:run-in)) {}
+ +

or 操作符

+ +

or 操作符用来将两个原始的表达式做逻辑或后生成一个新的表达式，如果两个原始表达式的值有一个或者都为真，则生成的表达式也为真。在下例中，当两个原始表达式中至少有一个为真时，整个表达式才为真：

+ +
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}
+ +

可以将多个析取词并置而不需要更多的括号。以下两者都是等效的：

+ +
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
+          (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}
+
+@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or
+          ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}
+
+ +
+

注意：在使用 and 和 or 操作符时，如果是为了定义多个表达式的执行顺序，则必须使用圆括号。如果不这样做的话，该条件就是无效的，会导致整个 at-rule 失效。

+
+ +

形式化语法

+ +
{{CSSSyntax}}
+ +

示例

+ +

检测是否支持指定的 CSS 属性

+ +
@supports (animation-name: test) {
+    … /* 如果支持不带前缀的animation-name,则下面指定的CSS会生效 */
+    @keyframes { /* @supports是一个CSS条件组at-rule,它可以包含其他相关的at-rules */
+      …
+    }
+}
+
+ +

检测是否支持指定的CSS属性或者其带前缀版本

+ +
@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
+            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
+    … /* 如果支持不带前缀以及带前缀的perspective属性,则下面指定的CSS会生效 */
+}
+
+ +

检测是否不支持指定的CSS属性

+ +
@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
+    … /* 这里的CSS代码用来模拟text-align-last:justify */
+}
+ +

测试是否支持自定义属性

+ +
@supports (--foo: green) {
+  body {
+    color: var(--varName);
+  }
+}
+ +

测试是否支持选择器 (eg. {{CSSxRef(":is", ":is()")}})

+ +

{{SeeCompatTable}}

+ +
/* 这条 CSS 规则在不支持 is:() 的浏览器中无效 */
+:is(ul, ol) > li {
+  … /* 支持 :is(...) 选择器时，这里的 CSS 生效 */
+}
+
+@supports not selector(:is(a, b)) {
+  /* 不支持 :is() 时的备选方案 */
+  ul > li,
+  ol > li {
+    … /* 以上给不支持 :is(...) 的浏览器展开了 CSS 选择器规则 */
+  }
+}
+
+@supports selector(:nth-child(1n of a, b)) {
+  /* 这条规则需要内嵌在 @supports 块内。
+     否则该规则在支持 :nth-child(…)但不支持其内的 `of` 参数的浏览器中，
+     只有部分生效 */
+  :is(:nth-child(1n of ul, ol) a,
+  details > summary) {
+    … /* 当:is(...) 选择器以及 :nth-child(…) 的 `of` 参数都支持时，
+        这里的 CSS 会生效 */
+  }
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS4 Conditional", "#at-supports-ext", "@supports")}}{{Spec2("CSS4 Conditional")}}Adds the selector() function.
{{SpecName("CSS3 Conditional", "#at-supports", "@supports")}}{{Spec2("CSS3 Conditional")}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.supports")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/@viewport/height/index.html b/files/zh-cn/web/css/@viewport/height/index.html new file mode 100644 index 0000000000..5afb1dba76 --- /dev/null +++ b/files/zh-cn/web/css/@viewport/height/index.html @@ -0,0 +1,79 @@ +--- +title: height +slug: Web/CSS/@viewport/height +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +
height CSS 属性是同时设置可视区 {{cssxref("@viewport/min-height", "min-height")}} and {{cssxref("@viewport/max-height", "max-height")}} 的简写。当你设置一个值的时候，最小高度（minimum height）和最大高度（maximum height）会被同时设置。
+ +

如果提供两个值，第一个值会被设置为最小高度，第二个值将会被设置为最大高度。

+ +

语法

+ +
/* One value */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* Two values */
+height: 320px 200px;
+
+ +

合法值

+ +
+
auto
+
真实生效的高度值将根据其他 CSS 属性计算得出。
+
<length>
+
一个非负的绝对或相对值。
+
<percentage>
+
一个相对于缩放因子是 1.0 的初始可视区宽高的百分比值，水平和垂直方向的长度分别计算。不能是负值。
+
+ +

正式定义

+ +

{{cssinfo}}

+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

设置最小和最大高度

+ +
@viewport {
+  height: 500px;
+}
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}{{Spec2('CSS3 Device')}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.viewport.height")}}

+ +

同时查看

+ + diff --git a/files/zh-cn/web/css/@viewport/index.html b/files/zh-cn/web/css/@viewport/index.html new file mode 100644 index 0000000000..b1b7b23175 --- /dev/null +++ b/files/zh-cn/web/css/@viewport/index.html @@ -0,0 +1,120 @@ +--- +title: '@viewport' +slug: Web/CSS/@viewport +tags: + - Adaptation + - At-rule + - CSS + - Device + - NeedsContent + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}{{deprecated_header}}
+ +

 @viewport 规则让我们可以对文档的大小进行设置 {{glossary("viewport")}} 。这个特性主要被用于移动设备，但是也可以用在支持类似“固定到边缘”等特性的桌面浏览器，如微软的Edge。

+ +

按百分比计算尺寸的时候，就是参照的初始视口（viewport）。初始视口指的是任何用户代理和样式对它进行修改之前的视口。桌面浏览器如果不是全屏模式的话，一般是基于窗口大小。

+ +

在移动设备上（或者桌面浏览器的全屏模式），初始视口通常就是应用程序可以使用的屏幕部分。它可能是全屏或者减去由操作系统或者其它应用程序所占用的部分（例如状态栏）。

+ +
@viewport {
+  width: 100vw; /*将视口宽度设为与设备宽度相同*/
+}
+ +

语法

+ +

@规则包含一组包含在CSS代码块中的嵌套的 {{glossary("descriptor (CSS)", "descriptor")}}。

+ +

缩放因子1.0 或者 100% 表示不缩放，大于1表示放大，小于1表示缩小。

+ +

描述符

+ +

目前，大多数浏览器对 @viewport 的支持很差，Internet Explorer和Edge对其支持较好。但即使在这些浏览器中，也只有少量的描述符可用。如果浏览器不支持 @viewport，浏览器会忽略 @viewport 以及任何和其相关的描述符。

+ +
+
min-width
+
设置viewport的最小宽度
+
max-width
+
设置viewport的最大宽度
+
width
+
同时设置 min-width 和 max-width
+
min-height
+
设置viewport的最小高度
+
max-height
+
设置viewport的最大高度
+
height
+
同时设置 min-height 和 max-height
+
zoom
+
设置初始缩放系数
+
min-zoom
+
设置最小缩放系数
+
max-zoom
+
设置最大缩放系数
+
user-zoom
+
设置用户是能更改缩放系数
+
orientation
+
设置文档的方向
+
{{cssxref("@viewport/viewport-fit", "viewport-fit")}}
+
Controls the display of the document on non-rectangular displays.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+
+@viewport {
+  orientation: landscape;
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Round Display", "#extending-viewport-rule", "@viewport")}}{{Spec2("CSS Round Display")}}Defined the {{cssxref("@viewport/viewport-fit", "viewport-fit")}} descriptor.
{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}{{Spec2('CSS3 Device')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.at-rules.viewport")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/css/@viewport/orientation/index.html b/files/zh-cn/web/css/@viewport/orientation/index.html new file mode 100644 index 0000000000..d67a6a851d --- /dev/null +++ b/files/zh-cn/web/css/@viewport/orientation/index.html @@ -0,0 +1,109 @@ +--- +title: orientation +slug: Web/CSS/@viewport/orientation +tags: + - CSS + - CSS Description +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

摘要

+ +

此 orientation CSS 描述符控制由{{cssxref("@viewport")}}定义文档的方向。

+ +

通过设备的倾斜摆动情况来决定文档显示的方向，作者可以通过设置这个描述符来抑制方向的变化{{cssinfo}}

+ +

语法

+ +
/* Keyword values */
+orientation: auto;
+orientation: portrait;/*锁定为纵向*/
+orientation: landscape;/* 锁定为横向*/
+
+ +

取值

+ +
+
auto
+
用户代理将文档的方向设置为自动，通常基于设备的定位由加速度传感器 （如果设备具有这种硬件传感器），但是用户控制，OS 级别的"锁方向"往往会优先于加速度传感器的设置。
+
portrait
+
文档被锁定为纵向。
+
landscape
+
文档被锁定为横向。
+
+ +

标准语法

+ +
{{csssyntax}}
+ +

规范

+ + + + + + + + + + + + + + + + +
规范标准注释
{{SpecName('CSS3 Device', '#the-lsquoorientationrsquo-descriptor', '"orientation" descriptor')}}{{Spec2('CSS3 Device')}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatNo}}10 {{property_prefix("-ms")}}{{CompatNo}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}8 {{property_prefix("-o")}}{{CompatUnknown}}
+
diff --git a/files/zh-cn/web/css/@viewport/viewport-fit/index.html b/files/zh-cn/web/css/@viewport/viewport-fit/index.html new file mode 100644 index 0000000000..0c151c01b4 --- /dev/null +++ b/files/zh-cn/web/css/@viewport/viewport-fit/index.html @@ -0,0 +1,66 @@ +--- +title: viewport-fit +slug: Web/CSS/@viewport/viewport-fit +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}} {{Draft}} {{SeeCompatTable}}
+ +

viewport-fit CSS {{CSSxRef("@viewport")}}  {{Glossary("Descriptor (CSS)", "descriptor")}} 是为了控制文档是如何填充满屏幕的。

+ +

语法

+ +
/* 关键值*/
+viewport-fit: auto;
+viewport-fit: contain;
+viewport-fit: cover;
+
+ +

属性值

+ +
+
auto
+
此值不影响初始布局视图端口，并且整个web页面都是可查看的。
+
contain
+
视图端口按比例缩放，以适合显示内嵌的最大矩形。
+
cover
+
视图端口被缩放以填充设备显示。强烈建议使用 safe area inset 变量，以确保重要内容不会出现在显示之外。
+
+ +

形式语法

+ +
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+ +

注意

+ +

在使用 viewport-fit 描述符时，必须记住并不是所有的设备显示都是矩形的，因此应该使用safe area inset 变量。

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}{{Spec2("CSS Round Display")}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.at-rules.viewport.viewport-fit")}}

+ +

另请参见

+ + diff --git a/files/zh-cn/web/css/@viewport/width/index.html b/files/zh-cn/web/css/@viewport/width/index.html new file mode 100644 index 0000000000..81da52cfe6 --- /dev/null +++ b/files/zh-cn/web/css/@viewport/width/index.html @@ -0,0 +1,132 @@ +--- +title: width +slug: Web/CSS/@viewport/width +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

The width CSS descriptor is shorthand for setting both the min-width and the max-width descriptors of the viewport. By providing one viewport length value, that value will determine both the min-width and the max-width to the value provided.

+ +

If two viewport values are provided the first value will be set to the min-width and the second value will be set max-width.

+ +

Syntax

+ +
/* An example with one viewport value: */
+@viewport {
+    width: 320px;
+}
+
+/* An example with two viewport values: */
+@viewport {
+    width: 320px, 120px;
+}
+
+
+ + + +

Values

+ +
+
auto
+
The used value is calculated from the other CSS descriptors' values.
+
<length>
+
A non-negative absolute or relative length.
+
<percentage>
+
A percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively. Must be non-negative.
+
+ +

Formal syntax

+ +
auto | <length> | <percentage>
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}{{Spec2('CSS3 Device')}}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support29 (behind a flag){{CompatNo}}10 {{property_prefix("-ms")}}11.10
+ Removed in 15
+ Reintroduced behind a flag in 16		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support + + + + + + +
4.4
+ 		+ + + + + + +
29
+ 		{{CompatNo}}10{{property_prefix("-ms")}}11.10
+ Removed in 15
+ Reintroduced behind a flag in 16		{{CompatNo}}
+
diff --git a/files/zh-cn/web/css/@viewport/zoom/index.html b/files/zh-cn/web/css/@viewport/zoom/index.html new file mode 100644 index 0000000000..6484a091bd --- /dev/null +++ b/files/zh-cn/web/css/@viewport/zoom/index.html @@ -0,0 +1,68 @@ +--- +title: zoom +slug: Web/CSS/@viewport/zoom +tags: + - CSS + - CSS Descriptor +translation_of: Web/CSS/@viewport +--- +
{{ CSSRef }}
+ +

zoom CSS 属性会根据 {{cssxref("@viewport")}} 来初始化一个缩放因数。

+ +

当设置1.0 或 100%时表示不缩放。更大的值放大，更小的值缩小。

+ +

{{cssinfo}}

+ +

语法

+ +
/* Keyword value */
+zoom: auto;
+
+/* <number> values */
+zoom: 0.8;
+zoom: 2.0;
+
+/* <percentage> values */
+zoom: 150%;
+
+ +

值

+ +
+
auto
+
根据`viewport`来既定当前标签的缩放。
+
<number>
+
必须是一个非负数。1表示没有缩放，大于1表示放大的倍数，小于1亦然。
+
<percentage>
+
必须是一个非负的百分比。以100%为基础进行缩放。
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Device', '#zoom-desc', '"zoom" descriptor')}}{{Spec2('CSS3 Device')}}Initial specification
+ +

浏览器兼容

+ + + +

{{Compat("css.at-rules.viewport.zoom")}}

diff --git a/files/zh-cn/web/css/_colon_-moz-only-whitespace/index.html b/files/zh-cn/web/css/_colon_-moz-only-whitespace/index.html new file mode 100644 index 0000000000..608db40847 --- /dev/null +++ b/files/zh-cn/web/css/_colon_-moz-only-whitespace/index.html @@ -0,0 +1,90 @@ +--- +title: ':blank' +slug: 'Web/CSS/:-moz-only-whitespace' +translation_of: 'Web/CSS/:-moz-only-whitespace' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

:blank CSS 伪类选择器 用于匹配如下节点

+ +

1. 没有子节点;

+ +

2. 仅有空的文本节点;

+ +

3. 仅有空白符的文本节点.

+ +

语法

+ +
{{CSSSyntax}}
+ +

样例

+ +

HTML

+ +
<div> </div>
+
+ +

CSS

+ + + +
div {
+  border: 4px solid red;
+}
+
+:blank {
+  border-color: lime;
+}
+ +

结果

+ +

{{EmbedLiveSample("Example", "100%", "50")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}{{Spec2("CSS4 Selectors")}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.blank")}}

+ +

参考

+ + diff --git a/files/zh-cn/web/css/_colon_-moz-placeholder/index.html b/files/zh-cn/web/css/_colon_-moz-placeholder/index.html new file mode 100644 index 0000000000..28d1d74fba --- /dev/null +++ b/files/zh-cn/web/css/_colon_-moz-placeholder/index.html @@ -0,0 +1,66 @@ +--- +title: ':-moz-placeholder' +slug: 'Web/CSS/:-moz-placeholder' +tags: + - CSS + - CSS Pseudo-class + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:placeholder-shown' +--- +

 

+ +
提示: 在Firefox 19+版本中 :-moz-placeholder 伪类将被 {{ cssxref('::-moz-placeholder') }} 伪元素所替代.
+ +
Note: The CSSWG have decided to introduce :placeholder-shown. This functionality will be reintroduced in Gecko at some point in the future, unprefixed and under the new name.  {{bug(1069012)}}
+ +

{{ CSSRef() }}{{Non-standard_header}}{{ gecko_minversion_header("2.0") }}

+ +

摘要

+ +

 :-moz-placeholder伪类控制元素所显示的文字占位符文字占位符. 它允许开发者/设计师改变文字占位符样式. 默认的文字占位符颜色为浅灰色,当你的表单背景色为类似的颜色时它可能效果并不是很明显,那么你就可以使用这个伪类来改变文字占位符的颜色.

+ +

示例

+ +

这个示例将文字占位符改变为了绿色.

+ +
<!doctype html>
+<html>
+<head>
+  <title>Placeholder demo</title>
+  <style type="text/css">
+    input:-moz-placeholder {
+      color: green;
+    }
+  </style>
+</head>
+<body>
+  <input id="test" placeholder="Placeholder text!">
+</body>
+</html>
+
+ +

查看这个示例.

+ +

溢出

+ +

在手机等设备上搜索框和表单字段经常会缩的很短,有时输入框并不能完全显示文字占位符,那么它便会被生硬的"切断".为了防止出现这种难看的效果,可以使用CSS text-overflow: ellipsis; 来省略一中间部分文字.

+ +
input[placeholder] { text-overflow: ellipsis; }
+::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
+input:-moz-placeholder { text-overflow: ellipsis; }
+
+ +

It was David Walsh, the man on fire who introduced this to a lot of designers. Placeholders and Overflow.

+ +

Bugzilla

+ +

{{ Bug(457801) }}

+ +

See also

+ + diff --git a/files/zh-cn/web/css/_colon_-moz-window-inactive/index.html b/files/zh-cn/web/css/_colon_-moz-window-inactive/index.html new file mode 100644 index 0000000000..ec8a4b56bb --- /dev/null +++ b/files/zh-cn/web/css/_colon_-moz-window-inactive/index.html @@ -0,0 +1,102 @@ +--- +title: ':-moz-window-inactive' +slug: 'Web/CSS/:-moz-window-inactive' +translation_of: 'Web/CSS/:-moz-window-inactive' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

在CSS 伪类是Mozilla的扩展匹配任何元素，而它在非活动窗口。:-moz-window-inactive

+ +

:-moz-window-inactive 也在内容HTML文档中工作。

+ +
注意：在添加此伪类之前，通过active="true"在顶级XUL chrome窗口上设置attribute（）来实现为背景窗口提供不同样式。该属性不再使用。
+ +

示例

+ +

此示例根据窗口是否处于活动状态来改变框背景的外观。

+ +

HTML

+ +
<div id=“mybox”>
+  <p>这是一个盒子！</p>
+</div>
+ +

CSS

+ +
#mybox {
+  background: linear-gradient(to bottom, yellow, cyan);
+  width: 200px;
+  height: 200px;
+}
+
+#mybox:-moz-window-inactive {
+  background: cyan;
+}
+ + + +

{{EmbedLiveSample('Example', 220, 220)}}

+ +

您可以将其视为{{LiveSampleLink('Example', 'live sample here')}}。

+ +

产品规格

+ +

不属于任何规范。这是专门针对Gecko的专有伪类。

+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop(2)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implemented in {{bug("508482")}}.

diff --git a/files/zh-cn/web/css/_colon_active/index.html b/files/zh-cn/web/css/_colon_active/index.html new file mode 100644 index 0000000000..1d09b7d141 --- /dev/null +++ b/files/zh-cn/web/css/_colon_active/index.html @@ -0,0 +1,128 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - Layout + - Web + - 伪类 + - 参考 + - 布局 +translation_of: 'Web/CSS/:active' +--- +
{{CSSRef}}
+ +

CSS :active 伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。

+ +
/* Selects any <a> that is being activated */
+a:active {
+  color: red;
+}
+ +

:active 伪类一般被用在 {{HTMLElement("a")}} 和 {{HTMLElement("button")}} 元素中. 这个伪类的一些其他适用对象包括包含激活元素的元素，以及可以通过他们关联的{{HTMLElement("label")}}标签被激活的表格元素。

+ +

这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 {{cssxref(":link")}}，{{cssxref(":hover")}} 和 {{cssxref(":visited")}}。为保证样式生效，需要把 :active 的样式放在所有链接相关的样式之后。这种链接伪类先后顺序被称为 LVHA 顺序：:link — :visited — :hover — :active。

+ +
注意: 在有多键鼠标的系统中，CSS 3 规定 :active 伪类必须只匹配主按键；对于右手操作鼠标来说，就是左键。
+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +

激活链接

+ +

HTML

+ +
<p>This paragraph contains a link:
+  <a href="#">This link will turn red while you click on it.</a>
+  The paragraph will get a gray background while you click on it or the link.
+</p>
+ +

CSS

+ +
a:link { color: blue; }          /* 未访问链接 */
+a:visited { color: purple; }     /* 已访问链接 */
+a:hover { background: yellow; }  /* 用户鼠标悬停 */
+a:active { color: red; }         /* 激活链接 */
+
+p:active { background: #eee; }   /* 激活段落 */
+ +

结果

+ +

{{EmbedLiveSample('Active_links')}}

+ +

激活表单元素

+ +

HTML

+ +
<form>
+  <label for="my-button">My button: </label>
+  <button id="my-button" type="button">Try Clicking Me or My Label!</button>
+</form>
+ +

CSS

+ +
form :active {
+  color: red;
+}
+
+form button {
+  background: white;
+}
+ +

结果

+ +

{{EmbedLiveSample('Active_form_elements')}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}}
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}无更改。
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}无更改。
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}无更改。
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}首次定义。
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.active")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/_colon_any-link/index.html b/files/zh-cn/web/css/_colon_any-link/index.html new file mode 100644 index 0000000000..58a8a126cf --- /dev/null +++ b/files/zh-cn/web/css/_colon_any-link/index.html @@ -0,0 +1,73 @@ +--- +title: ':any-link' +slug: 'Web/CSS/:any-link' +tags: + - CSS + - 实验性 +translation_of: 'Web/CSS/:any-link' +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

:any-link  CSS 伪类 选择器代表一个有链接锚点的元素，而不管它是否被访问过，也就是说，它会匹配每一个有 href 属性的 {{HTMLElement("a")}}、{{HTMLElement("area")}} 或 {{HTMLElement("link")}} 元素。因此，它会匹配到所有的 {{cssxref(":link")}} 或 {{cssxref(":visited")}}。

+ +
/* 选中任意匹配 :link 和 :visited 元素*/
+:any-link {
+  color: green;
+}
+
+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +
+ +

HTML

+ +
<a href="https://example.com">External link</a><br>
+<a href="#">Internal target link</a><br>
+<a>Placeholder link (won't get styled)</a>
+ +

CSS

+ +
a:any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+
+/* WebKit browsers */
+a:-webkit-any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+
+
+ +

{{EmbedLiveSample('Example')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}}{{Spec2('CSS4 Selectors')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("css.selectors.any-link")}}

diff --git a/files/zh-cn/web/css/_colon_any/index.html b/files/zh-cn/web/css/_colon_any/index.html new file mode 100644 index 0000000000..3147c8489d --- /dev/null +++ b/files/zh-cn/web/css/_colon_any/index.html @@ -0,0 +1,189 @@ +--- +title: ':any' +slug: 'Web/CSS/:any' +tags: + - CSS + - 伪类选择器 + - 实验性 +translation_of: 'Web/CSS/:is' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

概要

+ +

The :any() pseudo-class lets you quickly construct sets of similar selectors by establishing groups from which any of the included items will match. This is an alternative to having to repeat the entire selector for the one item that varies.

+ +

译文：any()伪类可以让您快速构建类似的选择器集合，通过建立包含所有包含项的组来匹配。这是另一种选择，它必须重复整个选择器，因为其中一个项目是不同的。

+ +
Note : This pseudo-class is in progress to be standardized in CSS Selectors Level 4 under the name :matches(). It is likely that the syntax and name of :-vendor-any() will be changed to reflect it in the near future.
+ +
注意:这个伪类正在CSS选择器第4级按照名称:matches()进行标准化。很可能的语法和名称:- vendor-any()将在不久的将来被更改以反映它。
+ +

语法

+ +
{{csssyntax}}
+ +

值

+ +
+
selector
+
选择器。这可以是由 CSS 3 简单选择器 组成的简单选择器或多重选择器，并且可以包含后代组合器。
+
+ +
注意：选择器可以不包含伪元素，并且仅允许的组合器是后代组合器。
+ +

例子

+ +

举个例子，如以下 CSS：

+ +
/* 3 deep (or more) unordered lists use a square */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+
+ +

可以写成这样：

+ +
/* 3 deep (or more) unordered lists use a square */
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}
+ +

但是，不能写成这样（详见the section on performance）：

+ +
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
+  list-style-type: square;
+}
+ +

Notes

+ +

译文： 这个伪类选择器会在处理 HTML5 的 sections and headings 中尤其有用。因为 {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, 和 {{HTMLElement("nav")}} 可以被嵌套，如果不使用  :any() ，为了去匹配这些标签来给予样式会变得困难。

+ +

举个例子，当不使用 :any() ，给予不同的 DOM  结点层次深度下的所有的 {{HTMLElement("h1")}}  的元素样式时，将会变得特别的复杂。

+ +
/* Level 0 */
+h1 {
+  font-size: 30px;
+}
+/* Level 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Level 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1, {
+  font-size: 20px;
+}
+/* Level 3 */
+/* ... don't even think about it*/
+
+ +

然而，通过使用  :any() ，这将变得很简单：

+ +
/* Level 0 */
+h1 {
+  font-size: 30px;
+}
+/* Level 1 */
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Level 2 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Level 3 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+ +

性能与特异性问题

+ +

Bug 561154 追踪了一个关于 Gecko 作为内核的浏览器在使用 :-moz-any() 不正确的问题。在最新的浏览器(从 Firefox 12) 实现 :-moz-any() 有一个通用的规则，在使用这个伪类选择器时，当使用它作为最右边的选择器会比使用 ID, Class, 标签选择器作为最右边的选择器要来的慢。

+ +

例如:

+ +
.a > :-moz-any(.b, .c)
+
+ +

会比下面的表达式慢

+ +
.a > .b, .a > .c
+
+ +

而下面的表达式将会是最快的

+ +
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
+
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}12.0 (534.30){{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}5
+ {{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}5
+ {{property_prefix("-webkit")}}
+
diff --git "a/files/zh-cn/web/css/_colon_blank\347\251\272\347\231\275\344\274\252\347\261\273/index.html" "b/files/zh-cn/web/css/_colon_blank\347\251\272\347\231\275\344\274\252\347\261\273/index.html" new file mode 100644 index 0000000000..adcaa5c998 --- /dev/null +++ "b/files/zh-cn/web/css/_colon_blank\347\251\272\347\231\275\344\274\252\347\261\273/index.html" @@ -0,0 +1,56 @@ +--- +title: ':blank' +slug: 'Web/CSS/:blank空白伪类' +tags: + - CSS + - CSS 选择器 + - 伪类 +translation_of: 'Web/CSS/:blank' +--- +

{{CSSRef}}{{Draft}}{{SeeCompatTable}}

+ +
+

注意：使用 :blank 选择器被认为尚有一定风险，CSSWG 正在持续改进它。

+ +

详见 CSSWG issue #1967。

+
+ +

:blank CSS 伪类选择器选择用户输入为空的输入框，如 {{HTMLElement("input")}} 和 {{HTMLElement("textarea")}})。

+ +

语法

+ +
{{CSSSyntax}}
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}{{Spec2("CSS4 Selectors")}}Initial definition.
+ +

浏览器兼容性

+ + + + + +

{{Compat("css.selectors.blank")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/_colon_checked/index.html b/files/zh-cn/web/css/_colon_checked/index.html new file mode 100644 index 0000000000..4a95ab5060 --- /dev/null +++ b/files/zh-cn/web/css/_colon_checked/index.html @@ -0,0 +1,198 @@ +--- +title: ':checked' +slug: 'Web/CSS/:checked' +translation_of: 'Web/CSS/:checked' +--- +
{{CSSRef}}
+ +

:checked CSS 伪类选择器表示任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或("select") 元素中的option HTML元素("option")。

+ +
/* 匹配任意被勾选/选中的radio(单选按钮),checkbox(复选框),或者option(select中的一项) */
+:checked {
+  margin-left: 25px;
+  border: 1px solid blue;
+}
+ +

用户通过勾选/选中元素或取消勾选/取消选中，来改变该元素的 :checked 状态。

+ +
+

Note:因为浏览器经常将<option>视为可替换元素,因此不同的浏览器通过:checked伪类渲染出来的效果也不尽相同.

+
+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +

基础示例

+ + + +

HTML

+ +
<div>
+  <input type="radio" name="my-input" id="yes">
+  <label for="yes">Yes</label>
+
+  <input type="radio" name="my-input" id="no">
+  <label for="no">No</label>
+</div>
+
+<div>
+  <input type="checkbox" name="my-checkbox" id="opt-in">
+  <label for="opt-in">Check me!</label>
+</div>
+
+<select name="my-select" id="fruit">
+  <option value="opt1">Apples</option>
+  <option value="opt2">Grapes</option>
+  <option value="opt3">Pears</option>
+</select>
+
+ +

CSS

+ +
div,
+select {
+  margin: 8px;
+}
+
+/* Labels for checked inputs */
+input:checked + label {
+  color: red;
+}
+
+/* Radio element, when checked */
+input[type="radio"]:checked {
+  box-shadow: 0 0 0 3px orange;
+}
+
+/* Checkbox element, when checked */
+input[type="checkbox"]:checked {
+  box-shadow: 0 0 0 3px hotpink;
+}
+
+/* Option elements, when selected */
+option:checked {
+  box-shadow: 0 0 0 3px lime;
+  color: red;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Basic_example")}}

+ +

借用隐藏的checkbox来切换元素的样式（显示/隐藏）

+ + + +

这个例子利用了:checked伪类，让用户基于复选框的状态切换内容，而无需使用JavaScript。

+ +

HTML

+ +
<input type="checkbox" id="expand-toggle" />
+
+<table>
+  <thead>
+    <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
+  </thead>
+  <tbody>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
+    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+  </tbody>
+</table>
+
+<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>
+
+ +

CSS

+ +
/* Hide the toggle checkbox */
+#expand-toggle {
+  display: none;
+}
+
+/* Hide expandable content by default */
+.expandable {
+  visibility: collapse;
+  background: #ddd;
+}
+
+/* Style the button */
+#expand-btn {
+  display: inline-block;
+  margin-top: 12px;
+  padding: 5px 11px;
+  background-color: #ff7;
+  border: 1px solid;
+  border-radius: 3px;
+}
+
+/* Show hidden content when the checkbox is checked */
+#expand-toggle:checked ~ * .expandable {
+  visibility: visible;
+}
+
+/* Style the button when the checkbox is checked */
+#expand-toggle:checked ~ #expand-btn {
+  background-color: #ccc;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Toggling_elements_with_a_hidden_checkbox", "auto", 220)}}

+ +

图片相册

+ +

同时，可以使用隐藏的radioboxes中的:checked伪类来构建一个只有在鼠标单击“预览”时，图片才会以全尺寸展示的图片相册，查看演示。

+ +
注: 一个类似的效果，基于:hover伪类和没有隐藏的radioboxes，查看这个演示，来自:hover页面。
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规格 级别附注
{{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }}{{ Spec2('HTML WHATWG') }}No change.
{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}{{ Spec2('HTML5 W3C') }}Defines the semantic regarding HTML.
{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}{{ Spec2('CSS4 Selectors') }}No change.
{{ SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked') }}{{ Spec2('CSS3 Basic UI') }}Link to Selectors Level 3.
{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}{{ Spec2('CSS3 Selectors') }}Defines the pseudo-class, but not the associated semantic
+ +

浏览器兼容性

+ +

{{Compat("css.selectors.checked")}}

diff --git a/files/zh-cn/web/css/_colon_default/index.html b/files/zh-cn/web/css/_colon_default/index.html new file mode 100644 index 0000000000..e7a3c59512 --- /dev/null +++ b/files/zh-cn/web/css/_colon_default/index.html @@ -0,0 +1,135 @@ +--- +title: ':default' +slug: 'Web/CSS/:default' +translation_of: 'Web/CSS/:default' +--- +
{{CSSRef}}
+ +

 :default CSS pseudo-class 表示一组相关元素中的默认表单元素。

+ +

该选择器可以在 {{htmlelement("button")}}, <input type="checkbox">, <input type="radio">, 以及 {{htmlelement("option")}} 上使用。

+ +
/* Selects any default <input> */
+input:default {
+  background-color: lime;
+}
+ +

允许多个选择的分组元素也可以具有多个默认值，即，它们可以具有最初选择的多个项目。在这种情况下，所有默认值都使用 :default 伪类表示。例如，您可以在一组复选框之间设置默认复选框。

+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<input type="radio" name="season" id="spring">
+<label for="spring">Spring</label>
+
+<input type="radio" name="season" id="summer" checked>
+<label for="summer">Summer</label>
+
+<input type="radio" name="season" id="fall">
+<label for="fall">Fall</label>
+
+<input type="radio" name="season" id="winter">
+<label for="winter">Winter</label>
+ +

CSS

+ +
input:default {
+  box-shadow: 0 0 2px 1px coral;
+}
+
+input:default + label {
+  color: coral;
+}
+ +

结果

+ +

{{EmbedLiveSample('示例')}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName('HTML WHATWG', '#selector-default', ':default')}}{{Spec2('HTML WHATWG')}}无变化
{{SpecName('HTML5 W3C', '#selector-default', ':default')}}{{Spec2('HTML5 W3C')}}定义了HTML语义和规范验证
{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}{{Spec2('CSS4 Selectors')}}无变化
{{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}}{{Spec2('CSS3 Basic UI')}}定义了伪类，但不关联伪类
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support10.0{{CompatGeckoDesktop("2.0")}}{{CompatNo}}10.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatNo}}10.05.0
+
diff --git a/files/zh-cn/web/css/_colon_defined/index.html b/files/zh-cn/web/css/_colon_defined/index.html new file mode 100644 index 0000000000..74c0e616c1 --- /dev/null +++ b/files/zh-cn/web/css/_colon_defined/index.html @@ -0,0 +1,113 @@ +--- +title: ':defined' +slug: 'Web/CSS/:defined' +translation_of: 'Web/CSS/:defined' +--- +
{{ CSSRef }}
+ +

:defined CSS 伪类 表示任何已定义的元素。这包括任何浏览器内置的标准元素以及已成功定义的自定义元素 (例如通过 {{domxref("CustomElementRegistry.define()")}} 方法)。

+ +
/* 选择所有已定义的元素 */
+:defined {
+  font-style: italic;
+}
+
+/* 选择指定自定义元素的任何实例 */
+simple-custom:defined {
+  display: block;
+}
+
+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +

下面的片段摘自我们的 定义伪类 demo (点击查看源码).

+ +

在这个 demo 中我们定义了一个非常简单的自定义元素:

+ +
customElements.define('simple-custom',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      let divElem = document.createElement('div');
+      divElem.textContent = this.getAttribute('text');
+
+      let shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(divElem);
+  }
+})
+ +

然后在文档中插入一个该元素的副本，以及一个标准的 <p> 标签:

+ +
<simple-custom text="Custom element example text"></simple-custom>
+
+<p>Standard paragraph example text</p>
+ +

在 CSS 中我们首先包含以下规则:

+ +
// 为两个元素设置不同的背景色
+p {
+  background: yellow;
+}
+
+simple-custom {
+  background: cyan;
+}
+
+// 将自定义元素和内置元素的字体都设为斜体
+:defined {
+  font-style: italic;
+}
+ +

 

+ +

然后提供以下两个规则来隐藏未定义的自定义元素的所有实例，并显示被定义为块级元素的实例：

+ +

 

+ +
simple-custom:not(:defined) {
+  display: none;
+}
+
+simple-custom:defined {
+  display: block;
+}
+ +

这在你有一个复杂的自定义元素需要一段时间才能加载到页面中时非常有用 —— 你可能想要隐藏元素的实例直到定义完成为止，这样你就不会在页面上出现一些难看的元素。

+ +

说明

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined') }}{{ Spec2('HTML WHATWG') }} 
+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.selectors.defined")}}

+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/_colon_dir/index.html b/files/zh-cn/web/css/_colon_dir/index.html new file mode 100644 index 0000000000..9cd5b27a7f --- /dev/null +++ b/files/zh-cn/web/css/_colon_dir/index.html @@ -0,0 +1,115 @@ +--- +title: ':dir()' +slug: 'Web/CSS/:dir' +tags: + - CSS伪类 + - 布局 + - 网络 + - 选择器4 +translation_of: 'Web/CSS/:dir' +--- +

{{ CSSRef() }}

+ +

{{ SeeCompatTable() }}

+ +

总结

+ +

:dir()伪类匹配特定文字书写方向的元素。在HTML中, 文字方向由{{ htmlattrxref("dir", "html") }}属性决定。其他的文档类型可能有其他定义文字方向的方法。

+ +

值得注意的是用CSS伪类 :dir() 并不等于使用 [dir=…] 属性选择器。后者匹配 {{ htmlattrxref("dir", "html") }} 的值且不会匹配到未定义此属性的元素，即使该元素继承了父元素的属性；类似的， [dir=rtl] 或 [dir=ltr]不会匹配到dir属性的值为auto的元素。而 :dir()会匹配经过客户端计算后的属性, 不管是继承的dir值还是dir值为auto的。

+ +

另外，:dir()伪类仅考虑文档（大多数情况是HTML）中定义的文字方向的语义值(semantic value)，并不会考虑格式值(styling value)，如CSS属性 {{ cssxref("direction") }} 的值。

+ +

语法

+ +
元素:dir(文字书写方向) { style properties } 文字书写方向为ltr或rtl
+
+ +

示例

+ +
<div dir="rtl">
+  <span>test1</span>
+  <div dir="ltr">test2
+    <div dir="auto">עִבְרִית</div>
+  </div>
+</div>
+
+ +

本例中 :dir(rtl) 会匹配最外层的div，内容为test1的span，和有希伯来字符的div。:dir(ltr) 会匹配到内容为test2的div.

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
{{ SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()') }}{{ Spec2('CSS4 Selectors') }}最初定义.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatNo() }}{{ CompatGeckoDesktop("17") }} {{ property_prefix("-moz") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatGeckoMobile("17") }} {{ property_prefix("-moz") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ + + + + + diff --git a/files/zh-cn/web/css/_colon_disabled/index.html b/files/zh-cn/web/css/_colon_disabled/index.html new file mode 100644 index 0000000000..75fdcefd03 --- /dev/null +++ b/files/zh-cn/web/css/_colon_disabled/index.html @@ -0,0 +1,173 @@ +--- +title: ':disabled' +slug: 'Web/CSS/:disabled' +translation_of: 'Web/CSS/:disabled' +--- +

{{ CSSRef() }}

+ +

:disabled  CSS 伪类表示任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。元素还有一个启用状态（enabled state），在启用状态下，元素可以被激活或获取焦点。

+ +

 

+ +
/* Selects any disabled <input> */
+input:disabled {
+  background: #ccc;
+}
+ +

 

+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +

这个例子显示基本的购物表单。通过使用 JavaScript {{event("change")}} 事件让用户启用/禁用付款字段。

+ +

HTML

+ +
<form action="#">
+  <fieldset id="shipping">
+    <legend>Shipping address</legend>
+    <input type="text" placeholder="Name">
+    <input type="text" placeholder="Address">
+    <input type="text" placeholder="Zip Code">
+  </fieldset>
+  <br>
+  <fieldset id="billing">
+    <legend>Billing address</legend>
+    <label for="billing_is_shipping">Same as shipping address:</label>
+    <input type="checkbox" id="billing-checkbox" checked>
+    <br>
+    <input type="text" placeholder="Name" disabled>
+    <input type="text" placeholder="Address" disabled>
+    <input type="text" placeholder="Zip Code" disabled>
+  </fieldset>
+</form>
+ +

CSS

+ +
input[type="text"]:disabled {
+  background: #ccc;
+}
+ +

JavaScript

+ +
// Wait for the page to finish loading
+document.addEventListener('DOMContentLoaded', function () {
+  // Attach `change` event listener to checkbox
+  document.getElementById('billing-checkbox').onchange = toggleBilling;
+}, false);
+
+function toggleBilling() {
+  // Select the billing text fields
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+
+  // Toggle the billing text fields
+  for (var i = 0; i < billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+ +

结果

+ +

{{EmbedLiveSample('示例', 300, 250)}}

+ +

 

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('HTML WHATWG', '#selector-disabled', ':disabled') }}{{ Spec2('HTML WHATWG') }}No change.
{{ SpecName('HTML5 W3C', '#selector-disabled', ':disabled') }}{{ Spec2('HTML5 W3C') }}Defines the semantic regarding HTML and forms.
{{ SpecName('CSS4 Selectors', '#enableddisabled', ':disabled') }}{{ Spec2('CSS4 Selectors') }}No change.
{{ SpecName('CSS3 UI', '#pseudo-classes', ':disabled') }}{{ Spec2('CSS3 UI') }}Link to Selectors Level 3.
{{ SpecName('CSS3 Selectors', '#enableddisabled', ':disabled') }}{{ Spec2('CSS3 Selectors') }}Defines the pseudo-class, but not the associated semantic.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{ CompatGeckoDesktop("1") }}9.09.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1{{ CompatGeckoMobile("1") }}9.09.53.1
+
+ +

相关链接

+ + diff --git a/files/zh-cn/web/css/_colon_empty/index.html b/files/zh-cn/web/css/_colon_empty/index.html new file mode 100644 index 0000000000..a51ec68257 --- /dev/null +++ b/files/zh-cn/web/css/_colon_empty/index.html @@ -0,0 +1,105 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +tags: + - ':empty' + - CSS + - CSS 骨架效果 + - CSS伪类 + - Layout + - css skeleton + - skelenton + - 参考 + - 布局 + - 网络 +translation_of: 'Web/CSS/:empty' +--- +
{{ CSSRef()}}
+ +

:empty CSS 伪类 代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。

+ +
/* Selects any <div> that contains no content */
+div:empty {
+  background: lime;
+}
+ +

语法

+ +
{{csssyntax}}
+
+ +

例子

+ +

HTML

+ +
<div class="box"><!-- I will be lime --></div>
+<div class="box">I will be pink</div>
+<div class="box">
+    <!-- I will be red because of the whitespace around this comment -->
+</div>
+ +

CSS

+ + + +
.box {
+    background: pink;
+    height: 80px;
+    width: 80px;
+}
+
+.box:empty {
+    background: lime;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Examples', 300, 80)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Selectors', '#empty-pseudo', ':empty') }}{{ Spec2('CSS4 Selectors') }}No change.
{{ SpecName('CSS3 Selectors', '#empty-pseudo', ':empty') }}{{ Spec2('CSS3 Selectors') }}Initial definition.
+ +

浏览器兼容

+ + + +

{{Compat("css.selectors.empty")}}

+ +

参考

+ + + +

example

+ +

https://codepen.io/xgqfrms/full/zQEJWw

+ +

 

diff --git a/files/zh-cn/web/css/_colon_enabled/index.html b/files/zh-cn/web/css/_colon_enabled/index.html new file mode 100644 index 0000000000..ac57afafaf --- /dev/null +++ b/files/zh-cn/web/css/_colon_enabled/index.html @@ -0,0 +1,101 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +tags: + - CSS + - Reference + - Web + - 伪类 + - 参考 + - 布局 +translation_of: 'Web/CSS/:enabled' +--- +
{{CSSRef}}
+ +

CSS 伪类 :enabled 表示任何被启用的（enabled）元素。如果一个元素能够被激活（如选择、点击或接受文本输入），或者能够获取焦点，则该元素是启用的。元素也有一个禁用的状态（disabled state），在被禁用时，元素不能被激活或获取焦点。

+ +
/* 选择任何启用状态的 <input> */
+input:enabled {
+  color: blue;
+}
+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +

下面的代码，当文本输入框处于启用状态时，输入框 {{htmlElement("input")}} 的文本是绿色的，处于禁用状态时，输入框的文本则是灰色的。这样可以把元素是否可用反馈给用户。

+ +

HTML：

+ +
<form action="url_of_form">
+  <label for="FirstField">First field (enabled):</label>
+  <input type="text" id="FirstField" value="Lorem"><br>
+
+  <label for="SecondField">Second field (disabled):</label>
+  <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>
+
+  <input type="button" value="Submit">
+</form>
+ +

CSS：

+ +
input:enabled {
+  color: #2b2;
+}
+
+input:disabled {
+  color: #aaa;
+}
+
+ +

结果

+ +
{{EmbedLiveSample("Enabled_Disabled_Inputs_Example",550,95)}}
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}{{Spec2('HTML WHATWG')}}No change.
{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}{{Spec2('HTML5 W3C')}}Defines the semantics for HTML and forms.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS4 Selectors')}}No change.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS3 Selectors')}}Defines the pseudo-class, but not the associated semantics.
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.enabled")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/_colon_first-child/index.html b/files/zh-cn/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..2ff9f8e726 --- /dev/null +++ b/files/zh-cn/web/css/_colon_first-child/index.html @@ -0,0 +1,127 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +translation_of: 'Web/CSS/:first-child' +--- +
{{CSSRef}}
+ +

:first-child CSS pseudo-class 表示在一组兄弟元素中的第一个元素。

+ +
/* Selects any <p> that is the first element
+   among its siblings */
+p:first-child {
+  color: lime;
+}
+ +
+

Note: 最初定义时，所选元素必须有一个parent。而从选择器 Level 4 开始，parent不再是必须的。

+
+ +

语法

+ +
{{csssyntax}}
+
+ +

示例

+ +

Basic example

+ +

HTML

+ +
<div>
+  <p>This text is selected!</p>
+  <p>This text isn't selected.</p>
+</div>
+
+<div>
+  <h2>This text isn't selected: it's not a `p`.</h2>
+  <p>This text isn't selected.</p>
+</div>
+
+ +

CSS

+ +
p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Basic_example', 500, 200)}}

+ +

Styling a list

+ +

HTML

+ +
<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3
+    <ul>
+      <li>Item 3.1</li>
+      <li>Item 3.2</li>
+      <li>Item 3.3</li>
+    </ul>
+  </li>
+</ul>
+ +

CSS

+ +
ul li {
+  color: blue;
+}
+
+ul li:first-child {
+  color: red;
+  font-weight: bold;
+}
+ +

Result

+ +

{{EmbedLiveSample('Styling_a_list')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS4 Selectors')}}Matching elements are not required to have a parent.
{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS3 Selectors')}}No change.
{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.selectors.first-child")}}

+
+ +

相关链接

+ + diff --git a/files/zh-cn/web/css/_colon_first-of-type/index.html b/files/zh-cn/web/css/_colon_first-of-type/index.html new file mode 100644 index 0000000000..50941a5a12 --- /dev/null +++ b/files/zh-cn/web/css/_colon_first-of-type/index.html @@ -0,0 +1,112 @@ +--- +title: ':first-of-type' +slug: 'Web/CSS/:first-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - 伪类 +translation_of: 'Web/CSS/:first-of-type' +--- +
{{CSSRef}}
+ +

CSS 伪类 :first-of-type表示一组兄弟元素中其类型的第一个元素。

+ +
/* 选择在父元素中第一个出现的<p>，而不管其在兄弟内的位置如何 */
+p:first-of-type {
+  color: red;
+}
+ +
+

注意：按原来定义，所选元素必须有一个父元素。 从 Selectors Level 4 开始，就不需要这样了。

+
+ +

语法

+ +
{{csssyntax}}
+ +

例子

+ +

装饰第一个段落

+ +

HTML

+ +
<h2>Heading</h2>
+<p>Paragraph 1</p>
+<p>Paragraph 1</p>
+ +

CSS

+ +
p:first-of-type {
+  color: red;
+  font-style: italic;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("装饰第一个段落")}}

+ +

嵌套元素

+ +

下面这个例子展示了如何选中多层嵌套元素。注意当不存在简单选择器时，通配符(*)是默认应用的。 

+ +

HTML

+ +
<article>
+  <div>This `div` is first!</div>
+  <div>This <span>nested `span` is first</span>!</div>
+  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
+  <div>This <span>nested `span` gets styled</span>!</div>
+  <b>This `b` qualifies!</b>
+  <div>This is the final `div`.</div>
+</article>
+ +

CSS

+ +
article :first-of-type {
+  background-color: pink;
+}
+ +

结果

+ +

{{EmbedLiveSample("嵌套元素")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS4 Selectors')}}Matching elements are not required to have a parent.
{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS3 Selectors')}}Initial definition.
+ +

浏览器兼容

+ +
+ + +

{{Compat("css.selectors.first-of-type")}}

+
+ +

相关知识

+ + diff --git a/files/zh-cn/web/css/_colon_first/index.html b/files/zh-cn/web/css/_colon_first/index.html new file mode 100644 index 0000000000..ed6b1af264 --- /dev/null +++ b/files/zh-cn/web/css/_colon_first/index.html @@ -0,0 +1,138 @@ +--- +title: ':first' +slug: 'Web/CSS/:first' +translation_of: 'Web/CSS/:first' +--- +
{{CSSRef}}
+ +

简介

+ +

:first {{cssxref("@page")}} CSS 伪类选择器 描述的是：打印文档的时候，第一页的样式。

+ +
提示:你不能改变所有的css属性. 你只能改变 margins、 orphans、 widows、文档什么时候换页。别的所有css样式都会被忽略。
+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<p>First Page.</p>
+<p>Second Page.</p>
+<button>Print!</button>
+
+ +

CSS

+ +
@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+
+p {
+  page-break-after: always;
+}
+
+ +

JavaScript

+ +
document.querySelector("button").onclick = function(){ window.print() }
+
+ +

结果

+ +

点击下面的 print 按钮来打印这个例子。第一页的文字会在中间显示， 其他页的内容在默认位置显示。

+ +

{{ EmbedLiveSample('Example', '80%', '150px') }}

+ +
提示：在定义margin的时候，你可以只用绝对长度单位， 点击 length 查看更多内容。
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}{{Spec2('CSS3 Paged Media')}}无更改
{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}{{Spec2('CSS2.1')}}首次定义
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
特性ChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
基础支持{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}8.09.2{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基础支持{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

 

+ +

参见

+ + diff --git a/files/zh-cn/web/css/_colon_focus-visible/index.html b/files/zh-cn/web/css/_colon_focus-visible/index.html new file mode 100644 index 0000000000..ef432792ea --- /dev/null +++ b/files/zh-cn/web/css/_colon_focus-visible/index.html @@ -0,0 +1,126 @@ +--- +title: ':focus-visible' +slug: 'Web/CSS/:focus-visible' +tags: + - CSS + - Reference + - Web + - 伪类 + - 布局 +translation_of: 'Web/CSS/:focus-visible' +--- +
{{CSSRef}}
+ +

当元素匹配{{cssxref(":focus")}}伪类并且客户端(UA)的启发式引擎决定焦点应当可见(在这种情况下很多浏览器默认显示“焦点框”。)时，:focus-visible 伪类将生效。

+ +

这个选择器可以有效地根据用户的输入方式(鼠标 vs 键盘)展示不同形式的焦点。

+ +

请注意Firefox通过较旧的前缀伪类 :-moz-focusring 支持类似的功能。更多细节请参考{{cssxref(":-moz-focusring")}}页面。

+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +

基本示例

+ +

在这个例子中，:focus-visible 选择器利用客户端(UA)的行为决定是否匹配。比较一下，当你用鼠标点击控件和用键盘tab切换控件有何不同。请注意元素的表现与具有 :focus 样式的元素的区别。

+ +
<input value="Default styles"><br>
+<button>Default styles</button><br>
+<input class="focus-only" value=":focus only"><br>
+<button class="focus-only">:focus only</button><br>
+<input class="focus-visible-only" value=":focus-visible only"><br>
+<button class="focus-visible-only">:focus-visible only</button>
+ +
input, button {
+  margin: 10px;
+}
+
+.focus-only:focus {
+  outline: 2px solid black;
+}
+
+.focus-visible-only:focus-visible {
+  outline: 4px dashed darkorange;
+}
+
+ +

{{EmbedLiveSample('Basic_example', '100%', '300')}}

+ +

选择性地显示焦点

+ +

自定义控件，比如按钮自定义元素，可以使用 :focus-visible 使其仅在键盘操作时才显示焦点样式。这和{{htmlelement("button")}}一类的原生控件表现一致。

+ +
<custom-button tabindex="0" role="button">Click Me</custom-button>
+ +
custom-button {
+  display: inline-block;
+  margin: 10px;
+}
+
+custom-button:focus {
+  /* Provide a fallback style for browsers
+     that don't support :focus-visible */
+  outline: none;
+  background: lightgrey;
+}
+
+custom-button:focus:not(:focus-visible) {
+  /* Remove the focus indicator on mouse-focus for browsers
+     that do support :focus-visible */
+  background: transparent;
+}
+
+custom-button:focus-visible {
+  /* Draw a very noticeable focus style for
+     keyboard-focus on browsers that do support
+     :focus-visible */
+  outline: 4px dashed darkorange;
+  background: transparent;
+}
+ +

{{EmbedLiveSample('Selectively_showing_the_focus_indicator', '100%', '300')}}

+ +

Polyfill

+ +

你可以使用 :focus-visible 的polyfill focus-visible.js 。

+ +

可访问性关注点

+ +

保证视觉焦点指示对低视力对人群可见。这对在强光环境下使用屏幕的人同样有益 (比如在户外的阳光下)。 WCAG 2.1 SC 1.4.11 Non-Text Contrast 要求视觉焦点指示至少在3到1。

+ +

可访问的视觉焦点指示: 给你的网站一些焦点! 设计有效且可用的焦点指示的一些建议。

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}{{Spec2("CSS4 Selectors")}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.focus-visible")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/_colon_focus-within/index.html b/files/zh-cn/web/css/_colon_focus-within/index.html new file mode 100644 index 0000000000..e638f478b5 --- /dev/null +++ b/files/zh-cn/web/css/_colon_focus-within/index.html @@ -0,0 +1,97 @@ +--- +title: ':focus-within' +slug: 'Web/CSS/:focus-within' +tags: + - ':focus-within' + - CSS + - Layout + - Pseudo-class + - 伪类 + - 参考 + - 选择器 +translation_of: 'Web/CSS/:focus-within' +--- +
{{CSSRef}}
+ +

:focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配 {{CSSxRef(":focus")}} 伪类。（shadow DOM 树中的后代也包括在内）

+ +
/* 当 <div> 的某个后代获得焦点时，匹配 <div> */
+div:focus-within {
+  background: cyan;
+}
+ +

该选择器非常实用。举个通俗的例子：表单中的某个 {{htmlElement("input")}} 字段获得焦点时，整个表单的 {{HTMLElement("form")}} 元素都可被高亮。

+ +

语法

+ +
{{csssyntax}}
+ +

Example

+ +

此例子中，当表单某个文本输入框获得焦点后，表单会被设置颜色样式。

+ +

HTML

+ +
<p>试试在这个表单中输入点什么。</p>
+
+<form>
+  <label for="given_name">Given Name:</label>
+  <input id="given_name" type="text">
+  <br>
+  <label for="family_name">Family Name:</label>
+  <input id="family_name" type="text">
+</form>
+ +

CSS

+ +
form {
+  border: 1px solid;
+  color: gray;
+  padding: 4px;
+}
+
+form:focus-within {
+  background: #ff8;
+  color: black;
+}
+
+input {
+  margin: 4px;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("Example", 500, 150)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}{{Spec2("CSS4 Selectors")}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.focus-within")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/_colon_focus/index.html b/files/zh-cn/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..fe3ae14c56 --- /dev/null +++ b/files/zh-cn/web/css/_colon_focus/index.html @@ -0,0 +1,96 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - CSS + - Layout + - Reference + - Web + - 伪类 +translation_of: 'Web/CSS/:focus' +--- +

{{CSSRef}}

+ +

CSS伪类 :focus表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。

+ +
/* Selects any <input> when focused */
+input:focus {
+  color: red;
+}
+ +
+

提示：此伪类仅适用于焦点元素本身。如果要选择包含焦点元素的元素，请使用{{cssxref(":focus-within")}} 。

+
+ +

语法

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
<input class="red-input" value="I'll be red when focused."><br>
+<input class="blue-input" value="I'll be blue when focused.">
+ +

CSS

+ +
.red-input:focus {
+  background: yellow;
+  color: red;
+}
+
+.blue-input:focus {
+  background: yellow;
+  color: blue;
+}
+ +

结果

+ +

{{EmbedLiveSample('Example')}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}{{Spec2('HTML WHATWG')}}Defines HTML-specific semantics.
{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}{{Spec2('CSS4 Selectors')}}No change.
{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}{{Spec2('CSS3 Selectors')}}No change.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

浏览器兼容性

+ +

{{Compat("css.selectors.focus")}}

+ +
 
+ +

参考

+ + diff --git a/files/zh-cn/web/css/_colon_fullscreen/index.html b/files/zh-cn/web/css/_colon_fullscreen/index.html new file mode 100644 index 0000000000..fb793fa109 --- /dev/null +++ b/files/zh-cn/web/css/_colon_fullscreen/index.html @@ -0,0 +1,244 @@ +--- +title: ':fullscreen' +slug: 'Web/CSS/:fullscreen' +tags: + - CSS + - CSS Pseudo-class + - Experimental + - Full-screen + - Reference +translation_of: 'Web/CSS/:fullscreen' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

总结

+ +

css伪类:fullscreen应用于当前处于全屏显示模式的元素。 它不仅仅选择顶级元素，还包括所有已显示的栈内元素。

+ +
W3C标准使用不带破折号的单词:fullscreen，但Webkit和Gecko应用接口各自使用前缀带有破折号的变量：:-webkit-full-screen 和:-moz-full-screen。微软的Edge和Internet Explorer各自使用标准语法：:fullscreen和:-ms-fullscreen。
+ +

语法

+ +
{{csssyntax}}
+ +

例子

+ +

HTML

+ +
<div id="fullscreen">
+  <h1>:fullscreen Demo</h1>
+  <p> This will become a big red text when on fullscreen.</p>
+  <button id="fullscreen-button">Enter Fullscreen</button>
+</div>
+
+ + + +

CSS

+ +
#fullscreen:fullscreen {
+  padding: 42px;
+  background-color: pink;
+  border:2px solid #f00;
+  font-size: 200%;
+}
+
+#fullscreen:fullscreen > h1 {
+  color: red;
+}
+
+#fullscreen:fullscreen > p {
+  color: DarkRed;
+}
+
+#fullscreen:fullscreen > button {
+  display: none;
+}
+
+ +

结果

+ +

{{ LiveSampleLink('Example', "(If the 'Enter Fullscreen' button doesn't work, try here)") }}

+ +

{{ EmbedLiveSample('Example','80%','200px') }}

+ +

特点

+ + + + + + + + + + + + + + + + +
特点情况评论
{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}{{Spec2('Fullscreen')}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
特性ChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
+

基本支持

+ 		15.0 {{property_prefix("-webkit")}}[1]12{{CompatGeckoDesktop("9.0")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("47.0")}}[2]		11 {{property_prefix("-ms")}}[3]{{CompatUnknown}}6.0 {{property_prefix("-webkit")}}[1]
全屏下选取所有元素{{CompatUnknown}}12{{CompatGeckoDesktop(43)}}11{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
特性AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本支持{{CompatUnknown}}{{CompatGeckoMobile("9.0")}}
+ {{CompatGeckoDesktop("47.0")}}[2]		{{CompatNo}}{{CompatNo}}{{CompatNo}}
全屏下选取所有元素{{CompatUnknown}}{{CompatGeckoMobile("43")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Webkit和Gecko前缀版本在full和screen之间带有破折号, 但W3C标准使用一个单词：:fullscreen, :-webkit-full-screen, :-moz-full-screen.

+ +

[2] Gecko 47.0 {{geckoRelease("47.0")}} 通过参数full-screen-api.unprefix.enabled使用不带前缀的伪类, 默认为false.

+ +

[3] Internet Explorer使用前缀-ms，但在full和screen之间没有破折号:-ms-fullscreen.

+ +

再看看

+ + diff --git a/files/zh-cn/web/css/_colon_has/index.html b/files/zh-cn/web/css/_colon_has/index.html new file mode 100644 index 0000000000..ad784814b6 --- /dev/null +++ b/files/zh-cn/web/css/_colon_has/index.html @@ -0,0 +1,62 @@ +--- +title: ':has' +slug: 'Web/CSS/:has' +tags: + - CSS + - Pseudo-class + - Reference + - Selectors +translation_of: 'Web/CSS/:has' +--- +
{{CSSRef}}
+ +

:has() CSS 伪类代表一个元素，其给定的选择器参数（相对于该元素的 {{cssxref(":scope")}}）至少匹配一个元素。

+ +

:has() 伪类接受一个选择器组作为参数。在当前规范中 :has 并未列为实时选择器配置的一部分，意味着其不能用于样式表中，只能用于如 {{domxref("document.querySelector()")}} 的函数中。

+ +
/* 选择任何直接包含 <img> 子元素的 <a>  */
+/* 注意，目前还没有任何浏览器支持此方法 */
+/* 此伪类也未计划投入样式表中使用 */
+var test = document.querySelector('a:has(> img)');
+ +

语法

+ +
{{CSSSyntax}}
+ +

示例

+ +

下面的选择器只会匹配直接包含 {{HTMLElement("img")}} 子元素的 {{HTMLElement("a")}} 元素：

+ +
a:has(> img)
+
+ +

下面的选择器只会匹配其后紧跟着 {{htmlelement("p")}} 元素的 {{HTMLElement("h1")}} 元素：

+ +
h1:has(+ p)
+ + + +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
{{ SpecName('CSS4 Selectors', '#relational', ':has()') }}{{ Spec2('CSS4 Selectors') }}Initial definition
+ +

浏览器兼容性

+ +

{{Compat("css.selectors.has")}}

+ +
diff --git a/files/zh-cn/web/css/_colon_host()/index.html b/files/zh-cn/web/css/_colon_host()/index.html new file mode 100644 index 0000000000..7542ac2c81 --- /dev/null +++ b/files/zh-cn/web/css/_colon_host()/index.html @@ -0,0 +1,90 @@ +--- +title: ':host()' +slug: 'Web/CSS/:host()' +tags: + - ':host()' + - CSS + - Layout + - Pseudo-class + - RTeference + - Web +translation_of: 'Web/CSS/:host()' +--- +
{{seecompattable}}{{CSSRef}} 
+ +
CSS 伪类函数 :host() 选择包含使用这段 CSS 的 Shadow DOM 的影子宿主（这样就可以从 Shadow DOM 中选择包括它的自定义元素）——但前提是该函数的参数与选择的阴影宿主相匹配。
+ +

最简单的用法是仅将类名放在某些自定义元素实例上，然后将相关的类选择器作为函数参数包含在内。不能将它与后代选择器表达式一起使用，以仅选择特定祖先内部的自定义元素的实例。这是 {{cssxref(":host-context()")}} 的作用。

+ +
+

注意：在shadow DOM之外使用时，这没有任何效果。

+
+ +
/* 选择阴影根元素，仅当它与选择器参数匹配 */
+ :host(.special-custom-element) {
+   font-weight: bold;
+ }
+ +

句法

+ +
{{csssyntax}}
+ +

例子

+ + + +

以下片段取自我们的宿主选择器示例（也可以观看在线演示）。

+ +

在这个例子中，有一个简单的自定义元素 <context-span> 可以用它包裹文本：

+ +
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
+ +

在元素的构造函数中，创建style和span元素，填充span自定义元素的内容，并style使用一些 CSS 规则填充元素：

+ +
let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
+ +

:host(.footer) { color : red; } 规则为文档中所有在其上设置了 footer 类的<context-span> 元素实例（此实例中的影子宿主）设置样式——使用它来为 {{htmlelement("footer")}} 中的元素提供实例一种特殊的颜色。

+ +

产品规格

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS Scope', '#host-selector', ':host()') }}{{ Spec2('CSS Scope') }}Initial definition.
+ +

浏览器兼容性

+ +

{{Compat("css.selectors.hostfunction")}}

+ +

也可以看看

+ + diff --git a/files/zh-cn/web/css/_colon_host-context()/index.html b/files/zh-cn/web/css/_colon_host-context()/index.html new file mode 100644 index 0000000000..69168913ff --- /dev/null +++ b/files/zh-cn/web/css/_colon_host-context()/index.html @@ -0,0 +1,92 @@ +--- +title: ':host-context()' +slug: 'Web/CSS/:host-context()' +translation_of: 'Web/CSS/:host-context()' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +
+

:host-context() CSS 伪类的作用是选择shadow DOM 中shadow host，这个伪类内可以写关于该shadow host的CSS规则。 (我们可以从 shadow DOM 中选择一个自定义元素 custom element) — 但前提是，在DOM 层级中，括号中的选择器参数必须和shadow host 的祖先相匹配。

+
+ +

典型的使用方法是后代选择器表达式。例如 h1   — 只选择在<h1> 内的自定义元素的实例。

+ +
+

Note: 该伪类的css样式在 shadow DOM 之外的元素上是没有效果的

+
+ +
/* 选择了一个 shadow root host, 当且仅当这个
+ shadow root host 是括号中选择器参数(h1)的后代 */
+
+:host-context(h1) {
+  font-weight: bold;
+}
+
+:host-context(main article) {
+  font-weight: bold;
+}
+
+ +

Syntax

+ +
{{CSSSyntax}}
+ +

Examples

+ +

下边的代码片段来自 host-selectors (这里查看样式效果)。

+ +

在本例中，我们有一个简单的自定义元素 — <context-span> — 你可以把文字包裹在该自定义标签中：

+ +
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
+ +

在自定义元素的构造器函数中，我们创建 style 和 span 元素。让 span 里呈现的是自定义元素的文字内容，并且给style 元素一些CSS 规则。

+ +
let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
+ +

:host-context(h1) { font-style: italic; } 和 :host-context(h1):after { content: " - no links in headers!" 这些CSS 规则规定了位于<h1> 标签内部的 <context-span> 元素的实例的样式。

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS Scope', '#host-selector', ':host-context()') }}{{ Spec2('CSS Scope') }}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("css.selectors.host-context")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/css/_colon_host/index.html b/files/zh-cn/web/css/_colon_host/index.html new file mode 100644 index 0000000000..a4e3da4c7c --- /dev/null +++ b/files/zh-cn/web/css/_colon_host/index.html @@ -0,0 +1,90 @@ +--- +title: ':host' +slug: 'Web/CSS/:host' +tags: + - ':host' + - CSS + - DOM +translation_of: 'Web/CSS/:host' +--- +
{{ CSSRef }}
+ +

:host CSS伪类选择包含其内部使用的CSS的shadow DOM的根元素 - 换句话说，这允许你从其shadow DOM中选择一个自定义元素。

+ +
+

注意：在shadow DOM之外使用时，这没有任何效果。

+
+ +
/* Selects a shadow root host */
+:host {
+  font-weight: bold;
+}
+
+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +

以下片段取自我们的 host-selectors 示例（在线演示）。

+ +

在这个例子中，我们有一个简单的自定义元素 — <context-span> — 你可以包裹文本：

+ +
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
+
+ +

在元素的构造函数中，我们创建style和span元素，用自定义元素的内容填充span，并使用一些CSS规则填充style 元素：

+ +
let style = document.createElement('style');
+let span = document.createElement('span');
+span.textContent = this.textContent;
+
+const shadowRoot = this.attachShadow({mode: 'open'});
+shadowRoot.appendChild(style);
+shadowRoot.appendChild(span);
+
+style.textContent = 'span:hover { text-decoration: underline; }' +
+                    ':host-context(h1) { font-style: italic; }' +
+                    ':host-context(h1):after { content: " - no links in headers!" }' +
+                    ':host-context(article, aside) { color: gray; }' +
+                    ':host(.footer) { color : red; }' +
+                    ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
+
+ +

:host { background: rgba(0,0,0,0.1); padding: 2px 5px; } 规则设置<context-span>元素的所有实例的样式（此实例中为影子根元素）的所有实例。

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS Scope', '#host-selector', ':host') }}{{ Spec2('CSS Scope') }}Initial definition.
+ +

浏览器兼容

+ +
+ + +

{{Compat("css.selectors.host")}}

+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/_colon_hover/index.html b/files/zh-cn/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..3b54d58f4e --- /dev/null +++ b/files/zh-cn/web/css/_colon_hover/index.html @@ -0,0 +1,192 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +tags: + - CSS + - CSS 伪类 +translation_of: 'Web/CSS/:hover' +--- +

{{ CSSRef() }}

+ +

概要

+ +

:hover CSS伪类适用于用户使用指示设备虚指一个元素（没有激活它）的情况。这个样式会被任何与链接相关的伪类重写，像{{ cssxref(":link") }}, {{ cssxref(":visited") }}, 和 {{ cssxref(":active") }}等。为了确保生效，:hover规则需要放在:link和:visited规则之后，但是在:active规则之前，按照LVHA的循顺序声明:link－:visited－:hover－:active。

+ +

:hover伪类可以任何伪元素上使用。{{experimental_inline}}

+ +

用户的可视客户端比如Firefox, Internet Explorer, Safari, Opera or Chrome, 会在光标（鼠标指针）悬停在元素上时提供关联的样式。

+ +
注意: 在触摸屏上 :hover 有问题，基本不可用。不同的浏览器上:hover 伪类表现不同。 可能从不会触发；或者在触摸某元素后触发了一小会儿；或者总是触发即使用户不在触摸了，直到用户触摸别的元素。 触摸屏非常普遍，所以网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。
+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +
:link:hover { outline: dotted red; }
+
+.foo:hover { background: gold; }
+
+ +

下拉按钮

+ +

使用:hover 伪类可以创建复杂的层叠机制。一个常见用途，比如，创建一个纯CSS的下拉按钮（不使用JavaScript）。 本质是创建如下的CSS：

+ +
div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

HTML内容如下:

+ +
<div class="menu-bar">
+  <ul>
+    <li>
+      <a href="example.html">Menu</a>
+      <ul>
+        <li>
+          <a href="example.html">Link</a>
+        </li>
+        <li>
+          <a class="menu-nav" href="example.html">Submenu</a>
+          <ul>
+            <li>
+              <a class="menu-nav" href="example.html">Submenu</a>
+              <ul>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+              </ul>
+            </li>
+            <li><a href="example.html">Link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+
+ +

在 CSS-based dropdown menu example 看示例.

+ +

可全图预览的画廊 

+ +

:hover 伪类可以让你实现一个当鼠标悬停在图片上时全图预览的画廊功能。 在 this demo 看示例。

+ +
注意: 一个类似的效果，是基于 :checked伪类（用于隐藏单选框）实现的，看 this demo，源于 En/CSS/:checked。
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Selectors', '#hover', ':hover') }}{{ Spec2('CSS4 Selectors') }}Can be applied to any pseudo-element.
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}{{ Spec2('CSS3 Selectors') }}No significant change.
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
for <a> elements0.2{{ CompatGeckoDesktop(1.0) }}4.04.02.0.4 (419)
+ various bugs before
for all elements0.2{{ CompatGeckoDesktop(1.0) }}7.07.02.0.4 (419)
+ various bugs before
for pseudo-element{{CompatUnknown}}{{ CompatGeckoDesktop(28) }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

在IE8-11中，将鼠标指针悬停于一个元素上上下滚动页面而不移动光标会让元素停留在 {{cssxref(":hover")}} 的状态直到鼠标移动。详见 IE bug 926665.

+ +

在IE9（或是更早的版本中），如果如果一个 {{HTMLElement("table")}}元素 有一个  non-auto {{cssxref("width")}} 和 {{cssxref("overflow-x")}}: auto; 的父对象，而且这个 {{HTMLElement("table")}}元素有足够多的内容以至于溢出它的父元素，同时表中的元素有 {{cssxref(":hover")}}的样式，那么悬停在其上会使这个{{HTMLElement("table")}}元素的高度增大。这是一个 显示该错误的demo 。一个避免这个错误的方法是在这个表格的父元素为 min-height: 0%;（必须强调是百分比形式，0 和 0px 都不会起作用）。这也是在 jQuery ticket #10854 提交过的错误，但是并没有被解决，因为这不被认为是 jQuery 的错误。

+ +

至于iOS 7.1.2 中的Safari Mobile，点击一个可以点击的元素会使这个元素进入{{cssxref(":hover")}}的状态，而这个元素会保持悬停状态直到另一个元素进入{{cssxref(":hover")}}状态。

+ +

另请参见：

+ + diff --git a/files/zh-cn/web/css/_colon_in-range/index.html b/files/zh-cn/web/css/_colon_in-range/index.html new file mode 100644 index 0000000000..81437a911f --- /dev/null +++ b/files/zh-cn/web/css/_colon_in-range/index.html @@ -0,0 +1,109 @@ +--- +title: ':in-range' +slug: 'Web/CSS/:in-range' +translation_of: 'Web/CSS/:in-range' +--- +
{{CSSRef}}
+ +
in-range CSS 伪类 代表一个 {{htmlelement("input")}} 元素，其当前值处于属性{{htmlattrxref("min", "input")}} 和{{htmlattrxref("max","input")}} 限定的范围之内.
+ +
/* 该伪类可选定任意的<input>, 但只有在该元素指定了取值范围，并且元素值处于指定范围时才有效*/
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+ +

该伪类用于给用户一个可视化的提示，表示输入域的当前值处于允许范围内。

+ +
注意：该伪类仅适用于那些拥有（或可以接受）取值范围设定的元素。若缺少此类设定，元素值就无所谓“in-range”和“out-range”。
+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +
+

HTML

+ +
<form action="" id="form1">
+  <ul>Values between 1 and 10 are valid.
+    <li>
+      <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
+      <label for="value1">Your value is </label>
+    </li>
+  </ul>
+</form>
+ +

CSS

+ +
li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content: 'okay.';
+}
+
+input:out-of-range + label::after {
+  content: 'out of range!';
+}
+ +

结果

+
+ +
{{EmbedLiveSample('Example', 600, 140)}}
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}{{Spec2('HTML WHATWG')}}Defines when :in-range matches elements in HTML.
{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}{{Spec2('CSS4 Selectors')}}Initial specification.
+ +

浏览器兼容性

+ +
+
+ + +

{{Compat("css.selectors.in-range")}}

+
+
+ +

参考

+ + diff --git a/files/zh-cn/web/css/_colon_indeterminate/index.html b/files/zh-cn/web/css/_colon_indeterminate/index.html new file mode 100644 index 0000000000..79151b26ec --- /dev/null +++ b/files/zh-cn/web/css/_colon_indeterminate/index.html @@ -0,0 +1,125 @@ +--- +title: ':indeterminate' +slug: 'Web/CSS/:indeterminate' +translation_of: 'Web/CSS/:indeterminate' +--- +
{{CSSRef}}
+ +

:indeterminate CSS 伪类 表示状态不确定的表单元素:

+ +
/* Selects any <input> whose state is indeterminate */
+input:indeterminate {
+  background: lime;
+}
+
+ +

根据上述例子（选择器）选中的元素是：

+ + + +

 

+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +

Checkbox & radio button

+ +

CSS

+ +
input, span {
+  background: red;
+}
+
+:indeterminate, :indeterminate + label {
+  background: lime;
+}
+
+ +

HTML

+ +
<div>
+  <input type="checkbox" id="checkbox">
+  <label for="checkbox">Background should be green</label>
+</div>
+<div>
+  <input type="radio" id="radio">
+  <label for="radio">Background should be green</label>
+</div>
+ +

JavaScript

+ +
var inputs = document.getElementsByTagName("input");
+for(var i = 0; i < inputs.length; i++) {
+  inputs[i].indeterminate = true;
+}
+
+ +

{{EmbedLiveSample('Checkbox_radio_button', '100%', 50)}}

+ +

Progress bar

+ +

CSS

+ +
progress {
+  margin: 4px;
+}
+
+progress:indeterminate {
+  opacity: 0.5;
+  background-color: lightgray;
+  box-shadow: 0 0 2px 1px red;
+}
+ +

HTML

+ +
<progress>
+
+ +

结果

+ +

{{EmbedLiveSample('Progress_bar', 'auto', 30)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML WHATWG')}}No change
{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML5 W3C')}}Defines the semantic regarding HTML and constraint validation.
{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}{{Spec2('CSS4 Selectors')}}No change
{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}{{Spec2('CSS3 Basic UI')}}Defines the pseudo-class, but not the associated semantic.
+ +

浏览器兼容性

+ +

{{Compat("css.selectors.indeterminate")}}

diff --git a/files/zh-cn/web/css/_colon_invalid/index.html b/files/zh-cn/web/css/_colon_invalid/index.html new file mode 100644 index 0000000000..6c9228bc1e --- /dev/null +++ b/files/zh-cn/web/css/_colon_invalid/index.html @@ -0,0 +1,135 @@ +--- +title: ':invalid' +slug: 'Web/CSS/:invalid' +translation_of: 'Web/CSS/:invalid' +--- +

 

+ +

{{CSSRef}}

+ +

:invalid CSS 伪类 表示任意内容未通过验证的 {{HTMLElement("input")}} 或其他 {{HTMLElement("form")}} 元素 .

+ +
/* 可选定任意无效的<input> */
+input:invalid {
+  background-color: pink;
+}
+ +

这个伪类对于突出显示用户的字段错误非常有用。

+ +

Syntax

+ +
:invalid
+
+ +

Example

+ +

以下示例是一个简单的表单，当值有效时，元素颜色为绿色，无效时为红色。

+ +

HTML

+ +
<form>
+  <label for="url_input">Enter a URL:</label>
+  <input type="url" id="url_input" />
+  <br />
+  <br />
+  <label for="email_input">Enter an email address:</label>
+  <input type="email" id="email_input" required/>
+</form>
+ +

CSS

+ +
input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:invalid {
+  border-color: #C00000;
+}
+ +

Result

+ +

{{EmbedLiveSample('Example', 600, 120)}}

+ +

注意

+ +

单选钮（Radio buttons）

+ +

若一组单选钮被设定为必须选定一个，在该组中没有按钮被选中的情况，:invalid伪类被应用到该组中的所有按钮。（单选钮组按照name属性共享相同值。）

+ +

Gecko 默认

+ +

默认情况下，Gecko不应用:invalid伪类设置的样式。但是，Gecko可以使用{{cssxref(":-moz-ui-invalid")}}伪类的样式（使用{{Cssxref("box-shadow")}} 属性设置红色发光边框）来达到类似的效果，它可以被应用在:invalid伪类的子集中。

+ +

你可以使用以下CSS禁用红色发光边框,或完全重写它以改变无效输入域的外观：

+ +
:invalid {
+  box-shadow: none;
+}
+
+:-moz-submit-invalid {
+  box-shadow: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}{{Spec2('HTML WHATWG')}}No change.
{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}{{Spec2('HTML5 W3C')}}Defines the semantics of HTML and constraint validation.
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}{{Spec2('CSS4 Selectors')}}Initial definition.
+ +

浏览器兼容性

+ +

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

+ +

{{Compat("css.selectors.invalid")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/_colon_is/index.html b/files/zh-cn/web/css/_colon_is/index.html new file mode 100644 index 0000000000..494785a89a --- /dev/null +++ b/files/zh-cn/web/css/_colon_is/index.html @@ -0,0 +1,285 @@ +--- +title: ':is() (:matches(), :any())' +slug: 'Web/CSS/:is' +tags: + - ':is' + - CSS + - Pseudo-class + - Reference + - Selectors + - Web + - 伪类 +translation_of: 'Web/CSS/:is' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +
+

注意: 在 CSSWG issue #3258 讨论后 :match() 改名为 :is()。

+
+ +

The :is() CSS 伪类 函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。

+ +
+

注意，许多浏览器通过一个更旧的、带前缀的伪类:any()来支持这个功能，包括旧版本的Chrome、Firefox和Safari。这与:is()的工作方式完全相同，只是它需要厂商前缀，不支持复杂的选择器。

+
+ +
/* 选择header, main, footer里的任意一个悬浮状态的段落(p标签) */
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+/* 以上内容相当于以下内容 */
+header p:hover,
+main p:hover,
+footer p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+
+/* 向后兼容的版本:-*-any()
+ (It is not possible to group selectors into single rule,
+   because presence of invalid selector would invalidate whole rule.)*/
+:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+ +

语法

+ +
{{CSSSyntax}}
+ +

示例

+ +

Cross-browser example

+ +
<header>
+  <p>This is my header paragraph</p>
+</header>
+
+<main>
+  <ul>
+    <li><p>This is my first</p><p>list item</p></li>
+    <li><p>This is my second</p><p>list item</p></li>
+  </ul>
+</main>
+
+<footer>
+  <p>This is my footer paragraph</p>
+</footer>
+ +
:-webkit-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:-moz-any(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:matches(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+
+:is(header, main, footer) p:hover {
+  color: red;
+  cursor: pointer;
+}
+ +
let matchedItems;
+
+try {
+  matchedItems = document.querySelectorAll(':is(header, main, footer) p');
+} catch(e) {
+  try {
+    matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
+  } catch(e) {
+    try {
+      matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
+    } catch(e) {
+      console.log('Your browser doesn\'t support :is() or :any()');
+    }
+  }
+}
+
+for(let i = 0; i < matchedItems.length; i++) {
+  applyHandler(matchedItems[i]);
+}
+
+function applyHandler(elem) {
+  elem.addEventListener('click', function(e) {
+    alert('这是一个包含于' + e.target.parentNode.nodeName + '的段落');
+  });
+}
+ +

{{EmbedLiveSample('Cross-browser_example', '100%', '300')}}

+ +

简化列表选择器

+ +

:is() 伪类可以大大简化CSS选择器。例如，下面的CSS:

+ +
/* 3-deep (or more) unordered lists use a square */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+
+ +

... 可以被替换为:

+ +
/* 3-deep (or more) unordered lists use a square */
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}
+ +

但是，不要像下面那么做: (参见 the section on performance 。)

+ +
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
+  list-style-type: square;
+}
+ +

Simplifying section selectors

+ +

:is 伪类在处理HTML5 sections and headings特别有用。 由于 {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}},  {{HTMLElement("nav")}} 经常嵌套在一起, 没有 :is()的话匹配其他元素将会很棘手。

+ +

例如, 在没有 :is()的情况下, 在不同深度对所有{{HTMLElement("h1")}} 素进行样式化可能非常复杂:

+ +
/* Level 0 */
+h1 {
+  font-size: 30px;
+}
+/* Level 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Level 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1, {
+  font-size: 20px;
+}
+/* Level 3 */
+/* ... don't even think about it! */
+
+ +

使用 :is()之后,它变的非常简单:

+ +
/* Level 0 */
+h1 {
+  font-size: 30px;
+}
+/* Level 1 */
+:is(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Level 2 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Level 3 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+ +

Avoiding selector list invalidation

+ +

Unlike selector lists, the :is() pseudo-class doesn't get invalidated when one of the selectors passed to it isn't supported by the browser.

+ +
:is(:valid, :unsupported) {
+  ...
+}
+ +

Will still parse correctly and match :valid even in browsers which don't support :unsupported, whereas:

+ +
:valid, :unsupported {
+  ...
+}
+ +

Will be ignored in browsers which don't support :unsupported even if they support :valid.

+ +

Notes

+ +

any(): — Issues with performance and specificity

+ +

Bug 561154 tracks an issue with Gecko where the specificity of :-moz-any() is incorrect. The current (as of Firefox 12) implementation puts :-moz-any() in the category of universal rules, meaning using it as the rightmost selector will be slower than using an ID, class, or tag as the rightmost selector.

+ +

For example:

+ +
.a > :-moz-any(.b, .c)
+
+ +

... is slower than:

+ +
.a > .b, .a > .c
+
+ +

... and the following is fast:

+ +
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
+ +

:is() aims to fix such problems.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#matches", ":is()")}}{{Spec2("CSS4 Selectors")}}Initial definition
+ +

Browser compatibility

+ +
+ + +

{{Compat("css.selectors.is")}}

+
+ +

相关链接

+ + + + diff --git a/files/zh-cn/web/css/_colon_lang/index.html b/files/zh-cn/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..1249bad603 --- /dev/null +++ b/files/zh-cn/web/css/_colon_lang/index.html @@ -0,0 +1,99 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +translation_of: 'Web/CSS/:lang' +--- +

 

+ +
{{CSSRef}}
+ +

:lang() CSS 伪类基于元素语言来匹配页面元素。

+ +
/* 选取任意的英文（en)段落 */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+ +
+

注意: 在HTML中, 语言是通过{{htmlattrxref("lang")}} 属性,和 {{HTMLElement("meta")}} 元素的组合来决定的, 也可能是通过协议的信息来确定（例如HTTP头）. 对于其他文档类型，也可能存在其他用于确定语言的方法。

+
+ +

语法

+ +

正式语法

+ +
:lang( <language-code> )
+ +

参数

+ +
+
<language-code>
+
 {{cssxref("<string>")}} 代表了你想定位的语言. 可接受的值为在HTML 规范中指定的值.
+
+ +

Example

+ +

在这个例子中, :lang() 伪类使用子选择器来匹配引用元素({{htmlElement("q")}})的父元素. 需要注意的是，此处演示的方法并不是唯一的，最好的方法需要依据文档类型来确定。还需要注意的是， {{glossary("Unicode")}} 值用于指定一些特殊字符的引用.

+ +

HTML

+ +
<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
+<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
+<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
+
+ +

CSS

+ +
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) > q { quotes: '« ' ' »'; }
+:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
+
+ +

Result

+ +

{{EmbedLiveSample('Example', 350)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态Comment
{{ SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()') }}{{ Spec2('CSS4 Selectors') }}无变化.
{{ SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()') }}{{ Spec2('CSS3 Selectors') }}没有明显的变化.
{{ SpecName('CSS2.1', 'selector.html#lang', ':lang()') }}{{ Spec2('CSS2.1') }}最初的定义。
+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.selectors.lang")}}

+
+ +

参考

+ + diff --git a/files/zh-cn/web/css/_colon_last-child/index.html b/files/zh-cn/web/css/_colon_last-child/index.html new file mode 100644 index 0000000000..e4720413c3 --- /dev/null +++ b/files/zh-cn/web/css/_colon_last-child/index.html @@ -0,0 +1,71 @@ +--- +title: ':last-child' +slug: 'Web/CSS/:last-child' +translation_of: 'Web/CSS/:last-child' +--- +
{{CSSRef}}
+ +

概述

+ +

:last-child CSS 伪类 代表父元素的最后一个子元素。

+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML 内容

+ +
<ul>
+  <li>此元素背景色不是lime</li>
+  <li>我的也不是lime。</li>
+  <li>我的才是lime！ :)</li>
+</ul>
+ +

CSS 内容

+ +
li:last-child {
+  background-color: lime;
+}
+ +

{{EmbedLiveSample('%E7%A4%BA%E4%BE%8B', '100%', 100)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS4 Selectors')}}No change
{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS3 Selectors')}}Initial definition
+ +

浏览器支持

+ + + + +

{{Compat("css.selectors.last-child")}}

+ +

相关链接

+ + diff --git a/files/zh-cn/web/css/_colon_last-of-type/index.html b/files/zh-cn/web/css/_colon_last-of-type/index.html new file mode 100644 index 0000000000..faf7dd7129 --- /dev/null +++ b/files/zh-cn/web/css/_colon_last-of-type/index.html @@ -0,0 +1,87 @@ +--- +title: ':last-of-type' +slug: 'Web/CSS/:last-of-type' +translation_of: 'Web/CSS/:last-of-type' +--- +

{{ CSSRef() }}

+ +

概述

+ +

:last-of-type CSS 伪类 表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。当代码类似Parent tagName:last-of-type的作用区域包含父元素的所有子元素中的最后一个选定元素，也包括子元素的最后一个子元素并以此类推。

+ +

语法

+ +
element:last-of-type { style properties }
+
+ +

示例

+ +
p em:last-of-type {
+  color: lime;
+}
+
+ +
<p>
+  <em>我没有颜色 :(</em><br>
+  <strong>我没有颜色 :(</strong><br>
+  <em>我有颜色 :D</em><br>
+  <strong>我也没有颜色 :(</strong><br>
+</p>
+
+<p>
+  <em>我没有颜色 :(</em><br>
+  <span><em>我有颜色!</em></span><br>
+  <strong>我没有颜色 :(</strong><br>
+  <em>我有颜色 :D</em><br>
+  <span>
+    <em>我在子元素里，但没有颜色!</em><br>
+    <span style="text-decoration:line-through;"> 我没有颜色 </span><br>
+    <em>我却有颜色！</em><br>
+  </span><br>
+  <strong>我也没有颜色 :(</strong>
+</p>
+ +

结果如下：

+ +
{{EmbedLiveSample('%E7%A4%BA%E4%BE%8B','100%','330')}}
+ +
 
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type') }}{{ Spec2('CSS4 Selectors') }}No change.
{{ SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type') }}{{ Spec2('CSS3 Selectors') }}Initial definition.
+ +

浏览器兼容性

+
+ + +

{{Compat("css.selectors.last-of-type")}}

+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/_colon_left/index.html b/files/zh-cn/web/css/_colon_left/index.html new file mode 100644 index 0000000000..12f951a000 --- /dev/null +++ b/files/zh-cn/web/css/_colon_left/index.html @@ -0,0 +1,75 @@ +--- +title: ':left' +slug: 'Web/CSS/:left' +tags: + - '@page' + - CSS + - Pseudo-class +translation_of: 'Web/CSS/:left' +--- +
{{ CSSRef() }}
+ +

:left CSS 伪类, 需要和@规则  {{cssxref("@page")}} 配套使用, 对打印文档的左侧页设置CSS样式.

+ +
/* 设置打印时的左侧文档样式 */
+@page :left {
+  margin: 2in 3in;
+}
+ +

打印文档的"左"或"右"是由书写方向相关的. 举个栗子, "从左到右"的书写方向中第一页应当使用 {{Cssxref(":right")}} 配置; "从右至左"的书写方向中第一页应当使用 :left 配置.

+ +
+

Note: 并不是所有样式属性都能应用在此选择器内. 仅仅 {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, 和 {{ Cssxref("background") }} 等打印时需要的属性可以使用. 其他属性将直接忽略, 并且可以使用的属性也只会在打印时生效, 显示时不会生效.

+
+ +

参数

+ +
{{csssyntax}}
+ +

样例

+ +
@page :left {
+  margin: 2in 3in;
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Paged Media', '#left-right-first', ':left') }}{{ Spec2('CSS3 Paged Media') }}No change.
{{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

浏览器兼容性

+ +

 

+ + + +

{{Compat("css.selectors.left")}}

+ +

 

+ +

参考

+ + diff --git a/files/zh-cn/web/css/_colon_link/index.html b/files/zh-cn/web/css/_colon_link/index.html new file mode 100644 index 0000000000..71cd5f4a3d --- /dev/null +++ b/files/zh-cn/web/css/_colon_link/index.html @@ -0,0 +1,68 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +translation_of: 'Web/CSS/:link' +--- +

{{ CSSRef() }}

+ +

总结

+ +

:link伪类选择器是用来选中元素当中的链接。它将会选中所有尚未访问的链接，包括那些已经给定了其他伪类选择器的链接（例如{{cssxref(":hover")}}选择器，{{cssxref(":active")}}选择器，{{cssxref(":visited")}}选择器）。为了可以正确地渲染链接元素的样式，:link伪类选择器应当放在其他伪类选择器的前面，并且遵循LVHA的先后顺序，即：:link — :visited — :hover — :active。:focus伪类选择器常伴随在:hover伪类选择器左右，需要根据你想要实现的效果确定它们的顺序。

+ +

例子

+ +
a:link {color: slategray;}
+.external:link {background-color: lightblue;}
+ +

规格详细

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}{{ Spec2('HTML WHATWG') }}
{{ SpecName('CSS4 Selectors', '#link', ':link') }}{{ Spec2('CSS4 Selectors') }}无变化
{{ SpecName('CSS3 Selectors', '#link', ':link') }}{{ Spec2('CSS3 Selectors') }}无变化.
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}{{ Spec2('CSS2.1') }}提升严格性为仅限于a标签元素
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}{{ Spec2('CSS1') }}初次定义
+ +

浏览器支持

+ +
+ + +

{{Compat("css.selectors.link")}}

+
+ +

See also

+ + diff --git a/files/zh-cn/web/css/_colon_not/index.html b/files/zh-cn/web/css/_colon_not/index.html new file mode 100644 index 0000000000..e22026a5af --- /dev/null +++ b/files/zh-cn/web/css/_colon_not/index.html @@ -0,0 +1,111 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not' +tags: + - CSS + - Web + - 伪类 + - 参考 +translation_of: 'Web/CSS/:not' +--- +
{{CSSRef}}
+ +

CSS 伪类 :not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。

+ +
/* 选择所有不是段落（p）的元素 */
+:not(p) {
+  color: blue;
+}
+ +
+

注意：

+ + +
+ +

语法

+ +

:not() 伪类可以将一个或多个以逗号分隔的选择器列表作为其参数。选择器中不得包含另一个否定选择符或 伪元素。

+ +
+

以逗号分隔的选择器列表作为参数是实验性的，尚未获得广泛支持。

+
+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<p>我是一个段落。</p>
+<p class="fancy">我好看极了！</p>
+<div>我「不是」一个段落。</div>
+
+ +

CSS

+ +
.fancy {
+  text-shadow: 2px 2px 3px gold;
+}
+
+/* 类名不是 `.fancy` 的 <p> 元素 */
+p:not(.fancy) {
+  color: green;
+}
+
+/* 非 <p> 元素 */
+body :not(p) {
+  text-decoration: underline;
+}
+
+/* 既不是 <div> 也不是 <span> 的元素 */
+body :not(div):not(span) {
+  font-weight: bold;
+}
+
+/* 类名不是 `.crazy` 或 `.fancy` 的元素 */
+/* 注意，此语法尚未获广泛支持。 */
+body :not(.crazy, .fancy) {
+  font-family: sans-serif;
+}
+ +

结果

+ +

{{EmbedLiveSample('Examples')}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}拓展标准，以允许使用一些复杂的选择器。
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}初始定义。
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.not")}}

diff --git a/files/zh-cn/web/css/_colon_nth-child/index.html b/files/zh-cn/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..9cb7fddd6f --- /dev/null +++ b/files/zh-cn/web/css/_colon_nth-child/index.html @@ -0,0 +1,218 @@ +--- +title: ':nth-child' +slug: 'Web/CSS/:nth-child' +tags: + - ':nth-child' + - CSS + - CSS 伪类 +translation_of: 'Web/CSS/:nth-child' +--- +
{{CSSRef}}
+ +

概述

+ +

:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。示例：

+ + + +

a 和 b 都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, ...} 中的子元素。另外需要特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形式。

+ +

语法

+ +
{{csssyntax}}
+
+ +

示例

+ +

选择器示例

+ +
+
tr:nth-child(2n+1)
+
表示HTML表格中的奇数行。
+
tr:nth-child(odd)
+
表示HTML表格中的奇数行。
+
tr:nth-child(2n)
+
表示HTML表格中的偶数行。
+
tr:nth-child(even)
+
表示HTML表格中的偶数行。
+
span:nth-child(0n+1)
+
表示子元素中第一个且为span的元素，与 {{Cssxref(":first-child")}} 选择器作用相同。
+
span:nth-child(1)
+
表示父元素中子元素为第一的并且名字为span的标签被选中
+
span:nth-child(-n+3)
+
匹配前三个子元素中的span元素。
+
+ +

Detailed example

+ +

HTML

+ +
<h3><code>span:nth-child(2n+1)</code>, WITHOUT an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 3, 5, and 7 are selected.</p>
+<div class="first">
+  <span>Span 1!</span>
+  <span>Span 2</span>
+  <span>Span 3!</span>
+  <span>Span 4</span>
+  <span>Span 5!</span>
+  <span>Span 6</span>
+  <span>Span 7!</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-child(2n+1)</code>, WITH an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 5, and 7 are selected.<br>
+   3 is used in the counting because it is a child, but it isn't
+   selected because it isn't a <code>&lt;span&gt;</code>.</p>
+<div class="second">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>This is an `em`.</em>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-of-type(2n+1)</code>, WITH an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 4, 6, and 8 are selected.<br>
+   3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>,
+   not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects
+   children of that type. The <code>&lt;em&gt;</code> is completely skipped
+   over and ignored.</p>
+<div class="third">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>This is an `em`.</em>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+</div>
+
+ +

CSS

+ +
html {
+  font-family: sans-serif;
+}
+
+span,
+div em {
+  padding: 5px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+  background-color: lime;
+}
+ +

最终效果：

+ +

{{EmbedLiveSample('Detailed_example', 550, 550)}}

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS4 Selectors')}}未变化。
{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS3 Selectors')}}初始化定义。
+ +

兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.9.1")}}9.09.53.1 
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1{{CompatGeckoMobile("1.9.1")}}9.09.53.1
+
+ +

注意

+ + + +

参见

+ + diff --git a/files/zh-cn/web/css/_colon_nth-last-child/index.html b/files/zh-cn/web/css/_colon_nth-last-child/index.html new file mode 100644 index 0000000000..baeb70ba57 --- /dev/null +++ b/files/zh-cn/web/css/_colon_nth-last-child/index.html @@ -0,0 +1,193 @@ +--- +title: ':nth-last-child' +slug: 'Web/CSS/:nth-last-child' +tags: + - ':nth-child' + - ':nth-last-child' + - 伪类 +translation_of: 'Web/CSS/:nth-last-child' +--- +
{{CSSRef}}
+ +

:nth-last-child() 这个CSS 伪类 从兄弟节点中从后往前匹配处于某些位置的元素

+ +
/* 在所有兄弟节点中，从后往前
+   选择所有4的倍数的节点 */
+:nth-last-child(4n) {
+  color: lime;
+}
+ +
+

注意: 这个伪类和 {{Cssxref(":nth-child")}} 基本一致, 但它是从结尾计数, 而不是从开始计数.

+
+ +

语法

+ +

nth-last-child伪类接受一个参数, 用来作为一个模式，从后往前匹配元素.

+ +

Keyword values

+ +
+
odd
+
代表一些元素，它们在所在的兄弟节点中，从后往前计算的数字位置是奇数，比如: 1, 3, 5等.
+
even
+
代表一些元素，它们在所在的兄弟节点中，从后往前计算的数字位置是偶数，比如: 2, 4, 6等.
+
+ +

Functional notation

+ +
+
<An+B>
+
代表一些元素，它们在所在兄弟节点中的数字位置满足模式 An+B, n是0或者任意的正整数. 从结尾开始计算的第一个元素的索引值是1. A 和 B 必须都是 {{cssxref("<integer>")}}.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+
+ +

示例

+ +

选择器示例

+ +
+
tr:nth-last-child(odd) or tr:nth-last-child(2n+1)
+
表示HTML表的倒数的奇数行:1、3、5等。
+
tr:nth-last-child(even) or tr:nth-last-child(2n)
+
表示HTML表的倒数的偶数行:2、4、6等。
+
:nth-last-child(7)
+
表示倒数第7个元素。
+
:nth-last-child(5n)
+
表示倒数的第5、10、15等元素。
+
:nth-last-child(3n+4)
+
表示倒数的第4、7、10、13等元素。
+
:nth-last-child(-n+3)
+
表示一组兄弟节点中的最后三个元素。
+
p:nth-last-child(n) or p:nth-last-child(n+1)
+
表示一组兄弟节点中的每个<p>元素。这与一个简单的p选择器相同。(由于n从0开始，而最后一个元素从1开始，n和n+1都会选择相同的元素。)
+
p:nth-last-child(1) or p:nth-last-child(0n+1)
+
表示所有处于兄弟节点中倒数第一位的元素<p>。这与{{cssxref(":last-child")}}选择器相同。
+
+ +

Table example

+ +

HTML

+ +
<table>
+  <tbody>
+    <tr>
+      <td>First line</td>
+    </tr>
+    <tr>
+       <td>Second line</td>
+    </tr>
+    <tr>
+       <td>Third line</td>
+    </tr>
+    <tr>
+       <td>Fourth line</td>
+    </tr>
+    <tr>
+       <td>Fifth line</td>
+    </tr>
+  </tbody>
+</table>
+
+ +

CSS

+ +
table {
+  border: 1px solid blue;
+}
+
+/* Selects the last three elements */
+tr:nth-last-child(-n+3) {
+  background-color: pink;
+}
+
+/* Selects every element starting from the second to last item */
+tr:nth-last-child(n+2) {
+  color: blue;
+}
+
+/* Select only the last second element */
+tr:nth-last-child(2) {
+  font-weight: 600;
+}
+
+ +

结果

+ +

{{EmbedLiveSample('Table_example', 300,150)}}

+ +

Quantity query

+ +

数量查询样式元素取决于它们的数量。在本例中，当给定列表中至少有三个列表项时，列表项变为红色。这是通过组合nth-last-child和 通用兄弟选择器.的功能来实现的

+ +

HTML

+ +
<h4>A list of four items (styled):</h4>
+<ol>
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+</ol>
+
+<h4>A list of two items (unstyled):</h4>
+<ol>
+  <li>One</li>
+  <li>Two</li>
+</ol>
+ +

CSS

+ +
/* If there are at least three list items,
+   style them all */
+li:nth-last-child(n+3),
+li:nth-last-child(n+3) ~ li {
+  color: red;
+}
+ +

Result

+ +

{{EmbedLiveSample('Quantity_query', '100%', 270)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child') }}{{ Spec2('CSS4 Selectors') }}No change.
{{ SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child') }}{{ Spec2('CSS3 Selectors') }}Initial definition.
+ +

浏览器兼容性

+ + + +

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

+ +

{{Compat("css.selectors.nth-last-child")}}

+ +

相关资料

+ + diff --git a/files/zh-cn/web/css/_colon_nth-last-of-type/index.html b/files/zh-cn/web/css/_colon_nth-last-of-type/index.html new file mode 100644 index 0000000000..c388564504 --- /dev/null +++ b/files/zh-cn/web/css/_colon_nth-last-of-type/index.html @@ -0,0 +1,77 @@ +--- +title: ':nth-last-of-type' +slug: 'Web/CSS/:nth-last-of-type' +tags: + - CSS + - CSS 伪类 +translation_of: 'Web/CSS/:nth-last-of-type' +--- +
{{CSSRef}}
+ +

概述

+ +

:nth-last-of-type(an+b) 这个 CSS 伪类 匹配那些在它之后有 an+b-1 个相同类型兄弟节点的元素，其中 n 为正值或零值。它基本上和 {{Cssxref(":nth-of-type")}} 一样，只是它从结尾处反序计数，而不是从开头处。

+ +

可以在 {{Cssxref(":nth-child")}} 中查看关于语法参数更详细的描述。

+ +

语法

+ +
{{csssyntax}}
+
+ +

Example

+ +

HTML

+ +
<div>
+  <span>This is a span.</span>
+  <span>This is another span.</span>
+  <em>This is emphasized.</em>
+  <span>Wow, this span gets limed!!!</span>
+  <strike>This is struck through.</strike>
+  <span>Here is one last span.</span>
+</div>
+ +

CSS

+ +
span:nth-last-of-type(2) {
+  background-color: lime;
+}
+ +

Result

+ +

{{EmbedLiveSample('Example','100%', '60')}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS4 Selectors')}}Matching elements are not required to have a parent.
{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS3 Selectors')}}Initial definition.
+ +

浏览器兼容性

+ +

{{Compat("css.selectors.nth-last-of-type")}}

+ +

相关资料

+ + diff --git a/files/zh-cn/web/css/_colon_nth-of-type/index.html b/files/zh-cn/web/css/_colon_nth-of-type/index.html new file mode 100644 index 0000000000..741261dcf9 --- /dev/null +++ b/files/zh-cn/web/css/_colon_nth-of-type/index.html @@ -0,0 +1,105 @@ +--- +title: ':nth-of-type' +slug: 'Web/CSS/:nth-of-type' +tags: + - ':nth-of-type' + - CSS + - CSS 伪类 + - 'no :nth-of-type(0)' + - 布局 +translation_of: 'Web/CSS/:nth-of-type' +--- +
{{CSSRef}}
+ +

:nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。

+ +
/* 在每组兄弟元素中选择第四个 <p> 元素 */
+p:nth-of-type(4n) {
+  color: lime;
+}
+ +

语法

+ +

nth-of-type伪类指定一个实际参数，这个参数使用一种模式来匹配哪些元素应该被选中。

+ +

详细语法参见 {{Cssxref(":nth-child")}} 。

+ +

正式语法

+ +
{{csssyntax}}
+
+ +

示例

+ +

Basic example

+ +

HTML

+ +
<div>
+  <div>这段不参与计数。</div>
+  <p>这是第一段。</p>
+  <p>这是第二段。</p>
+  <div>这段不参与计数。</div>
+  <p>这是第三段。</p>
+  <p>这是第四段。</p>
+</div>
+ +

CSS

+ +
/* 奇数段 */
+p:nth-of-type(2n+1) {
+  color: red;
+}
+
+/* 偶数段 */
+p:nth-of-type(2n) {
+  color: blue;
+}
+
+/* 第一段 */
+p:nth-of-type(1) {
+  font-weight: bold;
+}
+
+ +

最终效果

+ +

{{EmbedLiveSample('Basic_example', 250, 200)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS4 Selectors')}}匹配元素不要求有一个父项。
{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS3 Selectors')}}首次定义
+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.selectors.nth-of-type")}}

+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/_colon_only-child/index.html b/files/zh-cn/web/css/_colon_only-child/index.html new file mode 100644 index 0000000000..1c8ba8f8dc --- /dev/null +++ b/files/zh-cn/web/css/_colon_only-child/index.html @@ -0,0 +1,137 @@ +--- +title: ':only-child' +slug: 'Web/CSS/:only-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:only-child' +--- +
{{CSSRef}}
+ +
+ +

CSS伪类:only-child 匹配没有任何兄弟元素的元素.等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点.

+ +
/* Selects each <p>, but only if it is the */
+/* only child of its parent */
+p:only-child {
+  background-color: lime;
+}
+ +
+

Note: 在起初定义, 被选择的元素必须拥有一个父级元素. 从 Selectors Level 4 开始, 这不再是必须的了.

+
+ +

语法

+ +
{{csssyntax}}
+
+ +

示例

+ +

基础示例

+ +

HTML

+ +
<main>
+  <div>
+    <i>I am a lonely only child.</i>
+  </div>
+
+  <div>
+    <i>I have siblings.</i><br>
+    <b>So do I!</b><br>
+    <span>I also have siblings, <span>but this is an only child.</span></span>
+  </div>
+</main>
+ +

CSS

+ +
main :only-child {
+  color: red;
+}
+
+ +

结果

+ +

{{EmbedLiveSample('基础示例','100%',180)}}

+ +

一个列表示例

+ +

HTML

+ +
<ol>
+  <li>First
+    <ul>
+      <li>This list has just one element.</li>
+    </ul>
+  </li>
+  <li>Second
+    <ul>
+      <li>This list has three elements.</li>
+      <li>This list has three elements.</li>
+      <li>This list has three elements.</li>
+    </ul>
+  </li>
+</ol>
+
+ +

CSS

+ +
li li {
+  list-style-type: disc;
+}
+li:only-child {
+  color: red;
+  list-style-type: square;
+}
+ +

结果

+ +

{{EmbedLiveSample('一个列表示例', '100%', 210)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS4 Selectors')}}Matching elements are not required to have a parent.
{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS3 Selectors')}}Initial definition.
+ +

浏览器兼容性

+ +
+
+ + +

{{Compat("css.selectors.only-child")}}

+
+
+ +

另见

+ + diff --git a/files/zh-cn/web/css/_colon_only-of-type/index.html b/files/zh-cn/web/css/_colon_only-of-type/index.html new file mode 100644 index 0000000000..2f9cfcf423 --- /dev/null +++ b/files/zh-cn/web/css/_colon_only-of-type/index.html @@ -0,0 +1,132 @@ +--- +title: ':only-of-type' +slug: 'Web/CSS/:only-of-type' +tags: + - CSS + - CSS 伪类 + - Web + - 参考 +translation_of: 'Web/CSS/:only-of-type' +--- +

{{ CSSRef() }}

+ +

概述

+ +

CSS 伪类 :only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。

+ +
+

Note: 根据原来的定义，被选择的元素必须具有父元素。直到 Selectors Level 4 开始，这个要求就不是必须的了。

+
+ +

语法

+ +
element:only-of-type { style properties }
+
+ +

Example

+ +

HTML

+ +
<main>
+  <div>I am `div` #1.</div>
+  <p>I am the only `p` among my siblings.</p>
+  <div>I am `div` #2.</div>
+  <div>I am `div` #3.
+    <i>I am the only `i` child.</i>
+    <em>I am `em` #1.</em>
+    <em>I am `em` #2.</em>
+  </div>
+</main>
+ +

CSS

+ +
main :only-of-type {
+  color: red;
+}
+ +

结果

+ +

{{EmbedLiveSample('Example','100%',180)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type') }}{{ Spec2('CSS4 Selectors') }}No change.
{{ SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type') }}{{ Spec2('CSS3 Selectors') }}Initial definition.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{ CompatGeckoDesktop("1.9.1") }}9.09.53.2
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1{{ CompatGeckoMobile("1.9.1") }}9.010.03.2
+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/_colon_optional/index.html b/files/zh-cn/web/css/_colon_optional/index.html new file mode 100644 index 0000000000..601a0336da --- /dev/null +++ b/files/zh-cn/web/css/_colon_optional/index.html @@ -0,0 +1,123 @@ +--- +title: ':optional' +slug: 'Web/CSS/:optional' +translation_of: 'Web/CSS/:optional' +--- +

{{ CSSRef() }}

+ +

摘要

+ +

:optional CSS 伪类 表示任意没有{{ htmlattrxref("required","input") }}属性的 {{ HTMLElement("input") }}，{{HTMLElement("select")}} 或  {{ HTMLElement("textarea") }} 元素使用它。

+ +
/* Selects any optional <input> */
+input:optional {
+  border: 1px dashed black;
+}
+
+ +

它允许表单容易的展示可选字段并且渲染其外观。

+ +
+

注：为必填字段设置外观，请使用 {{ cssxref(":required") }}伪类。

+
+ +

语法

+ +
{{csssyntax}}
+ +

例子

+ +

查看{{ cssxref(":invalid") }} 示例。

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('HTML WHATWG', '#selector-optional', ':optional') }}{{ Spec2('HTML WHATWG') }}No change.
{{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}{{ Spec2('HTML5 W3C') }}Defines the semantic regarding HTML and constraint validation.
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}{{ Spec2('CSS4 Selectors') }}No change.
{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional') }}{{ Spec2('CSS3 Basic UI') }}Defines the pseudo-class, but not the associated semantic.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support10.0{{ CompatGeckoDesktop("2") }}1010.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("2") }}{{ CompatNo() }}10.05.0
+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/_colon_out-of-range/index.html b/files/zh-cn/web/css/_colon_out-of-range/index.html new file mode 100644 index 0000000000..1223744f41 --- /dev/null +++ b/files/zh-cn/web/css/_colon_out-of-range/index.html @@ -0,0 +1,111 @@ +--- +title: ':out-of-range' +slug: 'Web/CSS/:out-of-range' +translation_of: 'Web/CSS/:out-of-range' +--- +
{{CSSRef}}
+ +
:out-of-range CSS 伪类 表示一个 {{htmlelement("input")}} 元素，其当前值处于属性 min 和 max 限定的范围外。
+ +
 
+ +
/* 该伪类可选定任意的<input>, 但只有在该元素指定了取值范围，并且元素值处于指定范围时才有效 */
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+}
+ +

该伪类用于给用户一个可视化的提示，表示输入域的当前值处于允许范围外。

+ +
注意：该伪类仅适用于那些拥有（或可以接受）取值范围设定的元素。若缺少此类设定，元素值就无所谓“in-range”和“out-range”。
+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +
+

HTML

+ +
<form action="" id="form1">
+  <ul>Values between 1 and 10 are valid.
+    <li>
+      <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
+      <label for="value1">Your value is </label>
+    </li>
+  </ul>
+</form>
+ +

CSS

+ +
li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content: 'okay.';
+}
+
+input:out-of-range + label::after {
+  content: 'out of range!';
+}
+ +

输出

+
+ +
{{EmbedLiveSample('Example', 600, 140)}}
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}{{Spec2('HTML WHATWG')}}Defines when :out-of-range matches elements in HTML.
{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}{{Spec2('CSS4 Selectors')}}Initial definition.
+ +

浏览器兼容性

+ +
+
+ + +

{{Compat("css.selectors.out-of-range")}}

+
+
+ +

参阅

+ + diff --git a/files/zh-cn/web/css/_colon_placeholder-shown/index.html b/files/zh-cn/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..86fd5a91c9 --- /dev/null +++ b/files/zh-cn/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,92 @@ +--- +title: ':placeholder-shown' +slug: 'Web/CSS/:placeholder-shown' +translation_of: 'Web/CSS/:placeholder-shown' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

:placeholder-shown CSS 伪类 在 {{htmlElement("input")}} 或 {{htmlElement("textarea")}} 元素显示 placeholder text 时生效.

+ +
/* 选择所有显示占位符(placeholder)的元素 */
+:placeholder-shown {
+  border: 2px solid silver;
+}
+ +

参数

+ +
:placeholder-shown
+ +

样例

+ +

基础样例

+ +

HTML

+ +
<input placeholder="Type something here!">
+ +

CSS

+ +
input {
+  border: 2px solid black;
+  padding: 3px;
+}
+
+input:placeholder-shown {
+  border-color: silver;
+}
+ +

结果

+ +

{{EmbedLiveSample('Basic_example', 200, 60)}}

+ +

超出文本

+ +

在分辨率较小的设备上, 输入框或者其他表单控件可能会变的很窄. 这个选择器可以使得占位符文本缩短. 这个选择器经常和 {{cssxref("text-overflow")}} 一起使用.

+ +

HTML

+ +
<input placeholder="Enter something into this field, if you please!">
+ +

CSS

+ +
input:placeholder-shown {
+  text-overflow: ellipsis;
+}
+ +

结果

+ +

{{EmbedLiveSample("Overflowing_text", 200, 60)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}{{Spec2("CSS4 Selectors")}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.placeholder-shown")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/_colon_read-only/index.html b/files/zh-cn/web/css/_colon_read-only/index.html new file mode 100644 index 0000000000..02f90acee8 --- /dev/null +++ b/files/zh-cn/web/css/_colon_read-only/index.html @@ -0,0 +1,96 @@ +--- +title: ':read-only' +slug: 'Web/CSS/:read-only' +tags: + - CSS + - readOnly +translation_of: 'Web/CSS/:read-only' +--- +
{{CSSRef}}
+ +

 :read-only CSS 伪类 表示元素不可被用户编辑的状态（如锁定的文本输入框）。

+ +
/* Selects any <input> element that is read-only */
+/* Supported in Firefox with a prefix */
+input:-moz-read-only {
+  background-color: #ccc;
+}
+
+/* Supported in Blink/WebKit/Edge without a prefix */
+input:read-only {
+  background-color: #ccc;
+}
+ +
+

注意：这个选择器不只是选择具有 {{htmlattrxref("readonly", "input")}} 属性的{{htmlElement("input")}} 元素，它也会选择所有的不能被用户编辑的元素。

+
+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<input type="text" value="Type whatever you want here.">
+<input type="text" value="This is a read-only field." readonly>
+<p>This is a normal paragraph.</p>
+<p contenteditable="true">You can edit this paragraph!</p>
+ +

CSS

+ +
input { min-width: 25em; }
+input:-moz-read-only { background: cyan; }
+input:read-only { background: cyan; }
+
+p:-moz-read-only { background: lightgray; }
+p:read-only { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+
+ +

输出

+ +

{{EmbedLiveSample("Example")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }}{{ Spec2('HTML WHATWG') }}No change.
{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}{{ Spec2('HTML5 W3C') }}Defines the semantics regarding HTML and constraint validation.
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}{{ Spec2('CSS4 Selectors') }}Defines the pseudo-class, but not the associated semantics.
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.read-only")}}

+ +

参阅

+ + diff --git a/files/zh-cn/web/css/_colon_read-write/index.html b/files/zh-cn/web/css/_colon_read-write/index.html new file mode 100644 index 0000000000..23735a5573 --- /dev/null +++ b/files/zh-cn/web/css/_colon_read-write/index.html @@ -0,0 +1,93 @@ +--- +title: ':read-write' +slug: 'Web/CSS/:read-write' +translation_of: 'Web/CSS/:read-write' +--- +
{{CSSRef}}
+ +

:read-write CSS 伪类 代表一个元素（例如可输入文本的 input元素）可以被用户编辑。

+ +
/* 选择所有可编辑的 <input> 元素 */
+/* Firefox 中需要加前缀 */
+input:-moz-read-write {
+  background-color: #bbf;
+}
+
+/* Supported in Blink/WebKit/Edge without a prefix */
+input:read-write {
+  background-color: #bbf;
+}
+ +
+

注意：这个选择器不仅仅选择 {{htmlElement("input")}} 元素，它也会选择所有可以被用户编辑的元素，例如设置了 {{htmlattrxref("contenteditable")}} 属性的  {{htmlelement("p")}} 元素。

+
+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<input type="text" value="Type whatever you want here.">
+<input type="text" value="This is a read-only field." readonly>
+<p>This is a normal paragraph.</p>
+<p contenteditable="true">You can edit this paragraph!</p>
+ +

CSS

+ +
input { min-width: 25em; }
+input:-moz-read-write { background: cyan; }
+input:read-write { background: cyan; }
+
+p:-moz-read-write { background: lightgray; }
+p:read-write { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+
+ +

输出

+ +

{{EmbedLiveSample("Example")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }}{{ Spec2('HTML WHATWG') }}No change.
{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}{{ Spec2('HTML5 W3C') }}Defines the semantics regarding HTML and constraint validation.
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}{{ Spec2('CSS4 Selectors') }}Defines the pseudo-class, but not the associated semantics.
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.read-write")}}

+ +

参阅

+ + diff --git a/files/zh-cn/web/css/_colon_required/index.html b/files/zh-cn/web/css/_colon_required/index.html new file mode 100644 index 0000000000..95089e4e03 --- /dev/null +++ b/files/zh-cn/web/css/_colon_required/index.html @@ -0,0 +1,110 @@ +--- +title: ':required' +slug: 'Web/CSS/:required' +translation_of: 'Web/CSS/:required' +--- +

{{ CSSRef() }}

+ +

摘要

+ +

:required  CSS 伪类 表示任意设置了{{ htmlattrxref("required", "input") }}属性的{{ HTMLElement("input") }}，{{HTMLElement("select")}}, 或 {{HTMLElement("textarea")}}元素。 这个伪类对于高亮显示在提交表单之前必须具有有效数据的字段非常有用。

+ +

注意：{{ cssxref(":optional") }}伪类选中'可选的'表单字段。

+ +

语法

+ +
{{csssyntax}}
+ +

例子

+ +

查看示例 {{ cssxref(":invalid") }} .

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('HTML WHATWG', '#selector-required', ':required') }}{{ Spec2('HTML WHATWG') }}No change.
{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}{{ Spec2('HTML5 W3C') }}Defines the semantic regarding HTML and constraint validation.
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}{{ Spec2('CSS4 Selectors') }}No change.
{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }}{{ Spec2('CSS3 Basic UI') }}Defines the pseudo-class, but not the associated semantic.
+ +

浏览器兼容

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support10.0{{ CompatGeckoDesktop("2") }}1010.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("2") }}{{ CompatNo() }}10.05.0
+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/_colon_right/index.html b/files/zh-cn/web/css/_colon_right/index.html new file mode 100644 index 0000000000..d5e0a7c9c8 --- /dev/null +++ b/files/zh-cn/web/css/_colon_right/index.html @@ -0,0 +1,71 @@ +--- +title: ':right' +slug: 'Web/CSS/:right' +translation_of: 'Web/CSS/:right' +--- +

:right CSS 伪类必须与@规则  {{cssxref("@page")}} 一起配套使用，表示打印文档的所有右页。

+ +
/* 当打印时会选择所有文档右页 */
+@page :right {
+  margin: 2in 3in;
+}
+ +

这里的“左” 或 “右” 不是固定的，取决与文档的写作方向。如果第一页主要文字方向是从左到右的，那么它就是{{cssxref(":right")}}右页，反之它就是{{cssxref(":left")}}左页。

+ +
+

Note: 可通过 bdo 标签  的 dir 属性改变文字方向。

+
+ +
+

Note: 此伪类只能用于更改页面的 {{ cssxref("margin") }}, {{cssxref("padding") }}, {{ cssxref("border") }}, and {{cssxref("background") }} 属性。其它属性都将被忽略，只会影响页框，不会影响文档内容。 

+
+ +

语法

+ +
@page:right{
+    margin: * *;
+}
+ +

示例

+ +
@page :right {
+  margin: 2in 3in;
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Paged Media', '#left-right-first', ':right') }}{{ Spec2('CSS3 Paged Media') }}无改变。
{{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }}{{ Spec2('CSS2.1') }}初步定义。
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.right")}}

+ +

参考

+ + diff --git a/files/zh-cn/web/css/_colon_root/index.html b/files/zh-cn/web/css/_colon_root/index.html new file mode 100644 index 0000000000..9ea8106eb1 --- /dev/null +++ b/files/zh-cn/web/css/_colon_root/index.html @@ -0,0 +1,105 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS + - CSS 伪类 +translation_of: 'Web/CSS/:root' +--- +
{{CSSRef}}
+ +

概述

+ +

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 {{HTMLElement("html")}} 元素，除了优先级更高之外，与 html 选择器相同。

+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +

在声明全局 CSS 变量时 :root 会很有用：

+ +
:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS4 Selectors')}}No change
{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS3 Selectors')}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.7")}}99.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/zh-cn/web/css/_colon_scope/index.html b/files/zh-cn/web/css/_colon_scope/index.html new file mode 100644 index 0000000000..5d5f6e74c7 --- /dev/null +++ b/files/zh-cn/web/css/_colon_scope/index.html @@ -0,0 +1,122 @@ +--- +title: ':scope' +slug: 'Web/CSS/:scope' +tags: + - ':scope' + - CSS + - Layout + - Pseudo-class + - Reference + - Scoped Elements + - Web +translation_of: 'Web/CSS/:scope' +--- +

{{CSSRef}}

+ +

:scope 属于 CSS 伪类，它表示作为选择器要匹配的参考点的元素。

+ +
/* Selects a scoped element */
+:scope {
+  background-color: lime;
+}
+ +

当前，在样式表中使用时, :scope 等效于 {{cssxref(":root")}}，因为目前尚无一种方法来显式建立作用域元素。当从DOM API使用，如（{{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}}, 或 {{domxref("Element.closest()")}}）, :scope 匹配你调用API的元素。

+ +

用法

+ +
{{csssyntax}}
+ +

示例

+ +

Identity match

+ +

在这个简单的示例中，我们演示了调用 {{domxref("Element.matches()")}} 方法中使用 :scope 伪类来匹配调用它的元素。

+ +

JavaScript

+ +
let paragraph = document.getElementById("para");
+let output = document.getElementById("output");
+
+if (paragraph.matches(":scope")) {
+  output.innerText = "Yep, the element is its own scope as expected!";
+}
+ +

HTML

+ +
<p id="para">
+  This is a paragraph. It is not an interesting paragraph. Sorry about that.
+</p>
+<p id="output"></p>
+ +

结果

+ +
{{ EmbedLiveSample('Identity_match') }}
+ +

Direct children

+ +

当需要获取已检索到的的直接后代元素时，:scope 伪类很有用。

+ +

JavaScript

+ +
var context = document.getElementById('context');
+var selected = context.querySelectorAll(':scope > div');
+
+document.getElementById('results').innerHTML = Array.prototype.map.call(selected, function (element) {
+    return '#' + element.getAttribute('id');
+}).join(', ');
+ +

HTML

+ +
<div id="context">
+    <div id="element-1">
+        <div id="element-1.1"></div>
+        <div id="element-1.2"></div>
+    </div>
+    <div id="element-2">
+        <div id="element-2.1"></div>
+    </div>
+</div>
+<p>
+    Selected elements ids :
+    <span id="results"></span>
+</p>
+ +

结果

+ +

{{ EmbedLiveSample('Direct_children') }}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{ SpecName('CSS4 Selectors', '#the-scope-pseudo', ':scope') }}{{ Spec2('CSS4 Selectors') }}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.scope")}}

+ +

参考

+ + diff --git a/files/zh-cn/web/css/_colon_target/index.html b/files/zh-cn/web/css/_colon_target/index.html new file mode 100644 index 0000000000..337b0b42b6 --- /dev/null +++ b/files/zh-cn/web/css/_colon_target/index.html @@ -0,0 +1,211 @@ +--- +title: ':target' +slug: 'Web/CSS/:target' +tags: + - CSS + - Layou +translation_of: 'Web/CSS/:target' +--- +
{{CSSRef}}
+ +

:target CSS 伪类 代表一个唯一的页面元素(目标元素)，其{{htmlattrxref("id")}} 与当前URL片段匹配 .

+ +
/* 选择一个ID与当前URL片段匹配的元素*/
+:target {
+  border: 2px solid black;
+}
+ +

例如, 以下URL拥有一个片段 (以#标识的) ，该片段指向一个ID为section2的页面元素:

+ +
http://www.example.com/index.html#section2
+ +

若当前URL等于上面的URL，下面的元素可以通过 :target选择器被选中：

+ +
<section id="section2">Example</section>
+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +

一个内容列表

+ +

:target 伪类可用于加亮显示页面中可从表格内容中链接到的部分。

+ +

HTML

+ +
<h3>Table of Contents</h3>
+<ol>
+ <li><a href="#p1">Jump to the first paragraph!</a></li>
+ <li><a href="#p2">Jump to the second paragraph!</a></li>
+ <li><a href="#nowhere">This link goes nowhere,
+   because the target doesn't exist.</a></li>
+</ol>
+
+<h3>My Fun Article</h3>
+<p id="p1">You can target <i>this paragraph</i> using a
+  URL fragment. Click on the link above to try out!</p>
+<p id="p2">This is <i>another paragraph</i>, also accessible
+  from the links above. Isn't that delightful?</p>
+
+ +

CSS

+ +
p:target {
+  background-color: gold;
+}
+
+/* 在目标元素中增加一个伪元素*/
+p:target::before {
+  font: 70% sans-serif;
+  content: "►";
+  color: limegreen;
+  margin-right: .25em;
+}
+
+/*在目标元素中使用italic样式*/
+p:target i {
+  color: red;
+}
+ +

结果

+ +

{{EmbedLiveSample('一个内容列表', 500, 300)}}

+ +

纯CSS高亮

+ +

你可以不使用任何Javascript代码，只使用:target伪类创建一个加亮框。该技术依赖于初始化时就隐藏在页面中的链接到指定元素的锚。一旦定位，CSS就会更改其display 以便显示它们。

+ +
注意:一个基于:target伪类的更为完善的纯-CSS加亮框可以在GitHub (demo)上找到。
+ +

HTML

+ +
<ul>
+  <li><a href="#example1">Open example #1</a></li>
+  <li><a href="#example2">Open example #2</a></li>
+</ul>
+
+<div class="lightbox" id="example1">
+  <figure>
+    <a href="#" class="close"></a>
+    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
+  </figure>
+</div>
+
+<div class="lightbox" id="example2">
+  <figure>
+    <a href="#" class="close"></a>
+    <figcaption>Cras risus odio, pharetra nec ultricies et,
+      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
+      Quisque quis neque arcu, nec gravida magna.</figcaption>
+  </figure>
+</div>
+ +

CSS

+ +
/* Unopened lightbox */
+.lightbox {
+  display: none;
+}
+
+/* Opened lightbox */
+.lightbox:target {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Lightbox content */
+.lightbox figcaption {
+  width: 25rem;
+  position: relative;
+  padding: 1.5em;
+  background-color: lightpink;
+}
+
+/* Close button */
+.lightbox .close {
+  position: relative;
+  display: block;
+}
+
+.lightbox .close::after {
+  right: -1rem;
+  top: -1rem;
+  width: 2rem;
+  height: 2rem;
+  position: absolute;
+  display: flex;
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  background-color: black;
+  border-radius: 50%;
+  color: white;
+  content: "×";
+  cursor: pointer;
+}
+
+/* Lightbox overlay */
+.lightbox .close::before {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background-color: rgba(0,0,0,.7);
+  content: "";
+  cursor: default;
+}
+ +

结果

+ +

{{EmbedLiveSample('纯CSS高亮', 500, 220)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}{{Spec2("HTML WHATWG")}}Defines HTML-specific semantics.
{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}{{Spec2("CSS4 Selectors")}}No changes.
{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}{{Spec2("CSS3 Selectors")}}Initial definition.
+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.selectors.target")}}

+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/_colon_valid/index.html b/files/zh-cn/web/css/_colon_valid/index.html new file mode 100644 index 0000000000..43689bc25b --- /dev/null +++ b/files/zh-cn/web/css/_colon_valid/index.html @@ -0,0 +1,84 @@ +--- +title: ':valid' +slug: 'Web/CSS/:valid' +tags: + - CSS + - Layout + - Pesudo-class + - Reference + - Web +translation_of: 'Web/CSS/:valid' +--- +
{{ CSSRef() }}
+ +

:valid CSS 伪类表示内容验证正确的{{ HTMLElement("input") }} 或其他 {{ HTMLElement("form") }} 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。

+ +
/* Selects any valid <input> */
+input:valid {
+  background-color: powderblue;
+}
+ +

该伪类对于高亮正确字段是很有用的。

+ +

语法

+ +
{{csssyntax}}
+ +

例子

+ +

参见 {{cssxref(":invalid")}}。

+ +

 

+ +

Accessibility concerns

+ +

绿色常用于表示有效输入。但某些色盲的人将无法确定输入的状态（颜色），除非使用不依赖于颜色来传达意义的附加指示器。 通常，指示器使用描述性文本和（或）图标。

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('HTML WHATWG', '#selector-valid', ':valid') }}{{ Spec2('HTML WHATWG') }}No change.
{{ SpecName('HTML5 W3C', '#selector-valid', ':valid') }}{{ Spec2('HTML5 W3C') }}Defines the semantic regarding HTML and constraint validation.
{{ SpecName('CSS4 Selectors', '#validity-pseudos', ':valid') }}{{ Spec2('CSS4 Selectors') }}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("css.selectors.valid")}}

+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/_colon_visited/index.html b/files/zh-cn/web/css/_colon_visited/index.html new file mode 100644 index 0000000000..8ebd4f7e46 --- /dev/null +++ b/files/zh-cn/web/css/_colon_visited/index.html @@ -0,0 +1,171 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - CSS + - 伪类 + - 布局 +translation_of: 'Web/CSS/:visited' +--- +

{{CSSRef}}

+ +

概述

+ +

:visited CSS伪类表示用户已访问过的链接。出于隐私原因，可以使用此选择器修改的样式非常有限。

+ +
/* 所有被访问过的 <a> 变绿 */
+a:visited {
+  color: green;
+}
+
+ +

这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 ({{cssxref(":link")}}, {{cssxref(":hover")}},和{{cssxref(":active")}})。要适当地设置链接样式，请将:visited 规则放在:link 规则之后，但在:hover 和:active 规则之前，参照 LVHA 顺序::link — :visited — :hover — :active。

+ +

限制

+ +

出于隐私原因，浏览器严格限制您可以让此伪类应用的样式，以及使用它们的方式：

+ + + +
+

注意：有关这些限制及其背后原因的更多信息，请参阅 Privacy and the :visited selector。

+
+ +

示例

+ +

未设置颜色或透明的属性不能使用:visited。 在可以使用此伪类设置的属性中，浏览器可能只有color和column-rule-color两个默认值。 因此，对于其他属性，在使用:visited选择器前，应该先为这些属性设置基础样式。 

+ +

HTML

+ +
<a href="#test-visited-link">你是否访问过此链接？</a>
+<a href="">你已经访问过此链接。</a>
+ +

CSS

+ +
a {
+  /* 指定某些属性的默认值，允许他们使用：visited状态进行样式设置 */
+  background-color: white;
+  border: 1px solid white; 
+}
+
+a:visited {
+  background-color: yellow;
+  border-color: hotpink;
+  color: hotpink;
+}
+
+ +

结果

+ +

{{ EmbedLiveSample('示例', '', '', '', 'Web/CSS/:visited') }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatus +

Comment

+
{{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}{{ Spec2('HTML WHATWG') }}
{{ SpecName('CSS4 Selectors', '#link', ':visited') }}{{ Spec2('CSS4 Selectors') }}无变化。
{{ SpecName('CSS3 Selectors', '#link', ':visited') }}{{ Spec2('CSS3 Selectors') }}无变化。
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}{{ Spec2('CSS2.1') }}取消:visited只适用于 {{ HTMLElement("a") }} 元素的限制。由于隐私原因，浏览器会限制该行为。
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}{{ Spec2('CSS1') }}初次定义。
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1.0") }}3.53.51.0
Restrictions in CSS properties allowed in a statement using :visited6{{CompatGeckoDesktop("2.0") }}8 (or earlier){{ CompatUnknown() }}5.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("1.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/_colon_where/index.html b/files/zh-cn/web/css/_colon_where/index.html new file mode 100644 index 0000000000..207deb2f6f --- /dev/null +++ b/files/zh-cn/web/css/_colon_where/index.html @@ -0,0 +1,54 @@ +--- +title: ':where()' +slug: 'Web/CSS/:where' +tags: + - CSS + - Web + - 伪类 + - 参考 + - 选择器 +translation_of: 'Web/CSS/:where' +--- +

{{CSSRef}}{{Draft}}{{SeeCompatTable}}

+ +

:where() CSS 伪类函数接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。

+ +

:where() 和 {{CSSxRef(":is", ":is()")}} 的不同之处在于，:where() 的优先级总是为 0 ，但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。

+ +

语法

+ +
{{CSSSyntax}}
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS4 Selectors", "#zero-matches", ":where()")}}{{Spec2("CSS4 Selectors")}}Initial definition.
+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.selectors.where")}}

+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/_doublecolon_-moz-placeholder/index.html b/files/zh-cn/web/css/_doublecolon_-moz-placeholder/index.html new file mode 100644 index 0000000000..0b7fe3488b --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_-moz-placeholder/index.html @@ -0,0 +1,98 @@ +--- +title: '::-moz-placeholder' +slug: 'Web/CSS/::-moz-placeholder' +tags: + - CSS + - CSS Pseudo-class + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/::placeholder' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +
提示: {{cssxref('::-moz-placeholder')}} 伪元素在Firefox 19+替代了之前的 :-moz-placeholder 伪类.
+ +
{{gecko_minversion_header("19.0")}}
+ +

摘要

+ +

 ::-moz-placeholder 伪元素控制元素所显示的文字占位符.它允许开发者/设计师改变文字占位符的样式.默认的文字占位符为浅灰色,当你的表单背景色为类似的颜色时它可能效果并不是很明显,那么你就可以使用这个伪类来改变文字占位符的颜色.

+ +

示例

+ +

HTML 内容

+ +
<input id="test" placeholder="Placeholder text!">
+ +

CSS 内容

+ +
input::-moz-placeholder {
+  color: green;
+}
+ +

{{EmbedLiveSample('%E7%A4%BA%E4%BE%8B', '100%', 100)}}

+ +

 

+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatGeckoDesktop("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+ + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+ +

[1] Firefox 对placeholder文本默认应用{{cssxref("opacity")}}:0.54。详见{{Bug("556145")}}。大多数主流浏览器目前不会对placeholder文本伪元素或者伪类应用默认样式。

+ +

Gecko 此前将本属性视为 {{cssxref(":-moz-placeholder")}}。详见 {{Bug("737786")}}.

+ +

See also

+ + diff --git a/files/zh-cn/web/css/_doublecolon_-moz-progress-bar/index.html b/files/zh-cn/web/css/_doublecolon_-moz-progress-bar/index.html new file mode 100644 index 0000000000..8388422fe2 --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_-moz-progress-bar/index.html @@ -0,0 +1,54 @@ +--- +title: '::-moz-progress-bar' +slug: 'Web/CSS/::-moz-progress-bar' +tags: + - CSS + - CSS 伪类 + - 非标准特性 +translation_of: 'Web/CSS/::-moz-progress-bar' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

CSS伪元素 ::-moz-progress-bar 是{{HTMLElement("progress")}} 元素中，Mozilla独有的特性（Mozilla extension），用于对进度条完成的部分进行选择。

+ +

如果你想选择未完成的部分，请直接选择 {{HTMLElement("progress")}} 。

+ +

语法

+ +
{{csssyntax}}
+ +

例子

+ +

HTML

+ +
<progress value="30" max="100">30%</progress>
+<progress max="100">Indeterminate</progress>
+ +

CSS

+ +
::-moz-progress-bar {
+  background-color: red;
+}
+
+/* Force indeterminate bars to have zero width */
+:indeterminate::-moz-progress-bar {
+  width: 0;
+}
+ +

Result

+ +

{{EmbedLiveSample('Examples')}}

+ +

上面第一段样式的进度条会如下图所示：

+ +

Custom styled progress bar

+ +

参考

+ + diff --git a/files/zh-cn/web/css/_doublecolon_-moz-range-progress/index.html b/files/zh-cn/web/css/_doublecolon_-moz-range-progress/index.html new file mode 100644 index 0000000000..a832614259 --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_-moz-range-progress/index.html @@ -0,0 +1,73 @@ +--- +title: '::-moz-range-progress' +slug: 'Web/CSS/::-moz-range-progress' +tags: + - CSS + - 'CSS:Mozilla扩展' + - 伪元素 + - 选择器 + - 非标准化 +translation_of: 'Web/CSS/::-moz-range-progress' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

The ::-moz-range-progress CSS 伪元素 是一个 Mozilla 扩展。它代表了指示器在其中滑动的轨道的下部（即凹槽）是一个 type="range" 类型的 {{HTMLElement("input")}} 。此部分对应的值低于揪揪当前选择的值（即虚拟旋钮）。

+ +
+

注意: 在 <input type="range">上应用::-moz-range-progress 不会匹配任何元素，也不会有任何效果。

+
+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<input type="range" min="0" max="100" step="5" value="50"/>
+
+ +

CSS

+ +
input[type=range]::-moz-range-progress {
+  background-color: green;
+  height: 1em;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

使用了这个样式的进度条可能会看起来这样：

+ +

+ +

规范

+ +

无内容

+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.-moz-range-progress")}}

+ +

相关阅读

+ + diff --git a/files/zh-cn/web/css/_doublecolon_-ms-check/index.html b/files/zh-cn/web/css/_doublecolon_-ms-check/index.html new file mode 100644 index 0000000000..6ebbdb1ea4 --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_-ms-check/index.html @@ -0,0 +1,169 @@ +--- +title: '::-ms-check' +slug: 'Web/CSS/::-ms-check' +translation_of: 'Archive/Web/CSS/::-ms-check' +--- +
{{CSSRef}}
+ +
{{non-standard_header}}
+ +
 
+ +

::-ms-check这个css伪类是微软扩展的用以表达 checkboxes 和 radio 的勾选状态，其中 checkboxes 和 radio分别通过 <input type="checkbox"> 和 <input type="radio">创建

+ +

只有IE浏览器和微软Edge浏览器支持该伪类。

+ +

属性支持性

+ +

只有以下css属性可以在选择器里使用 ::-ms-check 伪类. 其他属性会被自动忽略

+ + + +

语法

+ +
  {{csssyntax}}
+
+ +

例子

+ +

HTML

+ +
<form>
+  <label for="redButton">Red</label>
+  <input type="radio" id="redButton"><br>
+  <label for="greenCheckbox">Green</label>
+  <input type="checkbox" id="greenCheckbox">
+</form>
+ +

CSS

+ +
input, label {
+  display: inline;
+}
+
+input[type=radio]::-ms-check {
+  border-color: red; /* This will make the border red when the button is checked. */
+  color: red; /* This will make the circle red when the button is checked. */
+}
+
+input[type=checkbox]::-ms-check {
+  border-color: green; /* This will make the box green when the button is checked. */
+  color: green; /* This will make the checkmark green when the button is checked. */
+}
+
+ +

结果

+ +

可以尝试下面的例子， 左边的截屏显示当用户不在ie浏览器或Edge浏览器上运行时勾选上按钮时的情况

+ +

{{ EmbedLiveSample('Examples', '', '', 'https://mdn.mozillademos.org/files/15814/ie11-example.PNG', 'Web/CSS/::-ms-check') }}

+ +

详述

+ +

无

+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatNo}}10.0{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileiOS WebKit
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/zh-cn/web/css/_doublecolon_-ms-clear/index.html b/files/zh-cn/web/css/_doublecolon_-ms-clear/index.html new file mode 100644 index 0000000000..ef01ab3b21 --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_-ms-clear/index.html @@ -0,0 +1,22 @@ +--- +title: '::-ms-clear' +slug: 'Web/CSS/::-ms-clear' +translation_of: 'Archive/Web/CSS/::-ms-clear' +--- +
{{ CSSRef() }}
+ +

{{ Non-standard_header() }}

+ +

概述

+ +

::-ms-clear CSS 伪元素 代表文本输入框 {{HTMLElement("input")}} 边缘的一个按钮（清除按钮），用于清除文本框 {{HTMLElement("input")}} 的当前值。这个按钮和伪元素是不标准的，目前只有Internet Explorer 10+可用，需要带上前缀。只有文本框 {{HTMLElement("input")}} 聚焦且非空的情况下该按钮才会出现。

+ +

规范

+ +

不属于任何规范。

+ +

微软在MSDN上有 一篇描述 。

+ +

Bugs

+ +

在设置了 {{cssxref("text-align")}}: right 的文本框 {{HTMLElement("input")}} 中，如果清除按钮出现，则会裁剪文本框右侧边缘的内容。解决方案是使用 {{cssxref("display")}}: none 隐藏该按钮。详情见 IE bug 776537 。

diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-progress-bar/index.html b/files/zh-cn/web/css/_doublecolon_-webkit-progress-bar/index.html new file mode 100644 index 0000000000..754177afee --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_-webkit-progress-bar/index.html @@ -0,0 +1,110 @@ +--- +title: '::-webkit-progress-bar' +slug: 'Web/CSS/::-webkit-progress-bar' +tags: + - CSS + - 非标准特性 +translation_of: 'Web/CSS/::-webkit-progress-bar' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

概述

+ +

::-webkit-progress-bar CSS 伪元素 选择 {{HTMLElement("progress")}} 元素的未完成部分。 {{ cssxref("::-webkit-progress-value") }} 选择完成的部分。::-webkit-progress-bar 是{{cssxref("::-webkit-progress-inner-element")}} 伪元素的子元素，同时是 {{cssxref("::-webkit-progress-value")}} 伪元素的父元素。

+ +
+

Note: 为了能让::-webkit-progress-value起作用,需要添加CSS {{cssxref("-webkit-appearance")}} 至 <progress> 元素.

+
+ +

规范

+ +

没有规范。这是一个 WebKit/Blink 独有的规范。

+ +

例子

+ +

CSS content

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-bar {
+   background-color: orange;
+}
+
+ +

HTML content

+ +
<progress value="10" max="50">
+
+ +

Output

+ +

{{EmbedLiveSample("Example", 200, 50)}}

+ +

应用了上述样式的进度条样式如下：

+ +

+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-progress-inner-element/index.html b/files/zh-cn/web/css/_doublecolon_-webkit-progress-inner-element/index.html new file mode 100644 index 0000000000..65765175ac --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_-webkit-progress-inner-element/index.html @@ -0,0 +1,65 @@ +--- +title: '::-webkit-progress-inner-element' +slug: 'Web/CSS/::-webkit-progress-inner-element' +tags: + - CSS + - 伪元素 + - 非标准 +translation_of: 'Web/CSS/::-webkit-progress-inner-element' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

::-webkit-progress-inner-element CSS 伪元素选择了 {{HTMLElement("progress")}} 元素。他是 {{cssxref("::-webkit-progress-bar")}} 伪元素的父元素。

+ +
+

注意: 为了使 ::-webkit-progress-value 生效， <progress> 元素的{{cssxref("-webkit-appearance")}} 需要设置为 none 。

+
+ +

例子

+ +

HTML

+ +
<progress value="10" max="50">
+
+ +

CSS

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-inner-element {
+  border: 2px solid black;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Example", 200, 50)}}

+ +

应用了上述样式的进度条如下:

+ +

+ +

规范

+ +

不属于任何规范。这是WebKit/Blink专有的一个伪元素。

+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.-webkit-progress-inner-element")}}

+ +

参考

+ + diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.html b/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.html new file mode 100644 index 0000000000..af7bd3b5bd --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_-webkit-progress-value/index.html @@ -0,0 +1,67 @@ +--- +title: '::-webkit-progress-value' +slug: 'Web/CSS/::-webkit-progress-value' +tags: + - CSS + - 伪元素 + - 参考 + - 非标准 +translation_of: 'Web/CSS/::-webkit-progress-value' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +
::-webkit-progress-value CSS 伪元素 代表的是{{HTMLElement("progress")}} 元素中进度条未完成的部分。它是{{cssxref("::-webkit-progress-bar")}} 伪元素的子元素。
+ +
+ +
+

注意: 为了使 ::-webkit-progress-value 生效， <progress> 元素的{{cssxref("-webkit-appearance")}} 需要设置为 none 。

+
+ +

说明

+ +

不属于任何规范。这是WebKit/Blink专有的一个伪元素。

+ +

示例

+ +

HTML

+ +
<progress value="10" max="50">
+
+ +

CSS

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-value {
+  background-color: orange;
+}
+ +

Result

+ +

{{EmbedLiveSample("Example", 200, 50)}}

+ +

应用了上述样式的进度条如下：

+ +

+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.-webkit-progress-value")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.html b/files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.html new file mode 100644 index 0000000000..ba62442d9e --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_-webkit-scrollbar/index.html @@ -0,0 +1,80 @@ +--- +title: '::-webkit-scrollbar' +slug: 'Web/CSS/::-webkit-scrollbar' +tags: + - '::-webkit-scrollbar' + - CSS + - 'CSS:WebKit Extensions' +translation_of: 'Web/CSS/::-webkit-scrollbar' +--- +

{{Draft()}}{{CSSRef}}{{Non-standard_header}}

+ +

描述

+ +

这个 ::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式

+ +
+

::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用.

+
+ +

CSS滚动条选择器

+ +

你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:

+ + + +

语法

+ +
::-webkit-scrollbar { styles here }
+
+ +

例子

+ +
.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
+  display: block;
+  width: 10em;
+  overflow: auto;
+  height: 2em;
+}
+.invisible-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Demonstrate a "mostly customized" scrollbar
+ * (won't be visible otherwise if width/height is specified) */
+.mostly-customized-scrollbar::-webkit-scrollbar {
+  width: 5px;
+  height: 8px;
+  background-color: #aaa; /* or add it to the track */
+}
+/* Add a thumb */
+.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
+    background: #000;
+}
+
+ +
<div class="visible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
+<div class="invisible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
+<div class="mostly-customized-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br>
+And pretty tall<br>
+thing with weird scrollbars.<br>
+Who thought scrollbars could be made weeeeird?</div>
+
+ +

{{EmbedLiveSample('Example')}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-slider-runnable-track/index.html b/files/zh-cn/web/css/_doublecolon_-webkit-slider-runnable-track/index.html new file mode 100644 index 0000000000..32d1b0145b --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_-webkit-slider-runnable-track/index.html @@ -0,0 +1,47 @@ +--- +title: '::-webkit-slider-runnable-track' +slug: 'Web/CSS/::-webkit-slider-runnable-track' +tags: + - CSS + - Input +translation_of: 'Web/CSS/::-webkit-slider-runnable-track' +--- +
::-webkit-slider-runnable-track
+ +
  表示其在type为range的input标签内中的滑块凹槽,也就是滑块可滑动的区域
+ +
 
+ +
 
+ +
 
+ +

 

+ +

使用方法:

+ +
input[type=range]::-webkit-slider-runnable-track{
+ +
    border-radius: 10px; //为凹槽添加圆角边
+ +
    background:#eee;//修改背景色
+ +
}
+ +

规范

+ +

::-webkit-slider-runnable-track不是任何规范的一部分。这是WebKit/Blink特有的伪元素(也就是chrome/sarfri浏览器内核特有的)

+ +

另请参阅

+ + diff --git a/files/zh-cn/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/zh-cn/web/css/_doublecolon_-webkit-slider-thumb/index.html new file mode 100644 index 0000000000..4115432745 --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_-webkit-slider-thumb/index.html @@ -0,0 +1,49 @@ +--- +title: '::-webkit-slider-thumb' +slug: 'Web/CSS/::-webkit-slider-thumb' +tags: + - CSS + - Input +translation_of: 'Web/CSS/::-webkit-slider-thumb' +--- +

总结

+ +

 ::-webkit-slider-thumb

+ +

这是type为range的input标签内的一种伪类样式,用于设置range的滑块的具体样式,该伪类只在内核为webkit/blink的浏览器中有效

+ +

使用方式

+ +

该伪类需要配和::-webkit-slider-runnable-track使用,否则会没有效果.......

+ +

input[type=range]::-webkit-slider-thumb{
+     -webkit-appearance: none;/*清除默认样式*/
+     height:7vw;/*设置滑块高度*/
+     width:5vw;/*设置滑块宽度*/
+     background:#000;/*设置背景色*/
+     border-radius:10vw 10vw;/*加个圆角边*/
+     margin-top:-1vw;/*使用position的话会导致滑块不滑动,但是绑定的value是改变的,所以这里使用margin-top去做定位*/
+ }
+ input[type=range]::-webkit-slider-runnable-track{
+     border-radius: 30px; 
+     background:#128;
+     height:15px;
+ }

+ +

规范

+ +

这不是任何规范中的一部分,这是webkit/bink内核特有的(chrome/safari)

+ +

另请参阅

+ + diff --git a/files/zh-cn/web/css/_doublecolon_after/index.html b/files/zh-cn/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..b4dc41dbbf --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_after/index.html @@ -0,0 +1,157 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +tags: + - CSS伪元素 + - getComputedStyle + - getPropertyValue + - setProperty + - 布局 + - 需要移动端浏览器兼容性 +translation_of: 'Web/CSS/::after' +--- +
{{ CSSRef() }}
+ +

CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合{{ cssxref("content") }}属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

+ +
/* Add an arrow after links */
+a::after {
+  content: "→";
+}
+ +

{{ fx_minversion_note("3.5", "Firefox 3.5之前版本仅实现了CSS 2.0版本的语法 :after. 且不允许在 position, float, list-style-* 等属性中使用。Firefox 3.5开始没有了这项限制。") }}

+ +

语法

+ +
element:after  { style properties }  /* CSS2 语法 */
+
+element::after { style properties }  /* CSS3 语法 */
+ +

::after表示法是在CSS 3中引入的，::符号是用来区分伪类和伪元素的。支持CSS3的浏览器同时也都支持CSS2中引入的表示法:after。

+ +
注: IE8仅支持:after。
+ +

示例

+ +

简单用法

+ +

让我们创建两个类：一个无趣的和一个有趣的。我们可以在每个段尾添加伪元素来标记他们。

+ +
<p class="boring-text">这是些无聊的文字</p>
+<p>这是不无聊也不有趣的文字</p>
+<p class="exciting-text">在MDN上做贡献简单又轻松。
+按右上角的编辑按钮添加新示例或改进旧示例！</p>
+ +
.exciting-text::after {
+  content: "<- 让人兴兴兴奋!";
+  color: green;
+}
+
+.boring-text::after {
+   content:    "<- 无聊!";
+   color:      red;
+}
+ +

输出

+ +

{{ EmbedLiveSample('Simple_usage', 500, 150) }}

+ +

装饰用法

+ +

我们几乎可以用想要的任何方法给 {{ cssxref("content") }} 属性里的文字和图片的加上样式.

+ +
<span class="ribbon">Notice where the orange box is.</span>
+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::after {
+  content: "Look at this orange box.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

输出

+ +

{{ EmbedLiveSample('Decorative_example', 450, 20) }}

+ +

提示用法

+ +

接下来的示例展示了用::after伪元素，attr()CSS表达式和一个自定义数据属性 data-descr 创建一个纯CSS, 词汇表提示工具。在单独页面看这个例子。

+ +
<p>这是上面代码的实现<br />
+  我们有一些 <span data-descr="collection of words and punctuation">文字</span> 有一些
+  <span data-descr="small popups which also hide again">提示</span>。<br />
+  把鼠标放上去<span data-descr="not to be taken literally">看看</span>.
+</p>
+
+ +
span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}
+ +

输出

+ +

{{ EmbedLiveSample('Tooltips', 450, 120) }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Selectors', '#gen-content', '::after') }}{{ Spec2('CSS2.1') }}双冒号.
{{ SpecName('CSS2.1', 'generate.html#before-after-content', '::after') }}{{ Spec2('CSS2.1') }}最初版本,使用单冒号
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.after")}}

+ +

相关链接

+ +

{{ Cssxref("::before") }}, {{ cssxref("content") }}

+ +

高级用法

+ +

getComputedStyle

+ +

getPropertyValue

+ +

setProperty

diff --git a/files/zh-cn/web/css/_doublecolon_backdrop/index.html b/files/zh-cn/web/css/_doublecolon_backdrop/index.html new file mode 100644 index 0000000000..cf90e84938 --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_backdrop/index.html @@ -0,0 +1,77 @@ +--- +title: '::backdrop' +slug: 'Web/CSS/::backdrop' +tags: + - API + - CSS + - 伪元素 + - 参考 +translation_of: 'Web/CSS/::backdrop' +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

::backdrop CSS 伪元素 是在任何处于全屏模式的元素下的即刻渲染的盒子（并且在所有其他在堆中的层级更低的元素之上）。

+ +
/* Backdrop 只有通过 dialog.showModal() 打开对话框时会被显示 */
+dialog::backdrop {
+  background: rgba(255,0,0,.25);
+}
+ +

所有处于全屏模式下的元素都被放在顶级渲染层中的一个后进先出（LIFO）栈里。在视区内容被绘制在屏幕上之前，这一特殊的渲染层总是最后被渲染（因此是最上层）。当一个元素在这个栈的栈顶时，::backdrop 伪元素允许我们遮盖，装饰或完全隐藏该元素的下层文档。

+ +

::backdrop 不继承任何元素，同时也不被任何元素继承。没有规定什么属性不能应用于该伪元素。

+ +

语法

+ +
{{CSSSyntax}}
+ +

示例

+ +

在示例中，backdrop 样式用于将视频全屏显示时的背景颜色改为蓝灰色而不是大多数浏览器默认的黑色。

+ +
video::backdrop {
+  background-color: #448;
+}
+ +

效果如下：

+ +

+ +

注意当 backdrop 可见时，上下两部分的暗蓝灰色的信箱效果。这个区域一般是黑色的，但上面的 CSS 语句修改了它的外观。

+ +

You can see this example in action or view or remix the code on Glitch.

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}{{Spec2('Fullscreen')}}Initial definition.
+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.selectors.backdrop")}}

+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/_doublecolon_before/index.html b/files/zh-cn/web/css/_doublecolon_before/index.html new file mode 100644 index 0000000000..d569b21f23 --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_before/index.html @@ -0,0 +1,244 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +translation_of: 'Web/CSS/::before' +--- +
+

{{CSSRef}}

+ +

CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 {{ cssxref("content") }} 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

+ +
/* Add a heart before links */
+a::before {
+  content: "♥";
+}
+ +

注意: 由::before 和::after 生成的伪元素 包含在元素格式框内， 因此不能应用在替换元素上， 比如{{htmlelement("img")}}或{{htmlelement("br")}} 元素。

+
+ +

语法

+ +
/* CSS3 语法 */
+element::before { 样式 }
+
+/* （单冒号）CSS2 过时语法 (仅用来支持 IE8) */
+element:before  { 样式 }
+
+/* 在每一个p元素前插入内容 */
+p::before { content: "Hello world!"; }
+ +

CSS3 引入 ::before  是为了将伪类和伪元素区别开来。浏览器也接受由CSS 2 引入的 :before 写法。

+ +

示例

+ +

加入引用标记

+ +

使用 ::before 伪元素的一个简单示例就是用于加入引号。此处同时使用了 ::before 和 {{Cssref("::after")}}来插入引用性文本。

+ +

HTML 内容

+ +
<q>一些引用</q>, 他说, <q>比没有好。</q>.
+ +

CSS 内容

+ +
q::before {
+  content: "«";
+  color: blue;
+}
+q::after {
+  content: "»";
+  color: red;
+}
+ +

结果

+ +

{{ EmbedLiveSample('Adding_quotation_marks', '500', '50', '') }}

+ +

修饰实例

+ +

我们可以用几乎任何方法定义 {{ cssxref("content") }} 中的文字和图片样式。

+ +

HTML 内容

+ +
<span class="ribbon">Notice where the orange box is.</span>
+ +

CSS 内容

+ +
.ribbon {
+   background-color: #5BC8F7;
+}
+
+.ribbon::before {
+   content:          "Look at this orange box.";
+   background-color: #FFBA10;
+   border-color:     black;
+   border-style:     dotted;
+}
+ +

最终结果

+ +

{{ EmbedLiveSample('Decorative_example', 450, 60) }}

+ +

待办列表

+ +

在本例中我们将使用伪元素来创建一个简单的待办列表。这个方法也可用于 UI 的小幅度更改和用户体验的提升。

+ +

HTML 内容

+ +
<ul>
+  <li>Buy milk</li>
+  <li>Take the dog for a walk</li>
+  <li>Exercise</li>
+  <li>Write code</li>
+  <li>Play music</li>
+  <li>Relax</li>
+</ul>
+
+ +

CSS 内容

+ +
li {
+  list-style-type: none;
+  position: relative;
+  margin: 2px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}
+ +

JavaScript 内容

+ +
var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if( ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+
+ +

下面展示的是最终得到的结果。请注意我们没有使用任何图标，对勾标识实际上是使用 CSS 定义了样式的 ::before 伪元素。接下来建立几个待办事项来完成它们吧。

+ +

最终结果

+ +

{{ EmbedLiveSample('To-do_list', 400, 300) }}

+ +

注释

+ +

在Firefox3.5中，fixed绝对定位的布局不被允许在元素前生成一个独立的元素（按照CSS规范，:after :before 伪类元素与其他盒模型元素是可以相互影响的，就像他们是真正的元素一样，不过是被插入到相关元素中罢了），他们可以被用来对非表格布局进行改善（例：实现元素在中心位置），只要置于中心的内容包含在元素中,那么内容的前后列不能够被添加前置或后置的兄弟元素。（i.e., it is perhaps more semantically correct to add an additional span as below, than it would to add an empty <div/> before and after）（记住，一定要给float元素添加width属性，否则它将不会浮动）

+ +

HTML 内容

+ +
<div class="example">
+<span id="floatme">"Floated Before" should be generated on the left of the
+viewport and not allow overflow in this line to flow under it. Likewise
+should "Floated After" appear on the right of the viewport and not allow this
+line to flow under it.</span>
+</div>
+ +

CSS 内容

+ +
#floatme { float: left; width: 50%; }
+
+/* To get an empty column, just indicate a hex code for a non-breaking space: \a0 as the content (use \0000a0 when following such a space with other characters) */
+.example::before {
+  content: "Floated Before";
+  float: left;
+  width: 25%
+}
+.example::after {
+  content: "Floated After";
+  float: right;
+  width:25%
+}
+
+/* For styling */
+.example::before, .example::after{
+  background: yellow;
+  color: red;
+}
+ +

输出

+ +

{{EmbedLiveSample("Notes")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}{{ Spec2('CSS4 Pseudo-Elements')}}No significant changes to the previous specification.
{{ Specname("CSS3 Transitions", "#animatable-properties", "") }}{{ Spec2("CSS3 Transitions")}}Allows transitions on properties defined on pseudo-elements.
{{ Specname("CSS3 Animations", "", "") }}{{ Spec2("CSS3 Animations")}}Allows animations on properties defined on pseudo-elements.
{{ SpecName('CSS3 Selectors', '#gen-content', '::before') }}{{ Spec2('CSS3 Selectors') }}Introduces the two-colon syntax.
{{ SpecName('CSS2.1', 'generate.html#before-after-content', '::before') }}{{ Spec2('CSS2.1') }}Initial definition, using the one-colon syntax
+ +

浏览器兼容性

+ + + + + +

{{Compat("css.selectors.before")}}

+ + + +
+ + + +
+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/_doublecolon_cue/index.html b/files/zh-cn/web/css/_doublecolon_cue/index.html new file mode 100644 index 0000000000..49610c7abc --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_cue/index.html @@ -0,0 +1,75 @@ +--- +title: '::cue (:cue)' +slug: 'Web/CSS/::cue' +tags: + - '::cue' + - WebVTT + - cue +translation_of: 'Web/CSS/::cue' +--- +
{{CSSRef}}
+ +

:: cue CSS伪元素匹配所选元素中的WebVTT提示。这可以用于在VTT轨道的媒体中使用字幕和其他线索。

+ +

只有CSS一小部分属性可以与 :: cue 伪元素一起使用：

+ + + +

属性应用于整个提示集，就像它们是单个单元一样。唯一的例外是背景及其简写属性可以单独应用于每个提示，以避免创建框并遮盖意外大面积的媒体。

+ +

语法

+ +

+{{csssyntax}}
+ +

示例

+ +

以下CSS设置提示样式，使文本为白色，背景为半透明黑盒。

+ +

+::cue {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+ +

规范

+ + + + + + + + + + + + + + +
规范状态注解
{{SpecName("WebVTT")}}{{Spec2("WebVTT")}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.cue")}}

+ +

参考

+ + diff --git a/files/zh-cn/web/css/_doublecolon_first-letter/index.html b/files/zh-cn/web/css/_doublecolon_first-letter/index.html new file mode 100644 index 0000000000..f679d5cdbf --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_first-letter/index.html @@ -0,0 +1,190 @@ +--- +title: '::first-letter (:first-letter)' +slug: 'Web/CSS/::first-letter' +translation_of: 'Web/CSS/::first-letter' +--- +

{{ CSSRef() }}

+ +

CSS 伪元素 ::first-letter会选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格） 。

+ +
/* Selects the first letter of a <p> */
+p::first-letter {
+  font-size: 130%;
+}
+ +

元素首字符并不总是很容易识别:

+ +

 

+ + + +

首行只在 block-container box内部才有意义, 因此 ::first-letter 伪元素 只在{{ cssxref("display") }}属性值为block, inline-block, table-cell, list-item 或者 table-caption的元素上才起作用. 其他情况下, ::first-letter 毫无意义.

+ +

 

+ +

允许的属性值

+ +

 

+ +

只有一小部分CSS可以在包含使用了::first-letter 伪元素选择器的CSS规则集声明块内运用:

+ + + +

当这个列表以后被实现时,  为了保持css不过时.建议你不要在声明块内使用任何其他属性.

+ +
+

对于 CSS 2, 伪元素采用单冒号前缀语法. 因为伪类也是同样的语法,所以使得两者难以区分. CSS2.1 改变了伪元素的前缀语法可以解决这个问题. 现在伪元素采用双冒号前缀, 并且伪类仍然采用单冒号前缀.

+ +

CSS2伪类单冒号语法已得到广泛支持时, 所有支持双冒号的浏览器同样也支持旧的单冒号语法.

+ +

考虑浏览器兼容性的话, :first-letter 是一个更有效的选择; 否则, ::first-letter 更受欢迎.

+
+ +

示例

+ +
/* 使每段开头的第一个字母变红变大 */
+
+p::first-letter {  /* 使用:first来兼容IE8- */
+  color: red;
+  font-size: 130%;
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}{{ Spec2('CSS4 Pseudo-Elements')}}允许属性的类型设置, 文本修适和内联布局属性, {{ cssxref("opacity") }} 以及 {{ cssxref("box-shadow") }}.
{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}{{ Spec2('CSS3 Text Decoration')}}可以对{{cssxref("text-shadow")}} 属性使用 ::first-letter.
{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}{{ Spec2('CSS3 Selectors') }}定义列表项的特殊行为, 或者是语言特定行为 (比如荷兰的Python). 伪元素的双冒号语法已经介绍过了.
{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}{{ Spec2('CSS2.1') }}没有重大改变, 而且 CSS2 仍然使用单冒号语法.
{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}{{ Spec2('CSS1') }}使用单冒号语法的初始定义.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1") }}9.07.01.0 (85)
Old one-colon syntax (:first-letter)1.0{{ CompatGeckoDesktop("1") }}5.53.51.0 (85)
Support for the Dutch digraph IJ{{ CompatNo() }}{{ CompatNo() }} {{ bug("92176") }} {{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("1") }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Old one-colon syntax (:first-letter){{ CompatUnknown() }}{{ CompatGeckoMobile("1") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Support for the Dutch digraph IJ{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/_doublecolon_first-line/index.html b/files/zh-cn/web/css/_doublecolon_first-line/index.html new file mode 100644 index 0000000000..efd48c6a39 --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_first-line/index.html @@ -0,0 +1,208 @@ +--- +title: '::first-line (:first-line)' +slug: 'Web/CSS/::first-line' +translation_of: 'Web/CSS/::first-line' +--- +

{{ CSSRef() }}

+ +

::first-line CSS pseudo-element （CSS伪元素）在某 block-level element （块级元素）的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。

+ +

和其他所有的 伪元素一样，::first-line 不能匹配任何真实存在的html元素。

+ +

 ::first-line 伪元素只能在块容器中,所以,::first-line伪元素只能在一个display值为block, inline-block, table-cell 或者 table-caption中有用.。在其他的类型中，::first-line 是不起作用的.

+ +

 

+ +

允许的属性值

+ +

 

+ +

在一个使用了 ::first-line 伪元素的选择器中，只有很小的一部分css属性能被使用：

+ + + +

这个列表将来可能会被扩展，但是推荐的是，你不要使用任何上述没有提到的属性。

+ +
+

在CSS 2中，伪元素是以 : 开头的。由于伪类也遵循同一规则，使得他们之间难以区分。为了解决这个问题，在CSS 2.1中，伪元素支持以 :: 开头。现在，使用伪元素时更推荐以 :: 开头，而使用伪类时使用 : 开头。

+ +

因为过去的浏览器都实现过CSS 2的规则，所以现在那些支持 :: 的浏览器通常同时也支持 : 的形式。

+ +

如果需要支持老旧的浏览器，那么:first-line 是唯一的选择，反之，更推荐使用::first-line。

+
+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ +

text-transform

+ +

将每个段落中的第一行字母转换成大写

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore.</p>
+ +

CSS

+ +
p::first-line { text-transform: uppercase }
+ +

输出

+ +

{{ EmbedLiveSample('text-transform', 250, 100) }}

+ +

margin-left

+ +

margin-left 在 first-line 伪元素上无效

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore.</p>
+ +

CSS

+ +
p::first-line { margin-left: 20px }
+ +

输出

+ +

{{ EmbedLiveSample('margin-left', 250, 100) }}

+ +

text-indent

+ +

text-indent 在 first-line 伪元素上无效

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+sed do eiusmod tempor incididunt ut labore.</p>
+ +

CSS

+ +
p::first-line { text-indent: 20px }
+ +

输出

+ +

{{ EmbedLiveSample('text-indent', 250, 100) }}

+ +

标准

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}{{ Spec2('CSS4 Pseudo-Elements')}}Defined more strictly where it can occur.
+ Generalized allowed properties to typesetting, text decoration and inline layout properties and {{ cssxref("opacity") }}
+ Defined the inheritance of ::first-letter.
{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}}{{ Spec2('CSS3 Text Decoration')}}Allowed the usage of {{cssxref("text-shadow")}} with ::first-letter.
{{ SpecName('CSS3 Selectors', '#first-line', '::first-line') }}{{ Spec2('CSS3 Selectors') }}The definition of what is the first line of an element has been reworded. The two-colon syntax for pseudo-elements has been introduced.
{{ SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line') }}{{ Spec2('CSS2.1') }}No significant change, though CSS Level 2 still used the one-colon syntax.
{{ SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line') }}{{ Spec2('CSS1') }}The initial definition used the one-colon syntax.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0 (buggy when using text-transform: issue 129669){{ CompatGeckoDesktop("1") }}9.07.01.0 (85) (buggy when using text-transform: issue 3409)
Old one-colon syntax (:first-line)1.0 (buggy when using text-transform: issue 129669){{ CompatGeckoDesktop("1") }}5.53.51.0 (85) (buggy when using text-transform: issue 3409)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("1") }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Old one-colon syntax (:first-line){{ CompatUnknown() }}{{ CompatGeckoMobile("1") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/_doublecolon_grammar-error/index.html b/files/zh-cn/web/css/_doublecolon_grammar-error/index.html new file mode 100644 index 0000000000..9c17a50e9b --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_grammar-error/index.html @@ -0,0 +1,97 @@ +--- +title: '::grammar-error' +slug: 'Web/CSS/::grammar-error' +translation_of: 'Web/CSS/::grammar-error' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

::grammar-error伪元素应用于浏览器标识为语法错误的文本段

+ +

只有一小部分的css能够应用在::grammar-error的选择器中

+ + + +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-grammar-error', '::grammar-error')}}{{Spec2('CSS4 Pseudo-Elements')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/zh-cn/web/css/_doublecolon_marker/index.html b/files/zh-cn/web/css/_doublecolon_marker/index.html new file mode 100644 index 0000000000..047033e75f --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_marker/index.html @@ -0,0 +1,91 @@ +--- +title: '::marker' +slug: 'Web/CSS/::marker' +translation_of: 'Web/CSS/::marker' +--- +
{{CSSRef}}
+ +

::marker CSS pseudo-element（CSS伪元素） 选中一个list item的marker box，后者通常含有一个项目符号或者数字。它作用在任何设置了display: list-item的元素或伪元素上，例如{{HTMLElement("li")}}和{{HTMLElement("summary")}}。

+ +
::marker {
+  color: blue;
+  font-size: 1.2em;
+}
+ +

允许的属性值

+ +

在将::marker作为选择器的规则中，只能使用某些CSS属性：

+ + + +
+

规范指出，将来可能会支持其他CSS属性。

+
+ +

语法

+ +
{{CSSSyntax}}
+ +

示例

+ +

HTML

+ +
<ul>
+  <li>Peaches</li>
+  <li>Apples</li>
+  <li>Plums</li>
+</ul>
+ +

CSS

+ +
ul li::marker {
+  color: red;
+  font-size: 1.5em;
+}
+ +

Result

+ +

{{EmbedLiveSample('示例')}}

+ +

标准

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}}{{Spec2('CSS4 Pseudo-Elements')}}No significant change.
{{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}{{Spec2('CSS3 Lists')}}Initial definition.
+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.selectors.marker")}}

+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/_doublecolon_part/index.html b/files/zh-cn/web/css/_doublecolon_part/index.html new file mode 100644 index 0000000000..6c2bbd1faa --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_part/index.html @@ -0,0 +1,126 @@ +--- +title: '::part()' +slug: 'Web/CSS/::part' +tags: + - '::part' + - CSS + - Draft + - Experimental + - NeedsBrowserCompatibility + - NeedsExample + - Pseudo-element + - Reference + - Selector +translation_of: 'Web/CSS/::part' +--- +
{{CSSRef}}
+ +

该 ::part CSS 伪元素 表示在 阴影树 中任何匹配 {{HTMLAttrxRef("part")}} 属性的元素。

+ +
custom-element::part(foo) {
+  /* 样式作用于 `foo` 部分 */
+}
+
+ +

语法

+ +
{{CSSSyntax}}
+ +

示例

+ +

HTML

+ +
<template id="tabbed-custom-element">
+<style type="text/css">
+*, ::before, ::after {
+  box-sizing: border-box;
+  padding: 1rem;
+}
+:host {
+  display: flex;
+}
+</style>
+<div part="tab active">Tab 1</div>
+<div part="tab">Tab 2</div>
+<div part="tab">Tab 3</div>
+</template>
+
+<tabbed-custom-element></tabbed-custom-element>
+ +

CSS

+ +
tabbed-custom-element::part(tab) {
+  color: #0c0dcc;
+  border-bottom: transparent solid 2px;
+}
+
+tabbed-custom-element::part(tab):hover {
+  background-color: #0c0d19;
+  border-color: #0c0d33;
+}
+
+tabbed-custom-element::part(tab):hover:active {
+  background-color: #0c0d33;
+}
+
+tabbed-custom-element::part(tab):focus {
+  box-shadow:
+    0 0 0 1px #0a84ff inset,
+    0 0 0 1px #0a84ff,
+    0 0 0 4px rgba(10, 132, 255, 0.3);
+}
+
+tabbed-custom-element::part(active) {
+  color: #0060df;
+  border-color: #0a84ff !important;
+}
+
+ +

JavaScript

+ +
let template = document.querySelector("#tabbed-custom-element");
+globalThis.customElements.define(template.id, class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(template.content);
+  }
+});
+
+ +

结果

+ +

{{EmbedLiveSample('Examples')}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName("CSS Shadow Parts", "#part", "::part")}}{{Spec2("CSS Shadow Parts")}}初始定义.
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.part")}}

+ +

相关阅读

+ + diff --git a/files/zh-cn/web/css/_doublecolon_placeholder/index.html b/files/zh-cn/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..959bd15c4c --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,169 @@ +--- +title: '::placeholder' +slug: 'Web/CSS/::placeholder' +translation_of: 'Web/CSS/::placeholder' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

伪元素::placeholder可以选择一个表单元素的占位文本，它允许开发者和设计师自定义占位文本的样式。

+ +
::placeholder {
+  color: red;
+  font-size: 1.5em;
+}
+ +

在使用了::placeholder伪元素的选择器中，仅有小一部分CSS属性可以使用，这个集合可以参考{{cssxref("::first-line")}}伪元素。

+ +

语法

+ +
{{csssyntax}}
+
+ +

示例

+ +

红色文本

+ +

HTML

+ +
<input placeholder="我是红色的！">
+ +

CSS

+ +
input::placeholder {
+  color: red;
+  font-size: 1.2em;
+  font-style: italic;
+}
+ +

结果

+ +

{{ EmbedLiveSample('红色文本') }}

+ +

绿色文本

+ +

 

+ +

HTML

+ +
<input placeholder="而我是绿色的！">
+ +

CSS

+ +
input::placeholder {
+  color: green;
+}
+ +

结果

+ +

{{EmbedLiveSample('绿色文本')}}

+ +

 

+ +

标准

+ + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}{{Spec2('CSS4 Pseudo-Elements')}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
功能ChromeFirefox (Gecko)EdgeInternet ExplorerOperaSafari
基本支持{{CompatChrome(57)}}{{CompatGeckoDesktop("51.0")}}[1]{{CompatNo}}{{CompatNo}}4410.1
前缀支持SupportedSupportedSupported10 -ms-Supported5 -webkit-
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
功能AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本支持{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatGeckoMobile("52.0")}}{{CompatNo}} 10.3
前缀支持SupportedSupportedSupported10 -ms-Supported5 -webkit-
+
+ +

[1] 在Gecko 51.0 {{geckoRelease("51.0")}} 以及更低的版本中，请使用 {{cssxref("::-moz-placeholder")}} 。

+ +

相似阅读

+ + diff --git a/files/zh-cn/web/css/_doublecolon_selection/index.html b/files/zh-cn/web/css/_doublecolon_selection/index.html new file mode 100644 index 0000000000..ca1232e10d --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_selection/index.html @@ -0,0 +1,105 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +tags: + - CSS + - Layout +translation_of: 'Web/CSS/::selection' +--- +

{{ CSSRef() }}

+ +

::selection CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。

+ +
::selection {
+  background-color: cyan;
+}
+
+ +

允许属性

+ +

只有一小部分CSS属性可以用于::selection 选择器：

+ + + +
+

要特别注意的是，{{ cssxref("background-image") }} 会如同其他属性一样被忽略。

+
+ +

语法

+ +
/* Legacy Firefox syntax (version 61 and below) */
+::-moz-selection
+
+{{CSSSyntax}}
+
+ +

示例

+ +

HTML

+ +
This text has special styles when you highlight it.
+<p>Also try selecting text in this paragraph.</p>
+ +

CSS

+ +
::-moz-selection {
+  color: gold;
+  background-color: red;
+}
+
+p::-moz-selection {
+  color: white;
+  background-color: blue;
+}
+ +
/* 选中的文本是红色背景，金黄色的字体 */
+::selection {
+  color: gold;
+  background-color: red;
+}
+
+/*选中的是蓝色背景，白色的字体的段落*/
+p::selection {
+  color: white;
+  background-color: blue;
+}
+ +

结果

+ +

{{EmbedLiveSample('示例')}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}{{ Spec2('CSS4 Pseudo-Elements')}}Initial specification
+ +
+

::selection CSS伪元素选择器是CSS第3级选择器的草案，但是在被推荐使用前就被废弃。它现在在第4级伪元素选择器草案中。

+
+ +

浏览器兼容性

+ +

{{Compat("css.selectors.selection")}}

diff --git a/files/zh-cn/web/css/_doublecolon_slotted/index.html b/files/zh-cn/web/css/_doublecolon_slotted/index.html new file mode 100644 index 0000000000..4380de3dea --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_slotted/index.html @@ -0,0 +1,106 @@ +--- +title: '::slotted()' +slug: 'Web/CSS/::slotted' +translation_of: 'Web/CSS/::slotted' +--- +
{{ CSSRef }}
+ +

:slotted() CSS 伪元素 用于选定那些被放在 HTML模板 中的元素 (更多请查看 使用模板和插槽).

+ +

这个伪类选择器仅仅适用于 影子节点树(Shadow Dom). 并且只会选择实际的元素节点， 而不包括文本节点.

+ +
/* Selects any element placed inside a slot */
+::slotted(*) {
+  font-weight: bold;
+}
+
+/* Selects any <span> placed inside a slot */
+::slotted(span) {
+  font-weight: bold;
+}
+
+ +

语法

+ +
{{csssyntax}}
+ +

样例

+ +

下面的小片段是关于 插槽伪类元素 小demo (点击查看实例).

+ +

在这个小demo 中, 我们使用一个带有3个插槽的HTML模板:

+ +
<template id="person-template">
+  <div>
+    <h2>Personal ID Card</h2>
+    <slot name="person-name">NAME MISSING</slot>
+    <ul>
+      <li><slot name="person-age">AGE MISSING</slot></li>
+      <li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
+    </ul>
+  </div>
+</template>
+ +

自定义元素 <person-details> 的定义如下:

+ +
customElements.define('person-details',
+  class extends HTMLElement {
+    constructor() {
+      super();
+      let template = document.getElementById('person-template');
+      let templateContent = template.content;
+
+      const shadowRoot = this.attachShadow({mode: 'open'});
+
+      let style = document.createElement('style');
+      style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' +
+                           'h2 { margin: 0 0 10px; }' +
+                           'ul { margin: 0; }' +
+                           'p { margin: 10px 0; }' +
+                           '::slotted(*) { color: gray; font-family: sans-serif; } ';
+
+      shadowRoot.appendChild(style);
+      shadowRoot.appendChild(templateContent.cloneNode(true));
+  }
+})
+ +

为了更好地区分未被成功填充的插槽和成功填充的插槽, 我们在CSS中选择了所有的插槽元素(::slotted(*)), 并填充了不一样的颜色和字体. 结果也是如此.

+ +

元素就像如下被填充了起来:

+ +
<person-details>
+  <p slot="person-name">Dr. Shazaam</p>
+  <span slot="person-age">Immortal</span>
+  <span slot="person-occupation">Superhero</span>
+</person-details>
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS Scope', '#slotted-pseudo', '::slotted') }}{{ Spec2('CSS Scope') }}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.slotted")}}

+ +

参考

+ + diff --git a/files/zh-cn/web/css/_doublecolon_spelling-error/index.html b/files/zh-cn/web/css/_doublecolon_spelling-error/index.html new file mode 100644 index 0000000000..fd89014d39 --- /dev/null +++ b/files/zh-cn/web/css/_doublecolon_spelling-error/index.html @@ -0,0 +1,64 @@ +--- +title: '::spelling-error' +slug: 'Web/CSS/::spelling-error' +translation_of: 'Web/CSS/::spelling-error' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

::spelling-error CSS 伪元素 表示浏览器标记为不正确拼写的文本段。

+ +
::spelling-error {
+  color: red;
+}
+ +

可用的属性

+ +

只有一小部分CSS属性可用于 ::spelling-error 伪元素选择器：

+ + + +

语法

+ +
::spelling-error
+ +

标准

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-spelling-error', '::spelling-error')}}{{Spec2('CSS4 Pseudo-Elements')}}Initial definition.
+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.selectors.spelling-error")}}

+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/actual_value/index.html b/files/zh-cn/web/css/actual_value/index.html new file mode 100644 index 0000000000..adb1d5529a --- /dev/null +++ b/files/zh-cn/web/css/actual_value/index.html @@ -0,0 +1,36 @@ +--- +title: 实际值 +slug: Web/CSS/actual_value +translation_of: Web/CSS/actual_value +--- +
{{CSSRef}}
+ +

概述

+ +

一个CSS属性的实际值（actual value）是应用值（used value）被应用后的近似值。例如，一个用户代理可能只能渲染一个整数像素值的边框（实际值），并且该值可能被强制近似于边框的计算宽度值。

+ +

规范

+ + + + + + + + + + + + + + + + +
规范版本评论
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}初始规范
+ +

相关

+ + diff --git a/files/zh-cn/web/css/adjacent_sibling_combinator/index.html b/files/zh-cn/web/css/adjacent_sibling_combinator/index.html new file mode 100644 index 0000000000..fdd38fc360 --- /dev/null +++ b/files/zh-cn/web/css/adjacent_sibling_combinator/index.html @@ -0,0 +1,84 @@ +--- +title: 相邻兄弟选择器 +slug: Web/CSS/Adjacent_sibling_combinator +tags: + - CSS + - Selectors +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父{{domxref("元素")}}的子元素，则第二个元素将被选中。

+ +
/* 图片后面紧跟着的段落将被选中 */
+img + p {
+  font-style: bold;
+}
+ +

语法

+ +
former_element + target_element { style properties }
+ +

示例

+ +

CSS

+ +
li:first-of-type + li {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li>One</li>
+  <li>Two!</li>
+  <li>Three</li>
+</ul>
+ +

结果

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}}重命名为： "next-sibling" combinator。
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}初始定义。
+ +

浏览器兼容性

+ +

{{Compat("css.selectors.adjacent_sibling")}}

+ +

参阅

+ + diff --git a/files/zh-cn/web/css/align-content/index.html b/files/zh-cn/web/css/align-content/index.html new file mode 100644 index 0000000000..90b3ecad1f --- /dev/null +++ b/files/zh-cn/web/css/align-content/index.html @@ -0,0 +1,294 @@ +--- +title: align-content +slug: Web/CSS/align-content +tags: + - CSS + - CSS 属性 + - 参考 +translation_of: Web/CSS/align-content +--- +
{{CSSRef("CSS Flexible Boxes")}}
+ +

CSS 的 align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。

+ +
{{EmbedInteractiveExample("pages/css/align-content.html")}}
+ + + +

该属性对单行弹性盒子模型无效。（即：带有 flex-wrap: nowrap）。

+ +

语法

+ +
/* 基本位置对齐 */
+/*align-content不采用左右值 */
+align-content: center;     /* 将项目放置在中点 */
+align-content: start;      /* 最先放置项目 */
+align-content: end;        /* 最后放置项目 */
+align-content: flex-start; /* 从起始点开始放置flex元素 */
+align-content: flex-end;   /* 从终止点开始放置flex元素 */
+
+/* 默认对齐 */
+align-content: normal;
+
+/*基线对齐*/
+align-content: baseline;
+align-content: first baseline;
+align-content: last baseline;
+
+/* 分布式对齐 */
+align-content: space-between; /* 均匀分布项目
+                                 第一项与起始点齐平，
+                                 最后一项与终止点齐平 */
+align-content: space-around;  /* 均匀分布项目
+                                 项目在两端有一半大小的空间*/
+align-content: space-evenly;  /* 均匀分布项目
+                                 项目周围有相等的空间 */
+align-content: stretch;       /* 均匀分布项目
+                                 拉伸‘自动’-大小的项目以充满容器 */
+
+/* 溢出对齐 */
+align-content: safe center;
+align-content: unsafe center;
+
+/* 全局属性 */
+align-content: inherit; /* 继承 */
+align-content: initial;  /* 初始值 */
+align-content: unset; /* 未设置 */
+
+ +

取值

+ +
+
start
+
所有行从容器的起始边缘开始填充。
+
end
+
所有行从容器的结束边缘开始填充。
+
+ +
+
flex-start
+
所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。
+
flex-end
+
所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。
+
center
+
所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。
+
normal
+
这些项按默认位置填充，就像没有设置对齐内容值一样。
+
+
baseline
+ first baseline
+ last baseline
+
+
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
+ The fallback alignment for first baseline is start, the one for last baseline is end.
+
space-between
+
所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。
+
space-around
+
所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
+
space-evenly
+
所有行沿垂直轴均匀分布在对齐容器内。每对相邻的项之间的间距，主开始边和第一项，以及主结束边和最后一项，都是完全相同的。
+
stretch
+
拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行。
+
safe
+
与对齐关键字一起使用。如果所选的关键字意味着项溢出对齐容器（data loss），则将采用备用策略对项进行对齐，就像启动了 start 对齐模式一样。
+
unsafe
+
与对齐关键字一起使用。无论元素和对齐容器的相对大小如何、是否会导致一些元素溢出可见范围（data loss），都使用给定的对齐值。
+
+ +

标准语法

+ +
{{csssyntax}}
+ +

示例

+ +

CSS

+ +
#container {
+  height:200px;
+  width: 240px;
+  align-content: center; /* Can be changed in the live sample */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div > div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}
+
+ +

HTML

+ +
<div id="container" class="flex">
+  <div id="item1">1</div>
+  <div id="item2">2</div>
+  <div id="item3">3</div>
+  <div id="item4">4</div>
+  <div id="item5">5</div>
+  <div id="item6">6</div>
+</div>
+
+<div class="row">
+  <label for="display">display: </label>
+  <select id="display">
+    <option value="flex">flex</option>
+    <option value="grid">grid</option>
+  </select>
+</div>
+
+<div class="row">
+  <label for="values">align-content: </label>
+  <select id="values">
+    <option value="normal">normal</option>
+    <option value="stretch">stretch</option>
+    <option value="flex-start">flex-start</option>
+    <option value="flex-end">flex-end</option>
+    <option value="center" selected>center</option>
+    <option value="space-between">space-between</option>
+    <option value="space-around">space-around</option>
+    <option value="space-evenly">space-evenly</option>
+
+    <option value="start">start</option>
+    <option value="end">end</option>
+    <option value="left">left</option>
+    <option value="right">right</option>
+
+    <option value="baseline">baseline</option>
+    <option value="first baseline">first baseline</option>
+    <option value="last baseline">last baseline</option>
+
+    <option value="safe center">safe center</option>
+    <option value="unsafe center">unsafe center</option>
+    <option value="safe right">safe right</option>
+    <option value="unsafe right">unsafe right</option>
+    <option value="safe end">safe end</option>
+    <option value="unsafe end">unsafe end</option>
+    <option value="safe flex-end">safe flex-end</option>
+    <option value="unsafe flex-end">unsafe flex-end</option>
+  </select>
+</div>
+
+ + + +

结果

+ +

{{EmbedLiveSample("示例", 260, 290)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}{{Spec2("CSS3 Box Alignment")}}添加了 space-evenly, [ first | last ]? baseline, start, end, left, 和 right 的属性值.
{{SpecName("CSS3 Flexbox", "#align-content", "align-content")}}{{Spec2("CSS3 Flexbox")}}初始定义
+ +
{{cssinfo}}
+ +

浏览器兼容性

+ + + +

在弹性盒子布局中的兼容性

+ +

{{Compat("css.properties.align-content.flex_context")}}

+ +

在网格布局中的兼容性

+ +

{{Compat("css.properties.align-content.grid_context")}}

+ +

相关链接

+ + + +
+
+
diff --git a/files/zh-cn/web/css/align-items/index.html b/files/zh-cn/web/css/align-items/index.html new file mode 100644 index 0000000000..c534cc0d2b --- /dev/null +++ b/files/zh-cn/web/css/align-items/index.html @@ -0,0 +1,287 @@ +--- +title: align-items +slug: Web/CSS/align-items +tags: + - CSS + - CSS Flexible Boxes + - CSS 属性 + - 参考 +translation_of: Web/CSS/align-items +--- +
{{ CSSRef}}
+ +
+ +

CSS align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。

+ +
{{EmbedInteractiveExample("pages/css/align-items.html")}}
+ + + +

目前，Flexbox和CSS网格布局支持此属性。在Flexbox中，它控制十字轴上项目的对齐方式，在网格布局中，它控制块轴上项目的对齐方式。

+ +

语法

+ +
/* Basic keywords */
+align-items: normal;
+align-items: stretch;
+
+/* Positional alignment */
+align-items: center; /* Pack items around the center */
+align-items: start; /* Pack items from the start */
+align-items: end; /* Pack items from the end */
+align-items: flex-start; /* Pack flex items from the start */
+align-items: flex-end; /* Pack flex items from the end */
+align-items: self-start;
+align-items: self-end;
+
+/* Baseline alignment */
+align-items: baseline;
+align-items: first baseline;
+align-items: last baseline; /* Overflow alignment (for positional alignment only) */
+align-items: safe center;
+align-items: unsafe center;
+
+/* Global values */
+align-items: inherit;
+align-items: initial;
+align-items: unset;
+ +

取值

+ +
+
normal
+
这个关键字的效果取决于我们处在什么布局模式中： +
    +
  • 在绝对定位的布局中，对于被替代的绝对定位盒子，这个效果和start?的效果的一样；对于其他所有绝对定位的盒子，这个效果和stretch的效果一样。 
    • +
  • 在绝对定位布局的静态位置上，效果和stretch一样。
    • +
  • 对于那些弹性项目而言，效果和stretch一样。
    • +
  • 对于那些网格项目而言，效果和stretch一样，除了有部分比例或者一个固定大小的盒子的效果像start。
    • +
  • 这个属性不适用于会计盒子和表格。
    • +
+
+
+ +
+
flex-start
+
元素向侧轴起点对齐。
+
flex-end
+
元素向侧轴终点对齐。
+
start
+
The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.
+
end
+
The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.
+
center
+
元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
+
left
+
The items are packed flush to each other toward the left edge of the alignment container. If the property’s axis is not parallel with the inline axis, this value behaves like start.
+
right
+
The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property’s axis is not parallel with the inline axis, this value behaves like start.
+
self-start
+
The items is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
+
self-end
+
The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
+
baseline
+
first baseline
+ last baseline
+
所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。
+
stretch
+
弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
+
safe
+
Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start.
+
unsafe
+
Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.
+
+

语法格式

+
+
+ +
{{csssyntax}}
+
+ +

示例

+ +

CSS

+ +
#container {
+  height:200px;
+  width: 240px;
+  align-items: center; /* Can be changed in the live sample */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div > div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}
+ +

HTML

+ +
<div id="container" class="flex">
+  <div id="item1">1</div>
+  <div id="item2">2</div>
+  <div id="item3">3</div>
+  <div id="item4">4</div>
+  <div id="item5">5</div>
+  <div id="item6">6</div>
+</div>
+
+<div class="row">
+  <label for="display">display: </label>
+  <select id="display">
+    <option value="flex">flex</option>
+    <option value="grid">grid</option>
+  </select>
+</div>
+
+<div class="row">
+  <label for="values">align-items: </label>
+  <select id="values">
+    <option value="normal">normal</option>
+    <option value="flex-start">flex-start</option>
+    <option value="flex-end">flex-end</option>
+    <option value="center" selected>center</option>
+    <option value="baseline">baseline</option>
+    <option value="stretch">stretch</option>
+
+    <option value="start">start</option>
+    <option value="end">end</option>
+    <option value="self-start">self-start</option>
+    <option value="self-end">self-end</option>
+    <option value="left">left</option>
+    <option value="right">right</option>
+
+    <option value="first baseline">first baseline</option>
+    <option value="last baseline">last baseline</option>
+
+    <option value="safe center">safe center</option>
+    <option value="unsafe center">unsafe center</option>
+    <option value="safe right">safe right</option>
+    <option value="unsafe right">unsafe right</option>
+    <option value="safe end">safe end</option>
+    <option value="unsafe end">unsafe end</option>
+    <option value="safe self-end">safe self-end</option>
+    <option value="unsafe self-end">unsafe self-end</option>
+    <option value="safe flex-end">safe flex-end</option>
+    <option value="unsafe flex-end">unsafe flex-end</option>
+  </select>
+</div>
+
+ + + +

Result

+ +

{{EmbedLiveSample("Examples", "260px", "290px")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName("CSS3 Box Alignment", "#propdef-align-items", "align-items")}}{{Spec2("CSS3 Box Alignment")}}Update to latest syntax definitions.
{{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

在弹性盒子布局中的兼容性

+ +

{{Compat("css.properties.align-items.flex_context")}}

+ +

在网格布局中的兼容性

+ +

{{Compat("css.properties.align-items.grid_context")}}

+ +

相关链接

+ + diff --git a/files/zh-cn/web/css/align-self/index.html b/files/zh-cn/web/css/align-self/index.html new file mode 100644 index 0000000000..757f5d48bc --- /dev/null +++ b/files/zh-cn/web/css/align-self/index.html @@ -0,0 +1,171 @@ +--- +title: align-self +slug: Web/CSS/align-self +tags: + - CSS + - CSS 属性 + - flexbox + - grid + - 参考 +translation_of: Web/CSS/align-self +--- +
{{CSSRef}}
+ +

CSS 属性 align-self 会对齐当前 grid 或 flex 行中的元素，并覆盖已有的 align-items 的值。In Grid, it aligns the item inside the grid area. 在 Flexbox 中，会按照 cross axis（当前 flex 元素排列方向的垂直方向）进行排列。

+ +
{{EmbedInteractiveExample("pages/css/align-self.html")}}
+ + + +

align-self属性不适用于块类型的盒模型和表格单元。如果任何 flexbox 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。

+ +

语法

+ +
/* Keyword values */
+align-self: auto;
+align-self: normal;
+
+/* Positional alignment */
+/* align-self does not take left and right values */
+align-self: center; /* Put the item around the center */
+align-self: start;  /* Put the item at the start */
+align-self: end;    /* Put the item at the end */
+align-self: self-start; /* Align the item flush at the start */
+align-self: self-end;   /* Align the item flush at the end */
+align-self: flex-start; /* Put the flex item at the start */
+align-self: flex-end;   /* Put the flex item at the end */
+
+/* Baseline alignment */
+align-self: baseline;
+align-self: first baseline;
+align-self: last baseline;
+align-self: stretch; /* Stretch 'auto'-sized items to fit the container */
+
+/* Overflow alignment */
+align-self: safe center;
+align-self: unsafe center;
+
+/* Global values */
+align-self: inherit;
+align-self: initial;
+align-self: unset;
+ +

值

+ +
+
auto
+
设置为父元素的 {{cssxref("align-items") }} 值。
+
normal
+
+ +
+
效果取决于当前的布局模式:
+
+
    +
  • 绝对定位布局中，normal在绝对定位的替代元素上表现为start，在所有其他绝对定位元素上表现为stretch。
    • +
  • 在绝对定位的静态元素上表现为stretch。
    • +
  • flex布局中表现为stretch。
    • +
  • For grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.
    • +
  • 在块级和表格单元中无效。
    • +
+
+
self-start
+
Aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis.
+
self-end
+
Aligns the items to be flush with the edge of the alignment container corresponding to the item's end side in the cross axis.
+
flex-start
+
flex 元素会对齐到 cross-axis 的首端。
+
flex-end
+
flex 元素会对齐到 cross-axis 的尾端。
+
center
+
flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 尺寸大于 flex 容器，将在两个方向均等溢出。
+
baseline
+ first baseline
+ last baseline
+
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
+ The fallback alignment for first baseline is start, the one for last baseline is end.
+
flex 元素将会基于容器的宽和高，按照自身 margin box 的 cross-size 拉伸。If the combined size of the items along the cross axis is less than the size of the alignment container and the item is auto-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by {{cssxref("max-height")}}/{{cssxref("max-width")}} (or equivalent functionality), so that the combined size of all auto-sized items exactly fills the alignment container along the cross axis.
+
safe
+
If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start.
+
unsafe
+
Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.
+
+ +

形式化语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<section>
+  <div>Item #1</div>
+  <div>Item #2</div>
+  <div>Item #3</div>
+</section>
+ +

CSS

+ +
section {
+  display: flex;
+  align-items: center;
+  height: 120px;
+  background: beige;
+}
+
+div {
+  height: 60px;
+  background: cyan;
+  margin: 5px;
+}
+
+div:nth-child(3) {
+  align-self: flex-end;
+  background: pink;
+}
+ +

结果

+ +

{{EmbedLiveSample('Example')}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{ SpecName('CSS3 Box Alignment', '#align-self-property', 'align-self') }}{{ Spec2('CSS3 Box Alignment') }}
+ +

浏览器兼容性

+ + + +

在 Flex 布局中的兼容性

+ +

{{Compat("css.properties.align-self.flex_context")}}

+ +

在 Grid 布局中的兼容性

+ +

{{Compat("css.properties.align-self.grid_context")}}

+ +

参考

+ + diff --git a/files/zh-cn/web/css/all/index.html b/files/zh-cn/web/css/all/index.html new file mode 100644 index 0000000000..dfb89ccb9e --- /dev/null +++ b/files/zh-cn/web/css/all/index.html @@ -0,0 +1,173 @@ +--- +title: all +slug: Web/CSS/all +tags: + - CSS +translation_of: Web/CSS/all +--- +

{{CSSRef}}

+ +

CSS all 简写属性 将除却 {{cssxref("unicode-bidi")}} 与 {{cssxref("direction")}} 之外的所有属性重设至其初始值，或继承值。

+ +
{{EmbedInteractiveExample("pages/css/all.html")}}
+ + + +

语法

+ +
/* Global values */
+all: initial
+all: inherit
+all: unset
+
+/* CSS Cascading and Inheritance Level 4 */
+all: revert;
+
+ +

all 属性is specified as one of the CSS 全局 keyword values. Note that none of these values affect the {{cssxref("unicode-bidi")}} 与 {{cssxref("direction")}} 这两个属性。

+ +

取值

+ +
+
{{cssxref("initial")}}
+
该关键字代表改变该元素或其父元素的所有属性至初始值。
+
{{cssxref("inherit")}}
+
该关键字代表改变该元素或其父元素的所有属性的值至他们的父元素属性的值。inherited values
+
{{cssxref("unset")}}
+
该关键字代表如果该元素的属性的值是可继承的，则改变该元素或该元素的父元素的所有属性的值为他们父元素的属性值，反之则改变为初始值。
+
{{cssxref("revert")}}
+
指定依赖于声明所属的样式表原点的行为： +
+
User-agent origin
+
相当于 unset
+
User origin
+
将层叠回滚到用户代理级别，以便计算指定的值，就好像没有为该元素指定作者级别或用户级别规则。
+
Author origin
+
将层叠回滚到用户级别，以便计算指定的值，就好像没有为元素指定作者级规则。出于revert的目的，“作者”原点包括“覆盖”和“动画”原点。
+
+
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<blockquote id="quote">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</blockquote>
+Phasellus eget velit sagittis.
+
+ +

CSS

+ +
body {
+  font-size: small;
+  background-color: #F0F0F0;
+  color: blue;
+}
+
+blockquote {
+  background-color: skyblue;
+  color: red;
+}
+
+ +

结果

+ +
+

没有 all 属性

+ + + + +{{EmbedLiveSample("ex0", "200", "125")}} + +

{{HTMLElement("blockquote")}} 使用浏览器默认样式，以及另外的定义的背景色与文字颜色。它是一个 block 元素：它之后的文字位于它的下方。

+
+ +
+

all:unset

+ + + + +{{EmbedLiveSample("ex1", "200", "125")}} + +

{{HTMLElement("blockquote")}} 没有使用浏览器默认样式：它现在是一个 inline 元素(初始值)，其 {{cssxref("background-color")}} 为 transparent (初始值)，但其 {{cssxref("font-size")}} 仍为 small (继承值) ，其 {{cssxref("color")}} 为 blue (继承值)。

+
+ +
+

all:initial

+ + + + +{{EmbedLiveSample("ex2", "200", "125")}} + +

{{HTMLElement("blockquote")}} 没有使用浏览器默认样式：它现在是一个 inline 元素(初始值)，其 {{cssxref("background-color")}} 为 transparent (初始值)，其 {{cssxref("font-size")}} 为 normal (初始值)，其 {{cssxref("color")}} 为 black(初始值)。

+
+ +
+

all:inherit

+ + + + +{{EmbedLiveSample("ex3", "200", "125")}} + +

{{HTMLElement("blockquote")}} 没有使用浏览器默认样式：它现在是一个 block 元素（继承自其父元素 {{HTMLElement("body")}}），其 {{cssxref("background-color")}} 为 transparent (继承值)，其 {{cssxref("font-size")}} 为 small (继承值) ，其 {{cssxref("color")}} 为 blue (继承值)。

+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{ SpecName('CSS4 Cascade', '#all-shorthand', 'all') }}{{ Spec2('CSS4 Cascade') }}添加属性值 revert。
{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}{{ Spec2('CSS3 Cascade') }}初始定义。
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.all")}}

+ +

参见

+ +

CSS 通用属性值： {{cssxref("initial")}}, {{cssxref("inherit")}} and {{cssxref("unset")}}.

diff --git a/files/zh-cn/web/css/all_about_the_containing_block/index.html b/files/zh-cn/web/css/all_about_the_containing_block/index.html new file mode 100644 index 0000000000..bf35aa8c04 --- /dev/null +++ b/files/zh-cn/web/css/all_about_the_containing_block/index.html @@ -0,0 +1,268 @@ +--- +title: 布局和包含块 +slug: Web/CSS/All_About_The_Containing_Block +tags: + - CSS + - CSS Position + - Containers + - Guide + - Layout + - Position + - Style + - blocks + - containing block + - size +translation_of: Web/CSS/Containing_block +--- +

{{cssref}}

+ +

一个元素的尺寸和位置经常受其包含块(containing block)的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。在本文中，我们来过一遍确定包含块的所有因素。

+ +

当一个客户端代理（比如说浏览器）展示一个文档的时候，对于每一个元素，它都产生了一个盒子。每一个盒子都被划分为四个区域：

+ +
    +
  1. 内容区
    2. +
  2. 内边距区
    3. +
  3. 边框区
    4. +
  4. 外边距区
    5. +
+ +

Diagram of the box model

+ +

许多开发者认为一个元素的包含块就是他的父元素的内容区。但事实并非如此。接下来让我们来看看，确定元素包含块的因素都有哪些。

+ +

包含块的影响

+ +

在学习如何确定元素包含块之前，先了解一下它的重要性。

+ +

元素的尺寸及位置，常常会受它的包含块所影响。对于一些属性，例如 {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}}，绝对定位元素的偏移值 （比如 {{cssxref("position")}} 被设置为 absolute 或 fixed），当我们对其赋予百分比值时，这些值的计算值，就是通过元素的包含块计算得来。

+ +

确定包含块

+ +

确定一个元素的包含块的过程完全依赖于这个元素的 {{cssxref("position")}} 属性：

+ +
    +
  1. 如果 position 属性为 static 、 relative 或 sticky，包含块可能由它的最近的祖先块元素（比如说inline-block, block 或 list-item元素）的内容区的边缘组成，也可能会建立格式化上下文(比如说 a table container, flex container, grid container, 或者是 the block container 自身)。
    2. +
  2. 如果 position 属性为 absolute ，包含块就是由它的最近的 position 的值不是 static （也就是值为fixed, absolute, relative 或 sticky）的祖先元素的内边距区的边缘组成。
    3. +
  3. 如果 position 属性是 fixed，在连续媒体的情况下(continuous media)包含块是 {{glossary("viewport")}} ,在分页媒体(paged media)下的情况下包含块是分页区域(page area)。
    4. +
  4. 如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的： +
      +
    1.  {{cssxref("transform")}} 或 {{cssxref("perspective")}} 的值不是 none
      2. +
    2.  {{cssxref("will-change")}} 的值是 transform 或 perspective
      3. +
    3.  {{cssxref("filter")}} 的值不是 none 或 will-change 的值是 filter(只在 Firefox 下生效).
      4. +
    4.  {{cssxref("contain")}} 的值是 paint (例如: contain: paint;)
      5. +
    +
    5. +
+ +
+

注意: 根元素(<html>)所在的包含块是一个被称为初始包含块的矩形。他的尺寸是视口 viewport (for continuous media) 或分页媒体 page media (for paged media).

+
+ +

根据包含块计算百分值

+ +

如上所述，如果某些属性被赋予一个百分值的话，它的计算值是由这个元素的包含块计算而来的。这些属性包括盒模型属性和偏移属性：

+ +
    +
  1. 要计算 {{cssxref("height")}} {{cssxref("top")}} 及 {{cssxref("bottom")}} 中的百分值，是通过包含块的 height 的值。如果包含块的 height 值会根据它的内容变化，而且包含块的 position 属性的值被赋予 relative 或 static ，那么，这些值的计算值为 auto。
    2. +
  2. 要计算 {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, {{cssxref("margin")}} 这些属性由包含块的 width 属性的值来计算它的百分值。
    3. +
+ +

示例

+ +

接下来的示例，都使用如下 HTML 代码:

+ +
<body>
+  <section>
+    <p>This is a paragraph!</p>
+  </section>
+</body>
+ +

下面的示例，只有 CSS 不同。

+ +

Example 1

+ +

这个示例中，P 标签设置为静态定位，所以它的包含块为 <section> ，因为距离最近的父节点即是她的包含块。

+ + + +
body {
+  background: beige;
+}
+
+section {
+  display: block;
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  width: 50%;   /* == 400px * .5 = 200px */
+  height: 25%;  /* == 160px * .25 = 40px */
+  margin: 5%;   /* == 400px * .05 = 20px */
+  padding: 5%;  /* == 400px * .05 = 20px */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Example_1','100%','300')}}

+ +

Example 2

+ +

在这个示例中，P 标签的包含块为 <body> 元素，因为 <section> 不再是一个块容器，所以并没有形成一个格式上下文。

+ + + +
body {
+  background: beige;
+}
+
+section {
+  display: inline;
+  background: lightgray;
+}
+
+p {
+  width: 50%;     /* == half the body's width */
+  height: 200px;  /* Note: a percentage would be 0 */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Example_2','100%','300')}}

+ +

Example 3

+ +

这个示例中，P 元素的包含块是 <section>，因为 <section> 的 position 为 absolute 。P 元素的百分值会受其包含块的 padding 所影响。不过，如果包含块的 {{cssxref("box-sizing")}} 值设置为 border-box ，就没有这个问题。

+ + + +
body {
+  background: beige;
+}
+
+section {
+  position: absolute;
+  left: 30px;
+  top: 30px;
+  width: 400px;
+  height: 160px;
+  padding: 30px 20px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
+  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
+  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
+  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Example_3','100%','300')}}

+ +

Example 4

+ +

这个示例中，P 元素的 position 为 fixed，所以它的包含块就是初始包含块（在屏幕上，也就是 viewport）。这样的话，P 元素的尺寸大小，将会随着浏览器窗框大小的变化，而变化。

+ + + +
body {
+  background: beige;
+}
+
+section {
+  width: 400px;
+  height: 480px;
+  margin: 30px;
+  padding: 15px;
+  background: lightgray;
+}
+
+p {
+  position: fixed;
+  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
+  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
+  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
+  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Example_4','100%','300')}}

+ +

Example 5

+ +

这个示例中，P 元素的 position 为 absolute，所以它的包含块是 <section>，也就是距离它最近的一个 transform 值不为 none 的父元素。

+ + + +
body {
+  background: beige;
+}
+
+section {
+  transform: rotate(0deg);
+  width: 400px;
+  height: 160px;
+  background: lightgray;
+}
+
+p {
+  position: absolute;
+  left: 80px;
+  top: 30px;
+  width: 50%;   /* == 200px */
+  height: 25%;  /* == 40px */
+  margin: 5%;   /* == 20px */
+  padding: 5%;  /* == 20px */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('Example_5','100%','300')}}

+ +

另见

+ + diff --git a/files/zh-cn/web/css/alternative_style_sheets/index.html b/files/zh-cn/web/css/alternative_style_sheets/index.html new file mode 100644 index 0000000000..1d5d3c0cd7 --- /dev/null +++ b/files/zh-cn/web/css/alternative_style_sheets/index.html @@ -0,0 +1,110 @@ +--- +title: Alternative style sheets +slug: Web/CSS/Alternative_style_sheets +translation_of: Web/CSS/Alternative_style_sheets +--- +
{{cssref}}
+ +

Specifying alternative style sheets in a web page provides a way for users to see multiple versions of a page, based on their needs or preferences.

+ +

在网页中指定可替代样式表允许用户为网页选择他们喜欢的样式。

+ +

Firefox lets the user select the stylesheet using the View > Page Style submenu. Internet Explorer also supports this feature (beginning with IE 8), also accessed from View > Page Style. Chrome requires an extension to use the feature (as of version 48). The web page can also provide its own user interface to let the user switch styles.

+ +

Firefox允许用户通过菜单栏中 查看 > 页面样式 选择样式表。Internet Explorer也支持这一功能（从IE8开始）（菜单栏 查看 > 页面样式）。网页也可提供自己的用户界面让用户

+ +

在Firefox和Internet Explorer（从IE8（6？）开始）中，用户可以通过菜单栏中的 查看 > 页面样式 来选择网页的样式。网页也可以提供选择样式的界面。

+ +

An example: specifying the alternative stylesheets

+ +

示例：提供可替代样式表

+ +

The alternate stylesheets are commonly specified using a {{HTMLElement("link")}} element with rel="alternate stylesheet" and title="..." attributes. For example:

+ +

一般使用<{{HTMLElement("link")}}>指定可替换样式表。在这个标签中指定rel="alternate stylesheet" 属性和 title="..."属性

+ +
<link href="reset.css" rel="stylesheet" type="text/css">
+
+<link href="default.css" rel="stylesheet" type="text/css" title="Default Style">
+<link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
+<link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">
+
+ +

In this example, the styles "Default Style", "Fancy", and "Basic" will be listed in the Page Style submenu, with "Default Style" pre-selected. When the user selects a different style, the page will immediately be re-rendered using that style sheet.

+ +

在此例中，“页面样式”菜单中会出现“Default Style”、“Fancy”和“Basic”的选项。“Default Style”默认选中。如果用户选择一个不同的样式，浏览器就使用用户选择的样式。

+ +

No matter what style is selected, the rules from the reset.css stylesheet will always be applied.

+ +

无论用户选择何种样式， reset.css 总会被应用。

+ +

尝试

+ +

Click here for a working example you can try out.

+ +

点击此处进入示例。

+ +

细节

+ +

网页中的样式表分为三类：

+ + + +

Any stylesheet in a document falls into one of the following categories:

+ + + +

When style sheets are referenced with a title attribute on the {{HTMLElement("link", "<link rel=\"stylesheet\">")}} or {{HTMLElement("style")}} element, the title becomes one of the choices offered to the user. Style sheets linked with the same title are part of the same choice. Style sheets linked without a title attribute are always applied.

+ +

Use rel="stylesheet" to link to the default style, and rel="alternate stylesheet" to link to alternative style sheets. This tells the browser which style sheet title should be selected by default, and makes that default selection apply in browsers that do not support alternate style sheets.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#rel-alternate', 'link type "alternate"')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML WHATWG', '#link-type-stylesheet', 'link type "stylesheet"')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML WHATWG', '#attr-style-title', 'the "title" attribute for the style element')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML WHATWG', '#attr-meta-http-equiv-default-style', 'meta http-equiv="default-style")')}}{{Spec2('HTML WHATWG')}}
{{SpecName('CSSOM', '#css-style-sheet-collections', 'CSS Style Sheet Collections')}}{{Spec2('CSSOM')}}The CSS OM specification defines the concepts of the style sheet set name, its disabled flag, and the preferred CSS style sheet set name.
+ It defines how these are determined, and lets the HTML specification define the HTML-specific behaviors by requiring it to define when to create a CSS style sheet.
{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}{{Spec2("HTML4.01")}}Earlier, the HTML specification itself defined the concept of preferred and alternate stylesheets.
+ +

{{Compat("html.elements.link.rel.alternate_stylesheet")}}

diff --git a/files/zh-cn/web/css/angle-percentage/index.html b/files/zh-cn/web/css/angle-percentage/index.html new file mode 100644 index 0000000000..44fee543f8 --- /dev/null +++ b/files/zh-cn/web/css/angle-percentage/index.html @@ -0,0 +1,52 @@ +--- +title: +slug: Web/CSS/angle-percentage +translation_of: Web/CSS/angle-percentage +--- +
 
+ +
 
+ +
{{CSSRef}}
+ +

CSS数据类型 <angle-percentage> 代表了一种既可以是 {{Cssxref("angle")}} ，也可以是{{Cssxref("percentage")}}的数据类型

+ +

 

+ +

语法

+ +

有关此类型的详细文档，请参阅 {{Cssxref("angle")}} 和 {{Cssxref("percentage")}} 

+ +

在calc()中使用这个类型

+ +

当 <angle-percentage> 被正确定义后，它就代表了一个可以被 {{Cssxref("calc()")}} 表达式解析的角度 

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Values', '#mixed-percentages', '<angle-percentage>')}}{{Spec2('CSS4 Values')}} 
{{SpecName('CSS3 Values', '#mixed-percentages', '<angle-percentage>')}}{{Spec2('CSS3 Values')}}Defines <angle-percentage>. Adds calc()
+ +

浏览器兼容性

+ + + +

{{Compat("css.types.angle-percentage")}}

diff --git a/files/zh-cn/web/css/angle/index.html b/files/zh-cn/web/css/angle/index.html new file mode 100644 index 0000000000..e71ae6f8c5 --- /dev/null +++ b/files/zh-cn/web/css/angle/index.html @@ -0,0 +1,77 @@ +--- +title: +slug: Web/CSS/angle +translation_of: Web/CSS/angle +--- +
{{ CSSRef() }}
+ +

CSS 数据类型 <angle> 用于表示角的大小，单位为度（degrees）、 百分度（gradians）、弧度（radians）或圈数（turns）。在 {{cssxref("<gradient>")}} 和 {{cssxref("transform")}} 的某些方法等场景中有所应用。

+ +

语法

+ +

<angle> 数据类型由 {{cssxref("<number>")}} 和下列单位组成。数字与单位之间没有空格。数字为0时，单位可以省略。

+ +

<angle> 可以使用 + 或 - 开头。正数表示顺时针的角，负数表示逆时针的角。对于静态的角，同样的角度可以使用任意等效的值表示。比如 90deg 等于 -270deg，1turn 等于 4turn。而对于动态的角，比如应用了 {{cssxref("animation")}} 或 {{cssxref("transition")}} 时，显示效果则不一样。

+ +

单位

+ +
+
deg
+
度。一个完整的圆是 360deg。例：0deg，90deg，14.23deg。
+
grad
+
百分度。一个完整的圆是 400grad。例：0grad，100grad，38.8grad。
+
rad
+
弧度。一个完整的圆是 2π 弧度，约等于 6.2832rad。1rad 是 180/π 度。例：0rad，1.0708rad，6.2832rad。
+
turn
+
圈数。一个完整的圆是 1turn。例：0turn，0.25turn，1.2turn。
+
+ +

示例

+ + + + + + + + + + + + + + + + + + + + +
Angle90.png +

直角：90deg = 100grad = 0.25turn ≈ 1.5708rad

+
Angle180.png平角：180deg = 200grad = 0.5turn ≈ 3.1416rad
AngleMinus90.png直角（逆时针）：-90deg = -100grad = -0.25turn ≈ -1.5708rad
Angle0.png +

零角：0 = 0deg = 0grad = 0turn = 0rad

+
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Values', '#angles', '<angle>') }}{{ Spec2('CSS3 Values') }}Initial definition
+ +

浏览器兼容性

+ +

{{Compat("css.types.angle")}}

diff --git a/files/zh-cn/web/css/animation-delay/index.html b/files/zh-cn/web/css/animation-delay/index.html new file mode 100644 index 0000000000..979bfa800c --- /dev/null +++ b/files/zh-cn/web/css/animation-delay/index.html @@ -0,0 +1,79 @@ +--- +title: animation-delay +slug: Web/CSS/animation-delay +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-delay +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

概述

+ +

animation-delay CSS属性定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。

+ +

0s是该属性的默认值，代表动画在应用到元素上后立即开始执行。否则，该属性的值代表动画样式应用到元素上后到开始执行前的时间长度；

+ +

定义一个负值会让动画立即开始。但是动画会从它的动画序列中某位置开始。例如，如果设定值为-1s，动画会从它的动画序列的第1秒位置处立即开始。

+ +

如果为动画延迟指定了一个负值，但起始值是隐藏的，则从动画应用于元素的那一刻起就获取起始值。

+ +

通常用{{cssxref("animation")}}简写属性一次性设置动画效果较为方便。

+ +

{{cssinfo}}

+ +

语法

+ +
animation-delay: 3s;
+animation-delay: 2s, 4ms;
+
+ +

值

+ +
+
<time>
+
从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(s)和毫秒(ms)。如果未设置单位，定义无效。
+
+ +

正式语法

+ +
{{csssyntax("animation-delay")}}
+ +

示例

+ +

参见CSS animations

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Animations', '#animation-delay', 'animation-delay')}}{{Spec2('CSS3 Animations')}}
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.animation-delay")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/animation-direction/index.html b/files/zh-cn/web/css/animation-direction/index.html new file mode 100644 index 0000000000..34194446db --- /dev/null +++ b/files/zh-cn/web/css/animation-direction/index.html @@ -0,0 +1,83 @@ +--- +title: animation-direction +slug: Web/CSS/animation-direction +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-direction +--- +
{{CSSRef}}
+ +
{{SeeCompatTable}}
+ +

概述

+ +

animation-direction CSS 属性指示动画是否反向播放，它通常在简写属性{{cssxref("animation")}}中设定

+ +

{{cssinfo}}

+ +

语法

+ +
Formal syntax:  {{csssyntax("animation-direction")}}
+
+ +
animation-direction: normal
+animation-direction: reverse
+animation-direction: alternate
+animation-direction: alternate-reverse
+animation-direction: normal, reverse
+animation-direction: alternate, reverse, normal
+
+ +

值

+ +
+
normal
+
每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
+
alternate
+
动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
+
reverse
+
反向运行动画，每周期结束动画由尾到头运行。
+
alternate-reverse
+
反向交替， 反向开始交替
+
动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。
+
+ +

例子

+ +

See CSS animations for examples.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Animations', '#animation-direction', 'animation-direction')}}{{Spec2('CSS3 Animations')}}For the two new values, see the W3C discussion.
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.animation-direction")}}

+ +

更多

+ + diff --git a/files/zh-cn/web/css/animation-duration/index.html b/files/zh-cn/web/css/animation-duration/index.html new file mode 100644 index 0000000000..13493d5151 --- /dev/null +++ b/files/zh-cn/web/css/animation-duration/index.html @@ -0,0 +1,125 @@ +--- +title: animation-duration +slug: Web/CSS/animation-duration +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-duration +--- +
{{ CSSRef() }}{{ SeeCompatTable() }}
+ +

概述

+ +

animation-duration属性指定一个动画周期的时长。

+ +

默认值为0s，表示无动画。

+ +

使用简写属性{{cssxref("animation")}}很方便地同时设置所有的动画属性。

+ +

{{cssinfo}}

+ +

语法

+ +
Formal syntax: {{csssyntax("animation-duration")}}
+
+ +
animation-duration: 6s
+animation-duration: 120ms
+animation-duration: 1s, 15s
+animation-duration: 10s, 30s, 230ms
+
+ +

值

+ +
+
<time>
+
一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效。
+
+ +
注意：负值无效，浏览器会忽略该声明，但是一些早期的带前缀的声明会将负值当作0s。
+ +

示例

+ +

See CSS animations for examples.

+ +

标准

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Animations', '#animation-duration', 'animation-duration') }}{{ Spec2('CSS3 Animations') }}
+ +

浏览器兼容

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support3.0{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1012{{ property_prefix("-o") }}
+ 12.10 #		4.0{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.0{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatNo() }}{{ CompatNo() }}4.2{{ property_prefix("-webkit") }}
+
+ +

See also

+ + diff --git a/files/zh-cn/web/css/animation-fill-mode/index.html b/files/zh-cn/web/css/animation-fill-mode/index.html new file mode 100644 index 0000000000..03a4fa5963 --- /dev/null +++ b/files/zh-cn/web/css/animation-fill-mode/index.html @@ -0,0 +1,189 @@ +--- +title: animation-fill-mode +slug: Web/CSS/animation-fill-mode +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-fill-mode +--- +
{{CSSRef}}
+ +

CSS 属性 animation-fill-mode 设置CSS动画在执行之前和之后如何将样式应用于其目标。

+ +
{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}
+ + + +

使用简写属性 {{cssxref("animation")}} 一次性设置所有动画属性通常很方便。

+ +

语法

+ +
/* Single animation */
+animation-fill-mode: none;
+animation-fill-mode: forwards;
+animation-fill-mode: backwards;
+animation-fill-mode: both;
+
+/* Multiple animations */
+animation-fill-mode: none, backwards;
+animation-fill-mode: both, forwards, none;
+
+ +

值

+ +
+
none
+
当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。这是默认值。
+
forwards
+
目标将保留由执行期间遇到的最后一个关键帧计算值。 最后一个关键帧取决于{{cssxref("animation-direction")}}和{{cssxref("animation-iteration-count")}}的值： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
animation-directionanimation-iteration-countlast keyframe encountered
normaleven or odd100% or to
reverseeven or odd0% or from
alternateeven0% or from
alternateodd100% or to
alternate-reverseeven100% or to
alternate-reverseodd0% or from
+
+
backwards
+
动画将在应用于目标时立即应用第一个关键帧中定义的值，并在{{cssxref("animation-delay")}}期间保留此值。 第一个关键帧取决于{{cssxref("animation-direction")}}的值： + + + + + + + + + + + + + + + + + +
animation-directionfirst relevant keyframe
normal or alternate0% or from
reverse or alternate-reverse100% or to
+
+
both
+
动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。
+
+ +
+

注意：当您在animation-*属性上指定多个以逗号分隔的值时，它们将根据值的数量以不同的方式分配给 {{cssxref("animation-name")}} 属性中指定的动画。 有关更多信息，请参阅设置多个动画属性值。

+
+ +

正式语法

+ +
{{csssyntax}}
+
+ +

示例

+ +

您可以在以下示例中看到 animation-fill-mode 的效果。 它演示了如何对于运行无限时间的动画，可以使其保持最终状态而不是恢复到原始状态（这是默认状态）。

+ +

HTML

+ +
<p>Move your mouse over the gray box!</p>
+<div class="demo">
+ <div class="growsandstays">This grows and stays big.</div>
+  <div class="grows">This just grows.</div>
+</div>
+ +

CSS

+ +
.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+}
+
+@keyframes grow {
+  0% { font-size: 0; }
+  100% { font-size: 40px; }
+}
+
+.demo:hover .grows {
+  animation-name: grow;
+  animation-duration: 3s;
+}
+
+.demo:hover .growsandstays {
+  animation-name: grow;
+  animation-duration: 3s;
+  animation-fill-mode: forwards;
+}
+ +

{{EmbedLiveSample('Example',700,300)}}

+ +

更多示例请查看 CSS 动画 。

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}}{{Spec2('CSS3 Animations')}}Initial definition.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.animation-fill-mode")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/css/animation-iteration-count/index.html b/files/zh-cn/web/css/animation-iteration-count/index.html new file mode 100644 index 0000000000..42a2218ed1 --- /dev/null +++ b/files/zh-cn/web/css/animation-iteration-count/index.html @@ -0,0 +1,135 @@ +--- +title: animation-iteration-count +slug: Web/CSS/animation-iteration-count +translation_of: Web/CSS/animation-iteration-count +--- +
{{CSSRef}} {{ SeeCompatTable() }}
+ +

Summary 概要

+ +

animation-iteration-count CSS 属性   定义动画在结束前运行的次数 可以是1次 无限循环.

+ +

如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值。

+ +

通常情况下，使用animation简写属性，来一次性设置所有动画属性会更方便。

+ +
{{EmbedInteractiveExample("pages/css/animation-iteration-count.html")}}
+ + + +

Syntax 语法

+ +
/* 值为关键字 */
+animation-iteration-count: infinite;
+
+/* 值为数字 */
+animation-iteration-count: 3;
+animation-iteration-count: 2.4;
+
+/* 指定多个值 */
+animation-iteration-count: 2, 0, infinite;
+
+ +

animation-iteration-count 属性可以指定一个或多个以逗号分隔的值。

+ +

Values 属性值

+ +
+
infinite
+
无限循环播放动画.
+
<number>
+
动画播放的次数；默认值为1。可以用小数定义循环，来播放动画周期的一部分：例如，0.5 将播放到动画周期的一半。不可为负值。
+
+ +

Formal syntax 

+ +
{{csssyntax}}
+ +

Examples 示例

+ +

去看 CSS animations for examples. 点击链接去看栗（例）子

+ +

Specifications 说明 用法

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}{{ Spec2('CSS3 Animations') }}Initial definition
+ +

Browser compatibility 兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
+ {{CompatChrome(43.0)}}		{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		10 12 {{ property_prefix("-o") }}
+ 12.10		4.0{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{CompatUnknown}}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatChrome(43.0)}}
+  
+
+ +

See also

+ + diff --git a/files/zh-cn/web/css/animation-name/index.html b/files/zh-cn/web/css/animation-name/index.html new file mode 100644 index 0000000000..5cf3c6c23c --- /dev/null +++ b/files/zh-cn/web/css/animation-name/index.html @@ -0,0 +1,136 @@ +--- +title: animation-name +slug: Web/CSS/animation-name +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-name +--- +
{{CSSRef}}
+ +
+ +
animation-name属性指定应用的一系列动画，每个名称代表一个由{{cssxref("@keyframes")}}定义的动画序列。
+ +
+ +
/* Single animation */
+animation-name: none;
+animation-name: test_05;
+animation-name: -specific;
+animation-name: sliding-vertically;
+
+/* Multiple animations */
+animation-name: test1, animation4;
+animation-name: none, -moz-specific, sliding;
+
+/* Global values */
+animation-name: initial
+animation-name: inherit
+animation-name: unset
+ +

使用简写属性{{cssxref("animation")}}可以很方便地同时设置所有的动画属性。

+ +

{{cssinfo}}

+ +

语法

+ +

值

+ +
+
none
+
特殊关键字，表示无关键帧。可以不改变其他标识符的顺序而使动画失效，或者使层叠的动画样式失效。
+
IDENT
+
标识动画的字符串，由大小写敏感的字母a-z、数字0-9、下划线(_)和/或横线(-)组成。第一个非横线字符必须是字母，数字不能在字母前面，不允许两个横线出现在开始位置。
+
+

Formal syntax

+ + 
{{csssyntax("animation-name")}}
+
+
+ +

示例

+ +

See CSS animations for examples.

+ +

标准

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}{{Spec2('CSS3 Animations')}}
+ +

浏览器兼容

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10 12 {{property_prefix("-o")}}
+ 12.10 #		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		10{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/zh-cn/web/css/animation-play-state/index.html b/files/zh-cn/web/css/animation-play-state/index.html new file mode 100644 index 0000000000..7def3d5d0f --- /dev/null +++ b/files/zh-cn/web/css/animation-play-state/index.html @@ -0,0 +1,130 @@ +--- +title: animation-play-state +slug: Web/CSS/animation-play-state +translation_of: Web/CSS/animation-play-state +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

概述

+ +

animation-play-state CSS 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。

+ +

恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。

+ +

{{cssinfo}}

+ +

语法

+ +
/* Single animation */
+animation-play-state: running;
+animation-play-state: paused;
+
+/* Multiple animations */
+animation-play-state: paused, running, running;
+
+/* Global values */
+animation-play-state: inherit;
+animation-play-state: initial;
+animation-play-state: unset;
+
+ +

值

+ +
+
running
+
当前动画正在运行。
+
paused
+
当前动画已被停止。
+
+ +

正式语法

+ +
{{csssyntax}}
+
+ +

示例

+ +

参见实例CSS animations 

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}}{{Spec2('CSS3 Animations')}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(43.0)}}		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1012 {{property_prefix("-o")}}
+ 12.10		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/animation-timing-function/index.html b/files/zh-cn/web/css/animation-timing-function/index.html new file mode 100644 index 0000000000..c4bc03f81c --- /dev/null +++ b/files/zh-cn/web/css/animation-timing-function/index.html @@ -0,0 +1,94 @@ +--- +title: animation-timing-function +slug: Web/CSS/animation-timing-function +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-timing-function +--- +

{{CSSRef}}

+ +

概述

+ +

CSS animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个 {{cssxref("<timing-function>")}}。

+ +

对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始开始，到关键帧结束结束。

+ +

定义于一个关键帧区块的缓动函数(animation timing function)应用到改关键帧；另外，若该关键帧没有定义缓动函数，则使用定义于整个动画的缓动函数。

+ +
/* Keyword values */
+animation-timing-function: ease;
+animation-timing-function: ease-in;
+animation-timing-function: ease-out;
+animation-timing-function: ease-in-out;
+animation-timing-function: linear;
+animation-timing-function: step-start;
+animation-timing-function: step-end;
+
+/* Function values */
+animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+animation-timing-function: steps(4, end);
+animation-timing-function: frames(10);
+
+/* Multiple animations */
+animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* Global values */
+animation-timing-function: inherit;
+animation-timing-function: initial;
+animation-timing-function: unset;
+ +

通常用{{cssxref("animation")}}简写定义整个动画属性更为方便。

+ +

{{cssinfo}}

+ +

语法

+ +

值

+ +
+
<timingfunction>
+
每个 {{cssxref("<timing-function>")}}代表了应用于动画的timing function，定义于{{cssxref("animation-property")}}.
+
+ +

正式语法

+ +
{{csssyntax("animation-timing-function")}}
+
+ +

示例

+ +

参见 CSS animations

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}{{Spec2('CSS3 Animations')}}
+ +

浏览器兼容性

+ +

{{Compat("css.properties.animation-timing-function")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/animation/index.html b/files/zh-cn/web/css/animation/index.html new file mode 100644 index 0000000000..d503f6b8f4 --- /dev/null +++ b/files/zh-cn/web/css/animation/index.html @@ -0,0 +1,344 @@ +--- +title: animation +slug: Web/CSS/animation +tags: + - CSS + - CSS Animations + - CSS Property + - CSS3 动画 + - Reference +translation_of: Web/CSS/animation +--- +
{{CSSRef}}
+ +

CSS animation 属性是 {{cssxref("animation-name")}}，{{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}，{{cssxref("animation-delay")}}，{{cssxref("animation-iteration-count")}}，{{cssxref("animation-direction")}}，{{cssxref("animation-fill-mode")}} 和 {{cssxref("animation-play-state")}} 属性的一个简写属性形式。

+ +

{{EmbedInteractiveExample("pages/css/animation.html")}}

+ +
/* @keyframes duration | timing-function | delay |
+   iteration-count | direction | fill-mode | play-state | name */
+animation: 3s ease-in 1s 2 reverse both paused slidein;
+
+/* @keyframes duration | timing-function | delay | name */
+animation: 3s linear 1s slidein;
+
+/* @keyframes duration | name */
+animation: 3s slidein;
+ + + +

{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}

+ +

哪些属性是可动画的？值得注意的是，此描述也适用于CSS变换。

+ +

{{cssinfo}}

+ +

语法

+ +

animation 属性用来指定一组或多组动画，每组之间用逗号相隔。

+ +

每组动画规定的属性如下：

+ +
    +
  • 以下属性出现0次或1次： +
      +
    • {{cssxref("<single-transition-timing-function>")}}
      • +
    • {{cssxref("animation", "<single-animation-iteration-count>", "#<single-animation-iteration-count>")}}
      • +
    • {{cssxref("animation", "<single-animation-direction>", "#<single-animation-direction>")}}
      • +
    • {{cssxref("animation", "<single-animation-fill-mode>", "#<single-animation-fill-mode>")}}
      • +
    • {{cssxref("animation", "<single-animation-play-state>", "#<single-animation-play-state>")}}
      • +
    +
    • +
  • animation 的 name 值可能是：none，{{cssxref("<custom-ident>")}}， {{cssxref("<string>")}}
    • +
  • {{cssxref("<time>")}} 可能会出现0、1 或 2 次
    • +
+ +

每个动画定义中的属性值的顺序很重要：可以被解析为 {{cssxref("<time>")}} 的第一个值被分配给{{cssxref("animation-duration")}}， 第二个分配给 {{cssxref("animation-delay")}}。

+ +

每个动画定义中的值的顺序，对于区分 {{cssxref("animation-name")}} 值与其他关键字也很重要。解析时，对于除 {{cssxref("animation-name")}} 之外的有效的关键字，必须被前面的简写中没有找到值的属性所接受。此外，在序列化时，{{cssxref("animation-name")}} 与以及其他属性值做区分等情况下，必须输出其他属性的默认值。

+ +

Values

+ +
+
<single-animation-iteration-count>
+
动画播放的次数。该值必须是{{cssxref("animation-iteration-count")}}可用的值之一。
+
<single-animation-direction>
+
动画播放的方向。该值必须是{{cssxref("animation-direction")}}可用的值之一。
+
<single-animation-fill-mode>
+
确定动画在执行之前和之后这两个阶段应用的样式。该值必须是{{cssxref("animation-fill-mode")}}可用的值之一。
+
<single-animation-play-state>
+
确定动画是否正在播放。该值必须是{{cssxref("animation-play-state")}}中可用的值之一。
+
+ +

语法

+ +
{{csssyntax("animation")}}
+
+ +

范例

+ +

赛隆人之眼(赛隆人是一个虚构的生化人种族,出自科幻电视系列剧星际大争霸系列)

+ +
<div class="view_port">
+  <div class="polling_message">
+    Listening for dispatches
+  </div>
+  <div class="cylon_eye"></div>
+</div>
+ +
.polling_message {
+  color: white;
+  float: left;
+  margin-right: 2%;
+}
+
+.view_port {
+  background-color: black;
+  height: 25px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.cylon_eye {
+  background-color: red;
+  background-image: linear-gradient(to right,
+      rgba(0, 0, 0, .9) 25%,
+      rgba(0, 0, 0, .1) 50%,
+      rgba(0, 0, 0, .9) 75%);
+  color: white;
+  height: 100%;
+  width: 20%;
+
+  -webkit-animation: 4s linear 0s infinite alternate move_eye;
+          animation: 4s linear 0s infinite alternate move_eye;
+}
+
+@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
+        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
+ +

{{EmbedLiveSample('Cylon_Eye')}}

+ +

更多示例请参阅使用CSS动画。

+ +

潜在的问题

+ +

眨眼和闪烁的动画对于有认知问题的人来说是有问题的，比如注意力缺陷多动障碍(ADHD)。此外，某些动画效果可以触发前庭神经紊乱、癫痫、偏头痛和暗点敏感性。

+ +

考虑提供一种暂停或禁用动画的机制，以及使用 Reduced Motion Media Query（简约运动媒体查询），为那些表示不喜欢动画的用户创建一个良好的体验。

+ + + +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Animations', '#animation', 'animation')}}{{Spec2('CSS3 Animations')}}Initial definition
+ +

浏览器兼容性

+ +

{{Compat("css.properties.animation")}}

+ +

Quantum CSS notes

+ +
    +
  • Gecko有一个bug，当你在屏幕上对屏幕外的元素使用带有指定延时的动画时，Gecko不会在某些平台上重绘，例如Windows {{bug(1383239)}}。这个问题已经在Firefox新的并行CSS引擎(也称为Quantum CSS 或者 Stylo，计划在Firefox 57中发布)中得到了解决。
    • +
  • 另外一个Gecko bug，当我们激活<details>元素的动画效果时，即使通过 open 属性也不能将其展示({{bug(1382124)}})。Quantum CSS会将其修复了。
    • +
  • 另一个bug是，由于动画使用的是em单位，所以即使我们改变父元素的font-size属性也不会影响该动画元素({{bug(1254424)}})，而它们原本应该受到影响。Quantum CSS会将其修复了。
    • +
+ +

更多

+ + diff --git a/files/zh-cn/web/css/appearance/index.html b/files/zh-cn/web/css/appearance/index.html new file mode 100644 index 0000000000..00980a5dea --- /dev/null +++ b/files/zh-cn/web/css/appearance/index.html @@ -0,0 +1,1858 @@ +--- +title: '-moz-appearance (-webkit-appearance)' +slug: Web/CSS/appearance +tags: + - CSS +translation_of: Web/CSS/appearance +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

在基于 Gecko 的浏览器（如 Firefox）中，-moz-appearance CSS 属性被用于按照 浏览器所在的操作系统所用主题，以平台本地的样式显示元素。

+ +

在基于 WebKit 的浏览器（如 Safari）和基于 Blink 的浏览器（如 Chrome, Opera）中，-webkit-appearance 属性被用于达到相同 to achieve the same thing. Note that Edge also supports -webkit-appearance (instead of -ms-appearance) for compatibility reasons.

+ +
/* 在 Gecko 中可用的部分值 */
+-moz-appearance: none;
+-moz-appearance: button;
+-moz-appearance: checkbox;
+-moz-appearance: scrollbarbutton-up;
+
+/* 在 WebKit/Blink 中可用的部分值 */
+-webkit-appearance: none;
+-webkit-appearance: button;
+-webkit-appearance: checkbox;
+-webkit-appearance: scrollbarbutton-up;
+
+ +

这个属性经常用在 XUL 的样式表中，用来设计拥有平台原生UI样式的自定义的组件，也用于 XBL 之中以实现 Mozilla 平台的组件。

+ +
+

兼容性提示：如果您想在网站上使用此属性，您应非常小心地测试它。尽管在大部分现代浏览器中它是被支持的，它的实现差别很大。在版本较旧的浏览器中，即使是 none 也会在不同浏览器中产生差别，而且一些浏览器完全不支持这个属性。在版本较新的浏览器中这些差距会更小一些。

+
+ +

{{cssinfo}}

+ +

语法

+ +

The -moz-appearance 属性may be specified as a single value chosen from the list below.

+ +

取值

+ +

<appearance> 是其中的一个关键字:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueDemoBrowserDescription
none + + {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}All不应用任何特殊样式。这是未定义元素的默认值。旧版翻译中的信息：但是，有这两个BUG： {{bug(649849)}} 和 {{bug(605985)}}。
button + + {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}Firefox Chrome此元素将被作为按钮来绘制。
button-arrow-down + + {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}Firefox
button-arrow-next + + {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}Firefox
button-arrow-previous + + {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}Firefox
button-arrow-up + + {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}Firefox
button-bevel + + {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}Firefox Chrome
button-focus + + {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}Firefox
caret + + {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}Firefox Chrome
checkbox + + {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}Firefox Chrome此元素将被作为复选框绘制，仅包括实际的 "checkbox" 部分。
checkbox-container + + {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}Firefox此元素将被作为复选框容器绘制，可在相应的平台下带有高亮样式。一般情况下，它会包含一个标签（label）与一个复选框。
checkbox-label + + {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}Firefox
checkmenuitem + + {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}Firefox
dualbutton + + {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}Firefox
groupbox + + {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}Firefox
inner-spin-button Chrome
listbox + + {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}Firefox Chrome
listitem + + {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}Firefox Chrome
media-enter-fullscreen-button Chrome
media-exit-fullscreen-button Chrome
media-mute-button Chrome
media-play-button Chrome
media-overlay-play-button Chrome
media-toggle-closed-captions-button Chrome
media-slider Chrome
media-sliderthumb Chrome
media-volume-slider-container Chrome
media-volume-slider Chrome
media-volume-sliderthumb Chrome
media-controls-background Chrome
media-controls-fullscreen-background Chrome
media-current-time-display Chrome
media-time-remaining-display Chrome
menuarrow + + {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}Firefox
menubar + + {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}Firefox
menucheckbox + + {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}Firefox
menuimage + + {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}Firefox
menuitem + + {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}Firefox此元素将被作为菜单项绘制，鼠标覆盖时会带有高亮效果。
menuitemtext + + {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}Firefox
menulist + + {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}Firefox Chrome
menulist-button + menulist-button + + {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}Firefox Chrome此元素将被绘制为显示一个下拉菜单可以打开的按钮。
menulist-text + + {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}Firefox Chrome
menulist-textfield + + {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}Firefox Chrome这个元素将被作为菜单列表中的文本框绘制。（未在 Windows 平台下实现）menupopup + + {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}Firefox
menuradio + + {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}Firefox
menuseparator + + {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}Firefox
meter Chrome
meterbar + + {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}FirefoxNew in Fx 16.
meterchunk + + {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}FirefoxNew in Fx 16
progress-bar Chrome
progress-bar-value Chrome
progressbar + + {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}FirefoxThe element is styled like a progress bar.
progressbar-vertical + + {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}Firefox
progresschunk + + {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}Firefox
progresschunk-vertical + + {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}Firefox
push-button Chrome
radio + + {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}Firefox Chrome +这个元素将被作为单选框绘制，仅包括实际的"radio button"部分。
radio-container + + {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}Firefox这个元素将被作为单选框容器绘制，并且可在相应平台下带有高亮样式。一般情况下，它会包含一个标签（label）与一个单选框。
radio-label + + {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}Firefox
radiomenuitem + + {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}Firefox
range + + {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}Firefox
range-thumb + + {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}Firefox
resizer + + {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}Firefox
resizerpanel + + {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}Firefox
scale-horizontal + + {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}Firefox
scalethumbend + + {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}Firefox
scalethumb-horizontal + + {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}Firefox
scalethumbstart + + {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}Firefox
scalethumbtick + + {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}Firefox
scalethumb-vertical + + {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}Firefox
scale-vertical + + {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}Firefox
scrollbarbutton-down + + {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}Firefox
scrollbarbutton-left + + {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}Firefox
scrollbarbutton-right + + {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}Firefox
scrollbarbutton-up + + {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}Firefox
scrollbarthumb-horizontal + + {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}Firefox
scrollbarthumb-vertical + + {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}Firefox
scrollbartrack-horizontal + + {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}Firefox
scrollbartrack-vertical + + {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}Firefox
searchfield + + {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}Firefox Chrome
searchfield-cancel-button Chrome
separator + + {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}Firefox
sheet + + {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}Firefox
slider-horizontal Chrome
slider-vertical Chrome
sliderthumb-horizontal Chrome
sliderthumb-vertical Chrome
spinner + + {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}Firefox
spinner-downbutton + + {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}Firefox
spinner-textfield + + {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}Firefox
spinner-upbutton + + {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}Firefox
splitter + + {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}Firefox
square-button Chrome
statusbar + + {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}Firefox
statusbarpanel + + {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}Firefox
tab + + {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}Firefox
tabpanel + + {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}Firefox
tabpanels + + {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}Firefox
tab-scroll-arrow-back + + {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}Firefox
tab-scroll-arrow-forward + + {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}Firefox
textarea Chrome
textfield + + {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}Firefox Chrome
textfield-multiline + + {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}Firefox
toolbar + + {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}Firefox
toolbarbutton + + {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}Firefox
toolbarbutton-dropdown + + {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}Firefox
toolbargripper + + {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}Firefox
toolbox + + {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}Firefox
tooltip + + {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}Firefox
treeheader + + {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}Firefox
treeheadercell + + {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}Firefox
treeheadersortarrow + + {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}Firefox
treeitem + + {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}Firefox
treeline + + {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}Firefox
treetwisty + + {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}Firefox
treetwistyopen + + {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}Firefox
treeview + + {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}Firefox
{{gecko_minversion_inline("2.0")}} -moz-win-borderless-glass + + {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}FirefoxWindows Vista and later only. This style applies the Aero Glass effect -- but without a border -- to the element.
-moz-win-browsertabbar-toolbox + + {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}Firefox仅支持 Vista 及更高版本的 Windows 系统。这个样式会将磨砂玻璃（Aero Glass）样式（但是不含边框）应用到元素上。
-moz-win-browsertabbar-toolbox + + {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}Firefox仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式主要被用于浏览器的标签栏。
-moz-win-communicationstext + + {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}Firefox
-moz-win-communications-toolbox + + {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}Firefox仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式是为了用于通讯和生产方面的应用程序，与之对应的前景色为 -moz-win-communicationstext。
{{gecko_minversion_inline("6.0")}} -moz-win-exclude-glass + + {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}Firefox仅支持 Vista 及更高版本的 Windows 系统。此样式被用于取消元素的磨砂玻璃效果。
-moz-win-glass + + {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}Firefox仅支持 Vista 及更高版本的 Windows 系统。这个样式会将磨砂玻璃（Aero Glass）样式（但是不含边框）应用到元素上。
-moz-win-mediatext + + {{EmbedLiveSample("sampleWinMediaText",100,50,"","", "nobutton")}}Firefox
-moz-win-media-toolbox + + {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}Firefox仅支持 Vista 及更高版本的 Windows 系统。此工具栏样式主要用于管理媒体对象。与之对应的前景色为 -moz-win-mediatext。
-moz-window-button-box + + {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}Firefox
-moz-window-button-box-maximized + + {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}Firefox
-moz-window-button-close + + {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}Firefox
-moz-window-button-maximize + + {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}Firefox
-moz-window-button-minimize + + {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}Firefox
-moz-window-button-restore + + {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}Firefox
-moz-window-frame-bottom + + {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}Firefox
-moz-window-frame-left + + {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}Firefox
-moz-window-frame-right + + {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}Firefox
-moz-window-titlebar + + {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}Firefox
-moz-window-titlebar-maximized + + {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}Firefox
-apple-pay-button iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.appearance")}}

+

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
浏览器ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
最低支持1.0{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}[1]{{CompatNo}}{{CompatUnknown}}3.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
浏览器AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
最低支持{{CompatUnknown}}{{CompatGeckoMobile("1.0")}}11.0{{property_prefix("-webkit")}}[2]{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] 不完全支持。

+ +

[2] 只有 none, button,  和 textfield 值被支持，详见 the documentation on MSDN。

+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

以下代码将使一个元素在 Firefox 中看起来像工具栏按钮：

+ +
.exampleone {
+  -moz-appearance: toolbarbutton;
+}
+
+ +

可参考 这个 JSFiddle 示例，它演示了应如何使用 appearance: none 已对单选框与复选框应用自定义样式。

+ +

参见

+ + + diff --git a/files/zh-cn/web/css/aspect-ratio/index.html b/files/zh-cn/web/css/aspect-ratio/index.html new file mode 100644 index 0000000000..c2db6c0b03 --- /dev/null +++ b/files/zh-cn/web/css/aspect-ratio/index.html @@ -0,0 +1,85 @@ +--- +title: aspect-ratio +slug: Web/CSS/aspect-ratio +translation_of: Web/CSS/aspect-ratio +--- +
{{CSSRef}}
+ +

aspect-ratio  CSS 属性为box容器规定了一个期待的纵横比，这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。

+ +
aspect-ratio: 1 / 1;
+
+/* 全局值 */
+aspect-ratio: inherit;
+aspect-ratio: initial;
+aspect-ratio: unset;
+
+ +

数值

+ +
+
{{cssxref("<auto>")}}
+
具有固有宽高比的替换元素将使用该宽高比，否则该内容框没有首选的宽高比。 涉及固有宽高比的尺寸计算始终与内容框尺寸一起使用。
+
{{cssxref("<ratio>")}}
+
内容框首选的宽高比是通过 width / height 定义的。当为内容框定义 box-sizing 之后，尺寸的计算就可以通过指定宽高比来实现。
+
+ +

正式定义

+ +

{{cssinfo}}

+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

纵横比数值例子

+ +
aspect-ratio: 1 / 1;
+aspect-ratio: 16 / 9;
+
+ +

将宽度和高度关联到宽高比

+ +

浏览器内部已经为替换的元素和其他接受 width 和 height 的元素添加了 aspect-ratio。这些可以在浏览器的UA样式表中看到。

+ +

在 Firefox 中，内部样式表看起来如下：

+ +
img, input[type="image"], video, embed, iframe, marquee, object, table {
+  aspect-ratio: attr(width) / attr(height);
+}
+ +

您可以在 为图片设置宽高仍然重要gain 一文中了解更多与这个功能有关的内容。

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('CSS4 Sizing', '#aspect-ratio', 'aspect-ratio')}}{{Spec2('CSS4 Sizing')}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.aspect-ratio")}}

+ +

相关阅读

+ + diff --git a/files/zh-cn/web/css/at-rule/index.html b/files/zh-cn/web/css/at-rule/index.html new file mode 100644 index 0000000000..b08bddf9ed --- /dev/null +++ b/files/zh-cn/web/css/at-rule/index.html @@ -0,0 +1,61 @@ +--- +title: '@规则' +slug: Web/CSS/At-rule +tags: + - At-rule +translation_of: Web/CSS/At-rule +--- +

一个 at-rule 是一个CSS 语句，以at符号开头, '@' (U+0040 COMMERCIAL AT), 后跟一个标识符，并包括直到下一个分号的所有内容, ';' (U+003B SEMICOLON), 或下一个CSS块，以先到者为准。

+ +

下面是一些 @规则, 由它们的标示符指定, 每种规则都有不同的语法:

+ +
    +
  • {{ cssxref("@charset") }}, 定义样式表使用的字符集.
    • +
  • {{ cssxref("@import") }}, 告诉 CSS 引擎引入一个外部样式表.
    • +
  • {{ cssxref("@namespace") }}, 告诉 CSS 引擎必须考虑XML命名空间。
    • +
  • 嵌套@规则, 是嵌套语句的子集,不仅可以作为样式表里的一个语句，也可以用在条件规则组里： +
      +
    • {{ cssxref("@media") }}, 如果满足媒介查询的条件则条件规则组里的规则生效。
      • +
    • {{ cssxref("@page") }}, 描述打印文档时布局的变化.
      • +
    • {{ cssxref("@font-face") }}, 描述将下载的外部的字体。 {{ experimental_inline() }}
      • +
    • {{ cssxref("@keyframes") }}, 描述 CSS 动画的中间步骤 . {{ experimental_inline() }}
      • +
    • {{ cssxref("@supports") }}, 如果满足给定条件则条件规则组里的规则生效。 {{ experimental_inline() }}
      • +
    • {{ cssxref("@document") }}, 如果文档样式表满足给定条件则条件规则组里的规则生效。 (推延至 CSS Level 4 规范)
      • +
    +
    • +
+ +

条件规则组

+ +

就像属性值那样,每条@规则都有不同的语法. 不过一些@规则可以归为一类： 条件规则组. 这些语句使用相同的语法. 它们都嵌套语句，或者是规则或者是@规则。它们都表达： 它们所指的条件 (类型不同) 总等效于 true 或者 false，如果为 true 那么它们里面的语句生效。

+ +

条件规则组由CSS Conditionals Level 3 定义:

+ +
    +
  • {{ cssxref("@media") }},
    • +
  • {{ cssxref("@supports") }},
    • +
  • {{ cssxref("@document") }}. (推迟至 CSS Level 4 规范)
    • +
+ +

既然条件规则组可以嵌套语句, 那么嵌套层级不定。

+ +
+

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Conditional') }}{{ Spec2('CSS3 Conditional') }} 
+
+ +

{{ languages( { "ja": "ja/CSS/At-rule" } ) }}

diff --git a/files/zh-cn/web/css/attr()/index.html b/files/zh-cn/web/css/attr()/index.html new file mode 100644 index 0000000000..02238efaa8 --- /dev/null +++ b/files/zh-cn/web/css/attr()/index.html @@ -0,0 +1,309 @@ +--- +title: attr +slug: Web/CSS/attr() +tags: + - CSS + - CSS Function + - attr Function +translation_of: Web/CSS/attr() +--- +
+
{{ CSSRef() }}
+
+ +

概述

+ +
+

注意:  attr() 理论上能用于所有的CSS属性但目前支持的仅有伪元素的 {{CSSxRef("content")}} 属性，其他的属性和高级特性目前是实验性的

+ +

译者注：如果发现浏览器兼容表里attr()的高级用法依旧没有良好的支持的话，本文大部分内容都是纸上谈兵

+
+ +

CSS表达式 attr() 用来获取选择到的元素的某一HTML属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。

+ +

attr() 表达式可以用于任何CSS属性。 {{ experimental_inline() }}

+ +

用法

+ +
语法: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
+
+ +

解释

+ +
+
attribute-name
+
是CSS所引用的HTML属性名称。
+
<type-or-unit>
+
表示所引用的属性值的单位。如果该单位相对于所引用的属性值不合法，那么attr()表达式也不合法。若省略，则默认值为string。其合法值包括： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
关键字类型备注默认值
string{{cssxref("<string>")}}属性值将被解析为 {{cssxref("<string>")}}空字符串
color {{ experimental_inline() }}{{cssxref("<color>")}}属性值将被解析为#xxx、#xxxxxx或关键字的形式，且必须为合法CSS {{cssxref("<string>")}} 值。
+ 前缀与后缀空格将被截掉。		当前颜色
url {{ experimental_inline() }}{{ cssxref("<uri>") }}属性值将被解析为可用于url()函数的字符串。
+ 相对URL是根据HTML文档的路径解析，而不是样式文件所在的路径。
+ 前缀与后缀空格将被截掉。		URL about:invalid，表示资源不存在。
integer {{ experimental_inline() }}{{cssxref("<integer>")}}属性值将被解析为CSS {{cssxref("<integer>")}}。若不是合法值（不是整数或超出CSS属性规定的数字范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0，或该属性允许的最小值（如果0是不合法的值）。
number {{ experimental_inline() }}{{cssxref("<number>")}}属性值将被解析为CSS {{cssxref("<number>")}}。 若不是合法值（不是数字或超出CSS属性规定的数字范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0，或该属性允许的最小值（如果0是不合法的值）。
length {{ experimental_inline() }}{{cssxref("<length>")}}属性值将被解析为CSS {{cssxref("<length>")}}，带单位，比如 12.5em。 若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。
+ 若属性值是一个相对长度， attr()会将其计算为绝对长度。
+ 前缀与后缀空格将被截掉。		0，或该属性允许的最小值（如果0是不合法的值）。
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{ experimental_inline() }}{{cssxref("<length>")}} +

属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如 12.5，并被解释为带有所规定单位的 {{cssxref("<length>")}} 值。若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。
+ 若属性值是一个相对长度， attr()会将其计算为绝对长度。
+ 前缀与后缀空格将被截掉。

+ 		0，或该属性允许的最小值（如果0是不合法的值）。
angle {{ experimental_inline() }}{{ cssxref("<angle>") }}属性值将被解析为CSS {{ cssxref("<angle>") }}，带单位，如30.5deg。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0deg，或该属性允许的最小值（如果0deg是不合法的值）。
deg, grad, rad {{ experimental_inline() }}{{ cssxref("<angle>") }}属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如12.5)，并被解释为带有所规定单位的 {{ cssxref("<angle>") }} 值。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0deg，或该属性允许的最小值（如果0deg是不合法的值）。
time {{ experimental_inline() }}{{cssxref("<time>")}}属性值将被解析为CSS {{cssxref("<time>")}}，带单位，如30.5ms。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0s，或该属性允许的最小值（如果0s是不合法的值）。
s, ms {{ experimental_inline() }}{{cssxref("<time>")}}属性值将被解析为CSS {{cssxref("<time>")}}，不带单位，如30.5，并被解释为带有所规定单位的 {{cssxref("<time>")}} 值。。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0s，或该属性允许的最小值（如果0s是不合法的值）。
frequency {{ experimental_inline() }}{{cssxref("<frequency>")}}属性值将被解析为CSS {{cssxref("<frequency>")}}，带单位，如12.5kHz)。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0Hz，或该属性允许的最小值（如果0Hz是不合法的值）。
Hz, kHz {{ experimental_inline() }}{{cssxref("<frequency>")}}属性值将被解析为CSS {{cssxref("<frequency>")}}，不带单位，如12.5)，并被解释为带有所规定单位的{{cssxref("<frequency>")}}值。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。
+ 前缀与后缀空格将被截掉。		0Hz，或该属性允许的最小值（如果0Hz是不合法的值）。
% {{ experimental_inline() }}{{cssxref("<percentage>")}}属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如12.5)，并被解释为带有所规定单位的 {{cssxref("<percentage>")}}值。若不是合法值（不是数字或超出CSS属性规定的范围），则使用默认值。
+ 若属性值用作长度，attr()将其计算为绝对长度。
+ 前缀与后缀空格将被截掉。		0%，或该属性允许的最小值（如果0%是不合法的值）。
+
+
<fallback>
+
如果HTML元素缺少所规定的属性值或属性值不合法，则使用fallback值。该值必须合法，且不能包含另一个attr()表达式。如果attr()不是所在CSS属性值的唯一值，其<fallback>值必须为<type-or-unit>所指定的类型，否则CSS会使用相应<type-or-unit>定义的默认值（见上表）。
+
+ +

示例

+ +
p:before {
+    content:attr(data-foo) " ";
+}
+
+ +
<p data-foo="hello">world</p>
+
+ +

结果

+ +

hello world

+ + + +

示例1

+ +

HTML

+ +
<p data-foo="hello">world</p>
+ +

CSS

+ +
[data-foo]::before {
+  content: attr(data-foo) " ";
+}
+ +

Result

+ +

{{EmbedLiveSample("示例1", "100%", 50)}}

+ + + +

示例2

+ +

{{SeeCompatTable}}

+ +

HTML

+ +
<div class="background" data-background="lime">颜色应该是红色而不是绿色因为浏览器并不支持attr()的高级用法</div>
+ +

CSS

+ +
.background {
+  height: 100vh;
+}
+ +
.background {
+  background-color: red;
+}
+
+.background[data-background] {
+  background-color: attr(data-background color, red);
+}
+ +

{{EmbedLiveSample("示例2", "100%", 50)}}

+ + + + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
No changes.
{{SpecName("CSS3 Values", "#attr-notation", "attr()")}}{{Spec2("CSS3 Values")}} +

Added two optional parameters;
+ can be used on all properties;
+ may return values other than {{CSSxRef("<string>")}}.

+ These changes are experimental and may be dropped during the CR phase if browser support is too small.
{{SpecName("CSS2.1", "generate.html#x18", "attr()")}}{{Spec2("CSS2.1")}}Limited to the {{CSSxRef("content")}} property;
+ always returns a {{CSSxRef("<string>")}}.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS4 Values", "#attr-notation", "attr()")}}{{Spec2("CSS4 Values")}}无变化
{{ SpecName('CSS3 Values', '#attr', 'attr()') }}{{ Spec2('CSS3 Values') }}增加两个可选参数；且可以用于所有属性；且可以返回除{{cssxref("<string>")}}之外的其他类型。这些改变是实验性质的{{ experimental_inline() }}，且如果浏览器支持不足，可能在CR阶段被丢弃。
{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}{{ Spec2('CSS2.1') }}限制用在 {{ cssxref("content") }} 属性；且必须返回{{cssxref("<string>")}}}。
+ +

浏览器兼容性

+ + + + + +

{{Compat("css.types.attr")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/attribute_selectors/index.html b/files/zh-cn/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..d0370c483d --- /dev/null +++ b/files/zh-cn/web/css/attribute_selectors/index.html @@ -0,0 +1,230 @@ +--- +title: 属性选择器 +slug: Web/CSS/Attribute_selectors +tags: + - Atttribute + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

+ +
/* 存在title属性的<a> 元素 */
+a[title] {
+  color: purple;
+}
+
+/* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* 存在href属性并且属性值包含"example"的<a> 元素 */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* 存在href属性并且属性值结尾是".org"的<a> 元素 */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */
+a[class~="logo"] {
+  padding: 2px;
+}
+ +

语法

+ +
+
[attr]
+
表示带有以 attr 命名的属性的元素。
+
[attr=value]
+
表示带有以 attr 命名的属性，且属性值为 value 的元素。
+
[attr~=value]
+
表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。
+
[attr|=value]
+
表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。
+
[attr^=value]
+
表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。
+
[attr$=value]
+
表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。
+
[attr*=value]
+
表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。
+
[attr operator value i]
+
在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。
+
[attr operator value s] {{Experimental_Inline}}
+
在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。
+
+ +

示例

+ +

链接

+ +

CSS

+ +
a {
+  color: blue;
+}
+
+/* 以 "#" 开头的页面本地链接 */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* 包含 "example" 的链接 */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* 包含 "insensitive" 的链接,不区分大小写 */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* 包含 "cAsE" 的链接，区分大小写 */
+a[href*="cAsE" s] {
+  color: pink;
+}
+
+/* 以 ".org" 结尾的链接 */
+a[href$=".org"] {
+  color: red;
+}
+ +

HTML

+ +
<ul>
+  <li><a href="#internal">Internal link</a></li>
+  <li><a href="http://example.com">Example link</a></li>
+  <li><a href="#InSensitive">Insensitive internal link</a></li>
+  <li><a href="http://example.org">Example org link</a></li>
+</ul>
+ +

结果

+ +

{{EmbedLiveSample("Links")}}

+ +

多语言

+ +

CSS

+ +
/* 将所有包含 `lang` 属性的 <div> 元素的字重设为 bold */
+div[lang] {
+  font-weight: bold;
+}
+
+/* 将所有语言为美国英语的 <div> 元素的文本颜色设为蓝色 */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* 将所有语言为葡萄牙语的 <div> 元素的文本颜色设为绿色 */
+div[lang="pt"] {
+  color: green;
+}
+
+/* 将所有语言为中文的 <div> 元素的文本颜色设为红色
+   无论是简体中文（zh-CN）还是繁体中文（zh-TW） */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* 将所有 `data-lang` 属性的值为 "zh-TW" 的 <div> 元素的文本颜色设为紫色 */
+/* 备注: 和 JS 不同，CSS 可以在不使用双引号的情况下直接使用带连字符的属性名 */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+
+ +

HTML

+ +
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">世界您好！</div>
+
+ +

结果

+ +

{{EmbedLiveSample("Languages")}}

+ +

HTML 有序列表

+ +

由于 {{htmlattrxref("type", "input")}} 属性主要用于 {{HTMLElement("input")}} 元素，因此 HTML 规范要求 {{htmlattrxref("type", "input")}} 属性的匹配不区分大小写，如果使用属性选择器且添加了 大小写敏感 的修饰符，那么将无法与 {{HTMLElement("ol", "有序列表")}} 的 {{htmlattrxref("type", "ol")}} 属性进行匹配。

+ +

CSS

+ +
/* 列表类型不需要大小写敏感标志，这是由于 HTML 处理 type 属性的一个怪癖。 */
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}
+ +

HTML

+ +
<ol type="A">
+  <li>Example list</li>
+</ol>
+ +

结果

+ +

{{EmbedLiveSample("HTML_ordered_lists")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS4 Selectors")}}Adds modifier for ASCII case-sensitive and case-insensitive attribute value selection.
{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}{{Spec2("CSS2.1")}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.attribute")}}

+ +

参见

+ +
    +
  • {{CSSxRef("attr")}}
    • +
  • Selecting a single element: {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}}, or {{DOMxRef("Element.querySelector()")}}
    • +
  • Selecting all matching elements: {{DOMxRef("Document.querySelectorAll()")}}, {{DOMxRef("DocumentFragment.querySelectorAll()")}}, or {{DOMxRef("Element.querySelectorAll()")}}
    • +
  • The above methods are all implemented based on the {{DOMxRef("ParentNode")}} mixin; see {{DOMxRef("ParentNode.querySelector()")}} and {{DOMxRef("ParentNode.querySelectorAll()")}}
    • +
diff --git a/files/zh-cn/web/css/backdrop-filter/index.html b/files/zh-cn/web/css/backdrop-filter/index.html new file mode 100644 index 0000000000..934030ed9b --- /dev/null +++ b/files/zh-cn/web/css/backdrop-filter/index.html @@ -0,0 +1,145 @@ +--- +title: backdrop-filter +slug: Web/CSS/backdrop-filter +tags: + - CSS + - CSS Property + - Graphics + - Layout + - SVG + - SVG Filter + - Web + - 滤镜 +translation_of: Web/CSS/backdrop-filter +--- +
{{CSSRef}}
+ +

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

+ +
/* 关键词值 */
+backdrop-filter: none;
+
+/* 指向 SVG 滤镜的 URL */
+backdrop-filter: url(commonfilters.svg#filter);
+
+/* <filter-function> 滤镜函数值 */
+backdrop-filter: blur(2px);
+backdrop-filter: brightness(60%);
+backdrop-filter: contrast(40%);
+backdrop-filter: drop-shadow(4px 4px 10px blue);
+backdrop-filter: grayscale(30%);
+backdrop-filter: hue-rotate(120deg);
+backdrop-filter: invert(70%);
+backdrop-filter: opacity(20%);
+backdrop-filter: sepia(90%);
+backdrop-filter: saturate(80%);
+
+/* 多重滤镜 */
+backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
+
+/* 全局值 */
+backdrop-filter: inherit;
+backdrop-filter: initial;
+backdrop-filter: unset;
+
+ +

{{cssinfo}}

+ +

语法

+ +

值

+ +
+
none
+
没有应用于背景的滤镜
+
<filter-function-list>
+
一个以空格分隔的滤镜函数（{{cssxref("<filter-function>")}}）或是要应用到背景上的 SVG 滤镜。
+
+ +

形式化语法

+ +
{{csssyntax}}
+ +

示例

+ +

CSS

+ +
.box {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 5px;
+  font-family: sans-serif;
+  text-align: center;
+  line-height: 1;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  max-width: 50%;
+  max-height: 50%;
+  padding: 20px 40px;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  background-image: url('https://lorempixel.com/400/200/');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+ +

HTML

+ +
<div class="container">
+  <div class="box">
+    <p>backdrop-filter: blur(10px)</p>
+  </div>
+</div>
+
+ +

结果

+ +

{{EmbedLiveSample("Example", 600, 400)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}{{Spec2('Filters 2.0')}}初始版本。
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.backdrop-filter")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/backface-visibility/index.html b/files/zh-cn/web/css/backface-visibility/index.html new file mode 100644 index 0000000000..2fb06a1dda --- /dev/null +++ b/files/zh-cn/web/css/backface-visibility/index.html @@ -0,0 +1,207 @@ +--- +title: backface-visibility +slug: Web/CSS/backface-visibility +translation_of: Web/CSS/backface-visibility +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS 属性 backface-visibility 指定当元素背面朝向观察者时是否可见。

+ +
{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}
+ + + +

元素的背面是其正面的镜像。虽然在 2D 中不可见，但是当变换导致元素在 3D 空间中旋转时，背面可以变得可见。 （此属性对 2D 变换没有影响，它没有透视。）

+ +

语法

+ +
/* Keyword values */
+backface-visibility: visible;
+backface-visibility: hidden;
+
+/* Global values */
+backface-visibility: inherit;
+backface-visibility: initial;
+backface-visibility: unset;
+ +

backface-visibility 属性可以指定为下面列出的值

+ +

值

+ +
+
visible
+
背面朝向用户时可见。
+
hidden
+
背面朝向用户时不可见。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

举例

+ +

这个示例展示了一个拥有透明表面的立方体。

+ +

HTML

+ +
<table>
+  <tr>
+    <th><code>backface-visibility: visible;</code></th>
+    <th><code>backface-visibility: hidden;</code></th>
+  </tr>
+  <tr>
+    <td>
+      <div class="container">
+        <div class="cube showbf">
+          <div class="face front">1</div>
+          <div class="face back">2</div>
+          <div class="face right">3</div>
+          <div class="face left">4</div>
+          <div class="face top">5</div>
+          <div class="face bottom">6</div>
+        </div>
+      </div>
+      <p>
+        Since all faces are partially transparent,
+        the back faces (2, 4, 5) are visible
+        through the front faces (1, 3, 6).
+      </p>
+    </td>
+    <td>
+      <div class="container">
+        <div class="cube hidebf">
+          <div class="face front">1</div>
+          <div class="face back">2</div>
+          <div class="face right">3</div>
+          <div class="face left">4</div>
+          <div class="face top">5</div>
+          <div class="face bottom">6</div>
+        </div>
+      </div>
+      <p>
+        The three back faces (2, 4, 5) are
+        hidden.
+      </p>
+    </td>
+  </tr>
+</table>
+ +

CSS

+ +
/* Classes that will show or hide the
+   three back faces of the "cube" */
+.showbf div {
+  backface-visibility: visible;
+}
+
+.hidebf div {
+  backface-visibility: hidden;
+}
+
+/* Define the container div, the cube div, and a generic face */
+.container {
+  width: 150px;
+  height: 150px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  perspective: 550px;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* Define each face based on direction */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Make the table a little nicer */
+th, p, td {
+  background-color: #EEEEEE;
+  margin: 0px;
+  padding: 6px;
+  font-family: sans-serif;
+  text-align: left;
+}
+ +

结果

+ +

{{EmbedLiveSample('Example', '100%', 360)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}{{Spec2('CSS Transforms 2')}}Initial definition.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.backface-visibility")}}

+ +

相关连接

+ + diff --git a/files/zh-cn/web/css/background-attachment/index.html b/files/zh-cn/web/css/background-attachment/index.html new file mode 100644 index 0000000000..4247605e0c --- /dev/null +++ b/files/zh-cn/web/css/background-attachment/index.html @@ -0,0 +1,149 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS Background + - CSS Property + - CSS_参考 + - Reference +translation_of: Web/CSS/background-attachment +--- +
{{CSSRef}}
+ +

background-attachment CSS 属性决定背景图像的位置是在{{glossary("视口")}}内固定，或者随着包含它的区块滚动。

+ +
{{EmbedInteractiveExample("pages/css/background-attachment.html")}}
+ + + +

语法

+ +
/* 关键 属性值 */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* 全局 属性值 */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;
+ +

取值

+ +
+
fixed
+
此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
+
local
+
此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
+
scroll
+
此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。
+
+

标准语法

+
+
+ +
{{csssyntax}}
+ +

例子

+ +

简单的例子

+ +

CSS样式表

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+
+ +

HTML源码

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+</p>
+ +

效果

+ +

{{EmbedLiveSample("简单的例子")}}

+ +

多背景图支持

+ +

此属性支持多张背景图片。你可以用逗号分隔来为每一张背景图片指定不同的<attachment>属性值。每一张背景图片顺序对应相应的 attachment 属性。

+ +

CSS样式表

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}
+ +

HTML源码

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+</p>
+ +

效果

+ +

{{EmbedLiveSample("多背景图支持")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
CSS版本推荐状态点评
{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}{{Spec2('CSS3 Backgrounds')}}该简单上手的属性已经支持更多的背景图和局部(local)值
{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}{{Spec2('CSS2.1')}}无明显变化
{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}{{Spec2('CSS1')}}无明显变化
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.background-attachment")}}

+ +
+ +

参见

+ + diff --git a/files/zh-cn/web/css/background-blend-mode/index.html b/files/zh-cn/web/css/background-blend-mode/index.html new file mode 100644 index 0000000000..0a56ddcfa5 --- /dev/null +++ b/files/zh-cn/web/css/background-blend-mode/index.html @@ -0,0 +1,149 @@ +--- +title: background-blend-mode +slug: Web/CSS/background-blend-mode +translation_of: Web/CSS/background-blend-mode +--- +

{{CSSRef()}}

+ +

概述

+ +

background-blend-mode CSS属性定义该元素的背景图片，以及背景色如何混合。

+ +

混合模式应该按{{cssxref("background-image")}} CSS属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等，它会被截取至相等的数量。

+ +

{{cssinfo}}

+ +

语法

+ +
Formal syntax:  {{csssyntax("background-blend-mode")}}
+ +
/* 单值 */
+background-blend-mode: normal;
+
+/* 双值，每个背景一个值 */
+background-blend-mode: darken, luminosity;
+
+background-blend-mode: initial;
+background-blend-mode: inherit;
+background-blend-mode: unset;
+
+ +

值

+ +

<blend-mode>

+ +
+
一个{{cssxref("<blend-mode>")}}定义混合的模式，可以有多个值，用逗号间隔。
+
+ +

示例

+ + + + + + + +

{{ EmbedLiveSample('Examples', "330", "330") }}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{ SpecName('Compositing', '#background-blend-mode', 'background-blend-mode') }}{{ Spec2('Compositing') }}首次定义
+ +

浏览器兼容性

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support35{{CompatGeckoDesktop('30.0')}}{{CompatNo()}}227.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo()}}{{CompatGeckoMobile('30.0')}}{{CompatNo()}}22iOS 8
+
+ +

参见

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("mix-blend-mode")}}
    • +
diff --git a/files/zh-cn/web/css/background-clip/index.html b/files/zh-cn/web/css/background-clip/index.html new file mode 100644 index 0000000000..5f5f6cb3bb --- /dev/null +++ b/files/zh-cn/web/css/background-clip/index.html @@ -0,0 +1,127 @@ +--- +title: background-clip +slug: Web/CSS/background-clip +tags: + - CSS + - CSS Background + - CSS Property + - Clip + - Reference +translation_of: Web/CSS/background-clip +--- +
{{CSSRef}}
+ +

background-clip  设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

+ +
{{EmbedInteractiveExample("pages/css/background-clip.html")}}
+ + + +

如果没有设置背景图片（{{cssxref("background-image")}}）或背景颜色（{{cssxref("background-color")}}），那么这个属性只有在边框（ {{cssxref("border")}}）被设置为非固实（soild）、透明或半透明时才能看到视觉效果（与 {{cssxref("border-style")}} 或 {{cssxref("border-image")}} 有关），否则，本属性产生的样式变化会被边框覆盖。

+ +

语法

+ +
/* Keyword values */
+background-clip: border-box;
+background-clip: padding-box;
+background-clip: content-box;
+background-clip: text;
+
+/* Global values */
+background-clip: inherit;
+background-clip: initial;
+background-clip: unset;
+
+ +

值

+ +
+
border-box
+
背景延伸至边框外沿（但是在边框下层）。
+
padding-box
+
背景延伸至内边距（{{cssxref("padding")}}）外沿。不会绘制到边框处。
+
content-box
+
背景被裁剪至内容区（content box）外沿。
+
text {{experimental_inline}}
+
背景被裁剪成文字的前景色。
+
+ +

标准语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<p class="border-box">The background extends behind the border.</p>
+<p class="padding-box">The background extends to the inside edge of the border.</p>
+<p class="content-box">The background extends only to the edge of the content box.</p>
+<p class="text">The background is clipped to the foreground text.</p>
+
+ +

CSS

+ +
p {
+  border: .8em darkviolet;
+  border-style: dotted double;
+  margin: 1em 0;
+  padding: 1.4em;
+  background: linear-gradient(60deg, red, yellow, red, yellow, red);
+  font: 900 1.2em sans-serif;
+  text-decoration: underline;
+}
+
+.border-box { background-clip: border-box; }
+.padding-box { background-clip: padding-box; }
+.content-box { background-clip: content-box; }
+
+.text {
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: rgba(0,0,0,.2);
+}
+ +

结果

+ +

{{EmbedLiveSample('Examples', 600, 580)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}{{Spec2('CSS3 Backgrounds')}}Initial definition.
{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}{{Spec2('CSS4 Backgrounds')}}Add text value.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.background-clip")}}

+ +

参见

+ +
    +
  • The {{cssxref("clip-path")}} property creates a clipping region that defines what part of an entire element should be displayed.
    • +
  • Background properties: {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}
    • +
  • Introduction to the CSS box model
    • +
diff --git a/files/zh-cn/web/css/background-color/index.html b/files/zh-cn/web/css/background-color/index.html new file mode 100644 index 0000000000..85e0ff100f --- /dev/null +++ b/files/zh-cn/web/css/background-color/index.html @@ -0,0 +1,183 @@ +--- +title: background-color +slug: Web/CSS/background-color +tags: + - CSS Background + - CSS Property + - CSS_参考 + - Reference +translation_of: Web/CSS/background-color +--- +
{{CSSRef}}
+ +

概览

+ +

CSS属性中的 background-color 会设置元素的背景色, 属性的值为颜色值或关键字"transparent"二者选其一.

+ +
{{cssinfo}}
+ +

语法

+ +
/* Keyword values */
+background-color: red;
+
+/* Hexadecimal value */
+background-color: #bbff00;
+
+/* RGB value */
+background-color: rgb(255, 255, 128);
+
+/* HSLA value */
+background-color: hsla(50, 33%, 25%, 0.75);
+
+/* Special keyword values */
+background-color: currentColor;
+background-color: transparent;
+
+/* Global values */
+background-color: inherit;
+background-color: initial;
+background-color: unset;
+
+ +
+
background-color 属性只能使用 <color> 值。
+
+ +

取值

+ +
+
<color>
+
一个描述背景统一颜色的 CSS {{cssxref("<color>")}} 值。即使一个或几个的 {{cssxref("background-image")}} 被定义，如果图像是不透明的，通过透明度该颜色也能影响到渲染。在 CSS 中，transparent 是一种颜色。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<div class="exampleone">
+ Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="exampletwo">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="examplethree">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+ +

CSS

+ +
.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Examples","200","150")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}{{Spec2('CSS3 Backgrounds')}}Though technically removing thetransparentkeyword, this doesn't change anything as it has been incorporated as a true {{cssxref("<color>")}}
{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}{{Spec2('CSS2.1')}}没有变化
{{SpecName('CSS1', '#background-color', 'background-color')}}{{Spec2('CSS1')}}初始定义
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
特性Firefox (Gecko)ChromeInternet ExplorerOperaSafari (WebKit)
基础支持{{CompatGeckoDesktop("1.0")}}1.04.0 [1]3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
特性Firefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
基础支持{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1]: In IE8-9, there is a bug where a computed {{cssxref("background-color")}} of transparent causes click events to not get fired on overlaid elements. See the click event documentation for details.

+ +

查看更多

+ + diff --git a/files/zh-cn/web/css/background-image/index.html b/files/zh-cn/web/css/background-image/index.html new file mode 100644 index 0000000000..c16d7aa861 --- /dev/null +++ b/files/zh-cn/web/css/background-image/index.html @@ -0,0 +1,150 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS Background + - CSS Property + - CSS_参考 + - Reference +translation_of: Web/CSS/background-image +--- +
{{CSSRef}}
+ +

CSS background-image 属性用于为一个元素设置一个或者多个背景图像。

+ +
{{EmbedInteractiveExample("pages/css/background-image.html")}}
+ + + +

在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。

+ +

然后元素的边框 border 会在它们之上被绘制，而 {{cssxref("background-color")}} 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系，需要在CSS属性{{cssxref("background-clip")}} 和 {{cssxref("background-origin")}} 中定义。

+ +

如果一个指定的图像无法被绘制 (比如，被指定的 URI 所表示的文件无法被加载)，浏览器会将此情况等同于其值被设为 none。

+ +
注意： 即使图像是不透明的，背景色在通常情况下并不会被显示，web开发者仍然应该指定 {{cssxref("background-color")}} 属性。如果图像无法被加载—例如，在网络连接断开的情况下—背景色就会被绘制。
+ +

语法

+ +

每个背景图像被明确规定为关键字 none 或是一个 {{cssxref("<image>")}} 值。

+ +

可以提供由逗号分隔的多个值来指定多个背景图像：

+ +
background-image:
+  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
+  url('https://mdn.mozillademos.org/files/7693/catfront.png');
+ +

取值

+ +
+
none
+
是一个表示无背景图的关键字。
+
<image>
+
{{cssxref("<image>")}} 用来标记将要显示的图片. 支持多背景设置，背景之间以逗号隔开.
+
+ +

正规语法

+ +
{{csssyntax}}
+ +

示例

+ +

注意星星图片部分透明且位于猫图片上方.

+ +

HTML

+ +
<div>
+  <p class="catsandstars">
+    This paragraph is full of cats<br />and stars.
+  </p>
+  <p>This paragraph is not.</p>
+  <p class="catsandstars">
+    Here are more cats for you.<br />Look at them!
+  </p>
+  <p>And no more.</p>
+</div>
+ +

CSS

+ +
p {
+  font-size: 1.5em;
+  color: #FE7F88;
+  background-image: none;
+  background-color: transparent;
+}
+
+div {
+  background-image:
+      url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+.catsandstars {
+  background-image:
+      url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+      url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Examples')}}

+ +

可访问性相关

+ +

浏览器不会向辅助技术提供有关背景图像的任何特殊信息。这对于屏幕阅读器来说非常重要，因为屏幕阅读器不会告知用户它的存在，因而不能向用户传达任何信息。如果图像包含对理解页面总体目的至关重要的信息，则最好在文档中作出语义性地描述（describe it semantically）。

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#background-image', 'background-image')}}{{Spec2('CSS3 Backgrounds')}}From CSS2 Revision 1, the property has been extended to support multiple backgrounds and any {{cssxref("<image>")}} CSS data type.
{{SpecName('CSS2.2', 'colors.html#propdef-background-image', 'background-image')}}{{Spec2('CSS2.2')}}From CSS1, the way images with and without intrinsic dimensions are handled is now described.
{{SpecName('CSS1', '#background-image', 'background-image')}}{{Spec2('CSS1')}}Initial definition.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +
{{Compat("css.properties.background-image")}}
+ +

[1] 如果 about:config 中 browser.display.use_document_colors  被设置为 false, 背景图像将不会展示.

+ +

[2] 当前的iOS Safari 版本 (5.0) CSS 背景属性对SVG的支持并不完善. iOS Safari (5.0)之前的版本亦是如此.

+ +

参见

+ +
    +
  • Implementing image sprites in CSS
    • +
  • {{HTMLElement("img")}}
    • +
  • 与图像相关的数据类型: {{cssxref("<image>")}}, {{cssxref("<gradient>")}}
    • +
  • 与图像相关的函数: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("element")}}, {{cssxref("_image", "image()")}}, {{cssxref("image-set")}}, {{cssxref("url", "url()")}}
    • +
diff --git a/files/zh-cn/web/css/background-origin/index.html b/files/zh-cn/web/css/background-origin/index.html new file mode 100644 index 0000000000..3109f95def --- /dev/null +++ b/files/zh-cn/web/css/background-origin/index.html @@ -0,0 +1,169 @@ +--- +title: background-origin +slug: Web/CSS/background-origin +translation_of: Web/CSS/background-origin +--- +
{{CSSRef}}
+ +

摘要

+ +

 background-origin 规定了指定背景图片{{cssxref("background-image")}} 属性的原点位置的背景相对区域.

+ +

注意：当使用 {{Cssxref("background-attachment")}} 为fixed时，该属性将被忽略不起作用。

+ +
假如{{cssxref("background")}}简写中没有设置该值，那么在 background 简写值后指定background-origin，那么后面的值就会覆盖简写值，其实说白了，就是后出现的值会覆盖前面的值。
+ +

{{cssinfo}}

+ +

语法

+ +
Formal syntax: {{csssyntax("background-origin")}}
+ +
background-origin: border-box
+background-origin: padding-box
+background-origin: content-box
+
+background-origin: inherit
+
+ +

属性值

+ +
+
border-box
+
背景图片的摆放以border区域为参考
+
padding-box
+
背景图片的摆放以padding区域为参考
+
content-box
+
背景图片的摆放以content区域为参考
+
+

形式化语法

+ How to read CSS syntax. + + 
{{csssyntax("background-origin")}}
+
+
+ +

例子

+ +
 .example {
+   border: 10px double;
+   padding: 10px;
+   background: url('image.jpg');
+   background-position: center left;
+   /* 背景将在内容区padding内部填充 */
+   background-origin: content-box;
+}
+
+ +
#example2 {
+    border: 4px solid black;
+    padding: 10px;
+    background: url('image.gif');
+    background-repeat: no-repeat;
+    background-origin: border-box;
+ }
+ +
div {
+  background-image: url('logo.jpg'), url('mainback.png');
+  background-position: top right, 0px 0px;
+  background-origin: content-box, padding-box;
+}
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}}{{Spec2('CSS3 Backgrounds')}} 
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0 [3]{{CompatGeckoDesktop("2.0")}} [1]9.0 [2]10.53.0 (522) [3]
content-box1.0 [3]{{CompatGeckoDesktop("2.0")}} [1]9.0 [2]{{CompatNo}}3.0 (522) [3]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
content-box{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Gecko supported, from version 1.1 to version 1.9.2, which corresponds to Firefox 1.0 to 3.6 included, a different, and prefixed, syntax: -moz-background-origin: padding | border.

+ +

[2] Internet Explorer up to version 7 behaves as if there was a background-origin: border-box; Internet Explorer 8 behaves as if it were background-origin: padding-box; which is the regular default value.

+ +

[3] Webkit also supports the prefixed version of this proprietary, and in that case, in addition to the current keywords, the alternative synonyms: padding, border, and content.

+ +

[4] Konqueror 3.5.4 supports -khtml-background-origin.

+ +

相关文献

+ + diff --git a/files/zh-cn/web/css/background-position-x/index.html b/files/zh-cn/web/css/background-position-x/index.html new file mode 100644 index 0000000000..37a9017574 --- /dev/null +++ b/files/zh-cn/web/css/background-position-x/index.html @@ -0,0 +1,100 @@ +--- +title: background-position-x +slug: Web/CSS/background-position-x +tags: + - CSS + - CSS Background + - CSS Property +translation_of: Web/CSS/background-position-x +--- +
{{CSSRef}}
+ +

概要

+ +

background-position-x CSS 属性设置水平方向的位置，与每个背景图片等位置层设置属性 {{cssxref("background-origin")}}相关。更多信息请查看{{cssxref("background-position")}}属性，这个用的比较普遍。

+ +
注意：这个属性的值会被后面声明的属性覆盖掉，如{{cssxref("background")}}和{{cssxref("background-position")}}等简写的属性。
+ +

{{cssinfo}}

+ +

语法

+ +
/* Keyword values */
+background-position-x: left;
+background-position-x: center;
+background-position-x: right;
+
+/* <percentage> values */
+background-position-x: 25%;
+
+/* <length> values */
+background-position-x: 0px;
+background-position-x: 1cm;
+background-position-x: 8em;
+
+/* side-relative values */
+background-position-x: right 3px;
+background-position-x: left 25%;
+
+/* Multiple values */
+background-position-x: 0px, center;
+
+/* Global values */
+background-position-x: inherit;
+background-position-x: initial;
+background-position-x: unset;
+
+ +

值

+ +
+
left
+
在位置层上相对于左边的位置。
+
center
+
在位置层上相对于中间点的位置。
+
right
+
在位置层上相对于右边的位置。
+
<length>
+
{{cssxref("<length>")}}值是定义相对于位置层边缘的距离，边缘默认为左边。
+
<percentage>
+
{{cssxref("<percentage>")}}值是定义相对于位置层边缘的距离百分比，边缘默认为左边。
+
+ +

正规语法

+ +
{{csssyntax}}
+ +

说明

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}{{Spec2('CSS4 Backgrounds')}}Initial specification of longhand sub properties of {{cssxref("background-position")}}  to match longstanding implementations.
+ +

兼容性

+ + + +

{{Compat("css/properties/background-position-x", "background-position-x")}}

+ +

更多

+ +
    +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-position-y")}}
    • +
  • {{cssxref("background-position-inline")}}
    • +
  • {{cssxref("background-position-block")}}
    • +
  • Multiple backgrounds
    • +
diff --git a/files/zh-cn/web/css/background-position-y/index.html b/files/zh-cn/web/css/background-position-y/index.html new file mode 100644 index 0000000000..a596d59547 --- /dev/null +++ b/files/zh-cn/web/css/background-position-y/index.html @@ -0,0 +1,100 @@ +--- +title: background-position-y +slug: Web/CSS/background-position-y +tags: + - CSS 背景 + - 参考 + - 实验性 +translation_of: Web/CSS/background-position-y +--- +
{{CSSRef}}
+ +

摘要

+ +

background-position-y 属性用于设置初始状态时背景图片在垂直方向上的位置,这个位置相对于通过 {{cssxref("background-origin")}} 定义的背景层的原点进行定位. 需要获得更多的信息可以查看{{cssxref("background-position")}} 属性,这个属性已经得到了长久且广泛的支持.

+ +
注意: background-position-y 设定的值会被 {{cssxref("background")}} 或者是 {{cssxref("background-position")}} 的简写属性的background-position-x后面的值所覆盖.
+ +
/* Keyword values */
+background-position-y: top;
+background-position-y: center;
+background-position-y: bottom;
+
+/* <percentage> values */
+background-position-y: 25%;
+
+/* <length> values */
+background-position-y: 0px;
+background-position-y: 1cm;
+background-position-y: 8em;
+
+/* side-relative values */
+background-position-y: bottom 3px;
+background-position-y: bottom 10%;
+
+/* Multiple values */
+background-position-y: 0px, center;
+
+/* Global values */
+background-position-y: inherit;
+background-position-y: initial;
+background-position-y: unset;
+
+ +

{{cssinfo}}

+ +

语法

+ +

合法值

+ +
+
top
+
将背景图片的上边界与背景位置层的上边界对齐.
+
center
+
将背景图片垂直方向上的中线与背景位置层的垂直方向中线对齐.
+
bottom
+
将背景图片的下边界与背景位置层的下边界对齐.
+
<length>
+
 通过{{cssxref("<length>")}} 直接设定具体的数值,该数值定义了背景图片垂直方向的上边界相对于当前背景层(content-box/padding-box/border-box)的垂直方向上边界的偏移量,默认情况下是padding-box.
+
<percentage>
+
通过{{cssxref("<percentage>")}} 百分比的设置,该百分比定义了背景图片垂直方向的上边界相对于当前背景层(content-box/padding-box/border-box)的垂直方向上边界的偏移百分比,从而得到偏移量,该偏移量的计算方法是:(当前背景层的高-背景图片的高) * 百分比,高度差和百分比都保留符号,例如(100px - 200px) * (-10%) = 10px那么偏移量就是正的10px(向下为正方向),默认情况下是padding-box.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-y')}}{{Spec2('CSS4 Backgrounds')}}Initial specification of longhand subproperties of {{cssxref("background-position")}}, to match longstanding implementations.
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.background-position-y")}}

+ +

另见

+ +
    +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-position-x")}}
    • +
  • {{cssxref("background-position-inline")}}
    • +
  • {{cssxref("background-position-block")}}
    • +
  • Multiple backgrounds
    • +
diff --git a/files/zh-cn/web/css/background-position/index.html b/files/zh-cn/web/css/background-position/index.html new file mode 100644 index 0000000000..dedc99e365 --- /dev/null +++ b/files/zh-cn/web/css/background-position/index.html @@ -0,0 +1,279 @@ +--- +title: background-position +slug: Web/CSS/background-position +tags: + - Background + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-position +--- +

{{CSSRef}}

+ +

background-position 为每一个背景图片设置初始位置。 这个位置是相对于由 {{cssxref("background-origin")}} 定义的位置图层的。

+ +

{{EmbedInteractiveExample("pages/css/background-position.html")}}

+ +

语法

+ +
/* Keyword values */
+background-position: top;
+background-position: bottom;
+background-position: left;
+background-position: right;
+background-position: center;
+
+/* <percentage> values */
+background-position: 25% 75%;
+
+/* <length> values */
+background-position: 0 0;
+background-position: 1cm 2cm;
+background-position: 10ch 8em;
+
+/* Multiple images */
+background-position: 0 0, center;
+
+/* Edge offsets values */
+background-position: bottom 10px right 20px;
+background-position: right 3em bottom 10px;
+background-position: bottom 10px right;
+background-position: top right 10px;
+
+/* Global values */
+background-position: inherit;
+background-position: initial;
+background-position: unset;
+
+ +

background-position 属性被指定为一个或多个 <position> 值，用逗号隔开。

+ +

值

+ +
    +
  • 关键字 center，用来居中背景图片。
    • +
  • 关键字 top, left, bottom, right 中的一个。用来指定把这个项目（原文为 item）放在哪一个边缘。另一个维度被设置成 50%，所以这个项目（原文为 item）被放在指定边缘的中间位置。
    • +
  • {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}}。指定相对于左边缘的 x 坐标，y 坐标被设置成 50%。
    • +
+ +
    +
  • 如果一个值是  top 或  bottom，那么另一个值不应该是 top 或 bottom。
    • +
  • 如果一个值是  left 或   right，那么另一个值不应该是 left 或 right 。
    • +
+ +
    +
  • +50px（将图片的左边界对齐容器的中线）
    • +
  • 0px（图片的左边界与容器左边界重合）
    • +
  • -100px（将图片相对容器左移100px，这意味着图片中部的100px内容将出现在容器中）
    • +
  • -200px（将图片相对容器左移200px，这意味着图片右部分的100px内容将出现在容器中）
    • +
  • -250px（将图片相对容器左移250px，这意味着图片的右边界对齐容器的中线）
    • +
+ +

    另外需要注意，如果背景图片的大小和容器一样，那设置百分比的值将永远无效，因为“容器和图片的差”为0（图片永远填满容器，并且图片的相对位置和容器的相对位置永远重合）。在这种情况下，需要为偏移使用绝对值（例如px）。

+ +
+
<position>
+
  一个 {{cssxref("<position>")}} 定义一组 x/y 坐标（相对于一个元素盒子模型的边缘），来放置这个项目（原文为 item）。它可以被定义为一个值或者两个值。如果被定义为两个值，那么第一个值代表水平位置，第二个代表垂直垂直位置。如果只指定一个值，那么第二个值默认为 center。
+
+

一个值的语法: 这个值可以是：

+
+
+

两个值的语法: 一个定义 x 坐标，另一个定义 y 坐标。每个值可以是：

+ +
    +
  • 关键字 top, left, bottom, right 中的一个。 如果这里给出 left 或 right，那么这个值定义 x 轴位置，另一个值定义 y 轴位置。如果这里给出 top 或  bottom，那么这个值定义 y 轴位置，另一个值定义 x 轴位置。
    • +
  • {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}}。如果另一个值是  left 或  right，那么这个值（指 {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}}）定义相对于上边缘的 y 轴位置。 如果两个值都是 <length> 或 <percentage>，那么第一个值定义 x 轴位置，第二个定义 y 轴位置。
    • +
+ +

注意：

+
+
+
    +
+ +

也就是说，top top 和 left left 是无效的。

+
+
至于百分比：
+

+ 百分比值的偏移指定图片的相对位置和容器的相对位置重合。值0%代表图片的左边界（或上边界）和容器的左边界（上边界）重合。值100%代表图片的右边界（或下边界）和容器的右边界（或下边界）重合。值50%则代表图片的中点和容器的中点重合。
+
+ 当指定百分比值的时候，实际上执行了以下的计算公式（该公式可以用数学方式定义图片和容器相对位置重合）：
+
+ (container width - image width) * (position x%) = (x offset value)
+ (container height - image height) * (position y%) = (y offset value)
+
+ 使用X坐标来举个例子，假设有一个300px宽的图片，将这个图片使用到一个100px宽的容器中，并且将background-size设置成自动：
+
+ 100px - 300px = -200px (容器和图片的宽度差)
+
+ 当对background-position设置值依次为-25%，0%，50%，100%，125%，得到图片相对容器的偏移值为：
+
+ -200px * -25% = 50px
+ -200px * 0% = 0px
+ -200px * 50% = -100px
+ -200px * 100% = -200px
+ -200px * 125% = -250px
+
+ 对于这些例子中设置的偏移，图片相对容器真实的偏移值就是：
+
+
+ +

语法规范

+ +
{{csssyntax}}
+ +

例子

+ +

下面三个例子使用 {{cssxref("background")}} 来创建一个包含一个星星的黄色长方形元素。每个例子中，星星的位置是不一样的。第三个例子阐明了如何

+ +

为两个不同的背景图片指定位置。

+ +

HTML 内容

+ +
<div class="exampleone">Example One</div>
+<div class="exampletwo">Example Two</div>
+<div class="examplethree">Example Three</div>
+ +
+ +
+ +
+ +

CSS 内容

+ +
/* 被所有 div 共享 */
+div {
+    background-color: #FFEE99;
+    background-repeat: no-repeat;
+    width: 300px;
+    height: 80px;
+    margin-bottom: 12px;
+}
+
+
+/* 这些例子使用 `background` 缩写 */
+.exampleone {
+    background: url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
+}
+.exampletwo {
+    background: url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif") #FFEE99 3em 50% no-repeat;
+}
+
+/*
+多背景图片：每个图片依次和相应的 `background-position` 匹配
+*/
+.examplethree {
+    background-image:    url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif"),
+                         url("https://mdn.mozillademos.org/files/7693/catfront.png");
+    background-position: 0px 0px,
+                         center;
+}
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +

结果

+ +

{{EmbedLiveSample('例子', 420, 200)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#background-position', 'background-position')}}{{Spec2('CSS3 Backgrounds')}}Added support for multiple backgrounds, the four-value syntax and modified the percentage definition to match implementations.
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}}{{Spec2('CSS2.1')}}Allows for the mix of keyword values and {{cssxref("<length>")}} and {{cssxref("<percentage>")}} values.
{{SpecName('CSS1', '#background-position', 'background-position')}}{{Spec2('CSS1')}}
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ +

{{Compat("css.properties.background-position")}}

+ +

参见

+ +
    +
  • {{cssxref("background-position-x")}}
    • +
  • {{cssxref("background-position-y")}}
    • +
  • {{cssxref("background-position-inline")}}
    • +
  • {{cssxref("background-position-block")}}
    • +
  • Using multiple backgrounds
    • +
  • {{cssxref("transform-origin")}}
    • +
diff --git a/files/zh-cn/web/css/background-repeat/index.html b/files/zh-cn/web/css/background-repeat/index.html new file mode 100644 index 0000000000..897b4786c7 --- /dev/null +++ b/files/zh-cn/web/css/background-repeat/index.html @@ -0,0 +1,211 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +tags: + - CSS_参考 + - background-repeat +translation_of: Web/CSS/background-repeat +--- +

{{ CSSRef() }}

+ +

 background-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

+ +

{{EmbedInteractiveExample("pages/css/background-repeat.html")}}

+ + + +

默认情况下，重复的图像被剪裁为元素的大小，但它们可以缩放 (使用 round) 或者均匀地分布 (使用 space).

+ +

语法

+ +
/* 单值语法 */
+background-repeat: repeat-x;
+background-repeat: repeat-y;
+background-repeat: repeat;
+background-repeat: space;
+background-repeat: round;
+background-repeat: no-repeat;
+
+/* 双值语法: 水平horizontal | 垂直vertical */
+background-repeat: repeat space;
+background-repeat: repeat repeat;
+background-repeat: round space;
+background-repeat: no-repeat round;
+
+background-repeat: inherit;
+ +

值

+ +
+
<repeat-style>
+
单值语法是完整的双值语法的简写:
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
单值等价于双值
repeat-xrepeat no-repeat
repeat-yno-repeat repeat
repeatrepeat repeat
spacespace space
roundround round
no-repeatno-repeat no-repeat
+ 在双值语法中, 第一个值表示水平重复行为, 第二个值表示垂直重复行为. 下面是关于每一个值是怎么工作的具体说明:
+
+ + + + + + + + + + + + + + + + + + + +
repeat +

图像会按需重复来覆盖整个背景图片所在的区域. 最后一个图像会被裁剪, 如果它的大小不合适的话.

+
space +

图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. {{cssxref("background-position")}}属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像.

+
round +

随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px.

+ +

译者注: 关键是浏览器怎么计算什么时候应该添加一个图像进来, 而不是继续伸展.

+
no-repeat +

图像不会被重复(因为背景图像所在的区域将可能没有完全被覆盖). 那个没有被重复的背景图像的位置是由{{cssxref("background-position")}}属性来决定.

+
+
+
+ +

标准语法

+ +
{{csssyntax}}
+
+ +

例子

+ +

HTML

+ +
<ol>
+    <li>no-repeat
+        <div class="one">&nbsp;</div>
+    </li>
+    <li>repeat
+        <div class="two">&nbsp;</div>
+    </li>
+    <li>repeat-x
+        <div class="three">&nbsp;</div>
+    </li>
+    <li>repeat-y
+        <div class="four">&nbsp;</div>
+    </li>
+    <li>repeat-x, repeat-y (multiple images)
+        <div class="five">&nbsp;</div>
+    </li>
+</ol>
+ +

CSS

+ +
/* Shared for all DIVS in example */
+li {margin-bottom: 12px;}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 144px;
+    height: 84px;
+}
+
+/* 因为 space 和 round 当前没有被广泛支持的, 所以没有添加*/
+.one {
+    background-repeat: no-repeat;
+}
+.two {
+    background-repeat: repeat;
+}
+.three {
+    background-repeat: repeat-x;
+}
+.four {
+    background-repeat: repeat-y;
+}
+
+/* Multiple images */
+.five {
+    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+    background-repeat: repeat-x,
+                       repeat-y;
+    height: 144px;
+}
+ +

结果

+ +

在这个例子中, 每一个列表项都使用了不同的background-repeat语法.

+ +

{{EmbedLiveSample("例子", 240, 360)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Specification 规范Status 状态Comment 内容
{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}{{Spec2('CSS3 Backgrounds')}}Added support for multiple background images, the two-value syntax allowing distinct repetition behavior for the horizontal and vertical directions, the space and round keywords, and for backgrounds on inline-level element by defining precisely the background painting area.
{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}{{Spec2('CSS2.1')}}No significant changes
{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}{{Spec2('CSS1')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.background-repeat")}}

diff --git a/files/zh-cn/web/css/background-size/index.html b/files/zh-cn/web/css/background-size/index.html new file mode 100644 index 0000000000..1b2db84c26 --- /dev/null +++ b/files/zh-cn/web/css/background-size/index.html @@ -0,0 +1,274 @@ +--- +title: background-size +slug: Web/CSS/background-size +tags: + - CSS + - CSS Background + - 背景 +translation_of: Web/CSS/background-size +--- +
{{CSSRef}}
+ +

background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

+ +

{{EmbedInteractiveExample("pages/css/background-size.html")}}

+ + + +
/* 关键字 */
+background-size: cover
+background-size: contain
+
+/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
+background-size: 50%
+background-size: 3em
+background-size: 12px
+background-size: auto
+
+/* 两个值 */
+/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
+background-size: 50% auto
+background-size: 3em 25%
+background-size: auto 6px
+background-size: auto auto
+
+/* 逗号分隔的多个值：设置多重背景 */
+background-size: auto, auto     /* 不同于background-size: auto auto */
+background-size: 50%, 25%, 25%
+background-size: 6px, auto, contain
+
+/* 全局属性 */
+background-size: inherit;
+background-size: initial;
+background-size: unset;
+ +
+ + + +
+ +

{{EmbedLiveSample("background-size", 1200, 300, "", "", "example-outcome-frame")}}

+ +

注意：没有被背景图片覆盖的背景区域仍然会显示用{{cssxref("background-color")}}属性设置的背景颜色。此外，如果背景图片设置了透明或者半透明属性，衬在背景图片后面的背景色也会显示出来。

+ +

{{cssinfo}}

+ +

语法

+ +

单张图片的背景大小可以使用以下三种方法中的一种来规定：

+ +
    +
  • 使用关键词 contain
    • +
  • 使用关键词 cover
    • +
  • 设定宽度和高度值
    • +
+ +

当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值:

+ +
    +
  • 如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为auto。
    • +
  • 如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。
    • +
+ +

每个值可以是<length>, 是 <percentage>, 或者 auto.
+
+ 示例：

+ +
background-size: contain;
+
+background-size: 50%;
+background-size: 3em;
+
+background-size: auto 1em;
+background-size: 50% 25%;
+ +


+ 为了设定超过一张以上的图片尺寸时，需要提供多项数值，它们通过逗号分隔。

+ +
background-size: 50% 25%, contain, 3em;
+ +

属性值

+ +
+
<length>
+
{{cssxref("<length>")}} 值，指定背景图片大小，不能为负值。
+
<percentage>
+
{{cssxref("<percentage>")}} 值，指定背景图片相对背景区（background positioning area）的百分比。背景区由{{cssxref("background-origin")}}设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。如果{{cssxref("background-attachment","attachment")}} 为fixed，背景区为浏览器可视区（即视口），不包括滚动条。不能为负值。
+
auto
+
以背景图片的比例缩放背景图片。
+
cover
+
缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。
+
contain
+
缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。
+
+ +

位图一定有固有尺寸与固有比例，矢量图可能两者都有，也可能只有一个。渐变视为只有固有尺寸或者只有固有比例的图片。

+ +
+

{{gecko_callout_heading("8.0")}}

+ +

This behavior changed in Gecko 8.0 {{geckoRelease("8.0")}}. Before this, gradients were treated as images with no intrinsic dimensions, with an intrinsic proportion identical to that of the background positioning area.

+
+ +

由 {{cssxref("-moz-element")}} 生成的背景图片，(which actually match an element) are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion.

+ +
Note: This is not the currently-specified behavior, which is that the intrinsic dimensions and proportion should be those of the element in all cases.
+ +

背景图片大小计算：

+ +
+
如果指定了 background-size 的两个值并且不是auto：
+
背景图片按指定大小渲染。
+
contain 或 cover:
+
保留固有比例，最大的包含或覆盖背景区。如果图像没有固有比例，则按背景区大小。
+
auto 或 auto auto:
+
图像如果有两个长度，则按这个尺寸。如果没有固有尺寸与固有比例，则按背景区的大小。如果没有固有尺寸但是有固有比例， 效果同 contain。如果有一个长度与比例，则由此长度与比例计算大小。如果有一个长度但是没有比例，则使用此长度与背景区相应的长度。
+
一个为 auto 另一个不是auto:
+
如果图像有固有比例，则指定的长度使用指定值，未指定的长度由指定值与固有比例计算。如果图像没有固有比例，则指定的长度使用指定值，未指定的长度使用图像相应的固有长度，若没有固有长度，则使用背景区相应的长度。
+
+ +

注意，对于没有固有尺寸或固有比例的矢量图不是所有的浏览器都支持。特别注意测试Firefox 7- 与Firefox 8+，以确定不同之处能否接受。

+ +

Formal syntax

+ +

如何阅读 CSS 语法。

+ +
{{csssyntax}}
+ +

案例

+ +

background-size: cover 演示 与  background-size: contain 演示 在新窗口打开，这样你可以看到当背景区大小变化时 contain 与 cover 是怎样的。 系列演示：background-size 及其与background-*属性的关联  很好的说明了单独使用 background-size 及与其它属性共同使用。

+ +

备注

+ +

如果用渐变作为背景并且对它使用了background-size ，最好不要只用一个auto， 或者只指定一个宽度值 (例如 background-size: 50%)。对这两种情况 Firefox 8有所改变， 并且目前各浏览器表现不一致，不是全部浏览器都完全支持 CSS3 background-size 规范 与 CSS3 Image Values gradient 规范 。

+ +
.bar {
+       width: 50px; height: 100px;
+       background-image: gradient(...);
+
+       /* 不推荐 */
+       background-size: 25px;
+       background-size: 50%;
+       background-size: auto 50px;
+       background-size: auto 50%;
+
+       /* 可行 */
+       background-size: 25px 50px;
+       background-size: 50% 50%;
+}
+
+ +

特别不推荐对渐变px与auto一起用, 因为Firefox 8之前不能重复渲染，并且对于没有实现Firefox 8渲染特性的浏览器，不知道指定了背景的元素的确切大小。

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

浏览器兼容性

+ +

{{Compat("css.properties.background-size")}}

+ +
+

Polyfills and Workarounds

+ +

For Internet Explorer prior IE8

+ +

Though Internet Explorer 8 doesn't support the background-size property, it is possible to emulate some of its functionality using the non-standard -ms-filter property:

+ +
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
+ +

This simulates the value cover.

+
+ +
+

In Firefox 3.5

+ +

While this property was added in Firefox 3.6, it is possible to stretch a image fully over the background in Firefox 3.5 by using {{cssxref("-moz-border-image")}}.

+
+ +
.foo {
+  background-image: url(bg-image.png);
+
+  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
+     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
+       -o-background-size: 100% 100%;           /* Opera 9.5 */
+          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
+
+  -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
+}
+
+ +

相关链接

+ + diff --git a/files/zh-cn/web/css/background/index.html b/files/zh-cn/web/css/background/index.html new file mode 100644 index 0000000000..a260ec29ae --- /dev/null +++ b/files/zh-cn/web/css/background/index.html @@ -0,0 +1,151 @@ +--- +title: background +slug: Web/CSS/background +tags: + - CSS + - CSS 属性 + - CSS 背景 + - 参考 +translation_of: Web/CSS/background +--- +
{{CSSRef("CSS Background")}}
+ +

background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。

+ +
{{EmbedInteractiveExample("pages/css/background.html")}}
+ + + +

此属性是一个 简写属性，可以在一次声明中定义一个或多个属性：{{cssxref("background-clip")}}、{{cssxref("background-color")}}、{{cssxref("background-image")}}、{{cssxref("background-origin")}}、{{cssxref("background-position")}}、{{cssxref("background-repeat")}}、{{cssxref("background-size")}}，和 {{cssxref("background-attachment")}}。

+ +

对于所有简写属性，任何没有被指定的值都会被设定为它们的 初始值。

+ +

语法

+ +
/* 使用 <background-color> */
+background: green;
+
+/* 使用 <bg-image> 和 <repeat-style> */
+background: url("test.jpg") repeat-y;
+
+/* 使用 <box> 和 <background-color> */
+background: border-box red;
+
+/* 将背景设为一张居中放大的图片 */
+background: no-repeat center/80% url("../img/image.png");
+
+ +

background 属性被指定多个背景层时，使用逗号分隔每个背景层。

+ +

每一层的语法如下：

+ +
    +
  • 在每一层中，下列的值可以出现 0 次或 1 次： + +
    • +
  • <bg-size> 只能紧接着 <position> 出现，以"/"分割，如： "center/80%".
    • +
  • <box> 可能出现 0 次、1 次或 2 次。如果出现 1 次，它同时设定 {{cssxref("background-origin")}} 和 {{cssxref("background-clip")}}。如果出现 2 次，第一次的出现设置 {{cssxref("background-origin")}}，第二次的出现设置 {{cssxref("background-clip")}}。
    • +
  • <background-color> 只能被包含在最后一层。
    • +
+ +
注意:  {{cssxref("background-color")}} 只能在background的最后一个属性上定义，因为整个元素只有一种背景颜色。
+ +

值

+ +

下面的一个或多个值，可以按任意顺序放置：

+ +
+
<attachment>
+
参见 {{ cssxref("background-attachment") }}
+
<box>
+
参见 {{ cssxref("background-clip") }} 和 {{cssxref("background-origin")}}
+
<background-color>
+
参见 {{ cssxref("background-color") }}
+
<bg-image>
+
参见 {{ Cssxref("background-image") }}
+
<position>
+
参见 {{ cssxref("background-position") }}
+
<repeat-style>
+
参见 {{ cssxref("background-repeat") }}
+
<bg-size>
+
参见 {{ cssxref("background-size") }}。
+
+ +

标准语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<p class="topbanner">
+  Starry sky<br/>
+  Twinkle twinkle<br/>
+  Starry sky
+</p>
+<p class="warning">Here is a paragraph<p>
+ +

CSS

+ +
.warning {
+  background: red;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("Examples")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{ SpecName('CSS3 Backgrounds', '#the-background', 'background') }}{{ Spec2('CSS3 Backgrounds') }}此简写属性已经扩展出了多重背景和诸如 {{ cssxref("background-size")}}，{{cssxref("background-origin")}} 与 {{ cssxref("background-clip")}} 等新属性。
{{ SpecName('CSS2.1', 'colors.html#propdef-background', 'background') }}{{ Spec2('CSS2.1') }}无重大修改
{{ SpecName('CSS1', '#background', 'background') }}{{ Spec2('CSS1') }}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.background")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/basic-shape/index.html b/files/zh-cn/web/css/basic-shape/index.html new file mode 100644 index 0000000000..fc41e04039 --- /dev/null +++ b/files/zh-cn/web/css/basic-shape/index.html @@ -0,0 +1,172 @@ +--- +title: +slug: Web/CSS/basic-shape +translation_of: Web/CSS/basic-shape +--- +
{{CSSRef}}
+ +
<basic-shape>是一种表现基础图形的CSS数据类型，作用于{{cssxref("clip-path")}} 与 {{cssxref("shape-outside")}} 属性中。
+ +
+ +

{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}

+ + + +

语法

+ +

<basic-shape>数据类型可以由下列函数得到。

+ +

当构建一个图形时，运用了<basic-shape>值的属性就会定义一个相关的盒模型。基础图形使用的坐标系统即设置相关的盒模型左上角顶点为原点，该坐标轴的x轴正方向为右、y轴的正方向为下。所有以百分比定义的长度将通过相关盒模型与使用的维度重定义。

+ +

图形函数

+ +

以下为当前支持的图形。所有<basic-shape>值都由函数表达式定义，并且遵循属性值定义语法（value definition syntax）。

+ +
+
inset()
+
+ 
inset( <shape-arg>{1,4} [round <border-radius>]? )
+ +

以上函数定义了一个插进的长方形。

+ +

上式的前四个参数分别代表了插进的长方形与相关盒模型的上，右，下与左边界和顶点的偏移量。这些参数遵循边际速记语法（the syntax of the margin shorthand），所以给予一个、两个、或四个值都能设置四个偏移量。

+ +

可选参数<border-radius>用于定义插进长方形顶点的圆弧角度，该参数同上遵循边际速记语法（the syntax of the margin shorthand），给予一个、两个、或四个值都能设置四个偏移量。

+ +

如果一对插进图形在通过堆叠产生的高于当前使用维度的维度中（例如，左右插进图像相叠75%）将会定义一个包围不了任何区域的图形。这种情况会在元素中产生一个空白且平坦的区域。

+
+
circle()
+
+ 
circle( [<shape-radius>]? [at <position>]? )
+ +

<shape-radius> 参数代表了 r， 即圆形的半径， 不接受负数作为该参数的值。一个以百分比表示的值将以公式 sqrt(width^2+height^2)/sqrt(2)计算，其中width与height为相关盒模型的宽与高。

+ +

{{cssxref("<position>")}} 参数定义了圆心的位置。省缺值为盒模型的中心。

+
+
ellipse()
+
+ 
ellipse( [<shape-radius>{2}]? [at <position>]? )
+ +

<shape-radius> 参数代表了 rx 与 ry，其中 rx 代表了x轴方向的半径， ry代表了y轴方向的半径。该参数不接受负数值。以百分比表示的长度将把盒模型的宽与高作为参照，宽作为 rx 的参照值，高作为 ry 的参照值。

+ +

<position>参数定义了椭圆形圆心的位子。其省缺值为盒模型的中心。

+
+
polygon()
+
+ 
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
+ +

<fill-rule> 代表了填充规则（ filling rule ），即，如何填充该多边形。 可选值为 nonzero 和 evenodd。 该参数的省缺值为 nonzero。

+ +

每一对在列表中的参数都代表了多边形顶点的坐标， xi 与 yi ，i代表顶点的编号，即，第i个顶点。

+
+
path(){{Experimental_Inline}}
+
+ 
path( [<fill-rule>,]? <string>)
+ +

可选的 <fill-rule> 表示 filling rule 填充规则. 可选 nonzero （非零环绕规则）和 evenodd （奇偶规则） . 默认是（Default value when omitted） nonzero.

+ +

参数 <string> 是用引号包含的 SVG Path 字符串

+
+
+
+ +

上文未曾解释的参数如下：

+ +
<shape-arg> = <length> | <percentage>
+<shape-radius> = <length> | <percentage> | closest-side | farthest-side
+ +

为一个圆形或椭圆形定义一个半径。其省缺值为 closest-side。

+ +

closest-side 即图形中心到盒模型最近一条边之间的距离。对于圆形，该值在任意维度都表示最近的一条边。对于椭圆形，该值为半径维度最近的一条边。

+ +

farthest-side 取图形中心到盒模型最远一条边之间的距离作为值。对于圆形，该值在任意维度都是最远的一条边。对于椭圆形，该值为半径维度最远的一条边。

+ +

基础图形的计算值

+ +

在 <basic-shape> 函数中的值通过指定的方式计算， 但是有下列情况会出现错误：

+ +
    +
  • 遗漏值（omitted values）参与到了省缺值的计算中。
    • +
  •  在 circle() 或  ellipse() 函数中的{{cssxref("<position>")}}值被作为一对（水平的或垂直的）从左上原点的偏移值，每一次这样的计算将会给出绝对长度与百分比的结合。
    • +
  • 一个在 inset()中的 <border-radius> 值，往往被当作一个扩展列表来计算，所有八个 {{cssxref("length")}}值或百分比代表的值都是如此。
    • +
+ +

基础图形的插值

+ +

 <basic-shape> 值之间的动画变化将会遵循以下规则。图形函数的值会被放进一个插入的简易列表中。这些列表中的值将会尽可能地被当作 <length>、<percentage>、 或 calc() 类型插入.。如果列表中的值不为上述三种类型中的一种，然而却是相同的（比如 nonzero 类型的值在多个列表的相同位置出现)，那么这些值将不会被作为插值。

+ +
    +
  • 一对的图形需要使用一样的盒模型。
    • +
  • 如果一对图形是同一种类型，例如， ellipse() 或 circle()， 并且没有任何半径使用了 closest-side 或 farthest-side 关键值， 那么这些值将会成为相应的图形函数的插值。
    • +
  • 如果一对图形都属于 inset()类，那么这些值将会成为相应的图形函数的插值。
    • +
  • 如果一对图形都属于 polygon()类， 并且两者有同样数量的顶点，并且使用了相同的填充规则 <fill-rule>，那么这些值将会成为相应的图形函数的插值。
    • +
  • 其余状况将不会出现插值。
    • +
+ +

示例

+ +

动画多边形

+ +

HTML

+ +
<div></div>
+ +

CSS

+ +
div {
+  width: 300px;
+  height: 300px;
+  background: repeating-linear-gradient(red, orange 50px);
+  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
+  animation: 4s poly infinite alternate ease-in-out;
+  margin: 10px auto;
+}
+
+@keyframes poly {
+  from {
+    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
+  }
+
+  to {
+    clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
+  }
+}
+ +

结果

+ +

{{EmbedLiveSample('动画多边形','340', '340')}}

+ +

规格

+ + + + + + + + + + + + + + + + +
规格状态评论
{{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }}{{ Spec2('CSS Shapes') }}初始化定义。
+ +

浏览器兼容性

+ + + +

{{Compat("css.types.basic-shape")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/css/blend-mode/index.html b/files/zh-cn/web/css/blend-mode/index.html new file mode 100644 index 0000000000..2c566d0553 --- /dev/null +++ b/files/zh-cn/web/css/blend-mode/index.html @@ -0,0 +1,408 @@ +--- +title: +slug: Web/CSS/blend-mode +tags: + - CSS + - CSS 参考 + - CSS 合成 + - CSS 混合模式 + - 参考 + - 混合模式 + - 颜色 +translation_of: Web/CSS/blend-mode +--- +
{{CSSRef}}
+ +

<blend-mode> 是一种 CSS 数据类型，用于描述当元素重叠时，颜色应当如何呈现。它被用于 {{cssxref("background-blend-mode")}} 和 {{cssxref("mix-blend-mode")}} 属性。

+ +

当层重叠时，混合模式是计算像素最终颜色值的方法，每种混合模式采用前景和背景的颜色值，执行其计算并返回最终的颜色值。最终的可见层是对混合层中的每个重叠像素执行混合模式计算的结果。

+ +

语法

+ +

<blend-mode> 数据类型被定义为下列关键词中的任意一个。

+ +

属性值

+ +
+
normal
+
+

最终颜色永远是顶层颜色，无论底层颜色是什么。
+ 其效果类似于两张不透明的纸重叠（overlapping）在一起。

+ +
+ +
+ +

{{ EmbedLiveSample('normal_example', "300", "300") }}

+
+
multiply
+
+

最终颜色为顶层颜色与底层颜色相乘的结果。
+ 如果叠加黑色层，则最终层必为黑色层，叠加白色层不会造成变化。
+ 其效果类似于在透明薄膜上重叠印刷的两个图像。

+ +
+ +
+ +

{{ EmbedLiveSample('multiply_example', "300", "300") }}

+
+
screen
+
+

最终的颜色是反转顶层颜色和底层颜色，将反转后的两个颜色相乘，再反转相加得到的和得到的结果。
+ 黑色层不会造成变化，白色层导致白色最终层。
+ 其效果类似于（被投影仪）投射到投影屏幕上的两个图像。

+ +
+ +
+ +

{{ EmbedLiveSample('screen_example', "300", "300") }}

+
+
overlay
+
+

如果底层颜色比顶层颜色深，则最终颜色是 multiply 的结果，如果底层颜色比顶层颜色浅，则最终颜色是 screen 的结果。
+ 此混合模式相当于顶层与底层互换后的 hard-light。

+ +
+ +
+ +

{{ EmbedLiveSample('overlay_example', "300", "300") }}

+
+
darken
+
+

最终颜色是由每个颜色通道下，顶底两层颜色中的最暗值所组成的颜色。

+ +
+ +
+ +

{{ EmbedLiveSample('darken_example', "300", "300") }}

+
+
lighten
+
+

最终颜色是每个颜色通道下，顶底两层颜色中的最亮值所组成的颜色。

+ +
+ +
+ +

{{ EmbedLiveSample('lighten_example', "300", "300") }}

+
+
color-dodge
+
+

最终颜色是将底部颜色除以顶部颜色的反色的结果。
+ 黑色前景不会造成变化。前景如果是背景的反色，会得到白色（fully lit color，完全亮起的颜色，应当为白色）。
+ 此混合模式类似于 screen，但是，前景只需要和背景的反色一样亮，最终图像就会变为全白。

+ +
+ +
+ +

{{ EmbedLiveSample('color-dodge_example', "300", "300") }}

+
+
color-burn
+
+

最终颜色是反转底部颜色，将反转后的值除以顶部颜色，再反转除以后的值得到的结果。
+ 白色的前景不会导致变化，前景如果是背景的反色，会得到黑色。
+ 此混合模式类似于 multiply，但是，前景只需要和背景的反色一样暗，最终图像就会变为全黑。

+ +
+ +
+ +

{{ EmbedLiveSample('color-burn_example', "300", "300") }}

+
+
hard-light
+
+

如果顶层颜色比底层颜色深，则最终颜色是 multiply 的结果，如果顶层颜色比底层颜色浅，则最终颜色是 screen 的结果。
+ 此混合模式相当于顶层与底层互换后的 overlay。
+ 其效果类似于在背景层上（用前景层）打出一片刺眼的聚光灯。

+ +
+ +
+ +

{{ EmbedLiveSample('hard-light_example', "300", "300") }}

+
+
soft-light
+
+

最终颜色类似于 hard-light 的结果，但更加柔和一些。
+ 此混合模式的表现类似 hard-light。
+ 其效果类似于在背景层上（用前景层）打出一片发散的聚光灯。

+ +
+ +
+ +

{{ EmbedLiveSample('soft-light_example', "300", "300") }}

+
+
difference
+
+

最终颜色是 两种颜色中较浅的颜色 减去 两种颜色中较深的颜色 得到的结果。
+ 黑色层不会造成变化，而白色层会反转另一层的颜色。

+ +
+ +
+ +

{{ EmbedLiveSample('difference_example', "300", "300") }}

+
+
exclusion
+
+

最终颜色类似于 difference，但对比度更低一些。
+ 和 difference 相同，黑色层不会造成变化，而而白色层会反转另一层的颜色。

+ +
+ +
+ +

{{ EmbedLiveSample('exclusion_example', "300", "300") }}

+
+
hue
+
+

最终颜色由顶部颜色的色调和底部颜色的饱和度与亮度组成。

+ +
+ +
+ +

{{ EmbedLiveSample('hue_example', "300", "300") }}

+
+
saturation
+
+

最终颜色由顶部颜色的色调和底部颜色的饱和度与发光度组成。
+ 饱和度为零的纯灰色背景层不会造成变化。

+ +
+ +
+ +

{{ EmbedLiveSample('saturation_example', "300", "300") }}

+
+
color
+
+

最终颜色由顶部颜色的色调与饱和度和底部颜色的亮度组成。
+ 此效果保留了灰度级别，可用于为前景着色。（The effect preserves gray levels and can be used to colorize the foreground.）

+ +
+ +
+ +

{{ EmbedLiveSample('color_example', "300", "300") }}

+
+
luminosity
+
+

最终颜色由顶部颜色的亮度和底部颜色的色调和饱和度组成。
+ 此混合模式相当于顶层与底层互换后的 color。

+ +
+ + +

{{ EmbedLiveSample('luminosity_example', "300", "300") }}

+
+
+
+ +

混合模式的插值

+ +

混合模式之间的更改暂无插值。任何变化都会立即发生。

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{ SpecName('Compositing', '#ltblendmodegt', '<blend-mode>') }}{{ Spec2('Compositing') }}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.types.blend-mode")}}

+ +

另请参阅

+ +
    +
  • 使用此类型的属性值：{{cssxref("background-blend-mode")}} 和 {{cssxref("mix-blend-mode")}}
    • +
+ +

其他网站上对各种混合模式的说明与介绍：

+ + diff --git a/files/zh-cn/web/css/block-size/index.html b/files/zh-cn/web/css/block-size/index.html new file mode 100644 index 0000000000..d6809a5364 --- /dev/null +++ b/files/zh-cn/web/css/block-size/index.html @@ -0,0 +1,103 @@ +--- +title: 块级尺寸 +slug: Web/CSS/block-size +translation_of: Web/CSS/block-size +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +
CSS的block-size属性定义了元素区块的水平宽度和垂直高度，也就是{{cssxref("width")}}或{{cssxref("height")}}属性，它们的大小取决于写入模式，即{{cssxref("writing-mode")}}的值。
+ +
{{EmbedInteractiveExample("pages/css/block-size.html")}} 
+ +
 
+ + + +

语句

+ +
/* <length> values */
+block-size: 300px;
+block-size: 25em;
+
+/* <percentage> values */
+block-size: 75%;
+
+/* Keyword values */
+block-size: 25em border-box;
+block-size: 75% content-box;
+block-size: max-content;
+block-size: min-content;
+block-size: available;
+block-size: fit-content;
+block-size: auto;
+
+/* Global values */
+block-size: inherit;
+block-size: initial;
+block-size: unset;If the writing mode is vertically oriented, the value of block-size relates to the width of the element; otherwise, it relates to the height of the element. A related property is {{cssxref("inline-size")}}, which defines the other dimension of the element.
+
+ +

如果写入模式为垂直方向，block-size的值与元素的宽度有关，否则取决于元素的高度。相关的属性是定义了元素的其它大小的{{cssxref("inline-size")}}。

+ +

语句

+ +

值

+ +

 block-size 属性的值是p{{cssxref("width")}} 属性与 {{cssxref("height")}} 属性的值的结合。

+ +

正式语句

+ +
{{csssyntax}}
+ +

例子

+ +

HTML

+ +
<p class="exampleText">Example text</p>
+
+ +

CSS

+ +
.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 200px;
+}
+ +

{{EmbedLiveSample("Example")}}

+ +

说明

+ + + + + + + + + + + + + + + + +
说明状态注释
+

{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}

+ +

 

+ 		{{Spec2("CSS Logical Properties")}}初始定义
+ +

浏览器兼容性 

+ + + +

{{Compat("css.properties.block-size")}}

+ +

相关链接

+ +
    +
  • The mapped physical properties: {{cssxref("width")}} and {{cssxref("height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/zh-cn/web/css/border-block-end/index.html b/files/zh-cn/web/css/border-block-end/index.html new file mode 100644 index 0000000000..88755b3ea1 --- /dev/null +++ b/files/zh-cn/web/css/border-block-end/index.html @@ -0,0 +1,114 @@ +--- +title: border-block-end +slug: Web/CSS/border-block-end +translation_of: Web/CSS/border-block-end +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

border-block-end 属性是一个简写属性，用于在样式表中的单个位置设置各个逻辑块结尾边界属性值。

+ +
{{EmbedInteractiveExample("pages/css/border-block-end.html")}}
+ + + +

Syntax

+ +
border-block-end: 1px;
+border-block-end: 2px dotted;
+border-block-end: medium dashed blue;
+
+ +

border-block-end can be used to set the values for one or more of {{cssxref("border-block-end-width")}}, {{cssxref("border-block-end-style")}}, and {{cssxref("border-block-end-color")}}. The physical border to which it maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, or {{cssxref("border-left")}} property depending on the values defined for {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.

+ +

Related properties are {{cssxref("border-block-start")}}, {{cssxref("border-inline-start")}}, and {{cssxref("border-inline-end")}}, which define the other borders of the element.

+ +

{{cssinfo}}

+ +

Values

+ +

The border-block-end is specified with one or more of the following, in any order:

+ +
+
<'border-width'>
+
The width of the border. See {{cssxref("border-width")}}.
+
<'border-style'>
+
The line style of the border. See {{cssxref("border-style")}}.
+
<'color'>
+
The color of the border. See {{cssxref("color")}}.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML Content

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS Content

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-block-end: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Logical Properties", "#propdef-border-block-end", "border-block-end")}}{{Spec2("CSS Logical Properties")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.border-block-end")}}

+ +

See also

+ +
    +
  • This property maps to one of the physical border properties: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, or {{cssxref("border-left")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
+ + diff --git a/files/zh-cn/web/css/border-block/index.html b/files/zh-cn/web/css/border-block/index.html new file mode 100644 index 0000000000..5552b1818b --- /dev/null +++ b/files/zh-cn/web/css/border-block/index.html @@ -0,0 +1,110 @@ +--- +title: border-block +slug: Web/CSS/border-block +translation_of: Web/CSS/border-block +--- +
{{CSSRef}}
+ +

该CSS属性是一个简写属性在样式表一个单一的地方设置单独的逻辑块边界属性值。border-block

+ +
border-block: 1px;
+border-block: 2px dotted;
+border-block: medium dashed blue;
+
+ +

border-block can be used to set the values for one or more of {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}}, and {{cssxref("border-block-color")}} setting both the start and end in the block dimension at once. The physical borders to which it maps depends on the element's writing mode, directionality, and text orientation. It corresponds to the {{cssxref("border-top")}} and {{cssxref("border-bottom")}} or {{cssxref("border-right")}}, and {{cssxref("border-left")}} properties depending on the values defined for {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.

+ +

The borders in the other dimension can be set with {{cssxref("border-inline")}}, which sets {{cssxref("border-inline-start")}}, and {{cssxref("border-inline-end")}}.

+ +

Constituent properties

+ +

This property is a shorthand for the following CSS properties:

+ + + +

Syntax

+ +

Values

+ +

The border-block is specified with one or more of the following, in any order:

+ +
+
<'border-width'>
+
The width of the border. See {{cssxref("border-width")}}.
+
<'border-style'>
+
The line style of the border. See {{cssxref("border-style")}}.
+
<'color'>
+
The color of the border. See {{cssxref("color")}}.
+
+ +

Formal definition

+ +

{{CSSInfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Border with vertical text

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-block: 5px dashed blue;
+}
+ +

Results

+ +

{{EmbedLiveSample("Border_with_vertical_text", 140, 140)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Logical Properties", "#propdef-border-block", "border-block")}}{{Spec2("CSS Logical Properties")}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.border-block")}}

+ +

也可以看看

+ +
    +
  • 此属性映射到以下物理边界属性之一：{{cssxref("border-top")}}，{{cssxref("border-right")}}，{{cssxref("border-bottom")}}，或{{cssxref("border-left")}}。
    • +
  • {{cssxref("writing-mode")}}，{{cssxref("direction")}}，{{cssxref("text-orientation")}}}
    • +
diff --git a/files/zh-cn/web/css/border-bottom-color/index.html b/files/zh-cn/web/css/border-bottom-color/index.html new file mode 100644 index 0000000000..1c75b4caf0 --- /dev/null +++ b/files/zh-cn/web/css/border-bottom-color/index.html @@ -0,0 +1,143 @@ +--- +title: border-bottom-color +slug: Web/CSS/border-bottom-color +translation_of: Web/CSS/border-bottom-color +--- +
{{CSSRef}}
+ +

概述

+ +

border-bottom-color 属性设置一个元素底部边框的颜色。应当指出，在多数情况下，CSS 简写属性 {{cssxref("border-color")}} 或 {{cssxref("border-bottom")}} 更方便实用。

+ +

{{cssinfo}}

+ +

语法

+ +
border-bottom-color: yellow;
+border-bottom-color: #F5F6F7;
+
+ +

值

+ +
+
<color>
+
一个描绘底边的颜色的 CSS {{cssxref("<color>")}} 值。
+
inherit
+
一个代表父元素底边颜色的关键字（可能和 border-bottom-color 默认值不同）
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

一个带有边框的简单 div

+ +

HTML 内容

+ +
<div class="mybox">
+  <p>This is a box with a border around it.
+     Note which side of the box is
+     <span class="redtext">red</span>.</p>
+</div>
+ +

CSS 内容

+ +
.mybox {
+  border: solid 0.3em gold;
+  border-bottom-color: red;
+  width: auto;
+}
+
+.redtext {
+  color: red;
+}
+ +

结果

+ +

{{EmbedLiveSample('A_simple_div_with_a_border')}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('CSS3 Backgrounds', '#border-bottom-color', 'border-bottom-color')}}{{Spec2('CSS3 Backgrounds')}}无重大变化，不过 transparent 关键字被正式移除，该关键字现在被包含在已扩展的 {{cssxref("<color>")}} 里。
{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-bottom-color')}}{{Spec2('CSS2.1')}}初始定义
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基础支持1.0{{CompatGeckoDesktop("1.0")}}[1]43.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
特性AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基础支持1.0{{CompatGeckoMobile("1.0")}}[1]6.5111.0
+
+ +

[1] 像 Firefox 这样，基于 Gecko 的浏览器也支持非标准的 {{Cssxref("-moz-border-bottom-colors")}} CSS 属性，来设置底边多重颜色。

+ +

另见

+ +
    +
  • 边框相关的 CSS 简写属性 {{Cssxref("border")}}, {{Cssxref("border-bottom")}} 和 {{Cssxref("border-color")}} 。
    • +
  • 用于其它边框颜色相关的 CSS 属性： {{Cssxref("border-right-color")}}, {{Cssxref("border-top-color")}}, 和 {{Cssxref("border-left-color")}} 。
    • +
  • 同样用于底边的其它边框相关的 CSS 属性： {{cssxref("border-bottom-style")}} 和 {{cssxref("border-bottom-width")}} 。
    • +
diff --git a/files/zh-cn/web/css/border-bottom-left-radius/index.html b/files/zh-cn/web/css/border-bottom-left-radius/index.html new file mode 100644 index 0000000000..4f33b40f4c --- /dev/null +++ b/files/zh-cn/web/css/border-bottom-left-radius/index.html @@ -0,0 +1,270 @@ +--- +title: 左下边框圆角 +slug: Web/CSS/border-bottom-left-radius +translation_of: Web/CSS/border-bottom-left-radius +--- +
{{CSSRef}}
+ +

Summary

+ +

总览

+ +

border-bottom-left-radius 这个css属性设置元素左下角的圆角。圆角可以是圆或椭圆（注：应为圆或椭圆的一部分），或者当其中一个值为0时，圆角将不被设置，这时这个角将展示为直角。

+ +
border-bottom-left-radius.png
+ +

一个无论是图像或颜色的背景，都会在边框上被裁剪，即使背景是圆角的; 裁剪的确切位置由 {{cssxref("background-clip")}} 属性定义.

+ +
如果该属性的值没有被一个在border-bottom-left-radius 属性后，作用于当前元素上的{{cssxref("border-radius")}}简写属性设置，那么该属性值将会被shorthand property重置为初始值。
+ +

{{cssinfo}}

+ +

语法

+ +
/* 圆形 */
+/* border-bottom-left-radius: radius */
+border-bottom-left-radius: 3px;
+
+/* 椭圆形 */
+/* border-bottom-left-radius: 水平方向 垂直方向 */
+border-bottom-left-radius: 0.5em 1em;
+
+border-bottom-left-radius: inherit;
+
+ +
+

where:

+ +
+
radius
+
Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting the radius of the circle to use for the border in that corner.
+
horizontal
+
Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting the horizontal semi-major axis of the ellipsis to use for the border in that corner.
+
vertical
+
Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting the vertical semi-major axis of the ellipsis to use for the border in that corner.
+
+
+ +

Values

+ +
+
<length-percentage>
+
Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. As absolute length it can be expressed in any unit allowed by the CSS {{cssxref("<length>")}} data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Live exampleCode
+
+
.
+
+ 		An arc of circle is used as the border + 
+div {
+  border-bottom-left-radius: 40px 40px;
+}
+
+
+
+
.
+
+ 		An arc of ellipse is used as the border + 
+div {
+  border-bottom-left-radius: 40px 20px;
+}
+
+
+
+
.
+
+ 		The box is a square: an arc of circle is used as the border + 
+div {
+  border-bottom-left-radius: 40%;
+}
+
+
+
+
.
+
+ 		The box is not a square: an arc of ellipse is used as the border + 
+div {
+  border-bottom-left-radius: 40%;
+}
+
+
+
+
.
+
+ 		The background color is clipped at the border + 
+div {
+  border-bottom-left-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0 {{property_prefix("-webkit")}}
+ 4.0		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		1.0 (1.0){{property_prefix("-moz")}}[1]
+ 4.0 (2.0)[3]		9.010.53.0 (522){{property_prefix("-webkit")}}
+ 5.0 (532.5)
Percentages4.0{{CompatUnknown}}1.0 (1.0)[2]
+ 4.0 (2.0)		9.010.55.0 (532.5)
Elliptical corners1.0{{CompatUnknown}}3.5 (1.9.1)9.010.53.0 (522)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Percentages{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Elliptical corners{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] The prefixed version (allowed from Firefox 1 to Firefox 12) of this property uses a different name, -moz-border-radius-bottomleft, than the final property as Mozilla implemented it before the final name was coined.

+ +

[2] Before Firefox 4, the {{cssxref("<percentage>")}} was relative to the width of the box even when specifying the radius for a height). This implied that -moz-border-radius-bottomleft was always drawing an arc of circle, and never an ellipse, when followed by a single value.

+ +

[3] Prior to Gecko 50.0 {{geckoRelease("50.0")}}, border styles of rounded corners were always rendered as if border-style was solid. This has been fixed in Gecko 50.0.

+ +

In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

+ +

See also

+ +

The border-radius-related CSS properties: the CSS shorthand {{cssxref("border-radius")}}, the properties for the other corners: {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, and {{cssxref("border-top-left-radius")}}.

diff --git a/files/zh-cn/web/css/border-bottom-right-radius/index.html b/files/zh-cn/web/css/border-bottom-right-radius/index.html new file mode 100644 index 0000000000..d63776da87 --- /dev/null +++ b/files/zh-cn/web/css/border-bottom-right-radius/index.html @@ -0,0 +1,272 @@ +--- +title: border-bottom-right-radius +slug: Web/CSS/border-bottom-right-radius +translation_of: Web/CSS/border-bottom-right-radius +--- +
{{CSSRef}}
+ +

The border-bottom-right-radius CSS property sets the rounding of the bottom-right corner of the element.

+ +
/* The corner is a circle */
+/* border-bottom-right-radius: radius */
+border-bottom-right-radius: 3px;
+
+/* Percentage values */
+border-bottom-right-radius: 20%; /* corner of a circle if box is a square or else corner of a rectangle */
+border-bottom-right-radius: 20% 20%; /* same as above */ /* 20% of horizontal(width) and vertical(height) */
+border-bottom-right-radius: 20% 10%; /* 20% of horizontal(width) and 10% of vertical(height) */
+
+/*The corner is an ellipsis */
+/* border-bottom-right-radius: horizontal vertical */
+border-bottom-right-radius: 0.5em 1em;
+
+border-bottom-right-radius: inherit;
+ +

The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

+ +
border-bottom-right-radius.png
+ +

A background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the {{cssxref("background-clip")}} property.

+ +
If the value of this property is not set in a {{cssxref("border-radius")}} shorthand property that is applied to the element after the border-bottom-right-radius CSS property, the value of this property is then reset to its initial value by the shorthand property.
+ +

{{cssinfo}}

+ +

Syntax

+ +

With one value:

+ +
    +
  • the value is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting the radius of the circle to use for the border in that corner.
    • +
+ +

With two values:

+ +
    +
  • the first value is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting the horizontal semi-major axis of the ellipsis to use for the border in that corner.
    • +
  • the second value is a {{cssxref("<percentage>")}} denoting the vertical semi-major axis of the ellipsis to use for the border in that corner.
    • +
+ +

Values

+ +
+
<length-percentage>
+
Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. As absolute length it can be expressed in any unit allowed by the CSS {{cssxref("<length>")}} data type. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Live exampleCode
+
+
.
+
+ 		An arc of circle is used as the border + 
+div {
+  border-bottom-right-radius: 40px 40px;
+}
+
+
+
+
.
+
+ 		An arc of ellipse is used as the border + 
+div {
+  border-bottom-right-radius: 40px 20px;
+}
+
+
+
+
.
+
+ 		The box is a square: an arc of circle is used as the border + 
+div {
+  border-bottom-right-radius: 40%;
+}
+
+
+
+
.
+
+ 		The box is not a square: an arc of ellipse is used as the border + 
+div {
+  border-bottom-right-radius: 40%;
+}
+
+
+
+
.
+
+ 		The background color is clipped at the border + 
+div {
+  border-bottom-right-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0 {{property_prefix("-webkit")}}
+ 4.0		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		1.0 (1.0){{property_prefix("-moz")}}[1]
+ 4.0 (2.0)[3]		9.010.53.0 (522){{property_prefix("-webkit")}}
+ 5.0 (532.5)
Percentages4.0{{CompatVersionUnknown}}1.0 (1.0)[2]
+ 4.0 (2.0)		9.010.55.0 (532.5)
Elliptical corners1.0{{CompatVersionUnknown}}3.5 (1.9.1)9.010.53.0 (522)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Percentages{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Elliptical corners{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] The prefixed version (allowed from Firefox 1 to Firefox 12) of this property uses a different name, -moz-border-radius-bottomright.

+ +

[2] Before Firefox 4, the {{cssxref("<percentage>")}} was relative to the width of the box even when specifying the radius for a height). This implied that -moz-border-radius-bottomright was always drawing an arc of circle, and never an ellipse, when followed by a single value.

+ +

[3] Prior to Gecko 50.0 {{geckoRelease("50.0")}}, border styles of rounded corners were always rendered as if border-style was solid. This has been fixed in Gecko 50.0.

+ +

In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

+ +

See also

+ +

The border-radius-related CSS properties: the CSS shorthand {{cssxref("border-radius")}}, the properties for the other corners: {{cssxref("border-top-right-radius")}}, {{cssxref("border-top-left-radius")}}, and {{cssxref("border-bottom-left-radius")}}.

diff --git a/files/zh-cn/web/css/border-bottom-style/index.html b/files/zh-cn/web/css/border-bottom-style/index.html new file mode 100644 index 0000000000..e477cdbd15 --- /dev/null +++ b/files/zh-cn/web/css/border-bottom-style/index.html @@ -0,0 +1,177 @@ +--- +title: border-bottom-style +slug: Web/CSS/border-bottom-style +translation_of: Web/CSS/border-bottom-style +--- +
{{CSSRef}}
+ +

The border-bottom-style CSS property sets the line style of an element's bottom {{cssxref("border")}}.

+ +
/* Keyword values */
+border-bottom-style: none;
+border-bottom-style: hidden;
+border-bottom-style: dotted;
+border-bottom-style: dashed;
+border-bottom-style: solid;
+border-bottom-style: double;
+border-bottom-style: groove;
+border-bottom-style: ridge;
+border-bottom-style: inset;
+border-bottom-style: outset;
+
+/* Global values */
+border-bottom-style: inherit;
+border-bottom-style: initial;
+border-bottom-style: unset;
+
+ +
Note: The specification doesn't define how borders of different styles connect in the corners.
+ +

{{cssinfo}}

+ +

Syntax

+ +

The border-bottom-style property is specified as a single keyword chosen from those available for the {{cssxref("border-style")}} property.

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

这是一种可显示border-bottom-style所有属性的标签。

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* Define look of the table */
+table {
+  border-width: 3px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-bottom-style example classes */
+.b1 {border-bottom-style: none;}
+.b2 {border-bottom-style: hidden;}
+.b3 {border-bottom-style: dotted;}
+.b4 {border-bottom-style: dashed;}
+.b5 {border-bottom-style: solid;}
+.b6 {border-bottom-style: double;}
+.b7 {border-bottom-style: groove;}
+.b8 {border-bottom-style: ridge;}
+.b9 {border-bottom-style: inset;}
+.b10 {border-bottom-style: outset;}
+ +

Result

+ +

{{ EmbedLiveSample('Examples', 300, 200) }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-bottom-style', 'border-bottom-style') }}{{ Spec2('CSS3 Backgrounds') }}No significant change.
{{ SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatVersionUnknown}}1.0[1]5.59.21.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }}[1]7.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

[1] Prior to Firefox 50, border styles of rounded corners (with {{cssxref("border-radius")}}) were always rendered as if border-bottom-style was&nbsolid. This has been fixed in Firefox 50.

+ +

See also

+ +
    +
  • The other style-related border properties: {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-top-style") }}, and {{ Cssxref("border-style") }}.
    • +
  • The other bottom-border-related properties: {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-color") }}, and {{ Cssxref("border-bottom-width") }}.
    • +
diff --git a/files/zh-cn/web/css/border-bottom-width/index.html b/files/zh-cn/web/css/border-bottom-width/index.html new file mode 100644 index 0000000000..947697d847 --- /dev/null +++ b/files/zh-cn/web/css/border-bottom-width/index.html @@ -0,0 +1,136 @@ +--- +title: border-bottom-width +slug: Web/CSS/border-bottom-width +translation_of: Web/CSS/border-bottom-width +--- +
{{CSSRef}}
+ +
CSS 属性 border-bottom-width 设置一个元素的底部边框宽度。
+ +
/* Keyword values */
+border-bottom-width: thin;
+border-bottom-width: medium;
+border-bottom-width: thick;
+
+/* <length> values */
+border-bottom-width: 10em;
+border-bottom-width: 3vmax;
+border-bottom-width: 6px;
+
+/* Global keywords */
+border-bottom-width: inherit;
+border-bottom-width: initial;
+border-bottom-width: unset;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Values

+ +
+
<br-width>
+
定义边框宽度，取值为非负的宽度值{{cssxref("<length>")}}或关键字。 如果是关键字的话，其取值必须是以下之一： + + + + + + + + + + + + + + + + + + +
thin +
 
+ 		细边框
medium +
 
+ 		中等边框
thick +
 
+ 		粗边框
+ +
+

Note: 因为规范没有具体定义每个关键字对应的宽度值，所以实际显示效果依赖于实现。但是宽度值的取值一定遵循 thin ≤ medium ≤ thick 的规律且在单文档中是常数。

+
+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
<div>Element 1</div>
+<div>Element 2</div>
+ +

CSS

+ +
div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-bottom-width: thick;
+}
+div:nth-child(2) {
+  border-bottom-width: 2em;
+}
+ +

Result

+ +

{{EmbedLiveSample('Example', '100%')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width') }}{{ Spec2('CSS3 Backgrounds') }}No significant change.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width')}}{{Spec2('CSS2.1')}}No significant change.
{{SpecName('CSS1', '#border-left-width', 'border-bottom-width')}}{{Spec2('CSS1')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.border-bottom-width")}}

+ +

See also

+ +
    +
  • The other border-width-related CSS properties: {{ Cssxref("border-left-width") }}, {{ Cssxref("border-right-width") }}, {{ Cssxref("border-top-width") }}, and {{ Cssxref("border-width") }}.
    • +
  • The other border-bottom-related CSS properties: {{ Cssxref("border") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-style") }}, and {{ Cssxref("border-bottom-color") }}.
    • +
diff --git a/files/zh-cn/web/css/border-bottom/index.html b/files/zh-cn/web/css/border-bottom/index.html new file mode 100644 index 0000000000..28ee04408a --- /dev/null +++ b/files/zh-cn/web/css/border-bottom/index.html @@ -0,0 +1,106 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +tags: + - CSS + - CSS 属性 + - border + - 参考 +translation_of: Web/CSS/border-bottom +--- +

{{CSSRef}}

+ +

border-bottom 简写属性把下边框的所有属性：{{Cssxref("border-bottom-color")}}，{{Cssxref("border-bottom-style")}} 与 {{Cssxref("border-bottom-width")}} 设置到了一个声明中。这些属性描述了元素的下边框样式。

+ +
{{EmbedInteractiveExample("pages/css/border-bottom.html")}}
+ + + +

与所有的简记属性相同， border-bottom 定义了它所有可以定义的属性，即使他们并没有被显式地定义。它把所有未被显式定义的参数都设置为了默认值，这意味着这些值将被定义为：

+ +
border-bottom-style: dotted;
+border-bottom: thick green;
+ +

它和以下的代码是等价的：

+ +
border-bottom-style: dotted;
+border-bottom: none thick green;
+ + + +

顺便一提，在 border-bottom 之前定义的 {{Cssxref("border-bottom-style")}} 的值因此被忽略了。由于 {{Cssxref("border-bottom-style")}} 并没有默认值，未被定义的 border-style 参数的值将被设置为 none，也就是无底边框。

+ +

语法

+ +
border-bottom: 1px;
+border-bottom: 2px dotted;
+border-bottom: medium dashed blue;
+
+ +

值

+ +
+
<br-width>
+
见 {{Cssxref("border-bottom-width")}}。
+
<br-style>
+
见 {{Cssxref("border-bottom-style")}}。
+
{{cssxref("<color>")}}
+
见 {{Cssxref("border-bottom-color")}}。
+
+ +

形式化语法

+ +
{{csssyntax}}
+ +

示例

+ +
<div>
+  This box has a border on the bottom side.
+</div>
+ +
div {
+  border-bottom: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+
+ +

{{EmbedLiveSample('Example')}}

+ +

规则

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规则状态评价
{{ SpecName('CSS3 Backgrounds', '#border-bottom', 'border-bottom') }}{{ Spec2('CSS3 Backgrounds') }}没有直接的改变，即使 {{ cssxref("border-bottom-color") }} 值的修改被确定。
{{ SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom') }}{{ Spec2('CSS2.1') }}没有显著的变化。
{{ SpecName('CSS1', '#border-bottom', 'border-bottom') }}{{ Spec2('CSS1') }}初始定义。
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.border-bottom")}}

diff --git a/files/zh-cn/web/css/border-collapse/index.html b/files/zh-cn/web/css/border-collapse/index.html new file mode 100644 index 0000000000..1d2aa23732 --- /dev/null +++ b/files/zh-cn/web/css/border-collapse/index.html @@ -0,0 +1,149 @@ +--- +title: border-collapse +slug: Web/CSS/border-collapse +tags: + - CSS + - CSS 属性 + - 参考 + - 表格 + - 边框 +translation_of: Web/CSS/border-collapse +--- +
{{CSSRef}}
+ +

border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

+ +
{{EmbedInteractiveExample("pages/css/border-collapse.html")}}
+ + + + + +

合并（collapsed ）模式下，表格中相邻单元格共享边框。在这种模式下，CSS属性{{ Cssxref("border-style") }} 的值 inset 表现为槽，值 outset 表现为脊。

+ + + +

分隔（separated）模式是 HTML 表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过CSS属性 {{cssxref("border-spacing")}} 来确定的。

+ +

语法

+ +
/* Keyword values */
+border-collapse: collapse;
+border-collapse: separate;
+
+/* Global values */
+border-collapse: inherit;
+border-collapse: initial;
+border-collapse: unset;
+
+ +

border-collapse 的属性值被定义为一个单独的关键词，可为下面两个值中的一个。

+ +

值

+ +
+
collapse
+
相邻的单元格共用同一条边框（采用 collapsed-border 表格渲染模型）。
+
separate
+
默认值。每个单元格拥有独立的边框（采用 separated-border 表格渲染模型）。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

查看独立的例子

+ +

查看在线演示

+ +

各个浏览器引擎的多彩表格

+ +

HTML

+ +
<table class="separate">
+  <caption><code>border-collapse: separate</code></caption>
+  <tbody>
+    <tr><th>Browser</th> <th>Layout Engine</th></tr>
+    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
+    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
+    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
+    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
+    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
+  </tbody>
+</table>
+<table class="collapse">
+  <caption><code>border-collapse: collapse</code></caption>
+  <tbody>
+    <tr><th>Browser</th> <th>Layout Engine</th></tr>
+    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
+    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
+    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
+    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
+    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
+  </tbody>
+</table>
+ +

CSS

+ +
.collapse {
+    border-collapse: collapse;
+}
+.separate {
+    border-collapse: separate;
+}
+table {
+    display: inline-table;
+    margin: 1em;
+    border: dashed 6px;
+    border-width: 6px;
+}
+table th, table td {
+    border: solid 3px;
+}
+.fx { border-color: orange blue; }
+.gk { border-color: black red; }
+.ie { border-color: blue gold; }
+.tr { border-color: aqua; }
+.sa { border-color: silver blue; }
+.wk { border-color: gold blue; }
+.ch { border-color: red yellow green blue; }
+.bk { border-color: navy blue teal aqua; }
+.op { border-color: red; }
+ +

结果

+ +

{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
{{ SpecName('CSS2.1', 'tables.html#borders', 'border-collapse') }}{{ Spec2('CSS2.1') }}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.border-collapse")}}

+ +

参见

+ +
    +
  • {{cssxref("border-spacing")}}、{{cssxref("border-style")}}
    • +
  • The border-collapse property alters the appearance of the {{htmlelement("table")}} HTML element.
    • +
diff --git a/files/zh-cn/web/css/border-color/index.html b/files/zh-cn/web/css/border-color/index.html new file mode 100644 index 0000000000..7f3c982155 --- /dev/null +++ b/files/zh-cn/web/css/border-color/index.html @@ -0,0 +1,221 @@ +--- +title: border-color +slug: Web/CSS/border-color +translation_of: Web/CSS/border-color +--- +
{{CSSRef}}
+ +

概括

+ +

CSS属性 border-color 是一个用于设置元素四个边框颜色的快捷属性： {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}

+ +

{{cssinfo}}

+ +

语法

+ +
/* border-color: color; 单值语法 */
+border-color: red;
+
+/* border-color: vertical horizontal; 双值语法*/
+border-color: red #f015ca;
+
+/* border-color: top horizontal bottom; 三值语法 */
+border-color: red yellow green;
+
+/* border-color: top right bottom left; 四值语法 */
+border-color: red yellow green blue;
+
+border-color: inherit
+
+ +

取值

+ +
+
color
+
使用 {{cssxref("<color>")}} 来表示四个边框的颜色，仅用于单值语法。
+
horizontal
+
使用 {{cssxref("<color>")}} 来表示水平（左边框和右边框）边框的颜色，仅用于双值语法。
+
vertical
+
使用 {{cssxref("<color>")}} 来表示垂直（上边框和下边框）边框的颜色，仅用于双值或三值语法。
+
top
+
使用 {{cssxref("<color>")}} 来表示上边框的颜色，仅用于三值或四值语法。
+
bottom
+
使用 {{cssxref("<color>")}} 来表示下边框的颜色，仅用于三值或四值语法。
+
right
+
使用 {{cssxref("<color>")}} 来表示右边框的颜色，仅用于四值语法。
+
left
+
使用 {{cssxref("<color>")}} 来表示左边框的颜色，仅用于四值语法。
+
inherit
+
这是一个关键词，用于指示四边的颜色值均继承自父元素的计算值。
+
+ +

语法定义

+ +
{{csssyntax}}
+ +

Complete_border-color_usage2

+ +

HTML

+ +
<div id="justone">
+  <p><code>border-color: red;</code> is equivalent to</p>
+  <ul><li><code>border-top-color: red;</code></li>
+    <li><code>border-right-color: red;</code></li>
+    <li><code>border-bottom-color: red;</code></li>
+    <li><code>border-left-color: red;</code></li>
+  </ul>
+</div>
+<div id="horzvert">
+  <p><code>border-color: gold red;</code> is equivalent to</p>
+  <ul><li><code>border-top-color: gold;</code></li>
+    <li><code>border-right-color: red;</code></li>
+    <li><code>border-bottom-color: gold;</code></li>
+    <li><code>border-left-color: red;</code></li>
+  </ul>
+</div>
+<div id="topvertbott">
+  <p><code>border-color: red cyan gold;</code> is equivalent to</p>
+  <ul><li><code>border-top-color: red;</code></li>
+    <li><code>border-right-color: cyan;</code></li>
+    <li><code>border-bottom-color: gold;</code></li>
+    <li><code>border-left-color: cyan;</code></li>
+  </ul>
+</div>
+<div id="trbl">
+  <p><code>border-color: cyan black gold;</code> is equivalent to</p>
+  <ul><li><code>border-top-color: red;</code></li>
+    <li><code>border-right-color: cyan;</code></li>
+    <li><code>border-bottom-color: black;</code></li>
+    <li><code>border-left-color: gold;</code></li>
+  </ul>
+</div>
+
+ +

CSS

+ +
#justone {
+  border-color: red;
+}
+
+#horzvert {
+  border-color: gold red;
+}
+
+#topvertbott {
+  border-color: red cyan gold;
+}
+
+#trbl {
+  border-color: red cyan black gold;
+}
+
+div {
+  border: solid 0.3em;
+  width: auto;
+  margin: 0.5em;
+  padding: 0.5em;
+}
+
+ul {
+  margin: 0;
+  list-style: none;
+}
+
+ +

{{ EmbedLiveSample('Complete_border-color_usage2', 600, 300) }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName('CSS3 Backgrounds', '#border-color', 'border-color')}}{{Spec2('CSS3 Backgrounds')}}移除了transparent 关键词，该关键词已归入{{cssxref("<color>")}} 数据类型。
{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-color')}}{{Spec2('CSS2.1')}}被当作快捷属性
{{SpecName('CSS1', '#border-color', 'border-color')}}{{Spec2('CSS1')}}首次被定义
+ + + +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}} [1]4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.0{{CompatGeckoMobile("1.9.2")}} [1]7.0111.0
+
+ +

[1] The following Mozilla extensions set the border sides to multiple colors for Gecko based browsers like Firefox. {{Cssxref("-moz-border-top-colors")}}, {{Cssxref("-moz-border-right-colors")}}, {{Cssxref("-moz-border-bottom-colors")}}, {{Cssxref("-moz-border-left-colors")}}

+ +

其他参考

+ +
    +
  • 与border-color相关的CSS属性: {{Cssxref("border")}}, {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}},
    • +
  • 与边框相关的其他CSS属性: {{Cssxref("border-width")}}, {{Cssxref("border-style")}}
    • +
+ +
+
+
diff --git a/files/zh-cn/web/css/border-image-outset/index.html b/files/zh-cn/web/css/border-image-outset/index.html new file mode 100644 index 0000000000..cbae437d1a --- /dev/null +++ b/files/zh-cn/web/css/border-image-outset/index.html @@ -0,0 +1,127 @@ +--- +title: border-image-outset +slug: Web/CSS/border-image-outset +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image-outset +--- +
{{CSSRef("CSS Borders")}}
+ +

概述

+ +

border-image-outset属性定义边框图像可超出边框盒的大小。

+ +
{{cssinfo}}
+ +

语法

+ +
Formal syntax: {{csssyntax("border-image-outset")}}
+
+ +
/* border-image-outset: sides */
+border-image-outset: 30%;
+
+/* border-image-outset:垂直 水平 */
+border-image-outset: 10% 30%;
+
+/* border-image-outset: 顶 水平 底 */
+border-image-outset: 30px 30% 45px;
+
+/* border-image-outset:顶 右 底 左  */
+border-image-outset: 7px 12px 14px 5px;
+
+border-image-repeat: inherit;
+
+ +

值

+ +
+
sides
+
边框图像在四个方向超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量。
+
horizontal
+
边框图像在水平方向（左和右）超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量.
+
vertical
+
边框图像在垂直方向（上和下）超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量.
+
top
+
边框图像在上方超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量.
+
bottom
+
边框图像在下方超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量.
+
right
+
边框图像在右方超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量.
+
left
+
边框图像在左方超出边框盒的{{cssxref("<length>")}}或{{cssxref("<number>")}}数量.
+
inherit
+
四个方向的值都继承于父元素的该属性计算后值。
+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Backgrounds', '#border-image-outset', 'border-image-outset')}}{{Spec2('CSS3 Backgrounds')}}首次定义
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support15.0{{CompatGeckoDesktop("15.0")}}11156
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("15.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/zh-cn/web/css/border-image-repeat/index.html b/files/zh-cn/web/css/border-image-repeat/index.html new file mode 100644 index 0000000000..0a480d564b --- /dev/null +++ b/files/zh-cn/web/css/border-image-repeat/index.html @@ -0,0 +1,123 @@ +--- +title: border-image-repeat +slug: Web/CSS/border-image-repeat +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image-repeat +--- +
{{CSSRef}}
+ +

Summary

+ +

border-image-repeat 定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。

+ +
{{cssinfo}}
+ +

Syntax

+ +
Formal syntax: {{csssyntax("border-image-repeat")}}
+ +
border-image-repeat: type                      /* One-value syntax */       E.g. border-image-value: stretch;
+border-image-repeat: horizontal vertical       /* Two-value syntax */       E.g. border-image-width: round space;
+
+border-image-repeat: inherit
+
+ +

Values

+ +
+
type
+
stretch, repeat, round, space 选一。属于单个值的情况。
+
horizontal
+
stretch, repeat, round, space 选一。属于两个值的情况。
+
vertical
+
stretch, repeat, round, space 选一。属于两个值的情况。
+
stretch
+
拉伸图片以填充边框。
+
repeat
+
平铺图片以填充边框。
+
round
+
平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。
+
space
+
平铺图像 。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像）
+
inherit
+
继承父级元素的计算值。
+
+ +

Examples

+ +

不同的取值，查看 {{cssxref("border-image")}} 的示例。

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-image-repeat', 'border-image-repeat')}}{{Spec2('CSS3 Backgrounds')}}Initial specification
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support15.0{{CompatGeckoDesktop("15.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("15.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

早期候选推荐版本中有space，不过没有浏览器实现它，因而移除，将来可能添加进来。

diff --git a/files/zh-cn/web/css/border-image-slice/index.html b/files/zh-cn/web/css/border-image-slice/index.html new file mode 100644 index 0000000000..2f7922d9e0 --- /dev/null +++ b/files/zh-cn/web/css/border-image-slice/index.html @@ -0,0 +1,108 @@ +--- +title: border-image-slice +slug: Web/CSS/border-image-slice +translation_of: Web/CSS/border-image-slice +--- +
{{CSSRef}}
+ +

概要

+ +

通过{{cssxref("border-image-source")}} 引用边框图片后，border-image-slice属性会将图片分割为9个区域：四个角，四个边（edges）以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。

+ +


+ The nine regions defined by the border-image or border-image-slice properties

+ +

上图说明了每个区域的位置。

+ +
    +
  • 区域 1-4 为角区域（corner region）。 每一个都用一次来形成最终边界图像的角点。（Each one is used a single time to form the corners of the final border image.）
    • +
  • 区域 5-8 边区域（edge region）。在最终的边框图像中重复，缩放或修改它们以匹配元素的尺寸。（These are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element.）
    • +
  • 区域 9 为中心区域（ middle region）。它在默认情况下会被丢弃，但如果设置了关键字fill，则会将其用作背景图像。（It is discarded by default, but is used like a background image if the keyword fill is set.）
    • +
+ +

 

+ +

中间的区域将不会被边框使用，但当设置有 fill 关键词时将会被作为 background-image。这个关键词可以被设置在属性的任何一个位置(前面、后面或者两个值之间)

+ +

{{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} 属性则定义这些图片将如何使用。

+ +

语法

+ +
/* 所有的边 */
+border-image-slice: 30%;
+
+/* 垂直方向 | 水平方向 */
+border-image-slice: 10% 30%;
+
+/* 顶部 | 水平方向 | 底部 */
+border-image-slice: 30 30% 45;
+
+/* 上 右 下 左 */
+border-image-slice: 7 12 14 5;
+
+/* 使用fill（fill可以放在任意位置） */
+border-image-slice: 10% fill 7 12;
+
+/* Global values */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+
+ +

值

+ +
+
slice
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the four slicing lines. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
horizontal
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the two slicing lines corresponding to the horizontal edges, the right and the left ones. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
vertical
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the two slicing lines corresponding to the vertical edges, the top and the bottom ones. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
top
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the top slicing line. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
bottom
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the bottom slicing line. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
right
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the right slicing line. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
left
+
Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the left slicing line. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
+
fill
+
Is a keyword whose presence forces the use of the middle image slice to be displayed over the background image, its size and height are resized like those of the top and left image slices, respectively.
+
inherit
+
Is a keyword indicating that all four values are inherited from their parent's element calculated value.
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-image-slice', 'border-image-slice')}}{{Spec2('CSS3 Backgrounds')}}Initial defintion
+ +

浏览器兼容性

+ +
{{Compat("css.properties.border-image-slice")}}
+ +
 
+ +

See also

+ + diff --git a/files/zh-cn/web/css/border-image-source/index.html b/files/zh-cn/web/css/border-image-source/index.html new file mode 100644 index 0000000000..0680fffca1 --- /dev/null +++ b/files/zh-cn/web/css/border-image-source/index.html @@ -0,0 +1,79 @@ +--- +title: border-image-source +slug: Web/CSS/border-image-source +translation_of: Web/CSS/border-image-source +--- +
{{CSSRef}}
+ +

Summary

+ +

CSS 属性 border-image-source  用于声明元素的边框图片（border-image）的资源 

+ +

{{EmbedInteractiveExample("pages/css/border-image-source.html")}}

+ +

属性 {{cssxref("border-image-slice")}} 被用于切割资源图片的区域，然后将其动态的应用到最终的边框图片

+ +

Syntax

+ +
/* no border-image, use the specified border-style */
+border-image-source: none;
+
+/* the image.jpg is used as image */
+border-image-source: url(image.jpg);
+
+/* a gradient is used as image */
+border-image-source: linear-gradient(to top, red, yellow);
+
+/* Global values */
+border-image-source: inherit;
+border-image-source: initial;
+border-image-source: unset;
+
+ +

Values

+ +
+
none
+
不会使用图片边框。会被{{cssxref("border-style")}}属性所设置的边框样式替换掉
+
<image>
+
用作边框的图片
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

请查看示例 {{cssxref("border-image")}}。

+ +

Specifications

+ + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-image-source', 'border-image-source')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ + + +

{{cssinfo}}

+ +

Browser compatibility

+ +
{{Compat("css.properties.border-image-source")}}
+ +
diff --git a/files/zh-cn/web/css/border-image-width/index.html b/files/zh-cn/web/css/border-image-width/index.html new file mode 100644 index 0000000000..2af817da2b --- /dev/null +++ b/files/zh-cn/web/css/border-image-width/index.html @@ -0,0 +1,133 @@ +--- +title: border-image-width +slug: Web/CSS/border-image-width +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-image-width +--- +
{{CSSRef}}
+ +

CSS属性 border-image-width 指定了 边界图像 (border image) 的宽度

+ +
{{EmbedInteractiveExample("pages/css/border-image-width.html")}}
+ + + +

如果本属性值大于元素的 {{cssxref("border-width")}}，边界图像将会向 padding 边缘延展

+ +

语法

+ +
/* 关键字 */
+border-image-width: auto;
+
+/* 长度 */
+border-image-width: 1rem;
+
+/* 百分比 */
+border-image-width: 25%;
+
+/* 数值 */
+border-image-width: 3;
+
+/* 垂直 | 水平 */
+border-image-width: 2em 3em;
+
+/* 上 | 横向 | 下 */
+border-image-width: 5% 15% 10%;
+
+/* 上 | 右 | 下 | 左 */
+border-image-width: 5% 2em 10% auto;
+
+/* 全局值 */
+border-image-width: inherit;
+border-image-width: initial;
+border-image-width: unset;
+
+ +

border-image-width 属性的值可用以下方式进行设定：

+ +
    +
  • 当指定 一个 值时，它将作用到 四个方向 ；
    • +
  • 当指定 两个 值时，它将分别作用到 垂直方向 和 水平方向 ；
    • +
  • 当指定 三个 值时，它将分别作用到 上方、水平方向、和下方；
    • +
  • 当指定 三个 值时，它将分别作用到 上方、右方、下方和左方。
    • +
+ +

取值

+ +
+
<长度-百分比>
+
边界的宽度, 可按 {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}} 指定。百分比是相较于水平（垂直）方向上的边框图像区域宽度（高度）的偏移量，不能为负。
+
<数值>
+
边框宽度，指定为 {{cssxref("border-width")}} 的相应倍数，不能为负。
+
auto
+
将等同于内部对应的 {{cssxref("border-image-slice")}} 的宽或高（可用的话）。如果图像没有需要的相应的属性，将相对于 border-width 进行指定。
+
+ +

正式定义

+ +

{{CSSInfo}}

+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

Tiling a border image

+ +

示例使用了下方 90*90 像素的 ".png" 图像。

+ +

+ +

因此，每个圆圈为 30*30 像素。

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+   no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
+ +

CSS

+ +
p {
+  border: 20px solid;
+  border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round;
+  border-image-width: 16px;
+  padding: 40px;
+}
+ +

结果

+ +

{{EmbedLiveSample('Tiling_a_border_image', 200, 240)}}

+ +

技术规格

+ + + + + + + + + + + + + + + + +
CSS版本状态评注
{{SpecName('CSS3 Backgrounds', '#the-border-image-width', 'border-image-width')}}{{Spec2('CSS3 Backgrounds')}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.border-image-width")}}

diff --git a/files/zh-cn/web/css/border-image/index.html b/files/zh-cn/web/css/border-image/index.html new file mode 100644 index 0000000000..079924c67d --- /dev/null +++ b/files/zh-cn/web/css/border-image/index.html @@ -0,0 +1,92 @@ +--- +title: border-image +slug: Web/CSS/border-image +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - border-image +translation_of: Web/CSS/border-image +--- +
{{CSSRef}}
+ +

border-image CSS属性允许在元素的边框上绘制图像。这使得绘制复杂的外观组件更加简单，也不用在某些情况下使用九宫格了。使用 border-image 时，其将会替换掉 {{cssxref("border-style")}} 属性所设置的边框样式。虽然规范要求使用 border-image 时边框样式必须存在，但一些浏览器可能没有实现这一点。

+ +

特别注意，若 {{cssxref("border-image-source")}}（此值可用border-image-source或border-image简写设置) 的值为 none 或者图片不能显示，则将应用 border-style。

+ +

{{cssinfo}}

+ +

语法

+ +
/* border-image: image-source image-height image-width image-repeat */
+border-image: url("/images/border.png") 30 30 repeat;
+border-image: url("/images/border.png") 30 30 stretch;
+
+ +

值

+ +

参考各属性对应的值。

+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

位图

+ +

HTML 内容

+ +
<div id="bitmap">The image is stretched to fill the area.</div>
+ +

CSS 内容

+ +
#bitmap {
+  border: 30px solid transparent;
+  padding: 20px;
+  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
+}
+
+ +

{{ EmbedLiveSample('位图') }}

+ +

渐变

+ +

HTML 内容

+ +
<div id="gradient">The image is stretched to fill the area.</div>
+ +

CSS 内容

+ +
#gradient {
+  border: 30px solid;
+  border-image: linear-gradient(red, yellow) 10;
+  padding: 20px;
+}
+
+ +

{{ EmbedLiveSample('渐变') }}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Backgrounds', '#border-image', 'border-image')}}{{Spec2('CSS3 Backgrounds')}} 
+ +

浏览器兼容性

+ +
{{Compat("css.properties.border-image")}}
diff --git a/files/zh-cn/web/css/border-inline-color/index.html b/files/zh-cn/web/css/border-inline-color/index.html new file mode 100644 index 0000000000..d12ee53608 --- /dev/null +++ b/files/zh-cn/web/css/border-inline-color/index.html @@ -0,0 +1,92 @@ +--- +title: border-inline-color +slug: Web/CSS/border-inline-color +translation_of: Web/CSS/border-inline-color +--- +
{{CSSRef}}
+ +

The border-inline-color CSS property defines the color of the logical inline borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the {{cssxref("border-top-color")}} and {{cssxref("border-bottom-color")}}, or {{cssxref("border-right-color")}} and {{cssxref("border-left-color")}} property depending on the values defined for {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.

+ +
border-inline-color: yellow;
+border-inline-color: #F5F6F7;
+
+ +

The border color in the other dimension can be set with {{cssxref("border-block-color")}} which sets {{cssxref("border-block-start-color")}}, and {{cssxref("border-block-end-color")}}.

+ +

Syntax

+ +

Values

+ +
+
<'color'>
+
The color of the border. See {{cssxref("color")}}.
+
+ +

Formal definition

+ +

{{CSSInfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Border color with vertical text

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-color: red;
+}
+ +

Results

+ +

{{EmbedLiveSample("Border_color_with_vertical_text", 140, 140)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Logical Properties", "#propdef-border-inline-color", "border-inline-color")}}{{Spec2("CSS Logical Properties")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.border-inline-color")}}

+ +

See also

+ +
    +
  • This property maps to the physical border properties: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, or {{cssxref("border-left-color")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097
    • +
diff --git a/files/zh-cn/web/css/border-left-color/index.html b/files/zh-cn/web/css/border-left-color/index.html new file mode 100644 index 0000000000..5548cf4ecd --- /dev/null +++ b/files/zh-cn/web/css/border-left-color/index.html @@ -0,0 +1,104 @@ +--- +title: border-left-color +slug: Web/CSS/border-left-color +translation_of: Web/CSS/border-left-color +--- +
{{CSSRef("CSS Borders")}}
+ +

 border-left-color 属性设置元素的左边框颜色。值得注意的是，在大数情况下使用 {{cssxref("border-color")}} 或 {{cssxref("border-left")}} 更加方便和普遍。

+ +
/* <color> values */
+border-left-color: red;
+border-left-color: #ffbb00;
+border-left-color: rgb(255, 0, 0);
+border-left-color: hsla(100%, 50%, 25%, 0.75);
+border-left-color: currentColor;
+border-left-color: transparent;
+
+/* Global values */
+border-left-color: inherit;
+border-left-color: initial;
+border-left-color: unset;
+
+ +

{{cssinfo}}

+ +

语法 

+ +

 border-left-color 属性取值为单个颜色值.

+ +

取值

+ +
+
{{cssxref("<color>")}}
+
左边框的颜色。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

例子

+ +

一个带边框的简单 div

+ +

HTML

+ +
<div class="mybox">
+  <p>This is a box with a border around it.
+     Note which side of the box is
+     <span class="redtext">red</span>.</p>
+</div>
+ +

CSS

+ +
.mybox {
+    border: solid 0.3em gold;
+    border-left-color: red;
+    width: auto;
+}
+.redtext {
+    color: red;
+}
+ +

Result

+ +

{{EmbedLiveSample('A_simple_div_with_a_border')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-left-color', 'border-left-color')}}{{Spec2('CSS3 Backgrounds')}}No significant changes, though the transparent keyword, now included in {{cssxref("<color>")}} which has been extended, has been formally removed.
{{SpecName('CSS2.1', 'box.html#propdef-border-left-color', 'border-left-color')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.border-left-color")}}

+ +

See also

+ +
    +
  • The border-related CSS shorthand properties: {{Cssxref("border")}}, {{Cssxref("border-left")}}, and {{Cssxref("border-color")}}.
    • +
  • The color-related CSS properties for the other borders: {{Cssxref("border-right-color")}}, {{Cssxref("border-bottom-color")}}, and {{Cssxref("border-top-color")}}.
    • +
  • The other border-related CSS properties applying to the same border: {{cssxref("border-left-style")}} and {{cssxref("border-left-width")}}.
    • +
diff --git a/files/zh-cn/web/css/border-left-style/index.html b/files/zh-cn/web/css/border-left-style/index.html new file mode 100644 index 0000000000..74657ccfae --- /dev/null +++ b/files/zh-cn/web/css/border-left-style/index.html @@ -0,0 +1,131 @@ +--- +title: border-left-style +slug: Web/CSS/border-left-style +translation_of: Web/CSS/border-left-style +--- +
{{CSSRef}}
+ +

The border-left-style CSS property sets the line style of an element's left {{cssxref("border")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-left-style.html")}}
+ + + + +
Note: The specification doesn't define how borders of different styles connect in the corners.
+ +

Syntax

+ +
/* Keyword values */
+border-left-style: none;
+border-left-style: hidden;
+border-left-style: dotted;
+border-left-style: dashed;
+border-left-style: solid;
+border-left-style: double;
+border-left-style: groove;
+border-left-style: ridge;
+border-left-style: inset;
+border-left-style: outset;
+
+/* Global values */
+border-left-style: inherit;
+border-left-style: initial;
+border-left-style: unset;
+
+ + +

The border-left-style property is specified as a single keyword chosen from those available for the {{cssxref("border-style")}} property.

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* Define look of the table */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-left-style example classes */
+.b1 {border-left-style: none;}
+.b2 {border-left-style: hidden;}
+.b3 {border-left-style: dotted;}
+.b4 {border-left-style: dashed;}
+.b5 {border-left-style: solid;}
+.b6 {border-left-style: double;}
+.b7 {border-left-style: groove;}
+.b8 {border-left-style: ridge;}
+.b9 {border-left-style: inset;}
+.b10 {border-left-style: outset;}
+ +

Result

+ +

{{ EmbedLiveSample('Examples', 300, 200) }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-left-style')}}{{Spec2('CSS3 Backgrounds')}}No significant change.
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.border-left-style")}}

+ +

See also

+ +
    +
  • The other style-related border properties: {{Cssxref("border-bottom-style")}}, {{Cssxref("border-right-style")}}, {{Cssxref("border-top-style")}}, and {{Cssxref("border-style")}}.
    • +
  • The other left-border-related properties: {{Cssxref("border-left")}}, {{Cssxref("border-left-color")}}, and {{Cssxref("border-left-width")}}.
    • +
diff --git a/files/zh-cn/web/css/border-left-width/index.html b/files/zh-cn/web/css/border-left-width/index.html new file mode 100644 index 0000000000..af8c580ccf --- /dev/null +++ b/files/zh-cn/web/css/border-left-width/index.html @@ -0,0 +1,143 @@ +--- +title: border-left-width +slug: Web/CSS/border-left-width +tags: + - CSS + - CSS属性 + - CSS边框 +translation_of: Web/CSS/border-left-width +--- +
{{CSSRef}}
+ +

CSS 的 border-left-width 属性用来设置盒子的左边框的宽度。

+ +
{{EmbedInteractiveExample("pages/css/border-left-width.html")}}
+ + + +

语法

+ +
/* 关键字数值  */
+border-left-width: thin;
+border-left-width: medium;
+border-left-width: thick;
+
+/* 长度数值 */
+border-left-width: 10em;
+border-left-width: 3vmax;
+border-left-width: 6px;
+
+/* 全局关键字 */
+border-left-width: inherit;
+border-left-width: initial;
+border-left-width: unset;
+ +

数值

+ +
+
<br-width>
+
定义边框的宽度，或者作为显性非负的长度值 {{cssxref("<length>")}} 或者是关键字. 如果他是一个关键字，它必须是下列值的一种： + + + + + + + + + + + + + + + + + + +
thin +
 
+ 		一个细边框
medium +
 
+ 		一个中等边框
thick +
 
+ 		一个粗边框
+ +
+

笔记: 因为规范没有定义每个关键字表示的确切厚度，当使用其中之一的关键字时，需要具体实施才知道确切结果。不过，它们通常遵循下面的模式 thin ≤ medium ≤ thick, 在单独文档中这些值内部是恒定不变的。

+
+
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

例子

+ +

HTML

+ +
<div>Element 1</div>
+<div>Element 2</div>
+ +

CSS

+ +
div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-left-width: thick;
+}
+div:nth-child(2) {
+  border-left-width: 2em;
+}
+ +

结果

+ +

{{EmbedLiveSample('Example', '100%')}}

+ +

规格

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-left-width')}}{{Spec2('CSS3 Backgrounds')}}没有规格变化.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-left-width')}}{{Spec2('CSS2.1')}}没有规格变化
{{SpecName('CSS1', '#border-left-width', 'border-left-width')}}{{Spec2('CSS1')}}最初的定义
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.border-left-width")}}

+ +

其他

+ +
    +
  • The other border-width-related CSS properties: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}, and {{Cssxref("border-width")}}.
    • +
  • The other border-left-related CSS properties: {{Cssxref("border")}}, {{Cssxref("border-left")}}, {{Cssxref("border-left-style")}}, and {{Cssxref("border-left-color")}}.
    • +
diff --git a/files/zh-cn/web/css/border-left/index.html b/files/zh-cn/web/css/border-left/index.html new file mode 100644 index 0000000000..6edada19f8 --- /dev/null +++ b/files/zh-cn/web/css/border-left/index.html @@ -0,0 +1,157 @@ +--- +title: border-left +slug: Web/CSS/border-left +tags: + - CSS + - CSS 属性 + - CSS 边框 +translation_of: Web/CSS/border-left +--- +
{{CSSRef}}
+ +

CSS属性 border-left 是属性{{ Cssxref("border-left-color") }}, {{ Cssxref("border-left-style") }}, 和{{ Cssxref("border-left-width") }}的三者的缩写。这些属性都是在描述一个元素的左边的边框{{cssxref("border")}}。

+ +
border-left: 1px;
+border-left: 2px dotted;
+border-left: medium dashed green;
+
+ +

这三种属性值的缩写需要按照顺序定义数值，也可以省略其中的一个或者两个。

+ +
+

和CSS所有的缩写属性一样，border-left 总是会设置该缩写属性所包含的全部属性值，即使开发者并没有一一指定这些值。CSS缩写属性会给没有被定义的属性一个默认的属性值。那就意味着下面这个例子......

+ +
border-left-style: dotted;
+border-left: thick green;
+
+ +

......实际上应该是下面这个样子......

+ +
border-left-style: dotted;
+border-left: none thick green;
+
+ +

......并且在 border-left 之前定义的 {{ Cssxref("border-left-style") }} 的值也会被覆盖。由于 {{ Cssxref("border-left-style") }} 的默认值是 none, border-style的最终结果就是没有边框。

+
+ +

{{cssinfo}}

+ +

Syntax

+ +

这三种属性值的缩写需要按照顺序定义数值，也可以省略其中的一个或者两个。

+ +

Values

+ +
+
<br-width> 
+
请参阅{{ Cssxref("border-left-width") }}.
+
<br-style> 
+
请参阅{{ Cssxref("border-left-style") }}.
+
{{cssxref("<color>")}}
+
请参阅 {{ Cssxref("border-left-color") }}.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +
<div>
+  This box has a border on the left side.
+</div>
+ +
div {
+  border-left: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+
+ +

{{ EmbedLiveSample('Example') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-left', 'border-left') }}{{ Spec2('CSS3 Backgrounds') }}No direct changes, though the modification of values for the {{ cssxref("border-left-color") }} do apply to it.
{{ SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left') }}{{ Spec2('CSS2.1') }}No significant changes.
{{ SpecName('CSS1', '#border-left', 'border-left') }}{{ Spec2('CSS1') }}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1.0") }}43.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatVersionUnknown}}{{ CompatGeckoMobile("1.0") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
diff --git a/files/zh-cn/web/css/border-radius/index.html b/files/zh-cn/web/css/border-radius/index.html new file mode 100644 index 0000000000..8284b8d2f8 --- /dev/null +++ b/files/zh-cn/web/css/border-radius/index.html @@ -0,0 +1,336 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - CSS 属性 + - CSS 边框 + - Web + - 参考 + - 布局 +translation_of: Web/CSS/border-radius +--- +

{{ CSSRef("CSS Borders") }}

+ +

CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

+ +

Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse

+ +
{{EmbedInteractiveExample("pages/css/border-radius.html")}}
+ + + +

该属性是一个 简写属性，是为了将这四个属性 {{Cssxref("border-top-left-radius")}}、{{Cssxref("border-top-right-radius")}}、{{Cssxref("border-bottom-right-radius")}}，和 {{Cssxref("border-bottom-left-radius")}} 简写为一个属性。

+ +

即使元素没有边框，圆角也可以用到 {{ Cssxref("background") }} 上面，具体效果受 {{ Cssxref("background-clip") }} 影响。

+ +

当 {{Cssxref("border-collapse")}} 的值为 collapse 时，border-radius 属性不会被应用到表格（

）元素上。 + + + + + + + + + + + + + + + + + + + + +
+ + + radius + all-corner.png + 可以是 {{ cssxref("<length>") }} 或者 {{cssxref("<percentage>")}}，表示边框四角的圆角半径。只在单值语法中使用。 + + + top-left-and-bottom-right + top-left-bottom-right.png + 可以是 {{ cssxref("<length>") }} 或者 {{cssxref("<percentage>")}}，表示边框左上角和右下角的圆角半径。只在双值语法中使用。 + + + top-right-and-bottom-left + top-right-bottom-left.png + 可以是 {{ cssxref("<length>") }} 或者 {{cssxref("<percentage>")}}，表示边框右上角和左下角的圆角半径。只在双值或三值语法中使用。 + + + top-left + top-left.png + 可以是 {{ cssxref("<length>") }} 或者 {{cssxref("<percentage>")}}，表示边框左上角的圆角半径。只在三值或四值语法中使用。 + + + top-right + top-right.png + 可以是 {{ cssxref("<length>") }} 或者 {{cssxref("<percentage>")}}，表示边框右上角的圆角半径。只在四值语法中使用。 + + + bottom-right + bottom-rigth.png + 可以是 {{ cssxref("<length>") }} 或者 {{cssxref("<percentage>")}}，表示边框右下角的圆角半径。只在三值或四值语法中使用。 + + + bottom-left + bottom-left.png + 可以是 {{ cssxref("<length>") }} 或者 {{cssxref("<percentage>")}}，表示边框左下角的圆角半径。只在四值语法中使用。 + + + inherit + + 表示四个值都从父元素计算值继承。 + + + + +
+
{{cssxref("<length>")}}
+
{{ cssxref("<length>") }} 定义圆形半径或椭圆的半长轴，半短轴。负值无效。
+
{{cssxref("<percentage>")}}
+
使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。负值无效。
+
+ +

例如:

+ +
border-radius: 1em/5em;
+
+/* 等价于： */
+
+border-top-left-radius:     1em 5em;
+border-top-right-radius:    1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius:  1em 5em;
+
+ +
border-radius: 4px 3px 6px / 2px 4px;
+
+/* 等价于： */
+
+border-top-left-radius:     4px 2px;
+border-top-right-radius:    3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius:  3px 4px;
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

示例

+ +
  border: solid 10px;
+  /* the border will curve into a 'D' */
+  border-radius: 10px 40px 40px 10px;
+
+ +
  border: groove 1em red;
+  border-radius: 2em;
+
+ +
  background: gold;
+  border: ridge gold;
+  border-radius: 13em/3em;
+
+ +
  border: none;
+  border-radius: 40px 10px;
+
+ +
  border: none;
+  border-radius: 50%;
+
+ +

在线示例

+ +

示例 1 : http://jsfiddle.net/Tripad/qnGKj/2/

+ +

示例 2 : http://jsfiddle.net/Tripad/qnGKj/3/

+ +

示例 3 : http://jsfiddle.net/Tripad/qnGKj/4/

+ +

示例 4 : http://jsfiddle.net/Tripad/qnGKj/5/

+ +

示例 5 : http://jsfiddle.net/Tripad/qnGKj/6/

+ +

注意

+ +
    +
  • 在 Gecko 中，点状和虚线状圆角边框被渲染为了实线 {{ bug("382721") }}.
    • +
  • 当表格元素的 {{ Cssxref("border-collapse") }} 为 collapse 时 border-radius 不会生效。
    • +
  • 旧版本 WebKit 对于多重值有不同的处理方式，见下。
    • +
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius') }}{{ Spec2('CSS3 Backgrounds') }} 
+ +

{{cssinfo}}

+ + +

浏览器兼容性

+ + + +

{{Compat("css.properties.border-radius")}}

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{ CompatGeckoDesktop("2.0") }}
+ {{ CompatGeckoDesktop("1.0") }}{{ property_prefix("-moz") }}		4.0
+ 0.2{{ property_prefix("-webkit") }}		9.010.55.0
+ 3.0{{ property_prefix("-webkit") }}
Elliptical borders{{ CompatGeckoDesktop("1.9.1") }}yesyesyesyes, but see below
4 values for 4 cornersyes4.0yesyes5.0
Percentagesyes
+ was {{ non-standard_inline() }} (see below)		yesyes11.55.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureiOS SafariOpera MiniOpera MobileAndroid Browser
Basic support3.2{{ property_prefix("-webkit") }}{{ CompatNo() }}{{ CompatNo() }}2.1{{ property_prefix("-webkit") }}
Elliptical borders{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}
4 values for 4 corners{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}
Percentages{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}
+
+ +

<percentage> 值

+ +
    +
  • 在旧版本的 Chrome 和 Safari 中不支持。(fixed in Sepember 2010)
    • +
  • 在 11.50 版本以前的 Opera 中实现有问题。
    • +
  • Gecko 2.0 (Firefox 4) 版本前实现不标准：水平半轴和垂直半轴都相对于盒子模型的宽度。
    • +
  • 在旧版本的 iOS (iOS 5 之前) 和 Android 中 (WebKit 532 之前) 不支持。
    • +
+ +

Gecko notes

+ +

In Gecko 2.0 -moz-border-radius was renamed to border-radius; -moz-border-radius was supported as an alias until Gecko 12.0. In order to conform to the CSS3 standard, Gecko 2.0

+ +
    +
  • changes the handling of {{cssxref("<percentage>")}} values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with border-radius: 50%;
    • +
  • makes rounded corners clip content and images (if {{ cssxref("overflow") }}: visible is not set)
    • +
+ +
Note: Support for the prefixed version (-moz-border-radius) was removed in Gecko 13.0 {{ geckoRelease("13.0") }}.
+ +

WebKit notes

+ +

旧版本的 Safari 和 Chrome (532.5 之前)

+ +
    +
  • 只支持单值设定四个角。必须使用完整值来设置不同角。 
    • +
  • 不支持斜杠 / 符号，如果指定了两个值，那么四个角都为椭圆角. + 
    /* 它们是等价的 */
+
+-webkit-border-radius: 40px 10px;
+        border-radius: 40px/10px;
+
    +
    • +
+ +

Opera notes

+ +

In Opera (prior to Opera 11.60), applying border-radius to replaced elements will not have rounded corners.

+ +

另请参阅

+ +
    +
  • 与 border-radius 相关的 CSS 属性：{{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}}, {{Cssxref("border-bottom-left-radius")}}
    • +
diff --git a/files/zh-cn/web/css/border-right-color/index.html b/files/zh-cn/web/css/border-right-color/index.html new file mode 100644 index 0000000000..07f5672955 --- /dev/null +++ b/files/zh-cn/web/css/border-right-color/index.html @@ -0,0 +1,109 @@ +--- +title: border-right-color +slug: Web/CSS/border-right-color +translation_of: Web/CSS/border-right-color +--- +
{{CSSRef}}
+ +

border-right-color CSS属性用来设置元素右边的 {{cssxref("border")}}. 这个属性的值也可以通过简写的CSS属性 {{cssxref("border-color")}} 或{{cssxref("border-right")}}来设置.

+ +
{{EmbedInteractiveExample("pages/css/border-right-color.html")}}
+ + + +

Syntax

+ +
/* <color> values */
+border-right-color: red;
+border-right-color: #ffbb00;
+border-right-color: rgb(255, 0, 0);
+border-right-color: hsla(100%, 50%, 25%, 0.75);
+border-right-color: currentColor;
+border-right-color: transparent;
+
+/* Global values */
+border-right-color: inherit;
+border-right-color: initial;
+border-right-color: unset;
+
+ +

The border-right-color property is specified as a single value.

+ +

Values

+ +
+
{{cssxref("<color>")}}
+
The color of the right border.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

A simple div with a border

+ +

HTML

+ +
<div class="mybox">
+  <p>This is a box with a border around it.
+    Note which side of the box is
+    <span class="redtext">red</span>.</p>
+</div>
+ +

CSS

+ +
.mybox {
+  border: solid 0.3em gold;
+  border-right-color: red;
+  width: auto;
+}
+
+.redtext {
+  color: red;
+}
+ +

Result

+ +

{{EmbedLiveSample('A_simple_div_with_a_border')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-color', 'border-color')}}{{Spec2('CSS3 Backgrounds')}}No significant changes, though the transparent keyword, now included in {{cssxref("<color>")}} which has been extended, has been formally removed.
{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-right-color')}}{{Spec2('CSS2.1')}}Initial definition
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.border-right-color")}}

+ +

See also

+ +
    +
  • The border-related CSS shorthand properties: {{cssxref("border")}}, {{cssxref("border-right")}}, and {{cssxref("border-color")}}.
    • +
  • The color-related CSS properties for the other borders: {{cssxref("border-left-color")}}, {{cssxref("border-bottom-color")}}, and {{cssxref("border-top-color")}}.
    • +
  • The other border-related CSS properties applying to the same border: {{cssxref("border-right-style")}} and {{cssxref("border-right-width")}}.
    • +
diff --git a/files/zh-cn/web/css/border-right-style/index.html b/files/zh-cn/web/css/border-right-style/index.html new file mode 100644 index 0000000000..3d5d50d242 --- /dev/null +++ b/files/zh-cn/web/css/border-right-style/index.html @@ -0,0 +1,129 @@ +--- +title: border-right-style +slug: Web/CSS/border-right-style +translation_of: Web/CSS/border-right-style +--- +
{{CSSRef}}
+ +

border-right-style 是border中的一个 CSS 子属性，描述的是右边框的样式 {{cssxref("border")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-right-style.html")}}
+ + + +
备注: 这个css没有定义不同样式的边界之间如何拼接。
+ +

Syntax

+ +
/* 可用的值 */
+border-right-style: none;
+border-right-style: hidden;
+border-right-style: dotted;
+border-right-style: dashed;
+border-right-style: solid;
+border-right-style: double;
+border-right-style: groove;
+border-right-style: ridge;
+border-right-style: inset;
+border-right-style: outset;
+
+/* 全局可用的值 */
+border-right-style: inherit;
+border-right-style: initial;
+border-right-style: unset;
+
+ +

The border-right-style property is specified as a single keyword chosen from those available for the {{cssxref("border-style")}} property.

+ +

语法格式

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* Define look of the table */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-right-style example classes */
+.b1 {border-right-style: none;}
+.b2 {border-right-style: hidden;}
+.b3 {border-right-style: dotted;}
+.b4 {border-right-style: dashed;}
+.b5 {border-right-style: solid;}
+.b6 {border-right-style: double;}
+.b7 {border-right-style: groove;}
+.b8 {border-right-style: ridge;}
+.b9 {border-right-style: inset;}
+.b10 {border-right-style: outset;}
+ +

结果

+ +

{{ EmbedLiveSample('Examples') }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-right-style')}}{{Spec2('CSS3 Backgrounds')}}No significant change.
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-right-style')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.border-right-style")}}

+ +

参考

+ +
    +
  • 其他样式相关边框属性: {{Cssxref("border-bottom-style")}}, {{Cssxref("border-left-style")}}, {{Cssxref("border-top-style")}}, and {{Cssxref("border-style")}}.
    • +
  • 其他bottom-border-related属性: {{Cssxref("border-right")}}, {{Cssxref("border-right-color")}}, and {{Cssxref("border-right-width")}}.
    • +
diff --git a/files/zh-cn/web/css/border-right-width/index.html b/files/zh-cn/web/css/border-right-width/index.html new file mode 100644 index 0000000000..1a36797efa --- /dev/null +++ b/files/zh-cn/web/css/border-right-width/index.html @@ -0,0 +1,145 @@ +--- +title: border-right-width +slug: Web/CSS/border-right-width +tags: + - CSS + - CSS属性 + - CSS边框 + - 引用 +translation_of: Web/CSS/border-right-width +--- +
{{CSSRef}}
+ +

CSS 的border-right-width 用来设置盒子右边框的宽度。

+ +
{{EmbedInteractiveExample("pages/css/border-right-width.html")}}
+ + + +

语法

+ +
/* Keyword values */
+border-right-width: thin;
+border-right-width: medium;
+border-right-width: thick;
+
+/* <length> values */
+border-right-width: 10em;
+border-right-width: 3vmax;
+border-right-width: 6px;
+
+/* Global keywords */
+border-right-width: inherit;
+border-right-width: initial;
+border-right-width: unset;
+
+ +

数值

+ +
+
<line-width>
+
定义边框的宽度，或者作为显性非负的长度值 {{cssxref("<length>")}} 或者是关键字。如果他是一个关键字，它必须是下列值的一种： + + + + + + + + + + + + + + + + + + +
thin +
 
+ 		一个细边框
medium +
 
+ 		一个中等边框
thick +
 
+ 		一个粗边框
+ +
+

笔记: 因为规范没有定义每个关键字表示的确切厚度，当使用其中之一的关键字时，需要具体实施才知道确切结果。不过，它们通常遵循下面的模式 thin ≤ medium ≤ thick, 在单独文档中这些值内部是恒定不变的。

+
+
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

例子

+ +

HTML

+ +
<div>Element 1</div>
+<div>Element 2</div>
+ +

CSS

+ +
div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-right-width: thick;
+}
+div:nth-child(2) {
+  border-right-width: 2em;
+}
+ +

结果

+ +

{{EmbedLiveSample('Example', '100%')}}

+ +

规格

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-right-width')}}{{Spec2('CSS3 Backgrounds')}}没有规格变化.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-right-width')}}{{Spec2('CSS2.1')}}没有规格变化.
{{SpecName('CSS1', '#border-left-width', 'border-right-width')}}{{Spec2('CSS1')}}最初的定义.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.border-right-width")}}

+ +

其他

+ +
    +
  • The other border-width-related CSS properties: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-top-width")}}, and {{Cssxref("border-width")}}.
    • +
  • The other border-right-related CSS properties: {{Cssxref("border")}}, {{Cssxref("border-right")}}, {{Cssxref("border-right-style")}}, and {{Cssxref("border-right-color")}}.
    • +
diff --git a/files/zh-cn/web/css/border-right/index.html b/files/zh-cn/web/css/border-right/index.html new file mode 100644 index 0000000000..0bbf13c0c4 --- /dev/null +++ b/files/zh-cn/web/css/border-right/index.html @@ -0,0 +1,155 @@ +--- +title: border-right +slug: Web/CSS/border-right +tags: + - CSS + - CSS 属性 + - CSS 边框 +translation_of: Web/CSS/border-right +--- +
{{CSSRef}}
+ +

CSS属性 border-right 是属性{{ Cssxref("border-right-color") }}, {{ Cssxref("border-right-style") }}, 和{{ Cssxref("border-right-width") }}的三者的缩写。这些属性都是在描述一个元素的右边的边框border。

+ +
border-right: 1px;
+border-right: 2px dotted;
+border-right: medium dashed green;
+
+ +
+

和CSS所有的缩写属性一样，border-right 总是会设置该缩写属性所包含的全部属性值，即使开发者并没有一一指定这些值。CSS缩写属性会给没有被定义的属性一个默认的属性值。那就意味着下面这个例子......

+ +
border-right-style: dotted;
+border-right: thick green;
+
+ +

......实际上应该是下面这个样子......

+ +
  border-right-style: dotted;
+  border-right: none thick green;
+
+ +

 ......并且在 border-right 之前定义的 {{ Cssxref("border-right-style") }} 的值也会被覆盖。由于{{ Cssxref("border-right-style") }} 的默认值是 none, border-style的最终结果就是没有边框。

+
+ +

{{cssinfo}}

+ +

Syntax

+ +

这三种属性值的缩写需要按照顺序定义数值，也可以省略其中的一个或者两个。

+ +

Values

+ +
+
<br-width> 
+
请参阅 {{ Cssxref("border-right-width") }}.
+
<br-style> 
+
请参阅 {{ Cssxref("border-right-style") }}.
+
{{cssxref("<color>")}}
+
请参阅 {{ Cssxref("border-right-color") }}.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +
<div>
+  This box has a border on the right side.
+</div>
+ +
div {
+  border-right: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+
+ +

{{ EmbedLiveSample('Example') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-right', 'border-right') }}{{ Spec2('CSS3 Backgrounds') }}No direct changes, though the modification of values for the {{ cssxref("border-right-color") }} do apply to it.
{{ SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right') }}{{ Spec2('CSS2.1') }}No significant changes.
{{ SpecName('CSS1', '#border-right', 'border-right') }}{{ Spec2('CSS1') }}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1.0") }}43.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatVersionUnknown}}{{ CompatGeckoMobile("1.0") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
diff --git a/files/zh-cn/web/css/border-spacing/index.html b/files/zh-cn/web/css/border-spacing/index.html new file mode 100644 index 0000000000..23ed018357 --- /dev/null +++ b/files/zh-cn/web/css/border-spacing/index.html @@ -0,0 +1,122 @@ +--- +title: border-spacing +slug: Web/CSS/border-spacing +translation_of: Web/CSS/border-spacing +--- +

{{ CSSRef("CSS Tables") }}

+ +

概述

+ +

border-spacing 属性指定相邻单元格边框之间的距离（只适用于 边框分离模式 ）。相当于 HTML 中的 cellspacing 属性，但是第二个可选的值可以用来设置不同于水平间距的垂直间距。

+ +

border-spacing 值也适用于表格的外层边框上，即表格的边框和第一行的、第一列的、最后一行的、最后一列的单元格之间的间距是由表格相应的（水平的或垂直的） 边框间距（border-spacing）和相应的（上，右，下或左）内边距之和。

+ +

该属性只适用于 {{ Cssxref("border-collapse") }} 值是 separate 的时候。

+ +

{{cssinfo}}

+ +

语法

+ +
/* <length> */
+border-spacing: 2px;
+
+/* horizontal <length> | vertical <length> */
+border-spacing: 1cm 2em;
+
+/* Global values */
+border-spacing: inherit;
+border-spacing: initial;
+border-spacing: unset;
+ +

值

+ +
+
length
+
描述单元格之间的水平和垂直距离的一个 {{cssxref("<length>")}} 值。它只在单值语法下使用。
+
horizontal
+
描述相邻两列的单元格之间的水平距离的一个 {{cssxref("<length>")}} 值。它只在双值语法下使用。
+
vertical
+
描述相邻两行的单元格之间的垂直距离的一个 {{cssxref("<length>")}} 值。它只在双值语法下使用。
+
inherit
+
一个表示父元素的 border-spacing 的计算值的关键字，其父元素必须应用了 border-spacing 。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

查看在线演示

+ +
table { border-spacing: 10px 5px; }
+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
{{ SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing') }}{{ Spec2('CSS2.1') }}初始定义
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基础支持1.0{{ CompatGeckoDesktop("1.0") }}8.04.01.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
特性AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基础支持{{ CompatUnknown() }}{{ CompatGeckoMobile("1.9.2") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/zh-cn/web/css/border-style/index.html b/files/zh-cn/web/css/border-style/index.html new file mode 100644 index 0000000000..af0b366697 --- /dev/null +++ b/files/zh-cn/web/css/border-style/index.html @@ -0,0 +1,240 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - CSS + - CSS 属性 + - CSS 边框 + - Web + - 参考 + - 布局 +translation_of: Web/CSS/border-style +--- +

概述

+ +

{{ CSSRef("CSS Borders") }}

+ +

border-style 是一个 CSS 简写属性，用来设定元素所有边框的样式。

+ +
注意：border-style 默认值是 none，这意味着如果您只修改 {{ Cssxref("border-width") }} 和 {{ Cssxref("border-color") }} 是不会出现边框的。
+ + + +

{{EmbedInteractiveExample("pages/css/border-style.html")}}

+ + + + + +

语法

+ +
/* Apply to all four sides */
+border-style: dashed;
+
+/* horizontal | vertical */
+border-style: dotted solid;
+
+/* top | horizontal | bottom */
+border-style: hidden double dashed;
+
+/* top | right | bottom | left */
+border-style: none solid dotted dashed;
+
+/* Global values */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+
+ +

取值

+ +
+
<br-style>
+
关键字用于描述边框样式。它可以有以下取值： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
none +
+ 		和关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，{{ cssxref("border-width") }} 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。
hidden +
+ 		和关键字 none 类似，不显示边框。在这种情况下，如果没有设定背景图片，{{ cssxref("border-width") }} 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，hidden 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示。
dotted +
+ 		显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 {{ cssxref("border-width") }} 计算值的一半。
dashed +
+ 		显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定。
solid +
+ 		显示为一条实线。
double +
+ 		显示为一条双实线，宽度是 {{ cssxref("border-width") }} 。
groove +
+ 		显示为有雕刻效果的边框，样式与 ridge 相反。
ridge +
+ 		显示为有浮雕效果的边框，样式与 groove 相反。
inset +
+ 		显示为有陷入效果的边框，样式与 outset 相反。当它指定到 {{ cssxref("border-collapse") }} 为 collapsed 的单元格时，会显示为 groove 的样式。
outset +
+ 		+

显示为有突出效果的边框，样式与 inset 相反。当它指定到 {{ cssxref("border-collapse") }} 为 collapsed 的单元格时，会显示为 ridge 的样式。

+
+
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

包含所有属性取值的表格

+ +

以下是一个所有取值的例子

+ +

HTML

+ +
<table>
+    <tr>
+        <td class="b1">none</td>
+        <td class="b2">hidden</td>
+        <td class="b3">dotted</td>
+        <td class="b4">dashed</td>
+    </tr>
+    <tr>
+        <td class="b5">solid</td>
+        <td class="b6">double</td>
+        <td class="b7">groove</td>
+        <td class="b8">ridge</td>
+    </tr>
+    <tr>
+        <td class="b9">inset</td>
+        <td class="b10">outset</td>
+    </tr>
+</table>
+ +

CSS

+ +
/* 定义表格外观 */
+table {
+    border-width: 3px;
+    background-color: #52E396;
+}
+tr, td {
+    padding: 2px;
+}
+
+/* border-style 示例 */
+.b1 {border-style:none;}
+.b2 {border-style:hidden;}
+.b3 {border-style:dotted;}
+.b4 {border-style:dashed;}
+.b5 {border-style:solid;}
+.b6 {border-style:double;}
+.b7 {border-style:groove;}
+.b8 {border-style:ridge;}
+.b9 {border-style:inset;}
+.b10 {border-style:outset;}
+ +

输出

+ +

{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-style', 'border-style') }}{{ Spec2('CSS3 Backgrounds') }}No change
{{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }}{{ Spec2('CSS2.1') }}Added the 2-, 3- and 4-value syntaxes
{{ SpecName('CSS1', '#border-style', 'border-style') }}{{ Spec2('CSS1') }}
+ +

浏览器兼容性

+ + + + + +

{{Compat("css.properties.border-style")}}

+ + + +
+ +

另请参阅

+ +
    +
  • 和边框有关的 CSS 简写属性：{{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-radius") }}
    • +
diff --git a/files/zh-cn/web/css/border-top-color/index.html b/files/zh-cn/web/css/border-top-color/index.html new file mode 100644 index 0000000000..8e605552db --- /dev/null +++ b/files/zh-cn/web/css/border-top-color/index.html @@ -0,0 +1,113 @@ +--- +title: border-top-color +slug: Web/CSS/border-top-color +tags: + - CSS + - CSS Borders + - CSS属性 +translation_of: Web/CSS/border-top-color +--- +
{{CSSRef}}
+ +

border-top-color 属性用以设置某元素顶部 {{cssxref("border")}}的颜色。通常，用{{cssxref("border-color")}} 或 {{cssxref("border-top")}} 设置该颜色更为便捷可取。

+ +
{{EmbedInteractiveExample("pages/css/border-top-color.html")}}
+ + + +

语法

+ +
/* <color> values */
+border-top-color: red;
+border-top-color: #ffbb00;
+border-top-color: rgb(255, 0, 0);
+border-top-color: hsla(100%, 50%, 25%, 0.75);
+border-top-color: currentColor;
+border-top-color: transparent;
+
+/* Global values */
+border-top-color: inherit;
+border-top-color: initial;
+border-top-color: unset;
+
+ +

border-top-color 属性的值为单值。

+ +

值

+ +
+
{{cssxref("<color>")}}
+
上边框的颜色。
+
+ +

规范语法

+ +
{{csssyntax}}
+ +

示例

+ +

一个简单的带边框容器

+ +

HTML

+ +
<div class="mybox">
+  <p>This is a box with a border around it.
+     Note which side of the box is
+     <span class="redtext">red</span>.</p>
+</div>
+ +

CSS

+ +
.mybox {
+  border: solid 0.3em gold;
+  border-top-color: red;
+  width: auto;
+}
+
+.redtext {
+  color: red;
+}
+ +

结果

+ +

{{EmbedLiveSample('A_simple_div_with_a_border')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}}{{Spec2('CSS3 Backgrounds')}}No significant changes, though the transparent keyword, now included in {{cssxref("<color>")}} which has been extended, has been formally removed.
{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-top-color')}}{{Spec2('CSS2.1')}}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.border-top-color")}}

+ +

See also

+ +
    +
  • The border-related CSS shorthand properties: {{Cssxref("border")}}, {{Cssxref("border-top")}}, and {{Cssxref("border-color")}}.
    • +
  • The color-related CSS properties for the other borders: {{Cssxref("border-right-color")}}, {{Cssxref("border-bottom-color")}}, and {{Cssxref("border-left-color")}}.
    • +
  • The other border-related CSS properties applying to the same border: {{cssxref("border-top-style")}} and {{cssxref("border-top-width")}}.
    • +
diff --git a/files/zh-cn/web/css/border-top-left-radius/index.html b/files/zh-cn/web/css/border-top-left-radius/index.html new file mode 100644 index 0000000000..716b236743 --- /dev/null +++ b/files/zh-cn/web/css/border-top-left-radius/index.html @@ -0,0 +1,255 @@ +--- +title: border-top-left-radius +slug: Web/CSS/border-top-left-radius +tags: + - CSS + - CSS属性 + - CSS边框 + - CSS边框圆角 +translation_of: Web/CSS/border-top-left-radius +--- +

概要

+ +

border-top-left-radius 用来设置元素左上角的圆角效果。这段圆弧（角）可以是圆或椭圆的一部分。如果其中有一个值为0，那么将无圆角效果（见border-top-left-radius取值方式)。

+ +
border-radius.png
+ +

盒模型的背景，可以是一张图片或一种颜色，会在边框处被剪裁，更甚至可以是一个圆；剪切的额外定位通过另一个CSS属性"background-clip"来定义。

+ +
在border-top-left-radius属性值之后，如果作用的元素上没有设置“border-radius”属性，那么这个属性值就会通过简写属性重新设置成它的初始值。
+ +

语法

+ +
/* the corner is a circle */
+/* border-top-left-radius: radius */
+border-top-left-radius: 3px;
+
+/* the corner is an ellipsis */
+/* border-top-left-radius: horizontal vertical */
+border-top-left-radius: 0.5em 1em;
+
+border-top-left-radius: inherit;
+
+ +
+
属性值：
+ +
+
radius
+
可以是 <length> 或者 <percentage>，表示左上角边框的圆角半径。
+
horizontal
+
可以是 <length> 或者 <percentage>，表示椭圆的水平半长轴在被用作边框左上角的半径。
+
vertical
+
可以是 <length> 或者 <percentage>，表示椭圆的垂直半长轴在被用作边框左上角的半径。
+
+
+ +

取值

+ +
+
<length>
+
<length> 定义圆形半径或椭圆的半长轴，半短轴。不能用负值。
+
<percentage>
+
使用百分数定义圆形半径或椭圆的半长轴，半短轴。水平半轴相对于盒模型的宽度；垂直半轴相对于盒模型的高度。不能用负值。
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

示例

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
实例代码
+
 
+ 		椭圆的弧被用作左上角边框 + 
+div {
+  border-top-left-radius: 40px 40px;
+}
+
+
+
 
+ 		椭圆的弧被用作左上角边框 + 
+div {
+  border-top-left-radius: 40px 20px;
+}
+
+
+
 
+ 		盒子是方形的，圆弧被用作左上角边框 + 
+div
+  border-top-left-radius: 40%;
+}
+
+
+
 
+ 		盒子不是方形的，椭圆的弧被用作左上角边框 + 
+div {
+  border-top-left-radius: 40%;
+}
+
+
+
 
+ 		背景色在左上角被剪切 + 
+div {
+  border-top-left-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

规范

+ + + + + + + + + + + + + + + + +
详细说明状态解释
{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0 {{property_prefix("-webkit")}}
+ 4.0		1.0 (1.0){{property_prefix("-moz")}}[1]
+ 4.0 (2.0)		9.010.53.0 (522){{property_prefix("-webkit")}}
+ 5.0 (532.5)
Percentages4.01.0 (1.0)[2]
+ 4.0 (2.0)		9.010.55.0 (532.5)
Elliptical corners1.03.5 (1.9.1)9.010.53.0 (522)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Percentages{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Elliptical corners{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

 

+ +
备注：
+ +

[1] 火狐浏览器较早的版本(Firefox 1 到 Firefox 12) 在使用这个属性时需使用浏览器厂商前缀，-moz-border-radius-topleft,最近的版本Mozilla实现了这个属性的支持（在最终的版本被敲定之前）。

+ +

Gecko内核在圆角处无法正确的表现点划线（dotted）和虚线（dashed）:它会将它们渲染成实线({{bug("382721")}}).

+ +

[2] 在火狐4之前，这个 <percentage> 是相对于盒子的宽度，即便指定了一个高做为半径. 这被意味着到 -moz-border-radius-topleft是单个值的时候，它总是画一个圆弧，而不是一个椭圆。

+ +

另请参阅

+ +
    +
  • border-radius 相关 CSS 属性:  {{cssxref("border-radius")}}, 其他边角属性： {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, and {{cssxref("border-bottom-left-radius")}}.
    • +
diff --git a/files/zh-cn/web/css/border-top-right-radius/index.html b/files/zh-cn/web/css/border-top-right-radius/index.html new file mode 100644 index 0000000000..a818e58307 --- /dev/null +++ b/files/zh-cn/web/css/border-top-right-radius/index.html @@ -0,0 +1,284 @@ +--- +title: border-top-right-radius +slug: Web/CSS/border-top-right-radius +tags: + - CSS属性 + - CSS边框 + - Layout + - 互联网 + - 参考 + - 需要移动浏览器兼容 +translation_of: Web/CSS/border-top-right-radius +--- +

{{ CSSRef("CSS Borders") }}

+ +

概要

+ +

border-top-right-radius属性设置元素的右上角弧形，这个圆弧可能是一个椭圆，或者其中一个值是0的话，就是没有圆弧，换句话就是说拐角是方形的。

+ +
border-top-right-radius.png
+ +

一个背景通常以一张图片或者颜色开始，在边框处被剪切，更甚至就是一个圆形；剪切的额外定位通过一个CSS属性"background-clip"来定义。

+ +
在border-top-radius-radiu属性值之后，如果作用在一个元素上没有设置“border-radius”简写属性，那么这个属性值就会通过简写属性重新设置成它的初始值。
+ +

{{cssinfo}}

+ +

语法

+ +

How to read CSS syntax.

+ +
正式语法: {{csssyntax("border-top-right-radius")}}
+ +
border-top-right-radius: radius               /* the corner is a circle    */  E.g. border-top-right-radius: 3px
+border-top-right-radius: horizontal vertical  /* the corner is an ellipsis */  E.g. border-top-right-radius: 0.5em 1em
+
+border-top-right-radius: inherit
+ +
 
+ +
 
+ +
 
+ +
 
+ +
+

之上:

+ +
+
radius
+
这是一个{{cssxref("<length>")}}或者一个{{cssxref("<percentage>")}}，标志着圆的半径在这个拐角用作边框。
+
horizontal
+
这是一个{{cssxref("<length>")}}或者一个{{cssxref("<percentage>")}} ，标志着椭圆的水平半长轴在这个拐角被用作边框。
+
vertical
+
这是一个{{cssxref("<length>")}}或者一个{{cssxref("<percentage>")}}，标志着椭圆的垂直半长轴在这个拐角被用作边框。
+
+
+ +

属性值

+ +
+
<长度>
+
标志着圆弧半径的大小或者椭圆的半长轴或半短轴，它属性值的数据类型表示任意单位通过{{cssxref("<length>")}}，负值是无效的。
+
<百分数>
+
标志着圆弧半径的大小或者椭圆的半长轴或半短轴，水平轴的百分值是相对盒模型的宽度，垂直轴的百分值是相对盒模型的宽度，负值是无效的。
+
+ +

例子

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
实例代码
+
 
+ 		圆形的弧被用作边框 + 
+div {
+  border-top-right-radius: 40px 40px;
+}
+ +
 
+ +
 
+ +
 
+
+
 
+ 		椭圆的弧被用作边框 + 
+div {
+  border-top-right-radius: 40px 20px;
+}
+ +
 
+ +
 
+ +
 
+
+
 
+ 		盒子是方形，圆形的弧被用作边框 + 
+div {
+  border-top-right-radius: 40%;
+}
+ +
 
+ +
 
+ +
 
+
+
 
+ 		盒子不是方形，椭圆的弧被用作边框 + 
+div {
+  border-top-right-radius: 40%;
+}
+ +
 
+ +
 
+ +
 
+
+
 
+ 		背景颜色在边框处剪切 + 
+div {
+  border-top-right-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+ +
 
+ +
 
+ +
 
+ +
 
+ +
 
+ +
 
+
+ +

技术参数

+ + + + + + + + + + + + + + + + +
详细说明状态解释
{{ SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius') }}{{ Spec2('CSS3 Backgrounds') }}Initial specification
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support0.2 {{ property_prefix("-webkit") }} +

1.0 (1.0) - 12.0 (12.0){{ property_prefix("-moz") }}
+ 但有一个非标准的名称:
+ -moz-border-radius-topright

+ 		9.010.53.0 (522){{ property_prefix("-webkit") }}
4.04.0 (2.0)5.0 (532.5)
百分值4.01.0 (1.0) 有一个bug (see note)9.010.55.0 (532.5)
4.0 (2.0)
椭圆拐角0.23.5 (1.9.1)9.010.53.0 (522 )
+
+ +
+ + + + + + + + + + + + + + + + + + + +
特性AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基本支持{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}
+
+ +

浏览器备注

+ +

火狐内核（Gecko）

+ +
    +
  • 前缀版 (允许火狐1至火狐12) 属性使用一个不相同的名称 -moz-border-radius-topright, 相对最终属性当最终的名称被敲定之前火狐才算完成。
    • +
  • 在火狐4之前，这个 {{cssxref("<percentage>")}} 是相对盒子宽度，甚至是当指定半径作为一个高). 这被应用到 当-moz-border-radius-topright是单个值的时候，它总是画一个圆弧，而不是一个椭圆。
    • +
  • Gecko不可能正确地以点和虚线展示在圆角，它展示它们是以实线({{ bug("382721") }}).
    • +
+ +

参见

+ +

边框半径相关的CSS属性：CSS速记 {{ cssxref("border-radius") }}, 其它角的属性：{{ cssxref("border-top-left-radius") }}, {{ cssxref("border-bottom-right-radius") }}和 {{ cssxref("border-bottom-left-radius") }}。

diff --git a/files/zh-cn/web/css/border-top-style/index.html b/files/zh-cn/web/css/border-top-style/index.html new file mode 100644 index 0000000000..a664dca9ee --- /dev/null +++ b/files/zh-cn/web/css/border-top-style/index.html @@ -0,0 +1,133 @@ +--- +title: border-top-style +slug: Web/CSS/border-top-style +tags: + - CSS + - CSS 属性 + - CSS 边框 +translation_of: Web/CSS/border-top-style +--- +
{{ CSSRef}}
+ +

border-top-style CSS 设置元素上边框的 {{cssxref("border")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-top-style.html")}}
+ + + +
Note: 此规范并未定义不同样式的边框边角处如何连接。
+ +

语法

+ +
/* Keyword values */
+border-top-style: none;
+border-top-style: hidden;
+border-top-style: dotted;
+border-top-style: dashed;
+border-top-style: solid;
+border-top-style: double;
+border-top-style: groove;
+border-top-style: ridge;
+border-top-style: inset;
+border-top-style: outset;
+
+/* Global values */
+border-top-style: inherit;
+border-top-style: initial;
+border-top-style: unset;
+
+ +

选取以上可用关键字之一作为 {{cssxref("border-style")}} 的 border-top-style 属性的值.

+ +

形式化语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* Define look of the table */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-top-style example classes */
+.b1 {border-top-style: none;}
+.b2 {border-top-style: hidden;}
+.b3 {border-top-style: dotted;}
+.b4 {border-top-style: dashed;}
+.b5 {border-top-style: solid;}
+.b6 {border-top-style: double;}
+.b7 {border-top-style: groove;}
+.b8 {border-top-style: ridge;}
+.b9 {border-top-style: inset;}
+.b10 {border-top-style: outset;}
+ +

输出结果

+ +

{{ EmbedLiveSample('Examples', 300, 200) }}

+ +

规则

+ + + + + + + + + + + + + + + + + + + + + +
规则状态备注
{{ SpecName('CSS3 Backgrounds', '#the-border-style', 'border-top-style') }}{{ Spec2('CSS3 Backgrounds') }}No significant change.
{{ SpecName('CSS2.1', 'box.html#border-style-properties', 'border-top-style') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.border-top-style")}}

+ +

相关词条

+ +
    +
  • The other style-related border properties: {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-bottom-style") }}, and {{ Cssxref("border-style") }}.
    • +
  • The other top-border-related properties: {{ Cssxref("border-top") }}, {{ Cssxref("border-top-color") }}, and {{ Cssxref("border-top-width") }}.
    • +
diff --git a/files/zh-cn/web/css/border-top-width/index.html b/files/zh-cn/web/css/border-top-width/index.html new file mode 100644 index 0000000000..b8b80400d7 --- /dev/null +++ b/files/zh-cn/web/css/border-top-width/index.html @@ -0,0 +1,140 @@ +--- +title: border-top-width +slug: Web/CSS/border-top-width +translation_of: Web/CSS/border-top-width +--- +
{{CSSRef}}
+ +

css属性 border-top-width 是用于设置盒模型的上边框的宽度

+ +
{{EmbedInteractiveExample("pages/css/border-top-width.html")}}
+ + + +

Syntax

+ +
/* Keyword values */
+border-top-width: thin;
+border-top-width: medium;
+border-top-width: thick;
+
+/* <length> values */
+border-top-width: 10em;
+border-top-width: 3vmax;
+border-top-width: 6px;
+
+/* Global keywords */
+border-top-width: inherit;
+border-top-width: initial;
+border-top-width: unset;
+
+ +

Values

+ +
+
<br-width>
+
上边框的宽度属性的有效值要么是一个具体的非负数，要么是一个关键字。如果是关键字，必须是一下几种： + + + + + + + + + + + + + + + + + + +
thin +
 
+ 		A thin border
medium +
 
+ 		A medium border
thick +
 
+ 		A thick border
+ +
+

Note: Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern thin ≤ medium ≤ thick, and the values are constant within a single document.

+
+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
<div>Element 1</div>
+<div>Element 2</div>
+ +

CSS

+ +
div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-top-width: thick;
+}
+div:nth-child(2) {
+  border-top-width: 2em;
+}
+ +

Result

+ +

{{EmbedLiveSample('Example', '100%')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-top-width')}}{{Spec2('CSS3 Backgrounds')}}No significant change.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-top-width')}}{{Spec2('CSS2.1')}}No significant change.
{{SpecName('CSS1', '#border-left-width', 'border-top-width')}}{{Spec2('CSS1')}}Initial definition.
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.border-top-width")}}

+ +

See also

+ +
    +
  • The other border-width-related CSS properties: {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-bottom-width")}}, and {{Cssxref("border-width")}}.
    • +
  • The other border-top-related CSS properties: {{Cssxref("border")}}, {{Cssxref("border-top")}}, {{Cssxref("border-top-style")}}, and {{Cssxref("border-top-color")}}.
    • +
diff --git a/files/zh-cn/web/css/border-top/index.html b/files/zh-cn/web/css/border-top/index.html new file mode 100644 index 0000000000..1555256744 --- /dev/null +++ b/files/zh-cn/web/css/border-top/index.html @@ -0,0 +1,110 @@ +--- +title: border-top +slug: Web/CSS/border-top +tags: + - CSS + - CSS 属性 + - CSS 边框 +translation_of: Web/CSS/border-top +--- +
{{CSSRef}}
+ +

CSS属性 border-top是属性 {{Cssxref("border-top-color")}}, {{Cssxref("border-top-style")}}, 和{{Cssxref("border-top-width")}} 的三者的缩写。这些属性都是在描述一个元素的上方的边框border。

+ +

{{EmbedInteractiveExample("pages/css/border-top.html")}}

+ +

与所有缩写属性（shorthand properties）一样，border-top始终设置它可以设置的所有属性的值，即使未指定它们也是如此。 它将未指定的那些设置为其默认值。 这意味着 ..

+ +
border-top-style: dotted;
+border-top: thick green;
+ +

和下面的代码效果相同：

+ +
border-top-style: dotted;
+border-top: none thick green;
+ +

在border-top前指定的{{cssxref("border-top-style")}}将会失效。因为{{cssxref("border-top-style")}} 默认值为none,故没有边界即没有指定border-style

+ +

Syntax

+ +
border-top: 1px;
+border-top: 2px dotted;
+border-top: medium dashed green;
+ +

这三种属性值的缩写需要按照顺序定义数值，也可以省略其中的一个或者两个。

+ +

Values

+ +
+
<br-width> 
+
请参阅 {{Cssxref("border-top-width")}}.
+
<br-style> 
+
请参阅 {{Cssxref("border-top-style")}}.
+
{{cssxref("<color>")}}
+
请参阅 {{Cssxref("border-top-color")}}.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

示例

+ +
<div>
+  This box has a border on the top side.
+</div>
+ +
div {
+  border-top: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+
+ +

{{ EmbedLiveSample('Example') }}

+ +

技术说明

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-top', 'border-top')}}{{Spec2('CSS3 Backgrounds')}}通过修改{{cssxref("border-top-color")}}的值，没有直接的更改。
{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}{{Spec2('CSS2.1')}}没有明显改变
{{SpecName('CSS1', '#border-top', 'border-top')}}{{Spec2('CSS1')}}初次定义
+ +

Browser compatibility

+ +
{{Compat("css.properties.border-top")}}
+ +
+ + + + + +
diff --git a/files/zh-cn/web/css/border-width/index.html b/files/zh-cn/web/css/border-width/index.html new file mode 100644 index 0000000000..43ff5baa94 --- /dev/null +++ b/files/zh-cn/web/css/border-width/index.html @@ -0,0 +1,175 @@ +--- +title: border-width +slug: Web/CSS/border-width +translation_of: Web/CSS/border-width +--- +
{{CSSRef}}
+ +

概要

+ +

 border-width 属性可以设置盒子模型的边框宽度。

+ +

{{EmbedInteractiveExample("pages/css/border-width.html")}}

+ + + +

它是{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, 和 {{cssxref("border-left-width")}}的简写;

+ +

语法

+ +
/* 用法一：明确指定宽度值 */
+/* 当给定一个宽度时，该宽度作用于选定元素的所有边框 */
+border-width: 5px;
+/* 当给定两个宽度时，该宽度分别依次作用于选定元素的横边与纵边 */
+border-width: 2px 1.5em;
+/* 当给定三个宽度时，该宽度分别依次作用于选定元素的上横边、纵边、下横边 */
+border-width: 1px 2em 1.5cm;
+/* 当给定四个宽度时，该宽度分别依次作用于选定元素的上横边、右纵边、下横边、左纵边 （即按顺时针依次作用） */
+border-width: 1px 2em 0 4rem;
+
+/* 用法二：使用全局关键字 */
+/* 可以使用的全局关键字有：inherit(继承),initial（初始值）,unset（不设置） */
+border-width: inherit;
+
+/* 用法三：使用作用于 border-width 的关键字 */
+border-width: thin;
+border-width: medium;
+border-width: thick;
+
+
+ +

正式语法

+ +
{{csssyntax}}
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + +
关键字实例说明
thin +
+
+ 		细边线
medium +
+
+ 		中等边线
thick +
+
+ 		宽边线
+
+
+
+ +
+

提示：规范并没有规定关键字的实际值故在不同浏览器效果是不一样的，但显然thin≤medium≤thick，并且值在单个文档中是恒定的

+
+ +

示例

+ +

A mix of values and lengths

+ +

HTML

+ +
<p id="sval">
+    one value: 6px wide border on all 4 sides</p>
+<p id="bival">
+    two different values: 2px wide top and bottom border, 10px wide right and left border</p>
+<p id="treval">
+    three different values: 0.3em top, 9px bottom, and zero width right and left</p>
+<p id="fourval">
+    four different values: "thin" top, "medium" right, "thick" bottom, and 1em right</p>
+ +

CSS

+ +
#sval {
+    border: ridge #ccc;
+    border-width: 6px;
+}
+#bival {
+    border: solid red;
+    border-width: 2px 10px;
+}
+#treval {
+    border: dotted orange;
+    border-width: 0.3em 0 9px;
+}
+#fourval {
+    border: solid lightgreen;
+    border-width: thin medium thick 1em;
+}
+p {
+    width: auto;
+    margin: 0.25em;
+    padding: 0.25em;
+}
+ +

运行结果

+ +

{{ EmbedLiveSample('A_mix_of_values_and_lengths', 300, 180) }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width')}}{{Spec2('CSS3 Backgrounds')}}No direct change, the {{cssxref("<length>")}} CSS data type extension has an effect on this property.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}{{Spec2('CSS2.1')}}Added the constraint that values' meaning must be constant inside a document.
{{SpecName('CSS1', '#border-width', 'border-width')}}{{Spec2('CSS1')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.border-width")}}

+ +

参考

+ +
    +
  • The border-related shorthand properties: {{Cssxref("border")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}
    • +
  • The border-width-related properties: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}
    • +
diff --git a/files/zh-cn/web/css/border/index.html b/files/zh-cn/web/css/border/index.html new file mode 100644 index 0000000000..4dd16768c2 --- /dev/null +++ b/files/zh-cn/web/css/border/index.html @@ -0,0 +1,134 @@ +--- +title: border +slug: Web/CSS/border +tags: + - CSS_参考 +translation_of: Web/CSS/border +--- +

{{ CSSRef() }}

+ +

概览

+ + + +

CSS的border属性是一个用于设置各种单独的边界属性的简写属性。border可以用于设置一个或多个以下属性的值： {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}。

+ + + +

{{EmbedInteractiveExample("pages/css/border.html")}}

+ +

和所有的简写属性一样，如果有缺省值会被设置成对应属性的初始值。同时需要注意设置border对{{cssxref("border-image")}}属性的影响，虽然border属性不能设置这个属性，但会把该属性重置为初始值none。这使得我们可以用border属性去重置整个样式表中的border设置。因为W3C计划在未来的标准中保留该属性，因此建议使用该属性重置边框设定。

+ +
+

注意： 虽然{{Cssxref("border-width")}},、{{Cssxref("border-style")}}和 {{Cssxref("border-color")}} 简写属性接受最多4个参数来为不同的边设置宽度、风格和颜色，但boder属性只接受三个参数，分别是宽度、风格和颜色，所以这样会使得四条边的边框相同。

+
+ +

Borders vs. outlines

+ +

边界border和轮廓outline很相似。然而轮廓在以下方面与边界不同

+ +
    +
  • 轮廓不占据空间，他们在元素内容之外绘制
    • +
  • 根据规范，轮廓不必为矩形，尽管通常是矩形。
    • +
+ +

语法

+ +
/* style */
+border: solid;
+
+/* width | style */
+border: 2px dotted;
+
+/* style | color */
+border: outset #f33;
+
+/* width | style | color */
+border: medium dashed green;
+
+/* Global values */
+border: inherit;
+border: initial;
+border: unset;
+ +

可以使用下面列出的一个，两个或三个值来指定border属性。 值的顺序无关紧要。

+ +
+

注意：如果边框的样式未定义，它将不可见。 这是因为样式默认为none。

+
+ +

取值

+ +
+
border-width
+
请看 {{ Cssxref("border-width") }}.
+
border-style 
+
请看 {{ Cssxref("border-style") }}.
+
border-color 
+
{{cssxref("<color>")}} 可以确定border的颜色。如果这个值没有设置，它的默认值是元素的{{cssxref("color")}}属性值（是文字颜色而非背景色）。 请看{{ Cssxref("border-color") }}.
+
+

正式语法

+ + 
{{csssyntax}}
+
+
+ +

示例

+ +

HTML

+ +
<div>I have a border, an outline, AND a box shadow! Amazing, isn't it?</div>
+ +

CSS

+ +
div {
+  border: 0.5rem outset pink;
+  outline: 0.5rem solid khaki;
+  box-shadow: 0 0 0 2rem skyblue;
+  border-radius: 12px;
+  font: bold 1rem sans-serif;
+  margin: 2rem;
+  padding: 1rem;
+  outline-offset: 0.5rem;
+}
+ +

结果

+ +

{{EmbedLiveSample('Example')}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}{{Spec2('CSS3 Backgrounds')}}在理论上删除了对transparent的支持，因为{{cssxref("<color>")}}已经接受它作为一种有效的颜色值。这不会对实际使用有任何影响。
+ 虽然border不能给{{cssxref("border-image")}}赋特定的值，但可以用于重置{{cssxref("border-image")}}为初始值(none).
{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}{{Spec2('CSS2.1')}} +

加入inherit关键字。
+ 接受transparent作为有效的颜色值。

+
{{SpecName('CSS1', '#border', 'border')}}{{Spec2('CSS1')}}初始定义
+ +

浏览器兼容性

+ +

{{Compat("css.properties.border")}}

diff --git a/files/zh-cn/web/css/bottom/index.html b/files/zh-cn/web/css/bottom/index.html new file mode 100644 index 0000000000..46195d386c --- /dev/null +++ b/files/zh-cn/web/css/bottom/index.html @@ -0,0 +1,161 @@ +--- +title: bottom +slug: Web/CSS/bottom +translation_of: Web/CSS/bottom +--- +
{{CSSRef}}
+ +

bottom样式属性定义了定位元素下外边距边界与其包含块下边界之间的偏移，非定位元素设置此属性无效。

+ +

bottom的效果取决于元素的position属性：

+ +
    +
  • 当position设置为absolute或fixed时，bottom属性指定了定位元素下外边距边界与其包含块下边界之间的偏移。
    • +
  • 当position设置为relative时，bottom属性指定了元素的下边界离开其正常位置的偏移。
    • +
  • 当position设置为sticky时，如果元素在viewport里面，bottom属性的效果和position为relative等同；如果元素在viewport外面，bottom属性的效果和position为fixed等同。
    • +
  • 当position设置为static时，bottom属性无效。
    • +
+ +

当 {{cssxref("top")}}和bottom同时指定时，并且 {{cssxref("height")}}没有被指定或者指定为auto或100%的时候，{{cssxref("top")}}和bottom都会生效，在其他情况下，如果 {{cssxref("height")}}被限制，则{{cssxref("top")}}属性会优先设置，bottom属性则会被忽略。

+ +

{{cssinfo}}

+ +

语法

+ +
/* <length> values */
+bottom: 3px;
+bottom: 2.4em;
+
+/* <percentage>s of the height of the containing block */
+bottom: 10%;
+
+/* Keyword value */
+bottom: auto;
+
+/* Global values */
+bottom: inherit;
+bottom: initial;
+bottom: unset;
+ +

值

+ +
    +
  • 对于绝对定位的元素，元素下外边距边界与其包含块下边界之间的偏移。
    • +
  • 对于相对定位定位的元素，元素的下边界离开其正常位置的偏移。
    • +
+ +
+
<length>
+
一个负值、空值或正值，代表了：
+
<percentage>
+
包含块高度的百分比{{cssxref("<percentage>")}}。
+
auto
+
规定： +
    +
  • 对于绝对定位元素，元素将忽略此属性而以{{ Cssxref("top") }}属性为准，如果此时设置height: auto，将基于内容需要的高度设置宽度；如果top也为auto的话，元素的垂直位置就是它假如作为静态(即static)元素时该在的位置。
    • +
  • 对于相对定位元素，元素相对正常位置的偏移量将基于{{ Cssxref("top") }}属性；如果top也为auto的话，元素将不会有偏移。
    • +
+
+
inherit
+
指代有明确计算结果的父级元素的值，（需要注意的是，父级元素并不一定是包裹该子元素的块级元素）。该值会根据父级元素的具体情况被处理为{{cssxref("<length>")}}, {{cssxref("<percentage>")}}或者auto。
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

示例

+ +

下面的例子分别展示了bottom属性在position为absolute和fixed的不同行为.

+ +

HTML

+ +

 

+ +
<p>This<br>is<br>some<br>tall,<br>tall,<br>tall,<br>tall,<br>tall<br>content.</p>
+<div class="fixed"><p>Fixed</p></div>
+<div class="absolute"><p>Absolute</p></div>
+
+ +

 

+ +

 

+ +

CSS

+ +

 

+ +
p {
+  font-size: 30px;
+  line-height: 2em;
+}
+
+div {
+  width: 48%;
+  text-align: center;
+  background: rgba(55,55,55,.2);
+  border: 1px solid blue;
+}
+
+.absolute {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.fixed {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+}
+ +

 

+ +

 

+ +

结果

+ +

{{EmbedLiveSample('Example','500','250')}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'bottom')}}{{Spec2('CSS3 Transitions')}}Defines bottom as animatable.
{{SpecName('CSS3 Positioning', '#propdef-bottom', 'bottom')}}{{Spec2('CSS3 Positioning')}}Adds behavior for sticky positioning.
{{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

浏览器兼容性

+ +

 

+ + + +

{{Compat("css.properties.bottom")}}

+ +

 

+ +
 
diff --git a/files/zh-cn/web/css/box-decoration-break/index.html b/files/zh-cn/web/css/box-decoration-break/index.html new file mode 100644 index 0000000000..e35ab5dd82 --- /dev/null +++ b/files/zh-cn/web/css/box-decoration-break/index.html @@ -0,0 +1,149 @@ +--- +title: box-decoration-break +slug: Web/CSS/box-decoration-break +translation_of: Web/CSS/box-decoration-break +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

box-decoration-break 属性用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现。

+ +
{{EmbedInteractiveExample("pages/css/box-decoration-break.html")}}
+ + + +

指定的值将影响元素以下属性的表现：

+ +
    +
  • {{Cssxref("background")}}
    • +
  • {{Cssxref("border")}}
    • +
  • {{Cssxref("border-image")}}
    • +
  • {{Cssxref("box-shadow")}}
    • +
  • {{Cssxref("clip-path")}}
    • +
  • {{Cssxref("margin")}}
    • +
  • {{Cssxref("padding")}}
    • +
+ +

语法

+ +
/* Keyword values */
+box-decoration-break: slice;
+box-decoration-break: clone;
+
+/* Global values */
+box-decoration-break: initial;
+box-decoration-break: inherit;
+box-decoration-break: unset;
+
+ +

box-decoration-break 的合法值包括下列几种：

+ +

值

+ +
+
slice
+
元素被按照盒子被切割前的原始样式渲染，之后，针对每个行/列/页面将此假设框渲染成片段。请注意，假设框对于每个片段可以是不同的，因为如果中断发生在行内方向，则它使用自己的高度，如果中断发生在块方向，则它使用自己的宽度。有关详细信息，请参阅CSS规范。
+
clone
+
每个框片段与指定的边框、填充和边距独立呈现。The {{ Cssxref("border-radius") }}、{{ Cssxref("border-image") }}、 {{ Cssxref("box-shadow") }}独立地应用于每个片段,每个片段的背景也是独立绘制的, 这意味着使用 {{ Cssxref("background-repeat") }}: no-repeat 的背景图片仍然可能重复多次.
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

行内盒子片段

+ +

包含换行符的内联元素：

+ +
.example {
+  background: linear-gradient(to bottom right, yellow, green);
+  box-shadow:
+    8px 8px 10px 0px deeppink,
+    -5px -5px 5px 0px blue,
+    5px 5px 15px 0px yellow;
+  padding: 0em 1em;
+  border-radius: 16px;
+  border-style: solid;
+  margin-left: 10px;
+  font: 24px sans-serif;
+  line-height: 2;
+}
+
+...
+<span class="example">The<br>quick<br>orange fox</span>
+ +

... 效果:

+ +

A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.

+ +

添加 box-decoration-break: clone 样式之后:

+ +
-webkit-box-decoration-break: clone;
+box-decoration-break: clone;
+
+ +

... 效果:

+ +

A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example

+ +

你可以 尝试这两个例子.

+ +

下面是一个使用大圆角值的内联元素示例。第二个“iM”在“i”和“M”之间有一个分界线，作为比较，第一个“iM”是没有换行符的。请注意，如果您将两个片段的呈现水平地排列在一起，就会导致非分段呈现。

+ +

A screenshot of the rendering of the second inline element example.

+ +

你可以 尝试这个例子.

+ +

块状盒子片段

+ +

与上述样式相似且没有碎片的块元素的表现：

+ +

A screenshot of the rendering of the block element used in the examples without any fragmentation.

+ +

将上述块分割成三列，表现为：

+ +

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.

+ +

注意，垂直堆叠这些部分将导致非碎片渲染。

+ +

现在，同样的例子，但使用 box-decoration-break 的效果：

+ +

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.

+ +

请注意，每个片段都具有相同的 border， box-shadow 和 background。

+ +

你可以 尝试这个例子。

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{ SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break') }}{{ Spec2('CSS3 Fragmentation') }}初步定义
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.box-decoration-break")}}

+ +

参见

+ +
    +
  • {{cssxref("break-after")}}, {{cssxref("break-before")}}, {{cssxref("break-inside")}}
    • +
diff --git a/files/zh-cn/web/css/box-orient/index.html b/files/zh-cn/web/css/box-orient/index.html new file mode 100644 index 0000000000..33f8d38a72 --- /dev/null +++ b/files/zh-cn/web/css/box-orient/index.html @@ -0,0 +1,99 @@ +--- +title: box-orient +slug: Web/CSS/box-orient +translation_of: Web/CSS/box-orient +--- +
{{CSSRef}}{{Non-standard_header}} +

这是原始的css弹性布局草案的一个属性，已经被最新的标准替代。 查看 flexbox 了解现行标准。

+
+ +

box-orient CSS 属性用来设置一个元素是水平还是垂直布局其内容。

+ +
/* Keyword values */
+box-orient: horizontal;
+box-orient: vertical;
+box-orient: inline-axis;
+box-orient: block-axis;
+
+/* Global values */
+box-orient: inherit;
+box-orient: initial;
+box-orient: unset;
+
+ +

语法

+ +

box-orient 属性值需指定为以下关键字之一。

+ +

值

+ +
+
horizontal
+
盒子水平布局其内容。
+
vertical
+
盒子垂直布局其内容。
+
inline-axis (HTML)
+
盒子沿内联轴展示其子元素。
+
block-axis (HTML)
+
盒子沿块轴展示其子元素。
+
+ +

内联轴和块轴取决于写入模式的关键字，在英语中，分别对应水平和垂直方向。

+ +

规范

+ +

{{CSSInfo}}

+ +

正式语法

+ +
{{CSSSyntax}}
+ +

示例

+ +

设置盒子水平布局

+ +

在这里，box-orient 属性会将两个 {{HTMLElement("p")}} 段落布局到同一行。

+ +

HTML

+ +
<div class="example">
+  <p>I will be to the left of my sibling.</p>
+  <p>I will be to the right of my sibling.</p>
+</div>
+ +

CSS

+ +
div.example {
+  display: -moz-box;                /* Mozilla */
+  display: -webkit-box;             /* WebKit */
+  display: box;                     /* As specified */
+
+  /* Children should be oriented vertically */
+  -moz-box-orient: horizontal;      /* Mozilla */
+  -webkit-box-orient: horizontal;   /* WebKit */
+  box-orient: horizontal;           /* As specified */
+}
+
+ +

结果

+ +

{{ EmbedLiveSample('Examples', 600, 50, '', 'Web/CSS/box-orient') }}

+ +

规范

+ +

不是任何标准的一部分。

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.box-orient")}}

+ +

参见

+ +
    +
  • {{CSSxRef("box-direction")}}
    • +
  • {{CSSxRef("box-pack")}}
    • +
  • {{CSSxRef("box-align")}}
    • +
  • {{CSSxRef("flex-direction")}}
    • +
diff --git a/files/zh-cn/web/css/box-shadow/index.html b/files/zh-cn/web/css/box-shadow/index.html new file mode 100644 index 0000000000..dadc4abfd0 --- /dev/null +++ b/files/zh-cn/web/css/box-shadow/index.html @@ -0,0 +1,183 @@ +--- +title: box-shadow +slug: Web/CSS/box-shadow +tags: + - CSS + - CSS 属性 + - Reference + - shadow + - 参考 + - 样式 + - 阴影 +translation_of: Web/CSS/box-shadow +--- +

{{CSSRef}}

+ +

CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

+ +
{{EmbedInteractiveExample("pages/css/box-shadow.html")}}
+ + + +

你几乎可以在任何元素上使用box-shadow来添加阴影效果。如果元素同时设置了 {{ cssxref("border-radius") }}属性 ，那么阴影也会有圆角效果。多个阴影在z轴上的顺序和多个 text shadows 规则相同(第一个阴影在最上面)。

+ +

Box-shadow generator  是一个允许你生成 box-shadow 的交互式工具。

+ +

语法

+ +
/* x偏移量 | y偏移量 | 阴影颜色 */
+box-shadow: 60px -16px teal;
+
+/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
+box-shadow: 10px 5px 5px black;
+
+/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
+box-shadow: inset 5em 1em gold;
+
+/* 任意数量的阴影，以逗号分隔 */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+
+/* 全局关键字 */
+box-shadow: inherit;
+box-shadow: initial;
+box-shadow: unset;
+
+ +

向元素添加单个 box-shadow 效果时使用以下规则：

+ +
    +
  • 当给出两个、三个或四个 <length>值时。 + +
      +
    • 如果只给出两个值, 那么这两个值将会被当作 <offset-x><offset-y> 来解释。
      • +
    • 如果给出了第三个值, 那么第三个值将会被当作<blur-radius>解释。
      • +
    • 如果给出了第四个值, 那么第四个值将会被当作<spread-radius>来解释。
      • +
    +
    • +
  • 可选，inset关键字。
    • +
  • 可选，<color>值。
    • +
+ +

若要对同一个元素添加多个阴影效果，请使用逗号将每个阴影规则分隔开。

+ +

取值

+ +
+
inset
+
如果没有指定inset，默认阴影在边框外，即阴影向外扩散。
+ 使用 inset 关键字会使得阴影落在盒子内部，这样看起来就像是内容被压低了。 此时阴影会在边框之内 (即使是透明边框）、背景之上、内容之下。
+
<offset-x> <offset-y>
+
这是头两个 {{cssxref("<length>")}} 值，用来设置阴影偏移量。x,y 是按照数学二维坐标系来计算的，只不过y垂直方向向下。  <offset-x> 设置水平偏移量，正值阴影则位于元素右边，负值阴影则位于元素左边。 <offset-y> 设置垂直偏移量，正值阴影则位于元素下方，负值阴影则位于元素上方。可用单位请查看 {{cssxref("<length>")}} 。
+
如果两者都是0，那么阴影位于元素后面。这时如果设置了<blur-radius> 或<spread-radius> 则有模糊效果。需要考虑 inset 
+
<blur-radius>
+
这是第三个 {{cssxref("<length>")}} 值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。本规范不包括如何计算模糊半径的精确算法，但是，它详细说明如下：
+
+ +
对于长而直的阴影边缘，它会创建一个过渡颜色用于模糊 以阴影边缘为中心、模糊半径为半径的局域，过渡颜色的范围在完整的阴影颜色到它最外面的终点的透明之间。 （译者注：对此有兴趣的可以了解下数字图像处理的模糊算法。）
+ +
+
<spread-radius>
+
这是第四个 {{cssxref("<length>")}} 值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。需要考虑 inset 
+
<color>
+
相关事项查看 {{cssxref("<color>")}} 。如果没有指定，则由浏览器决定——通常是{{cssxref("color")}}的值，不过目前Safari取透明。
+
+ +

合成

+ +

将none看做是长度为0的列表。

+ +

列表中的每个阴影通过color组件（作为颜色），以及 x，y，blur，（合适的时候）加上spread组件（作为长度）进行合成。对于每个阴影，如果两个输入的阴影都是inset或者都不是inset，那么要添加的阴影必须考虑已存在的阴影。如果任何一对输入阴影中，一个是inset，另一个不是inset，那么整个阴影列表就是不可合成的。如果阴影列表有不同的长度，那么较短的列表会在尾部补上这类阴影：颜色透明，所有长度为0，inset还是非inset同较长的列表。

+ +

正规文法

+ +
{{csssyntax}}
+ + + +

例子

+ +

第一个例子中，包括了三种shadows，内置的阴影, 常规的下沉阴影, 和一个2个像素宽度的border式的阴影 (可以用 {{cssxref('outline')}} 来替代第三种)。

+ +
+

HTML

+ +
<blockquote><q>You may shoot me with your words,<br/>
+You may cut me with your eyes,<br/>
+You may kill me with your hatefulness,<br/>
+But still, like air, I'll rise.</q>
+<p>&mdash; Maya Angelou</p>
+</blockquote>
+ +

CSS

+ +
blockquote {
+  padding: 20px;
+  box-shadow:
+       inset 0 -3em 3em rgba(0,0,0,0.1),
+             0 0  0 2px rgb(255,255,255),
+             0.3em 0.3em 1em rgba(0,0,0,0.3);
+}
+
+ +

{{EmbedLiveSample('Examples1', '300', '300')}}

+ +
+

HTML

+ +
<div><p>Hello World</p></div>
+ +

CSS

+ +
p {
+  box-shadow: 0 0 0 2em #F4AAB9,
+              0 0 0 4em #66CCFF;
+  margin: 4em;
+  padding:1em;
+}
+
+ +

{{EmbedLiveSample('Examples2', '300', '300')}}

+ +

当 x-offset, y-offset, 和  blur 都是0, 盒阴影将是一个四边都是一样长度的带有颜色的outline. 当设置了多个阴影时，阴影绘制由最后一个开始， 故第一个设置的阴影将覆盖在后设置的阴影之上. 当border-radius设置为0时（也是其默认值）, 阴影的四角将没有弧度. 当我们设置了border-radius为其他不为0的值时，阴影的四角也随之形成弧度。

+ +

我们通常在元素上增加一个大小为最大阴影宽度的margin值以保证阴影不会覆盖到相邻的元素或者覆盖到元素的border上. box-shadow属性不会影响到盒模型的构成。

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注
{{ SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }}{{ Spec2('CSS3 Backgrounds') }}初次定义
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.box-shadow")}}

+ +

参见

+ +
    +
  •  {{cssxref("<color>")}} 数据类型
    • +
  • 其他与color相关的属性: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}
    • +
  • 使用 CSS 给 HTML 元素添加颜色
    • +
diff --git a/files/zh-cn/web/css/box-sizing/index.html b/files/zh-cn/web/css/box-sizing/index.html new file mode 100644 index 0000000000..9c565dda73 --- /dev/null +++ b/files/zh-cn/web/css/box-sizing/index.html @@ -0,0 +1,146 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS + - CSS Box Model + - CSS 属性 + - Reference + - border-box + - border-box不包含margin + - box-sizing + - margin +translation_of: Web/CSS/box-sizing +--- +
{{CSSRef}}
+ +

CSS 中的 box-sizing 属性定义了 {{glossary("user agent")}} 应该如何计算一个元素的总宽度和总高度。

+ +
{{EmbedInteractiveExample("pages/css/box-sizing.html")}}
+ + + +

在 CSS 盒子模型的默认定义里，你对一个元素所设置的 {{Cssxref("width")}} 与 {{Cssxref("height")}} 只会应用到这个元素的内容区。如果这个元素有任何的 {{Cssxref("border")}} 或 {{Cssxref("padding")}} ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。

+ +

box-sizing 属性可以被用来调整这些表现:

+ +
    +
  • content-box  是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
    • +
  • border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
    • +
+ +

译者注: border-box不包含margin

+ + + +
+

Note: 对于新的web站点，你可能希望首先将box-sizing设置为border-box，如下所示：

+ +

* { box-sizing: border-box; }

+ +

这使得处理元素大小的工作变得容易得多，并且通常消除了在布局内容时可能遇到的许多陷阱。然而，在某些情况下，你应谨慎使用这个属性。例如： 你正在编写一个将由其他人使用的共享组件库，如果他们网站的其余部分没有设置此值，他们可能会发现很难使用你的组件库。

+
+ +

语法

+ +

box-sizing 属性被指定为下面列表中的关键字。

+ +

属性值

+ +
+
content-box
+
默认值，标准盒子模型。 {{Cssxref("width")}} 与 {{Cssxref("height")}} 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距、边框和外边距都在这个盒子的外部。 比如说，.box {width: 350px; border: 10px solid black;} 在浏览器中的渲染的实际宽度将是 370px。
+
+ 尺寸计算公式：
+
width = 内容的宽度
+
height = 内容的高度
+
宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。
+
border-box
+
 {{Cssxref("width")}} 和 {{Cssxref("height")}} 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。
+
+ 尺寸计算公式：
+
width = border + padding + 内容的宽度
+
height = border + padding + 内容的高度
+
+

形式化语法

+
+
+ +
{{csssyntax}}
+
+ +

示例

+ +

本例显示了不同的 box-sizing 值如何改变两个原本相同的元素的渲染尺寸。

+ +

HTML

+ +
<div class="content-box">Content box</div>
+<br>
+<div class="border-box">Border box</div>
+ +

CSS

+ +
div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
+     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
+     Content box width: 160px
+     Content box height: 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* Total width: 160px
+     Total height: 80px
+     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
+     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Examples', 'auto', 300)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.box-sizing")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/break-after/index.html b/files/zh-cn/web/css/break-after/index.html new file mode 100644 index 0000000000..a338525d48 --- /dev/null +++ b/files/zh-cn/web/css/break-after/index.html @@ -0,0 +1,191 @@ +--- +title: break-after +slug: Web/CSS/break-after +tags: + - CSS + - CSS 属性 + - 参考 +translation_of: Web/CSS/break-after +--- +
{{CSSRef}}
+ +

break-after CSS 属性描述在生成的盒子之后的页面，列或区域中断行为（换句话说，如何以及是否中断）。如果没有生成的盒子，则该属性将被忽略。

+ +
/* Generic break values */
+break-after: auto;
+break-after: avoid;
+break-after: always;
+break-after: all;
+
+/* Page break values */
+break-after: avoid-page;
+break-after: page;
+break-after: left;
+break-after: right;
+break-after: recto;
+break-after: verso;
+
+/* Column break values */
+break-after: avoid-column;
+break-after: column;
+
+/* Region break values */
+break-after: avoid-region;
+break-after: region;
+
+/* Global values */
+break-after: inherit;
+break-after: initial;
+break-after: unset;
+
+ +

每个潜在的断点（亦即每个元素的边界）都受到三个属性的影响：上一个元素的 break-after 值、下一个元素的 break-before 值以及当前元素自身的 break-inside 值。

+ +

以下规则被用于判断中断是否必要：

+ +
    +
  1. 如果上述三个属性中，如果任何一个的值属于“强制中断”值，那么这个属性将被优先应用，此处所称“强制中断”的值为： always、 left、 right、 page、 column 和 region。If several of the concerned values is such a break, the one of the element that appears the latest in the flow is taken (that is the {{cssxref("break-before")}} value has precedence over the break-after value, which itself has precedence over the {{cssxref("break-inside")}} value).
    2. +
  2. If any of the three concerned values is an avoid break value, that is avoid, avoid-page, avoid-region, avoid-column, no such break will be applied at that point.
    3. +
+ +

Once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding avoid value.

+ +

{{cssinfo}}

+ +

语法

+ +

The break-after property is specified as one of the keyword values from the list below.

+ +

属性值

+ +

Generic break values

+ +
+
auto
+
Allows, but does not force, any break (page, column, or region) to be inserted right after the principal box.
+
avoid
+
Avoids any break (page, column, or region) from being inserted right after the principal box.
+
always {{experimental_inline}}
+
Forces a page break right after the principal box. The type of this break is that of the immediately-containing fragmentation context. If we are inside a multicol container then it would force a column break, inside paged media (but not inside a multicol container) a page break.
+
all {{experimental_inline}}
+
Forces a page break right after the principal box. Breaking through all possible fragmentation contexts. So a break inside a multicol container, which was inside a page container would force a column and page break.
+
+ +

Page break values

+ +
+
avoid-page
+
Avoids any page break right after the principal box.
+
page
+
Forces a page break right after the principal box.
+
left
+
Forces one or two page breaks right after the principal box, whichever will make the next page into a left page.
+
right
+
Forces one or two page breaks right after the principal box, whichever will make the next page into a right page.
+
recto {{experimental_inline}}
+
Forces one or two page breaks right after the principal box, whichever will make the next page into a recto page. (A recto page is a right page in a left-to-right spread or a left page in a right-to-left spread.)
+
verso {{experimental_inline}}
+
Forces one or two page breaks right after the principal box, whichever will make the next page into a verso page. (A verso page is a left page in a left-to-right spread or a left right in a right-to-left spread.)
+
+ +

Column break values

+ +
+
avoid-column
+
Avoids any column break right after the principal box.
+
column
+
Forces a column break right after the principal box.
+
+ +

Region break values

+ +
+
avoid-region {{experimental_inline}}
+
Avoids any region break right after the principal box.
+
region {{experimental_inline}}
+
Forces a region break right after the principal box.
+
+ +

形式化语法

+ +
{{csssyntax}}
+ +

Page break aliases

+ +

For compatibility reasons, the legacy {{cssxref("page-break-after")}} property should be treated by browsers as an alias of break-after. This ensures that sites using page-break-after continue to work as designed. A subset of values should be aliased as follows:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
page-break-afterbreak-after
autoauto
leftleft
rightright
avoidavoid
alwayspage
+ +
+

The always value of page-break-* was implemented by browsers as a page break, and not as a column break. Therefore the aliasing is to page, rather than the always value in the Level 4 spec.

+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Fragmentation', '#break-between', 'break-after')}}{{Spec2('CSS3 Fragmentation')}}Adds the recto and verso keywords. Changes the media type of this property from paged to {{xref_cssvisual}}. Defines the breaking algorithm with different kinds of breaks.
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-after')}}{{Spec2('CSS3 Regions')}}Extends the property to handle region breaks. Adds the avoid-region and region keywords.
{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-after')}}{{Spec2('CSS3 Multicol')}}Initial definition. Extends the CSS 2.1 {{cssxref("page-break-after")}} property to handle both page and column breaks.
+ +

浏览器兼容性

+ + + +

Support in multi-column layout

+ +

{{Compat("css.properties.break-after.multicol_context")}}

+ +

Support in paged media

+ +

{{Compat("css.properties.break-after.paged_context")}}

diff --git a/files/zh-cn/web/css/break-before/index.html b/files/zh-cn/web/css/break-before/index.html new file mode 100644 index 0000000000..e0c9ea142b --- /dev/null +++ b/files/zh-cn/web/css/break-before/index.html @@ -0,0 +1,145 @@ +--- +title: break-before +slug: Web/CSS/break-before +tags: + - break-before +translation_of: Web/CSS/break-before +--- +
{{CSSRef}}
+ +

The break-before CSS 属性定义页面，列或区域在生成的盒子之前应如何处理中断。 如果没有生成的盒子，则忽略该属性。

+ +
/* Generic break values */
+break-before: auto;
+break-before: avoid;
+
+/* Page break values */
+break-before: avoid-page;
+break-before: page;
+break-before: always;
+break-before: left;
+break-before: right;
+break-before: recto;
+break-before: verso;
+
+/* Column break values */
+break-before: avoid-column;
+break-before: column;
+
+/* Region break values */
+break-before: avoid-region;
+break-before: region;
+
+/* Global values */
+break-before: inherit;
+break-before: initial;
+break-before: unset;
+
+ +

Each possible break point (in other words, each element boundary) is affected by three properties: the {{cssxref("break-after")}} value of the previous element, the break-before value of the next element, and the {{cssxref("break-inside")}} value of the containing element.

+ +

To determine if a break must be done, the following rules are applied:

+ +
    +
  1. If any of the three concerned values is a forced break value (always, left, right, page, column, or region), it has precedence. If more than one of them are such a break, the one of the element that appears the latest in the flow is taken (i.e., the break-before value has precedence over the break-after value, which itself has precedence over the break-inside value).
    2. +
  2. If any of the three concerned values is an avoid break value (avoid, avoid-page, avoid-region, or avoid-column), no such break will be applied at that point.
    3. +
+ +

Once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding avoid value.

+ +

{{cssinfo}}

+ +

Syntax

+ +

The break-before property is specified as one of the keyword values from the list below.

+ +

Values

+ +

General break values

+ +
+
auto
+
Allows, but does not force, any break (page, column, or region) to be inserted right before the principal box.
+
avoid
+
Avoids any break (page, column, or region) from being inserted right before the principal box.
+
+ +

Page break values

+ +
+
avoid-page
+
Avoids any page break right before the principal box.
+
page
+
Forces a page break right before the principal box.
+
always
+
Forces a page break right before the principal box. (This is an alias of page, and has been kept to facilitate the transition from {{cssxref("page-break-after")}}, which is a subset of this property.)
+
left
+
Forces one or two page breaks right before the principal box, whichever will make the next page into a left page.
+
right
+
Forces one or two page breaks right before the principal box, whichever will make the next page into a right page.
+
recto {{experimental_inline}}
+
Forces one or two page breaks right before the principal box, whichever will make the next page into a recto page. (A recto page is a right page in a left-to-right spread or a left page in a right-to-left spread.)
+
verso {{experimental_inline}}
+
Forces one or two page breaks right before the principal box, whichever will make the next page into a verso page. (A verso page is a left page in a left-to-right spread or a left right in a right-to-left spread.)
+
+ +

Column break values

+ +
+
avoid-column
+
Avoids any column break right before the principal box.
+
column
+
Forces a column break right before the principal box.
+
+ +

Region break values

+ +
+
avoid-region {{experimental_inline}}
+
Avoids any region break right before the principal box.
+
region {{experimental_inline}}
+
Forces a region break right before the principal box.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fragmentation', '#break-between', 'break-before')}}{{Spec2('CSS3 Fragmentation')}}Adds the recto and verso keywords. Changes the media type of this property from paged to {{xref_cssvisual}}. Defines the breaking algorithm with different kinds of breaks.
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-before')}}{{Spec2('CSS3 Regions')}}Extends the property to handle region breaks. Adds the avoid-region and region keywords.
{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-before')}}{{Spec2('CSS3 Multicol')}}Initial definition. Extends the CSS 2.1 {{cssxref("page-break-before")}} property to handle both page and column breaks.
+ +

Browser compatibility

+ +
+ + +

{{Compat("css.properties.break-before")}}

+
+ +

 

diff --git a/files/zh-cn/web/css/break-inside/index.html b/files/zh-cn/web/css/break-inside/index.html new file mode 100644 index 0000000000..de1065b17e --- /dev/null +++ b/files/zh-cn/web/css/break-inside/index.html @@ -0,0 +1,82 @@ +--- +title: break-inside +slug: Web/CSS/break-inside +tags: + - CSS +translation_of: Web/CSS/break-inside +--- +
{{CSSRef}}{{Draft}}
+ +

break-inside CSS 属性描述了在多列布局页面下的内容盒子如何中断，如果多列布局没有内容盒子，这个属性会被忽略。

+ +
break-inside: auto;
+break-inside: avoid;
+break-inside: avoid-page;
+break-inside: avoid-column;
+break-inside: avoid-region;
+
+ +

在每一个元素的边界，都可能生成一个中断点，这些中断点由三个属性来定义。{{cssxref("break-after")}} 属性定义之前元素的中断点，{{cssxref("break-before")}} 定义了之后元素的中断点， break-inside 定义了当前元素的中断点。

+ +

如果需要定义一个中断点，必须遵循以下原则:

+ +
    +
  1. 如果这三个中断属性的值有一个是强制中断值（这些强制中断值包括了 always, left, right, page, column, region），那么这个属性的值就具有优先权。如果其中一个以上是这样的断点，则使用流中最新出现的元素的值。因此，break-before值优先于break-after值，而后者又优先于break-inside值。
    2. +
  2. 如果三个相关值中的任何一个是避免中断值, 相关值包括 avoid, avoid-page, avoid-region, avoid-column, 则在该点上不应用此类中断。
    3. +
+ +

一旦应用了强制中断，如果需要，可以添加软中断，但不能在元素边界上添加相应的avoid值。

+ +

{{cssinfo}}

+ +

Syntax

+ +

Values

+ +
+
auto
+
允许(既不禁止也不强制)在主框中插入任何中断(页、列或区域)。
+
avoid-page
+
避免主框中任何页的中断点
+
avoid-column
+
避免主框中任何列的中断点
+
avoid-region {{experimental_inline}}
+
避免原则框内的任何区域中断。
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fragmentation', '#break-within', 'break-inside')}}{{Spec2('CSS3 Fragmentation')}}
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}{{Spec2('CSS3 Regions')}}Extends the property to handle region breaks.
{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}}{{Spec2('CSS3 Multicol')}}Initial definition
+ +

Browser compatibility

+ +
{{Compat("css.properties.break-inside", 4)}}
diff --git a/files/zh-cn/web/css/calc()/index.html b/files/zh-cn/web/css/calc()/index.html new file mode 100644 index 0000000000..41d9e7a537 --- /dev/null +++ b/files/zh-cn/web/css/calc()/index.html @@ -0,0 +1,163 @@ +--- +title: calc() +slug: Web/CSS/calc() +tags: + - CSS + - CSS Function + - CSS 函数 + - CSS3 + - Calculate + - Layout + - calc +translation_of: Web/CSS/calc() +--- +
{{CSSRef}}
+ +

calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合：{{cssxref("<length>")}}、{{cssxref("<frequency>")}}, {{cssxref("<angle>")}}、{{cssxref("<time>")}}、{{cssxref("<percentage>")}}、{{cssxref("<number>")}}、或 {{cssxref("<integer>")}}。

+ +

语法

+ +
/* property: calc(expression) */
+width: calc(100% - 80px);
+ +

此 calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。

+ +
+
+
+
加法。
+
-
+
减法。
+
*
+
乘法，乘数中至少有一个是 {{cssxref("<number>")}}。
+
/
+
除法，除数（/ 右面的数）必须是 {{cssxref("<number>")}}。
+
+ +

表达式中的运算对象可以使用任意 {{cssxref("<length>")}} 值。如果你愿意，你可以在一个表达式中混用这类值的不同单位。在需要时，你还可以使用小括号来建立计算顺序。

+ +

备注

+ +
    +
  • + 和 - 运算符的两边必须要有空白字符。比如，calc(50% -8px) 会被解析成为一个无效的表达式，解析结果是：一个百分比 后跟一个负数长度值。而加有空白字符的、有效的表达式 calc(8px + -50%) 会被解析成为：一个长度 后跟一个加号 再跟一个负百分比。
    • +
  • * 和 / 这两个运算符前后不需要空白字符，但如果考虑到统一性，仍然推荐加上空白符。
    • +
  • 用 0 作除数会使 HTML 解析器抛出异常。
    • +
  • 涉及自动布局和固定布局的表格中的表列、表列组、表行、表行组和表单元格的宽度和高度百分比的数学表达式，auto 可视为已指定。
    • +
  • calc() 函数支持嵌套，但支持的方式是：把被嵌套的 calc() 函数全当成普通的括号。（译者注：所以，函数内直接用括号就好了。）
    • +
+ +

形式化语法

+ +
{{csssyntax}}
+ +

例子

+ +

使用指定的外边距定位一个对象

+ +

使用 calc() 可以很容易的为一个对象设置一个左右两边相等的外边距。在这个例子中，使用 CSS 创建了一个横跨整个窗口的 banner，该 banner 左右两边各有一个距离窗口边缘 40 像素的间距：

+ +
.banner {
+  position: absolute;
+  left: 40px;
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+ +
<div class="banner">This is a banner!</div>
+ +

{{EmbedLiveSample('使用指定的外边距定位一个对象', '100%', '60')}}

+ +

自动调整表单域的大小以适应其容器的大小

+ +

calc() 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间，而不会在保持合适的外边距的同时，因挤压超出其容器的边缘。

+ +

看一下下面的CSS：

+ +
input {
+  padding: 2px;
+  display: block;
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+
+ +

这个例子中，form 元素自身使用了窗口可用宽度的 1/6，然后，为了让 form 元素内部的 input 元素保持合适的大小，我们再一次使用了 calc()，让它的宽度为其容器的宽度减 1em。下面的 HTML 使用了上面的 CSS：

+ +
<form>
+  <div id="formbox">
+  <label>Type something:</label>
+  <input type="text">
+  </div>
+</form>
+
+ +
{{EmbedLiveSample('自动调整表单域的大小以适应其容器的大小', '100%', '80')}}
+ +

使用 CSS 变量嵌套使用 calc()

+ +

我们来看一下下面的代码：

+ +
.foo {
+  --widthA: 100px;
+  --widthB: calc(var(--widthA) / 2);
+  --widthC: calc(var(--widthB) / 2);
+  width: var(--widthC);
+}
+ +

在所有的变量都被展开后，widthC 的值就会变成 calc( calc( 100px / 2) / 2)，然后，当它被赋值给 .foo 的 width 属性时，所有内部的这些 calc()（无论嵌套的有多深）都将会直接被扁平化为一个括号（原文：be flattened to just parentheses），所以这个 width 属性的值就直接相当于 calc( ( 100px / 2) / 2) 了，或者说就变成 25px 了。 简而言之：一个 calc() 里面的 calc() 就仅仅相当于是一个括号。

+ +

无障碍相关考量

+ +

当 calc() 被用于控制文本的长度时，确保值中包含一个相对长度单位，例如：

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

这可以保证文本的大小会跟随页面一同缩放。

+ + + +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}初步定义
+ +

浏览器兼容性

+ + + +
{{Compat("css.types.calc")}}
+ +

也可以看看

+ + diff --git a/files/zh-cn/web/css/caption-side/index.html b/files/zh-cn/web/css/caption-side/index.html new file mode 100644 index 0000000000..f05be3134d --- /dev/null +++ b/files/zh-cn/web/css/caption-side/index.html @@ -0,0 +1,147 @@ +--- +title: caption-side +slug: Web/CSS/caption-side +tags: + - CSS + - CSS 属性 + - table + - 参考 + - 表格 +translation_of: Web/CSS/caption-side +--- +
{{CSSRef}}
+ +

CSS 中 caption-side 属性会将表格的标题{{HTMLElement("caption")}} 放到规定的位置。但是具体显示的位置与表格的 {{cssxref('writing-mode')}} 属性值有关。

+ +
{{EmbedInteractiveExample("pages/css/caption-side.html")}}
+ + + +

语法

+ +

 caption-side 属性的取值必须是下面所列值中的一个。

+ +

CSS

+ +
/* Directional values */
+caption-side: top;
+caption-side: bottom;
+
+/* Warning: non-standard values */
+caption-side: left;
+caption-side: right;
+caption-side: top-outside;
+caption-side: bottom-outside;
+
+/* Global values */
+caption-side: inherit;
+caption-side: initial;
+caption-side: unset;
+
+ +

取值

+ +
+
top
+
标题会出现在表格的上方。
+
bottom
+
标题会出现在表格的下方。
+
left {{non-standard_inline}}
+
标题会出现在表格的左侧。
+
+
在CSS 2 阶段，这个值被建议加入到规范中，但是在在最终的CSS 2.1 规范中被移除。它是非标准属性。
+
+
right {{non-standard_inline}}
+
标题会出现在表格的右侧。
+
+
在CSS 2 阶段，这个值被建议加入到规范中，但是在在最终的CSS 2.1 规范中被移除。它是非标准属性。
+
+
top-outside {{non-standard_inline}}
+
标题会被放置在表格上方，但是标题的宽度和水平对齐方式不受表格水平布局的约束。
+
+
在CSS 2.1 规范中提到：CSS 2 规范中对 top 值产生的效果有不同的定义，在未来可能会重新定义这个值产生的影响效果。
+
+
bottom-outside {{non-standard_inline}}
+
标题会被放置在表格下方，但是标题的宽度和水平对齐方式不受表格水平布局的约束。
+
+
在CSS 2.1 规范中提到：CSS 2 规范中对 top 值产生的效果有不同的定义，在未来可能会重新定义这个值产生的影响效果。
+
+
+ +

示例

+ +

HTML

+ +
<table class="top">
+  <caption>Caption ABOVE the table</caption>
+  <tr>
+    <td>Some data</td>
+    <td>Some more data</td>
+  </tr>
+</table>
+
+<br>
+
+<table class="bottom">
+  <caption>Caption BELOW the table</caption>
+  <tr>
+    <td>Some data</td>
+    <td>Some more data</td>
+  </tr>
+</table>
+
+ +

CSS

+ +
.top caption {
+  caption-side: top;
+}
+
+.bottom caption {
+  caption-side: bottom;
+}
+
+table {
+  border: 1px solid red;
+}
+
+td {
+  border: 1px solid blue;
+}
+
+ +

结果

+ +

{{EmbedLiveSample('Example', 'auto', 160)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态描述
{{ SpecName('CSS Logical Properties', '#caption-side', 'caption-side') }}{{ Spec2('CSS Logical Properties') }} +

定义和css定义的书写模式值相关的顶部及底部的值。

+
{{ SpecName('CSS2.1', 'tables.html#caption-position', 'caption-side') }}{{ Spec2('CSS2.1') }}初始版本。
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.caption-side")}}

diff --git a/files/zh-cn/web/css/caret-color/index.html b/files/zh-cn/web/css/caret-color/index.html new file mode 100644 index 0000000000..03f2e526b2 --- /dev/null +++ b/files/zh-cn/web/css/caret-color/index.html @@ -0,0 +1,90 @@ +--- +title: caret-color +slug: Web/CSS/caret-color +translation_of: Web/CSS/caret-color +--- +
{{CSSRef}}
+ +

caret-color 属性用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。

+ +
{{EmbedInteractiveExample("pages/css/caret-color.html")}}
+ + + +

附注：上面说的“插入光标”（insertion caret）只是光标（caret）的其中一种。比如一些浏览器有一种光标叫做“导航光标“（navigation caret），它可以在不可编辑区域内来回移动。此外，当鼠标指针移动到一段 {{cssxref("cursor")}} 属性是 auto 的文本上方时，或移动到 {{cssxref("cursor")}} 属性是 text、 vertical-text 的內容上方時，虽然看起来有点像插入光标，但它不是插入光标（caret），而是鼠标指针光标（cursor）。

+ +

语法

+ +
/* Keyword values */
+caret-color: auto;
+caret-color: transparent;
+caret-color: currentColor;
+
+/* <color> values */
+caret-color: red;
+caret-color: #5729e9;
+caret-color: rgb(0, 200, 0);
+caret-color: hsla(228, 4%, 24%, 0.8);
+
+ +

值

+ +
+
auto
+
+

默认颜色，此时浏览器应该用 currentcolor 来作为插入光标的颜色，但浏览器可能还会根据当前的背景色、阴影色等来对该颜色进行适当的调整以确保该插入光标具有良好的可见性。

+ +
+

附注：auto 属性值在 CSS  transitions/animations 中是不支持颜色插补（interpolated）的

+
+
+
{{cssxref("<color>")}}
+
所指定的插入光标的颜色值.
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<input />
+ +

CSS

+ +
input {
+  caret-color: red;
+}
+ +

示例演示

+ +

{{EmbedLiveSample("示例", 300, 40)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 UI", "#propdef-caret-color", "caret-color")}}{{Spec2("CSS3 UI")}}Initial definition.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.caret-color")}}

diff --git a/files/zh-cn/web/css/cascade/index.html b/files/zh-cn/web/css/cascade/index.html new file mode 100644 index 0000000000..ab6966567c --- /dev/null +++ b/files/zh-cn/web/css/cascade/index.html @@ -0,0 +1,160 @@ +--- +title: CSS层叠 +slug: Web/CSS/Cascade +translation_of: Web/CSS/Cascade +--- +

{{ CSSRef() }}

+ +

层叠是CSS的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法。它在CSS处于核心地位，CSS的全称层叠样式表正是强调了这一点。

+ +

哪些CSS实体会参与层叠计算

+ +

只有CSS声明，就是属性名值对，会参与层叠计算。这表示包含CSS声明以外实体的@规则不参与层叠计算，比如包含描述符（descriptors）的{{ cssxref("@font-face")}}。对于这些情形，@规则是做为一个整体参与层叠计算，比如@font-face的层叠是由其描述符font-family确定的。如果对同一个描述符定义了多次 @font-face，则最适合的 @font-face是做为一个整体而被考虑的。

+ +

包含在大多数@规则的CSS声明是参与层叠计算的，比如包含于{{cssxref("@media")}}、{{cssxref("@documents")}}或者{{cssxref("@supports")}}的CSS声明，但是包含于{{cssxref("@keyframes")}}的声明不参与计算，正如{{cssxref("@font-face")}}，它是作为一个整体参与层叠算法的筛选。

+ +

最后，注意 {{cssxref("@import")}}和{{cssxref("@charset")}}遵循特定的算法，并且不受层叠算法影响。

+ +

CSS声明的源

+ +

CSS层叠算法期望通过挑选CSS声明来给CSS属性设置正确的值。CSS声明可以有不同的来源：

+ +
    +
  • 浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称**用户代理样式**。一些浏览器通过使用真正的样式表，而其他则通过代码模拟，但无论是哪种情形都应是不可被检测的。而且部分浏览器允许用户修改用户代理样式。尽管HTML标准对用户代理样式做了诸多限制，浏览器仍大有可为，具体表现在不同浏览器间会存在重大的差异。为了减轻开发成本以及降低样式表运行所需的基本环境，网页开发者通常会使用一个CSS reset样式表，强制将常见的属性值转为确定状态。
    • +
  • 网页的作者可以定义文档的样式，这是最常见的样式表。大多数情况下此类型样式表会定义多个，它们构成网站的视觉和体验，即主题。
    • +
  • 读者，作为浏览器的用户，可以使用自定义样式表定制使用体验。
    • +
+ +

尽管CSS样式会来自这些不同的源，但它们的作用范围是重叠的，而层叠算法则定义了它们如何相互作用。

+ +

层叠顺序

+ +

层叠算法决定如何找出要应用到每个文档元素的每个属性上的值。

+ +
    +
  1. 它首先过滤来自不同源的全部规则，并保留要应用到指定元素上的那些规则。这意味着这些规则的选择器匹配指定元素，同时也是一个合适的@规则（at-rule）的一部分。
    2. +
  2. 其次，它依据重要性对这些规则进行排序。即是指，规则后面是否跟随者!import以及规则的来源。层叠是按升序排列的，这意味着来着用户自定义样式表的!important值比用户代理样式表的普通值优先级高： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    来源重要程度
    1用户代理普通
    2用户普通
    3页面作者普通
    4CSS动画见下节
    5用户代理!important
    6页面作者!important
    7用户!important
    8css 过渡(css transitions)
    +
    3. +
  3. 假如层叠顺序相等，则使用哪个值取决于优先级。
    4. +
+ +

重置样式

+ +

当你的css对样式完成更改之后，也许会在某种情况下希望把他们还原到一个已知样式上，这可能发生在动画、主题修改之类的情形中。CSS属性{{cssxref("all")}}能够让你快速地把（几乎）所有CSS属性设置到一个已知样式上。

+ +

all 属性让你能够立刻把所有的属性都还原到它们初始（默认）的状态，或是继承自前一个层叠顺序等级的状态，又或是指定一个特定的来源（用户代理、页面作者或者用户），甚至还可以选择完全清除所有的属性。

+ +

CSS动画与层叠

+ +

CSS动画，指使用{{ cssxref("@keyframes")}} @规则定义状态间的动画。关键帧不参与层叠，意味着在任何时候CSS都是取单一的@keyframes的值而不会是某几个@keyframe的混合。

+ +

当有多个满足条件的关键帧时，在最重要的文档里面最后定义的关键帧会被选中，而不会是将它们组合在一起。

+ +

同时仍应注意用@keyframes @规则定义的值会覆盖全部普通值，但会被!important的值覆盖。

+ +

例子

+ +

用户代理CSS：

+ +
li { margin-left: 10px }
+ +

网页作者CSS1：

+ +
li { margin-left: 0 } /* This is a reset */
+ +

网页作者CSS2：

+ +
@media screen {
+  li { margin-left: 3px }
+}
+
+@media print {
+  li { margin-left: 1px }
+}
+
+ +

用户CSS：

+ +
.specific { margin-left: 1em }
+ +

HTML：

+ +
<ul>
+  <li class="specific">1<sup>st</sup></li>
+  <li>2<sup>nd</sup></li>
+</ul>
+
+ +

对于这个情形，应当应用li和.specific里面的声明。由于没有声明被标记为!important，所以优先顺序为页面作者样式优于用户样式，用户代理样式最低。

+ +

故是这3条声明的竞争：

+ +
margin-left: 0
+ +
margin-left: 3px
+ +
margin-left: 1px
+ +

由于是在屏幕显示，所以最后一条舍弃，而前两条的选择器相同，因此优先级也相同，故最终选择的是后者：

+ +
margin-left: 3px
+ +

注意尽管定义在用户CSS里面的声明有更高的优先级，但它并不会被选中，因为层叠算法是先于优先级算法的。

+ +

See also

+ +
    +
  • The very simple introduction of cascading in the CSS Tutorial.
    • +
  • {{CSS_Key_Concepts()}}
    • +
diff --git a/files/zh-cn/web/css/child_combinator/index.html b/files/zh-cn/web/css/child_combinator/index.html new file mode 100644 index 0000000000..e161f15dae --- /dev/null +++ b/files/zh-cn/web/css/child_combinator/index.html @@ -0,0 +1,117 @@ +--- +title: 子选择器 +slug: Web/CSS/Child_combinator +tags: + - CSS + - Selectors +translation_of: Web/CSS/Child_combinator +--- +

{{ CSSRef() }}

+ +

概述

+ +

当使用  > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素. 与之相比, 当两个元素由 后代选择器 相连时, 它表示匹配存在的所有由第一个元素作为祖先元素(但不一定是父元素)的第二个元素, 无论它在 DOM 中"跳跃" 多少次.

+ +

语法

+ +
元素1 > 元素2 {样式声明 }
+
+ +

示例

+ +
span { background-color: white; }
+div > span {
+  background-color: DodgerBlue;
+}
+
+ +

当应用与如下标记时:

+ +
<div>
+  <span>Span 1. In the div.
+    <span>Span 2. In the span that's in the div.</span>
+  </span>
+</div>
+<span>Span 3. Not in a div at all</span>
+
+ +

会得到下面的效果:

+ +

Span 1. In the div. Span 2. In the span that's in the div.
+ Span 3. Not in a div at all.

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
CSS Selectors Level 3{{ Spec2('CSS3 Selectors') }} 
CSS 2.1{{ Spec2('CSS2.1') }} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}7.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

相关

diff --git a/files/zh-cn/web/css/clamp()/index.html b/files/zh-cn/web/css/clamp()/index.html new file mode 100644 index 0000000000..f55af592e9 --- /dev/null +++ b/files/zh-cn/web/css/clamp()/index.html @@ -0,0 +1,121 @@ +--- +title: clamp() +slug: Web/CSS/clamp() +translation_of: Web/CSS/clamp() +--- +
{{CSSRef}}
+ +
+ +

clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。 clamp() 被用在 {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}}、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} 中都是被允许的。

+ +

clamp(MIN, VAL, MAX) 其实就是表示 {{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))

+ +
{{EmbedInteractiveExample("pages/css/function-clamp.html")}}
+ + + +

示例中 clamp() 用来设置随窗口大小改变的字体大小，但是无论窗口怎么改变，字体大小不会小于设置的最小值，也不会超过设置的最大值。这个效果和 Fluid Typography 一致，但只用了一行代码，且不需要媒体查询语句。

+ +

语法

+ +

clamp() 函数接收三个用逗号分隔的表达式作为参数，按最小值、首选值、最大值的顺序排列。

+ +

当首选值比最小值要小时，则使用最小值。

+ +

当首选值介于最小值和最大值之间时，用首选值。

+ +

当首选值比最大值要大时，则使用最大值。

+ +

这个表达式可以是数学函数(参看 {{CSSxRef("calc")}} )、字面量或其它计算为有效的参数类型 (如{{CSSxRef("<length>")}}) 表达式，如 {{CSSxRef("attr", "attr()")}}，或嵌套的 {{CSSxRef("min")}} 和 {{CSSxRef("max")}} 。作为数学表达式，你可以使用加减乘除运算而无需使用 calc() 函数。你也可以用括号来确定计算顺序。

+ +

表达式中的每一个值都可以用不同的单位。

+ +

注意

+ +
    +
  • 在自动和固定布局表格中，涉及到列、列组、行、行组、单元格的宽度和高度中如果有百分比数学表达式，也许会被视为指定了 auto 。
    • +
  • 允许设置表达式的值为 max() 和 min() 。这些表达式是数学表达式，所以你可以进行加减乘除运算。
    • +
  • 表达式可以是使用标准运算符优先规则组合  + 、- 、* 、/ 等运算符的值，确保在 + 、- 两侧各有一个空格。表达式中的操作数可以是 {{CSSxRef("<length>")}} 语法值。你可以给每一个值设置不同的单位。你还可以用括号来确定计算顺序。
    • +
  • Oftentimes you will want to use {{CSSxRef("min")}} and {{CSSxRef("max")}} within a clamp() function.你可能经常会在 clamp() 中使用 {{CSSxRef("min")}} 和 {{CSSxRef("max")}} 。
    • +
+ +

形式语法

+ +
{{CSSSyntax}}
+ +

示例

+ +

min, max, and clamp comparison

+ +

这个示例中，我们用 min()、max() 和 clamp() 实现一个简单的响应式效果。

+ +

<body> 元素的 width 设置为 min(1000px, calc(70% + 100px))。其含义是宽度设置为  1000px，当 calc(70% + 100px) 比  1000px 小时，宽度为 calc(70% + 100px) 。 min() 允许你设置一个上限值。

+ +

 <p> 元素的 font-size 设置为 max(1.2rem, 1.2vw)。其含义是 font-size 是 1.2rem，当计算出 1.2vw 比 1.2rem 大时，则 font-size 为  1.2vw 。 max() 允许你设置一个下限值。

+ +

<h1> 元素的 font-size 设置为 clamp(1.8rem, 2.5vw, 2.8rem).。其含义是 font-size 为 1.8rem，当计算出 2.5vw 比 1.8rem  大时，font-size 为 2.5vw，同时，当 2.5vw 计算出来的值比 2.8rem 大时，font-size 为 2.8rem。clamp() 允许你设置一个上限值和下限值。

+ +

感兴趣可以在 GitHub 上查看源码

+ +

HTML

+ +
<h1>Simple responsive test</h1>
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci, eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula. Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis, libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit. Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum. Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.</p>
+
+<p>Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem. </p>
+ +

CSS

+ +
html {
+  font-family: sans-serif;
+}
+
+body {
+  margin: 0 auto;
+  width: min(1000px, calc(70% + 100px));
+}
+
+h1 {
+  letter-spacing: 2px;
+  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
+}
+
+p {
+  line-height: 1.5;
+  font-size: max(1.2rem, 1.2vw);
+}
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Values", "#calc-notation", "clamp()")}}{{Spec2('CSS4 Values')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.types.clamp")}}

+ +

继续阅读

+ +
    +
  • {{CSSxRef("calc")}}
    • +
  • {{CSSxRef("max")}}
    • +
  • {{CSSxRef("min")}}
    • +
  • CSS Values
    • +
diff --git a/files/zh-cn/web/css/class_selectors/index.html b/files/zh-cn/web/css/class_selectors/index.html new file mode 100644 index 0000000000..13fd848a89 --- /dev/null +++ b/files/zh-cn/web/css/class_selectors/index.html @@ -0,0 +1,123 @@ +--- +title: 类选择器 +slug: Web/CSS/Class_selectors +tags: + - CSS + - Selectors +translation_of: Web/CSS/Class_selectors +--- +
{{ CSSRef() }}
+ +

概述

+ +

在一个HTML文档中，CSS类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。

+ +

语法

+ +
.类名 {样式声明 }
+ +

注意它与下面的语句等价  {{ Cssxref("Attribute_selectors", "attribute selector") }}:

+ +
[class~=类名] {样式声明 }
+ +

示例

+ +
span.classy {
+  background-color: DodgerBlue;
+}
+
+ +

上面的CSS作用于下面的HTML代码:

+ +
  <span class="classy">Here's a span with some text.</span>
+  <span>Here's another.</span>
+
+ +

则会产生这样的效果:

+ +

Here's a span with some text.

+ +

Here's another.

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
CSS Selectors Level 3{{ Spec2('CSS3 Selectors') }} 
CSS 2.1{{ Spec2('CSS2.1') }} 
CSS 1{{ Spec2('CSS1') }} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

See also

diff --git a/files/zh-cn/web/css/clear/index.html b/files/zh-cn/web/css/clear/index.html new file mode 100644 index 0000000000..a38f07ec96 --- /dev/null +++ b/files/zh-cn/web/css/clear/index.html @@ -0,0 +1,229 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - CSS 定位 + - CSS 属性 + - 参考 +translation_of: Web/CSS/clear +--- +
{{CSSRef}}
+ +

 clear CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。

+ +
{{EmbedInteractiveExample("pages/css/clear.html")}}
+ + + +

当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个非浮动块的垂直外边距会折叠。

+ +

另一方面，两个浮动元素的垂直外边距将不会折叠。当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边框边界的下方。这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。

+ +

要被清除的相关浮动元素指的是在相同块级格式化上下文中的前置浮动。

+ +
+

注意：如果一个元素里只有浮动元素，那它的高度会是0。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。一种方法叫做clearfix，即clear一个不浮动的 {{cssxref("::after")}} 伪元素。

+ +
#container::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+
+ +

语法

+ +
/* Keyword values */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* Global values */
+clear: inherit;
+clear: initial;
+clear: unset;
+ +

值

+ +
+
none
+
元素不会向下移动清除之前的浮动。
+
left
+
元素被向下移动用于清除之前的左浮动。
+
right
+
元素被向下移动用于清除之前的右浮动。
+
both
+
元素被向下移动用于清除之前的左右浮动。
+
inline-start
+
该关键字表示该元素向下移动以清除其包含块的起始侧上的浮动。即在某个区域的左侧浮动或右侧浮动。
+
inline-end
+
该关键字表示该元素向下移动以清除其包含块的末端的浮点，即在某个区域的右侧浮动或左侧浮动。
+
+

Formal syntax

+ + 
{{csssyntax}}
+
+
+ +

示例

+ +

clear: left

+ +

HTML

+ +
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="left">This paragraph clears left.</p>
+</div>
+ +

CSS

+ +
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.left {
+  border: 1px solid black;
+  clear: left;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width: 20%;
+}
+.red {
+  float: left;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+ +

{{ EmbedLiveSample('clear:_left','100%','250') }}

+ +

clear: right

+ +

HTML

+ +
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="right">This paragraph clears right.</p>
+</div>
+ +

CSS

+ +
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.right {
+  border: 1px solid black;
+  clear: right;
+}
+.black {
+  float: right;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+ +

{{ EmbedLiveSample('clear:_right','100%','250') }}

+ +

clear: both

+ +

HTML

+ +
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="both">This paragraph clears both.</p>
+</div>
+ +

CSS

+ +
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.both {
+  border: 1px solid black;
+  clear: both;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 45%;
+}
+ +

{{ EmbedLiveSample('clear:_both','100%','300') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}Adds the values inline-start and inline-end
{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}{{Spec2('CSS2.1')}}No significant changes, though details are clarified.
{{SpecName('CSS1', '#clear', 'clear')}}{{Spec2('CSS1')}}Initial specification
+ +

浏览器兼容性

+ +

{{Compat("css.properties.clear")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/clip-path/index.html b/files/zh-cn/web/css/clip-path/index.html new file mode 100644 index 0000000000..01f042c48b --- /dev/null +++ b/files/zh-cn/web/css/clip-path/index.html @@ -0,0 +1,611 @@ +--- +title: clip-path +slug: Web/CSS/clip-path +tags: + - CSS + - CSS Masking + - CSS 属性 + - CSS 遮罩 + - Web + - clip-path + - 实验性 + - 引用 +translation_of: Web/CSS/clip-path +--- +
{{CSSRef}}
+ +

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

+ +
{{EmbedInteractiveExample("pages/css/clip-path.html")}}
+ + + +

语法

+ +
/* Keyword values */
+clip-path: none;
+
+/* <clip-source> values */
+clip-path: url(resources.svg#c1);
+
+/* <geometry-box> values */
+clip-path: margin-box;
+clip-path: border-box;
+clip-path: padding-box;
+clip-path: content-box;
+clip-path: fill-box;
+clip-path: stroke-box;
+clip-path: view-box;
+
+/* <basic-shape> values */
+clip-path: inset(100px 50px);
+clip-path: circle(50px at 0 100px);
+clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
+
+/* Box and shape values combined */
+clip-path: padding-box circle(50px at 0 100px);
+
+/* Global values */
+clip-path: inherit;
+clip-path: initial;
+clip-path: unset;
+
+ +

clip-path属性指定为下面列出的值的一个或多个值的组合.

+ +

取值

+ +
+
<clip-source>
+
用 {{cssxref("<url>")}} 表示剪切元素的路径
+
{{cssxref("<basic-shape>")}}
+
一种形状，其大小和位置由<几何盒>值定义。如果没有指定几何框，则边框将用作参考框
+
<geometry-box>
+
如果同 <basic-shape> 一起声明，它将为基本形状提供相应的参考框盒。通过自定义，它将利用确定的盒子边缘包括任何形状边角（比如说，被 {{cssxref("border-radius")}} 定义的剪切路径）。几何框盒可以有以下的值中的一个：
+
+
+
margin-box
+
使用 margin box 作为引用框。
+
border-box
+
使用 border box 作为引用框。
+
padding-box
+
使用 padding box 作为引用框。
+
content-box
+
使用 content box 作为引用框。
+
fill-box
+
利用对象边界框作为引用框。
+
stroke-box
+
使用笔触边界框（stroke bounding box）作为引用框
+
view-box
+
使用最近的 SVG 视口（viewport）作为引用框。如果{{SVGAttr("viewBox")}} 属性被指定来为元素创建 SVG 视口，引用框将会被定位在坐标系的原点，引用框位于由 viewBox 属性建立的坐标系的原点，引用框的尺寸用来设置 viewBox 属性的宽高值。
+
+
+
none
+
不创建的剪切路径。
+
+ +
+

Note: A computed value other than none results in the creation of a new stacking context the same way that CSS {{cssxref("opacity")}} does for values other than 1.

+
+ +

正式语法

+ +
{{csssyntax}}
+ +

例子

+ +

HTML 与 SVG 之间的对比

+ + + +

{{EmbedLiveSample("clip-path", "100%", 800, "", "", "example-outcome-frame")}}

+ +

完整示例

+ +

HTML

+ +
<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="MDN logo">
+<svg height="0" width="0">
+  <defs>
+    <clipPath id="cross">
+      <rect y="110" x="137" width="90" height="90"/>
+      <rect x="0" y="110" width="90" height="90"/>
+      <rect x="137" y="0" width="90" height="90"/>
+      <rect x="0" y="0" width="90" height="90"/>
+    </clipPath>
+  </defs>
+</svg>
+
+<select id="clipPath">
+  <option value="none">none</option>
+  <option value="circle(100px at 110px 100px)">circle</option>
+  <option value="url(#cross)" selected>cross</option>
+  <option value="inset(20px round 20px)">inset</option>
+  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">path</option>
+</select>
+
+ +

CSS

+ +
#clipped {
+  margin-bottom: 20px;
+  clip-path: url(#cross);
+}
+
+ + + +

结果

+ +

{{EmbedLiveSample("Complete_example", 230, 250)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}{{Spec2('CSS Masks')}}Extends its application to HTML elements
{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}{{Spec2('SVG1.1')}}Initial definition (applies to SVG elements only)
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.clip-path")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/clip/index.html b/files/zh-cn/web/css/clip/index.html new file mode 100644 index 0000000000..25b8eb6407 --- /dev/null +++ b/files/zh-cn/web/css/clip/index.html @@ -0,0 +1,153 @@ +--- +title: clip +slug: Web/CSS/clip +translation_of: Web/CSS/clip +--- +
{{CSSRef}}{{deprecated_header}}
+ +

概述

+ +

clip 属性定义了元素的哪一部分是可见的。clip 属性只适用于 {{ cssxref("position","position:absolute") }} 的元素。

+ +
+

警告：这个属性已被废弃。建议使用 {{cssxref("clip-path")}} 。

+
+ +

{{cssinfo}}

+ +

语法

+ +
形式语法: {{csssyntax("clip")}}
+
+ +
clip: rect(1px, 10em, 3rem, 2ch)
+clip: auto
+
+clip: inherit
+ +

值

+ +
+
<shape>
+
一个矩形 {{cssxref("<shape>")}} + 
rect(<top>, <right>, <bottom>, <left>)   /* 标准语法 */
+
+ 或 + + 
rect(<top> <right> <bottom> <left>)      /* 向后兼容语法 */
+ <top> 和 <bottom> 指定相对于盒子上边框边界 的偏移，<right> 和 <left> 指定了相对于盒子左边框边界 的偏移。
+
<top>， <right>， <bottom>， 和 <left> 的值可以是 {{cssxref("<length>")}} 值或 auto。
+
auto
+
元素不裁剪(默认值)
+
+ +

示例

+ +
p { border:dotted;  position:relative; }
+
+#img2 {
+  position:absolute;  left:263px;
+
+  clip: rect(40px, 200px, 150px, 30px);
+  /* 标准语法，Internet Explorer 4-7 不支持 */
+}
+
+#img3 {
+  position: absolute; left:526px;
+
+  clip: rect(40px  200px  150px  30px);
+  /* 非标准语法，但是包括火狐与 IE 在内的主要浏览器均支持 */
+}
+ +

hut.jpg hut.jpg hut.jpg

+ +

规范

+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transitions', '#animatable-css', 'clip') }}{{ Spec2('CSS3 Transitions') }}Defines clip as animatable.
{{ SpecName('CSS2.1', 'visufx.html#clipping', 'clip') }}{{ Spec2('CSS2.1') }} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.01.0 (1.0)4.07.01.0 (85)
8.0
+ 该版本支持逗号语法。
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

See also

+ +
    +
  • Related CSS properties: {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("overflow") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}
    • +
diff --git a/files/zh-cn/web/css/color/index.html b/files/zh-cn/web/css/color/index.html new file mode 100644 index 0000000000..d39de39338 --- /dev/null +++ b/files/zh-cn/web/css/color/index.html @@ -0,0 +1,159 @@ +--- +title: color +slug: Web/CSS/color +tags: + - CSS + - CSS 属性 + - CSS 文本 + - CSS 颜色 + - HTML 样式 + - HTML 颜色 + - Web + - color + - 参考 + - 布局 +translation_of: Web/CSS/color +--- +
{{CSSRef}}
+ +
colorCSS属性设置颜色值的前景色以及文本装饰，并设置{{cssxref("currentcolor")}}值。currentcolor可以对其他颜色属性用作不直接的值，比如{{cssxref("border-color")}}。
+ +
{{EmbedInteractiveExample("pages/css/color.html")}}
+ +
对于在HTML中使用颜色的概述，参考使用CSS对HTML元素实现颜色。
+ +

语法

+ +
/* 关键词 */
+color: currentcolor;
+
+/* <named-color>值 */
+color: red;
+color: orange;
+color: tan;
+color: rebeccapurple;
+
+/* <hex-color>值 */
+color: #090;
+color: #009900;
+color: #090a;
+color: #009900aa;
+
+/* <rgb()>值 */
+color: rgb(34, 12, 64, 0.6);
+color: rgba(34, 12, 64, 0.6);
+color: rgb(34 12 64 / 0.6);
+color: rgba(34 12 64 / 0.3);
+color: rgb(34.0 12 64 / 60%);
+color: rgba(34.6 12 64 / 30%);
+
+/* <hsl()>值 */
+color: hsl(30, 100%, 50%, 0.6);
+color: hsla(30, 100%, 50%, 0.6);
+color: hsl(30 100% 50% / 0.6);
+color: hsla(30 100% 50% / 0.6);
+color: hsl(30.0 100% 50% / 60%);
+color: hsla(30.2 100% 50% / 60%);
+
+/* 全局值 */
+color: inherit;
+color: initial;
+color: unset;
+ +

color 属性被指定为一个单个的 {{cssxref("<color>")}}值。

+ +

注意值必须是规则的 {{cssxref("color")}}。它不可以是{{cssxref("<gradient>")}}（实际上为{{cssxref("<image>")}}的一部分）。

+ +

值

+ +
+
{{cssxref("<color>")}}
+
设置元素的文本或装饰的颜色。
+
+ +

Accessibility concerns

+ +

It is important to ensure that the contrast ratio between the color of the text and the background the text is placed over is high enough that people experiencing low vision conditions will be able to read the content of the page.

+ +

Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

+ + + +

正规定义

+ +

{{cssinfo}}

+ +

正规语法

+ +
{{csssyntax}}
+ +

示例

+ +

使文本为红色

+ +

以下方式可以使得文本显示为红色：

+ +
p { color: red; }
+p { color: #f00; }
+p { color: #ff0000; }
+p { color: rgb(255,0,0); }
+p { color: rgb(100%, 0%, 0%); }
+p { color: hsl(0, 100%, 50%); }
+
+/* 50%透明 */
+p { color: #ff000080; }
+p { color: rgba(255, 0, 0, 0.5); }
+p { color: hsla(0, 100%, 50%, 0.5); }
+ +

指定

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Colors', '#the-color-property', 'color')}}{{Spec2('CSS4 Colors')}}Adds commaless syntaxes for the rgb(), rgba(), hsl(), and hsla() functions. Allows alpha values in rgb() and hsl(), turning rgba() and hsla() into (deprecated) aliases for them.
+ Adds color keyword rebeccapurple.
+ Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.
+ Adds hwb(), device-cmyk(), and color() functions.
{{SpecName('CSS3 Colors', '#color', 'color')}}{{Spec2('CSS3 Colors')}}Deprecates system-colors. Adds SVG colors. Adds the rgba(), hsl(), and hsla() functions.
{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}{{Spec2('CSS2.1')}}Adds the orange color and the system colors.
{{SpecName('CSS1', '#color', 'color')}}{{Spec2('CSS1')}}Initial definition.
+ +

浏览器兼容性

+ +

{{Compat("css.properties.color")}}

+ +

另请参阅

+ +
    +
  • 颜色 {{cssxref("<color>")}} 数据类型
    • +
  • 其他颜色相关属性：{{cssxref("background-color")}}、{{cssxref("border-color")}}、{{cssxref("outline-color")}}、{{cssxref("text-decoration-color")}}、{{cssxref("text-emphasis-color")}}、{{cssxref("text-shadow")}}、{{cssxref("caret-color")}}、{{cssxref("column-rule-color")}}和{{cssxref("color-adjust")}}
    • +
  • 使用CSS对HTML元素应用颜色
    • +
diff --git a/files/zh-cn/web/css/color_value/index.html b/files/zh-cn/web/css/color_value/index.html new file mode 100644 index 0000000000..c882e269af --- /dev/null +++ b/files/zh-cn/web/css/color_value/index.html @@ -0,0 +1,1730 @@ +--- +title: +slug: Web/CSS/color_value +tags: + - CSS + - CSS 数据类型 + - hsl + - hsla + - rgb + - rgba + - 单元 + - 参考 + - 布局 + - 数据类型 + - 网络 + - 颜色 +translation_of: Web/CSS/color_value +--- +

{{CSSRef}}

+ +

CSS 数据类型 <color> 表示一种标准RGB色彩空间（sRGB color space）的颜色。一个颜色可以包括一个alpha通道透明度值，来表明颜色如何与它的背景色混合（composite）。

+ +

一个<color>可以以如下方式定义：

+ + + +
+

注意：本文章详细描述了<color>数据类型。如要了解更多关于在HTML中使用颜色的信息，请参阅使用CSS为HTML元素应用颜色。

+
+ +

语法

+ +

<color>可以以以下方式指定。

+ +
+

注意：尽管 CSS 颜色值被精确定义，但在不同的输出设备上仍然有可能显示不一。它们大多数是不可被校准的，而且有些浏览器不支持输出设备的色彩配置（color profile）。

+
+ +

颜色关键字

+ +

颜色关键字（color keywords）是不区分大小写的标识符，它表示一个具体的颜色，例如 red、blue、brown或者lightseagreen 。尽管名称或多或少描述了分别的颜色，但必定是人工的，其后没有严格的标准。

+ +

在使用关键字时有几个需要留意的注意事项：

+ +
    +
  • 除了通常的 16 个 HTML 基本颜色，其它的不能被用于 HTML 。HTML 将通过一个特定的计算程序转换这些未知的值，这将导致成为完全不同的颜色。这些关键字应只被用于 SVG 和 CSS 。
    • +
  • 未知的关键字会让 CSS 属性无效。无效的属性将被忽略，该颜色将没有作用。这是一个和 HTML 相比不同的行为。
    • +
  • 未使用关键字定义的颜色在 CSS 中有任意的透明度，它们是单实色。
    • +
  • 一些关键字表示同样的颜色： +
      +
    • darkgray / darkgrey
      • +
    • darkslategray / darkslategrey
      • +
    • dimgray / dimgrey
      • +
    • lightgray / lightgrey
      • +
    • lightslategray / lightslategrey
      • +
    • gray / grey
      • +
    • slategray / slategrey
      • +
    +
    • +
  • 虽然关键字的名称取自常见的 X11 颜色名，然而由于生产商为具体的硬件所做的定制，颜色可能与 X11 系统上相应的颜色有所偏差。
    • +
+ +
+

注意：可接受的关键字列表在CSS的演变过程中发生了改变：

+ +
    +
  • CSS 标准 1 只接受 16 个基本颜色，称为VGA颜色，因为它们来源于 VGA 显卡所显示的颜色集合而被称为 VGA colors （视频图形阵列色彩）。
    • +
  • CSS 标准 2 增加了 orange 关键字。
    • +
  • 从一开始，浏览器接受其它的颜色，由于一些早期浏览器是 X11 应用程序，这些颜色大多数是 X11 命名的颜色列表，虽然有一点不同。SVG 1.0 是首个正式定义这些关键字的标准；CSS 色彩标准 3 也正式定义了这些关键字。它们经常被称作扩张的颜色关键字， X11 颜色或 SVG 颜色 。
    • +
  • CSS颜色标准 4 添加可rebeccapurple关键字来纪念web先锋Eric Meyer。
    • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范颜色关键字RGB 十六进制数实样
{{SpecName("CSS1")}}black（黑）#000000
silver（银）#c0c0c0
gray（灰）#808080
white（白）#ffffff
maroon（褐）#800000
red（红）#ff0000
purple（紫）#800080
fuchsia（紫红）#ff00ff
green（绿）#008000
lime（绿黄）#00ff00
olive（橄榄绿）#808000
yellow（黄）#ffff00
navy（藏青）#000080
blue（蓝）#0000ff
teal（青）#008080
aqua（水绿）#00ffff
{{SpecName("CSS2.1")}}orange（橙）#ffa500
{{SpecName("CSS3 Colors")}}aliceblue（浅灰蓝）#f0f8ff
antiquewhite（古董白）#faebd7
aquamarine（海蓝）#7fffd4
azure（蔚蓝）#f0ffff
beige（浅褐）#f5f5dc
bisque（橘黄）#ffe4c4
blanchedalmond（杏仁白）#ffebcd
blueviolet（蓝紫）#8a2be2
brown（褐）#a52a2a
burlywood（原木色）#deb887
cadetblue（灰蓝）#5f9ea0
chartreuse（黄绿）#7fff00
chocolate（巧克力色）#d2691e
coral（珊瑚红）#ff7f50
cornflowerblue（矢车菊蓝）#6495ed
cornsilk（玉米穗黄）#fff8dc
crimson（深红）#dc143c
darkblue（深蓝）#00008b
darkcyan（深青）#008b8b
darkgoldenrod（暗金）#b8860b
darkgray[*]（深灰）#a9a9a9
darkgreen（深绿）#006400
darkgrey[*]（深灰）#a9a9a9
darkkhaki（暗黄褐）#bdb76b
darkmagenta（深紫）#8b008b
darkolivegreen（深橄榄绿）#556b2f
darkorange（深橙）#ff8c00
darkorchid（深兰花紫）#9932cc
darkred（深红）#8b0000
darksalmon（深橙红）#e9967a
darkseagreen（深海绿）#8fbc8f
darkslateblue（暗灰蓝）#483d8b
darkslategray[*]（墨绿）#2f4f4f
darkslategrey[*]（墨绿）#2f4f4f
darkturquoise（暗宝石绿）#00ced1
darkviolet（深紫罗兰）#9400d3
deeppink（深粉红）#ff1493
deepskyblue（深天蓝）#00bfff
dimgray[*]（暗灰）#696969
dimgrey[*]（暗灰）#696969
dodgerblue（遮板蓝）#1e90ff
firebrick（砖红）#b22222
floralwhite（花白）#fffaf0
forestgreen（丛林绿）#228b22
gainsboro（浅灰）#dcdcdc
ghostwhite（幽灵白）#f8f8ff
gold（金）#ffd700
goldenrod（橘黄）#daa520
greenyellow（黄绿）#adff2f
grey（灰）#808080
honeydew（蜜瓜色）#f0fff0
hotpink（亮粉）#ff69b4
indianred（印第安红）#cd5c5c
indigo（靛蓝）#4b0082
ivory（象牙白）#fffff0
khaki（卡其色）#f0e68c
lavender（淡紫）#e6e6fa
lavenderblush（淡紫红）#fff0f5
lawngreen（草绿）#7cfc00
lemonchiffon（粉黄）#fffacd
lightblue（淡蓝）#add8e6
lightcoral（浅珊瑚色）#f08080
lightcyan（淡青）#e0ffff
lightgoldenrodyellow（浅金黄）#fafad2
lightgray[*]（浅灰）#d3d3d3
lightgreen（浅绿）#90ee90
lightgrey[*]（浅灰）#d3d3d3
lightpink（淡粉）#ffb6c1
lightsalmon（浅肉色）#ffa07a
lightseagreen（浅海绿）#20b2aa
lightskyblue（浅天蓝）#87cefa
lightslategray[*]（浅青灰）#778899
lightslategrey[*]（浅青灰）#778899
lightsteelblue（浅钢蓝）#b0c4de
lightyellow（浅黄）#ffffe0
limegreen（酸橙绿）#32cd32
linen（亚麻色）#faf0e6
mediumaquamarine（中绿）#66cdaa
mediumblue（中蓝）#0000cd
mediumorchid（间兰花紫）#ba55d3
mediumpurple（中紫）#9370db
mediumseagreen（间海绿）#3cb371
mediumslateblue（中暗蓝）#7b68ee
mediumspringgreen（中春绿）#00fa9a
mediumturquoise（中海湖蓝）#48d1cc
mediumvioletred（中紫罗兰）#c71585
midnightblue（午夜蓝）#191970
mintcream（薄荷乳白）#f5fffa
mistyrose（粉玫瑰红）#ffe4e1
moccasin（鹿皮色）#ffe4b5
navajowhite（纳瓦白）#ffdead
oldlace（浅米色）#fdf5e6
olivedrab（橄榄褐）#6b8e23
orangered（橙红）#ff4500
orchid（兰花紫）#da70d6
palegoldenrod（灰菊黄）#eee8aa
palegreen（苍绿）#98fb98
paleturquoise（苍宝石绿）#afeeee
palevioletred（苍紫罗兰）#db7093
papayawhip（木瓜色）#ffefd5
peachpuff（桃色）#ffdab9
peru（秘鲁色）#cd853f
pink（粉）#ffc0cb
plum（李子色）#dda0dd
powderblue（粉蓝）#b0e0e6
rosybrown（玫瑰粽）#bc8f8f
royalblue（宝蓝）#4169e1
saddlebrown（马鞍棕）#8b4513
salmon（鲑肉色）#fa8072
sandybrown（沙褐色）#f4a460
seagreen（海绿）#2e8b57
seashell（贝壳白）#fff5ee
sienna（赭）#a0522d
skyblue（天蓝）#87ceeb
slateblue（青蓝）#6a5acd
slategray[*]（青灰）#708090
slategrey[*]（青灰）#708090
snow（雪白）#fffafa
springgreen（春绿）#00ff7f
steelblue（铁青）#4682b4
tan（棕褐）#d2b48c
thistle（苍紫）#d8bfd8
tomato（番茄红）#ff6347
turquoise（蓝绿）#40e0d0
violet（紫罗兰色）#ee82ee
wheat（麦色）#f5deb3
whitesmoke（烟白）#f5f5f5
yellowgreen（黄绿）#9acd32
{{SpecName("CSS4 Colors")}}rebeccapurple（利百加紫）#663399
+ +

（译者注：颜色译名仅供参考。）

+ +

transparent 关键字

+ +

transparent 关键字表示一个完全透明的颜色，即该颜色看上去将是背景色。从技术上说，它是带有阿尔法通道为最小值的黑色，是 rgba(0,0,0,0) 的简写。

+ +
+

注意兼容性：为避免未预料的行为，比如{{cssxref("gradient")}}中，the current CSS spec states that transparent should be calculated in the alpha-premultiplied color space. 但是，注意旧的浏览器可能将其作为alpha值为0的黑色。

+
+ +
过去的注释：transparent 关键字在 CSS Level 2 (Revision 1) 中不是一个真实的颜色。它是一个特殊的关键字，可以代替一个普通的 <color> 值用于两个 CSS 属性中： {{ Cssxref("background") }} 和 {{ Cssxref("border") }}。本质上使用它可以覆盖一个继承的单色。随着经由阿尔法通道（alpha channels）透明度的支持，transparent 在 CSS Colors Level 3 中被重新定义为一个真实的颜色，允许在任何一个需要 <color> 值的地方使用，像 {{ Cssxref("color") }} 属性。
+ +

currentColor 关键字

+ +

currentColor 关键字代表原始的 {{ Cssxref("color") }} 属性的计算值。它允许让继承自属性或子元素的属性颜色属性以默认值不再继承。

+ +

它也能用于那些继承了元素的 {{ Cssxref("color") }} 属性计算值的属性，相当于在这些元素上使用 inherit 关键字，如果这些元素有该关键字的话。

+ +

currentcolor示例

+ +

该行的颜色（一个填充颜色的 div）应用它继承自父级的 {{ Cssxref("color") }} 属性。

+ +
HTML
+ +
<div style="color:blue; border: 1px dashed currentcolor;">
+  The color of this text is blue.
+  <div style="background:currentcolor; height:9px;"></div>
+  This block is surrounded by a blue border.
+</div>
+ +
结果
+ +

{{EmbedLiveSample('currentcolor_example')}}

+ +

RGB颜色

+ +

颜色可以使用红-绿-蓝（red-green-blue (RGB)）模式的两种方式被定义：

+ +

语法

+ +

RGB颜色可以通过以#为前缀的十六进制字符和函数（rgb()、rgba()）标记表示。

+ +
+

注意：在CSS 颜色标准 4 中，rgba()是rgb()的别称。在实行第4级标准的浏览器中，它们接受相同的参数，作用效果也相同。

+
+ +
+
十六进制符号：#RRGGBB[AA]
+
R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）。A是可选的。比如，#ff0000等价于#ff0000ff。
+
十六进制符号：#RGB[A]
+
R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）。A是可选的。三位数符号（#RGB）是六位数形式（#RRGGBB）的减缩版。比如，#f09和#ff0099表示同一颜色。类似地，六位数符号（#RGBA）是八位数形式（#RRGGBBAA）的减缩版。比如，#0f38和#00ff3388表示相同颜色。
+
函数符： rgb[a](R, G, B[, A])
+
R（红）、G（绿）、B （蓝）可以是{{cssxref("<number>")}}（数字），或者{{cssxref("<percentage>")}}（百分比），255相当于100%。A（alpha）可以是0到1之间的数字，或者百分比，数字1相当于100%（完全不透明）。
+
函数符：rgb[a](R G B[ / A])
+
CSS 颜色级别 4 支持用空格分开的值。
+
+ +

HSL颜色

+ +

颜色也可以使用 hsl() 函数符被定义为色相-饱和度-亮度（Hue-saturation-lightness）模式。HSL 相比 RGB 的优点是更加直观：你可以估算你想要的颜色，然后微调。它也更易于创建相称的颜色集合。（通过保持相同的色相并改变亮度/暗度和饱和度）。

+ +

Many designers find HSL more intuitive than RGB, since it allows hue, saturation, and lightness to each be adjusted independently. HSL can also make it easier to create a set of matching colors (such as when you want multiple shades of a single hue).

+ +

语法

+ +

HSL colors are expressed through the functional hsl() and hsla() notations.

+ +
+

Note: As of CSS Colors Level 4, hsla() is an alias for hsl(). In browsers that implement the Level 4 standard, they accept the same parameters and behave the same way.

+
+ +
+
Functional notation: hsl[a](H, S, L[, A])
+
H (hue) is an {{cssxref("<angle>")}} of the color circle given in degs, rads, grads, or turns in {{SpecName("CSS4 Colors","#the-hsl-notation")}}. When written as a unitless {{cssxref("<number>")}}, it is interpreted as degrees, as specified in {{SpecName("CSS3 Colors", "#hsl-color")}}. By definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. As an <angle>, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc.
+
S (saturation) and L (lightness) are percentages. 100% saturation is completely saturated, while 0% is completely unsaturated (gray). 100% lightness is white, 0% lightness is black, and 50% lightness is “normal.”
+
A (alpha) can be a {{cssxref("<number>")}} between 0 and 1, or a {{cssxref("<percentage>")}}, where the number 1 corresponds to 100% (full opacity).
+
Functional notation: hsl[a](H S L[ / A])
+
CSS Colors Level 4 adds support for space-separated values in the functional notation.
+
+ +

系统颜色

+ +

In forced colors mode (detectable with the forced-colors media query), most colors are restricted into a user- and browser-defined palette. These system colors are exposed by the following keywords, which can be used to ensure that the rest of the page integrates well with the restricted palette. These values may also be used in other contexts, but are not widely supported by browsers. 

+ +

The keywords in the following list are defined by the CSS Color Module Level 4 specification.

+ +
+

Note that these keywords are case insensitive, but are listed here with mixed case for readability.

+
+ +
+
ActiveText
+
+

Text of active links

+
+
ButtonFace
+
+

Background of push buttons

+
+
ButtonText
+
+

Text of push buttons

+
+
Canvas
+
+

Background of application content or documents

+
+
CanvasText
+
+

Text in application content or documents

+
+
Field
+
+

Background of input fields

+
+
FieldText
+
+

Text in input fields

+
+
GrayText
+
+

Text that is disabled

+
+
Highlight
+
+

Background of items that are selected in a control

+
+
HighlightText
+
+

Text of items that are selected in a control

+
+
LinkText
+
+

Text of non-active, non-visited links

+
+
VisitedText
+
+

Text of visited links

+
+
+ +

Deprecated system color keywords

+ +

The following keywords were defined in earlier versions of the CSS Color Module. They are now deprecated. {{deprecated_inline}} for use on public web pages.

+ +
+
+
ActiveBorder
+
+

Active window border.

+
+
ActiveCaption
+
+

Active window caption. Should be used with CaptionText as foreground color.

+
+
AppWorkspace
+
+

Background color of multiple document interface.

+
+
Background
+
+

Desktop background.

+
+
ButtonHighlight
+
+

The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.

+
+
ButtonShadow
+
+

The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border.

+
+
CaptionText
+
+

Text in caption, size box, and scrollbar arrow box. Should be used with the ActiveCaption background color.

+
+
InactiveBorder
+
+

Inactive window border.

+
+
InactiveCaption
+
+

Inactive window caption. Should be used with the InactiveCaptionText foreground color.

+
+
InactiveCaptionText
+
+

Color of text in an inactive caption. Should be used with the InactiveCaption background color.

+
+
InfoBackground
+
+

Background color for tooltip controls. Should be used with the InfoText foreground color.

+
+
InfoText
+
+

Text color for tooltip controls. Should be used with the InfoBackground background color.

+
+
Menu
+
+

Menu background. Should be used with the MenuText or -moz-MenuBarText foreground color.

+
+
MenuText
+
+

Text in menus. Should be used with the Menu background color.

+
+
Scrollbar
+
+

Background color of scroll bars.

+
+
ThreeDDarkShadow
+
+

The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

+
+
ThreeDFace
+
+

The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the ButtonText foreground color.

+
+
ThreeDHighlight
+
+

The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

+
+
ThreeDLightShadow
+
+

The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

+
+
ThreeDShadow
+
+

The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.

+
+
Window
+
+

Window background. Should be used with the WindowText foreground color.

+
+
WindowFrame
+
+

Window frame.

+
+
WindowText
+
+

Text in windows. Should be used with the Window background color.

+
+
+
+ + + +

Mozilla System Color Extensions

+ +
+
+
+
+
-moz-ButtonDefault
+
+

The border color that goes around buttons that represent the default action for a dialog box.

+
+
-moz-ButtonHoverFace
+
+

The background color of a button that the mouse pointer is over (which would be ThreeDFace or ButtonFace when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverText foreground color.

+
+
-moz-ButtonHoverText
+
+

The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverFace background color.

+
+
-moz-CellHighlight
+
+

Background color for selected item in a tree widget. Should be used with the -moz-CellHighlightText foreground color. See also -moz-html-CellHighlight.

+
+
-moz-CellHighlightText
+
+

Text color for a selected item in a tree. Should be used with the -moz-CellHighlight background color. See also -moz-html-CellHighlightText.

+
+
-moz-Combobox
+
+

{{Gecko_minversion_inline("1.9.2")}} Background color for combo-boxes. Should be used with the -moz-ComboboxText foreground color. In versions prior to 1.9.2, use -moz-Field instead.

+
+
-moz-ComboboxText
+
+

{{Gecko_minversion_inline("1.9.2")}} Text color for combo-boxes. Should be used with the -moz-Combobox background color. In versions prior to 1.9.2, use -moz-FieldText instead.

+
+
-moz-Dialog
+
+

Background color for dialog boxes. Should be used with the -moz-DialogText foreground color.

+
+
-moz-DialogText
+
+

Text color for dialog boxes. Should be used with the -moz-Dialog background color.

+
+
-moz-dragtargetzone
+
-moz-EvenTreeRow
+
+

{{gecko_minversion_inline("1.9")}} Background color for even-numbered rows in a tree. Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-OddTreeRow.

+
+
-moz-html-CellHighlight
+
+

{{gecko_minversion_inline("1.9")}} Background color for highlighted item in HTML {{HTMLElement("select")}}s. Should be used with the -moz-html-CellHighlightText foreground color. Prior to Gecko 1.9, use -moz-CellHighlight.

+
+
-moz-html-CellHighlightText
+
+

{{gecko_minversion_inline("1.9")}} Text color for highlighted items in HTML {{HTMLElement("select")}}s. Should be used with the -moz-html-CellHighlight background color. Prior to Gecko 1.9, use -moz-CellHighlightText.

+
+
-moz-mac-accentdarkestshadow
+
-moz-mac-accentdarkshadow
+
-moz-mac-accentface
+
-moz-mac-accentlightesthighlight
+
-moz-mac-accentlightshadow
+
-moz-mac-accentregularhighlight
+
-moz-mac-accentregularshadow
+
-moz-mac-chrome-active
+
+

{{Gecko_minversion_inline("1.9.1")}}

+
+
-moz-mac-chrome-inactive
+
+

{{Gecko_minversion_inline("1.9.1")}}

+
+
-moz-mac-focusring
+
-moz-mac-menuselect
+
-moz-mac-menushadow
+
-moz-mac-menutextselect
+
-moz-MenuHover
+
+

Background color for hovered menu items. Often similar to Highlight. Should be used with the -moz-MenuHoverText or -moz-MenuBarHoverText foreground color.

+
+
-moz-MenuHoverText
+
+

Text color for hovered menu items. Often similar to HighlightText. Should be used with the -moz-MenuHover background color.

+
+
-moz-MenuBarText
+
+

{{Gecko_minversion_inline("1.9.2")}} Text color in menu bars. Often similar to MenuText. Should be used on top of Menu background.

+
+
-moz-MenuBarHoverText
+
+

Color for hovered text in menu bars. Often similar to -moz-MenuHoverText. Should be used on top of -moz-MenuHover background.

+
+
-moz-nativehyperlinktext
+
+

{{Gecko_minversion_inline("1.9.1")}} Default platform hyperlink color.

+
+
-moz-OddTreeRow
+
+

{{gecko_minversion_inline("1.9")}} Background color for odd-numbered rows in a tree. Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-EvenTreeRow.

+
+
-moz-win-communicationstext
+
+

{{gecko_minversion_inline("1.9")}} Should be used for text in objects with {{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;.

+
+
-moz-win-mediatext
+
+

{{gecko_minversion_inline("1.9")}} Should be used for text in objects with {{cssxref("-moz-appearance")}}: -moz-win-media-toolbox.

+
+
-moz-win-accentcolor
+
+

{{gecko_minversion_inline("56")}}
+ Used to access the Windows 10 custom accent color that you can set on the start menu, taskbar, title bars, etc.

+
+
-moz-win-accentcolortext
+
+

{{gecko_minversion_inline("56")}}
+ Used to access the color of text placed over the Windows 10 custom accent color in the start menu, taskbar, title bars, etc.

+
+
+
+
+
+
+ +

Mozilla Color Preference Extensions

+ +
+
-moz-activehyperlinktext
+
+

User's preference for text color of active links. Should be used with the default document background color.

+
+
-moz-default-background-color
+
+

{{Gecko_minversion_inline("5.0")}} User's preference for the document background color.

+
+
-moz-default-color
+
+

{{Gecko_minversion_inline("5.0")}} User's preference for the text color.

+
+
-moz-hyperlinktext
+
+

User's preference for the text color of unvisited links. Should be used with the default document background color.

+
+
-moz-visitedhyperlinktext
+
+

User's preference for the text color of visited links. Should be used with the default document background color.

+
+
+ +

插值

+ +

在动画和渐变中， <color> 值会在每个红绿蓝成分中插值。每一个成分都会插值为浮点实数。注意颜色的插值发生在 alpha-premultiplied sRGBA color space 中，以避免出现未预料的灰色。在动画中，插值速度由时间函数决定。

+ +

Accessibility considerations

+ +

Some people have difficulty distinguishing colors. The WCAG 2.0 recommendation strongly advises against using color as the only means of conveying a specific message, action, or result. See Color and color contrast for more information.

+ +

示例

+ +

颜色值检测器

+ +

在这个示例中，我们提供一个<div>和文本输入框。输入一个有效的颜色，则<div>会显示这个颜色，可以让你检测颜色值。

+ +

HTML

+ +
<div></div>
+<hr>
+<label for="color">Enter a valid color value:</label>
+<input type="text" id="color">
+ +

CSS

+ +
div {
+  width: 100%;
+  height: 200px;
+}
+ + + +

结果

+ +

{{EmbedLiveSample('Color_value_tester','100%', 300)}}

+ +

RGB的多种语法

+ +

这个例子显示了一个颜色可以以多种RGB颜色语法表示。

+ +
/* 这些语法都表示同一个颜色：a fully opaque hot pink */
+
+/* 十六进制语法 */
+#f09
+#F09
+#ff0099
+#FF0099
+
+/* 函数语法 */
+rgb(255,0,153)
+rgb(255, 0, 153)
+rgb(255, 0, 153.0)
+rgb(100%,0%,60%)
+rgb(100%, 0%, 60%)
+rgb(100%, 0, 60%) /* 错误：不要混用数字和百分比 */
+rgb(255 0 153)
+
+/* 带有alpha值的十六进制语法 */
+#f09f
+#F09F
+#ff0099ff
+#FF0099FF
+
+/* 带有alpha值的函数语法 */
+rgb(255, 0, 153, 1)
+rgb(255, 0, 153, 100%)
+
+/* 空格语法 */
+rgb(255 0 153 / 1)
+rgb(255 0 153 / 100%)
+
+/* 带有浮点值的函数语法 */
+rgb(255, 0, 153.6, 1)
+rgb(1e2, .5e1, .5e0, +.25e2%)
+ +

RGB的多种透明度

+ +
/* 十六进制语法 */
+#3a30                    /*   完全透明的绿色 */ 
+#3A3F                    /* 完全不透明的绿色 */ 
+#33aa3300                /*   完全透明的绿色 */ 
+#33AA3380                /*  50%不透明的绿色 */ 
+
+/* 函数语法 */
+rgba(51, 170, 51, .1)    /*  10%不透明的绿色 */ 
+rgba(51, 170, 51, .4)    /*  40%不透明的绿色 */ 
+rgba(51, 170, 51, .7)    /*  70%不透明的绿色 */ 
+rgba(51, 170, 51,  1)    /* 完全不透明的绿色 */ 
+
+/* 空格语法 */
+rgba(51 170 51 / 0.4)    /*  40%不透明的绿色 */ 
+rgba(51 170 51 / 40%)    /*  40%不透明的绿色 */ 
+
+/* 带有浮点值的函数语法 */
+rgba(255, 0, 153.6, 1)
+rgba(1e2, .5e1, .5e0, +.25e2%)
+ +

HSL的多种语法

+ +
/* 以下示例都表示同一颜色：a lavender */
+hsl(270,60%,70%)
+hsl(270, 60%, 70%)
+hsl(270 60% 70%)
+hsl(270deg, 60%, 70%)
+hsl(4.71239rad, 60%, 70%)
+hsl(.75turn, 60%, 70%)
+
+/* 以下示例都表示同一颜色：a lavender that is 15% opaque. */
+hsl(270, 60%, 50%, .15)
+hsl(270, 60%, 50%, 15%)
+hsl(270 60% 50% / .15)
+hsl(270 60% 50% / 15%)
+
+ +

完全饱和颜色

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
符号描述展示
hsl(0, 100%, 50%)红色
hsl(30, 100%, 50%)橙色
hsl(60, 100%, 50%)黄色
hsl(90, 100%, 50%)黄绿色
hsl(120, 100%, 50%)绿色
hsl(150, 100%, 50%)蓝绿色（青绿色）
hsl(180, 100%, 50%)青色
hsl(210, 100%, 50%)天蓝色
hsl(240, 100%, 50%)蓝色
hsl(270, 100%, 50%)紫色
hsl(300, 100%, 50%)品红色（洋红色）
hsl(330, 100%, 50%)粉红色
hsl(360, 100%, 50%)红色
+ +

不同明暗度的绿色

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
符号描述展示
hsl(120, 100%, 0%)黑色
hsl(120, 100%, 20%)
hsl(120, 100%, 40%)
hsl(120, 100%, 60%)
hsl(120, 100%, 80%)
hsl(120, 100%, 100%)白色
+ +

饱和的和不饱和的绿色

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
符号描述展示
hsl(120, 100%, 50%)绿色
hsl(120, 80%, 50%)
hsl(120, 60%, 50%)
hsl(120, 40%, 50%)
hsl(120, 20%, 50%)
hsl(120, 0%, 50%)灰色
+ +

HSL不同的透明度

+ +
hsla(240, 100%, 50%, .05)     /*   5% opaque blue */ 
+hsla(240, 100%, 50%, .4)      /*  40% opaque blue */ 
+hsla(240, 100%, 50%, .7)      /*  70% opaque blue */ 
+hsla(240, 100%, 50%, 1)       /* full opaque blue */ 
+
+/* Whitespace syntax */
+hsla(240 100% 50% / .05)      /*   5% opaque blue */ 
+
+/* Percentage value for alpha */
+hsla(240 100% 50% / 5%)       /*   5% opaque blue */
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Colors', '#changes-from-3')}}{{Spec2('CSS4 Colors')}}Adds rebeccapurple, four- (#RGBA) and eight-digit (#RRGGBBAA) hexadecimal notations, rgba() and hsla() as aliases of rgb() and hsl() (both with identical parameter syntax), space-separated function parameters as an alternative to commas, percentages for alpha values, and angles for the hue component in hsl() colors.
{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}{{Spec2('CSS3 Colors')}}Deprecates system colors. Adds SVG colors and rgba(), hsl(), and hsla() functional notations.
{{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}}{{Spec2('CSS2.1')}}Adds the orange keyword and system colors.
{{SpecName('CSS1', '#color-units', '<color>')}}{{Spec2('CSS1')}}Initial definition. Includes 16 basic color keywords.
+ +

浏览器兼容性

+ + + +

{{Compat("css.types.color")}}

+ +

参见

+ +
    +
  • The {{ Cssxref("opacity") }} property, allowing to define the transparency of color at the element level.
    • +
  • The {{ Cssxref("color") }}, {{ Cssxref("background-color") }}, {{ Cssxref("border-color") }}, {{ Cssxref("outline-color") }}, {{ Cssxref("text-shadow") }}, {{ Cssxref("box-shadow") }} properties.
    • +
  • CSS Reference index
    • +
diff --git a/files/zh-cn/web/css/column-count/index.html b/files/zh-cn/web/css/column-count/index.html new file mode 100644 index 0000000000..76d558975a --- /dev/null +++ b/files/zh-cn/web/css/column-count/index.html @@ -0,0 +1,138 @@ +--- +title: column-count +slug: Web/CSS/column-count +tags: + - CSS3 Multiple column layout + - CSS3多列布局 +translation_of: Web/CSS/column-count +--- +
{{CSSRef}}
+ +
 
+ +

column-count CSS属性，描述元素的列数。

+ +
column-count: 3;
+column-count: auto;
+
+column-count: inherit;
+column-count: initial;
+column-count: unset;
+ +

语法

+ +

{{cssinfo}}

+ +

取值

+ +
+
auto
+
用来表示列的数量由其他CSS属性指定, 例如 {{cssxref("column-width")}}.
+
<number>
+
是个严格的正数 {{cssxref("<integer>")}} ，用来描述元素内容被划分的理想列数. 假如 {{cssxref("column-width")}}也被设置为非零值, 此参数仅表示所允许的最大列数. 
+
+ +

例子

+ +
.content-box {
+  border: 10px solid #000000;
+  column-count:3;
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Multicol', '#column-count', 'column-count')}}{{Spec2('CSS3 Multicol')}} 
+ +

 

+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix('-webkit')}}{{compatGeckoDesktop("1.8")}}{{property_prefix('-moz')}}1011.13.0 (522){{property_prefix('-webkit')}}
on display: table-caption{{CompatVersionUnknown}}{{compatGeckoDesktop("37")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{compatGeckoMobile("1.8")}}{{property_prefix('-moz')}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
on display: table-caption{{CompatVersionUnknown}}{{compatGeckoMobile("37")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+ +

 

+ +

了解更多

+ +

https://www.w3.org/TR/css3-multicol/

+ +

https://caniuse.com/#search=column

+ +

 

+
diff --git a/files/zh-cn/web/css/column-fill/index.html b/files/zh-cn/web/css/column-fill/index.html new file mode 100644 index 0000000000..0c858b3e3a --- /dev/null +++ b/files/zh-cn/web/css/column-fill/index.html @@ -0,0 +1,114 @@ +--- +title: column-fill +slug: Web/CSS/column-fill +translation_of: Web/CSS/column-fill +--- +
{{CSSRef("CSS Multi-columns")}}
+ +

Summary

+ +

The column-fill CSS property controls how contents are partitioned into columns. Contents are either balanced, which means that contents in all columns will have the same height or, when using auto, just take up the room the content needs. 

+ +

{{cssinfo}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("column-fill")}}
+
+ +
column-fill: auto;
+column-fill: balance;
+
+/* Global values */
+column-fill: inherit;
+column-fill: initial;
+column-fill: unset;
+
+ +

Values

+ +
+
auto
+
Is a keyword indicating that columns are filled sequentially.
+
balance
+
Is a keyword indicating that content is equally divided between columns.
+
+ +

Examples

+ +
.content-box {
+  column-count: 4;
+  column-rule: 1px solid black;
+  column-fill: balance;
+  height: 200px;
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Multicol', '#column-fill', 'column-fill')}}{{Spec2('CSS3 Multicol')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatGeckoDesktop("13.0")}}{{property_prefix('-moz')}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("13.0")}}{{property_prefix('-moz')}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/zh-cn/web/css/column-gap/index.html b/files/zh-cn/web/css/column-gap/index.html new file mode 100644 index 0000000000..14d8e10dbd --- /dev/null +++ b/files/zh-cn/web/css/column-gap/index.html @@ -0,0 +1,203 @@ +--- +title: column-gap +slug: Web/CSS/column-gap +translation_of: Web/CSS/column-gap +--- +
{{CSSRef}}
+ +

column-gap 该 CSS 属性用来设置元素列之间的间隔 ({{glossary("gutters","gutter")}}) 大小。

+ +
{{EmbedInteractiveExample("pages/css/column-gap.html")}}
+ +
{{EmbedInteractiveExample("pages/css/grid-column-gap.html")}}
+ + + +

column-gap一开始是 Multi-column 布局 下的特有属性，后来在其他布局中也使用这个属性。如 Box Alignment 中的表述，该属性已经在Multi-column（多列布局）、Flexible Box（弹性盒子）以及 Grid layouts（网格布局）中使用。

+ +
+

CSS Grid Layout 起初是用 grid-gap 属性来定义的，目前逐渐被 gap 替代。但是，为了兼容那些不支持 gap 属性的浏览器，你需要像上面的例子一样使用带有前缀的属性。

+
+ +

语法

+ +
/* Keyword value */
+column-gap: normal;
+
+/* <length> values */
+column-gap: 3px;
+column-gap: 2.5em;
+
+/* <percentage> value */
+column-gap: 3%;
+
+/* Global values */
+column-gap: inherit;
+column-gap: initial;
+column-gap: unset;
+ +

 column-gap 属性有以下值来表示。

+ +

取值

+ +

normal

+ +
+
表示列之间的间隔宽度。在 多列布局 时默认间隔为1em，其他类型布局默认间隔为 0。
+
{{cssxref("<length>")}}
+
用{{cssxref("<length>")}}来定义列之间的间隔大小。而且 {{cssxref("<length>")}} 值必须是非负数的。
+
{{cssxref("<percentage>")}}
+
用{{cssxref("<percentage>")}}（百分比）来定义列之间的间隔大小。同样的，{{cssxref("<percentage>")}} 值也必须是非负数的。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

Flex布局

+ +

{{SeeCompatTable}}

+ +

HTML

+ +
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+ +

CSS

+ +
#flexbox {
+  display: flex;
+  height: 100px;
+  column-gap: 20px;
+}
+
+#flexbox > div {
+  background-color: lime;
+  flex: auto;
+}
+
+ +

结果

+ +

{{EmbedLiveSample('Flex布局', "auto", "120px")}}

+ +

Grid布局

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ + + +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px;
+  column-gap: 20px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("Grid布局", "auto", "120px")}}

+ +

Multi-column布局

+ +

HTML

+ +
<p class="content-box">
+  This is some multi-column text with a 40px column
+  gap created with the CSS `column-gap` property.
+  Don't you think that's fun and exciting? I sure do!
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 3;
+  column-gap: 40px;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("Multi-column布局", "auto", "120px")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS3 Box Alignment", "#column-row-gap", "column-gap")}}{{Spec2("CSS3 Box Alignment")}}在弹性布局和网格布局中应用
{{SpecName("CSS3 Grid", "#gutters", "column-gap")}}{{Spec2("CSS3 Grid")}}描述在网格布局中的作用
{{SpecName("CSS3 Multicol", "#column-gap", "column-gap")}}{{Spec2("CSS3 Multicol")}}初始化定义
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

在 Flex 布局中的兼容性

+ +

{{Compat("css.properties.column-gap.flex_context")}}

+ +

在 Grid 布局中的兼容性

+ +

{{Compat("css.properties.column-gap.grid_context")}}

+ +

在 Multi-column 布局中的兼容性

+ +

{{Compat("css.properties.column-gap.multicol_context")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/column-rule-color/index.html b/files/zh-cn/web/css/column-rule-color/index.html new file mode 100644 index 0000000000..99109bb9ae --- /dev/null +++ b/files/zh-cn/web/css/column-rule-color/index.html @@ -0,0 +1,107 @@ +--- +title: column-rule-color +slug: Web/CSS/column-rule-color +translation_of: Web/CSS/column-rule-color +--- +
{{CSSRef("CSS Multi-columns")}}
+ +

Summary

+ +

CSS 特性 column-rule-color 让你可以设置在多列布局中被画在两列之间的规则（线条）的颜色。

+ +

{{cssinfo}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("column-rule-color")}}
+
+ +
column-rule-color: red;
+column-rule-color: rgb(192, 56, 78);
+column-rule-color: transparent;
+column-rule-color: hsla(0, 100%, 50%, 0.6);
+
+column-rule-color: inherit;
+ +

Values

+ +
+
<color>
+
Is a {{cssxref("<color>")}} value representing the color of the rule separating columns.
+
+ +

Example

+ +
#header { column-rule-color: blue; }
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Multicol', '#crc', 'column-rule-color')}}{{Spec2('CSS3 Multicol')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix('-webkit')}}3.5 (1.9.1){{property_prefix('-moz')}}1011.13.0 (522){{property_prefix('-webkit')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/zh-cn/web/css/column-rule-style/index.html b/files/zh-cn/web/css/column-rule-style/index.html new file mode 100644 index 0000000000..6b14a9ba93 --- /dev/null +++ b/files/zh-cn/web/css/column-rule-style/index.html @@ -0,0 +1,110 @@ +--- +title: column-rule-style +slug: Web/CSS/column-rule-style +translation_of: Web/CSS/column-rule-style +--- +

{{ CSSRef("CSS Multi-columns") }}

+ +

Summary

+ +

CSS 特性 column-rule-color 让你可以设置在多列布局中被画在两列之间的规则（线条）的样式。

+ +

{{cssinfo}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("column-rule-style")}}
+
+ +
column-rule-style: none;
+column-rule-style: hidden;
+column-rule-style: dotted;
+column-rule-style: dashed;
+column-rule-style: solid;
+column-rule-style: double;
+column-rule-style: groove;
+column-rule-style: ridge;
+column-rule-style: inset;
+column-rule-style: outset;
+
+column-rule-style: inherit;
+ +

Values

+ +
+
<br-style> 
+
Is a keyword defined by {{ cssxref("border-style") }} describing the style of the rule. The styling must be interpreted as in the collapsing border model.
+
+ +

Example

+ +
#header {-moz-column-rule-style: inset;}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Multicol', '#crs', 'column-rule-style') }}{{ Spec2('CSS3 Multicol') }} 
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}3.5 (1.9.1){{ property_prefix('-moz') }}1011.13.0 (522){{ property_prefix('-webkit') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/zh-cn/web/css/column-rule-width/index.html b/files/zh-cn/web/css/column-rule-width/index.html new file mode 100644 index 0000000000..ae3e1cd669 --- /dev/null +++ b/files/zh-cn/web/css/column-rule-width/index.html @@ -0,0 +1,109 @@ +--- +title: column-rule-width +slug: Web/CSS/column-rule-width +translation_of: Web/CSS/column-rule-width +--- +

{{ CSSRef("CSS Multi-columns") }}

+ +

Summary

+ +

CSS 特性 column-rule-width 让你可以设置在多列布局中被画在两列之间的规则（线条）的宽度。

+ +

{{cssinfo}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("column-rule-width")}}
+
+ +
/* Keyword values */
+column-rule-width: thin;
+column-rule-width: medium;
+column-rule-width: thick;
+
+/* Length values */
+column-rule-width: 1px;
+column-rule-width: 2.5em;
+
+column-rule-width: inherit;
+ +

Values

+ +
+
<br-width> 
+
Is a {{cssxref("<length>")}} or one of the thin, medium or thick keyword describing the width of the rule separating two columns.
+
+ +

Example

+ +
#header {column-rule-width: thick;}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Multicol', '#crw', 'column-rule-width') }}{{ Spec2('CSS3 Multicol') }}
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}3.5 (1.9.1){{ property_prefix('-moz') }}1011.13.0 (522){{ property_prefix('-webkit') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/zh-cn/web/css/column-rule/index.html b/files/zh-cn/web/css/column-rule/index.html new file mode 100644 index 0000000000..be4a2b55d9 --- /dev/null +++ b/files/zh-cn/web/css/column-rule/index.html @@ -0,0 +1,125 @@ +--- +title: column-rule +slug: Web/CSS/column-rule +tags: + - CSS + - CSS 多列布局 + - CSS 属性 +translation_of: Web/CSS/column-rule +--- +
{{CSSRef("CSS Multi-columns")}}
+ +
{{EmbedInteractiveExample("pages/css/column-rule.html")}}
+ +

概述

+ +

在多列布局中，column-rule 属性规定了列与列之间的直线，也称“规则”。该简写可以避免单独设置各个 column-rule-* 属性：{{Cssxref("column-rule-width")}}，{{Cssxref("column-rule-style")}} 和 {{Cssxref("column-rule-color")}}。

+ +

{{cssinfo}}

+ +

语法

+ +
Formal syntax: {{csssyntax("column-rule")}}
+
+ +
column-rule: dotted;
+column-rule: solid blue;
+column-rule: solid 8px;
+column-rule: thick inset blue;
+
+ +

取值

+ +

column-rule 属性可以按任何顺序指定为下面列出的一个，两个或三个值。

+ +
+
<'column-rule-width'> 
+
定义为 {{cssxref("<length>")}} 或是 thin，medium，thick 关键字的其中一个。请参阅 {{cssxref("border-width")}} 。
+
<'column-rule-style'>
+
请参阅 {{cssxref("border-style")}}。
+
<'column-rule-color'>
+
一个 {{cssxref("<color>")}} 值。
+
+ +

示例

+ +
p.foo { column-rule: dotted; }          /* 与 "medium dotted currentColor" 相同 */
+p.bar { column-rule: solid blue; }      /* 与 "medium solid blue" 相同 */
+p.baz { column-rule: solid 8px; }       /* 与 "8px solid currentColor" 相同 */
+p.abc { column-rule: thick inset blue; }
+
+ +

运行实例

+ +
+

padding:0.3em; background:gold; border:groove 2px gold; column-rule: inset 2px gold; column-width:17em;

+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName('CSS3 Multicol', '#column-rule', 'column-rule')}}{{Spec2('CSS3 Multicol')}}
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix('-webkit')}}3.5 (1.9.1){{property_prefix('-moz')}}1011.13.0 (522){{property_prefix('-webkit')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/zh-cn/web/css/column-span/index.html b/files/zh-cn/web/css/column-span/index.html new file mode 100644 index 0000000000..1f24023c88 --- /dev/null +++ b/files/zh-cn/web/css/column-span/index.html @@ -0,0 +1,136 @@ +--- +title: column-span +slug: Web/CSS/column-span +translation_of: Web/CSS/column-span +--- +
{{ CSSRef("CSS Multi-columns") }}
+ +

概述

+ +

CSS 属性column-span 的值被设置为all时，可以让一个元素跨越所有的列。一个跨越多列的元素被称为spanning element。

+ +

{{cssinfo}}

+ +

语法

+ +
Formal syntax: {{csssyntax("column-span")}}
+
+ +
column-span: none;
+column-span: all;
+
+column-span: inherit;
+
+ +

取值

+ +
+
none
+
元素不跨多个列。
+
all
+
元素横跨所有列。元素出现之前，出现在元素之前的正常流中的内容在所有列之间自动平衡。该元素建立一个新的块格式上下文。
+
+ +

例子

+ +

下例中的 h2 元素横跨 article 元素中的各列

+ +

 

+ +

HTML

+ +
<article>
+  <h2>My Very Special Columns</h2>
+  <p>This is a bunch of text split into three columns
+     using the CSS `columns` property. The text
+     is equally distributed over the columns.</p>
+</article>
+
+ +

CSS

+ +
article {
+  columns: 3;
+}
+
+h2 {
+  column-span: all;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Example', 'auto', 120)}}

+ +

 

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Multicol', '#column-span0', 'column-width') }}{{ Spec2('CSS3 Multicol') }} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}{{ CompatNo() }}1011.1+{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}{{ CompatNo() }}{{ CompatUnknown() }}11.1+{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}
+
diff --git a/files/zh-cn/web/css/column_combinator/index.html b/files/zh-cn/web/css/column_combinator/index.html new file mode 100644 index 0000000000..1f665103f0 --- /dev/null +++ b/files/zh-cn/web/css/column_combinator/index.html @@ -0,0 +1,99 @@ +--- +title: Column combinator +slug: Web/CSS/Column_combinator +tags: + - CSS + - 参考 + - 合并器 + - 表格 + - 试验 + - 选择器 + - 需要浏览器的兼容性 +translation_of: Web/CSS/Column_combinator +--- +
{{CSSRef("Selectors")}}{{Draft}}{{SeeCompatTable}}
+ +

通过列合并符 (||)链接两个元素时, 它只会匹配被第二个CSS选择器匹配的元素,且此元素属于被第一个CSS选择器匹配的列元素.

+ +
/* 属于"被选择"列的表单元格 */
+col.selected || td {
+  background: gray;
+}
+
+ +

语法

+ +
column-selector || cell-selector {
+  /* style properties */
+}
+ +

示例

+ +

HTML

+ +
<table border="1">
+  <colgroup>
+    <col span="2"/>
+    <col class="selected"/>
+  </colgroup>
+  <tbody>
+    <tr>
+      <td>A
+      <td>B
+      <td>C
+    </tr>
+    <tr>
+      <td colspan="2">D</td>
+      <td>E</td>
+    </tr>
+    <tr>
+      <td>F</td>
+      <td colspan="2">G</td>
+    </tr>
+  </tbody>
+</table>
+ +

CSS

+ +
col.selected || td {
+  background: gray;
+  color: white;
+  font-weight: bold;
+}
+ +

结果

+ +

{{EmbedLiveSample("Examples", "100%")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态评论补充
{{SpecName("CSS4 Selectors", "#the-column-combinator", "column combinator")}}{{Spec2("CSS4 Selectors")}}最初的定义.
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.column")}}

+ +

相关

+ +
    +
  • {{HTMLElement("col")}}
    • +
  • {{HTMLElement("colgroup")}}
    • +
  • {{CSSxRef("grid")}}
    • +
diff --git a/files/zh-cn/web/css/columns/index.html b/files/zh-cn/web/css/columns/index.html new file mode 100644 index 0000000000..ad3e0f8c41 --- /dev/null +++ b/files/zh-cn/web/css/columns/index.html @@ -0,0 +1,96 @@ +--- +title: columns +slug: Web/CSS/columns +translation_of: Web/CSS/columns +--- +
{{CSSRef}}
+ +

CSS属性 columns 用来设置元素的列宽和列数。

+ +
{{EmbedInteractiveExample("pages/css/columns.html")}}
+ + + +

它是一个简写属性，可在单个方便的声明中设置 {{cssxref('column-width')}} 和 {{cssxref("column-count")}} 属性。与所有简写属性一样，任何省略的子值都将设置为其初始值。

+ +

语法

+ +
/* Column width */
+columns: 18em;
+
+/* Column count */
+columns: auto;
+columns: 2;
+
+/* Both column width and count */
+columns: 2 auto;
+columns: auto 12em;
+columns: auto auto;
+
+/* Global values */
+columns: inherit;
+columns: initial;
+columns: unset;
+ +

columns 属性可以按任何顺序指定为下面列出的一个或两个值。

+ +

取值

+ +
+
<'column-width'>
+
理想的列宽，定义为 {{cssxref("<length>")}} 或 auto 关键字。实际宽度可以更宽或更窄以适合可用空间。See {{cssxref("column-width")}}。
+
<'column-count'>
+
元素内容应分成的理想列数，定义为 {{cssxref("<integer>")}} 或 auto 关键字。如果此值和列的宽度都不是 auto ，则它仅指示允许的最大列数。请参阅 {{cssxref("column-count")}} 。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

例子

+ +

HTML

+ +
<p class="content-box">
+  This is a bunch of text split into three columns
+  using the CSS `columns` property. The text
+  is equally distributed over the columns.
+</p>
+
+ +

CSS

+ +
.content-box {
+  columns: 3 auto;
+}
+ +

Result

+ +

{{EmbedLiveSample('例子', 'auto', 120)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Multicol', '#columns', 'columns')}}{{Spec2('CSS3 Multicol')}}Initial definition.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.columns")}}

diff --git a/files/zh-cn/web/css/comments/index.html b/files/zh-cn/web/css/comments/index.html new file mode 100644 index 0000000000..23514df140 --- /dev/null +++ b/files/zh-cn/web/css/comments/index.html @@ -0,0 +1,54 @@ +--- +title: CSS注释 +slug: Web/CSS/Comments +tags: + - CSS + - 参考 + - 注释 +translation_of: Web/CSS/Comments +--- +
{{CSSRef}}
+ +

CSS 注释用于为代码添加额外的解释，或者用于阻止浏览器解析特定区域内的CSS代码。注释对文档布局没有影响。

+ +

语法

+ +

注释可以写在样式表中任意允许空格的位置。注释可以写成一行，也可以写成多行。

+ +
/* Comment */
+ +

示例

+ +
/* 这是一行单行注释 */
+
+/*
+分为
+几行
+的
+注释
+*/
+
+/* 下面的注释用于禁用特定的样式 */
+
+/*
+span {
+  color: blue;
+  font-size: 1.5em;
+}
+*/
+ +

说明

+ +

 /* */ 风格的注释语法可以用作单行注释，也可以用作多行注释。在外部独立的 CSS 文件中，没有其他声明注释的方法。不过，如果 CSS 代码写在 {{htmlelement("style")}} 标签中，在某些旧版浏览器中你还可以使用 <!-- --> 来注释 CSS 代码，虽然这样做是不推荐的。与其他大部分使用 /* */ 语法进行注释的编程语言一样，注释无法嵌套。也就是说，/* 之后的第一个 */ 记号就会结束注释。

+ +

规范

+ + + +

参见

+ +
    +
  • {{CSS_key_concepts}}
    • +
diff --git a/files/zh-cn/web/css/common_css_questions/index.html b/files/zh-cn/web/css/common_css_questions/index.html new file mode 100644 index 0000000000..0e0593054b --- /dev/null +++ b/files/zh-cn/web/css/common_css_questions/index.html @@ -0,0 +1,183 @@ +--- +title: CSS 常见问题 +slug: Web/CSS/Common_CSS_Questions +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

为什么我有效的CSS没有正确的渲染？

+ +

浏览器使用DOCTYPE声明来选择是否使用更符合Web标准或兼容旧浏览器的bug的模式。在你的HTML的开始使用一个正确的和现代的DOCTYPE声明将改善浏览器标准执行。

+ +

现代浏览器主要有两种渲染模式：

+ +
    +
  • 怪异模式： 又称向后兼容模式,，允许将传统网页渲染为作者意图。 旧浏览器使用的非标准渲染规则。 不完整的、不正确的、缺少DOCTYPE声明或已知的DOCTYPE声明中普遍使用2001年以前的文件将在怪异模式中呈现。
    • +
  • 标准模式：浏览器试图严格遵守W3C标准。新HTML网页有望被设计为符合标准的浏览器，这样做的结果就是，用现代DOCTYPE声明的页面将被用标准模式呈现。
    • +
+ +

基于Gecko的浏览器， 有三分之一 Almost Standards Mode， 只有一些小怪癖。

+ +

这是最常用的触发标准模式或准标准模式的DOCTYPE声明列表：

+ +
<!DOCTYPE html> /* 这一行是 HTML5 的 doctype 声明。，使用该声明会使现代浏览器使用
+                   HTML5 解析器处理页面，这是推荐的 doctype 声明。*/
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+ +

为什么我有效的css完全没有被渲染？ 

+ +

为了使浏览器渲染样式文件，CSS样式表必须用text/css的MIME。如果Web服务器不服务于这种类型，则CSS也不会被应用。

+ +

id和class有什么不同？

+ +

HTML元素可以拥有一个id/或class属性。 id属性为元素指定应用一个有效名称，只能有一个具有该名称的元素。class属性指定一个类名的元素，而这个名称可以被页面内的许多元素被使用。 CSS允许你可以对特定的id和/或类名的元素应用样式。
+
+ 当你想给一个特定元素或块应用样式规则时就使用ID选择符。此样式将只用于与该特定id匹配的元素。

+ +


+ 当你想要将样式规则应用于多个块和元素时，你应该使用class选择符。

+ +

较少样式的样式表通常性能更高。因此建议尽可能多地使用类， 保留id作为特定用途 (比如链接label标签和form元素或者为语义上唯一的元素应用样式)。

+ +

查看 CSS selectors

+ +

我如何还原属性的默认值？

+ +

最初CSS没有提供“defaule”关键字和还原默认属性的值，唯一途径是显式地重新声明该属性。

+ +

与CSS2相比，已经发生了改变。 关键字 initial 现在是一个有效的CSS属性。它将给定的CSS属性值重置为默认值。

+ +

我如何才可以从一个样式中衍生出另一种样式?

+ +

CSS 不允许这样做。(See Eric Meyer's note about the Working Group's stance). 但是，将多个类分配给单个元素，可以提供相同的效果。

+ +

我该如何给一个元素分配多个类？

+ +

HTML元素可以通过列出的类属性，用空格分开它们。

+ +
<style type="text/css">
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... content of today's news ...
+</div>
+
+ +

如果相同的属性中声明的规则，解决冲突首先通过特异性，然后根据CSS声明的顺序。在class属性类的顺序是不相关的。

+ +

为什么我的样式规则不能正确地工作？

+ +

在语法上正确的样式规则可能在某些情况下不适用。你可以使用 DOM Inspector's CSS Style Rules 调试这类问题。 下面列出了最常见的忽略样式规则的实例：

+ +

HTML元素层次结构

+ +

The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.

+ +
.news { color: black; }
+.corpName { font-weight: bold; color: red; }
+
+<!-- news item text is black, but corporate name is red and in bold -->
+<div class="news">
+   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
+</div>
+
+ +

In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.

+ +

显式重定义样式规则

+ +

In CSS stylesheets, order is important. If you define a rule and then you re-define the same rule, the last definition is used.

+ +
#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  other rules             */
+/*  other rules             */
+/*  other rules             */
+.stockSymbol { font-weight: normal; }
+
+<!-- most text is in bold, except "GE", which is red and not bold -->
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.

+ +

使用便捷属性

+ +

Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.

+ +
#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order is important.

+ +
#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana;  /* font-weight is now normal */
+}
+
+ +

使用 * 选择器

+ +

The * wildcard selector refers to any element, and it has to be used with particular care.

+ +
body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+<div id="section">
+   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
+</div>
+
+ +

In this example the body * selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So font-weight: bold; applied to the .corpName class is overridden by font-weight: normal; applied to all elements in the body.

+ +

The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.

+ +

CSS 中的优先级

+ +

When multiples rules apply to a certain element, the rule chosen depends on its style specificity. Inline style (in HTML style attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.

+ +
div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+<div id="orange" class="green" style="color: red;">This is red</div>
+
+ +

The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the CSS 2.1 Specification chapter 6.4.3

+ +

 -moz-*， -ms-*， -webkit-*， -o-* 以及 -khtml-* 属性有什么用？

+ +

These  properties, called prefixed properties, are extension to the CSS standard. They are used to use experimental and non-standard features without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.

+ +

The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolve.

+ +

Please see the Mozilla CSS Extensions page for more information on the Mozilla-prefixed CSS properties.

+ +

z-index 属性与定位有什么关系？

+ +

z-index属性指定了元素的栈序。

+ +

有较高z-index/栈序的元素总是在有着较低z-index/栈序的元素之前。

+ +

z-index只会在有着指定position (position:absolute, position:relative, or position:fixed)的元素上工作。

diff --git a/files/zh-cn/web/css/computed_value/index.html b/files/zh-cn/web/css/computed_value/index.html new file mode 100644 index 0000000000..a281cf0b1d --- /dev/null +++ b/files/zh-cn/web/css/computed_value/index.html @@ -0,0 +1,50 @@ +--- +title: 计算值 +slug: Web/CSS/computed_value +tags: + - CSS + - Reference +translation_of: Web/CSS/computed_value +--- +

{{cssref}}

+ +

一个CSS属性的计算值是指这个属性在由父类转向子类的继承中的值。它通过指定值计算出来：

+ +
    +
  • 处理特殊的值 {{cssxref("inherit")}}，{{cssxref("initial")}}， {{cssxref("unset")}}和 {{cssxref("revert")}}。
    • +
  • 进行计算，以达到属性摘要中“计算值”行中描述的值。
    • +
+ +

计算值所需要的计算通常包括将相对值转换成绝对值(如 em 单位或百分比)。例如，如一个元素的属性值为 font-size:16px 和 padding-top:2em, 则 padding-top 的计算值为 32px (字体大小的2倍).

+ +

然而，对于有些属性(这些元素的百分比与需要布局确定后才能知道的值有关，如 width, margin-right, text-indent, 和 top)，它们的“百分比值”会转换成“百分比的计算值”。另外，line-height 属性值如是没有单位的数字，则该值就是其计算值。这些计算值中的相对值会在 应用值 确定后转换成绝对值。

+ +
+

注意：{{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API 返回 resolved value, 可能是 computed value 或 used value其中的一个，取决于属性。

+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范版本评论
{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}{{Spec2("CSS2.1")}}初始规范
+ +

相关

+ +
    +
  • {{domxref("window.getComputedStyle")}}
    • +
  • {{CSS_key_concepts}}
    • +
diff --git a/files/zh-cn/web/css/contain/index.html b/files/zh-cn/web/css/contain/index.html new file mode 100644 index 0000000000..d092cc764c --- /dev/null +++ b/files/zh-cn/web/css/contain/index.html @@ -0,0 +1,216 @@ +--- +title: contain +slug: Web/CSS/contain +tags: + - CSS + - CSS Containment + - CSS 属性 + - Style + - Web + - 参考 + - 布局 + - 样式 + - 渲染 +translation_of: Web/CSS/contain +--- +
{{CSSRef}}
+ +

CSS contain 属性允许开发者声明当前元素和它的内容尽可能的独立于 DOM 树的其他部分。这使得浏览器在重新计算布局、样式、绘图、大小或这四项的组合时，只影响到有限的 DOM 区域，而不是整个页面，可以有效改善性能。

+ +

这个属性在包含大量独立组件的页面非常实用，它可以防止某个小部件的 CSS 规则改变对页面上的其他东西造成影响。

+ +
+

Note: If applied (with value: paint, strict or content), this property creates:

+ +
    +
  1. A new containing block (for the descendants whose {{cssxref("position")}} property is absolute or fixed).
    2. +
  2. A new stacking context.
    3. +
  3. A new block formatting context.
    4. +
+
+ +

语法

+ +
/* 关键词值 */
+contain: none;
+
+/* 等价于 contain: layout style paint size */
+contain: strict;
+
+/* 等价于 contain: layout style paint */
+contain: content;
+
+contain: size;
+contain: layout;
+contain: style;
+contain: paint;
+
+/* 支持指定多个关键词 */
+contain: size paint;
+contain: size layout paint;
+
+/* 全局值 */
+contain: inherit;
+contain: initial;
+contain: unset;
+ +

The contain property is specified as either one of the following:

+ +
    +
  • Using a single none, strict, or content keyword.
    • +
  • Using one or more of the size, layout, style, and paint keywords in any order.
    • +
+ +

属性值

+ +
+
none
+
表示元素将正常渲染，没有包含规则。
+
strict
+
表示除了 style 外的所有的包含规则应用于这个元素。等价于 contain: size layout paint。
+
content
+
表示这个元素上有除了 size 和 style 外的所有包含规则。等价于 contain: layout paint。
+
size
+
表示这个元素的尺寸计算不依赖于它的子孙元素的尺寸。
+
layout
+
表示元素外部无法影响元素内部的布局，反之亦然。
+
style
+
表示那些同时会影响这个元素和其子孙元素的属性，都在这个元素的包含范围内。
+ Indicates that, for properties that can have effects on more than just an element and its descendants, those effects don't escape the containing element. Note that this value is marked "at-risk" in the spec and may not be supported everywhere.
+
paint
+
表示这个元素的子孙节点不会在它边缘外显示。如果一个元素在视窗外或因其他原因导致不可见，则同样保证它的子孙节点不会被显示。
+ Indicates that descendants of the element don't display outside its bounds. If the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box. And if a descendant overflows the containing element's bounds, then that descendant will be clipped to the containing element's border-box.
+
+ +

正式定义

+ +

{{cssinfo}}

+ +

形式化语法

+ +
{{csssyntax}}
+ +

示例

+ +

简单布局

+ +

The markup below consists of a number of articles, each with content:

+ +
<h1>My blog</h1>
+<article>
+  <h2>Heading of a nice article</h2>
+  <p>Content here.</p>
+</article>
+<article>
+  <h2>Another heading of another article</h2>
+  <img src="graphic.jpg" alt="photo">
+  <p>More content here.</p>
+</article>
+ +

Each <article> and <img> is given a border, and the images are floated:

+ +
img {
+  float: left;
+  border: 3px solid black;
+}
+
+article {
+  border: 1px solid black;
+}
+ +

{{EmbedLiveSample('Simple_layout', '100%', '300')}}

+ +

浮动干涉

+ +

If we were to insert another image at the bottom of the first article, a large portion of the DOM tree may be re-laid out or repainted, and this would also interfere with the layout of the second article:

+ +
<h1>My blog</h1>
+<article>
+  <h2>Heading of a nice article</h2>
+  <p>Content here.</p>
+  <img src="i-just-showed-up.jpg" alt="social">
+</article>
+<article>
+  <h2>Another heading of another article</h2>
+  <img src="graphic.jpg" alt="photo">
+  <p>More content here.</p>
+</article>
+ + + +

As you can see, because of the way floats work, the first image ends up inside the area of the second article:

+ +

{{EmbedLiveSample('Float_interference', '100%', '300')}}

+ +

Fixing with contain

+ +

If we give each article the contain property with a value of content, when new elements are inserted the browser understands it only needs to recalculate the containing element's subtree, and not anything outside it:

+ + + +
img {
+  float: left;
+  border: 3px solid black;
+}
+
+article {
+  border: 1px solid black;
+  contain: content;
+}
+ +

This also means that the first image no longer floats down to the second article, and instead stays inside it's containing element's bounds:

+ +

{{EmbedLiveSample('Fixing_with_contain', '100%', '330')}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS Containment 2', '#contain-property', 'contain')}}{{Spec2('CSS Containment')}}Added style keyword
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.contain")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/content/index.html b/files/zh-cn/web/css/content/index.html new file mode 100644 index 0000000000..c36142fc76 --- /dev/null +++ b/files/zh-cn/web/css/content/index.html @@ -0,0 +1,294 @@ +--- +title: content +slug: Web/CSS/content +tags: + - CSS 属性 + - Generated Content + - 生成内容 +translation_of: Web/CSS/content +--- +

{{ CSSRef() }}

+ +

概要

+ +

CSS的 content CSS 属性用于在元素的  {{ cssxref("::before") }} 和 {{ cssxref("::after") }} 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。

+ +

{{cssinfo}}

+ +

语法

+ +
Formal syntax: {{csssyntax("content")}}
+
+ +
content: normal                                /* Keywords that cannot be combined with other values */
+content: none
+
+content: 'prefix'                              /* <string> value, non-latin characters must be encoded e.g. \00A0 for &nbsp; */
+content: url(http://www.example.com/test.html) /* <uri> value */
+content: chapter_counter                       /* <counter> values */
+content: attr(value string)                    /* attr() value linked to the HTML attribute value */
+content: open-quote                            /* Language- and position-dependant keywords */
+content: close-quote
+content: no-open-quote
+content: no-close-quote
+
+content: open-quote chapter_counter            /* Except for normal and none, several values can be used simultaneously */
+
+content: inherit
+
+ +

值

+ +
+
none
+
不会产生伪类元素
+
normal
+
 :before 和 :after 伪类元素中会被视为 none
+
<string>
+
文本内容
+
<uri> url()
+
URI值会指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位（比如无图片标志）。
+
<counter>
+
计数器可以指定两种不同的函数：counter() 或 counters()。前面一个有两种形式：counter(name) 或 counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数；格式由style指定（默认是'decimal'——十进制数字）。后一个函数同样也有两种形式：counters(name,string) 或 counters(name,string,style) 。The generated text is the value of all counters with the given name in scope at this pseudo-element, from outermost to innermost separated by the specified string. The counters are rendered in the indicated style ('decimal' by default). See the section on automatic counters and numbering for more information. The name must not be 'none', 'inherit' or 'initial'. Such a name causes the declaration to be ignored.
+
attr(X)
+
将元素的X属性以字符串形式返回。如果该元素没有 X 属性，则返回一个空字符串。区分大小写的属性返回值依赖文挡的语言设定。
+
open-quote | close-quote
+
这些值会被 {{ cssxref("quotes") }} 中定义的字符串替换。
+
no-open-quote | no-close-quote
+
不会生产任何内容，但是会改变（增加或降低）引号层级。
+
+ +

示例

+ +

代码举例 - 标题和引号

+ +

HTML 

+ +
<h1>5</h1>
+<p> We shall start this with a quote from Sir Tim Berners-Lee,
+    <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">
+        I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.</q>  We must understand that there is nothing fundamentally wrong with building on the contributions of others.
+</p>
+
+<h1>6</h1>
+<p> Here we shall quote the Mozilla Manifesto,
+    <q cite="http://www.mozilla.org/en-US/about/manifesto/">
+        Individuals must have the ability to shape the Internet and their own experiences on the Internet.</q> And so, we can infer that contributing to the open web, can protect our own individual experiences on it.
+</p>
+ +

CSS 

+ +
q {
+    color: #00008B;
+    font-style: italic;
+}
+
+q::before   { content: open-quote }
+q::after    { content: close-quote }
+
+h1::before  { content: "Chapter "; }
+ +

输出

+ +

{{ EmbedLiveSample('代码举例_-_标题和引号', 460, 100) }}

+ +

代码举例 - link前面加一个icon

+ +

HTML 

+ +
<a href="http://www.mozilla.org/en-US/">Home Page</a>
+ +

CSS 

+ +
a::before{
+    content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: ";
+    font:    x-small Arial,freeSans,sans-serif;
+    color:   gray;
+}
+ +

输出

+ +

{{ EmbedLiveSample('代码举例_-_link前面加一个icon', 200, 60) }}

+ +

代码举例 - 自定义列表后面加加文字

+ +

HTML 

+ +
<div>
+  <ul class="brightIdea">
+    <li>This is my first idea</li>
+    <li>and another good idea</li>
+  </ul>
+</div>
+ +

CSS 

+ +
/* first import the icon from a suitable site */
+@import url(http://weloveiconfonts.com/api/?family=entypo);
+
+.brightIdea li::after{
+    content: '\1f4a1';
+    font-family: 'entypo', sans-serif;
+}
+ +

输出

+ +

{{EmbedLiveSample('代码举例_-_自定义列表后面加加文字', 300, 100)}}

+ +

Code sample - class based example

+ +

HTML Content

+ +
<h2>Paperback best sellers</h2>
+<ol>
+    <li>Political thriller</li>
+    <li class="newEntry">Halloween Stories</li>
+    <li>My Biography</li>
+    <li class="newEntry">Vampire Romance</li>
+</ol>
+ +

CSS Content

+ +
/* use a class rather that an element selector to give more flexibility.
+Simple string example, but don't forget add a leading space in the text string
+for spacing purposes  */
+
+.newEntry::after {
+    content: " New!";
+    color: red;
+}
+ +

Output

+ +

{{ EmbedLiveSample('Code_sample_-_class_based_example', 300, 200) }}

+ +

Code sample - rich link styling

+ +

HTML Content

+ +
<ul>
+    <li><a id="moz" href="http://www.mozilla.org/">
+        Mozilla Home Page</a></li>
+    <li><a id="mdn" href="https://developer.mozilla.org/">
+        Mozilla Developer Network</a></li>
+    <li><a id="w3c" href="http://www.w3c.org/">
+        World Wide Web Consortium</a></li>
+</ul>
+ +

CSS Content

+ +
a {
+    text-decoration: none;
+    border-bottom: 3px dotted navy;
+}
+
+a::after {
+    content: " (" attr(id) ")";
+}
+
+#moz::before {
+    content:url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico) ;
+}
+
+#mdn::before {
+    content:url(https://mdn.mozillademos.org/files/7691/mdn-favicon16.png) ;
+}
+
+#w3c::before {
+    content:url(http://w3c.org/2008/site/images/favicon.ico) ;
+}
+
+li {
+    margin: 1em;
+}
+
+
+ +

Output

+ +

{{ EmbedLiveSample('Code_sample_-_rich_link_styling', 340, 200) }}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS2.1', 'generate.html#content', 'content') }}{{ Spec2('CSS2.1') }} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1") }}8.04.01.0
url() support1.0{{ CompatGeckoDesktop("1") }}8.07.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1.0") }}8.09.51.0
+
+ +

 

+ +

参考

+ +
    +
  • {{ Cssxref("::after") }}, {{ Cssxref("::before") }}, {{ Cssxref("quotes") }}
    • +
diff --git a/files/zh-cn/web/css/counter()/index.html b/files/zh-cn/web/css/counter()/index.html new file mode 100644 index 0000000000..d45b73b366 --- /dev/null +++ b/files/zh-cn/web/css/counter()/index.html @@ -0,0 +1,145 @@ +--- +title: counter() +slug: Web/CSS/counter() +tags: + - CSS + - CSS函数 + - CSS计数器 +translation_of: Web/CSS/counter() +--- +
{{CSSRef}}
+ +
CSS 函数 counter()，返回一个代表计数器的当前值的字符串。它通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用。
+ +
/* 简单使用 */
+counter(计数器名称);
+
+/* 更改计数器显示 */
+counter(countername, upper-roman)
+ +

一个计数器本身没有可见的效果，而是通过counter()函数（和counters()函数）返回开发人员定义的字符串（或图像） 从而使计数器拥有很棒的作用。

+ +
+

注释：counter()函数可以与任何CSS属性一起使用，但是对"content"以外的属性的支持是试验性的，对type-or-unit参数的支持很少。

+ +

在使用此功能之前，请仔细检查浏览器兼容性表。

+
+ +

语法

+ +

值

+ +
+
<custom-ident> 自定义标识
+
一个标识计数器的名称，区分大小写，并且与{{cssxref("counter-reset")}}和{{cssxref("counter-increment")}}中的“名称”相同。名称不能以两个破折号开头，并且不能为none, unset, initial, 或 inherit。
+
<counter-style> 计数器样式
+
计数器样式名称或 symbols() 函数，其中计数器样式名称是数字，字母或符号的简单预定义计数器样式，复杂的东亚或埃塞俄比亚长手预定义计数器样式，或其他预定义计数器样式。如果省略，则计数器样式默认为十进制。
+
+ +

正式语法

+ +
counter( <custom-ident>, <counter-style>? )
+
+where
+<counter-style> = <counter-style-name> | symbols()
+
+where
+<counter-style-name> = <custom-ident>
+ +

示例

+ + +

default value compared to upper Roman

+ +

HTML

+ +
<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::after {
+  content: "[" counter(listCounter) "] == ["
+               counter(listCounter, upper-roman) "]";
+}
+ +

结果

+ +

{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}

+ +

decimal-leading-zero compared to lower-alpha

+ +

HTML

+ +
<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: count;
+}
+li {
+  counter-increment: count;
+}
+li::after {
+  content: "[" counter(count, decimal-leading-zero) "] == ["
+               counter(count, lower-alpha) "]";
+}
+ +

结果

+ +

{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
Specification状态注释
{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}{{Spec2("CSS3 Lists")}}No change
{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}{{Spec2("CSS2.1")}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.types.counter")}}

+ +

另请参阅

+ +
    +
  • 使用CSS计数器
    • +
  • {{cssxref("counter-reset")}}
    • +
  • {{cssxref("counter-set")}}
    • +
  • {{cssxref("counter-increment")}}
    • +
  • {{cssxref("@counter-style")}}
    • +
  • CSS counters() 函数
    • +
diff --git a/files/zh-cn/web/css/counter-increment/index.html b/files/zh-cn/web/css/counter-increment/index.html new file mode 100644 index 0000000000..379db61b69 --- /dev/null +++ b/files/zh-cn/web/css/counter-increment/index.html @@ -0,0 +1,141 @@ +--- +title: counter-increment +slug: Web/CSS/counter-increment +translation_of: Web/CSS/counter-increment +--- +
{{CSSRef}}
+ +

概要

+ +

counter-increment属性用于将CSS Counters的值增加给定值。可以使用 {{cssxref("counter-reset")}} 属性重置计数器的值。

+ +

{{cssinfo}}

+ +

语法

+ +
/* Increment counter-name by 1 */
+counter-increment: counter-name;
+
+/* Decrement counter-name by 1 */
+counter-increment: counter-name -1;
+
+/* Increment counter1 by 1, and decrement counter2 by 4 */
+counter-increment: counter 1 counter2 -4;
+
+/* Do not increment/decrement anything: used to hide less specific values */
+counter-increment: none;
+
+/* Global values */
+counter-increment: inherit;
+counter-increment: initial;
+counter-increment: unset;
+
+ +

可选值

+ +
+
{{cssxref("custom-ident", "<custom-ident>")}}
+
递增的计数器的名称。该标识符由不区分大小写的字母a到z，数字0到9，下划线（_）和/或短划线（ - ）的组合组成。第一个非破折号字符必须是一个字母（即，在它的开头没有数字，即使前面有破折号。）此外，在标识符的开头禁止使用两个破折号。在任何案例组合中都不能是none，unset，initial或inherit。
+
{{cssxref("<integer>")}}
+
计数器的值。如果没有给出，默认为1。
+
none
+
不得增加计数器。用作默认值，或取消更具体规则的增量。
+
+ + + +

你可以根据需要指定要递增的计数器，每个计数器用空格分隔。

+ +

语法形式

+ +
{{csssyntax}}
+
+ +

示例

+ +
h1 {
+  counter-increment: chapter section 2 page;
+  /* Increases the value of the chapter and page counters by 1
+     and the section counter by 2. */
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Lists', '#counter-increment', 'counter-increment') }}{{ Spec2('CSS3 Lists') }}No change.
{{SpecName('CSS2.1', 'generate.html#propdef-counter-increment', 'counter-increment')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support2.01.0 (?)8.09.23.0 (?)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

参考

+ + diff --git a/files/zh-cn/web/css/counter-reset/index.html b/files/zh-cn/web/css/counter-reset/index.html new file mode 100644 index 0000000000..e670bedf30 --- /dev/null +++ b/files/zh-cn/web/css/counter-reset/index.html @@ -0,0 +1,116 @@ +--- +title: counter-reset +slug: Web/CSS/counter-reset +translation_of: Web/CSS/counter-reset +--- +
{{CSSRef}}
+ +


+ counter-reset 属性用于将 CSS计数器 重置为制定值

+ +

{{EmbedInteractiveExample("pages/css/counter-reset.html")}}

+ +
+

注意：计数器的值能够通过 CSS 属性 {{cssxref("counter-increment")}} 控制递增或递减。

+
+ +

语法

+ +
/* Set counter-name to 0 */
+counter-reset: counter-name;
+
+/* Set counter-name to -1 */
+counter-reset: counter-name -1;
+
+/* Set counter1 to 1, and counter2 to 4 */
+counter-reset: counter1 1 counter2 4;
+
+/* Cancel any reset that could have been set in less specific rules */
+counter-reset: none;
+
+/* Global values */
+counter-reset: inherit;
+counter-reset: initial;
+counter-reset: unset;
+
+ +

counter-reset 属性可以指定为以下之一：

+ +
    +
  • <自定义 ID> [<数值>]。您可以指定任意数量的计数器进行重置，每个名称或“名称-数字”对之间用空格分隔。
    • +
  • 特殊值 none。
    • +
+ +

可选值

+ +
+
{{cssxref("custom-ident", "<custom-ident>")}}
+
要递增的计数器的名称。
+
+ +
+

该名称由不区分大小写的字母 a 到 z，数字 0 到 9，下划线（_）和 / 或短划线（ - ）的组合组成，并且第一个非破折号字符必须是一个字母（即，在它的开头没有数字，即使前面有破折号）。此外，在标识符的开头禁止使用两个破折号。在任何案例组合中都不能是 none，unset，initial 或 inherit。

+
+ +
+
{{cssxref("<integer>")}}
+
每次出现元素时将计数器重置为的值。如果不指定，则默认为 0。
+
none
+
该关键字表示不执行计数器重置。它可用于重置隐藏在不太具体的规则中定义的计数器。你可以指定要根据需要重置的计数器，每个计数器用空格分隔。
+
+ +

语法形式

+ +
{{csssyntax}}
+ +

示例

+ +
h1 {
+  counter-reset: chapter section 1 page;
+  /* Sets the chapter and page counters to 0
+     and the section counter to 1. */
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Lists', '#counter-reset', 'counter-reset')}}{{Spec2('CSS3 Lists')}}No change.
{{SpecName('CSS2.1', 'generate.html#propdef-counter-reset', 'counter-reset')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ +
{{Compat("css.properties.counter-reset")}}
+ +
+ +

参考

+ +
    +
  • CSS Counters, {{Cssxref("counter-increment")}}
    • +
  • {{cssxref("counter-increment")}}
    • +
  • {{cssxref("counter-set")}}
    • +
  • {{cssxref("@counter-style")}}
    • +
  • {{cssxref("counter")}} and {{cssxref("counters")}} functions
    • +
  • {{cssxref("content")}} property
    • +
diff --git a/files/zh-cn/web/css/counters()/index.html b/files/zh-cn/web/css/counters()/index.html new file mode 100644 index 0000000000..0e5c3dd7d3 --- /dev/null +++ b/files/zh-cn/web/css/counters()/index.html @@ -0,0 +1,188 @@ +--- +title: counters() +slug: Web/CSS/counters() +tags: + - CSS + - CSS函数 + - CSS计数器 +translation_of: Web/CSS/counters() +--- +
{{CSSRef}}
+ +

CSS 函数  counters() 是一个嵌套计数器，返回表示指定计数器当前值的连接字符串。counters() 函数有两种形式：counters(name, string) 或 counters(name, string, style)。它通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用。生成的文本是具有给定名称的所有计数器的值，从最外层到最内层，之间由指定字符串分隔。计数器以指示的样式呈现，如果未指定样式，则默认为十进制。

+ +
/* Simple usage  - style defaults to decimal */
+counters(countername, '-');
+
+/* changing the counter display */
+counters(countername, '.', upper-roman)
+ +

一个计数器本身没有可见的效果，而是通过counter()函数（和counters()函数）返回开发人员定义的字符串（或图像） 从而使计数器拥有很棒的作用。

+ +
+

Note: counter() 函数可以与任何CSS属性一起使用，但是对"content"以外的属性的支持是试验性的，对type-or-unit参数的支持很少。

+ +

在使用此功能之前，请仔细检查浏览器兼容性表 。

+
+ +

Syntax

+ +

Values

+ +
+
<custom-ident> 自定义标识
+
一个标识计数器的名称，区分大小写，并且与counter-reset和counter-increment中的“名称”相同。名称不能以两个破折号开头，并且不能为none, unset, initial, 或 inherit。
+
<counter-style> 计数器样式
+
计数器样式名称或 symbols() 函数，其中计数器样式名称是数字，字母或符号的简单预定义计数器样式，复杂的东亚或埃塞俄比亚长手预定义计数器样式，或其他预定义计数器样式。如果省略，则计数器样式默认为十进制。
+
<string> 字符串
+
任意数量的文本字符。非拉丁字符必须使用其Unicode转义序列进行编码：例如，\ 000A9表示版权符号。
+
+ +

Formal syntax

+ +
counters( <custom-ident>, <string>, <counter-style>? )
+
+where
+<counter-style> = <counter-style-name> | symbols()
+
+where
+<counter-style-name> = <custom-ident>
+ +

Examples

+ +

default value compared to upper Roman

+ +

HTML

+ +
<ol>
+  <li>
+     <ol>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ol>
+  </li>
+  <li></li>
+  <li></li>
+  <li>
+     <ol>
+        <li></li>
+        <li>
+           <ol>
+              <li></li>
+              <li></li>
+              <li></li>
+           </ol>
+        </li>
+      </ol>
+  </li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::marker {
+   content:  counters(listCounter, '.', upper-roman) ') ';
+}
+li::before {
+  content:  counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ;
+}
+ +

Result

+ +

{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}

+ +

decimal-leading-zero compared to lower-alpha

+ +

HTML

+ +
<ol>
+  <li>
+     <ol>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ol>
+  </li>
+  <li></li>
+  <li></li>
+  <li>
+     <ol>
+        <li></li>
+        <li>
+           <ol>
+              <li></li>
+              <li></li>
+              <li></li>
+           </ol>
+        </li>
+      </ol>
+  </li>
+</ol>
+ +

CSS

+ +
ol {
+  counter-reset: count;
+}
+li {
+  counter-increment: count;
+}
+li::marker {
+   content: counters(count, '.', upper-alpha) ') ';
+}
+li::before {
+  content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
+}
+ +

Result

+ +

{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}{{Spec2("CSS3 Lists")}}No change
{{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}{{Spec2("CSS2.1")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.types.counters")}}

+ +

See also

+ +
    +
  • Using CSS Counters
    • +
  • {{cssxref("counter-set")}}
    • +
  • {{cssxref("counter-reset")}}
    • +
  • {{cssxref("counter-increment")}}
    • +
  • {{cssxref("@counter-style")}}
    • +
  • CSS counter() function
    • +
  • {{cssxref("::marker")}}
    • +
diff --git a/files/zh-cn/web/css/css_animated_properties/index.html b/files/zh-cn/web/css/css_animated_properties/index.html new file mode 100644 index 0000000000..ab3e939e33 --- /dev/null +++ b/files/zh-cn/web/css/css_animated_properties/index.html @@ -0,0 +1,15 @@ +--- +title: CSS animated properties +slug: Web/CSS/CSS_animated_properties +tags: + - CSS animated properties + - CSS动画属性 +translation_of: Web/CSS/CSS_animated_properties +--- +

{{CSSRef}}

+ +

一些CSS属性可以是动画的，也就是说，当它的值改变时，或者当 CSS动画或 CSS转换使用时，它可以以平滑的方式改变。

+ +

可动画属性的列表是：

+ +

{{CSSAnimatedProperties}}

diff --git a/files/zh-cn/web/css/css_animations/detecting_css_animation_support/index.html b/files/zh-cn/web/css/css_animations/detecting_css_animation_support/index.html new file mode 100644 index 0000000000..75b845f57e --- /dev/null +++ b/files/zh-cn/web/css/css_animations/detecting_css_animation_support/index.html @@ -0,0 +1,91 @@ +--- +title: 检测CSS动画的支持性 +slug: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +--- +

{{CSSRef}}

+ +

CSS 动画 使仅用CSS属性来使内容呈现动画效果成为一种可能，然而，某些时候CSS动画属性并不能生效，此时，我们希望能够通过javascript代码来实现相似的动画效果。针对此种情况，本文基于Chris Heilmann的 this blog post 对该技术进行了示范。

+ +

CSS动画支持检测

+ +

下面的代码将检测CSS动画的支持性是否是有效的。

+ +
var animation = false,
+    animationstring = 'animation',
+    keyframeprefix = '',
+    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+    pfx  = '',
+    elm = document.createElement('div');
+
+if( elm.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i < domPrefixes.length; i++ ) {
+    if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+
+ +

首先先定义几个变量，并通过初始化animation 为false来假设不支持CSS动画属性，先设置animationstring变量为animation并在稍后进行修改。创建一个浏览器前缀的数组用来循环遍历并设置pfx前缀为空字符串。 

+ +

然后，检测创建的elm元素的style属性集合中{{ cssxref("animation-name") }} 属性是否被设置，如果被设置，则意味着着浏览器支持CSS animation属性，而不需要加任何前缀，然而到目前，还没有任何浏览器实现（译者：chrome中试验了一下是可以的）；

+ +

如果浏览器不支持无前缀的animation，那么animation变量值仍为false，遍历所有可能的浏览器前缀，由于所有的主流浏览器现在都在该属性前加了前缀，因此在AnimationName 前加上前缀即可。

+ +

当代码执行完，如果浏览器不支持CSS animation属性，则返回animation 为false，否则为true。如果animation为true，则所有animation 相关属性名称以及keyframes属性前缀都是检测到的正确的，因此，如果使用firefox，属性名称就是MozAnimation，keyframes前缀就是-moz-，如果使用chrome，属性为WebkitAnimation ，keyframes前缀为 -webkit-。注意，浏览器是不方便在驼峰法和连字符法之间进行切换的。

+ +

针对不同浏览器使用正确语法实现动画效果

+ +

现在可以知道，无论浏览器是否支持CSS animation，均可以实现动画效果。

+ +
if( animation === false ) {
+
+  // animate in JavaScript fallback
+
+} else {
+  elm.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets && document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+
+ +

以上代码主要根据animation的值来进行不同的操作，如果为false,则需要执行javascript脚本来实现动画效果，否则，就用javascript来创建所需要的CSS animation 效果。

+ +

设置animation属性是很简单的，可以在style属性集合中简单的更新它的值。然而，增加keyframes是有难度的，由于它们不能够通过传统的css语法来定义。（虽然这样使得它们更加灵活，但是通过脚本来定义更加不易）

+ +

使用javascript来定义keyframes，需要将其具体语法写为字符串。为了创建keyframes变量，在构建keyframes时要在其所有属性前加前缀，该变量包含完整的所有动画序列所需要的keyframes描述。

+ +

下一个任务是将创建的keyframes添加到实际的CSS中。首先要检查是否在document中存在CSStylesheet，如果存在，则能够简单的将keyframes值插入到CSSstylesheet中。

+ +

如果不存在CSSstylesheet，创建一个新的 {{ HTMLElement("style") }} 元素，并将keyframes设置为其内容。然后将新的{{ HTMLElement("style") }}元素插入到document 的head中，从而将新的style sheet添加到了html文档中。

+ +

在JSFiddle中查看

+ +

更多

+ + diff --git a/files/zh-cn/web/css/css_animations/index.html b/files/zh-cn/web/css/css_animations/index.html new file mode 100644 index 0000000000..17c3ab84a3 --- /dev/null +++ b/files/zh-cn/web/css/css_animations/index.html @@ -0,0 +1,82 @@ +--- +title: CSS Animations +slug: Web/CSS/CSS_Animations +tags: + - CSS + - CSS Animations + - Experimental + - Overview + - Reference +translation_of: Web/CSS/CSS_Animations +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

CSS Animations 是CSS的一个模块，它定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间，它们的重复次数以及它们如何重复来控制。

+ +

参考

+ +

CSS 属性

+ +
+
    +
  • {{cssxref("animation")}}
    • +
  • {{cssxref("animation-delay")}}
    • +
  • {{cssxref("animation-direction")}}
    • +
  • {{cssxref("animation-duration")}}
    • +
  • {{cssxref("animation-fill-mode")}}
    • +
  • {{cssxref("animation-iteration-count")}}
    • +
  • {{cssxref("animation-name")}}
    • +
  • {{cssxref("animation-play-state")}}
    • +
  • {{cssxref("animation-timing-function")}}
    • +
+
+ +

CSS At-规则

+ +
+
    +
  • {{cssxref("@keyframes")}}
    • +
+
+ +

指南

+ +
+
检测CSS动画支持
+
描述用于检测浏览器是否支持CSS动画的技术。
+
使用CSS动画
+
关于如何使用CSS创建动画的分步教程，本文介绍每个相关的CSS属性和规则，并解释它们如何交互。
+
CSS 动画提示
+
提示和技巧，以帮助您在您的内容中充分利用CSS动画。目前提供了一种用于重播已经运行到完成的动画的技术，这是API本身不支持的。
+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范进度备注
{{ SpecName('CSS3 Animations') }}{{ Spec2('CSS3 Animations') }}初始定义。
+ +

浏览器兼容性

+ +
+

{{Compat("css.properties.animation")}}

+
+ +

参考

+ +
    +
  • Related to CSS Animations, CSS Transitions can trigger animations on user actions.
    • +
diff --git a/files/zh-cn/web/css/css_animations/tips/index.html b/files/zh-cn/web/css/css_animations/tips/index.html new file mode 100644 index 0000000000..86de523b3a --- /dev/null +++ b/files/zh-cn/web/css/css_animations/tips/index.html @@ -0,0 +1,100 @@ +--- +title: CSS Animations tips and tricks +slug: Web/CSS/CSS_Animations/Tips +translation_of: Web/CSS/CSS_Animations/Tips +--- +
{{cssref}}
+ +

CSS 动画使得您能够实现一些难以置信的效果点缀您的页面或者应用程序 。 然而, 有些您想实现的东西表现的并不浅显易懂，或者没法使您立马想到一种聪明的解决办法。这篇文章集合一个一些温馨贴士和技巧，从而帮助您更轻松地工作，这其中包括了如何使一个已经停止的动画重新开始播放。

+ +

重新播放动画

+ +

CSS 动画的规范并没有提供使得动画重新激活的方法。在元素上调用resetAnimation() 并不生效，您也不能直接通过设置元素的 {{cssxref("animation-play-state")}}使得动画重新“跑起来”。事实上，你必须使用一些技巧使得已经停止的动画重新播放。

+ +

这有一种我们认为足够稳定和可靠的方法推荐给您。

+ +

HTML 内容

+ +

首先，让我们定义一个我们想要添加动画的元素{{HTMLElement("div")}} 以及一个“播放”或“重播”动画的按钮。

+ +
<div class="box">
+</div>
+
+<div class="runButton">Click me to run the animation</div>
+ +

CSS 内容

+ +

现在我们将使用CSS定义动画本身。为了简洁，有些并不重要的CSS（如“播放”按钮的样式）并没有显示在这里。

+ + + +
@keyframes colorchange {
+  0% { background: yellow }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}
+ +

这里有两个类。 "box" 类基本表述了box的外观，它不包含任何动画信息。动画的细节包含在"changing" 类, 它描述了名为 "colorchange" 的{{cssxref("@keyframes")}} 应该这持续两秒的时间段播放动画。

+ +

注意，正因为如此，这个box在这里不触发任何动画效果, 因此他不会动起来。

+ +

JavaScript 内容

+ +

接下来我们将看看 JavaScript的部分如何工作。这里关键的部分在 play() 方法中, 他在用户点击“播放”按钮时被触发。

+ +
function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}
+ +

这看起来有点奇怪，不是么？这是因为重新播放动画的唯一方法是删除动画效果，让文档重新计算样式以使得它知道您已经设置了它，然后再将动画效果加回该元素。要实现这个，我们必须更具创造性。 

+ +

这里是play() 方法被调用时发生的事情:

+ +
    +
  1. box的CSS类列表被重置为"box" 。这么做的效果是移除了在这个box上的其他类属性， 包括处理动画的 "changing"类。换句话说，我们从box元素上删除了动画效果。然而，改变类属性列表在样式被重新计算完成或者发生刷新事件之前并不会生效。
    2. +
  2. 为了确保样式被重新计算我们使用 {{domxref("window.requestAnimationFrame()")}}，同时设置了一个回调。我们的回调在下一次重绘页面之前被调用。问题是由于它在重绘之前被调用，而此时样式还没有被真正重新计算。
    3. +
  3. 我们的回调聪明地调用了requestAnimationFrame() 方法！这一次，回调在下一次重绘之前被调用，这发成在样式被重新计算之后。回调在box元素上添加"changing" 类，使得重绘后重新触发动画。
    4. +
+ +

当然，我们同样需要在“播放”按钮上添加事件处理方法使其生效：

+ +
document.querySelector(".runButton").addEventListener("click", play, false);
+ +

结论

+ +

{{ EmbedLiveSample('Run_an_animation_again', 320, 160) }}

+ +

另见

+ + diff --git a/files/zh-cn/web/css/css_animations/using_css_animations/index.html b/files/zh-cn/web/css/css_animations/using_css_animations/index.html new file mode 100644 index 0000000000..3cdd7cd988 --- /dev/null +++ b/files/zh-cn/web/css/css_animations/using_css_animations/index.html @@ -0,0 +1,359 @@ +--- +title: 使用 CSS 动画 +slug: Web/CSS/CSS_Animations/Using_CSS_animations +tags: + - Advanced + - CSS + - CSS Animations + - Example + - Experimental + - Guide + - Using CSS animations +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +

{{SeeCompatTable}}{{CSSRef}}

+ +

CSS animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

+ +

相较于传统的脚本实现动画技术，使用CSS动画有三个主要优点：

+ +
    +
  1. 能够非常容易地创建简单动画，你甚至不需要了解JavaScript就能创建动画。
    2. +
  2. 动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用JavaScript实现的动画通常表现不佳（除非经过很好的设计）。
    3. +
  3. 让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。
    4. +
+ +

配置动画

+ +

创建动画序列，需要使用{{ cssxref("animation") }}属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 {{ cssxref("@keyframes") }}规则实现，具体情况参见{{anch("使用keyframes定义动画序列")}}小节部分。

+ +

{{ cssxref("animation") }}的子属性有:

+ +

 

+ +
+
{{ cssxref("animation-delay") }}
+
设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。
+
{{ cssxref("animation-direction") }}
+
设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
+
{{ cssxref("animation-duration") }}
+
设置动画一个周期的时长。
+
{{ cssxref("animation-iteration-count") }}
+
设置动画重复次数， 可以指定infinite无限次重复动画
+
{{ cssxref("animation-name") }}
+
指定由{{ cssxref("@keyframes") }}描述的关键帧名称。
+
{{ cssxref("animation-play-state") }}
+
允许暂停和恢复动画。
+
{{ cssxref("animation-timing-function") }}
+
设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
+
{{ cssxref("animation-fill-mode") }}
+
指定动画执行前后如何为目标元素应用样式。
+
+ +

 

+ +

使用keyframes定义动画序列

+ +

一旦完成动画的时间设置， 接下来就需要定义动画的表现。通过使用{{ cssxref("@keyframes") }}建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

+ +

 

+ +

因为动画的时间设置是通过CSS样式定义的，关键帧使用{{ cssxref("percentage") }}来指定动画发生的时间点。0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。这两个都是可选的，若from/0%或to/100%未指定，则浏览器使用计算值开始或结束动画。

+ +

 

+ +

也可包含额外可选的关键帧，描述动画开始和结束之间的状态。

+ +

 

+ +

示例

+ +
注意: 这里的示例没有在CSS动画属性上使用任何前缀，Webkit内核浏览器或者早期版本浏览器可能需要前缀，下面的实例包含了-webkit-前缀。
+ +

文本滑过浏览器窗口

+ +

该例中{{ HTMLElement("p") }} 元素由浏览器窗口右边滑至左边

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +

{{ cssxref("animation-duration") }}属性指定 {{ HTMLElement("p") }} 上的动画从开始到结束耗费3秒，{{ cssxref("@keyframes") }} 指定使用名字为"slidein"的关键帧。

+ +

 

+ +

如果希望在不支持CSS动画的浏览器中使用自定义样式，应该将其写在这里;然而，在该例中，我们不需要除动画效果以外的任何自定义样式。

+ +

 

+ +

关键帧是用{{ cssxref("@keyframes") }}定义的。该例中，我们只使用了两个关键帧。第一个出现在0%(此例中使用了别名from)处，此处元素的左边距为100%(即位于容器的右边界)，宽为300%(即容器宽度的3倍)，使得在动画的第一帧中标题位于浏览器窗口右边界之外。

+ +

 

+ +

第二帧出现在100%(此例中使用了别名to)。元素的左边距设为0%，宽设为100%，使得动画结束时元素与窗口左边界对齐。

+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+
+ +

{{EmbedLiveSample("文本滑过浏览器窗口","100%","250")}}

+ +

增加关键帧

+ +

让我们给上面的示例中添加一个关键帧，比如标题的字号先变大然后恢复正常，添加这个关键帧十分简单：

+ +

 

+ +
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+
+ + + + + +

在动画序列执行到75%的时候，标题元素的左边距为25%，宽度为150%。

+ +

{{EmbedLiveSample("增加关键帧","100%","250")}}

+ +

重复动画

+ +

{{ cssxref("animation-iteration-count") }}用以指定动画重复的次数，仅仅使用该属性就能使动画重复播放。在该例中，设该属性为infinite以使动画无限重复

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+ + + + + +

{{EmbedLiveSample("重复动画","100%","250")}}

+ +

来回运动

+ +

上面实现了动画的重复播放，但是每次动画开始时总跳回开始位置显得很怪异。我们真正想要的是标题来回滑动，这时只需要设置{{ cssxref("animation-direction") }}属性为alternate。

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ + + + + +

{{EmbedLiveSample("来回运动","100%","250")}}

+ +

使用动画事件

+ +
利用动画事件可以更好的控制动画和信息。这些事件由 {{ domxref("event/AnimationEvent", "AnimationEvent") }}对象表示，可探测动画何时开始结束和开始新的循环。每个事件包括动画发生的时间和触发事件的动画名称。
+ +
 
+ +
我们将修改滑动文本示例，输出每个动画事件出现时的信息。
+ +
.slidein {
+  -moz-animation-duration: 3s;
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+  -moz-animation-name: slidein;
+  -webkit-animation-name: slidein;
+  animation-name: slidein;
+  -moz-animation-iteration-count: 3;
+  -webkit-animation-iteration-count: 3;
+  animation-iteration-count: 3;
+  -moz-animation-direction: alternate;
+  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
+}
+
+@-moz-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}
+
+@-webkit-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+ +

添加动画事件监听器

+ +

我们使用JavaScript代码监听所有三种可能的动画事件，setup()方法设置事件监听器，当文档第一次加载完成时执行该方法。

+ +
var e = document.getElementById("watchme");
+e.addEventListener("animationstart", listener, false);
+e.addEventListener("animationend", listener, false);
+e.addEventListener("animationiteration", listener, false);
+
+e.className = "slidein";
+
+ +
以上是非常标准的代码写法，setup()最后设置动画元素的class为slidein，启动动画。
+ +
 
+ +
为什么这样做?因为animationstart事件在动画一开始时就被触发，在我们的示例中，该事件在我们的代码执行前就被触发，所以我们自己通过设置元素的的class来启动动画。
+ +
 
+ +

接收事件

+ +

事件传递给listener()函数，代码如下所示

+ +
function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+ +

这段代码同样非常简单，简单地通过{{ domxref("event.type") }}来判断发生的是何种事件，然后添加对应的注解到{{ HTMLElement("ul") }}中。

+ +

 

+ +

输出结果如下所示:

+ +

 

+ +
    +
  • Started: elapsed time is 0
    • +
  • New loop started at time 3.01200008392334
    • +
  • New loop started at time 6.00600004196167
    • +
  • Ended: elapsed time is 9.234000205993652
    • +
+ +
注意以上时间非常接近预期时间，但不是完全相等。也要注意在最后一个周期完成后，不会触发animationiteration事件，而触发animationend事件。
+ +
 
+ +

HTML代码

+ +

下面是示例中的用到的HTML代码:

+ +
<body>
+  <h1 id="watchme">Watch me move</h1>
+  <p>This example shows how to use CSS animations to make <code>h1</code> elements
+  move across the page.</p>
+  <p>In addition, we output some text each time an animation event fires, so you can see them in action.</p>
+  <ul id="output">
+  </ul>
+</body>
+
+ +

{{EmbedLiveSample('使用动画事件', '600', '300')}}

+ +

See also

+ + diff --git a/files/zh-cn/web/css/css_background_and_borders/border-image_generator/index.html b/files/zh-cn/web/css/css_background_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..64fde3e7f7 --- /dev/null +++ b/files/zh-cn/web/css/css_background_and_borders/border-image_generator/index.html @@ -0,0 +1,2628 @@ +--- +title: Border-image 生成器 +slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +tags: + - CSS + - Tools +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

这个工具用于生成 CSS3 {{cssxref("border-image")}} 的值.

+ +
+

Border Image Generator

+ +

HTML Content

+ +
    <div id="container">
+
+        <div id="gallery">
+            <div id="image-gallery">
+                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/>
+            </div>
+        </div>
+
+        <div id="load-actions" class="group section">
+            <div id="toggle-gallery" data-action="hide"> </div>
+            <div id="load-image" class="button"> Upload image </div>
+            <input id="remote-url" type="text" placeholder="Load an image from URL"/>
+            <div id="load-remote" class="button"> </div>
+        </div>
+
+        <div id="general-controls" class="group section">
+            <div class="name"> Control Box </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">scale</div>
+                <div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10">
+                </div>
+            </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">draggable</div>
+                <div class="ui-checkbox" data-topic='drag-subject'></div>
+            </div>
+            <div class="property right">
+                <div class="name">section height</div>
+                <div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000">
+                </div>
+            </div>
+        </div>
+
+        <div id="preview_section" class="group section">
+            <div id="subject">
+                <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-right"></div>
+                <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-left"></div>
+            </div>
+            <div id="preview"> </div>
+        </div>
+
+        <!-- controls -->
+        <div id="controls" class="group section">
+
+            <!-- border-image-slice -->
+            <div id="border-slice-control" class="category">
+                <div class="title"> border-image-slice </div>
+                <div class="property">
+                    <div class="name">fill</div>
+                    <div class="ui-checkbox" data-topic='slice-fill'></div>
+                </div>
+            </div>
+
+            <!-- border-image-width -->
+            <div id="border-width-control" class="category">
+                <div class="title"> border-image-width </div>
+            </div>
+
+            <!-- border-image-outset -->
+            <div id="border-outset-control" class="category">
+                <div class="title"> border-image-outset </div>
+            </div>
+
+            <!-- other-settings -->
+            <div id="aditional-properties" class="category">
+                <div class="title"> aditional-properties </div>
+                <div class="property">
+                    <div class="name"> repeat-x </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
+                        <div data-value="0">repeat</div>
+                        <div data-value="0">stretch</div>
+                        <div data-value="0">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="name"> repeat-y </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
+                        <div data-value="1">repeat</div>
+                        <div data-value="1">stretch</div>
+                        <div data-value="1">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3">
+                    </div>
+                </div>
+
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3">
+                    </div>
+                </div>
+            </div>
+
+
+            <div id="output" class="category">
+                <div class="title"> CSS Code </div>
+                <div class="css-property">
+                    <span class="name"> border-image-slice: </span>
+                    <span id="out-border-slice" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-width: </span>
+                    <span id="out-border-width" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-outset: </span>
+                    <span id="out-border-outset" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-repeat: </span>
+                    <span id="out-border-repeat" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-source: </span>
+                    <span id="out-border-source" class="value">  </span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+ +

CSS Content

+ +
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list > div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list > div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover > * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] > * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider > input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time < 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index >= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j<4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i < positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ +

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

+ +

 

diff --git a/files/zh-cn/web/css/css_background_and_borders/index.html b/files/zh-cn/web/css/css_background_and_borders/index.html new file mode 100644 index 0000000000..1d13471abd --- /dev/null +++ b/files/zh-cn/web/css/css_background_and_borders/index.html @@ -0,0 +1,154 @@ +--- +title: CSS Background and Borders +slug: Web/CSS/CSS_Background_and_Borders +tags: + - CSS + - CSS Backgrounds and Borders + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +--- +

{{CSSRef}}

+ +

CSS 背景与边框 是 CSS中描述元素背景与边框的组件。边框的实现方式包含直线、图片。盒模型可以具有单个或多个背景、圆角以及阴影。

+ +

参考

+ +

CSS 属性

+ +
+
    +
  • {{cssxref("background")}}
    • +
  • {{cssxref("background-attachment")}}
    • +
  • {{cssxref("background-clip")}}
    • +
  • {{cssxref("background-color")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("background-origin")}}
    • +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-repeat")}}
    • +
  • {{cssxref("background-size")}}
    • +
  • {{cssxref("box-shadow")}}
    • +
  • {{cssxref("border")}}
    • +
  • {{cssxref("border-bottom")}}
    • +
  • {{cssxref("border-bottom-color")}}
    • +
  • {{cssxref("border-bottom-left-radius")}}
    • +
  • {{cssxref("border-bottom-right-radius")}}
    • +
  • {{cssxref("border-bottom-style")}}
    • +
  • {{cssxref("border-bottom-width")}}
    • +
  • {{cssxref("border-collapse")}}
    • +
  • {{cssxref("border-color")}}
    • +
  • {{cssxref("border-image")}}
    • +
  • {{cssxref("border-image-outset")}}
    • +
  • {{cssxref("border-image-repeat")}}
    • +
  • {{cssxref("border-image-slice")}}
    • +
  • {{cssxref("border-image-source")}}
    • +
  • {{cssxref("border-image-width")}}
    • +
  • {{cssxref("border-left")}}
    • +
  • {{cssxref("border-left-color")}}
    • +
  • {{cssxref("border-left-style")}}
    • +
  • {{cssxref("border-left-width")}}
    • +
  • {{cssxref("border-radius")}}
    • +
  • {{cssxref("border-right")}}
    • +
  • {{cssxref("border-right-color")}}
    • +
  • {{cssxref("border-right-style")}}
    • +
  • {{cssxref("border-right-width")}}
    • +
  • {{cssxref("border-style")}}
    • +
  • {{cssxref("border-top")}}
    • +
  • {{cssxref("border-top-color")}}
    • +
  • {{cssxref("border-top-left-radius")}}
    • +
  • {{cssxref("border-top-right-radius")}}
    • +
  • {{cssxref("border-top-style")}}
    • +
  • {{cssxref("border-top-width")}}
    • +
  • {{cssxref("border-width")}}
    • +
+
+ +

导航

+ +
+
应用CSS多重背景
+
阐述设置元素背景方法以及背景、元素之间的交互方式
+
缩放背景图片
+
阐述如何通过拉伸、重复使背景图片覆盖或不全部覆盖元素的背景区域，更改背景图片的呈现方式。
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
+ +

浏览器支持

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
+
diff --git a/files/zh-cn/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/zh-cn/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html new file mode 100644 index 0000000000..abfe3926cc --- /dev/null +++ b/files/zh-cn/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html @@ -0,0 +1,59 @@ +--- +title: 使用CSS的多背景 +slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +

{{CSSRef}}

+ +

通过使用 CSS3，你可以向元素应用多个背景。这些背景相互堆叠，第一个背景放在最上面，最后一个背景放在最下面。 仅最后一个背景允许拥有背景色。

+ +

指定多个背景很简单：

+ +
.myclass {
+  background: background1, background 2, ..., backgroundN;
+}
+
+ +

你既可以使用简写属性 {{ cssxref("background") }} 来设置多个背景，也可以使用除 {{ cssxref("background-color") }} 外的独立属性来设置多个背景。即下面的属性可以用属性列表来设置每一个背景： {{ cssxref("background") }}，{{ cssxref("background-attachment") }}，{{ cssxref("background-clip") }}, {{ cssxref("background-image") }}，{{ cssxref("background-origin") }}，{{ cssxref("background-position") }}， {{ cssxref("background-repeat") }}， {{ cssxref("background-size") }}。

+ +

示例

+ +

该例中，三个背景进行堆叠：火狐标志,一个线性渐变， 和一张带有花的图片：

+ +
.multi_bg_example {
+  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
+        linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
+        url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
+  background-repeat: no-repeat, no-repeat, repeat;
+  background-position: bottom right, left, right;
+}
+
+ + + + + + + + + + +
结果
css_multibg.png
+ +

如你所见，火狐标志（列表第一项）在最上面，紧接着是放在图片上面的线性渐变。每个子属性 ({{ cssxref("background-repeat") }} 和 {{ cssxref("background-position") }}) 应用于对应的背景。因此属性 {{ cssxref("background-repeat") }} 的第一个值应用于第一个（最前面）的背景，依次可推。

+ +

其它

+ + + +
 
+ +
 
diff --git "a/files/zh-cn/web/css/css_background_and_borders/\345\234\206\350\247\222\350\276\271\346\241\206\345\217\221\347\224\237\345\231\250/index.html" "b/files/zh-cn/web/css/css_background_and_borders/\345\234\206\350\247\222\350\276\271\346\241\206\345\217\221\347\224\237\345\231\250/index.html" new file mode 100644 index 0000000000..b9f50d5332 --- /dev/null +++ "b/files/zh-cn/web/css/css_background_and_borders/\345\234\206\350\247\222\350\276\271\346\241\206\345\217\221\347\224\237\345\231\250/index.html" @@ -0,0 +1,1599 @@ +--- +title: 圆角边框生成器 +slug: Web/CSS/CSS_Background_and_Borders/圆角边框发生器 +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

使用Border-radius generator生成 CSS3 {{cssxref("border-radius")}} 样式

+ +
+

border-radius

+ +

HTML Content

+ +
<div id="container">
+    <div class="group section">
+        <div id="preview" class="col span_12">
+            <div id="subject">
+                <div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top">
+                </div>
+                <div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top">
+                </div>
+                <div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom">
+                </div>
+                <div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom">
+                </div>
+
+                <div id="radius-ui-sliders">
+                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="controls" class="group section">
+
+        <div class="group section">
+            <div id="dimensions">
+                <div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
+
+                <div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
+            </div>
+
+            <div id="output"></div>
+        </div>
+
+        <div class="group section">
+            <div id="radius-lock">
+                <div class="info"> rounded corner </div>
+                <div class="ui-checkbox" data-topic='top-left'></div>
+                <div class="ui-checkbox" data-topic='top-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-left'></div>
+            </div>
+
+            <div id="unit-selection">
+                <div class="info"> select border units </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+ +

CSS Content

+ +
/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox > label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined && send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY && this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size < 0)	this.size = 0;
+			if (this.size > this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width < 0)	this.width = 0;
+			if (this.width > this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height < 0) this.height = 0;
+			if (this.height > this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+ +

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

+ +

 

diff --git a/files/zh-cn/web/css/css_backgrounds_and_borders/index.html b/files/zh-cn/web/css/css_backgrounds_and_borders/index.html new file mode 100644 index 0000000000..0a43587fc3 --- /dev/null +++ b/files/zh-cn/web/css/css_backgrounds_and_borders/index.html @@ -0,0 +1,165 @@ +--- +title: CSS Backgrounds and Borders +slug: Web/CSS/CSS_Backgrounds_and_Borders +tags: + - CSS + - CSS Backgrounds and Borders + - NeedsTranslation + - Overview + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +--- +
{{CSSRef}}
+ +

CSS Backgrounds and Borders 是CSS的一个模块，它可以让你为元素的背景和边框设置样式。背景可以用颜色或图像填充，剪裁或调整大小，以及以其他方式修改。边框可以用线条或图像装饰，并制成方形或圆形。此外，元素框可以用阴影装饰。

+ +

Reference

+ +

CSS 属性

+ +
+
    +
  • {{cssxref("background")}}
    • +
  • {{cssxref("background-attachment")}}
    • +
  • {{cssxref("background-clip")}}
    • +
  • {{cssxref("background-color")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("background-origin")}}
    • +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-position-x")}}
    • +
  • {{cssxref("background-position-y")}}
    • +
  • {{cssxref("background-repeat")}}
    • +
  • {{cssxref("background-size")}}
    • +
  • {{cssxref("border")}}
    • +
  • {{cssxref("border-bottom")}}
    • +
  • {{cssxref("border-bottom-color")}}
    • +
  • {{cssxref("border-bottom-left-radius")}}
    • +
  • {{cssxref("border-bottom-right-radius")}}
    • +
  • {{cssxref("border-bottom-style")}}
    • +
  • {{cssxref("border-bottom-width")}}
    • +
  • {{cssxref("border-collapse")}}
    • +
  • {{cssxref("border-color")}}
    • +
  • {{cssxref("border-image")}}
    • +
  • {{cssxref("border-image-outset")}}
    • +
  • {{cssxref("border-image-repeat")}}
    • +
  • {{cssxref("border-image-slice")}}
    • +
  • {{cssxref("border-image-source")}}
    • +
  • {{cssxref("border-image-width")}}
    • +
  • {{cssxref("border-left")}}
    • +
  • {{cssxref("border-left-color")}}
    • +
  • {{cssxref("border-left-style")}}
    • +
  • {{cssxref("border-left-width")}}
    • +
  • {{cssxref("border-radius")}}
    • +
  • {{cssxref("border-right")}}
    • +
  • {{cssxref("border-right-color")}}
    • +
  • {{cssxref("border-right-style")}}
    • +
  • {{cssxref("border-right-width")}}
    • +
  • {{cssxref("border-style")}}
    • +
  • {{cssxref("border-top")}}
    • +
  • {{cssxref("border-top-color")}}
    • +
  • {{cssxref("border-top-left-radius")}}
    • +
  • {{cssxref("border-top-right-radius")}}
    • +
  • {{cssxref("border-top-style")}}
    • +
  • {{cssxref("border-top-width")}}
    • +
  • {{cssxref("border-width")}}
    • +
  • {{cssxref("box-shadow")}}
    • +
+
+ +

指南

+ +

工具

+ +
+
Using multiple backgrounds
+
Explains how to set one or more backgrounds on an element.
+
Scaling background images
+
Describes how to change the size and repeating behavior of background images.
+
Applying color to HTML elements using CSS
+
An overview of how CSS color can be used in HTML, including for borders.
+
Border-image 生成器
+
此交互式工具让你以可视化方式创建边框图像（{{cssxref("border-image")}} 属性）。
+
Border-radius 生成器
+
此交互式工具让你以可视化方式创建圆角（{{cssxref("border-radius")}} 属性）。
+
Box-shadow 生成器
+
此交互式工具让你以可视化方式创建元素身后的阴影（{{cssxref("box-shadow")}} 属性）。
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0
+
diff --git a/files/zh-cn/web/css/css_backgrounds_and_borders/scaling_background_images/index.html b/files/zh-cn/web/css/css_backgrounds_and_borders/scaling_background_images/index.html new file mode 100644 index 0000000000..2873b2878c --- /dev/null +++ b/files/zh-cn/web/css/css_backgrounds_and_borders/scaling_background_images/index.html @@ -0,0 +1,129 @@ +--- +title: Scaling background images +slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +--- +
{{cssref}}
+ +

CSS属性{{ cssxref("background-size") }} 可以用于调整背景图片的宽和高，因背景图片布局的默认行为是根据其原尺寸平铺，所以{{ cssxref("background-size") }}可修改其默认行为。你可以根据需要放大或缩小图片。

+ +

Tiling a large image

+ +

Let's consider a large image, a 2982x2808 Firefox logo image. We want (for some reason likely involving horrifyingly bad site design) to tile four copies of this image into a 300x300-pixel element. To do this, we can use a fixed background-size value of 150 pixels.

+ +

HTML

+ +
<div class="tiledBackground">
+</div>
+ +

CSS

+ +
.tiledBackground {
+  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
+  background-size: 150px;
+  width: 300px;
+  height: 300px;
+  border: 2px solid;
+  color: pink;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Tiling_a_large_image", 340, 340)}}

+ +

Stretching an image

+ +

You can also specify both the horizontal and vertical sizes of the image, like this:

+ +
background-size: 300px 150px;
+
+ +

The result looks like this:

+ +

+ +

Scaling an image up

+ +

On the other end of the spectrum, you can scale an image up in the background. Here we scale a 32x32 pixel favicon to 300x300 pixels:

+ +

+ +
.square2 {
+  background-image: url(favicon.png);
+  background-size: 300px;
+  width: 300px;
+  height: 300px;
+  border: 2px solid;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+
+ +

As you can see, the CSS is actually essentially identical, save the name of the image file.

+ +

Special values: "contain" and "cover"

+ +

Besides {{cssxref("<length>")}} values, the {{ cssxref("background-size") }} CSS property offers two special size values, contain and cover. Let's take a look at these.

+ +

contain

+ +

The contain value specifies that, regardless of the size of the containing box, the background image should be scaled so that each side is as large as possible while not exceeding the length of the corresponding side of the container. Try resizing the example below to see this in action.

+ +

HTML

+ +
<div class="bgSizeContain">
+  <p>Try resizing this element!</p>
+</div>
+ +

CSS

+ +
.bgSizeContain {
+  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
+  background-size: contain;
+  width: 160px;
+  height: 160px;
+  border: 2px solid;
+  color: pink;
+  resize: both;
+  overflow: scroll;
+}
+ +

Result

+ +

{{ EmbedLiveSample('contain', 250, 250) }}

+ +

cover

+ +

The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container. Try resizing the example below to see this in action.

+ +

HTML

+ +
<div class="bgSizeCover">
+  <p>Try resizing this element!</p>
+</div>
+ +

CSS

+ +
.bgSizeCover {
+  background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png);
+  background-size: cover;
+  width: 160px;
+  height: 160px;
+  border: 2px solid;
+  color: pink;
+  resize: both;
+  overflow: scroll;
+}
+ +

Result

+ +

{{ EmbedLiveSample('cover', 250, 250) }}

+ +

See also

+ + diff --git a/files/zh-cn/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/zh-cn/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..37b2f2239b --- /dev/null +++ b/files/zh-cn/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,61 @@ +--- +title: 多个背景的应用 +slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +tags: + - CSS + - CSS 背景 + - 参考 + - 实例 + - 指导 +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +
{{CSSRef}}
+ +

你可以应用多个背景到元素， 这些背景在你添加的第一个背景的上方和最后一个背景的下方分层叠加，只有最后的背景可以包含背景颜色。

+ +

指定多个背景很简单：

+ +
.myclass {
+  background: background1, background 2, ..., backgroundN;
+}
+
+ +

除了{{ cssxref("background-color") }}之外，你可以用简写{{ cssxref("background") }} 属性和它的各个属性来做到这一点。 也就是说，以下背景属性可以被指定为一个列表，每个背景一个： {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

+ +

实例

+ +

在这个例子中，三个背景叠加在一起：Firefox标志，气泡图像和线性渐变：

+ +

HTML

+ +
<div class="multi-bg-example"></div>
+ +

CSS

+ +
.multi-bg-example {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
+      url(https://mdn.mozillademos.org/files/11307/bubbles.png),
+      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat,
+      no-repeat,
+      no-repeat;
+  background-position: bottom right,
+      left,
+      right;
+}
+ +

结论

+ +

（如果在CodePen中图像没有出现，点击CSS模块的TIdy按钮）

+ +

{{EmbedLiveSample('Example','600','400')}}

+ +

正如您在这里看到的，Firefox徽标（在{{ cssxref("background-image") }}中首先列出）位于气泡图形正上方，接着是位于所有先前“images”下方的渐变（最后列出）。每个后续的子属性（{{ cssxref("background-repeat") }}和{{ cssxref("background-position") }}）适用于相应的背景。因此，background-repeat的第一个列出的值适用于第一个（最前面的）背景，依此类推。

+ +

另见

+ + diff --git a/files/zh-cn/web/css/css_basic_user_interface/index.html b/files/zh-cn/web/css/css_basic_user_interface/index.html new file mode 100644 index 0000000000..51839f33c8 --- /dev/null +++ b/files/zh-cn/web/css/css_basic_user_interface/index.html @@ -0,0 +1,69 @@ +--- +title: CSS Basic User Interface +slug: Web/CSS/CSS_Basic_User_Interface +translation_of: Web/CSS/CSS_Basic_User_Interface +--- +
{{CSSRef}}
+ +

CSS Basic User Interface 是 CSS 的一个模块，用于定义与用户界面相关的特性的渲染和实现。

+ +

参考

+ +

属性

+ +
+
    +
  • {{CSSxRef("appearance")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("box-sizing")}}
    • +
  • {{CSSxRef("cursor")}}
    • +
  • {{CSSxRef("ime-mode")}} {{Deprecated_Inline}}
    • +
  • {{CSSxRef("nav-down")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("nav-left")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("nav-right")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("nav-up")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("outline")}}
    • +
  • {{CSSxRef("outline-width")}}
    • +
  • {{CSSxRef("outline-style")}}
    • +
  • {{CSSxRef("outline-color")}}
    • +
  • {{CSSxRef("outline-offset")}}
    • +
  • {{CSSxRef("resize")}}
    • +
  • {{CSSxRef("text-overflow")}}
    • +
  • {{CSSxRef("user-select")}}
    • +
+
+ +

指南

+ +
+
Using URL values for the cursor property
+
Explains how a URL can be used with the {{CSSxRef("cursor")}} property to produce custom cursors.
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Basic UI")}}{{Spec2("CSS4 Basic UI")}}
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}}
{{SpecName("CSS2.1", "ui.html")}}{{Spec2("CSS2.1")}}Initial definition.
diff --git a/files/zh-cn/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/zh-cn/web/css/css_box_alignment/box_alignment_in_flexbox/index.html new file mode 100644 index 0000000000..c0c5a5c801 --- /dev/null +++ b/files/zh-cn/web/css/css_box_alignment/box_alignment_in_flexbox/index.html @@ -0,0 +1,117 @@ +--- +title: Box alignment in Flexbox +slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox +translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox +--- +
{{CSSRef}}
+ +
 
+ +

Box Alignment 规范详细说明了对齐(alignment)在各种布局方法中的工作原理; 在此页面中，我们将探讨盒子对齐（box aligment）在Flexbox环境中的工作原理。 由于此页面旨在详细说明特定于Flexbox和框对齐的内容，因此应与Box Alignment 页面一起阅读，该页面详细说明了不同布局方法的框对齐的常见方法。

+ +

基础示例

+ +

在此示例中，使用{{cssxref("justify-content")}}在主轴上对齐三个弹性元素（flex items），并使用{{cssxref("align-items")}}在十字轴上对齐。 第一个元素通过将{{cssxref("align-self")}}设置为居中来覆盖在父元素设置的align-items值。

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}

+ +

轴 与 flex-direction

+ +

Flexbox与文档的写入模式有关，因此如果您使用英语并将{{cssxref("justify-content")}}设置为flex-end，则会将项目对齐到Flex容器的末尾。 如果您将{{cssxref("flex-direction")}}设置为行，则此对齐将处于内联方向。

+ +

但是，在Flexbox中，您可以通过将flex-direction设置为column来更改主轴。 在这种情况下，justify-content将在块方向上对齐项目。 因此，在Flexbox中工作时最容易考虑主轴和纵轴，如下所示：

+ +
    +
  • 主轴由flex-direction设置方向，通过justify-content 属性对齐
    • +
  • 纵轴穿过主轴，通过align-content，align-self / align-items对齐
    • +
+ +

主轴

+ +
    +
  • {{cssxref("justify-content")}}
    • +
+ +

纵轴

+ +
    +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-content")}}
    • +
+ +

justify-self 在 Flexbox布局中失效

+ +

在主轴上，Flexbox将我们的内容作为一个组进行处理。 计算布置子元素所需的空间量，然后剩余空间可用于分配。 justify-content属性控制剩余空间的使用方式。 设置justify-content：flex-end，额外空间放在所有子元素之前，justify-content：space-around，它放在该维度的子元素的两侧，等等。

+ +

这意味着在Flexbox中，justify-self属性没有意义，因为我们总是处理移动整个元素组。

+ +

在十字轴上，align-self是有意义的，因为我们可能在该维度中的flex容器中有额外的空间，其中单个元素可以移动到开始和结束位置。

+ +

对齐 与 auto margins

+ +

在Flexbox中有一个特定的用例，我们可能会认为justify-self是我们需要的，这就是我们想要分割一组flex items，也许是为了创建一个分割导航模式。 对于此用例，我们可以使用自动边距。 设置为auto的边距将吸收其维度中的所有可用空间。 这就是以自动边距为中心的块的工作原理。 通过将左右边距设置为auto，我们块的两侧都会尝试占用所有可用空间，因此将盒子推入中心。

+ +

通过在一组弹性项目中的一个项目上设置auto的{{cssxref("margin")}}全部对齐以开始，我们可以创建拆分导航。 这适用于Flexbox和对齐属性。 一旦没有可用于自动边距的空间，该项目的行为与所有其他弹性项目的行为相同，并且收缩以尝试适合空间。

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}

+ +

gap 属性

+ +
    +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+ +

在子元素之间创建固定大小的差距

+ +

在主轴上，column-gap属性将在相邻项之间创建固定大小的间隙。

+ +

在纵轴上，row-gap属性将在相邻的子元素之间创建间距，因此还必须将flex-wrap设置为wrap,以使其具有任何效果。

+ +
+

注意: 从Firefox 63开始，Firefox是唯一实现Flexbox gap属性的浏览器。

+
+ +

Reference

+ +

CSS Properties

+ +
+
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("place-content")}}
    • +
  • {{cssxref("justify-items")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("place-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+
+ +

Glossary Entries

+ +
+
    +
  • {{Glossary("Cross axis")}}
    • +
  • {{Glossary("Main axis")}}
    • +
+
+ +

Guides

+ + + +

External Resources

+ + diff --git a/files/zh-cn/web/css/css_box_alignment/index.html b/files/zh-cn/web/css/css_box_alignment/index.html new file mode 100644 index 0000000000..0ba57c3b99 --- /dev/null +++ b/files/zh-cn/web/css/css_box_alignment/index.html @@ -0,0 +1,255 @@ +--- +title: CSS盒子对齐 +slug: Web/CSS/CSS_Box_Alignment +tags: + - CSS + - CSS Box Alignment + - Grid Layout + - NeedsTranslation + - TopicStub + - alignment + - box alignment + - flexbox + - multi-column +translation_of: Web/CSS/CSS_Box_Alignment +--- +
{{CSSRef}}
+ +

CSS盒子对齐(Box Alignment)模块指定了在各种CSS盒子布局模型，如块布局，表布局，弹性布局和网格布局中，与盒子对齐有关的CSS功能。该模块旨在建立一种能一致地在CSS中指定对齐的方法。这份文档详述了出现在该规范中的一般概念。

+ +
+

注意：每种布局方法的文档都将详细说明在其中是如何应用“盒子对齐”的

+
+ +

较老的对齐方法

+ +

传统上，CSS的对齐功能非常有限。我们可以利用 {{cssxref("text-align")}} 对齐文本，利用auto {{cssxref("margin")}} 对齐块，并且利用 {{cssxref("vertical-align")}} 属性在表格(table)或者行内块(inline-block)布局中对齐块。现在 Inline Layout 与 CSS Text 模块中涵盖了文本对齐的内容，而盒子对齐模块让我们第一次拥有了完整的水平与垂直对齐的能力。

+ +

如果你最初学习过弹性盒子(Flexbox)，你可能会觉得这些属性是弹性盒子规范的一部分。确实，某些属性是列在弹性盒子的 Level 1 标准中，不过规范指出我们应该提到盒子对齐规范，因为它可能会弹性盒子的基础上增加额外的功能。

+ +

基本示例

+ +

下面的例子演示了部分盒子对齐属性在 网格 和 弹性盒子 中是如何被使用的。

+ +

CSS 网格布局对齐示例

+ +

下面使用网格布局的示例中，在行内轴(inline axis)（主轴(main axis)）上布局了固定宽度的轨道后，网格容器中有一些多余的空间。这些空间是使用 {{cssxref("justify-content")}} 来分配的。在块轴(block axis)（交叉轴(cross axis)）上，项目在他们的网格区域内的对齐是用 {{cssxref("align-items")}} 来控制的。第一个项目通过将 {{cssxref("align-self")}} 设置为 center，重载了组内设置的 align-items 属性。

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}

+ +

弹性盒子对齐示例

+ +

在下面的示例中，三个弹性项目分别利用 justify-content 和 align-items 属性在主轴和交叉轴上对齐。第一个项目通过将 align-self 设置为 center，重载了组内设置的 align-items 属性。

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}

+ +

关键概念与术语

+ +

规范详细介绍了一些对齐术语，让我们能更容易地在特定布局方法内的具体实现之外讨论这些对齐属性。另外其中还有一些对于所有布局方法都通用的关键概念。

+ +

与书写模式的关系

+ +

对齐方式与书写模式有关，因为在对齐项目时，我们不会考虑是否将其对齐到顶部，右侧，底部和左侧的物理尺寸。与此相反，我们根据正在使用的特定维度的开始和结束来描述对齐方式。这样可确保不管文档具有怎样的书写模式，对齐方式总是以相同的方式工作。

+ +

对齐的两个维度

+ +

使用盒子对齐属性时，我们会在两个轴的其中之一上对齐内容——行内轴(inline axis)（或称主轴(main axis)）和块轴(block axis)（或称交叉轴(cross axis)）。内联轴是在使用特定写作模式中，沿句子单词的流动方向的轴。比如对于英语或者中文来说，内联轴是水平的。块轴是沿块(block)（比如段落元素）的布局方向延伸的轴，它会垂直穿过行内轴。

+ +

+ +

当在行内轴上对齐项目时，你将用到以 justify- 开头的属性：

+ +
    +
  • {{cssxref("justify-items")}}
    • +
  • {{cssxref("justify-self")}}
    • +
  • {{cssxref("justify-content")}}
    • +
+ +

当在块轴上对齐项目时，你将用到以 align- 开头的属性：

+ +
    +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("align-content")}}
    • +
+ +

在弹性盒子布局中，情况要更复杂些，因为当 {{cssxref("flex-direction")}} 设置为 row 时，上面的这些说法都是对的。但当弹性盒子设为 column 时则恰好相反（行内轴上的对齐用 justify- 指定，块轴上用 align- ）。因此，当使用弹性盒子时，用主轴和交叉轴来思考要比用行内轴和块轴来思考更直观些。 justify- 属性总是用来对齐主轴，而 align- 属性总是用来对齐交叉轴的。

+ +

对齐主体

+ +

对齐主体 指的是被对齐的物体。对于 justify-self 或 align-self ，或者将以上两值用 justify-items 或 align-items 成组设置时，对齐主体将是使用此属性的元素的外边距盒子(margin box)。 justify-content 和 align-content 属性因布局方法而异。

+ +

对齐容器

+ +

对齐容器 指的是对齐主体被对齐时所处的盒子。这一般指的是包含对齐主体的块。一个对齐容器可能包含一个或多个对齐主体。

+ +

下图展示了一个内部包含两个对齐主体的对齐容器。

+ +

+ +

回退对齐

+ +

如果设置的对齐方式无法实现，那么 回退对齐 将派上用场并且处理可用的空间。这一回退对齐是为每种布局方法分别指定的，且在方法的对应页面上有详细说明。

+ +

对齐的种类

+ +

规范中详述了三种不同的对齐方式；这些对齐使用关键字值。

+ +
    +
  • 位置对齐(Positional alignment)：通过对齐主体与它的对齐容器间的关系来指定对齐主体的位置。
    • +
  • 基线对齐(Baseline alignment)：这些关键字把对齐看作在一个对齐上下文中多个对齐主体的基线(baseline)之间的关系。
    • +
  • 分布对齐(Distributed alignment)：这些关键字把对齐看作多个对齐主体间空间的分布
    • +
+ +

位置对齐关键字的值

+ +

以下这些值是为位置对齐定义的，并且可以用于指定内容对齐的 justify-content 和 align-content 属性与指定自对齐的 justify-self 和 align-self 属性上。

+ +
    +
  • center
    • +
  • start
    • +
  • end
    • +
  • self-start
    • +
  • self-end
    • +
  • flex-start 仅用于弹性盒子布局
    • +
  • flex-end 仅用于弹性盒子布局
    • +
  • left
    • +
  • right
    • +
+ +

除了与屏幕的物理属性相关的物理值 left 与 right 之外，其他的所有值都是与内容的书写模式相关的逻辑值。

+ +

比如，当使用 CSS 网格布局时，如果你使用了英语并且把 justify-content 设为 start ，那么这一设置将会在行内维度上把项目移动到起始位置，也就是左侧，因为英语中句子的开头就在左侧。如果你使用的是阿拉伯语，一种从左到右书写的语言，那么相同的 start 值会导致项目移动到右侧，因为页面的右手边才是阿拉伯语中句子的开头。

+ +

这两个例子都设置了 justify-content: start，但是起始位置却随着书写模式而改变了。

+ +

+ +

基线对齐

+ +

基线对齐的关键词是用于对齐一组对齐主体的盒子的基线的。他们可以用于指定内容对齐的 justify-content 和 align-content 属性与指定自对齐的 justify-self 和 align-self 属性上。

+ +
    +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +

基线内容对齐——为 justify-content 或 align-content 指定基线对齐——适用于把项目按行排列的布局方法。通过在盒子内添加填充，使对齐主体的基线彼此对齐。

+ +

基线自对齐通过在盒子外部增加外边距，从而移动盒子，实现对齐。自对齐是指当使用 justify-self 或 align-self，又或者或者将以上两值用 justify-items 或 align-items 成组设置的情况。

+ +

分布对齐

+ +

分布对齐关键字 是用于 align-content 和 justify-content 属性的。这些关键字定义了在已经显示对齐主体后，其余的所有空间会发生什么。取值如下：

+ +
    +
  • stretch
    • +
  • space-between
    • +
  • space-around
    • +
  • space-evenly
    • +
+ +

例如在弹性布局中，初始时是通过 flex-start 对齐项目的。在使用水平的，自上而下的书写模式（如英文或中文）时，若 flex-direction 设为 row ，那么项目将从最左边开始，显示项目后的所有可用空间都放置在项目之后。

+ +

+ +

如果你在弹性容器上设置了 justify-content: space-between ，那么可用空间会被共享并放置在项目之间。

+ +

+ +

为了使这些关键字生效，在项目要对齐的维度上必须有可用空间。没有空间，就没有空间可以分布。

+ +

溢出对齐

+ +

safe 与 unsafe 关键字可以帮助我们定义当对齐主体比对齐容器更大时的表现。safe 关键字会在一个指定的对齐方式导致了溢出时对齐到 start ，其目的是避免“数据丢失”，即项目的一部分超出了对齐容器的边界并且无法滚动到该位置。

+ +

如果你指定 unsafe ，那么即使对齐方式会导致数据丢失也会按照该对齐方式来对齐。

+ +

盒子间的间隔

+ +

盒子对齐规范还包括 gap, row-gap，和 column-gap 属性。这些属性允许在一行或一列之间设置一致的间隔，只要布局是用这种方法排列项目的。

+ +

gap 属性是 row-gap 和 column-gap 属性的简写，让我们可以一次性的设置这些属性：

+ +
    +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+ +

在下面的例子中，一个网格布局使用了 gap 简写来在行轨道上设置 10px 的间隙，在列轨道上设置 2em 的间隙。

+ +

{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}

+ +

下面这个例子在 {{cssxref("gap")}} 之外我还使用了 {{cssxref("grid-gap")}} 属性。gap 属性原本在网格布局中是拥有 grid- 前缀的，而有些浏览器只支持这些有前缀的版本。

+ +
    +
  • {{cssxref("grid-row-gap")}}
    • +
  • {{cssxref("grid-column-gap")}}
    • +
  • {{cssxref("grid-gap")}}
    • +
+ +

带前缀的版本将作为未带前缀版本的别名保留，不过你对于这些第三方的前缀你总是可以两者兼取，加上一个 grid-gap 属性然后再加上一个具有相同的值的 gap 属性。

+ +

另外，请注意其他的东西可能会增加显示的视觉间隔，例如使用空间分布关键字或为项目增加外边距。

+ +

详细说明各个对齐属性的页面

+ +

由于CSS盒子对齐属性的实现方式取决于与它们相交互的规范，因此请参见以下每种布局类型的页面，以获取关于如何将对齐属性与其一起使用的详细信息：

+ + + +

参考

+ +

CSS 属性

+ +
+
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("place-content")}}
    • +
  • {{cssxref("justify-items")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("place-items")}}
    • +
  • {{cssxref("justify-self")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("place-self")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+
+ +

词汇表

+ +
+
    +
  • {{Glossary("Cross axis")}}
    • +
  • {{Glossary("Main axis")}}
    • +
  • {{Glossary("Alignment container")}}
    • +
  • {{Glossary("Alignment subject")}}
    • +
  • {{Glossary("Fallback alignment")}}
    • +
+
+ +

指南

+ + + +

外部资源

+ + diff --git a/files/zh-cn/web/css/css_box_model/box-shadow_generator/index.html b/files/zh-cn/web/css/css_box_model/box-shadow_generator/index.html new file mode 100644 index 0000000000..3fb264bc40 --- /dev/null +++ b/files/zh-cn/web/css/css_box_model/box-shadow_generator/index.html @@ -0,0 +1,2880 @@ +--- +title: Box-shadow generator +slug: Web/CSS/CSS_Box_Model/Box-shadow_generator +translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +--- +

这个可视化工具可以帮助你生成一个元素的CSS{{cssxref("box-shadow")}}相关代码，添加box shadow效果到你的CSS对象上。

+ +
+

box-shadow generator

+ +

HTML Content

+ +
<div id="container">
+    <div class="group section">
+        <div id="layer_manager">
+            <div class="group section">
+                <div class="button" data-type="add"> </div>
+                <div class="button" data-type="move-up"> </div>
+                <div class="button" data-type="move-down"> </div>
+            </div>
+            <div id="stack_container"></div>
+        </div>
+
+        <div id="preview_zone">
+            <div id="layer_menu" class="col span_12">
+                <div class="button" id="element" data-type="subject" data-title="element"> element </div>
+                <div class="button" id="before" data-type="subject" data-title=":before">
+                    :before
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="button" id="after" data-type="subject" data-title=":after">
+                    :after
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="ui-checkbox" data-topic='before' data-label=":before"></div>
+                <div class="ui-checkbox" data-topic='after' data-label=":after"></div>
+            </div>
+
+            <div id="preview">
+                <div id="obj-element">
+                    <div class="content"> </div>
+                    <div id="obj-before"> </div>
+                    <div id="obj-after"> </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="controls" class="group section">
+        <div class="wrap-left">
+            <div class="colorpicker category">
+                <div class="title"> </div>
+                <div id="colorpicker" class="group">
+                    <div id="gradient" class="gradient">
+                        <div id="gradient_picker"> </div>
+                    </div>
+                    <div id="hue" data-topic="hue" class="hue">
+                        <div id="hue_selector"> </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div>
+                        <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div>
+                        <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div>
+                    </div>
+                    <div class="alpha">
+                        <div id="alpha" data-topic="alpha">
+                            <div id="alpha_selector"> </div>
+                        </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div>
+                        <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div>
+                        <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div>
+                    </div>
+                    <div class="preview block">
+                        <div id="output_color"> </div>
+                    </div>
+                    <div class="block info">
+                        <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div>
+                        <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="wrap-right">
+
+            <div id="shadow_properties" class="category">
+                <div class="title"> Shadow properties </div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> inset </div>
+                        <div class="ui-checkbox" data-topic='inset'></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position x </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posX" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position y </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posY" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Blur </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="blur" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Spread </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="spread" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="element_properties" class="category">
+                <div class="title"> Class element properties </div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> border </div>
+                        <div class="ui-checkbox" data-topic='border-state' data-state="true"></div>
+                    </div>
+                    <div id="z-index" class="slidergroup">
+                        <div class="ui-slider-name"> z-index </div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"></div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="z-index"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> top </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="top" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> left </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="left" data-unit="px"></div>
+                    </div>
+                    <div id="transform_rotate" class="slidergroup">
+                        <div class="ui-slider-name"> Rotate </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Width </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="width"  data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Height </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="height" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="output" class="category">
+                <div id="menu" class="menu"></div>
+                <div class="title">    CSS Code </div>
+                <div class="group" style="border-top-left-radius: 0;">
+                    <div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow">
+                    </div>
+                    <div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                    <div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+ +

CSS Content

+ +
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+/*
+ * UI Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input > input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox > label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox > input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left > * {
+	float: left;
+}
+
+.wrap-right > * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview > * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] > span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] > span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] > input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+
+ +

JavaScript Content

+ +

+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = function(node) {
+		var min = node.getAttribute('data-min') | 0;
+		var max = node.getAttribute('data-max') | 0;
+		var step = node.getAttribute('data-step') | 0;
+		var value = node.getAttribute('data-value') | 0;
+		var snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value <= max && value >= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step <= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step >= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos < 0) pos = 0;
+		if (pos > width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision > this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value > slider.max || value < slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x > size)
+				x = size;
+			if (y > size)
+				y = size;
+
+			if (x < 0) x = 0;
+			if (y < 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x < 0) x = 0;
+			if (x > width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x < 0) x = 0;
+			if (x > width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value < 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null && this.stack.children.length >= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'shadow ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count <= 1 || this.layer === null)
+				return;
+			if (direction === -1 && this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 && this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index > this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count >= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index < this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i < size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false && active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true && active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false && active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true && active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+ +
{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}
+ +

Related Tool: Box Shadow CSS Generator

diff --git a/files/zh-cn/web/css/css_box_model/index.html b/files/zh-cn/web/css/css_box_model/index.html new file mode 100644 index 0000000000..8d0de27817 --- /dev/null +++ b/files/zh-cn/web/css/css_box_model/index.html @@ -0,0 +1,112 @@ +--- +title: CSS 基础框盒模型 +slug: Web/CSS/CSS_Box_Model +tags: + - CSS +translation_of: Web/CSS/CSS_Box_Model +--- +

{{CSSRef}}

+ +

CSS 基础框盒模型是 CSS 规范的一个模块，它定义了一种长方形的盒子——包括它们各自的内边距（padding）与外边距（margin ），并根据视觉格式化模型来生成元素，对其进行布置、编排、布局（lay out）。常被直译为盒子模型、盒模型或框模型。

+ +

CSS 基础框盒模型一般仅针对单个元素及其边距、内容进行布局，而非对多个元素进行综合的排版，即使外边距合并等特性涉及二个或二个以上元素之间部分属性的交互反馈。

+ +

参考

+ +

属性

+ +

控制框盒中内容流的属性

+ +
+
    +
  • {{CSSxRef("overflow")}}
    • +
  • {{CSSxRef("overflow-x")}}
    • +
  • {{CSSxRef("overflow-y")}}
    • +
+
+ +

控制框盒大小的属性

+ +
+
    +
  • {{CSSxRef("height")}}
    • +
  • {{CSSxRef("width")}}
    • +
  • {{CSSxRef("max-height")}}
    • +
  • {{CSSxRef("max-width")}}
    • +
  • {{CSSxRef("min-height")}}
    • +
  • {{CSSxRef("min-width")}}
    • +
+
+ +

控制外边距 Margin 的属性

+ +
+
    +
  • {{CSSxRef("margin")}}
    • +
  • {{CSSxRef("margin-bottom")}}
    • +
  • {{CSSxRef("margin-left")}}
    • +
  • {{CSSxRef("margin-right")}}
    • +
  • {{CSSxRef("margin-top")}}
    • +
  • {{CSSxRef("margin-trim")}} {{Experimental_Inline}}
    • +
+
+ +

控制内边距 Padding 的属性

+ +
+
    +
  • {{CSSxRef("padding")}}
    • +
  • {{CSSxRef("padding-bottom")}}
    • +
  • {{CSSxRef("padding-left")}}
    • +
  • {{CSSxRef("padding-right")}}
    • +
  • {{CSSxRef("padding-top")}}
    • +
+
+ +

其他属性

+ +
+
    +
  • {{CSSxRef("visibility")}}
    • +
+
+ +

指南

+ +
+
CSS 基础框盒模型介绍
+
解释了 CSS 的根本概念之一：框盒模型。该模型定义了 CSS 如何对元素的各个组成进行布局（lays out），这些组成包括他们的内容 Content、内边距 Padding、边框 Border，和外边距 Margin。
+
掌握外边距合并
+
有时，两个相邻的外边距会折叠合并成一个。本文介绍了控制此特性的规则，比如合并何时发生、为何发生；以及应当如何控制它。
+
视觉格式化模型
+
解释了视觉格式化模型（visual formatting model）是什么，以及它的作用。
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}}Added margin-trim
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition.
diff --git a/files/zh-cn/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/zh-cn/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..90e9c23798 --- /dev/null +++ b/files/zh-cn/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,82 @@ +--- +title: CSS 基础框盒模型介绍 +slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +tags: + - CSS Box Model + - 定位 + - 布局 + - 指南 +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +

{{CSSRef}}

+ +
+

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。

+ +

每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

+ +

CSS Box model

+ +

内容区域 content area ，由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。它的尺寸为内容宽度（或称 content-box 宽度）和内容高度（或称 content-box 高度）。它通常含有一个背景颜色（默认颜色为透明）或背景图像。

+ +

如果 {{cssxref("box-sizing")}} 为 content-box（默认），则内容区域的大小可明确地通过 {{cssxref("width")}}、{{cssxref("min-width")}}、{{cssxref("max-width")}}、{{cssxref("height")}}、{{cssxref("min-height")}}，和 {{cssxref("max-height")}} 控制。

+ +

内边距区域 padding area 由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度 和 padding-box 高度。

+ +

内边距的粗细可以由 {{cssxref("padding-top")}}、{{cssxref("padding-right")}}、{{cssxref("padding-bottom")}}、{{cssxref("padding-left")}}，和简写属性 {{cssxref("padding")}} 控制。

+ +

边框区域 border area 由边框边界限制，扩展自内边距区域，是容纳边框的区域。其尺寸为 border-box  宽度 和 border-box 高度。

+ +

边框的粗细由 {{cssxref("border-width")}} 和简写的 {{cssxref("border")}} 属性控制。如果 {{cssxref("box-sizing")}} 属性被设为 border-box，那么边框区域的大小可明确地通过 {{cssxref("width")}}、{{cssxref("min-width")}}, {{cssxref("max-width")}}、{{ cssxref("height") }}、{{cssxref("min-height")}}，和 {{cssxref("max-height")}} 属性控制。假如框盒上设有背景（{{cssxref("background-color")}} 或 {{cssxref("background-image")}}），背景将会一直延伸至边框的外沿（默认为在边框下层延伸，边框会盖在背景上）。此默认表现可通过 CSS 属性 {{cssxref("background-clip")}} 来改变。

+ +

外边距区域 margin area 由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度 和 margin-box 高度。

+ +

外边距区域的大小由 {{cssxref("margin-top")}}、{{cssxref("margin-right")}}、{{cssxref("margin-bottom")}}、{{cssxref("margin-left")}}，和简写属性 {{cssxref("margin")}} 控制。在发生外边距合并的情况下，由于盒之间共享外边距，外边距不容易弄清楚。

+ +

最后，请注意，除可替换元素外，对于行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（每一行文字的高度）则由 {{cssxref('line-height')}} 属性决定，即使边框和内边距仍会显示在内容周围。

+
+ +

参见

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('CSS3 Box', '#intro')}}{{Spec2('CSS3 Box')}} 
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Though more precisely worded, there is no practical change.
+ 尽管有了更详尽的描述，但没有实际上的变化。
{{SpecName("CSS1","#formatting-model")}}{{Spec2('CSS1')}}Initial definition.
+ 最初的定义。
+ +

参见

+ +
    +
  • {{css_key_concepts}}
    • +
diff --git a/files/zh-cn/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/zh-cn/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..d1b40704cf --- /dev/null +++ b/files/zh-cn/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,151 @@ +--- +title: 外边距重叠 +slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +tags: + - CSS + - CSS 盒模型 + - 参考 + - 指南 +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +

块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。

+ +
+

注意有设定float和position=absolute的元素不会产生外边距重叠行为。

+
+ +
+ +

有三种情况会形成外边距重叠：

+ +
+
同一层相邻元素之间
+
相邻的两个元素之间的外边距重叠，除非后一个元素加上clear-fix清除浮动。
+
+ +
<style>
+p:nth-child(1){
+  margin-bottom: 13px;
+}
+p:nth-child(2){
+  margin-top: 87px;
+}
+</style>
+
+<p>下边界范围会...</p>
+<p>...会跟这个元素的上边界范围重叠。</p>
+ +

这个例子如果以为边界会合并的话，理所当然会猜测上下2个元素会合并一个100px的边界范围，但其实会发生边界折叠，只会挑选最大边界范围留下，所以这个例子的边界范围其实是87px。

+ +
+
没有内容将父元素和后代元素分开
+
    如果没有边框{{cssxref("border")}}，内边距{{cssxref("padding")}}，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界{{cssxref("margin-top")}} 与其内一个或多个后代块级元素的上边界{{cssxref("margin-top")}}；或没有边框，内边距，行内内容，高度{{cssxref("height")}}，最小高度{{cssxref("min-height")}}或 最大高度{{cssxref("max-height")}} 来分开一个块级元素的下边界{{cssxref("margin-bottom")}}与其内的一个或多个后代后代块元素的下边界{{cssxref("margin-bottom")}}，则就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。
+
+ +
<style type="text/css">
+    section    {
+        margin-top: 13px;
+        margin-bottom: 87px;
+    }
+
+    header {
+        margin-top: 87px;
+    }
+
+    footer {
+        margin-bottom: 13px;
+    }
+</style>
+
+<section>
+    <header>上边界重叠 87</header>
+    <main></main>
+    <footer>下边界重叠 87 不能再高了</footer>
+</section>
+ +
+
空的块级元素
+
当一个块元素上边界{{cssxref("margin-top")}} 直接贴到元素下边界{{cssxref("margin-bottom")}}时也会发生边界折叠。这种情况会发生在一个块元素完全没有设定边框{{cssxref("border")}}、内边距{{cssxref("paddng")}}、高度{{cssxref("height")}}、最小高度{{cssxref("min-height")}} 、最大高度{{cssxref("max-height")}} 、内容设定为inline或是加上clear-fix的时候。
+
+ +
<style>
+​​​​​​p {
+  margin: 0;
+}
+div {
+  margin-top: 13px;
+  margin-bottom: 87px;
+}
+</style>
+
+<p>上边界范围是 87 ...</p>
+<div></div>
+<p>... 上边界范围是 87</p>
+ +

一些需要注意的地方：

+ +
    +
  • 上述情况的组合会产生更复杂的外边距折叠。
    • +
  • 即使某一外边距为0，这些规则仍然适用。因此就算父元素的外边距是0，第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。
    • +
  • 如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和,；也就是说如果有-13px 8px 100px叠在一起，边界范围的技术就是 100px -13px的87px。
    • +
  • 如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。
    • +
+ +

以上这些内容都是发生在Block-Level的元素，设定floating和absolutely positioned的元素完全不用担心边界重叠的问题。

+ +

示例

+ +

HTML

+ +
<p>The bottom margin of this paragraph is collapsed …</p>
+<p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>
+
+<div>This parent element contains two paragraphs!
+  <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
+  <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
+</div>
+
+<p>I am <code>2rem</code> below the element above.</p>
+ +

CSS

+ +
div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}
+ +

结果

+ +

{{EmbedLiveSample('示例', 'auto', 350)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}初始定义
+ +

参见

+ +
    +
  • {{css_key_concepts}}
    • +
diff --git a/files/zh-cn/web/css/css_color/index.html b/files/zh-cn/web/css/css_color/index.html new file mode 100644 index 0000000000..e5f5c5f92e --- /dev/null +++ b/files/zh-cn/web/css/css_color/index.html @@ -0,0 +1,111 @@ +--- +title: CSS Color +slug: Web/CSS/CSS_Color +translation_of: Web/CSS/CSS_Color +--- +
{{CSSRef}}
+ +

CSS Color 是一个处理颜色的 CSS 模块，包括颜色类型、颜色混合、不透明度、以及你如何将这些颜色和效果应用于 HTML 内容。

+ +

不是所有把 {{cssxref("<color>")}}  作为值的 CSS 属性都是这个模块的一部分，但是它们确实依赖这个模块。

+ +

参考

+ +

属性

+ +
+
    +
  • {{cssxref("color")}}
    • +
  • {{cssxref("color-adjust")}}
    • +
  • {{cssxref("opacity")}}
    • +
+
+ +

数据类型

+ +
+
    +
  • {{cssxref("<color>")}}
    • +
+
+ +

教程

+ +
+
Applying color to HTML elements using CSS
+
一份用 CSS 将颜色应用于许多不同类型内容上的教程。所有和颜色相关的 CSS 属性都会涉及。
+
+ +

工具

+ +
+
Color picker tool
+
该工具能让你创建、调整和试验自定义颜色变得简单。
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Colors')}}{{Spec2('CSS4 Colors')}}
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}}
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}初次定义
+ +

浏览器兼容性

+ +

color 属性

+ +
+ + +

{{Compat("css.properties.color")}}

+ +

color-adjust 属性

+ +
+ + +

{{Compat("css.properties.color-adjust")}}

+ +

opacity 属性

+ +
+ + +

{{Compat("css.properties.opacity")}}

+
+
+
+ +

同时参阅

+ +
    +
  • 有与颜色有关属性的其他规范: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}
    • +
  • 在 CSS 中，渐变不是颜色，而是 images.
    • +
diff --git a/files/zh-cn/web/css/css_colors/color_picker_tool/index.html b/files/zh-cn/web/css/css_colors/color_picker_tool/index.html new file mode 100644 index 0000000000..ba1302f370 --- /dev/null +++ b/files/zh-cn/web/css/css_colors/color_picker_tool/index.html @@ -0,0 +1,3245 @@ +--- +title: 色彩选择工具 +slug: Web/CSS/CSS_Colors/Color_picker_tool +tags: + - CSS + - CSS颜色选择工具 + - HTML色彩选择工具 + - 工具 + - 颜色 + - 颜色选择 +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +
+

ColorPicker tool

+ +

HTML Content

+ +
    <div id="container">
+        <div id="palette" class="block">
+            <div id="color-palette"></div>
+            <div id="color-info">
+                <div class="title"> CSS Color </div>
+            </div>
+        </div>
+
+        <div id="picker" class="block">
+            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+            <div id="picker-samples" sample-id="master"></div>
+            <div id="controls">
+                <div id="delete">
+                    <div id="trash-can"></div>
+                </div>
+                <div id="void-sample" class="icon"></div>
+            </div>
+        </div>
+
+        <div id="canvas" data-tutorial="drop">
+            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"></div>
+        </div>
+    </div>
+
+
+ +

CSS Content

+ +
/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch > * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property > * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container > * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls > * {
+	float: left;
+}
+
+#color-palette .controls > *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover > * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x > size) x = size;
+		if (y > size) y = size;
+		if (x < 0) x = 0;
+		if (y < 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		// TODO 360 => 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' && mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action >= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action <= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue < 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i < size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i < nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i<16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ +

{{CSSRef}}

+ +

这个工具让创建、修改和测试自定义网页颜色变得简单。它还可以轻松实现多种CSS支持的颜色格式之间的转换，包括：HEXA、RGB（Red/Green/Blue）和 HSL （Hue/Saturation/Lightness）。其中 RGB（rgba）和 HSL（hsla）格式也支持控制阿尔法通道（alpha channel）

+ +

随着调整，每种颜色都呈现为三种标准CSS格式；此外，基于当前选择的颜色，会创建一个HSL和HSV调色板和阿尔法通道。滴管风格的色彩选择框能在HSL或HSV格式间切换。你也可以拖拽多种颜色至色彩选择框的底部使它们重叠，来测试它们的混合效果。调整它们的相对Z值，可以使它们前后移动。

+ +

这个工具将帮助你找到最理想的CSS颜色应用到你的HTML。

+ +

{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}
+ 除非另有说明，否则你所创建生成的颜色可以应用到CSS和HTML的任何一个地方。

+ +

 

+ + + +

 

diff --git a/files/zh-cn/web/css/css_colors/index.html b/files/zh-cn/web/css/css_colors/index.html new file mode 100644 index 0000000000..fab9ceefec --- /dev/null +++ b/files/zh-cn/web/css/css_colors/index.html @@ -0,0 +1,119 @@ +--- +title: CSS Colors +slug: Web/CSS/CSS_Colors +tags: + - CSS + - CSS Colors + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Color +--- +
{{CSSRef}}
+ +

CSS Colors 是 CSS 的一个模块，用于处理颜色、颜色类型和透明度。

+ +

参考 (Reference)

+ +

属性

+ +
+
    +
  • {{cssxref("color")}}
    • +
  • {{cssxref("opacity")}}
    • +
+
+ +

CSS 数据类型

+ +

{{cssxref("<color>")}}

+ +

指南 (Guides)

+ +

None.

+ +

规范 (Specifications)

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
+ +

浏览器兼容性 (Browser compatibility)

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
+ +

另请阅读

+ +
    +
  • 在 CSS 中， gradient 渐变色并非颜色，其实质是 images。
    • +
diff --git a/files/zh-cn/web/css/css_columns/basic_concepts_of_multicol/index.html b/files/zh-cn/web/css/css_columns/basic_concepts_of_multicol/index.html new file mode 100644 index 0000000000..8ec7379cb5 --- /dev/null +++ b/files/zh-cn/web/css/css_columns/basic_concepts_of_multicol/index.html @@ -0,0 +1,91 @@ +--- +title: Basic Concepts of Multicol +slug: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol +translation_of: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol +--- +
{{CSSRef}}
+ +

多列布局（通常称为multicol）是一种规范，用于将内容布置到一组列框中，就像报纸中的列一样。本指南解释了规范如何与一些常见的用例示例一起使用。

+ +

关键概念和术语

+ +

 

+ +

Multicol与CSS中的任何其他布局方法不同，它将内容（包括所有后代元素）分段为列。这与在使用CSS Paged Media时将内容分段为页面的方式相同，例如通过创建打印样式表。

+ +

规范定义的属性有：

+ +
    +
  • {{cssxref("column-width")}}
    • +
  • {{cssxref("column-count")}}
    • +
  • {{cssxref("columns")}}
    • +
  • {{cssxref("column-rule-color")}}
    • +
  • {{cssxref("column-rule-style")}}
    • +
  • {{cssxref("column-rule-width")}}
    • +
  • {{cssxref("column-rule")}}
    • +
  • {{cssxref("column-span")}}
    • +
  • {{cssxref("column-fill")}}
    • +
  • {{cssxref("column-gap")}}
    • +
+ +

通过给一个元素添加 column-count 或 column-width,该元素变成了多列容器,或简称为 multicol 容器。这些列是都是匿名的盒子，在规范中描述为列盒子。

+ +

columns 定义

+ +

创建一个 multicol 容器必须使用至少一个 column-* 属性,这些就是 column-count 和 column-width。

+ +

column-count 属性

+ +

column-count 属性指定你想要显示内容的列的数量。浏览器会将正确分配的空间给每列并创建需要的列数。

+ +

在以下示例中,我们使用 column-count 属性在.container 元素上创建三列 。.container 元素的内容包括其子元素都会分裂成三列。

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}

+ +

在上面的例子中内容被段落 p 标签的默认样式包裹。因此,每段都有一个间距。你可以看到这个间距引起第一行文本被推了下来。这是因为 multicol 容器创建了一个新的块格式化上下文（BFC)，这意味着子元素的间距不会与父容器的间距互相重叠。

+ +

 column-width 属性

+ +

column-width 属性用于给每列设置一个最佳宽度。如果你声明 column-width,浏览器将算出 该宽度在multicol 容器能分多少列，并且把额外的的空间填充到这些列当中。因此,应将列宽视为最小宽度,因为由于额外的空间，列可能而更宽。

+ +

当单个列的可用宽度小于 column-width 的值的情况下，列的宽度会缩小为小于所声明的列宽。

+ +

在以下示例中，我们使用 column-width 属性值为200 px。但最终为了适配容器，列的宽度却大于200像素，额外的空间被平均分配了。

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-width.html", '100%', 550)}}

+ +

同时使用 column-count 和 column-width 

+ +

如果在 multicol 容器上指定这两个属性，则 column-count 将作为最大列数。因此，将按column-width 的值计算，直到达到 column-count 定义的列数。在此之后，即使有足够的空间容纳指定列宽大小的列，也不再绘制，并且额外空间在现有列之间均匀分布。

+ +

同时使用这两个属性时，可能会获得的列数少于 column-count 数值中指定的列数。

+ +

在下一个例子中，我们使用 column-width 的值为 200px，column-count 的值为 2。即使有超过两列的空间，我们也得到两个。如果没有足够的空间容纳两列 200px，我们得到一个。

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count-width.html", '100%', 550)}}

+ +

columns 缩写

+ +

您可以使用 columns 缩写来设置 column-count 和 column-width。如果设置长度单位，这将用于 column-width，设置一个整数，它将用于 column-count。您可以设置两者，用空格分隔这两个值。

+ +

此 CSS 结果与示例1相同，column-count 设置为3。

+ +
.container {
+  columns: 3;
+}
+ +

此 CSS 结果与示例2相同，column-width 为200px。

+ +
.container {
+  columns: 200px;
+}
+ +

此 CSS 结果与示例3相同，同时设置 column-count 和 column-width。

+ +
.container {
+  columns: 2 200px;
+}
+ +

下一步

+ +

在本指南中，我们学习了多列布局的基本用法。在下一个指南中，我们将看看我们可以为列本身设置多少样式。

diff --git a/files/zh-cn/web/css/css_columns/handling_overflow_in_multicol/index.html b/files/zh-cn/web/css/css_columns/handling_overflow_in_multicol/index.html new file mode 100644 index 0000000000..886a661776 --- /dev/null +++ b/files/zh-cn/web/css/css_columns/handling_overflow_in_multicol/index.html @@ -0,0 +1,49 @@ +--- +title: 处理 Multicol 中的溢出 +slug: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol +tags: + - CSS + - Guide + - Layout + - multi-column +translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol +--- +
{{CSSRef}}
+ +

在本指南中，我们将了解 multicol 如何处理溢出，包括在列框内以及内容超出容器容量的情况。

+ +

column boxes 内部溢出

+ +

当子项的大小大于列框时，就会发生溢出。例如，当列中的图像宽度大于 column-width 值或 column-count 声明的列数禅城的列宽度时，就可能会发生这种情况。

+ +

在这种情况下，内容溢出（并且是可见的）到下一列，而不是被列框裁切。你可以在下面的示例中看到，在编写本文时，浏览器以不同的方式处理预期的呈现图像。

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}

+ +

+ +

如果你想要一个图像尺寸缩小到适合列框，标准的响应式的解决方案是设置最大宽度:100%。

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}

+ +

更多的列

+ +

如何处理溢出的列取决于是在一个片段化的媒体上下文（比如打印）中，还是在一个连续的媒体上下文（比如 web 页面）中。

+ +

在一个片段化的媒体中，一旦碎片（例如页面）中充满了列，多出的列将移至新页面。 在连续介质中，列将沿横向溢出。 在 web 上，这意味着水平滚动条的出现。

+ +

下面的示例显示了这种溢出行为。multicol 容器有一个高度，列的文本多于空间，因此多出的列会在容器外面出现。

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}

+ +

本规范的未来版本中，会允许横向溢出的列向下排列，用户能向下滚动鼠标查看溢出的列。

+ +

使用纵向的媒体查询

+ +

multicol 在 web 上的一个问题：如果你的列比 viewport 高，读者需要上下滚动来阅读，这样的用户体验不好。避免这种情况的一种方法是，只有在有足够的高度时才应用列属性。

+ +

在下面的示例中，我们使用了 min-height。

+ +

{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}

+ +

在本系列的最后一篇指南中，我们将看到片段化下的 Muticol 如何使用的规范，去控制列内容的溢出。

diff --git a/files/zh-cn/web/css/css_columns/index.html b/files/zh-cn/web/css/css_columns/index.html new file mode 100644 index 0000000000..d9492d2552 --- /dev/null +++ b/files/zh-cn/web/css/css_columns/index.html @@ -0,0 +1,127 @@ +--- +title: CSS 多列布局 +slug: Web/CSS/CSS_Columns +tags: + - CSS + - CSS参考 + - NeedsTranslation + - Overview + - TopicStub + - 概述 +translation_of: Web/CSS/CSS_Columns +--- +
{{CSSRef("CSS3 Multicol")}}
+ +

CSS多列布局（CSS Multi-column Layout）是一种定义了多栏布局的模块，可支持在布局中建立列（column）的数量，以及内容如何在列之间流动（flow）、列之间的间距（gap）大小，以及列的分隔线（column rules）。

+ +

基本示例

+ +

在下列示例中，{{cssxref("column-count")}}属性应用于带有容器类的元素。因为column-count的值为3，所以内容排成等宽的3列。

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}

+ +

Relationship to Fragmentation

+ +

Multiple-column Layout is closely related to Paged Media, in that each column box becomes a fragment, much like a printed page becomes a fragment of an overall document. Therefore the properties now defined in the CSS Fragmentation specification are required in order to control how content breaks between columns. 

+ +

参考

+ +

多列布局属性

+ +
+
    +
  • {{cssxref("column-count")}}
    • +
  • {{cssxref("column-fill")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("column-rule")}}
    • +
  • {{cssxref("column-rule-color")}}
    • +
  • {{cssxref("column-rule-style")}}
    • +
  • {{cssxref("column-rule-width")}}
    • +
  • {{cssxref("column-span")}}
    • +
  • {{cssxref("column-width")}}
    • +
  • {{cssxref("columns")}}
    • +
+
+ +

有关的CSS碎片化属性

+ +
+
    +
  • {{cssxref("break-after")}}
    • +
  • {{cssxref("break-before")}}
    • +
  • {{cssxref("break-inside")}}
    • +
+
+ +

指南

+ +
+
多列的基本概念
+
多列布局的概述
+
设置列的样式
+
如何使用列的分隔线，以及设置列间距。
+
Spanning and Balancing
+
How to make elements span across all columns and controlling the way columns are filled.
+
Handling Overflow in Multicol
+
What happens when an item overflows the column it is in and what happens when there is too much columned content to fit a container.
+
Content Breaks in Multicol
+
Introduction to the Fragmentation specification and how to control where column content breaks.
+
+ + + +

规范

+ + + + + + + + + + + + + + + + +
指定状态注释
{{SpecName('CSS3 Multicol')}}{{Spec2('CSS3 Multicol')}}初始定义
+ +
+ + + + + + + + + + + + + + + + + + + +
+ +

+ +

参见

+ +

其它CSS布局方法包括：

+ + + +
+
+
diff --git a/files/zh-cn/web/css/css_conditional_rules/index.html b/files/zh-cn/web/css/css_conditional_rules/index.html new file mode 100644 index 0000000000..57033a506d --- /dev/null +++ b/files/zh-cn/web/css/css_conditional_rules/index.html @@ -0,0 +1,82 @@ +--- +title: CSS Conditional Rules +slug: Web/CSS/CSS_Conditional_Rules +tags: + - CSS + - CSS Conditional Rules + - Guide + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Conditional_Rules +--- +
{{CSSRef}}
+ +

CSS Conditional Rules is a CSS module that allows to define a set of rules that will only apply based on the capabilities of the processor or the document the style sheet is being applied to.

+ +

Reference

+ +

At-rules

+ +
+
    +
  • {{cssxref("@document")}}
    • +
  • {{cssxref("@media")}}
    • +
  • {{cssxref("@supports")}}
    • +
  • {{cssxref("@import")}}
    • +
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Initial definition
+ +

Browser compatibility

+ +

@document rule

+ +
+ + +

{{Compat("css.at-rules.document")}}

+ +

@import rule

+ +
+ + +

{{Compat("css.at-rules.import")}}

+
+ +

@media rule

+ +
+ + +

{{Compat("css.at-rules.media")}}

+ +

@supports rule

+ +
+ + +

{{Compat("css.at-rules.supports")}}

+
+
+
diff --git a/files/zh-cn/web/css/css_conditional_rules/using_feature_queries/index.html b/files/zh-cn/web/css/css_conditional_rules/using_feature_queries/index.html new file mode 100644 index 0000000000..f6924c0be6 --- /dev/null +++ b/files/zh-cn/web/css/css_conditional_rules/using_feature_queries/index.html @@ -0,0 +1,114 @@ +--- +title: 使用特性查询 +slug: Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries +tags: + - CSS + - 指南 + - 渐进式增强 + - 特性查询 + - 状态CSS +translation_of: Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries +--- +
{{CSSRef}}
+ +
+ +

特性查询 使用CSS的at规则 @supports 创建。它给予web开发者一种测试浏览器是否有对某个确定特性的支持，而后提供基于测试结果生效的CSS的方法。在此指南中你将学习如何使用特性查询实现渐进式增强。

+ +

语法

+ +

CSS特性查询是 CSS Conditional Rules module 标准的一部分，这一标准也包含了媒体查询 @media 规则；在你使用特性查询的时候，你会发现它们的行为方式与媒体查询类似。不同点在于媒体查询是测试网页运行的环境相关内容，但特性查询测试的是浏览器对CSS特性的支持。

+ +

特性查询由 @supports 规则组成，紧跟着是属性名以及你想测试的属性值。你不能测试一个单单的属性名比如 display；规则需要你提供一个属性名以及一个值：

+ +
@supports (property: value) {
+  将要应用的CSS规则
+}
+ +

比如，若你想检测一个浏览器是否支持 row-gap 属性，你应当写下如下的特性查询。大部分情况下这个查询结果与你所使用的值无关——也就是如果你想仅仅检测浏览器是否支持这个CSS属性，那么任何有效的属性值都可以。

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/simple.html", '100%', 600)}}

+ +

若你测试的是某个属性的新值，那么属性-值对中值的那一部分就更加关键。display 属性就是一个很好的例子。所有的浏览器都支持 display 属性，这可以追溯到CSS1中的 display: block 。 然而 display: flex 和 display: grid 这些值是新出现的。CSS属性经常会有额外的新值加入，所以你必须检测属性与值的事实意味着你可以检测那些值的浏览器支持性。（原文：There are often additional values added to properties in CSS, and so the fact that you have to test for property and value means that you can detect support for these values.）

+ +

测试是否缺少支持

+ +

除了测试浏览器是否支持某个特性外，你也可以通过添加 not 关键字测试浏览器是否不支持某个特性。

+ +
@supports not (property: value) {将要应用的CSS规则
+}
+ +

下述特性查询中的CSS规则仅会在浏览器不支持 row-gap 属性的情况下生效。

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/not.html", '100%', 600)}}

+ +

测试多个特性

+ +

你可能需要在功能查询中测试对多个属性的支持。为此，你应当包含要测试的功能的列表，使用 and 关键字分隔：

+ +
@supports (property1: value) and (property2: value) {
+  将要应用的CSS规则
+}
+ +

比如，若你想要应用的CSS需要浏览器支持CSS Shape与CSS Grid，你可以创建可以同时检测这两个特性的规则。下述规则只有在浏览器同时支持 shape-outside: circle() 和display: grid 的时候才会返回true。

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/and.html", '100%', 600)}}

+ +

你也可以使用 or，如果所有规则中有一个规则可以匹配那么你想应用的CSS样式就会被启用。

+ +
@supports (property1: value) or (property2: value) {
+  将要应用的CSS规则
+}
+ +

你可以在测试时为任何标准属性加上浏览器引擎前缀，然后测试特定引擎的CSS支持性，这非常有用。

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/or.html", '100%', 600)}}

+ +

特性查询的局限性

+ +

@supports 规则测试浏览器是否能解析一个或多个属性以及其值，以及是否浏览器是否觉得支持这些属性以及其值。如果浏览器理解这些属性和值，那么它就会给一个肯定的回答。因此，特性查询不能检测浏览器是否正确地表现这些属性和值，以及是否没有bug存在。

+ +

另外，特性查询无法检测局部实现 （partial implementations）。一个很好的例子就是 gap 属性。 所有支持CSS Grid的浏览器都支持 gap 在CSS Grid中， 然而只有Firefox浏览器支持Flexbox中的  gap。 若你为了在Flexbox中使用 gap 属性而测试其浏览器支持，就算它还没有（在Flexbox中）实现你也会得到浏览器肯定的回答。

+ +

如何使用特性查询进行渐进式增强

+ +

在逐步增强一个站点时，特性查询是一个非常有用的工具。它们使您能够为所有浏览器提供良好的解决方案，并为那些支持新特性的浏览器提供增强的解决方案。

+ +

然而，某些浏览器既不支持特性查询，也不支持我们希望使用的特性。例如，我们也许希望使用CSS Grid，但IE11不支持它。我们也不能为其创建一个针对没有Grid支持的浏览器的后备样式，因为IE11也不支持特性查询。然而在实践中，当使用特性查询进行渐进增强时，然而这并不重要。你确实需要有一个组织CSS的方式，那么应当先为不支持新特性的浏览器编写CSS样式，然后在特性查询中进行覆盖。

+ +

让我们看一个非常简单的例子，在这个例子中，特性查询就派上用场了，它使用上述的方式来组织CSS。

+ +

假设我们想要创建一行三个盒子的布局，理想情况下，我们想要使用 CSS Grid Layout 布局。但是，我们希望有一个使用浮动（floats）的旧浏览器的布局。我们可以先用下面的代码创建浮动布局，它提供了三个列。

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/step1.html", '100%', 900)}}

+ +

浏览器会忽略其无法识别的CSS属性或者值。所以我们可以开始使用CSS Grid来增强我们的布局。不支持Grid的浏览器将会忽略 display 属性的 grid 值。一旦一个浮动项成为网格项，浮动就会被移除——你可以阅读 Supporting Older Browsers 来了解更多。因此浮动的版本就会被网格的版本替代。

+ +

然而问题来了，起因于我们为了使浮动项目显示为三列而在上面设置的 width 属性，它现在被网格解释为列在网格中的宽度，而不是容器的宽度（相对于浮动布局）。

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/step2.html", '100%', 900)}}

+ +

如果 display: grid 是被浏览器支持的，我们就需要一个方法去移除width属性。这正是特性查询所解决的问题，当Grid被支持的时候，我们就能将 width 设置回 auto 。

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/step3.html", '100%', 900)}}

+ +

在上述场景中，IE11是否支持特性查询或者CSS Grid已经无关紧要——不论何时它都能获得float的版本，然后在支持Grid的浏览器中这一行为就会被覆盖。

+ +

编写上述代码的另一种方法是将所有网格代码包装在一个特性查询中，如下所示。

+ +

{{EmbedGHLiveSample("css-examples/feature-queries/step4.html", '100%', 900)}}

+ +

这意味着你可能需要一些额外代码，但也有好处，你可以通过故意写错属性或者值的名字来测试你的后备代码。你可以通过修改上面在线例子中的 display: grid 为 display: grip 或者其他无效值来尝试。

+ +

总结

+ +

功能查询可以帮助您开始使用更新的功能，它可以增强旧浏览器使用的简单的站点的显示。由于可以针对其支持的浏览器而打包CSS，因此不会有后退显示使用的样式漏出的风险（原文：you do not run the risk of styles used for the fallback display leaking through），就像上面的Grid示例那样。

+ +

参见

+ + diff --git a/files/zh-cn/web/css/css_containment/index.html b/files/zh-cn/web/css/css_containment/index.html new file mode 100644 index 0000000000..a1f5c51af0 --- /dev/null +++ b/files/zh-cn/web/css/css_containment/index.html @@ -0,0 +1,123 @@ +--- +title: CSS Containment +slug: Web/CSS/CSS_Containment +translation_of: Web/CSS/CSS_Containment +--- +

{{CSSRef}}
+ CSS Containment 主要是通过允许开发者将某些子树从页面中独立出来，从而提高页面的性能。如果浏览器知道页面中的某部分是独立的，就能够优化渲染并获得性能提升。 这个定义通过一个 CSS 属性 {{cssxref("contain")}}来实现。本文阐述了这个定义的基础用法。

+ +

基本示例

+ +

大多数的网页都包含了一些独立于网页中其他部分的区块。比如一个包含文章标题和内容的列表，如下：

+ +
<h1>My blog</h1>
+<article>
+  <h2>Heading of a nice article</h2>
+  <p>Content here.</p>
+</article>
+<article>
+  <h2>Another heading of another article</h2>
+  <p>More content here.</p>
+</article>
+ +

每个 article 区块的 CSS 中都有 {{cssxref("contain")}} 属性，其值为 content.

+ +
article {
+  contain: content;
+}
+ +

在这个页面中，每个 article 都独立于其他的 article，所以，他们都被设置了 contain: content 属性，为了告诉浏览器他们相互独立。浏览器就可以通过这个信息来确定，如何渲染这些内容。比如，他可能不会渲染超出视图范围外的内容。

+ +

如果我们给每个 <article> 节点都设置其 contain 属性为 content， 当新的内容被加入到该节点中时，浏览器就知道不用重拍和重绘节点以外的页面内容，但如果 <article>  设置了其 CSS 属性能让其大小根据其内容改变（比如 height: auto）， 浏览器依旧会进行其大小的计算。

+ +

我们通过 contain 属性告诉浏览器，这些节点是独立的。

+ +

content 其实是 contain: layout paint 的缩写。他告诉浏览器，该节点内部的渲染和排版完全独立于外部的其他内容，并且所有的内容渲染都只限定在其节点边界内部，溢出的部分不会显示。

+ +

“节点的独立性”这个信息对于开发者来说，其实是事先知道的。但浏览器却不能够从你的内容里推测出哪些部分会是独立的。因此，这个属性给予了浏览器知晓这个信息的能力，并且允许其通过这个信息来进行一些可观的性能优化。

+ +

关键概念和术语

+ +

这个规范的定义只有一个属性， {{cssxref("contain")}}。他的值表明你想用何种方式控制其 containment。

+ +

Layout containment

+ +
article {
+  contain: layout;
+}
+ +

布局的影响通常是整个页面的，比如你移动了某个节点，不论你是把它移动到哪儿，浏览器都会重新计算整个页面的布局。通过使用 contain: layout 你可以告诉浏览器，它只会影响到该节点内部的布局，所有内部的改变都不会影响外部页面的布局，这个容器建立了一个独立的格式化上下文。

+ +

额外注意：

+ +
    +
  • float 布局会独立存在。
    • +
  • 布局边界不会存在边距塌陷。
    • +
  • 该布局容器会成为 absolute/fixed 定位的。
    • +
  • 容器会创建一个栈式上下文，因此可以使用 {{cssxref("z-index")}}。
    • +
+ +

Paint containment

+ +
article {
+  contain: paint;
+}
+ +

Paint containment essentially clips the box to the padding edge of the principal box. There can be no visible overflow. The same things are true for paint containment as layout containment (see above).

+ +

Another advantage is that if the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box.

+ +

Size containment

+ +
article {
+  contain: size;
+}
+ +

Size containment does not offer much in the way of performance optimizations when used on its own. However, it means that the size of the element's children cannot affect the size of the element itself — its size is computed as if it had no children.

+ +

If you turn on contain: size you need to also specify the size of the element you have applied this to. It will end up being zero-sized in most cases, if you don't manually give it a size.

+ +

Style containment

+ +
article {
+  contain: style;
+}
+ +

Despite the name, style containment does not provide scoped styles such as you would get with the Shadow DOM. The main use case is to prevent situations where a CSS Counter could be changed in an element, which could then affect the rest of the tree. 

+ +

Using contain: style would ensure that the {{cssxref("counter-increment")}} and {{cssxref("counter-set")}} properties created new counters scoped to that subtree only.

+ +
+

Note: style containment is "at-risk" in the spec and may not be supported everywhere (it's not currently supported in Firefox).

+
+ +

特殊值

+ +

存在两个特殊的值：

+ +
    +
  • content
    • +
  • strict
    • +
+ +

We encountered the first in the example above. Using contain: content turns on layout and paint containment. The specification describes this value as being "reasonably safe to apply widely". It does not apply size containment, so you would not be at risk of a box ending up zero-sized due to a reliance on the size of its children.

+ +

To gain as much containment as possible use contain: strict, which behaves the same as contain: size layout paint, or perhaps the following to also add style containment in browsers that support it:

+ +
contain: strict;
+contain: strict style;
+ +

引用

+ +

CSS Properties

+ +
    +
  • {{cssxref("contain")}}
    • +
+ +

外部资源

+ + diff --git a/files/zh-cn/web/css/css_counter_styles/index.html b/files/zh-cn/web/css/css_counter_styles/index.html new file mode 100644 index 0000000000..305f55d128 --- /dev/null +++ b/files/zh-cn/web/css/css_counter_styles/index.html @@ -0,0 +1,121 @@ +--- +title: CSS Counter Styles +slug: Web/CSS/CSS_Counter_Styles +tags: + - CSS + - CSS计数 +translation_of: Web/CSS/CSS_Counter_Styles +--- +
{{cssref}}
+ +

CSS 计数器样式 is是一个让你自定义计数器样式的CSS模块.

+ +

参考

+ +

属性

+ +
+
    +
  • {{cssxref("counter-increment")}}
    • +
  • {{cssxref("counter-reset")}}
    • +
+
+ +

At-rules

+ +
+
{{cssxref("@counter-style")}}
+
+
+
    +
  • {{cssxref("@counter-style/system","system")}}
    • +
  • {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
    • +
  • {{cssxref("@counter-style/negative", "negative")}}
    • +
  • {{cssxref("@counter-style/prefix", "prefix")}}
    • +
  • {{cssxref("@counter-style/suffix", "suffix")}}
    • +
  • {{cssxref("@counter-style/range", "range")}}
    • +
  • {{cssxref("@counter-style/pad", "pad")}}
    • +
  • {{cssxref("@counter-style/speak-as", "speak-as")}}
    • +
  • {{cssxref("@counter-style/fallback", "fallback")}}
    • +
+
+
+
+ +

指南

+ +
+
使用CSS计数器
+
描述如何使用计数器来给HTML元素计数，或者执行复杂的计数
+
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Counter Styles')}}{{Spec2('CSS3 Counter Styles')}}初始化定义.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本支持{{CompatNo}}{{CompatGeckoDesktop(33)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
特性AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本支持{{CompatNo}}{{CompatGeckoDesktop(33)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Gecko不在支持图片所描述的 {{cssxref("@counter-style/symbols", "symbols")}} .可以查看{{bug("1024179")}}.

diff --git a/files/zh-cn/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/zh-cn/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html new file mode 100644 index 0000000000..29720e70e6 --- /dev/null +++ b/files/zh-cn/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -0,0 +1,214 @@ +--- +title: 对齐弹性容器中的弹性项目 +slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +tags: + - Flex + - 对齐 + - 布局 + - 弹性盒子 +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +--- +

{{CSSRef}}

+ +

flexbox之所以能迅速吸引开发者的注意，其中一个原因就是它首次为网页样式居中提供了合适的方案。得益于它提供的合适的垂直居中能力，我们可以很轻松地把一个盒子居中。在这份指南里，我们将详细地介绍flexbox的垂直和水平居中的工作原理。

+ +

为了使我们的盒子居中，通过align-items属性，可以将交叉轴上的item对齐，此时使用的是垂直方向的块轴。而使用justify-content则可以对齐主轴上的项目，主轴是水平方向的。

+ +

一个包含另一个盒子的元素在其中心。

+ +

如下代码所示，即使改变容器或内嵌元素的size，内嵌元素也会保持居中状态

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

+ +

控制对齐的属性

+ +

本指南中的属性如下。

+ +
    +
  • {{cssxref("justify-content")}} - 控制主轴（横轴）上所有 flex 项目的对齐。
    • +
  • {{cssxref("align-items")}} - 控制交叉轴（纵轴）上所有 flex 项目的对齐。
    • +
  • {{cssxref("align-self")}} - 控制交叉轴（纵轴）上的单个 flex 项目的对齐。
    • +
  • {{cssxref("align-content")}} - 控制“多条主轴”的 flex 项目在交叉轴的对齐。
    • +
+ +

我们也会了解到flexbox如何使用margin: auto 来实现居中。

+ +
+

Note: 这些Flexbox的对齐属性已经纳入 CSS Box Alignment Level 3标准里了。预计这特性将最终会取代之前在Flexbox Level One定义的属性。

+
+ +

交叉轴

+ +

align-items 和align-self 是控制我们的 flex 项目在交叉轴的对齐，如果 flex-direction 是 row 则是控制竖向对齐，反之 flex-direction 是 column 则是控制横向对齐。

+ +

我们正在用一个最简单的例子做交叉轴对齐。如果我们在父级的容器元素上添加display: flex 属性，那么容器里的所有子元素将会变成横向排列的flex items。所有的 flex 项目会撑满交叉轴方向的高度，因为display: flex 属性会将 flex 项目的高定义成容器的高度。如果你的父级容器有设置高度，则 flex 项目会撑满整个父级容器的高度，不会管 flex 项目里的内容的多少。

+ +

三个项目，其中一个附加文本使其比其他文件更高。

+ +

三项拉伸到200像素高

+ +

flex items的高度全都变成一样的原因是 align-items 属性的初始值设成 stretch 控制交叉轴对齐。

+ +

我们可以使用其他的值来控制flex items的对齐方式：

+ +
    +
  • align-items: flex-start flex 项目的开始端的对齐
    • +
  • align-items: flex-end flex 项目的结束端对齐
    • +
  • align-items: center flex 项目居中对齐
    • +
  • align-items: stretch flex 项目撑满 flex 容器
    • +
  • align-items: baseline flex 项目的基线对齐
    • +
+ +

下面的例子中，align-items 的值为 stretch 。尝试给 align-items 赋上其他的值然后看下在 flex 容器里是什么样的对齐效果。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}}

+ +

align-self 用于对齐单个 flex 子项

+ +

align-items 属性是给所有 flex 项目统一设置 align-self 的对齐属性。这意味着你能给单个 flex 项目明确地声明 align-self 属性。align-self 拥有 align-items 的所有属性值，另外还有一个 auto 能重置自身的值为 align-items 定义的值。

+ +

在下面的一个例子中，flex 容器为 align-items: flex-start，这意思是所有的 flex 项目都在交叉轴方向的开始端对齐。我用 first-child 选择器给第一个 flex 项目设置了 align-self: stretch ；另外一个 flex 项目用selected的类设置成 align-self: center 。你能试着改变 align-items 或者在单个 align-self 的值，可以发现这些值是怎么影响对齐的。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}}

+ +

改变主轴方向

+ +

到目前为止我们已经看到了我们的 flex-direction 是 row 和使用的语言的书写方式为从上至下的表现行为。这意味着主轴是水平方向，交叉轴对齐则是有上至下垂直方向。

+ +

三个项目，第一个对齐到flex-start，第二个到中心，第三个到flex-end。 在垂直轴上对齐。

+ +

如果我们改变我们的 flex-direction 为 column ，align-items 和 align-self 对齐的 flex 项目则是水平方向从左往右。

+ +

三个项目，第一个对齐到flex-start，第二个到中心，第三个到flex-end。 在水平轴上对齐。

+ +

你能在下面这个例子体验一下，它除了 flex-direction 为 column 这个属性，其他的属性值和前一个例子是一样的。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}

+ +

轴对齐内容—— align-content属性

+ +

到现在为止，我们已经对定义在 flex 容器里的 flex 项目或者单个 flex 项目进行对齐操作了。如果你有一个折行的多条 flex 项目的 flex 容器，然后你可能想使用 align-content 来控制每行之间空间的分配，在这种特定的场景叫做packing flex lines。

+ +

要使得 align-content 生效，你需要你的 flex 容器的height要大于 flex 项目的可视内容。然后它会将所有的 flex 项目打包成一块之后再对齐剩下的空间。

+ +

align-content 属性的值如下：

+ +
    +
  • align-content: flex-start
    • +
  • align-content: flex-end
    • +
  • align-content: center
    • +
  • align-content: space-between
    • +
  • align-content: space-around
    • +
  • align-content: stretch
    • +
  • align-content: space-evenly （没有在Flexbox特性中定义）
    • +
+ +

在下面的例子，有一个400px高的 flex 容器，能足够地显示 flex 项目。align-content 的值为 space-between 等同于分配 flex 行之间的空间。

+ +

尝试用其他的属性值查看 align-content 是如何影响布局的。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}}

+ +

在强调一次我们可以切换我们的 flex-direction 为 column 去观察这个属性的行为是怎样的。和之前一样，我们需要足够的交叉轴空间去显示所有的 flex 项目之外还有有一定的自由空间。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}}

+ +
+

Note: space-evenly 没有在flexbox特性中定义，而是后来添加到Box Alignment的特性的属性。浏览器的支持没有flexbox特性好。

+
+ +

查看 justify-content 在 MDN的文档 获取属性值的浏览器支持的更多详细说明。

+ +

对齐主轴内容

+ +

到目前我们已经看到 flex 项目是如何在交叉轴上对齐的，现在我们可以看一下主轴上的对齐。这里只有一个属性是用于主轴上对齐—— justify-content 。这是因为我们把所有的 flex 项目当成一个组去处理。用 justify-content 这个属性的时候，我们只控制主轴出显示出来 flex 项目的多余空间。

+ +

在我们的最开始的例子中，我们在 flex 容器定义了 display: flex， flex 项目则水平排队从容器的初始端显示。这是因为 justify-content 的初始值是 flex-start ，其他多余的空间都会显示在 flex 项目的最后。

+ +

Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.

+ +

justify-content 属性有和 align-content 一样的属性值：

+ +
    +
  • align-content: flex-start
    • +
  • align-content: flex-end
    • +
  • align-content: center
    • +
  • align-content: space-between
    • +
  • align-content: space-around
    • +
  • align-content: stretch
    • +
  • align-content: space-evenly （没有在flexbox特性中定义）
    • +
+ +

在下面的例子中， justify-content 的值为 space-between 。在显示完 flex 项目后的可用空间的分配是在 flex 项目水平方向之间。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}}

+ +

如果主轴方向 flex-direction 设置成 column，那么 justify-content 分配的空间则是纵向的分配。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}}

+ +

对齐和书写模式

+ +

记得这些所有的对齐方法，属性值 flex-start 和 flex-end 是受书写模式的影响的。如果 justify-content 的值是 flex-start 而已你的书写模式是从左到右的话，那么flex items就会从flex container的左边开始排列。

+ +

Three items lined up on the left

+ +

反之，则会 flex 项目就会从 flex 容器的右边开始排列。

+ +

Three items lined up from the right

+ +

下面的例子将 direction 属性值设成 rtl 强行让 flex 项目从右到左排列，你可以移除这个属性值或者改变 justify-content 的值，看他是如何影响 flex 项目的排列方向的。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}}

+ +

对齐和 flex-direction

+ +

如果你改变 flex-direction 属性，主轴起始线也会改变——例如，使用 row-reverse 代替 row。

+ +

在下面的例子里，弹性项目布局为 flex-direction: row-reverse 和 justify-content: flex-end 。在一个书写模式为从左到右的语言中，弹性项目会对齐到左边。尝试将 flex-direction: row-reverse 改为 flex-direction: row，你会看到弹性项目会对齐到右边。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}}

+ +

这似乎有一点令人困惑，需要记住的规则就是，当没有设置 flex-direction 时，弹性项目的排列方向与文档语言的文本沿行内轴的排列方向一致。flex-start 就是一个句子中文本的起始处。

+ +

Diagram showing start on the left and end on the right.

+ +

你可以通过设置 flex-direction: column，使弹性项目沿着文档语言的块级轴方向显示。那样话，flex-start 就是文本第一个段落的顶端起始处。

+ +

Diagram showing start and the top and end at the bottom.

+ +

如果你将 flex-direction 的值改成 row-reverse 或者 column-revers ，那么弹性项目会沿着文档语言的文本书写方向的相反方向，从轴的尾端开始排列。flex-start 就会变为轴的尾端。也就是说，沿着行内轴时，这个位置就是每行文本的换行处；沿着块级轴时，就是文本最后一个段落的底部。

+ +

Diagram showing start on the right and end on the left.

+ +

Diagram showing end at the top and start at the bottom

+ +

使用自动的外边距在主轴上对齐

+ +

我们想要处理个别弹性项目在主轴上的对齐，但是没有 justify-items 属性或者 justify-self 属性可用，因为弹性项目会被当成一个组来对齐。然而，我们可以使用自动的外边距来处理一些个别弹性项目或者一组弹性项目想和其他弹性项目分离开的对齐情况。

+ +

一个常见的案例是导航栏，一些重要项目右对齐，而一组其它主要项目左对齐。你可能会想，这个时候就需要一个 justify-self 属性。但是下面的情况，如图所示，有 3 个项目在左边，2 个在右边。假设可以在项目 d 上设置 justify-self 的话，那么跟在后面的项目 e 的对齐方式也会发生改变。可能这正是我们想要的效果，但某些时候并不是。

+ +

Five items, in two groups. Three on the left and two on the right.

+ +

另一个办法是，单独把项目 d 的 margin-left 属性设置成 auto。自动的外边距会占据全部的多余的空间——在一个块上设置自动的左右外边距可以使它居中。两边尽可能占据多的空间，块就被置于中间位置了。

+ +

在下面这个在线例子中，弹性项目按默认方式简单地沿行排列，而样式类 push 有设置有 margin-left: auto。你可以尝试删除它，或者把这个类名加到别的弹性项目上，你会看到它是怎样影响弹性项目排列的。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}}

+ +

未来的Flexbox对齐特性

+ +

在本文的开头，我解释了Level1 flexbox 规范中当前包含的对齐相关属性也被包含在了Box Alignment Level3规范中，这意味着将来会很好地扩展这些属性和值。 我们已经看到了这种情况的发生, 比如：为 align-content 和justify-content 属性引入space-evenly值。

+ +

Box Alignment 模块还包含其他创建子项之间间隙的方法，比如在 CSS Grid Layout 中包含的 column-gap 和row-gap 特性 。 这些属性包含在Box Alignment规范中意味着在将来我们也应该能够在flex布局中使用column-gap和row-gap，在Firefox 63中，您将在flex布局中找到第一个浏览器对gap属性的实现。

+ +

在深入研究flexbox对齐时，我的建议是同时查看Grid Layout中的对齐方式。 两种规范都使用Box Alignment规范中详细说明的对齐属性。您可以在MDN文章《Box Alignment in Grid Layout》中查看使用网格时这些属性的行为，并且我还在《 Box Alignment Cheatsheet》中比较了这些规范中对齐的工作方式。

+ +

更多

+ + diff --git a/files/zh-cn/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/zh-cn/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..236fd280c0 --- /dev/null +++ b/files/zh-cn/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,233 @@ +--- +title: flex 布局的基本概念 +slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +tags: + - Flex +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性，更多的细节将在别的文档中探索。

+ +

我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。

+ +

flexbox 的两根轴线

+ +

当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 {{cssxref("flex-direction")}} 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关, 所以有必要在一开始首先理解它。

+ +

主轴

+ +

主轴由 flex-direction 定义，可以取4个值：

+ +
    +
  • row
    • +
  • row-reverse
    • +
  • column
    • +
  • column-reverse
    • +
+ +

如果你选择了 row 或者 row-reverse，你的主轴将沿着 inline 方向延伸。

+ +

If flex-direction is set to row the main axis runs along the row in the inline direction.

+ +

选择 column 或者 column-reverse 时，你的主轴会沿着上下方向延伸 — 也就是 block 排列的方向。

+ +

If flex-direction is set to column the main axis runs in the block direction.

+ +

交叉轴

+ +

交叉轴垂直于主轴，所以如果你的flex-direction (主轴) 设成了 row 或者 row-reverse 的话，交叉轴的方向就是沿着列向下的。

+ +

If flex-direction is set to row then the cross axis runs in the block direction.

+ +

如果主轴方向设成了 column 或者 column-reverse，交叉轴就是水平方向。

+ +

If flex-direction is set to column then the cross axis runs in the inline direction.

+ +

理解主轴和交叉轴的概念对于对齐 flexbox 里面的元素是很重要的；flexbox 的特性是沿着主轴或者交叉轴对齐之中的元素。

+ +

起始线和终止线

+ +

另外一个需要理解的重点是 flexbox 不会对文档的书写模式提供假设。过去，CSS的书写模式主要被认为是水平的，从左到右的。现代的布局方式涵盖了书写模式的范围，所以我们不再假设一行文字是从文档的左上角开始向右书写, 新的行也不是必须出现在另一行的下面。

+ +

你可以在接下来的文章中学到更多 flexbox 和书写模式关系的详细说明。下面的描述是来帮助我们理解为什么不用上下左右来描述 flexbox 元素的方向。

+ +

如果 flex-direction 是 row ，并且我是在书写英文，那么主轴的起始线是左边，终止线是右边。

+ +

Working in English the start edge is on the left.

+ +

如果我在书写阿拉伯文，那么主轴的起始线是右边，终止线是左边。

+ +

The start edge in a RTL language is on the right.

+ +

在这两种情况下，交叉轴的起始线是flex容器的顶部，终止线是底部，因为两种语言都是水平书写模式。

+ +

之后，你会觉得用起始和终止来描述比左右更合适，这会对你理解其他相同模式的布局方法（例如：CSS Grid Layout）起到帮助的作用。

+ +

Flex 容器

+ +

文档中采用了 flexbox 的区域就叫做 flex 容器。为了创建 flex 容器， 我们把一个容器的 {{cssxref("display")}} 属性值改为 flex 或者 inline-flex。 完成这一步之后，容器中的直系子元素就会变为 flex 元素。所有CSS属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：

+ +
    +
  • 元素排列为一行 (flex-direction 属性的初始值是 row)。
    • +
  • 元素从主轴的起始线开始。
    • +
  • 元素不会在主维度方向拉伸，但是可以缩小。
    • +
  • 元素被拉伸来填充交叉轴大小。
    • +
  • {{cssxref("flex-basis")}} 属性为 auto。
    • +
  • {{cssxref("flex-wrap")}} 属性为 nowrap。
    • +
+ +

这会让你的元素呈线形排列，并且把自己的大小作为主轴上的大小。如果有太多元素超出容器，它们会溢出而不会换行。如果一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

+ +

更改flex方向 flex-direction

+ +

在 flex 容器中添加 {{cssxref("flex-direction")}} 属性可以让我们更改 flex 元素的排列方向。设置 flex-direction: row-reverse 可以让元素沿着行的方向显示，但是起始线和终止线位置会交换。

+ +

把 flex 容器的属性 flex-direction 改为 column ，主轴和交叉轴交换，元素沿着列的方向排列显示。改为 column-reverse ，起始线和终止线交换。

+ +

下面的例子中，flex-direction 值为 row-reverse。尝试使用其他的值 row ，column，column-reverse，看看内容会发生什么改变。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+ +

用flex-wrap实现多行Flex容器

+ +

虽然flexbox是一维模型，但可以使我们的flex项目应用到多行中。 在这样做的时候，您应该把每一行看作一个新的flex容器。 任何空间分布都将在该行上发生，而不影响该空间分布的其他行。

+ +

为了实现多行效果，请为属性{{cssxref("flex-wrap")}}添加一个属性值wrap。 现在，如果您的项目太大而无法全部显示在一行中，则会换行显示。 下面的实时例子包含已给出宽度的项目，对于flex容器，项目的子元素总宽度大于容器最大宽度。 由于flex-wrap的值设置为wrap，所以项目的子元素换行显示。若将其设置为nowrap，这也是初始值，它们将会缩小以适应容器，因为它们使用的是允许缩小的初始Flexbox值。 如果项目的子元素无法缩小，使用nowrap会导致溢出，或者缩小程度还不够小。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+ +

在指南中您可以了解更多关于 flex-wrap的信息 Mastering Wrapping of Flex Items.

+ +

简写属性 flex-flow

+ +

你可以将两个属性 flex-direction 和 flex-wrap 组合为简写属性 {{cssxref("flex-flow")}}。第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap.

+ +

在下面的例子中，尝试将第一个值修改为 flex-direction 的允许取值之一，即 row, row-reverse, column 或 column-reverse, 并尝试将第二个指定值修改为 wrap 或 nowrap。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+ +

 flex 元素上的属性

+ +

为了更好地控制 flex 元素，有三个属性可以作用于它们：

+ +
    +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
+ +

在这里，我们只会大概介绍一下它们的用法，更详细的细节请参阅其它的文章。

+ +

在考虑这几个属性的作用之前，需要先了解一下 可用空间 available space 这个概念。这几个 flex 属性的作用其实就是改变了 flex 容器中的可用空间的行为。同时，可用空间对于 flex 元素的对齐行为也是很重要的。

+ +

假设在 1 个 500px 的容器中，我们有 3 个 100px 宽的元素，那么这 3 个元素需要占 300px 的宽，剩下 200px 的可用空间。在默认情况下， flexbox 的行为会把这 200px 的空间留在最后一个元素的后面。

+ +

This flex container has available space after laying out the items.

+ +

如果期望这些元素能自动地扩展去填充满剩下的空间，那么我们需要去控制可用空间在这几个元素间如何分配，这就是元素上的那些 flex 属性要做的事。 

+ +

Flex 元素属性：flex-basis 

+ +

 flex-basis 定义了该元素的空间大小（the size of that item in terms of the space），flex容器里除了元素所占的空间以外的富余空间就是可用空间 available space。 该属性的默认值是 auto 。此时，浏览器会检测这个元素是否具有确定的尺寸。 在上面的例子中, 所有元素都设定了宽度（width）为100px，所以 flex-basis 的值为100px。

+ +

如果没有给元素设定尺寸，flex-basis 的值采用元素内容的尺寸。这就解释了：我们给只要给Flex元素的父元素声明 display: flex ，所有子元素就会排成一行，且自动分配小大以充分展示元素的内容。

+ +

Flex 元素属性：flex-grow

+ +

flex-grow 若被赋值为一个正整数， flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间（available space）。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。

+ +

如果我们给上例中的所有元素设定 flex-grow 值为1， 容器中的可用空间会被这些元素平分。它们会延展以填满容器主轴方向上的空间。

+ +

flex-grow 属性可以按比例分配空间。如果第一个元素 flex-grow 值为2， 其他元素值为1，则第一个元素将占有2/4（上例中，即为 200px 中的 100px）, 另外两个元素各占有1/4（各50px）。

+ +

Flex 元素属性： flex-shrink

+ +

flex-grow属性是处理flex元素在主轴上增加空间的问题，相反flex-shrink属性是处理flex元素收缩的问题。如果我们的容器中没有足够排列flex元素的空间，那么可以把flex元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。与flex-grow属性一样，可以赋予不同的值来控制flex元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。

+ +

在计算flex元素收缩的大小时，它的最小尺寸也会被考虑进去，就是说实际上flex-shrink属性可能会和flex-grow属性表现的不一致。因此，我们可以在文章《控制Flex子元素在主轴上的比例》中更详细地看一下这个算法的原理。

+ +
+

在给 flex-grow 和 flex-shrink 赋值是要注意比例。如果我们给所有flex元素的flex属性赋值为 1 1 200px ，并且希望其中一个元素可以增加到2倍，我们可以给该元素的flex属性赋值为2 1 200px。然而，你也可以选择赋值为flex: 10 1 200px 和 flex: 20 1 200px 。

+
+ +

Flex属性的简写

+ +

你可能很少看到 flex-grow，flex-shrink，和 flex-basis 属性单独使用，而是混合着写在 {{cssxref("flex")}} 简写形式中。 Flex 简写形式允许你把三个数值按这个顺序书写 — flex-grow，flex-shrink，flex-basis。

+ +

你可以在下面的实例中尝试把flex简写形式中的数值更改为不同数值，但要记得第一个数值是 flex-grow。赋值为正数的话是让元素增加所占空间。第二个数值是flex-shrink — 正数可以让它缩小所占空间，但是只有在flex元素总和超出主轴才会生效。最后一个数值是 flex-basis；flex元素是在这个基准值的基础上缩放的。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}

+ +

大多数情况下可以用预定义的简写形式。 在这个教程中你可能经常会看到这种写法，许多情况下你都可以这么使用。下面是几种预定义的值：

+ +
    +
  • flex: initial
    • +
  • flex: auto
    • +
  • flex: none
    • +
  • flex: <positive-number>
    • +
+ +

flex: initial 是把flex元素重置为Flexbox的初始值，它相当于 flex: 0 1 auto。在这里 flex-grow 的值为0，所以flex元素不会超过它们 flex-basis 的尺寸。flex-shrink 的值为1, 所以可以缩小flex元素来防止它们溢出。flex-basis 的值为 auto. Flex元素尺寸可以是在主维度上设置的，也可以是根据内容自动得到的。

+ +

flex: auto 等同于 flex: 1 1 auto；和上面的 flex:initial 基本相同，但是这种情况下，flex元素在需要的时候既可以拉伸也可以收缩。

+ +

flex: none 可以把flex元素设置为不可伸缩。它和设置为 flex: 0 0 auto 是一样的。元素既不能拉伸或者收缩，但是元素会按具有 flex-basis: auto 属性的flexbox进行布局。

+ +

你在教程中常看到的 flex: 1 或者 flex: 2 等等。它相当于flex: 1 1 0。元素可以在flex-basis为0的基础上伸缩。

+ +

尝试在下面的实例中应用这些简写值。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

+ +

元素间的对齐和空间分配

+ +

Flexbox的一个关键特性是能够设置flex元素沿主轴方向和交叉轴方向的对齐方式，以及它们之间的空间分配。

+ +

align-items

+ +

{{cssxref("align-items")}} 属性可以使元素在交叉轴方向对齐。

+ +

这个属性的初始值为stretch，这就是为什么flex元素会默认被拉伸到最高元素的高度。实际上，它们被拉伸来填满flex容器 —— 最高的元素定义了容器的高度。

+ +

你也可以设置align-items的值为flex-start，使flex元素按flex容器的顶部对齐, flex-end 使它们按flex容器的下部对齐, 或者center使它们居中对齐. 在实例中尝试——我给出了flex容器的高度，以便你可以看到元素在容器中移动。看看如果更改 align-items的值为下列值会发生什么：

+ +
    +
  • stretch
    • +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+ +

justify-content

+ +

{{cssxref("justify-content")}}属性用来使元素在主轴方向上对齐，主轴方向是通过 flex-direction 设置的方向。初始值是flex-start，元素从容器的起始线排列。但是你也可以把值设置为flex-end，从终止线开始排列，或者center，在中间排列.

+ +

你也可以把值设置为space-between，把元素排列好之后的剩余空间拿出来，平均分配到元素之间，所以元素之间间隔相等。或者使用space-around，使每个元素的左右空间相等。

+ +

在实例中尝试下列justify-content属性的值：

+ +
    +
  • stretch
    • +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
  • space-around
    • +
  • space-between
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+ +

在以后的文章中，为了更好的理解它们怎么使用，我们会更深入的探索这些属性。然而，这些简单的例子对大多数应用都很有帮助。

+ +

下一步

+ +

在读完这篇文章之后，你应该掌握了flexbox的基本特性。在下一篇文章中，我们将会学习如何与其他CSS一起使用。

+ +

+ +

diff --git a/files/zh-cn/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html b/files/zh-cn/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html new file mode 100644 index 0000000000..82370bee3e --- /dev/null +++ b/files/zh-cn/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html @@ -0,0 +1,207 @@ +--- +title: 控制Flex子元素在主轴上的比例 +slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax +translation_of: >- + Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax +--- +
+

译者注： 在html中若一个元素的css设置为display: flex， 则这个元素就是flex container , 其子元素为flex item， 若是直译过来就是弹性容器和弹性项目 。 但是译者认为直译过来不好理解， 且不便记忆（就像我们常说TCP而不会说传输控制协议一样）， 因此在此文中， 译者将不会翻译为flex container 和flex item， 而是翻译为flex容器和flex子元素。 同样， 在原文中有些单词（如items, flex-items， container）， 我会根据情况译为flex容器和flex 子元素。请各位读者理解。

+ +

如果各位读的不舒服， 请阅读原文！

+
+ +

{{CSSRef}}

+ +

在这篇指南中我们将探索应用于flex子元素的三个属性, 它们能使我们在主轴方向上控制flex子元素的尺寸和伸缩性— {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}}, 和 {{cssxref("flex-basis")}}. 充分了解这些属性如何与增长和缩小的flex 子元素一起工作是掌握Flex 布局的关键所在.

+ +

预览

+ +

这三个属性控制一个flex子元素的以下几个方面:

+ +
    +
  • flex-grow: 这个flex子元素得到（伸张）多少positive free space?
    • +
  • flex-shrink: 从这个flex子元素要消除（收缩）多少negative free space?
    • +
  • flex-basis: 在flex子元素未伸张和收缩之前，它的大小是多少?
    • +
+ +

以上属性通常用一个简写属性{{cssxref("flex")}} 表达. 下面的代码设置 flex-grow 属性值为 2, flex-shrink 属性值为 1 ，flex-basis 属性值为auto.

+ +
.item {
+  flex: 2 1 auto;
+}
+
+ +

如果你阅读过文章 flex布局的基本概念, 那么你应该已经对这些属性有了初步了解. 为了让你能明白当你在用它们的时候浏览器在做什么， 我们将进一步探讨它们.

+ +

工作于主轴的重要概念

+ +

在考虑flex属性如何在主轴方向上控制比率之前， 有一些概念值得我们去深究. 这涉及到flex子元素在任何伸缩之前的自然尺寸， 以及自由空间的概念

+ +

Flex子元素的尺寸

+ +

为了计算出有多少可用空间能布局于flex子元素, 浏览器必须知道这个item有多大才能开始. 它是如何解决没有应用于绝对单位的宽度和高度的flex子元素?

+ +

在 min-content 和max-content  的CSS中有一个概念— 这些关键字定义在 CSS Intrinsic and Extrinsic Sizing Specification, 并且可以用一个 length 单位代替.

+ +

例如下面的例子， 我有两段包含一个文本字符串的段落. 第一段设置了min-content的宽度. 在支持这个关键字的浏览器你可以看见文本已尽可能抓住机会来自动换行, 变得尽可能小且没有溢出. 此之后就是那个字符串的 min-content 大小. 本质上讲, 字符串中最长的单词决定了大小.

+ +

第二段设置了 max-content值, 且它和min-content想反. 它会变得尽可能大, 没有自动换行的机会. 如果flex容器太窄， 它就会溢出其自身的盒子.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}

+ +

如果你的浏览器不支持这些属性， 那这两段会在块流中被渲染为正常流; 下面的截图展示了预期的渲染.

+ +

The first paragraph is wrapped to the longest word, the second stretched out so as to cause overflow.

+ +

记住这种行为，以及 min-content 和max-content 对我们本文后探索 flex-grow 和flex-shrink 的影响.

+ +

正负自由空间

+ +
+

译者注：positive and negative free space 直译过来就是正负空闲空间， 为了读者能良好的阅读下文， 译者先大概说下。

+ +

Flex 布局中有flex容器和flex子元素， flex子元素包含在flex容器中， 那么当flex子元素在主轴上的尺寸（大小）之和小于flex容器 的尺寸时， flex容器中就会有多余的空间没有被填充， 这些空间就被叫做 positive free space。当flex子元素在主轴上的尺寸之和大于flex容器的尺寸时， flex容器的空间就不够用，此时flex子元素的尺寸之和减去flex容器的尺寸（flex 子元素溢出的尺寸）就是negative free space, 这个negative free space加上flex容器的尺寸刚好可以容纳flex子元素.

+ +

为了不翻译花了， 译者不对positive free space和negative free space进行翻译，参考翻译是正向自由空间和反向自由空间

+
+ +

去谈论这些属性之前我们需要理解positive free space和negative free space的概念. 当一个flex 容器有positive free space时, 它就有更多的空间用于在flex容器内显示flex子元素. 比如说, 如果我有500px 宽的flex容器, {{cssxref("flex-direction")}} 属性值为 row, 三个100px 宽的flex子元素,  而且我还有200px 的 positive free space, 那么如果我想让它们（positive free space）填充flex容器，它们就可以填充在flex子元素之间.

+ +

Image showing space left over after items have been displayed.

+ +

当flex子元素的自然尺寸加起来比flex容器内的可用空间大时，我们产生了negative free space. 如果我有一个像上面500px 宽的flex容器, 但是三个flex子元素每个都为200px 宽, 我就一共需要600px 宽, 因此我就有了100px的negative free space. 这可以从flex子元素中删除以使其能适应flex容器.

+ +

The items overflow the container

+ +

我们需要理解positive free space 的分配和negative free space 的移除， 这样才能理解flex 属性.

+ +

下面的例子我会将属性 {{cssxref("flex-direction")}} 设置为row, 因此flex子元素的尺寸只有来自于它们的宽. 我们通过比较flex子元素和flex container的宽度来计算positive and negative free space. 你同样可以用flex-direction: column 测试每个例子. 主轴变为列后， 你需要比较flex子元素和flex容器 的高度来计算positive and negative free space.

+ +

flex-basis 属性

+ +

{{cssxref("flex-basis")}} 属性在任何空间分配发生之前初始化flex子元素的尺寸. 此属性的初始值为 auto. 如果 flex-basis 设置为 auto , 浏览器会先检查flex子元素的主尺寸是否设置了绝对值再计算出flex子元素的初始值. 比如说你已经给你的flex子元素设置了200px 的宽，则200px 就是这个flex子元素的 flex-basis.

+ +

如果你的flex子元素 为自动调整大小， 则auto 会解析为其内容的大小.  此时你所熟知的min-content和max-content大小会变得有用,  flexbox 会将flex子元素的 max-content 大小作为 flex-basis. 下面的例子可以证明这一点. 

+ +

在这个例子中我创造了一些列固定的盒子, 它们的 flex-grow 和flex-shrink 都设置为 0. 这里我们看看第一个flex子元素怎么样了 — 它的150px 显示宽度被设置为主尺寸— 即设置flex-basis为150px, 然而另外两个flex子元素 没有设置宽度而是根据它们内容的宽度设置尺寸， 

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}

+ +

除了关键字 auto 以外, 你还可以使用关键字 content 作为 flex-basis的值. 这会导致 flex-basis 根据内容大小设置即使flex子元素 设置了宽度. 这是一个新关键字而且获得浏览器支持的比较少, 但是你还是可以通过设置flex-basis: auto并确保你的flex子元素没有设置宽度来达到相同的效果 , 以便它能自动调整大小.

+ +

空间分配时， 如果你想flexbox 完全忽略flex子元素的尺寸就设置flex-basis 为 0. 这基本上告诉flexbox所有空间都可以抢占，并按比例分享. 随着我们继续关注flex-grow，我们将看到这方面的例子。

+ +

flex-grow 属性

+ +

 {{cssxref("flex-grow")}} 属性指定了flex增长值, 这决定了当positive free space分配时，flex子元素相对于flex容器中的其余flex子元素的增长程度.

+ +

如果你所有的flex子元素 设置了相同的flex-grow属性值，那么空间将会在flex子元素 之间平均分配. 如果你想要这种情形，通常你需要使用1作为值，而且如果你喜欢你还可以将它们的flex-grow都 设置为88， 或100， 或1.2  —这只是个比例. 如果flex-grow的值全部相同， 并且在flex容器 中还有positive free space , 那么它（positive free space）就会平均的分配给所有的flex子元素

+ +

结合flex-grow 和flex-basis

+ +

根据flex-grow和flex-basis的相互影响， 有些东西会变得迷惑起来. 让我们考虑三个不同内容大小的flex子元素的例子， 应用于下列flex规则:

+ +

flex: 1 1 auto;

+ +

这个例子中设置flex-basis的值为auto且没有设置它们的宽, 因此它们是自动调整大小的. 这意味着flexbox的大小决定于全部flex子元素内容的max-content 大小. 在布局完flex子元素 之后在flex容器中还有一些positive free space， 展示在这幅图片的阴影区域中:

+ +

Images shows the positive free space as a hatched area

+ +

我们使用与内容大小相等的flex-basis，以便从总可用空间（flex容器的宽度）中减去可用分配空间，然后剩余空间在每个flex子元素之间平均分配. 我们比较大的flex子元素最终会变得更大，因为它一开始就有一个比较大的尺寸，即使它与其他flex子元素具有相同数量的分配空间:

+ +

The positive space is distributed between items

+ +

如果你真正想要的是三个同样尺寸的flex子元素，即使它们开始是不同的尺寸，你应该使用这个:

+ +

flex: 1 1 0;

+ +

我们要说的是，为了我们的空间分配，flex子元素的尺寸计算值是0--所有空间都用来争夺，并且所有flex子元素具有相同的flex-grow 值，它们（flex子元素）每个都获得相等的空间分配。 最终结果是三个宽度相等的可伸缩 flex子元素.

+ +

尝试在这个现场示例中将flex-grow的值从1更改为0以查看不同的行为:

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}

+ +

flex items 设置不同的flex-grow值

+ +

我们对flex-grow和flex-basis如何工作的理解使我们能够通过分配不同的flex-grow值来进一步控制我们单个flex子元素 大小. 如果我们设置flex-basis值为0则所用空间都可以被分配, 我们可以给每个flex子元素分配不同的flex-grow值.  在下面的示例中， 我会使用下面的值:

+ +
    +
  • 设置第一个flex item的flex-grow值为1.
    • +
  • 设置第二个flex item的flex-grow值为1.
    • +
  • 设置第三个flex item的flex-grow值为2.
    • +
+ +

flex-basis值为 0 意味着可用空间会根据设置分配. 我们需要增加flex 增长值, 就需要在flex容器中用positive free space的总大小除以flex-grow值之和, 在这个例子中为4. 我们就可以根据个体值（flex-basis值）分配空间 — 第一个flex子元素得到一个单位 , 第二个flex子元素得到一个单位, 第三个flex子元素得到二个单位. 也就是说第三个flex子元素是第一个和第二个flex item的两倍.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}

+ +

记住你要在这里使用正值. 这是一个项目和另一个项目之间的比例. 你还可以使用大的数字，或者小数 — 这取决于你.把上例中分配的值更改为.25，.25和.50 并去测试— 你会得到相同的结果.

+ +

flex-shrink 属性

+ +

 {{cssxref("flex-shrink")}} 属性指定了flex 缩小值, 它确定在分配negative free space时，flex子元素相对于flex容器中其余flex子元素收缩的程度.

+ +

该属性用于处理浏览器计算flex子元素的flex-basis值的情形, 并检测它们太大以至于无法适应flex容器. 只要flex-shrink有正值则flex子元素就会收缩以至于它们不会溢出flex容器.

+ +

因此 flex-grow 用于添加可用空间, flex-shrink 减少空间来使盒子适应它们的容器而不溢出.

+ +

下一个示例中我的flex容器有三个flex子元素，我已经给它们每一个（flex子元素）设置了200px的宽度, 并且设置容器(flex容器）500px 宽. 设置flex-shrink 为 0 的flex子元素 不允许收缩以致于它们溢出了盒子.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}

+ +

改变 flex-shrink 值为 1 你会发现每个flex子元素 都收缩了同样大小的量, 现在所有flex子元素都适应盒子. 这样做后它们已变得比它们的初始宽度还小.

+ +

结合flex-shrink 和flex-basis

+ +

你可以看见 flex-shrink和flex-grow  工作的一样好. 但是它们有两个原因使它们不完全一样.

+ +

即使它微不足道, 但规范中的定义内容是 flex-shrink不全相同与negative space的一个原因， 正如flex-grow不全相同于positive space一样:

+ +
+

“注意: 当分配negative space时，flex基本大小乘以flex增长值. 这会根据flex子元素能够缩小的比例（多少）分配negative space, 其它亦如此.在较大的flex子元素 明显缩小之前， 较小的flex子元素 不会缩小到0.”

+
+ +

第二个原因是在negative free space消除期间flexbox会阻止小的flex子元素缩小到0. 这些flex子元素会以min-content的大小进行铺设  —这个大小是它们利用任何可以利用的自动断行机会后所变成的.

+ +

在下面的例子中，在 flex-basis 解析为内容大小的位置你会看到 min-content 的铺设,. 如果你改变flex容器的宽度 — 比如增加到700px 宽 — 再减少flex子元素的宽度, 你会看到前两个flex子元素 将换行, 但是它们绝不会小于min-content的大小. 随着盒子变得越来越小，空间随后从第三个flex子元素 中移除.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}

+ +

在实践中，收缩行为会倾向于给你合理的结果。 你通常不希望自己的内容完全消失，或者文本框比自己的最小内容要小，因此上述规则对于需要缩小以适应容器的内容的合理行为而言是有意义的.

+ +

Giving items different flex-shrink factors

+ +

在 flex-grow值相同的情形下, 你可以给flex子元素 设置不同的 flex-shrink 值. 假如你想让一个flex子元素 比它的兄弟元素收缩的更快或更慢， 或者不在收缩， 这回改变它的默认行为.

+ +

在下面的示例中第一个flex子元素设置 flex-shrink 的值为1, 第二个为 0 (因此它将不会收缩), 第三个为 4. 第三个flex子元素比第一个收缩的更快. 任意设置不懂的值 — 你可以给 flex-grow 使用小数或者大一点的数. 选择对于你来说任意合理的数.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}

+ +

掌握Flex items的大小

+ +

真正理解flex子元素如何工作的关键是理解有多少东西参与影响flex子元素. 思考以下方面, 哪些是我们在这些指南中已经讨论过了的:

+ +

什么设置flex item 的基本大小？

+ +
    +
  1. flex-basis设置为auto吗，这个flex子元素设置了宽度吗？如果设置了, flex子元素的大小将会基于设置的宽度.
    2. +
  2. flex-basis 设为 auto 还是content (在支持的浏览器中)? 如果是auto, flex子元素的大小为原始大小.
    3. +
  3. flex-basis是不为0的长度单位吗？如果是这样那这就是flex子元素的大小.
    4. +
  4. flex-basis 设为 0呢? 如果是这样，则flex子元素的大小不在空间分配计算的考虑之内.
    5. +
+ +

我们有可用空间吗?

+ +

flex子元素没有positive free space 就不会增长, 没有negative free space 就不会缩小.

+ +
    +
  1. 如果我们把所有的flex子元素的宽度相加（如果在列方向工作则为高度），那么总和是否小于flex容器的总宽度（或高度）？ 如果是这样，那么你有 positive free space，并且flex-grow会发挥作用.
    2. +
  2. 如果我们把所有的flex子元素的宽度相加（如果在列方向工作则为高度），那么总和是否大于flex容器的总宽度（或高度）？ 如果是这样，那么你有negative free space，并且flex-shrink会发挥作用.
    3. +
+ +

分配空间的其他方式

+ +

如果我们不想空间添加到flex子元素中, 记住你可以在flex容器中使用指南中所描述的对准属性来处理flex子元素之间或者flex子元素周围的空闲空间， 以致可以对齐flex子元素. {{cssxref("justify-content")}} 属性能够在flex子元素之间或flex子元素周围分配空闲空间. 您还可以在flex子元素上使用自动边距(auto margins)来吸收空间并在flex子元素之间创建间距.

+ +

随着所有的flex工具的使用，你会发现大多数任务都可以实现，尽管在开始时可能需要一些实验.

diff --git "a/files/zh-cn/web/css/css_flexible_box_layout/flexbox_\347\232\204_\345\220\221\344\270\213_\346\224\257\346\214\201/index.html" "b/files/zh-cn/web/css/css_flexible_box_layout/flexbox_\347\232\204_\345\220\221\344\270\213_\346\224\257\346\214\201/index.html" new file mode 100644 index 0000000000..df269a9211 --- /dev/null +++ "b/files/zh-cn/web/css/css_flexible_box_layout/flexbox_\347\232\204_\345\220\221\344\270\213_\346\224\257\346\214\201/index.html" @@ -0,0 +1,121 @@ +--- +title: Flexbox的向下支持 +slug: Web/CSS/CSS_Flexible_Box_Layout/Flexbox_的_向下_支持 +tags: + - '@supports' + - IE + - Safari + - flexbox + - 兼容 + - 弹性盒子 + - 旧版本 + - 浏览器 +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +--- +

{{CSSRef}}

+ +

虽然弹性盒子被各种现代浏览器很好的支持, 但是你或许还会遇到一些问题。在这个文档中，我们将会了解到浏览器支持弹性盒子的情况和一些潜在的问题, 以及处理它们的资源和方法。

+ +

弹性盒子的历史

+ +

与所有CSS标准一样，弹性盒子标准经历了一系列的改动，直到它成为我们现有的候选推荐版本。作为候选推荐，我们不该着重于当下对于该规范的大量变动，尽管历来弹性盒子的迭代情况有所不同。

+ +

弹性盒子曾在许多浏览器中作为实验功能的方式被实现。当时进行实验性的实现的方式是使用浏览器前缀。这种关于前缀的构思是为了让规范的实现能被测试，并被浏览器工程师和网页开发者等在不和其他实现冲突的情况下浏览。也就是说不再生产代码中使用实验性的实现。然后，前缀最终被用在了生产代码中，结果对实验性规范的不管修改导致了人们需要不断对网站进行对应的修改。

+ +

在2009年时，规则看起来很不一样。当时，要创建一个弹性容器你会用display: box ，会有一大堆 box-* 属性，和现在的弹性盒子显然完全不同。

+ +

曾有一个规范的更新将语法换成了 display: flexbox ——这仍旧是浏览器前缀。

+ +

最后规范被修改成，定义 display: flex 作为创建弹性容器的方式。对于最新版本规范的浏览器支持自此就尽善尽美了。

+ +

有很多老的关于弹性盒子规范旧版本的文章还存着，但他们都容易通过弹性盒子容器创建的方式来辨别。如果你在其中找到任何关于display: box或者display: flexbox的内容，那么它们就是过时的信息。

+ +

浏览器支持情况

+ +

现代浏览器能够很好的支持flexbox，并且大多数浏览器不需要前缀。2015年，Safari9是最后一个移除前缀的主流浏览器。2个需要注意浏览器兼容的浏览器是：

+ +
    +
  • Internet Explorer 10： 使用 -ms- 前缀；
    • +
  • UC浏览器： 使用 -webkit- 前缀。
    • +
+ +

现在，IE11 已经支持display: flex，但是在使用的时候会有一些bug。

+ +

常见问题

+ +

由于经过了发展,flexbox的大多数问题与规范的变更有关，而且事实上我们很多人都试图在生产中环境中使用实验性的规范。 如果您要确保与旧版本的浏览器（尤其是IE10和11）向后兼容，则 Flexbugs 网站是一个有用的资源。 您将看到许多列出的bug都适用于旧的浏览器版本，并且在当前的浏览器中已修复。 每个错误都有列出的解决方法-可以节省许多时间。

+ +

如果你想要支持非常旧的浏览器使用flexbox属性，在CSS中加入：

+ +
.wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+ +

Autoprefixer Online是查看推荐使用前缀浏览器的有效方式，具体取决于您希望通过浏览器支持返回多少版本。 您还可以从 Can I Use 中以获取浏览器支持的信息,以便在已经支持的浏览器中删除前缀

+ +

有用的向下支持技术

+ +

假设弹性盒子使用 {{cssxref("display")}} 的属性值定义，当我们需要为不支持弹性盒子的旧版本的浏览器提供支持时，向下支持（fallback）技术可以用来覆写布局方式。如果你使用其他布局方法作用于一个元素，随后该元素又成为了弹性盒子的 item，规范定义了会发生什么。

+ +

浮动元素

+ +
+

“浮动和清除浮动不会在 flex item 上触发浮动和清除行为，并且不会脱离当前文档流。” - 3. Flex Containers

+
+ +

在下面的示例中，我将两个块级元素浮动，然后给容器设置了 display: flex。这两个元素现在变成了弹性盒子元素，意味着它们会伸展使得高度相同，并且没有应用任何浮动行为。

+ +

你可以通过移除 display: flex 属性来测试这项向下支持行为。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}

+ +

display: inline-block

+ +

一旦一个 inline-block 元素成为了一个弹性盒子元素，那么它将被块级化，因此 display: inline-block 属性的诸如在元素间保留空白符等行为将不会被应用。

+ +

移除 display: flex 属性来查看该向下支持行为，你将会看见这两个元素之间多出的空白符，这是因为使用 display: inine-block 时会把空白符当成其他行内元素对待。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}

+ +

display: table-

+ +

CSS 中表格相关的系列属性可能是非常有用的向下支持技术，因为它们允许一些设计模式，例如全高度列和垂直居中等，甚至可以向后兼容至 IE8。

+ +

假如你在 HTML 中对一个元素使用 display: table-cell，它将呈现为表格单元格样式。CSS 会创建一个匿名盒子来呈现这些元素，这样你就不用包裹每一个元素来呈现表格的行（row），以及另外一个元素来呈现这个表格自身。你无法看见或修改这些匿名盒子的样式，它们只是单纯的用来修补文档树。

+ +

如果你在父元素上设置了 display: flex，这些匿名盒子将不会被创建，这样你的元素就保留直接的子元素并成为了一个弹性盒子元素 — 失去所有表格元素的特性。

+ +
+

“注意：display 的某些属性值通常会在初始盒子周围触发匿名盒子的创建行为。如果该盒子是一个弹性盒子元素，那么它会先被块级化，使得匿名盒子不会被创建。例如，两个连续的弹性盒子元素设置了 display: table-cell 后，将会成为两个独立分开的 display: block 弹性盒子元素，而不是被包裹近单独的一个匿名表格中。” - 4. Flex Items

+
+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}

+ +

vertical-align 属性

+ +

下面的示例展示了 {{cssxref("vertical-align")}} 属性与 display: inline-block 结合使用的情况。display: table-cell 和 display: inline-block 都允许使用该属性。使用 vertical-align 可以使垂直排列优先于弹性盒子。这个属性会被弹性盒子忽略，这样你就可以将它与 display: table-cell 或者 display: inline-block 结合使用来作为一个向下支持技巧，然后就可以在弹性盒子中安全地使用盒子排列属性。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}

+ +

特性枚举与弹性盒子

+ +

你可以使用特性枚举（feature queries）来检查弹性盒子的支持情况：

+ +
@supports (display: flex) {
+  // 添加在支持的浏览器中书写的样式代码
+}
+ +

注意 Internet Explorer 11 不支持特性枚举，但是支持弹性盒子。如果你觉得在 IE11 中实现不易并且希望对它使用向下支持布局，那么你可以使用特性枚举只在对弹性盒子支持良好的浏览器中使用弹性盒子属性规则。需要记住的是，如果你想用浏览器厂商前缀的弹性盒子属性来包含某版本的浏览器，你需要在特性枚举中包含该版本浏览器的前缀。下面的特性枚举例子就兼容了 UC 浏览器，它支持特性枚举并且支持旧版弹性盒子语法：

+ +
@supports (display: flex) or (display: -webkit-box) {
+  // code for supporting browsers
+}
+ +

查看更多关于特性枚举的信息请访问：Using Feature Queries in CSS。

+ +

结尾

+ +

当我在这个指南中花时间来检查潜在的问题和向下支持技巧时，弹性盒子已经做好了在生产环境中运作的充分准备。该指南可能会在你遇到问题或者需要支持旧版本浏览器时帮到你。

diff --git a/files/zh-cn/web/css/css_flexible_box_layout/index.html b/files/zh-cn/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..1ffd8a352a --- /dev/null +++ b/files/zh-cn/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,176 @@ +--- +title: CSS 弹性盒子布局 +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible Boxes + - CSS Reference + - CSS3布模式 + - Overview + - TopicStub + - 弹性盒子 + - 弹性盒子模型 + - 盒子模型 +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +

{{CSSRef}}

+ +

CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。

+ +

基本例子

+ +

在以下示例中，已将容器设置为 display: flex ，这意味着三个子项成为弹性项。justify-content 的值已设置为 space-between ，以便在主轴上均匀地分隔项目。在每个项目之间放置等量的空间，左侧和右侧项目与Flex容器的边缘齐平。你还能看到项目在十字轴上拉伸，因为 align-items 的默认值为 stretch。这些项目伸展到Flex容器的高度，使它们看起来都像最高的项目一样高。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}

+ +

参考

+ +

CSS 属性

+ +
+
    +
  • +
    +
      +
    • {{cssxref("flex")}}
      • +
    • {{cssxref("flex-basis")}}
      • +
    • {{cssxref("flex-direction")}}
      • +
    • {{cssxref("flex-flow")}}
      • +
    • {{cssxref("flex-grow")}}
      • +
    • {{cssxref("flex-shrink")}}
      • +
    • {{cssxref("flex-wrap")}}
      • +
    • {{cssxref("order")}}
      • +
    • +
    • +
    +
    +
    • +
+
+ +

对齐属性

+ +

属性 align-content、align-self、align-items 和 justify-content 最初出现在 Flexbox 规范中，但现在在Box Alignment中定义，Flexbox 规范引用了 Box Alignment 规范以获取最新定义。Box Alignment中还定义了其他对齐属性。

+ +
+
    +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("place-content")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
  • +
+
+ +

术语表

+ +
+ +
+ +

指南

+ +
+
弹性盒子基本概念
+
概述flexbox的功能
+
使用 CSS 弹性盒子
+
循序渐进的讲解如何用此特性来建立布局。
+
Flexbox与其他布局方法的关系
+
Flexbox如何与其他布局方法和其他CSS规范相关
+
对齐Flex容器中的项目
+
Box Alignment属性如何与flexbox一起使用。
+
弹性项顺序
+
解释改变项目顺序和方向的不同方法，并解决这样做的潜在问题。
+
控制柔性项沿主轴的比率
+
本文介绍了flex-grow，flex-shrink和flex-basis属性。
+
精通包装弹性项
+
如何使用多行创建Flex容器并控制这些行中项目的显示。
+
 Flexbox 的典型用例
+
常见的设计模式是典型的flexbox用例。
+
用弹性盒子进行 Web 应用布局
+
讲解在 Web 应用的特定环境下如何应用弹性盒子。
+
Flexbox的向后兼容性
+
Flexbox的浏览器状况，互操作性问题以及支持的旧浏览器和规范版本
+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注解
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}初始定义。
+ +

浏览器兼容性

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
特性Firefox (Gecko)ChromeInternet ExplorerOperaSafari
基础支持{{CompatGeckoDesktop("20.0")}}21.0{{property_prefix("-webkit")}}
+ 29.0		10.0{{property_prefix("-ms")}}
+ 11.0		12.106.1{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
特性Firefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
基础支持{{CompatVersionUnknown()}}4.41112.107.1{{property_prefix("-webkit")}}
+
diff --git a/files/zh-cn/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/zh-cn/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html new file mode 100644 index 0000000000..92c2c76c38 --- /dev/null +++ b/files/zh-cn/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html @@ -0,0 +1,99 @@ +--- +title: 掌握弹性物件的包装 +slug: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items +tags: + - CSS + - 包装 + - 弹性 + - 弹性盒子 + - 折叠物件 + - 网格 +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items +--- +

{{CSSRef}}

+ +

Flexbox被设计为一维的布局工具，这意味着在处理元素布局方式时只能设计为行或者设计为列— 两者不能兼顾。然而Flex拥有一种将flex元素包围在新的一行内的特性，创建一个新的行如果设置了{{cssxref("flex-direction")}} 为 row 以及创建新的一列如果设置了 flex-direction 为 column。在这篇教程中，我将解释这个特性的内部工作原理，以及它设计的目的是什么和在什么情况下要使用 CSS Grid Layout 而不是 flexbox.

+ +

把物件包装起来

+ +

{{cssxref("flex-wrap")}} 属性的初始值是nowrap。这就意味着如果你有一组的对其容器而言太宽的弹性物件，它们就会溢出。如果你想要一旦它们变得太宽就换行，你必须给 flex-wrap 属性添加wrap值，或者，用row wrap 或 column wrap 值作用于{{cssxref("flex-flow")}}的速写。

+ +

物件接着就会在容器内换行。在接下来的例子里，我有10个160px的flex-basis物件，它们都具备伸展和收缩能力。一旦第一行达到了没有足够空间放置额外160像素物件的点，一个新的弹性行就会被建立，一直这样直到所有的物件被放置。因为物件可以伸展，它们会扩展大于160像素从而完整地填充一行。如果在最后一行只有1个物件，它就将拉长了充满整行。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}

+ +

我们可以看到相同的事情也发生在列上。容器会需要有一个高度让物件可以开始换行并且制造新的列，并且物件会拉伸高度来填满每一个列。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}

+ +

包装和弹性方向

+ +

当结合 flex-direction 属性，包装就如您所期待的方式工作。如果 flex-direction 被设置成 row-reverse 那么物件就会从容器的底边开始并且以行的反向顺序堆叠自身。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}

+ +

注意反向只能发生在行内、行的方向。我们从右面开始然后跳到第二行再从右边开始。我们没有在两个方向上都反向，从容器底部上来的反向！

+ +

一维布局介绍

+ +

正如我们上面例子中所见到的，如果我们的物件被允许伸展和收缩，当最后一行或一列有较少的物件时，那么这些物件就会伸展从而填满可用空间。

+ +

弹性盒子中并没有方法告诉一行里的物件和上一行里的物件对齐——每个弹性行表现得就像一个新的弹性容器。它在主要坐标轴上处理空间分布。如果只有一个物件，并且这个物件允许伸展，他就会填充坐标轴，就好像你有一个单物件的弹性容器。

+ +

如果你想在二维方向上布局，那么你很可能想要网格布局。我们可以比较我们上面的行换行例子和CSS网格版本的布局来看一下区别。一下实时的例子使用CSS网格布局来构建一个布局，它具有至少160像素的列的布局，在所有列之间分配额外的空间。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}

+ +

这就是一维和二维布局的区别。在一维的方式里就像弹性盒子，我们仅仅控制行或者列。在二维布局里就像网格，我们同时控制两个。如果你想按行分布空间，使用弹性盒子。如果不是，使用网格。

+ +

基于弹性盒子的网格系统如何工作？

+ +

基本上基于弹性盒子的网格系统，是通过将弹性盒子带回到我们所熟悉的基于浮层布局的世界，来工作的。如果你对弹性物件设置了百分比的宽度—— flex-basis 或是通过对物件增加宽度同时让 flex-basis 的值保持为auto ——你就能获得二维布局的印象。你可以在下面的例子中看到这样的运作。

+ +

这里我有设置 flex-grow 和 flex-shrink 为 0 来使固定弹性物件，并且接着使用百分比来控制弹性，正如我们在浮动布局里所使用的那样。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}

+ +

如果你需要弹性物件在坐标轴上对齐，用这样的方法来控制宽度就能达到这个效果。在大多数的情况下，向弹性物件增加款宽度的做法演示了你可能会比将组件切换成网格布局提供的更好体验。

+ +

在物件之间建立间隔

+ +

当包装弹性物件的时候，间隔它们的需要很可能被提出。在当下我们还没有任何针对弹性盒子的块对齐模块间隔属性的实现。在未来我们将能够对弹性盒子简单的使用 row-gap 和 column-gap 就如我们在CSS网格里做的。当下你会需要使用边距来达成这个要求。

+ +

你可以从下面一个实时的例子里看到，为了建立间隔并且不在容器的边缘建立间隔，我们需要在弹性容器自身上使用负边距。弹性容器的任何一条边移入第二个包装从而使得负边距可以将包装的元素拉回来。

+ +

正是这个间隔属性的需求，一旦实现，将为我们解决问题。适当的间隙只发生在物件的内边缘。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}

+ +

折叠物件

+ +

弹性盒子标准详述了如果一个弹性物件在物件上被设置了 visibility: collapse 时应当发生什么。参见对于{{cssxref("visibility")}}属性的MDN文档。这份标准描述了如下的表现：

+ +
+

“定义可见性：在一个弹性物件上的折叠导致它成为一个折叠弹性物件，在一个表行或者表列制造一个类似于visibility:collapse的效果：折叠弹性物件整个地从渲染中移除，但在底层保留了一个“支撑”从而保持了弹性行的跨界尺寸的稳定。因此，如果一个弹性容器仅包含一个弹性行，动态地折叠或者展开物件可能改变弹性容器的主尺寸，但是这样确保了跨界尺寸上没有影响以及不会导致页面其余的布局“晃动”。动态行包装在折叠后会被重做的，所以，包含多行的弹性容器的跨界尺寸是可能变化的。” - 折叠物件

+
+ +

如果你想要针对弹性物件使用JavaScript来显示和隐藏内容的例子，这样的表现是很有用的。这个标准里的例子演示了一个这样的模式。

+ +

在下面的实时例子里，我有一个非包装的弹性容器。第三个物件相比其他的有跟多的内容被设置 visibility: collaps 并且因此弹性盒子会保持一个高度的结构来满足显示物件的需要。如果你从CSS里移除visibility: collapse 或是将值改变为 visible，你会看到物件消失了并且空间在非包装的物件之间重新分配；弹性容器的高度不应该改变。

+ +
+

注意: 对下面的两个例子使用Firefox浏览器，因为Chrome和Safari会把折叠处理为隐藏。

+
+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}

+ +

当处理多行弹性容器时你会需要理解包装会在折叠后被重做。所以浏览器需要重做包装的行为来计算新的还留在行内方向里的被折叠物件的空间。

+ +

这意味着物件可能在和他们所开始的不同的行里结束。在一个物件在被显示和隐藏的场景下，它很可能导致物件结束在不同的行里。

+ +

我已经在下一个实时例子里构建了这样的表现。你可以看到基于折叠物件的位置，伸展改变了它们所在的行。如果你加入更多的内容到第二个物件里，一旦获得了足够多的内容它就改变了行。然后首行仅仅成为和单行文本一样的高度。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}

+ +

如果这对你的布局造成了麻烦，可能就需要重新考虑这个结构，比如，将每一行放置到分开的弹性容器里从而它们不会跨行。

+ +

visibility: hidden 和 display: none 的区别

+ +

当你为了隐藏一个物件去设置 display: none ，物件就被格式化的页面结构移除。在实际中的意义就是技术器忽略了它，类似转换的事情不会运行。使用 visibility: hidden 保持了格式化结构的框，这十分有用，它仍旧表现的像是布局中的一部分即便用户看不到它。

diff --git a/files/zh-cn/web/css/css_flexible_box_layout/mixins/index.html b/files/zh-cn/web/css/css_flexible_box_layout/mixins/index.html new file mode 100644 index 0000000000..d2054bc725 --- /dev/null +++ b/files/zh-cn/web/css/css_flexible_box_layout/mixins/index.html @@ -0,0 +1,408 @@ +--- +title: 使用弹性盒子进行高级布局 +slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins +tags: + - CSS3布局模型 + - Flexible_Box + - Flexible_Box_Layout + - Layout + - 弹性盒子 + - 弹性盒子模型 +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins +--- +

使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充屏幕可用空间。一个弹性框容器将延展它的子元素以填充可用空间，并且缩小它的子元素来避免溢出。

+ +

浮动布局的问题

+ +
    +
  • 难以控制。如果站点上存在一些不可预知的内容，那么布局将变的难以维护。
    • +
  • 源码顺序依赖。弹性布局依赖于HTML源码，在做响应式设计时将难以为不同的媒体查询变更布局。
    • +
  • 列等高问题。如果容器中有两到三列不同的内容，并且在任意内容的条件下，都需要设置为相同的高度。浮动布局难以实现这个要求。
    • +
  • 内容居中。使用浮动布局难以将内容水平且垂直居中。
    • +
+ +

弹性盒子如何处理

+ +
    +
  • 通过将弹性元素拉伸或缩小来充满可用空间和避免溢出。这种方式解决了新内容的溢出问题并且以开发者期望的情况实施布局。
    • +
  • 给予弹性元素成比例的尺寸。
    • +
  • 弹性容器内的弹性元素可以从任意方向布局。可以解决在不同媒体查询中元素的顺序问题。使得可见内容的顺序独立于HTML渲染顺序，有利于站点的响应式设计。
    • +
+ +

弹性盒子属性

+ +

placeholder

+ +
    +
  • 主轴(main axis)，主轴区域(main dimension)。弹性容器的主轴指的是弹性元素主要沿着哪个方向布局。它在主轴区域中延伸。
    • +
  • 主轴起点(main-Start)，主轴终点(main-end)。弹性元素被放置于容器中从主轴起点到主轴终点放置。
    • +
  • 主轴尺寸(main size)，主轴尺寸属性(main size property)。一个弹性元素的主轴尺寸指的是其在主轴区域内的长度。其主轴尺寸属性指的是其对应的属性。
    • +
  • 侧轴(cross axis)，侧轴区域(cross dimension)。侧轴垂直于主轴。它在侧轴区域中延伸。
    • +
  • 侧轴起点(cross-Start)，侧轴终点(cross-end)。浮动行被元素填充，并且在容器中沿侧轴方向从起点向终点分布。
    • +
  • 侧轴尺寸(cross size)，侧轴尺寸属性(cross size property)。一个弹性元素的侧轴尺寸指的是其在侧轴区域内的长度。其侧轴尺寸属性指的是其对应的属性
    • +
+ +

弹性容器属性

+ + + +

弹性元素属性

+ + + +

弹性盒子混合

+ +

对于希望在现代浏览器原生支持下使用弹性盒子的用户，这里有全部的支撑表格：http://caniuse.com/flexbox

+ +

将会使用：

+ +
    +
  • 后备、陈旧的语法（IE10，移动端WebKit内核浏览器－无包裹)
    • +
  • 最终标准的语法（FF、Safari、Chrome、IE11、Opera）
    • +
+ +

启发于：

+ + + +

可以从这些地方获取帮助：

+ + + +

弹性容器

+ +

“flex”值会引起一个元素生成一个盒级的弹性盒子。

+ +

“inline-flex”会生成一个行内弹性盒子。

+ +

display: flex | inline-flex http://w3.org/tr/css3-flexbox/#flex-containers

+ +
+
@mixin flexbox {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+// 使用这样的混合模式
+%flexbox { @include flexbox; }
+
+ +
+
@mixin inline-flex {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -moz-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+%inline-flex { @include inline-flex; }
+
+ +

弹性盒子方向

+ +

“flex-direction”属性通过设置容器主轴来定义弹性元素如何在容器内排列。这个属性确定了弹性元素排列的方向。

+ +

值：row | row-reverse | column | column-reverse

+ +

http://w3.org/tr/css3-flexbox/#flex-direction-property

+ +
+
@mixin flex-direction($value: row) {
+  @if $value == row-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: horizontal;
+  } @else if $value == column {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: vertical;
+  } @else if $value == column-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: vertical;
+  } @else {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+  }
+  -webkit-flex-direction: $value;
+  -moz-flex-direction: $value;
+  -ms-flex-direction: $value;
+  flex-direction: $value;
+}
+
+// 简短版本：
+@mixin flex-dir($args...) { @include flex-direction($args...); }
+
+ +

弹性盒子换行

+ +

“flex-wrap”属性控制了容器为单行还是多行。并且定义了侧轴的方向，新行将沿侧轴方向堆砌。

+ +

值：nowrap | wrap | wrap-reverse

+ +

默认：nowrap

+ +

http://w3.org/tr/css3-flexbox/#flex-wrap-property

+ +
+
@mixin flex-wrap($value: nowrap) {
+  // No Webkit Box fallback.
+  -webkit-flex-wrap: $value;
+  -moz-flex-wrap: $value;
+  @if $value == nowrap {
+    -ms-flex-wrap: none;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+}
+
+ +

弹性盒子流（简写）

+ +

“flex-flow”属性是设置“flex-direction”和“flex-wrap”的简写，可以同时定义主轴和侧轴。

+ +

默认值：row nowrap

+ +

http://w3.org/tr/css3-flexbox/#flex-flow-property

+ +
+
@mixin flex-flow($values: (row nowrap)) {
+  // No Webkit Box fallback.
+  -webkit-flex-flow: $values;
+  -moz-flex-flow: $values;
+  -ms-flex-flow: $values;
+  flex-flow: $values;
+}
+
+ +

弹性盒子顺序

+ +

“order”属性通过将这些元素分配到序数分组来控制它们出现的顺序。

+ +

默认值：0

+ +

http://w3.org/tr/css3-flexbox/#order-property

+ +
+
@mixin order($int: 0) {
+  -webkit-box-ordinal-group: $int + 1;
+  -webkit-order: $int;
+  -moz-order: $int;
+  -ms-flex-order: $int;
+  order: $int;
+}
+
+ +

弹性盒子增长

+ +

“flex-grow”属性设置增长因数，不接受负值。

+ +

默认值：0

+ +

http://w3.org/tr/css3-flexbox/#flex-grow-property

+ +
+
@mixin flex-grow($int: 0) {
+  -webkit-box-flex: $int;
+  -webkit-flex-grow: $int;
+  -moz-flex-grow: $int;
+  -ms-flex-positive: $int;
+  flex-grow: $int;
+}
+
+ +

弹性盒子收缩

+ +

“flex-shrink”属性设置了收缩因数，不接受负值。

+ +

默认值：1

+ +

http://w3.org/tr/css3-flexbox/#flex-shrink-property

+ +
+
@mixin flex-shrink($int: 1) {
+  -webkit-flex-shrink: $int;
+  -moz-flex-shrink: $int;
+  -ms-flex-negative: $int;
+  flex-shrink: $int;
+}
+
+ +

弹性盒子伸缩

+ +

“flex-basis”属性设置了弹性框伸缩的基准值，不接受负值。

+ +

值：类似“width”，默认值：auto

+ +

http://www.w3.org/TR/css3-flexbox/#flex-basis-property

+ +
+
@mixin flex-basis($value: auto) {
+  -webkit-flex-basis: $value;
+  -moz-flex-basis: $value;
+  -ms-flex-preferred-size: $value;
+  flex-basis: $value;
+}
+
+ +

弹性盒子“Flex”属性（简写）

+ +

“flex”属性设置了弹性盒子长度的组成，包括增长因数、收缩因数和伸缩基准值。对于一个弹性元素，“flex”属性会被用来设置元素的尺寸，对于一个非弹性元素，该属性无效。

+ +

值：none | ||

+ +

默认值：见独立属性（1 1 0）

+ +

http://w3.org/tr/css3-flexbox/#flex-property

+ +
+
@mixin flex($fg: 1, $fs: null, $fb: null) {
+
+  // Set a variable to be used by box-flex properties
+  $fg-boxflex: $fg;
+
+  // Box-Flex only supports a flex-grow value so lets grab the
+  // first item in the list and just return that.
+  @if type-of($fg) == 'list' {
+    $fg-boxflex: nth($fg, 1);
+  }
+
+  -webkit-box-flex: $fg-boxflex;
+  -webkit-flex: $fg $fs $fb;
+  -moz-box-flex: $fg-boxflex;
+  -moz-flex: $fg $fs $fb;
+  -ms-flex: $fg $fs $fb;
+  flex: $fg $fs $fb;
+}
+
+ +

弹性盒子对齐方式

+ +

“justify-content”属性将弹性元素沿容器主轴方向对齐。当所有弹性元素的长度和边距都设置好之后，布局完成。一般情况下，当行内所有弹性元素尺寸不可变或可变且达到最大尺寸的情况下，该属性会分配剩余可用空间。同时，当元素溢出行的时候，它也会对其排列做出控制。

+ +

提示：以前版本的语法不支持“space-*”值。

+ +

值：flex-start | flex-end | center | space-between | space-around 默认值：flex-start

+ +

http://w3.org/tr/css3-flexbox/#justify-content-property

+ +
+
@mixin justify-content($value: flex-start) {
+  @if $value == flex-start {
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if $value == flex-end {
+    -webkit-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if $value == space-between {
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if $value == space-around {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+  -webkit-justify-content: $value;
+  -moz-justify-content: $value;
+  justify-content: $value;
+}
+  // Shorter version:
+  @mixin flex-just($args...) { @include justify-content($args...); }
+
+ +

弹性元素对齐

+ +

可以设置弹性元素在容器侧轴上的对齐方式，与“justify-content”功能相似但是方向垂直。“align-items”设置弹性盒子的所有子元素的对齐方式，包括匿名弹性元素。元素可以通过单独设置“align-self”来覆盖该属性。（对于匿名弹性元素，“align-self'”属性总是与“align-items”相同。）

+ +

值：flex-start | flex-end | center | baseline | stretch 默认值：stretch

+ +

http://w3.org/tr/css3-flexbox/#align-items-property

+ +
+
@mixin align-items($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -ms-flex-align: $value;
+  }
+  -webkit-align-items: $value;
+  -moz-align-items: $value;
+  align-items: $value;
+}
+
+ +

弹性元素自对齐

+ +

用来单独设置弹性元素在侧轴的对齐方式，功能与“align-items”相同。可以覆盖“align-items”属性。

+ +

值：auto | flex-start | flex-end | center | baseline | stretch 默认值：auto

+ +
+
@mixin align-self($value: auto) {
+  // No Webkit Box Fallback.
+  -webkit-align-self: $value;
+  -moz-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}
+
+ +

弹性元素内容对齐

+ +

“align-content”属性设置了容器内每行沿侧轴的对齐方式。与“justify-content”属性在主轴方向对齐单独元素的方式相似。如果容器内只有一行，该属性无效。

+ +

值：flex-start | flex-end | center | space-between | space-around | stretch 默认值：stretch

+ +

http://w3.org/tr/css3-flexbox/#align-content-property

+ +
+
@mixin align-content($value: stretch) {
+  // No Webkit Box Fallback.
+  -webkit-align-content: $value;
+  -moz-align-content: $value;
+  @if $value == flex-start {
+    -ms-flex-line-pack: start;
+  } @else if $value == flex-end {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+  align-content: $value;
+}
+
diff --git a/files/zh-cn/web/css/css_flexible_box_layout/ordering_flex_items/index.html b/files/zh-cn/web/css/css_flexible_box_layout/ordering_flex_items/index.html new file mode 100644 index 0000000000..207fa11cc7 --- /dev/null +++ b/files/zh-cn/web/css/css_flexible_box_layout/ordering_flex_items/index.html @@ -0,0 +1,137 @@ +--- +title: Flex项排序 +slug: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items +--- +

{{CSSRef}}

+ +

Flexbox 和 Grid 等新的布局方法为内容的顺序控制提供了可能。 在本文中，我们将介绍使用 Flexbox 时如何更改内容的视觉顺序。 我们还将从可访问性的角度考虑重新排序项目的影响。

+ +

反转项目的显示

+ +

{{cssxref("flex-direction")}} 属性有如下四个值:

+ +
    +
  • row
    • +
  • column
    • +
  • row-reverse
    • +
  • column-reverse
    • +
+ +

前两个值使项目保持与它们在文档源顺序中出现的顺序相同，并从起始行开始顺序显示它们。

+ +

The items are displayed in a row starting on the left.

+ +

The items are displayed as a column starting from the top

+ +

后两个值通过调换开始和结束行来进行项目的反转。

+ +

The items are displayed in reverse order starting on the right-hand line.

+ +

The items are displayed in a column in reverse order starting at the bottom line.

+ +

请记住，起始行与写入模式有关。 上面两个示例说明了 row 和 row-reverse 在从左到右的语言是怎么工作的如英语。如果您使用的是右到左的语言，如阿拉伯语，则 row 的起始行将在右边， row-reverse 起始行会在左边。

+ +

Flex containers with Arabic letters showing how row starts from the right hand side and row-reverse from the left.

+ +

这看起来似乎是一种以相反顺序显示事物的简洁方式，但是您应该注意，这些项目只以相反顺序显示。 在这个问题上，规范说明如下:

+ +
+

“注意：Flex布局的重新排序功能仅会影响视觉渲染，保留语音顺序和基于源顺序的导航。 这使作者能够操纵视觉呈现，同时保持非CSS UA和线性模型（例如语音和顺序导航）的原始顺序不变。” - Ordering and Orientation

+
+ +

如果你的项目是链接或者用户可以选择的其他元素，那么选项卡的顺序就是这些项目在文档源中出现的顺序，而不是你的视觉顺序。

+ +

如果使用反向值或以其他方式重新排序项，则应考虑是否实际需要更改源中的逻辑顺序。 该规范继续警告不要使用重新排序来修复源代码中的问题:

+ +
+

“作者不得使用flex-flow / flex-direction的顺序或反向值来代替正确的源顺序，因为这会破坏文档的可访问性。”

+
+ +
+

注意: 近几年来，Firefox出现了一个错误，即它会尝试遵循视​​觉顺序而不是源顺序，从而使其行为与其他浏览器不同。 现在，此问题已得到解决。 您应始终将源顺序作为文档的逻辑顺序，因为所有最新的用户代理都将遵循该规范并遵循该规范。

+
+ +

在下面的实时示例中，我添加了一种焦点样式，以便当您从一个链接到另一个标签时，可以看到突出显示的样式。 如果使用flex-direction更改顺序，则可以看到制表符顺序如何继续遵循源中列出的项目的顺序。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}

+ +

与更改flex-direction的值不会更改项目导航到的顺序相同，更改此值不会更改绘制顺序。 它仅是项目的视觉反转。

+ +

order 属性

+ +

除了颠倒显示弹性项目的顺序之外，您还可以使用{{cssxref("order")}} 属性指定单个项目并更改其在视觉顺序中的显示位置。.

+ +

order属性旨在按顺序排列项目。 这意味着为项目分配了代表其组的整数。 然后，按照该整数（最低的值）首先按照视觉顺序放置项目。 如果多个项目具有相同的整数值，则在该组中按照源顺序对项目进行布局。

+ +

例如，我有5个弹性条目，并按如下所示分配order值：

+ +
    +
  • Source item 1: order: 2
    • +
  • Source item 2: order: 3
    • +
  • Source item 3: order: 1
    • +
  • Source item 4: order: 3
    • +
  • Source item 5: order: 1
    • +
+ +

这些项目将按以下顺序显示在页面上：

+ +
    +
  • Source item 3: order: 1
    • +
  • Source item 5: order: 1
    • +
  • Source item 1: order: 2
    • +
  • Source item 2: order: 3
    • +
  • Source item 4: order: 3
    • +
+ +

Items have a number showing their source order which has been rearranged.

+ +

您可以在下面的实时示例中使用这些值，并查看如何更改顺序。 另外，尝试将flex-direction更改为row-reverse，看看会发生什么—切换了起始行，以便从相反的一侧开始排序。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}

+ +

弹性项目默认 order 值为 0, 因此整数值大于 0 的项目，将会显示在那些未指定 order 值的项目之后。

+ +

您还可以按顺序使用负值，这很有用。 如果要先显示一个项目，并保持所有其他项目的顺序不变，则可以将该项目的顺序设为-1。 由于该值小于0，因此始终会首先显示该项目。

+ +

在下面的实时代码示例中，我使用Flexbox布置了项目。 通过更改在HTML中为其分配了类active，您可以更改首先显示的项目，您可以更改首先显示哪个项目，因此在布局顶部变为全宽，而在其下方显示其他项目。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}

+ +

这些项目以规范中描述的顺序修改的文档顺序显示。 在显示项目之前，将考虑order属性的值。

+ +

Order 还会更改项目的绘制顺序; 对于order较低的项目将首先绘制，对于order值较高的项目将随后绘制。

+ +
+
+

order属性和可访问性

+
+
+ +

使用order属性对于可访问性具有与使用flex-direction更改方向完全相同的含义。 使用order可以更改项目的绘制顺序和外观。 它不会更改项目的顺序导航顺序。 因此，如果用户在项目之间切换，他们可能会发现自己以非常混乱的方式在布局中跳跃。

+ +

通过浏览此页面上的任何实时示例，您可以了解订单如何给不使用某种指点设备的任何人带来奇怪的体验。 要了解有关视觉顺序和逻辑顺序的这种分离以及它为可访问性带来的一些潜在问题的更多信息，请参见以下资源。

+ + + +

order使用示例

+ +

有时在某些地方，弹性项目的逻辑顺序和可视顺序与视觉顺序是分开的，这很有帮助。 仔细使用order属性可以使一些有用的通用模式易于实现。

+ +

您可能有一个设计，也许是显示新闻的卡片。 新闻项的标题是突出显示的关键内容，并且如果用户在标题之间使用键盘制表符按键（tab）以查找要阅读的内容，则可能是用户可能会跳转到的元素。 该卡还带有日期； 我们要创建的最终设计就是这样。

+ +

A design component with a date, then heading and then content.

+ +

视觉上，日期显示在源中标题上方。 但是，如果卡是由屏幕阅读器读出的，则我希望标题先公布，然后再公布日期。 我们可以使用order属性来做到这一点。

+ +

The card is going to be our flex container, with flex-direction set to column. I then give the date an order of -1. This pulls it up above the heading.

+ +

该卡将成为我们的伸缩容器，flex-direction设置为column。 然后，我将日期定为-1。 这将其拉到标题上方。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}

+ +

这些小的调整是order属性有意义的情况。 保持逻辑顺序为文档的阅读和制表符顺序，并以最易于访问和结构化的方式进行维护。 然后使用order进行纯粹的视觉设计调整。 这样做时，请注意不要重新排序在用户四处浏览时可能由键盘访问的项目。 尤其是在使用较新的布局方法时，应确保浏览器测试包括仅使用键盘而不是鼠标或触摸屏来测试站点。 您将快速查看您的开发选择是否使绕过内容变得困难。

diff --git a/files/zh-cn/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/zh-cn/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html new file mode 100644 index 0000000000..c3870e6a25 --- /dev/null +++ b/files/zh-cn/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html @@ -0,0 +1,407 @@ +--- +title: 使用 CSS 弹性盒子 +slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +tags: + - CSS + - CSS Flexible Boxes + - Flex + - Web + - flexbox + - 弹性 + - 弹性容器 + - 弹性盒子 + - 弹性项目 + - 指南 + - 盒子模型 + - 范例 + - 进阶 +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。

+ +

许多设计师会发现弹性盒子模型更易于使用。弹性盒子中的子元素可以在各个方向上进行布局，并且能以弹性尺寸来适应显示空间。由于元素的显示顺序可以与它们在源代码中的顺序无关，定位子元素将变得更容易，并且能够用更简单清晰的代码来完成复杂的布局。这种无关性是仅限制于视觉呈现上的，语言顺序以及基于源代码顺序的导航均不受影响。

+ +
注意： 虽然 CSS 弹性盒子布局规范 还处于最终征求意见稿 (Last Call Working Draft)阶段（参见最新编辑草案），并非所有浏览器都实现了弹性盒子的所有功能。但，这么说吧，现在全线产品对弹性盒子都有良好支持。最新的兼容性状况可以查看每个具体属性的兼容性表格获取。
+ +

弹性盒布局概念

+ +

在定义方面来说，弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。

+ +

块级布局更侧重于垂直方向、行内布局更侧重于水平方向，与此相对的，弹性盒子布局算法是方向无关的。虽然块级布局对于单独一个页面来说是行之有效的，但其仍缺乏足够的定义来支持那些必须随用户代理(user agent)不同或设备方向从水平转为垂直等各种变化而变换方向、调整大小、拉伸、收缩的应用程序组件。 弹性盒子布局主要适用于应用程序的组件及小规模的布局，而（新兴的）栅格布局则针对大规模的布局。这二者都是 CSS 工作组为在不同用户代理、不同书写模式和其他灵活性要求下的网页应用程序有更好的互操作性而做出的更广泛的努力的一部分。

+ +

弹性盒布局相关词汇

+ +

关于弹性盒子的讨论已经从诸如水平/行内轴和垂直/块级轴这些术语中解放出来，与此同时，需要有一套新的术语来正确描述此模型。在学习下面的词汇项目时请对照下图。图中是一个 flex-direction 属性为 row的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。

+ +

弹性布局相关名词

+ +
+
弹性容器(Flex container)
+
包含着弹性项目的父元素。通过设置 {{Cssxref("display")}} 属性的值为 flex 或 inline-flex 来定义弹性容器。
+
弹性项目(Flex item)
+
+

弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。

+
+
轴(Axis)
+
+

每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。

+ +
    +
  • flex-direction 确立主轴。
    • +
  • justify-content 定义了在当前行上，弹性项目沿主轴如何排布。
    • +
  • align-items 定义了在当前行上，弹性项目沿侧轴默认如何排布。
    • +
  • align-self 定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 align-items 所确立的默认值。
    • +
+
+
方向(Direction)
+
+

弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由 writing-mode 确立的方向（从左到右、从右到左，等等）。

+ +
    +
  • order 属性将元素与序号关联起来，以此决定哪些元素先出现。
    • +
  • flex-flow 属性是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布。
    • +
+
+
行(Line)
+
+

根据 flex-wrap 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。

+
+
尺寸(Dimension)
+
+

根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为主轴尺寸(main size) ，对应侧轴的称为 侧轴尺寸(cross size)。

+ + +
+
+ +

定义一个弹性盒子

+ +

为要使用此样式的元素指派 CSS，需按以下方式设置 display 属性：

+ +
display : flex
+ +

或者

+ +
display : inline-flex
+ +

这样做将元素定义为弹性容器，其子元素则成为弹性项目。值 flex 使弹性容器成为块级元素。值 inline-flex 使弹性容器成为单个不可分的行内级元素。

+ +
注意：厂商前缀标记会附加给 display 属性值，而不是加给 display 属性本身。例如：display : -webkit-flex。
+ +

弹性项目须知

+ +

弹性容器直接包含的文本将自动包覆成匿名弹性项目。不过，一个只包含一系列空白符（如一堆空格或制表符等）的匿名弹性项目不会被渲染，就如同对其指派 display: none。

+ +

对于弹性容器的绝对定位子元素来说，其静态位置参照弹性容器的内容框的主起始角确定，而后依此完成此元素的定位。

+ +

相邻的弹性元素其外边距不会互相合并。使用 auto 外边距可以吸收掉水平或垂直方向上的额外空间，这可以用于对齐或分隔相邻的弹性项目。更多细节请参考 W3C 弹性框布局模型规范中的 Aligning with 'auto' margins。

+ +

不像 CSS 中的其他对齐方法，弹性框的对齐属性将进行“真正的”居中对齐。这意味着即使弹性条目溢出了弹性容器，它依然保持居中。不过这在某些时候可能会有问题。如果溢出超过了页面的上边缘或左边缘（在从左到右的语言中，比如英语；在诸如阿拉伯语这样从右到左的语言中这个问题更会出现在右边缘），则虽然那些地方确实有内容，却无法滚动到那些位置。在未来的发布版本里，对齐属性将会有所扩展，使其包含有“安全”选项。目前，如果操心这点，可以改用外边距来达成居中效果，因为外边距会用比较“安全”的方式来响应变化，出现溢出时将停止居中。对这种需要居中的弹性项目，不使用 align- 属性，而使用自动外边距就能解决这个问题。对弹性容器中第一个和最后一个弹性项目的外侧边缘应用，也可以使用自动外边距来替代 justify- 属性。自动外边距会自动伸缩来占满剩余空间，当有剩余空间存在时弹性项目将会居中，如果没有则切换至常规对齐方式。不过很不幸，如果尝试在多行的弹性框中用基于外边距的居中方法来替代 justify-content，就必须对每一行的第一个和最后一个弹性项目应用外边距。此时除非能够事先预测每一行都结束于哪个元素，否则就不能愉快的在主轴方向上用基于外边距的居中方法来替代 justify-content 属性了。

+ +

再强调一遍，元素的显示顺序与它们在源代码中的顺序无关，这种无关性只影响视觉呈现，语音顺序以及基于源代码顺序的导航均不受影响。{{cssxref("order")}} 属性并不影响语音和导航的次序。因此开发者们必须小心，合理地安排元素在源代码中的顺序，以免破坏文档的可访问性。

+ +

弹性盒子相关属性

+ +

不影响弹性盒子的属性

+ +

由于弹性盒子使用了不同的布局算法，某些属性用在弹性容器上没有意义：

+ +
    +
  • 多栏布局模块的 column-* 属性对弹性项目无效。
    • +
  • {{cssxref("float")}} 与 {{cssxref("clear")}} 对弹性项目无效。使用 float 将使元素的 display 属性计为block。
    • +
  • {{cssxref("vertical-align")}} 对弹性项目的对齐无效。
    • +
+ +

示例

+ +

基本的弹性布局示例

+ +

这个基本的示例展示了如何对元素应用弹性布局，以及在弹性布局状态下相邻元素的行为方式。

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+   .flex
+   {
+      /* 基本样式 */
+      width: 350px;
+      height: 200px;
+      border: 1px solid #555;
+      font: 14px Arial;
+
+      /*  建立弹性框 */
+      display: -webkit-flex;
+      -webkit-flex-direction: row;
+
+      display: flex;
+      flex-direction: row;
+   }
+
+   .flex > div
+   {
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+
+      width: 30px; /* 让过渡表现良好。（从/到"width:auto"的过渡
+                      至少在 Gecko 和 Webkit 上是有 bug 的。
+                      更多信息参见 http://bugzil.la/731886 ） */
+
+      -webkit-transition: width 0.7s ease-out;
+      transition: width 0.7s ease-out;
+   }
+
+   /* colors */
+   .flex > div:nth-child(1){ background : #009246; }
+   .flex > div:nth-child(2){ background : #F1F2F1; }
+   .flex > div:nth-child(3){ background : #CE2B37; }
+
+   .flex > div:hover
+   {
+        width: 200px;
+   }
+
+   </style>
+
+ </head>
+ <body>
+  <p>Flexbox nuovo</p>
+  <div class="flex">
+    <div>uno</div>
+    <div>due</div>
+    <div>tre</div>
+  </div>
+ </body>
+</html>
+ +

圣杯布局示例

+ +

此示例展示了弹性盒子根据不同屏幕分辨率动态改变布局的能力。下图说明了这种转换。

+ +

HolyGrailLayout.png

+ +

这里展示的正是针对浏览器窗口的页面布局必须为智能手机窗口优化的场景。不仅元素的尺寸需要缩减，其呈现顺序也需要改变。弹性盒子让这变得很简单。

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+  body {
+   font: 24px Helvetica;
+   background: #999999;
+  }
+
+  #main {
+   min-height: 800px;
+   margin: 0px;
+   padding: 0px;
+   display: -webkit-flex;
+   display:         flex;
+   -webkit-flex-flow: row;
+           flex-flow: row;
+   }
+
+  #main > article {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #cccc33;
+   border-radius: 7pt;
+   background: #dddd88;
+   -webkit-flex: 3 1 60%;
+           flex: 3 1 60%;
+   -webkit-order: 2;
+           order: 2;
+   }
+
+  #main > nav {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 1;
+           order: 1;
+   }
+
+  #main > aside {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 3;
+           order: 3;
+   }
+
+  header, footer {
+   display: block;
+   margin: 4px;
+   padding: 5px;
+   min-height: 100px;
+   border: 1px solid #eebb55;
+   border-radius: 7pt;
+   background: #ffeebb;
+   }
+
+  /* 窄到已不足以支持三栏 */
+  @media all and (max-width: 640px) {
+
+   #main, #page {
+    -webkit-flex-flow: column;
+            flex-direction: column;
+   }
+
+   #main > article, #main > nav, #main > aside {
+    /* 恢复到文档内的自然顺序 */
+    -webkit-order: 0;
+            order: 0;
+   }
+
+   #main > nav, #main > aside, header, footer {
+    min-height: 50px;
+    max-height: 50px;
+   }
+  }
+
+ </style>
+  </head>
+  <body>
+ <header>header</header>
+ <div id='main'>
+    <article>article</article>
+    <nav>nav</nav>
+    <aside>aside</aside>
+ </div>
+ <footer>footer</footer>
+  </body>
+</html>
+ +

试验场地

+ +

有几个在线弹性盒子试验场地可供进行各种实验：

+ + + +

务必牢记

+ +

描述弹性项目如何排布的算法有时会极其棘手。在使用弹性盒子进行设计时，请考虑以下几点，以免碰到不好的意料外状况。

+ +

弹性盒子的排布与书写模式是一致的，这意味着排布的主轴起点和主轴终点根据的是开始与结束的位置。

+ +

侧轴起点与侧轴终点依赖于开始或前面（before）的位置定义，而这个“前面”依赖于 direction 的值。

+ +

只要 break- 属性的设置值允许，在弹性框布局中是可以存在分页的。CSS3 中的 break-after、break-before 和 break-inside，以及 CSS 2.1 中的 page-break-before、page-break-after 和 page-break-inside 属性在弹性容器上、弹性项目上和弹性项目内均可以使用。

+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
特性Firefox (Gecko)ChromeInternet ExplorerOperaSafari
基础支持（单行弹性框）{{CompatGeckoDesktop("18.0")}}[6]{{property_prefix("-moz")}}[2]
+ {{CompatGeckoDesktop("22.0")}}		21.0{{property_prefix("-webkit")}}
+ 29.0		11[3]12.10{{property_prefix("-webkit")}}[5]6.1{{property_prefix("-webkit")}}[1]
多行弹性框{{CompatGeckoDesktop("28.0")}}21.0{{property_prefix("-webkit")}}
+ 29.0		11[3]12.10[5]
+ 15 {{property_prefix("-webkit")}}		6.1{{property_prefix("-webkit")}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
特性Firefox Mobile (Gecko)Firefox OSAndroidIE PhoneOpera MobileSafari Mobile
基础支持（单行弹性框）{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoMobile("22.0")}}		 +

1.0{{property_prefix("-moz")}}[2]
+ 1.1

+ 		2.1{{property_prefix("-webkit")}}[4]
+ 4.4		1112.10[5]
+ 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
多行弹性框{{CompatGeckoMobile("28.0")}}1.32.1{{property_prefix("-webkit")}}[4]
+ 4.4		1112.10[5]
+ 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
+
+ +

[1] Safari 在版本 6.0 (iOS.1)以前支持的是规范的一个与现有版本不兼容的旧版草案。Safari 6.1（以及 iOS 7 上的 Safari）已更新为支持最终版本。

+ +

[2] 直到 Firefox 22 为止，用户必须修改 about:config 设置，将 layout.css.flexbox.enabled 改为 true 才能激活对弹性盒子的支持。从 Firefox 22 到 Firefox 27，此设置项默认为 true，而 Firefox 28 中取消了此设置项。

+ +

[3] Internet Explorer 10 支持的是规范的一个与现有版本不兼容的旧版草案；Internet Explorer 11 已更新为 支持最终版本。

+ +

[4] Android 浏览器直到 4.3 为止支持的是规范的一个与现有版本不兼容的旧版草案。Android 4.4 已更新为支持最终版本。

+ +

[5] 在 Opera 12.10 的弹性盒子初始实现中是没有前缀的，但 Opera 版本 15 到 16 和 Opera Mobile 的 15 到 19 需要 {{property_prefix("-webkit")}}. 在 Opera 17 及 Opera Mobile 24 中再次取消了前缀。

+ +

[6] 直到 Firefox 29 为止，在弹性项目上指定 visibility: collapse 将使其被视为 display: none 处理，而预期的行为是被视为 visibility: hidden。建议的处理方式是在弹性项目上使用 visibility:hidden，这样其行为应当与指派了 visibility:collapse 一致。更多信息，参考 {{bug(783470)}}.

+ +

参见

+ + diff --git a/files/zh-cn/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html b/files/zh-cn/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html new file mode 100644 index 0000000000..6358b3bd97 --- /dev/null +++ b/files/zh-cn/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html @@ -0,0 +1,186 @@ +--- +title: 使用flexbox来布局web应用 +slug: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +tags: + - CSS + - 弹性盒子 +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +

{{CSSRef}}

+ +

使用 flexbox 可以帮助你设计出引人注目的布局，并且在pc端或移动端能够很好的缩放。告别使用浮动的 {{HTMLElement("div")}} 元素、绝对定位 和一些JavaScript hacks, 使用仅仅几行 CSS 就可以构建出水平或垂直方向的布局。下面是一些基本的使用案例：

+ +
    +
  • 你想要将一个元素放在页面的中间
    • +
  • 你想要一组在垂直方向可以一个紧挨一个的布局容器
    • +
  • 你像要创建一行按钮或者其它元素，这些元素在小屏幕中可以垂直折叠
    • +
+ +

这篇文章只囊括了在不使用前缀就可以支持现行标准的浏览器下如何使用 flexbox 的相关信息。 想了解更多关于带有供应商前缀的老版本浏览器的资料，请点击这里 the more general guide to using CSS flexible boxes.

+ +

基础

+ +

如果你想让元素呈水平或柱状，或如果你想让元素垂直布局，在任何 {{HTMLElement("div")}} 元素中，通过设置 {{cssxref("display")}} 属性为 flex 来使用flexbox，然后设置它任意一行的 {{cssxref("flex-flow")}} 属性, 你就可以在其中尽情的创建元素了。如果你正在使用水平的 flexbox，并想让你的内容垂直换行，只需指定值为wrap。

+ +

接下来，只要你想让某个元素使用弹性布局，就为它添加 {{cssxref("flex")}} 属性。一般情况下，你将会使用下列三个值之一：

+ +
    +
  • 如果你想让元素仅仅使用它本身的宽度，比如按钮，则设置 flex: none，none 将会被解释为 0 0 auto.
    • +
  • 如果想要一个固定大小的元素，则设置 flex: 0 0 size。如：flex 0 0 60px。
    • +
  • 如果你想让元素自动扩展到可以利用的空间，如果有多个这种类型的元素，它们可以平均分配空间，则设置 flex: auto，它代表 1 1 auto.
    • +
+ +

有可能还有使用方法，但是这应该囊括了最基本的使用案例。让我们用几个例子来看看如何使用。

+ +

示例 1: 在页面中把一个元素居中

+ +

在这个例子中，要做的最简单的事情就是创建两个 flexbox，其中一个在另一个中。每个 flexbox 有三个元素：其中两个当作中间元素的垫子，另一个就是中间元素本身。

+ +

CSS 内容

+ +
.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.horizontal-box {
+  display: flex;
+  flex-flow: row;
+}
+.spacer {
+  flex: auto;
+  background-color: black;
+}
+.centered-element {
+  flex: none;
+  background-color: white;
+}
+
+ +

HTML 内容

+ +
<div class="vertical-box">
+  <div class="spacer"></div>
+  <div class="centered-element horizontal-box">
+    <div class="spacer"></div>
+    <div class="centered-element">Centered content</div>
+     <div class="spacer"></div>
+  </div>
+  <div class="spacer"></div>
+</div>
+
+ +

结果

+ +

{{ EmbedLiveSample('示例_1_在页面中把一个元素居中', 500, 500) }}

+ +

示例2: 垂直放置一系列的容器

+ +

假设你有一个带有头部区域，内容区域，和底部区域的页面。头部和底部应该有一个固定的尺寸，但是内容区域应该根据可以利用的空间来缩放。这可以通过设置内容区域的 {{cssxref("flex")}} 属性，设置头部区域 {{cssxref("flex")}} 属性，底部区域不设置来实现自动扩展功能。

+ +

CSS 内容

+ +
.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.fixed-size {
+  flex: none;
+  height: 30px;
+  background-color: black;
+  text-align: center;
+}
+.flexible-size {
+  flex: auto;
+  background-color: white;
+}
+
+ +

HTML 内容

+ +
<div id="document" class="vertical-box">
+  <div class="fixed-size"><button id="increase-size">Increase container size</button></div>
+  <div id="flexible-content" class="flexible-size"></div>
+  <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div>
+</div>
+
+ +

Javascript 内容

+ +
var height = 400;
+document.getElementById('increase-size').onclick=function() {
+  height += 10;
+  if (height > 500) height = 500;
+  document.getElementById('document').style.height = (height + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  height -= 10;
+  if (height < 300) height = 300;
+  document.getElementById('document').style.height = (height + "px");
+}
+ +

结果

+ +

{{ EmbedLiveSample('示例2_垂直放置一系列的容器', 500, 500) }}

+ +

这个例子已经设定好了，可以通过点击头部来增加尺寸，通过点击底部来减小尺寸。仔细观察在保持头部和底部尺寸不变的情况下，内容区域是如何自动缩放的。

+ +

示例3: 创建一个水平折叠的容器

+ +

在某些时候，你可能想让一些信息在屏幕尺寸允许的情况下呈水平布局，但是在屏幕不允许的情况下可以水平折叠。这对 flexbox 来讲太容易实现了。你通过设置 {{cssxref("flex-flow")}} 的值为 wrap 来实现。

+ +

CSS 内容

+ +
.horizontal-container {
+  display: flex;
+  width: 300px;
+  flex-flow: row wrap;
+}
+.fixed-size {
+  flex: none;
+  width: 100px;
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+
+ +

HTML 内容

+ +
<div id="container" class="horizontal-container">
+  <div class="fixed-size">Element 1</div>
+  <div class="fixed-size">Element 2</div>
+  <div class="fixed-size">Element 3</div>
+</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button>
+
+ +

Javascript 内容

+ +
var width = 300;
+
+document.getElementById('increase-size').onclick=function() {
+  width += 100;
+  if (width > 300) width = 300;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  width -= 100;
+  if (width < 100) width = 100;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+ +

结果

+ +

{{ EmbedLiveSample('示例3_创建一个水平折叠的容器', 500, 200) }}

+ +

参考

+ + diff --git "a/files/zh-cn/web/css/css_flexible_box_layout/\345\205\270\345\236\213_\347\224\250\344\276\213_\347\232\204_flexbox/index.html" "b/files/zh-cn/web/css/css_flexible_box_layout/\345\205\270\345\236\213_\347\224\250\344\276\213_\347\232\204_flexbox/index.html" new file mode 100644 index 0000000000..1b4c283f36 --- /dev/null +++ "b/files/zh-cn/web/css/css_flexible_box_layout/\345\205\270\345\236\213_\347\224\250\344\276\213_\347\232\204_flexbox/index.html" @@ -0,0 +1,131 @@ +--- +title: Flexbox典型用例 +slug: Web/CSS/CSS_Flexible_Box_Layout/典型_用例_的_Flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +

{{CSSRef}}

+ +

在这个文档中，我们将看一些常见flexbox的用例—这些都是比其他布局更合理的方法。

+ +

为什么选择flexbox？

+ +

在浏览器完美支持的环境中，你选择使用flexbox的原因是你希望把一堆元素不是放在这个方向就是那个方向。 因为在放置元素过程中，你想控制元素在那个方向的维度，或者控制他们彼此之间的间距。flexbox就是为此设计的。. 又可以阅读Relationship of Flexbox to other layout methods来了解更多关于flexbox和CSS Grid布局的区别, 在这篇文章里面，我们会讨论flexbox如何运用与CSS整体布局。

+ +

在现实中，为了便于对齐，我们通常会选择用Flexbox作为替代品，来完成即使用Grid布局更好的情况。一旦盒子对齐（Box Alignment ）被盒模型所实行，这种情况就会得到改善。在这个教程中，我们会介绍一些会在现在使用flexbox的用例。

+ +

导航

+ +

导航的一个常见特征，就是使用水平条的样式去呈现一系列元素。这一模式看起来很简单，但是在 flexbox 出现之前却是很难实现的。 它成为一个最简单的 flexbox 示例，可以被被看成是 flexbox 理想的使用场景。

+ +

当我们有一组元素需要水平排列展示，很可能在末尾会多出一些空间。我们需要决定如何去处理这些额外的空间，通常有多种不同的方案。 我们要么在元素外部展示这些空间即使用间距或包裹的方式来分隔开不同元素，要么将空间吸收至元素内部即需要一个方法来允许元素拉伸以占满额外空间。

+ +

在元素外部处理空间分布

+ +

为了让多余的空间分布在多个元素之间或周围，我们使用 flexbox 中相应的对齐属性以及 {{cssxref("justify-content")}} 属性。你可以通过 Aligning Items in a flex container 来阅读更多关于这个专门用来处理主轴（main axis）对齐的属性。

+ +

在下面的示例中，我们让各元素都展示为其自身的尺寸，通过使用 justify-content: space-between 使元素之间拥有相同的空间。你可以通过 space-around 的值来改变空间分布的方式，在浏览器支持的环境下还可以使用 space-evenly。你也可以使用 flex-start 让空间展示在所有元素末尾。使用 flex-end 让空间展示在所有元素之前,  center 可以剧中所有元素。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

+ +

让元素自己处理空间分布

+ +

导航的另一个不同模式是让元素自己去决定如何处理额外的空间，而不是将空间分布在它们之间。 在这种情况下，我们使用 {{cssxref("flex")}} 属性来允许各元素彼此成比例的拉伸和收缩，正如 Controlling ratios of flex items along the main axis 所描述。

+ +

如果我想让导航中的所有元素都等宽，会使用 flex: auto，这是 flex: 1 1 auto 的简写形式。所有元素都在它们的 flex-basis 尺寸上进行自动的收缩。这意味着，较长的元素会获得更多的空间。因为 flex-basis 的值被设置为 0，所以所有空间都会被平均分配。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

+ +

拆分导航

+ +

另一种在主轴上对齐元素的方式就是使用自动边距。 这种方式将创造出一部分元素左对齐而另一部分右对齐的导航栏设计。

+ +

这儿我们使用在 Using auto margins for main axis alignment 这篇文章中介绍的自动边距技术。所有的元素在主轴上按照弹性盒布局的默认设定 flex-start 进行对齐，同时我们给那个需要右对齐的元素添加 margin-left: auto; 样式。你可以尝试将那个类名转移到其它元素上以改变（向右）分割作用的位置。

+ +

在这个例子里我们也为每个元素启用了 margin 属性来控制元素间的间隔，并给容器添加负边距以保证元素与容器的接洽处没有缝隙。在弹性盒布局实现盒式对齐规范中的 gap 属性前，如果我们想要控制元素的间隔就不得不使用使用边距属性。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

+ +

元素居中

+ +

在弹性盒布局到来之前，开发者们曾开玩笑说网页设计中最难的部分是垂直居中。 现在，使用弹性盒布局中的对齐属性，这会变得很简单，如下例所示。

+ +

你可以修改对齐方式，用 flex-start 使元素对齐到交叉轴的开始处或者用 flex-end 使元素对齐到交叉轴的结束处。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

+ +

在未来，我们可能不需要为了元素的居中而创建一个弹性盒容器，因为盒对齐属性最终会在块布局中实现。但是现在，假如你想在一个元素中居中另一个，弹性盒布局是一个很好的选择。在上面的例子中，将一个元素放入弹性盒容器里之后，要么在容器中使用 align-items， 要么在元素中使用 align-self 来达到所需的效果。

+ +

绝对底部

+ +

不管你使用的是弹性盒还是网格来进行布局，这些布局方式都只对弹性盒容器或者网格容器的（直接）子元素生效。这也意味着即使你的 content 长度不定，组件在高度上仍会充满整个弹性盒容器或者网格容器。但任何使用常规块布局的方法都会导致 content 内容较少时 footer 上升到 content 下方而不是容器的底部。Two card components showing that the internals of the component do not stretch with the wrapper.

+ +

弹性盒就能解决常规块布局的问题。我们创建一个弹性盒容器， 并启用 {{cssxref("flex-direction")}}: column 。之后我们在 content 部分启用 flex: 1 —— flex: 1 1 0 的缩略形式，这个元素就可以在 flex-basis 为零的基础上伸缩。因为这是唯一一个可以延伸的元素，它会占据所有在弹性盒容器中可以占据的空间，同时将 footer 推至底部。如果你移除例子里的属性 flex 你就会看见 footer 回到 content 底部。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

+ +

媒体对象

+ +

媒体对象是网页设计中的常见模式：这种模式下，一侧具有图片或其他元素，另一侧具有文本。理想情况下，媒体对象应该可以翻转：即把图片从左侧移动到右侧。

+ +

这种模式随处可见，用于评论、以及其他需要显示图片和描述的地方。使用flexbox可以允许包含图片的媒体对象部分从图片中获取其尺寸调整信息，并对媒体对象的主体进行弹性布局，以占用剩余空间。

+ +

在下面的实例中，您可以看到我们的媒体对象。使用对齐属性来将交叉轴上的元素对齐到flex-start，然后为.content flex元素设置为flex: 1。与上面的列布局卡片模式一样，启用flex: 1表示此部分卡片可以延伸。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

+ +

Some things that you might want to try in this live example relate to the different ways you might want to constrain the media object in your design.

+ +

为避免图片过大，可以在为图片添加{{cssxref("max-width")}}。由于媒体对象那一侧使用的是flexbox的初始值，它可以缩小但不会延伸，且其 flex-basis 值是auto。应用于图片的任何{{cssxref("width")}} 或 max-width将会成为flex-basis。

+ +
.image img {
+  max-width: 100px;
+}
+
+ +

你也可以允许双方按比例延伸和缩小。如果将两边都设置为flex: 1，它们从{{cssxref("flex-basis")}}为0增长和缩小，因此最终会得到两个大小相等的列。你可以将内容作为指南，并将其都设置为 flex: auto，这种情况下，它们将从内容的大小或直接应用于弹性元素的任何大小（例如图片的宽度）延伸和缩小。

+ +
.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

You could also give each side different {{cssxref("flex-grow")}} factors, for example setting the side with the image to flex: 1 and the content side to flex: 3. This will mean they use a flex-basis of auto but distribute that space at different rates according to the flex-grow factor you have assigned. The flex properties we use to do this are described in detail in the guide Controlling ratios of flex items along the main axis.

+ +
.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

Flipping the media object

+ +

To switch the display of the media object so that the image is on the right and the content is on the left we can use the flex-direction property set to row-reverse. The media object now displays the other way around. I have achieved this in the live example by adding a class of flipped alongside the existing .media class. This means you can see how the display changes by removing that class from the html.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

+ +

Form controls

+ +

Flexbox is particularly useful when it comes to styling form controls. Forms have lots of markup and lots of small elements that we typically want to align with each other. A common pattern is to have an {{htmlelement("input")}} element paired with a {{htmlelement("button")}}, perhaps for a search form or where you simply want your visitor to enter an email address.

+ +

Flexbox makes this type of layout easy to achieve. I have contained my <button> and <input> field in a wrapper which I have given a border and set to display: flex. I then use the flex properties to allow the <input> field to grow, while the button does not grow. This means we have a pair of fields, with the text field growing and shrinking as the available space changes.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

+ +

You could add a label or icon to the left as easily as we popped the button onto the right. I have added a label, and other than some styling for background colour I didn’t need to change the layout. The stretchy input field now has a little less space to play with but it uses the space left after the two items are accounted for.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

+ +

Patterns like this can make it much easier to create a library of form elements for your design, which easily accommodate additional elements being added. You are taking advantage of the flexibility of flexbox by mixing items that do not grow with those that do.

+ +

结论

+ +

当了解上面的这些示例时，你已经满怀希望的想象怎么找到最好的方式使用弹性盒子布局实现你想要的结果。大部分情况下，你拥有不止一种选择。将可以变化的内容和不能变化的混合在一起，通过内容来决定他们的大小或者允许弹性布局设置按比例分配空间。要因地制宜，对症下药。

+ +

先考虑一下用什么方法展示你的内容比较好，然后在了解怎么用弹性布局或其他布局方法实现你的想法。

diff --git "a/files/zh-cn/web/css/css_flexible_box_layout/\345\274\271\346\200\247\347\233\222\345\255\220\344\270\216\345\205\266\344\273\226\345\270\203\345\261\200\346\226\271\346\263\225\347\232\204\350\201\224\347\263\273/index.html" "b/files/zh-cn/web/css/css_flexible_box_layout/\345\274\271\346\200\247\347\233\222\345\255\220\344\270\216\345\205\266\344\273\226\345\270\203\345\261\200\346\226\271\346\263\225\347\232\204\350\201\224\347\263\273/index.html" new file mode 100644 index 0000000000..c90b3416a5 --- /dev/null +++ "b/files/zh-cn/web/css/css_flexible_box_layout/\345\274\271\346\200\247\347\233\222\345\255\220\344\270\216\345\205\266\344\273\226\345\270\203\345\261\200\346\226\271\346\263\225\347\232\204\350\201\224\347\263\273/index.html" @@ -0,0 +1,123 @@ +--- +title: 弹性盒子与其他布局方法的联系 +slug: Web/CSS/CSS_Flexible_Box_Layout/弹性盒子与其他布局方法的联系 +tags: + - CSS + - box alignment + - flexbox +translation_of: >- + Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods +--- +
{{CSSRef}}
+ +

在本文中，我们将了解弹性盒子（Flexbox）如何与所有其他CSS模块相适应。如果您想学习flexbox，我们将一起找出需要注意的规范和flexbox与一些其他模块不同的原因。

+ +
+

注意：CSS 1和CSS 2是一个单一的整体规范，其中所有CSS都定义在一个文档中。随着CSS成为一种功能更加丰富的语言，各个部分有不同的发展速度，如何维护一个庞大的规范就成了问题。因此现在的CSS是模块化的，不同的CSS模块有不同的规范，一起构成了现在的CSS。这些模块之间相互关联，并且处于不同的开发阶段。

+
+ +

box alignment 模块

+ +

许多人开始关注flexbox的最初原因是在flex容器中能够很好的对齐其中的元素。flexbox可以设置在其交叉轴以及主轴上的对齐属性。

+ +

这些属性最开始出现在flexbox规范中，现在已经成为Box Alignment规范的一部分。 这个规范详细说明了在所有布局中（不仅仅是flexbox）对齐属性是如何起作用的。 对齐属性用于设置元素对齐方式和沿轴的空间分配。

+ +

之所以在flexbox规范和box alignment模块规范中都有对对齐属性的详细描述，是为了确保flexbox规范的完成不会受box alignment模块规范的影响，因为后者需要详细说明所有的布局类型中的对齐方法。flexbox规范中有一条注释指出将来一旦Box Alignment Level 3完成，它将会取代flexbox规范中的相关定义：

+ +
+

“注意：虽然对齐属性是在CSS Box Alignment [CSS-ALIGN-3]中定义的，但“ Flexible Box Layout”在此处重现了相关属性的定义，以免形成规范性的依赖关系，而这可能会减慢规范的发展。这些属性仅适用于Flex布局，直到CSS Box Alignment Level 3完成并定义其对其他布局模式的效果；此外，在Box Alignment模块中定义的任何新值都将应用于Flexible Box Layout；换句话说，一旦Box Alignment模块完成，其中的相关定义将取代此处的定义。”

+
+ +

在本系列的后续文章（在flex容器中对齐元素）中，我们将彻底研究Box Alignment属性如何应用于flex元素。

+ +

gap属性

+ +

属性{{cssxref("row-gap")}} 和 {{cssxref("column-gap")}}，其简写为{{cssxref("gap")}}，近期添加到了盒子布局规范中。这些属性（名称为grid-row-gap, grid-column-gap and grid-gap）最初定义在CSS网格布局中。但是他们被重命名并移入盒子布局规范。这样的话，所有的布局方法都可以使用这些属性。不过在浏览器实现Flex的这些属性之前只能通过{{cssxref("margin")}} 来控制元素之间的间隙距离。

+ +

Writing Modes

+ +

In the Basic concepts of flexbox article, I explained that flexbox is writing mode aware. Writing modes are fully detailed in the CSS Writing Modes specification, which details how CSS supports the various different writing modes that exist internationally. We need to be aware of how this will impact our flex layouts as writing mode changes the direction that blocks are laid out in our document. Understanding block and inline directions is key to new layout methods.

+ +

It is worth noting that we might want to change the writing mode of our document for reasons other than publishing content in a language that uses a different writing mode. See this article for a full description of writing modes and ways to use them, both for content in other languages and for creative reasons. 

+ +

The writing modes

+ +

The writing modes specification defines the following values of the {{cssxref("writing-mode")}} property, which serve to change the direction that blocks are laid out on the page, to match the direction that blocks lay out when content is formatted in that particular writing mode. You can change the live example below to these modes in order to see what happens to the flex layout.

+ +
    +
  • horizontal-tb
    • +
  • vertical-rl
    • +
  • vertical-lr
    • +
  • sideways-rl
    • +
  • sideways-lr
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} 

+ +

Note that sideways-rl and sideways-lr have support only in Firefox currently. There are also some known issues with regard to writing-mode and flexbox. You can see more information on browser support in the MDN documentation for writing-mode. However if you are planning on using writing modes in your layout, carefully testing the results is advisable — not least because it would be easy to make things hard to read!

+ +

Note that you would not normally use CSS and the writing-mode property to change an entire document to another writing mode. This would be done via HTML, by adding a dir and lang attribute to the html element to indicate the document language and default text direction. This would mean that the document would display correctly even if CSS did not load.

+ +

Flexbox and other layout methods

+ +

The flexbox specification contains a definition of what happens if an item uses another layout method and then becomes a flex item. For example, if an item is floated and then its parent becomes a flex container. Or, how a flex container behaves as part of layout.

+ +

An element set to display: flex behaves in most ways like any other block level container that establishes a containing block. Floats will not intrude, and the containers' margins will not collapse.

+ +

With regard to flex items, if an item was floated or cleared and then becomes a flex item due to the parent having display: flex applied, the floating and clearing will no longer happen, and the item will not be taken out of normal flow in the way that floats are. If you have used the {{cssxref("vertical-align")}} property, as used with inline-block or table layout for alignment, this will no longer affect the item and you can use the alignment properties of flexbox instead.

+ +

In this next live example the child elements have been floated, and then their container has had display: flex added. If you remove display: flex, you should see that the .box element collapses as we have no clearing applied. This demonstrates that the float is happening. Re-apply display: flex and the collapsing does not happen. This is because the items no longer have a float applied, as they have been transformed into flex items.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}

+ +

Flexbox and Grid Layout

+ +

CSS Grid Layout and Flexbox generally act in the same way with regards to overwriting other methods. You might however want to use flexbox as a fallback for grid layout, as there is better support for flexbox in older browsers. This approach works very well. If a flex item becomes a grid item, then the flex properties that may have been assigned to the child elements will be ignored.

+ +

You can use the Box Alignment properties across both layout methods, so using flexbox as a fallback for grid layout can work very well.

+ +

Flex and grid — what's the difference?

+ +

A common question is to ask what the difference is between Flexbox and CSS Grid Layout — why do we have two specifications that sometimes appear to be doing the same thing?

+ +

The most straightforward answer to this question is defined in the specifications themselves. Flexbox is a one-dimensional layout method whereas Grid Layout is a two-dimensional layout method. The example below has a flex layout. As already described in the Basic concepts article, flex items can be allowed to wrap but, once they do so, each line becomes a flex container of its own. When space is distributed flexbox does not look at the placement of items in other rows and tries to line things up with each other.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}

+ +

If we create a very similar layout using Grid, we can control the layout in both rows and columns.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}

+ +

These examples point to another key difference between these layout methods. In Grid Layout you do the majority of sizing specification on the container, setting up tracks and then placing items into them. In flexbox, while you create a flex container and set the direction at that level, any control over item sizing needs to happen on the items themselves.

+ +

In some cases you could happily use either layout method, but as you become confident with both you will find each one suiting different layout needs, and you will end up with both methods in your CSS. There is rarely a right or wrong answer.

+ +

As a rule of thumb, if you are adding widths to flex items in order to make items in one row of a wrapped flex container line up with the items above them you really want two-dimensional layout. In this case it is likely that the component would be better laid out using CSS Grid Layout. It isn't the case that you should use flexbox for small components and grid layout for larger ones; a tiny component can be two dimensional, and a large layout can be represented better with layout in one dimension. Try things out — we have a choice in layout method for the first time, so take advantage of it.

+ +

For more comparisons of grid and flexbox see the article Relationship of Grid Layout to other layout methods. This article details many of the ways that Grid Layout differs from flex layout, and demonstrates some of the extra functionality you get when using Grid Layout such as layering of items on the grid. This may also help in your decision as to which layout method to use.

+ +

Flexbox and display: contents

+ +

The contents value of the {{cssxref("display")}} property is a new value that is described in the spec as follows:

+ +
+

“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”

+
+ +

This value of display controls box generation, and whether the element should generate a box that we can style and see on the page, or whether instead the box it would normally create should be removed and the child elements essentially moved up to participate in whatever layout method the parent would have been part of. This is much easier to see with an example.

+ +

In the following live example I have a flex container with three child elements. One of these flex items has two elements nested inside it, which would not ordinarily participate in flex layout. Flex layout only applies to the direct children of a flex container.

+ +

By adding display: contents to the wrapper around the nested elements, you can see that that item has disappeared from the layout, allowing the two sub-children to be laid out as if they were direct children of the flex container. You can try removing the display: contents line to see it return.

+ +

Note that this only removes the box from the layout; the sub-children don’t become direct children in any other way. You can see that as I have used a direct child selector to add the background and borders to the flex items, this has not been applied to our nested children. They have been laid out as flex items, but as they are not direct children they do not get the other styling.

+ +
+

Warning: Use of display: contents will also remove the element from the accessibility tree – screen readers will not see what's inside, just the same as if you used display: none. Use of contents should only be for presentational, not content, elements.

+
+ +

Also, having removed the box you cannot then use it to — for example — add a background colour behind the nested sub children. If you remove display: contents in this live example you will see that the direct child we are removing has an orange background colour. This also disappears when the box disappears. 

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}

+ +

Browser support for display:contents is limited and required for this demo to work. Firefox supports display: contents already, and the value is being implemented in Chrome. Once there is better browser support this feature will be very useful in circumstances where you need the markup for semantic reasons but do not want to display the box that it would generate by default.

diff --git a/files/zh-cn/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html b/files/zh-cn/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html new file mode 100644 index 0000000000..e977a07acb --- /dev/null +++ b/files/zh-cn/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html @@ -0,0 +1,130 @@ +--- +title: 常规流中的块和内联布局 +slug: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +--- +
{{CSSRef}}
+ +

在这篇指南中，我们会探讨块级元素和内联元素在常规流中是怎样工作的。

+ +

在CSS 2.1规范中我们定义了常规流（Normal Flow）。常规流中的任何一个盒子总是某个格式区域（formatting context）中的一部分。块级盒子是在块格式区域（block formatting context）中工作的盒子，而内联盒子是在内联格式区域（inline formatting context）中工作的盒子。任何一个盒子总是块级盒子或内联盒子中的一种。

+ +

规范中还规定了块格式区域与内联格式区域中的元素行为。对于块级格式环境，规范内规定：

+ +
+

“在一个块格式区域中，盒子会从包含块的顶部开始，按序垂直排列。同级盒子间的垂直距离会由“margin”属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。

+ +

在一个块格式区域中，每个盒子的左外边缘会与包含块左边缘重合（如果是从右到左的排版顺序，则盒子的右外边缘与包含块右边缘重合）。” - 9.4.1

+
+ +

对于内联格式区域中的元素：

+ +
+

“在内联格式区域中，盒子会从包含块的顶部开始，按序水平排列。只有水平外边距、边框合内边距会被保留。这些盒子可以以不同的方式在垂直方向上对齐：可以底部对齐或顶部对其，或者按文字底部进行对齐。我们把包含一串盒子的矩形区域称为一个线条框。（The rectangular area that contains the boxes that form a line is called a line box.）” - 9.4.2

+
+ +

需要注意的是，CSS 2.1规范将文档的书写模式定义为从上到下横板排布，这从块级盒子的垂直间距这一属性就能看出来（Note that the CSS 2.1 specification describes documents as being in a horizontal, top to bottom writing mode. For example, by describing vertical distance between block boxes.）。在竖版书写模式工作时，块元素和内联元素的行为是相同的，关于这个我们将在未来的流布局与书写模式指南中进行探讨。

+ +

块格式区域中的元素

+ +

比如在英语环境中，块元素工作于横板书写模式中，此时的块元素会垂直排布，一个在另一个之下。

+ +

+ +

而在竖版书写模式中，块元素会水平排布。

+ +

+ +

在本指南的例子中，我们使用的是英语，因此会按横板模式进行书写。不过，即使您的文档是按照竖版模式进行书写的，描述的所有内容也都应该以相同的方式工作。

+ +

如规范中所定义，外边距使得两个块级盒子分开。这个例子展示了一个非常简单的由两个段落组成的排版，每个段落都加了一个边框。浏览器的默认样式表通过增加外边距（margin）的方式在每个段落的顶部和底部留出一定空间。

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}

+ +

如果我们将p元素的边距设置为0，两个边框会紧贴在一起。

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}

+ +

默认情况下，块级元素将占据这一内联方向的所有空间，因此我们的段落会铺开分布在多行，尽可能排满他的包含块。（By default block elements will consume all of the space in the inline direction, so our paragraphs spread out and get as big as they can inside their containing block.）如果限定了段落元素的宽度，第二个段落仍然会排布在第一个段落的下面——即使有足够空间使它们并排。每个块级元素都会从包含块的起始边开始，因此，在当前书写模式下，所有句子会从包含块的起始边开始。

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}

+ +

外边距折叠

+ +

在规范中提到，块级元素之间的外边距会发生折叠。这意味着，如果一个具有上边距的元素排在在一个具有下边距的元素之下时，他们之间的间距不会是这两个外边距的和，即外边距会发生折叠，简单来说就是，间距与两个外边距中的较大者一样大。

+ +

在下面的例子中，段落的上边距设为20px，下边距设为40px，而段落之间的间距大小会是40px。这是因为第二段中的上边距比较小被折叠，间距跟随了第一个段落更大的下边距。

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}

+ +

你可以在我们的文章《掌握外边距折叠》中阅读更多关于这一部分的内容。

+ +
+

注：如果不确定是否发生了外边距折叠，你可以使用浏览器的开发人员工具查看盒模型。准确的外边距值可以帮助你判断是否有外边距折叠发生。
+  

+ +

+
+ +

内联格式区域中的元素

+ +

Inline elements display one after the other in the direction that sentences run in that particular writing mode. While we don’t tend to think of inline elements as having a box, as with everything in CSS they do. These inline boxes are arranged one after the other. If there is not enough space in the containing block for all of the boxes a box can break onto a new line. The lines created are known as line boxes.
+ 内联元素按照句子在特定书写模式下运行的方向依次显示。虽然我们不倾向于认为内联元素有一个框，就像CSS中的所有元素一样。这些内嵌的盒子一个接一个排列。如果包含块中没有足够的空间容纳所有框，则框可以换行。创建的行称为行框。

+ +

In the following example we have three inline boxes created by a paragraph with a strong element inside it.
+ 在下面的示例中，我们有三个由段落创建的内联框，其中包含一个强元素。

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}

+ +

The boxes around the words before the strong element and after the strong element are referred to as anonymous boxes, boxes introduced to ensure that everything is wrapped in a box, but ones that we cannot target directly.
+ 在强元素前和强元素后的单词周围的框称为匿名框，引入的框确保所有内容都包装在一个框中，但我们不能直接针对它们。

+ +

The line box size in the block direction (so the height when working in English) is defined by the tallest box inside it. In the next example I have made the strong element 300%, that content now defines the height of the line box on that line.
+ 块方向上的线框大小（以英文工作时的高度为准）由其内部最高的框定义。在下一个示例中，我将强元素300%设为内容，该内容现在定义了该行上行框的高度。

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}

+ +

Find out more about how Block and Inline Boxes behave in our Guide to the Visual Formatting Model.
+ 在我们的视觉格式模型指南中，了解更多关于块和内联框的行为。

+ +

The display property and flow layout
+ 显示属性和流布局编辑

+ +

In addition to the rules existing in CSS2.1, new levels of CSS further describes the behaviour of block and inline boxes. The display property defines how a box, and any boxes inside it behaves. In the CSS Display Model Level 3 we can learn more about how the display property changes the behaviour of boxes and the boxes they generate.
+ 除了CSS2.1中现有的规则之外，新级别的CSS还进一步描述了块和内联框的行为。“显示”属性定义框及其内部的所有框的行为方式。在CSS显示模型级别3中，我们可以进一步了解显示属性如何更改框及其生成的框的行为。

+ +

The display type of an element defines the outer display type, this dictates how the box displays alongside other elements in the same formatting context. It also defines the inner display type, which dictates how boxes inside this element behave. We can see this very clearly when considering a flex layout. In the example below I have a div, which I have given display: flex. The flex container behaves like a block element, it displays on a new line and takes up all of the space it can in the inline direction. This is the outer display type of block.
+ 一个元素的显示类型定义了外部显示类型，这规定了该框如何与同一格式上下文中的其他元素一起显示。它还定义了内部显示类型，该类型指示此元素内的框的行为方式。在考虑灵活布局时，我们可以很清楚地看到这一点。在下面的示例中，我有一个DIV，我已经给出了display:flex。flex容器的行为类似于一个块元素，它显示在一条新行上，并占用它在内联方向上可以占用的所有空间。这是块的外部显示类型。

+ +

The flex items however are participating in a flex formatting context, because their parent is the element with display: flex, which has an inner display type of flex, establishing the flex formatting context for the direct children.
+ 但是，flex项正在参与flex格式上下文，因为它们的父级是带有display:flex的元素，后者具有flex的内部显示类型，为直接子级建立flex格式上下文。

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}

+ +

Therefore you can think of every box in CSS working in this way. The box itself has an outer display type, so it knows how to behave alongside other boxes. It then has an inner display type which changes the way its children behave. Those children then have an outer and inner display type too. The flex items in the previous example become flex level boxes, so their outer display type is dictated by way of them being part of the flex formatting context. They have an inner display type of flow however, meaning that their children participate in normal flow. Items nested inside our flex item lay themselves out as block and inline elements unless something changes their display type.
+ 因此，您可以想到CSS中的每个框都是以这种方式工作的。盒子本身有一个外部显示类型，所以它知道如何与其他盒子一起工作。然后它有一个内部显示类型，它改变了它的子对象的行为方式。然后，这些子级也有一个外部和内部显示类型。上一个示例中的flex项变为flex级别框，因此它们的外部显示类型取决于它们是flex格式上下文的一部分。然而，他们有一种内在的流动显示类型，这意味着他们的孩子参与正常的流动。嵌套在flex项中的项将自己设置为块和内联元素，除非有什么改变了它们的显示类型。

+ +

This concept of the outer and inner display type is important as this tells us that a container using a layout method such as Flexbox (display: flex) and Grid Layout (display: grid) is still participating in block and inline layout, due to the outer display type of those methods being block.
+ 外部和内部显示类型的概念很重要，因为这告诉我们，由于这些方法的外部显示类型为块，因此使用flexbox（display:flex）和grid layout（display:grid）等布局方法的容器仍在参与块和内联布局。

+ +

Changing the Formatting Context an element participates in
+ 更改元素参与的格式上下文

+ +

Browsers display items as part of a block or inline formatting context in terms of what normally makes sense for that element. For example a strong element is used to highlight a word, and displays bold in browsers. It would not generally make sense for that strong element to be displayed as a block level element, breaking onto a new line. If you did want all strong elements to display as block elements, you could do so by setting display: block on strong. This means that you can always use the most semantic HTML element to markup your content, and then change the way it displays using CSS.
+ 浏览器将项目显示为块或内联格式上下文的一部分，根据该元素通常的意义。例如，强元素用于突出显示单词，并在浏览器中显示粗体。一般来说，将该强元素显示为块级元素并中断到新行是没有意义的。如果确实希望所有强元素显示为块元素，可以通过将display:block设置为强来实现。这意味着您可以始终使用最语义的HTML元素标记内容，然后使用CSS更改其显示方式。

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}

+ +

Summary 总结

+ +

In this guide we have looked at how elements display in normal flow, as block and inline elements. Due to the default behaviour of these elements, an HTML document with no CSS styling at all, will display in a readable way. By understanding how normal flow works you will find layout easier, as you understand the starting point for making changes to how elements are displayed.
+ 在本指南中，我们研究了元素在正常流中如何显示为块和内联元素。由于这些元素的默认行为，一个完全没有CSS样式的HTML文档将以可读的方式显示。通过了解正常流的工作方式，您将更容易找到布局，因为您了解更改元素显示方式的起点。

+ +

See Also 另请参见

+ + diff --git a/files/zh-cn/web/css/css_flow_layout/flow_layout_and_overflow/index.html b/files/zh-cn/web/css/css_flow_layout/flow_layout_and_overflow/index.html new file mode 100644 index 0000000000..5c3f6a9489 --- /dev/null +++ b/files/zh-cn/web/css/css_flow_layout/flow_layout_and_overflow/index.html @@ -0,0 +1,82 @@ +--- +title: Flow Layout and Overflow 流布局和溢出 +slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow +translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow +--- +

When there is more content than can fit into a container, an overflow situation occurs. Understanding how overflow behaves is important in dealing with any element with a constrained size in CSS. This guide explains how overflow works when working with normal flow.
+ 当容器中的内容超过可容纳的范围时，就会发生溢出情况。了解溢出的行为对于处理CSS中大小受限的任何元素都很重要。本指南解释了使用正常流时溢出是如何工作的。

+ +

What is overflow?什么是溢出？

+ +

Giving an element a fixed height and width, then adding significant content to the box, creates a basic overflow example:
+ 为元素赋予固定的高度和宽度，然后向框中添加重要内容，将创建一个基本的溢出示例：

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}

+ +

The content goes into the box. Once it fills the box, it continues to overflow in a visible way, displaying content outside the box, potentially displaying under subsequent content. The property that controls how overflow behaves is the overflow property which has an initial value of visible. This is why we can see the overflow content.
+ 内容将进入框中。一旦填充了该框，它将继续以可见的方式溢出，在框外显示内容，可能在随后的内容下显示。控制溢出行为的属性是初始值为Visible的溢出属性。这就是为什么我们可以看到溢出内容。

+ +

Controlling overflow控制溢出

+ +

There are other values that control how overflow content behaves. To hide overflowing content use a value of hidden. This may cause some of your content to not be visible.
+ 还有其他值控制溢出内容的行为。要隐藏溢出的内容，请使用值hidden。这可能会导致某些内容不可见。

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}

+ +

Using a value of scroll contains the content in its box and add scrollbars to enable viewing it. Scrollbars will be added even if the content fits in the box.
+ 使用值scroll包含其框中的内容，并添加滚动条以启用查看。即使内容适合该框，也将添加滚动条。

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}

+ +

Using a value of auto will display the content with no scrollbars if the content fits inside the box. If it doesn’t fit then scrollbars will be added. Comparing the next example with the example for overflow: scroll you should see overflow scroll has horizontal and vertical scrollbars when it only needs vertical scrolling. The auto example below only adds the scrollbar in the direct we need to scroll.
+ 如果内容适合方框，则使用值auto将显示不带滚动条的内容。如果它不适合，则会添加滚动条。将下一个示例与溢出示例进行比较：当溢出滚动只需要垂直滚动时，您应该看到它有水平滚动条和垂直滚动条。下面的自动示例只在我们需要滚动的直接位置添加滚动条。

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}

+ +

As we have already learned, using any of these values, other than the default of visible, will create a new Block Formatting Context.
+ 如果内容适合方框，则使用值auto将显示不带滚动条的内容。如果它不适合，则会添加滚动条。将下一个示例与溢出示例进行比较：当溢出滚动只需要垂直滚动时，您应该看到它有水平滚动条和垂直滚动条。下面的自动示例只在我们需要滚动的直接位置添加滚动条。

+ +

Note: In the Working Draft of Overflow Level 3, there is an additional value overflow: clip. This will act like overflow: hidden however it does not allow for programmatic scrolling, the box becomes non-scrollable. In addition it does not create a Block Formatting Context.
+ 注意：在溢出级别3的工作草案中，还有一个附加值overflow:clip。这将类似于溢出：隐藏，但不允许编程滚动，框将变为不可滚动。此外，它不会创建块格式上下文。

+ +

The overflow property is in reality a shorthand for the overflow-x and overflow-y properties. If you specify only one value for overflow, this value is used for both axes. However, you can specify both values in which case the first is used for overflow-x and therefore the horizontal direction, and the second for overflow-y and the vertical direction. In the below example, I have only specified overflow-y: scroll so we do not get the unwanted horizontal scrollbar.
+ 实际上，overflow属性是overflow-x和overflow-y属性的简写。如果只为溢出指定一个值，则此值用于两个轴。但是，您可以指定两个值，在这种情况下，第一个值用于overflow-x，因此是水平方向，第二个值用于overflow-y和垂直方向。在下面的示例中，我只指定了overflow-y:scroll，这样我们就不会得到不需要的水平滚动条。

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}

+ +

Flow Relative Properties流相对属性

+ +

In the guide to Writing Modes and Flow Layout, we looked at the newer properties of block-size and inline-size which make more sense when working with different writing modes than tying our layout to the physical dimensions of the screen. The Level 3 Overflow Module also includes flow relative properties for overflow - overflow-block and overflow-inline. These correspond to overflow-x and overflow-y but the mapping depends on the writing mode of the document.
+ 在编写模式和流布局指南中，我们研究了块大小和内联大小的较新属性，这些属性在使用不同的编写模式时比将布局与屏幕的物理尺寸联系起来更有意义。3级溢出模块还包括溢出-溢出块和溢出内联的流相关属性。这些对应于overflow-x和overflow-y，但映射取决于文档的写入模式。

+ +

These properties currently do not have implementations in browsers, so you will need to use the physical properties at the present time and adjust for your writing mode.
+ 这些属性当前在浏览器中没有实现，因此您需要在当前使用物理属性并根据您的写入模式进行调整。

+ +

Indicating Overflow 指示溢出

+ +

In the Level 3 Overflow specification we have some properties which can help improve the way content looks in an overflow situation.
+ 在3级溢出规范中，我们有一些属性可以帮助改进溢出情况下内容的外观。

+ +

Inline-Axis Overflow 内联轴溢出

+ +

The text-overflow property deals with text overflowing in the inline direction. It takes one of two values clip, in which case content is clipped when it overflows, this is the initial value and therefore the default behaviour. We also have ellipsis which renders an ellipsis, which may be replaced with a better character for the language or writing mode in use.
+ 文本溢出属性处理内联方向的文本溢出。它采用两个值clip中的一个值，在这种情况下，内容在溢出时被剪裁，这是初始值，因此是默认行为。我们还有一个省略号，它呈现了一个省略号，可以用一个更好的字符来替换使用中的语言或书写模式。

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}

+ +

Block-Axis Overflow 块轴溢出

+ +

There is also a proposal for a block-overflow property, although at the time of writing the name is still up for discussion. This proposal would enable the adding of an ellipsis when text overflows in the block dimension.
+ 还有一个关于块溢出属性的建议，尽管在编写名称时仍有待讨论。此建议将允许在块维度中文本溢出时添加省略号。

+ +

This is useful in the situation where you have a listing of articles, for example, and you display the listings in fixed height boxes which only take a limited amount of text. It may not be obvious to the reader that there is more content to click through to when clicking the box or the title. An ellipsis indicates clearly the fact there is more content. The specification would allow a string of content or a regular ellipsis to be inserted.
+ 例如，在有文章列表的情况下，这很有用，并且在固定高度框中显示列表，而固定高度框只接受有限的文本量。对于读者来说，当单击框或标题时，可能不太明显有更多的内容需要单击。省略号清楚地表明有更多的内容。规范允许插入一个内容字符串或常规省略号。

+ + + +

Summary 总结

+ +

Whether you are in continuous media on the web or in a Paged Media format such as print or EPUB, understanding how content overflows is useful when dealing with any layout method. By understanding how overflow works in normal flow, you should find it easier to understand the implications of overflow content in layout methods such as grid and flexbox.
+ 无论您是在Web上的连续媒体中，还是在页面媒体格式（如print或epub）中，了解在处理任何布局方法时内容溢出是如何有用的。通过了解正常流中溢出的工作方式，您应该会发现更容易理解布局方法（如网格和FlexBox）中溢出内容的含义。

+ +
{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/zh-cn/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html b/files/zh-cn/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html new file mode 100644 index 0000000000..75332b20f8 --- /dev/null +++ b/files/zh-cn/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html @@ -0,0 +1,118 @@ +--- +title: Flow Layout and Writing Modes 流布局和书写模式 +slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes +translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes +--- +

The CSS 2.1 specification, which details how normal flow behaves, assumes a horizontal writing mode. Layout properties should work in the same way in vertical writing modes. In this guide, we look at how flow layout behaves when used with different document writing modes.
+ CSS 2.1规范详细描述了正常流的行为，它采用了水平写入模式。布局属性在垂直写入模式中的工作方式应该相同。在本指南中，我们将研究流布局在与不同的文档写入模式一起使用时的行为。

+ +

This is not a comprehensive guide to the use of writing modes in CSS, the aim here is to document the areas where flow layout interacts with writing modes in possibly unanticipated ways. The external resources and see also sections of this document link to more writing modes resources.
+ 这不是CSS中书写模式使用的全面指南，这里的目的是以可能未预料到的方式记录流布局与书写模式交互的区域。外部资源，请参阅本文档的章节，链接到更多写作模式资源。

+ + + +

The Writing Modes Specification
+ 书写模式规范

+ +

The CSS Writing Modes Level 3 Specification defines the impact a change the document writing mode has on flow layout. In the writing modes introduction, the specification says,
+ CSS编写模式级别3规范定义了文档编写模式更改对流布局的影响。在书写模式介绍中，规范说：

+ +
+

“A writing mode in CSS is determined by the {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} properties. It is defined primarily in terms of its inline base direction and block flow direction.”
+ “CSS中的书写模式由书写模式、方向和文本方向属性决定。它主要是根据其内联基础方向和块流方向来定义的。”

+
+ +

The specification defines the inline base direction as the direction in which content is ordered on a line. This defines the start and end of the inline direction. The start is where sentences start and the end is where a line of text ends before it would begin to wrap onto a new line.
+ 规范将内联基方向定义为内容在行上的排序方向。这定义了内联方向的开始和结束。开始是句子开始的地方，结束是一行文本在开始换行之前结束的地方。

+ +

The block flow direction is the direction in which boxes, for example paragraphs, stack in that writing mode. The CSS writing-mode property controls the block flow direction. If you want to change your page, or part of your page, to vertical-lr then you can set writing-mode: vertical-lr on the element and this will change the direction of the blocks and therefore the inline direction as well.
+ 块流方向是框（例如段落）以该写入模式堆叠的方向。CSS写入模式属性控制块流方向。如果要将页面或页面的一部分更改为垂直lr，则可以在元素上设置书写模式：垂直lr，这将更改块的方向，因此也会更改内联方向。

+ + + +

While certain languages will use a particular writing mode or text direction, we can also use these properties for creative effect, such as running a heading vertically.
+ 虽然某些语言将使用特定的书写模式或文本方向，但我们也可以使用这些属性来产生创造性效果，例如垂直运行标题。

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}

+ +

The writing-mode property and block flow
+ 写入模式属性和块流

+ +

The {{cssxref("writing-mode")}} property accepts the values horizontal-tb, vertical-rl and vertical-lr. These values control the direction that blocks flow on the page. The initial value is horizontal-tb, which is a top to bottom block flow direction with a horizontal inline direction. Left to right languages, such as English, and Right to left languages. such as Arabic, are all horizontal-tb.
+ 写入模式属性接受值水平tb、垂直rl和垂直lr。这些值控制阻止页面流动的方向。初始值是水平tb，这是一个顶部到底部的块流方向，具有水平的内联方向。从左到右的语言，如英语和从右到左的语言。如阿拉伯语，都是水平结核。

+ + + +

The following example shows blocks using horizontal-tb.
+ 下面的示例显示了使用水平TB的块。

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}

+ +

The value vertical-rl gives you a right-to-left block flow direction with a vertical inline direction, as shown in the next example.
+ 值vertical rl为您提供了一个从右到左的块流方向和一个垂直的内联方向，如下一个示例所示。

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}

+ +

The final example demonstrates the third possible value for writing-mode — vertical-lr. This gives you a left-to-right block flow direction and a vertical inline direction.
+ 最后一个示例演示了第三个可能的写入模式值-垂直lr。这将为您提供一个从左到右的块流方向和一个垂直的内联方向。

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}

+ +

Boxes with a different writing mode to their parent
+ 对父级具有不同写入模式的框

+ +

When a nested box is assigned a different writing mode to its parent, then an inline level box will display as if it has display: inline-block.
+ 当一个嵌套框被分配给它的父级的不同的写入模式时，一个内联级别的框将显示，就好像它有display:inline块一样。

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}

+ +

A block-level box will establish a new block formatting context, meaning that if its inner display type would be flow, it will get a computed display type of flow-root. This is shown in the next example where the box which displays as horizontal-tb contains a float which is contained due to its parent establishing a new BFC.
+ 块级别的框将建立一个新的块格式上下文，这意味着如果其内部显示类型为“流”，则它将获得“流根”的计算显示类型。这在下一个示例中显示，其中显示为水平tb的框包含一个浮动，该浮动是由于其父级建立了一个新的bfc而包含的。

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}

+ +

Replaced elements 更换的元件

+ +

Replaced elements such as images will not change their orientation based on the writing-mode property. However, replaced elements such as form controls which include text, should match the writing mode in use.
+ 替换的元素（如图像）不会根据“写入模式”属性更改其方向。但是，替换的元素（如包含文本的表单控件）应与使用中的写入模式匹配。

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}

+ +

Logical Properties and Values
+ 逻辑属性和值

+ +

Once you are working in writing modes other than horizontal-tb many of the properties and values that are mapped to the physical dimensions of the screen seem strange. For example, if you give a box a width of 100px, in horizontal-tb that would control the size in the inline direction. In vertical-lr it controls the size in the block direction because it does not rotate with the text.
+ 一旦您在编写模式（而不是水平tb）时，许多映射到屏幕物理维度的属性和值看起来很奇怪。例如，如果为一个框提供100px的宽度，以水平tb表示，它将控制内联方向的大小。在垂直lr中，它控制块方向的大小，因为它不随文本旋转。

+ + + +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}

+ +

Therefore, we have new properties of {{cssxref("block-size")}} and {{cssxref("inline-size")}}. If we give our block an inline-size of 100px, it doesn’t matter whether we are in a horizontal or a vertical writing mode, inline-size will always mean the size in the inline direction.
+ 因此，我们有了块大小和内联大小的新属性。如果我们给块一个100px的内联大小，不管我们是处于水平还是垂直写入模式，内联大小总是指内联方向的大小。

+ + + +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}

+ +

The CSS Logical Properties and Values specification includes logical versions of the properties that control margins, padding and borders as well as other mappings for things that we have typically used physical directions to specify.
+ CSS逻辑属性和值规范包括用于控制页边距、填充和边框的属性的逻辑版本，以及用于我们通常使用物理方向指定的内容的其他映射。

+ +

Summary 总结

+ +

In most cases, flow layout works as you would expect it to when changing the writing mode of the document or parts of the document. This can be used to properly typeset vertical languages or for creative reasons. CSS is making this easier by way of introducing logical properties and values so that when working in a vertical writing mode sizing can be based on element's inline and block size. This will be useful when creating components which can work in different writing-modes.
+ 在大多数情况下，流程布局的工作方式与您在更改文档或文档部分的写入模式时所期望的一样。这可以用于正确排版垂直语言或出于创造性的原因。CSS通过引入逻辑属性和值使这变得更容易，这样在垂直写入模式下工作时，大小调整可以基于元素的内联和块大小。这在创建可以在不同写入模式下工作的组件时很有用。

+ +

See Also 另请参见

+ + + +

External Resources 外部资源

+ + + +
{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/zh-cn/web/css/css_flow_layout/index.html b/files/zh-cn/web/css/css_flow_layout/index.html new file mode 100644 index 0000000000..e6736b7023 --- /dev/null +++ b/files/zh-cn/web/css/css_flow_layout/index.html @@ -0,0 +1,45 @@ +--- +title: CSS 流式布局 +slug: Web/CSS/CSS_Flow_Layout +translation_of: Web/CSS/CSS_Flow_Layout +--- +
{{CSSRef}}
+ +
"文档流"或"流式布局"是在对布局进行任何更改之前，在页面上显示"块"和"内联"元素的方式。 这个"流"本质上是一系列的事物，它们都在你的布局中一起工作，并且互相了解。 一旦某部分脱离了"流"，它就会独立地工作。
+ +
 
+ +
在文档流中，内联元素按内联方向显示，即词语在依据文件写作模式的句子中表示的方向。块元素则一个接一个地显示，就像该文档的写作模式中的段落一样。 因此在英语中，内联元素从左边开始一个接一个地显示，块元素从顶部开始向下显示并移动页面。
+ +

示例

+ +

下面的示例演示块和内联级别框。两个带有绿色边框的段落元素是"块"级，其中一个在另一个下面显示。

+ +

第一个句子还包括一个带有蓝色背景的 span 元素。 这是行内级别，因此显示在句子的适当位置。

+ +

{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}

+ +

参见

+ + + +

参考

+ +

Glossary Entries

+ +
    +
  • {{Glossary("Block/CSS", "Block (CSS)")}}
    • +
+ + diff --git a/files/zh-cn/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/zh-cn/web/css/css_flow_layout/intro_to_formatting_contexts/index.html new file mode 100644 index 0000000000..8b9acd760f --- /dev/null +++ b/files/zh-cn/web/css/css_flow_layout/intro_to_formatting_contexts/index.html @@ -0,0 +1,90 @@ +--- +title: Introduction to formatting contexts 格式化上下文简介 +slug: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +tags: + - BFC + - 格式化上下文 +translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +--- +
{{CSSRef}}
+本文介绍格式化上下文的概念，其中有几种类型，包括块格式化上下文 block formatting contexts、内联格式化上下文 inline formatting contexts和灵活格式化上下文 flex formatting contexts。还介绍了它们的基本行为以及如何利用这些行为。
+ +

+页面上的所有内容都是格式化上下文 formatting context 的一部分，或者是一个以特定方式显示的区域。块格式上下文（BFC）将根据块布局规则布局子元素，灵活格式上下文 flex formatting context 将其子元素布局为灵活项{{Glossary("flex item", "flex items")}}等。每个格式上下文在其上下文中都有特定的布局规则。
+ +

Block formatting contexts 块格式化上下文

+ +

文档最外层元素使用块布局规则或称为初始块格式上下文。这意味着<html>元素块中的每个元素都是按照正常流程遵循块和内联布局规则进行布局的。参与 BFC 的元素使用CSS框模型概述的规则，该模型定义了元素的边距、边框和填充如何与同一上下文中的其他块交互。

+ +

创建新的块格式上下文

+ +

{{HTMLElement("html")}} 元素不是唯一能够创建块格式上下文的元素。默认为块布局的任何元素也会为其后代元素创建块格式上下文。此外，还有一些CSS属性可以使元素创建一个BFC，即使默认情况下它不这样做。

+ +

除了文档的根元素({{HTMLElement("html")}}) 之外，还将在以下情况下创建一个新的BFC：

+ +
    +
  • 使用{{cssxref("float")}} 时其浮动的元素
    • +
  • 绝对定位的元素 (包含 {{cssxref("position", "position: fixed", "#fixed")}} 或{{cssxref("position", "position: sticky", "#sticky")}}
    • +
  • 使用以下属性的元素 {{cssxref("display", "display: inline-block", "#inline-block")}}
    • +
  • 表格单元格或使用 display: table-cell, 包括使用 display: table-* 属性的所有表格单元格
    • +
  • 表格标题或使用 display: table-caption 的元素
    • +
  • 块级元素的 overflow 属性不为 visible
    • +
  • 元素属性为 display: flow-root 或 display: flow-root list-item
    • +
  • 元素属性为 {{cssxref("contain", "contain: layout", "#layout")}}, content, 或 strict
    • +
  • {{Glossary("flex item", "flex items")}}
    • +
  • 网格布局元素
    • +
  • multicol containers
    • +
  • 元素属性 {{cssxref("column-span")}} 设置为 all
    • +
+ +

这很有用，因为新的BFC的行为与最外层的文档非常相似，它在主布局中创造了一个小布局。BFC包含其内部的所有内容，{{cssxref("float")}} 和 {{cssxref("clear")}} 仅适用于同一格式上下文中的项目，而页边距仅在同一格式上下文中的元素之间折叠。

+ +

BFC 创建例子

+ +

让我们看看几个例子，来理解创建 BFC 的效果。

+ +

在下面的示例中，我们在应用了边框的 <div> 中有一个浮动元素。该 div 的内容与浮动元素一起浮动。由于float的内容比它旁边的内容高，所以现在DIV的边框贯穿了float。如流入和流出元素指南guide to in-flow and out of flow elements中所述，浮动已脱离文档流，因此DIV的背景和边框仅包含内容，而不包含浮动。

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

+ +

创建一个新的BFC将包含该浮动。在过去，一种典型的方法是设置 overflow: auto 或设置其他不是 overflow: visible 的值。

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}
+ 设置 overflow: auto 会自动创建包含浮动的新 BFC。现在，我们的DIV在布局中变成了一个迷你布局。任何子元素都将包含在其中。

+ +

使用 overflow 创建新的 BFC 的问题在于， overflow 属性用于告诉浏览器您希望如何处理溢出的内容。在某些情况下，当您纯粹使用此属性创建BFC时，您会发现不需要的滚动条或剪切阴影。另外，对于未来的开发人员来说，它可能不太可读，因为不能显式地表明为什么要使用溢出来实现这一目的。如果您使用了这个方法，最好对代码进行注释以便他人理解。

+ +

使用display:flow-root显式创建BFC

+ +


+ 使用 display: flow-root （或 display: flow-root list-item）将创建一个新的BFC，而不会产生任何其他潜在的问题副作用。

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}

+ +

使用 {{HTMLElement("div")}}上的 display: flow-root ，该容器内的所有内容都参与该容器的块格式上下文，并且浮动不会从元素底部弹出。

+ +

flow-root 关键字的意义是，创建的内容本质上类似于一个新的根元素（如 {{HTMLElement("html")}}所做），并确定这个新的上下文如何创建及其流布局如何实现。

+ +

行内格式化上下文

+ +

内联格式上下文存在于其他格式上下文中，可以将其视为段落的上下文。段落创建了一个内联格式上下文，其中在文本中使用诸如 {{HTMLElement("strong")}}、{{HTMLElement("a")}}或 {{HTMLElement("span")}} 元素等内容。

+ +

box model 不完全适用于参与内联格式上下文。在水平书写模式行中，水平填充、边框和边距将应用于元素，并左右移动文本。但是，元素上方和下方边距将不适用。应用垂直填充和边框可能会在内容的上方和下方重叠，因为在内联格式上下文中，填充和边框不会将行框撑开。

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}

+ +

其他格式上下文

+ +

本指南涵盖了流式布局，因此不涉及其他可能的格式上下文。因此，了解创建任何类型的格式上下文都将改变该格式上下文中元素的行为方式是很有用的。这种行为总是在规范中描述的，在MDN中也有描述。

+ +

总结

+ +

在本指南中，我们更详细地介绍了块和内联格式上下文以及创建块格式上下文（BFC）的重要主题。在下一个指南中，我们将了解正常流如何与不同的写入模式交互 how normal flow interacts with different writing modes。

+ +

另请参见

+ + diff --git "a/files/zh-cn/web/css/css_flow_layout/\345\234\250flow\344\270\255\345\222\214flow\344\271\213\345\244\226/index.html" "b/files/zh-cn/web/css/css_flow_layout/\345\234\250flow\344\270\255\345\222\214flow\344\271\213\345\244\226/index.html" new file mode 100644 index 0000000000..2c84dc8384 --- /dev/null +++ "b/files/zh-cn/web/css/css_flow_layout/\345\234\250flow\344\270\255\345\222\214flow\344\271\213\345\244\226/index.html" @@ -0,0 +1,64 @@ +--- +title: In Flow and Out of Flow +slug: Web/CSS/CSS_Flow_Layout/在Flow中和Flow之外 +translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow +--- +
{{CSSRef}}
+ +

在之前的 文档中我解释了常规流中块（block）和行（inline）布局，常规流中的所有元素都会以这种布局方式运作。

+ +

在下面的例子中，我新建了一个标题（h1元素），一个段落（p元素），一个无序列表（ul元素）和一个包含strong元素的段落（p元素），标题和段落都是块级（block level），strong元素为行级（inline）。列表中的项通过弹性盒布局排成一行，但是列表本身仍然处于块和内联布局中 - 他的display属性为block。

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}

+ +

可以说，示例中的所有元素都属于常规流，按照源代码中的顺序渲染到页面中。

+ +

脱离常规流的元素

+ +

下列元素会脱离常规流:

+ +
    +
  • floated items。浮动的元素
    • +
  • items with position: absolute (including position: fixed which acts in the same way)。通过设置position属性为absolute或者fixed的元素
    • +
  • the root element (html)根元素
    • +
+ +

脱离常规流的元素会创建一个新的块级格式化上下文（Block Formatting Context: BFC）环境，其中包含的所有元素构成了一个小的布局环境，与页面中的其他内容分隔开来。而根元素，作为页面中所有内容的容器，自身脱离常规流，为整个文档创建了一个块级格式化上下文环境。

+ +

Floated Items

+ +

在这个例子中，我有一个div，以及两个段落。我已经为段落添加了背景颜色，然后将div向左浮动。 div现在已经不再处于flow中了。

+ +

作为一个浮动的元素，它首先根据正常flow布局，然后从流动中取出并尽可能地向左移动

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}

+ +

你可以看到下面段落的背景颜色在下面运行，只是该段落的行框已被缩短以导致在浮动周围包裹内容的效果。我们段落的方框仍然按照正常流程规则显示。这就是为什么要在浮动项目周围留出空间，必须为项目添加边距，以便将线框推离它。您无法对以下内插内容应用任何内容来实现此目的。

+ +

Absolute Positioning

+ +

设置元素属性为 position: absolute 或者 position: fixed 会使此元素脱离文档流, 他本来占据的空间也会被移除. 在下面的例子中，我定义了三个p元素，并且将第二个p元素设置为 position absolute,  top: 30px , right: 30px. 使其脱离文档流。

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}

+ +

设置 position: fixed 也能使元素脱离文档流, 但是偏移量会根据视口而不是父元素来定。

+ +

当通过定位方式使元素脱离文档流，元素内容可能重叠，这需要你自己去处理。脱离文档流意味着页面中的其他元素不知道该元素的存在，故不会对该元素做出响应。

+ +

Relative Positioning and Flow

+ +

如果你给一个元素开启相对定位，那该元素依然会位于文档流中，然而你可以通过设置偏移值的方式来移动他。正如下面的例子所展示的，该元素的原先占据的空间仍然会被保留。

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}

+ +

当你移动一个元素或者使元素脱离文档流，为防止重叠，你可能需要对元素内容和元素周围的内容做一些管理，要么清除浮动， 要么保证相对定位不会覆盖其他元素。

+ +

Summary

+ +

In this guide we have covered the ways to take an element out of flow in order to achieve some very specific types of positioning. In the next guide we will look at a related issue, that of creating a Block Formatting Context, in Formatting Contexts Explained.

+ +

See Also

+ + diff --git a/files/zh-cn/web/css/css_fonts/index.html b/files/zh-cn/web/css/css_fonts/index.html new file mode 100644 index 0000000000..940c9fb0d0 --- /dev/null +++ b/files/zh-cn/web/css/css_fonts/index.html @@ -0,0 +1,140 @@ +--- +title: CSS Fonts +slug: Web/CSS/CSS_Fonts +translation_of: Web/CSS/CSS_Fonts +--- +
{{CSSRef}}
+ +

CSS Fonts 是一个CSS模块，它定义字体相关的属性和字体资源是如何加载的。它允许定义一个字体的样式，如字体样式、尺寸大小或字体宽度，以及要使用的字形的变体（加粗、斜体等），对于一个字符有几个字形的字体。

+ +

参考文献

+ +

属性

+ +
+
    +
  • {{cssxref("font")}}
    • +
  • {{cssxref("font-family")}}
    • +
  • {{cssxref("font-feature-settings")}}
    • +
  • {{cssxref("font-kerning")}}
    • +
  • {{cssxref("font-language-override")}}
    • +
  • {{cssxref("font-size")}}
    • +
  • {{cssxref("font-size-adjust")}}
    • +
  • {{cssxref("font-stretch")}}
    • +
  • {{cssxref("font-style")}}
    • +
  • {{cssxref("font-synthesis")}}
    • +
  • {{cssxref("font-variant")}}
    • +
  • {{cssxref("font-variant-alternates")}}
    • +
  • {{cssxref("font-variant-caps")}}
    • +
  • {{cssxref("font-variant-east-asian")}}
    • +
  • {{cssxref("font-variant-ligatures")}}
    • +
  • {{cssxref("font-variant-numeric")}}
    • +
  • {{cssxref("font-variant-position")}}
    • +
  • {{cssxref("font-weight")}}
    • +
  • {{cssxref("line-height")}}
    • +
+
+ +

使用规则

+ +
+
{{cssxref("@font-face")}}
+
+
+
    +
  • {{cssxref("@font-face/font-family", "font-family")}}
    • +
  • {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}
    • +
  • {{cssxref("@font-face/font-style", "font-style")}}
    • +
  • {{cssxref("@font-face/font-variant", "font-variant")}}
    • +
  • {{cssxref("@font-face/font-weight", "font-weight")}}
    • +
  • {{cssxref("@font-face/font-stretch", "font-stretch")}}
    • +
  • {{cssxref("@font-face/src", "src")}}
    • +
  • {{cssxref("@font-face/unicode-range", "unicode-range")}}
    • +
+
+
+
{{cssxref("@font-feature-values")}}
+
+ +

Guide

+ +

None.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts')}}{{Spec2('CSS3 Fonts')}} 
{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#font', '')}}{{Spec2('CSS1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.01.0 (1.0)3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/zh-cn/web/css/css_fonts/opentype_fonts_guide/index.html b/files/zh-cn/web/css/css_fonts/opentype_fonts_guide/index.html new file mode 100644 index 0000000000..ae65c0d099 --- /dev/null +++ b/files/zh-cn/web/css/css_fonts/opentype_fonts_guide/index.html @@ -0,0 +1,219 @@ +--- +title: OpenType 字体特性指南 +slug: Web/CSS/CSS_Fonts/OpenType_fonts_guide +translation_of: Web/CSS/CSS_Fonts/OpenType_fonts_guide +--- +
 
+ +
{{CSSRef}}
+ +

字体特性（font feature）或变体（variant）指的是在同一个 OpenType 字体中包含的不同的字形或字母风格。 它包括了连字（ligature，由字符组合而成的特殊字形，如“fi”或“ffl” ），字偶距（kerning，调整特定字母组合的间距），分数形式，数字风格，和一票其他内容。这些都被称为 OpenType 特性，而且可以通过特定属性和一种底层属性指定（见 {{cssxref("font-feature-settings")}}）来控制。本文将介绍在 CSS 中使用 OpenType 字体特性的全部内容。

+ +

某些字体中启用了这些特性的一或多个（通常是字偶距 [kerning] 和默认连字），而其他特性留给设计师或开发者选择性地在特定场景中启用。

+ +

除了连字或齐行数字（数字排列均匀，而“老式”数字的看起来像小写字母）等广泛应用的特性，还有非常特殊的一部分，如样式集（stylistic set，可能含有几种特定的字形变体 [variant]，它们可以一起使用），甚至是特定的东亚文字的字形变化。最后一种情况，使用变更的字形对于恰当的表达非常必要，所以这些属性比起大部分样式集更加重要，也超过其他大部分 OpenType 特性。

+ +
+

注意：CSS 定义了很多的属性用以改变字体特性，然鹅很多没有完全实现。这里给出了所有属性的定义，但是大部分都只能用底层属性 {{cssxref("font-feature-settings")}} 来控制。可以同时使用两种方式定义 CSS，但是可能太笨重了。而只使用 font-feature-settings 控制一切的问题是，每次你要变动一个特性，就必须处理整个字符串（类似于用 {{cssxref("font-variation-settings")}} 操纵变量字体）。

+
+ +

了解字体的可用特性

+ +

有时，最麻烦的问题在于你没有字体的说明文档（许多字体设计师和厂商会提供样张和 CSS 范例，以便用户了解字体特性）。不过，有一些网站可以方便地显示出字体特性。例如，访问 wakamaifondue.com，把你的字体文件拖到圈里（页面上有提示），过一会就可以得到该字体文件功能、特性的完整报告。Axis-praxis.org 也提供类似的功能，只需点击一下字体特性，就可以在相应的文本块中打开或关闭这些特性。

+ +

为什么使用字体特性？

+ +

花工夫来了解和使用这些字体特性有些麻烦，因而提出这样的问题也是很正常的。问题的答案是，特定的字体特性可以使网站更有用、更易读、更优美：

+ +
    +
  • 连字（比如“ff”或“fi”）可以使字母间距更均匀，阅读更流畅。
    • +
  • 分数形式，可以让家居装修、食谱网站变得更易阅读和理解。
    • +
  • 文本段落中的“老式”数字风格和小写字母搭配更合适；“表格数字”在表格里的费用清单里排列得更整齐；而“齐行”数字单独使用或与大写单词搭配使用显得更为统一。
    • +
+ +

虽说一个网站即使不用上述任何一个特性，也不会变得没用，但这里的每一种特性都可以令网站更便于使用，并因其对细节的关注而令人印象深刻。

+ +
+

OpenType 特性就像字体中的密室。打开它们，你将发现，你可以让字体或微妙或显著地展现出它的另一面。并非所有 OpenType 特性都可以不分场合地使用，但有些特性对于优秀的字体排印是至关重要的。——Tim Brown（Adobe 字体排印负责人）

+
+ +

有时它是实质，而不仅是样式

+ +

在有些情况下（比如 {{cssxref("font-variant-east-asian")}}），OpenType 特性直接关系到特定字符的不同形式，涉及意义和易读性的差别。此时，字体特性不再只是为了美观，而成为内容本身不可或缺的一部分。

+ +

字体特性

+ +

开发者需要考虑许多不同的字体特性。在这里，我们根据 W3C 规范的主要属性和选项将它们分门别类加以介绍。

+ +
+

提示：下列示例将展示各个属性及其组合，以及与之等价的底层语法。由于浏览器实现的差异，等价语法的效果可能不完全一致；但大多数情况下，两种示例是一模一样的。展示所用的字体有 Playfair Display，Source Serif Pro，IBM Plex Serif，Dancing Script，以及 Kokoro。以上字体均可获取并自由使用（大多可以从 Google Fonts 或其他字体服务中获取）。

+
+ +

字偶距（{{cssxref("font-kerning")}}）

+ +

字偶距（kerning）指的是特定字偶（字符组合）内部的间距。字偶距调整特性是默认打开的（OpenType 规范推荐）。应当注意的是，如果对文本同时设置了字偶距和词距（{{cssxref("letter-spacing")}}），词距调整会在字偶距调整之后进行。

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-kerning.html", '100%', 520)}}
+ +

Alternates ({{cssxref("font-variant-alternates")}})

+ +

Fonts can supply a number of different alternatives for various glyphs, such as different styles of lower case 'a' or more or less elaborate swashes in a script typeface. This property can activate an entire set of alternates or just a specific one, depending on the values supplied.The example below is showing several different aspects of working with alternate characters. Fonts with alternate glyphs can make them available across the board or individually in separate stylistic sets, or even individual characters. In this example you can see two different typefaces, and the introduction of the {{cssxref("@font-feature-values")}} at-rule. This is used to define shortcuts or named options that can be defined per font family. This way you can create a named option that applies to only a single font, or one that is shared and can be applied more generally

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}}
+ +

In this case, @stylistic(alternates) will show all the alternate characters for either font). Applying this to just the word 'My' alters the way the 'M' renders, and applying @styleset(alt-a) only changes the lower case 'a'.

+ +

Try changing the line

+ +
font-variant-alternates: styleset(alt-a);
+ +

to

+ +
font-variant-alternates: styleset(alt-g);
+
+ +

and notice that the lower case 'a' reverts to its regular form and the lower case 'g' changes instead.

+ +

More about alternates

+ + + +

连字（{{cssxref("font-variant-ligatures")}}）

+ +

为了让两个或以上的字符（在间距、审美方面）显得更匀称，可以把它们替换成另一种字形，即连字（ligature）。最常见的连字包括“fi，fl，ffl”之类的字母连字；此外，也有许多其他类型的连字。有些连字经常使用，称为常用连字（common ligatures）；也有一些连字更为特殊，比如“任意连字（discretionary ligatures）”、“历史连字（historical ligatures）”和“上下文连字（contextual alternates）”。尽管后几种在技术上不算是连字，但在“将特定字母组合一起出现时替换成另一种字形”这一点上，它们和连字是基本一致的。

+ +

尽管连字在文字中更为常用，以下示例也展示了如何用连字功能生成箭头：

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-ligatures.html", '100%', 540)}}
+ +

位置（{{cssxref("font-variant-position")}}）

+ +

位置变体用于调用排版中的上标和下标字形。设计这些上标、下标字形，是为了在不改变基线和行距的条件下，配合前后的文本使用。这是“位置”字体特性相比 {{htmlelement("sub")}} 或 {{htmlelement("sup")}} 元素的优势之一。

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-position.html", '100%', 550)}}
+ +

大写字母（{{cssxref("font-variant-caps")}}）

+ +

OpenType 特性最常用的情形之一，就是用来正确地呈现小型大写字母（small caps）。小型大写字母，是指尺寸经过调整，可以和小写字母更好搭配的大写字母，一般用于缩写词。

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-caps.html", '100%', 620)}}
+ +

数字（{{cssxref("font-variant-numeric")}}）

+ +

字体中通常包含几种不同风格的数字：

+ +
    +
  • “齐行（lining）”数字的高度一致，都排在相同的基线上。
    • +
  • “老式（oldstyle）”数字高度各异，像小写字母一样，在字形设计上有升部（ascender）和降部（descender）。设计老式数字是为了用在行内文本中，目的在于使数字在视觉上与前后的字形融为一体（作用类似于小型大写字母）。
    • +
+ +

数字风格也和字距有关。比例（proportional）字距是一般设定；而表格（tabular）字距可以让数字对齐排列，不受字宽差异的影响，用在需要对齐数字的财务表格中尤为合适。

+ +

本属性支持两种分数形式：

+ +
    +
  • 单层分数（以斜杠作为分数线）；
    • +
  • 双层分数（分子、分母分别在分数线上下）。
    • +
+ +

本属性也支持序数（比如“1st”“3rd”）特性；如果字体中有带斜杠的零的字形，本属性也可以调用。

+ +

齐行数字和老式数字

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric.html", '100%', 560)}}
+ +

分数、序数和带斜杠的零

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-frac.html", '100%', 600)}}
+ +

东亚文字（{{cssxref("font-variant-east-asian")}}）

+ +

本属性可以调用字体中的各种异体字形。下列示例展示了仅启用 OpenType“jis78”字符集的字符串。取消勾选，你会看到更多汉字显示了出来。

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant-east-asian.html", '100%', 750)}}
+ +
+

提示：这些字是从字体样品中复制出来的，并无含义。

+
+ +

字体变体简写（{{cssxref("font-variant")}}）

+ +

本属性定义了以上所有属性的简写语法。设定 normal 值可以将所有属性重置为初始值。设定 none 值会把 font-variant-ligatures 设定为 none ，并重置其他属性为初始值。（这里的意思是说，如果字偶距特性是默认打开的，即使 {{cssxref("font-variant")}} 设置为 none，字偶距特性依然是打开的。）

+ +
{{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}}
+ +

Font feature settings

+ +

{{cssxref("font-feature-settings")}} is the 'low level syntax' that allows explicit access to every named available OpenType feature. This gives a lot of control, but has some disadvantages in how it impacts inheritance and — as mentioned above — if you wish to change one setting, you have to redeclare the entire string (unless you're using CSS custom properties to set the values). Because of this, it's best to use the standard properties shown above wherever possible.

+ +

There a huge number of possible features. You can see examples of a number of them above, and there are several resources available for finding more of them.

+ +

The general syntax looks like this:

+ +
.small-caps {
+  font-feature-settings: "smcp", "c2sc";
+}
+
+ +

According to the specification you can either supply just the 4-character feature code or supply a 1 following the code (for enabling that feature) or a 0 (zero) to disable it. This is helpful if you have a feature like ligatures enabled by default but you would like to turn them off, like so:

+ +
.no-ligatures {
+  font-feature-settings: "liga" 0, "dlig" 0;
+}
+ +

More on font-feature-settings codes

+ + + +

Using CSS feature detection for implementation

+ +

Since not all properties are evenly implemented, it's good practice to set up your CSS using feature detection to utilize the correct properties, with {{cssxref("font-feature-settings")}} as the fallback.

+ +

For example, small caps can be set several ways, but if you want to ensure that no matter what the underlying capitalization is that you end up with everything in small caps, it requires 2 settings with font-feature-settings versus a single property value using {{cssxref("font-variant-caps")}}.

+ +
.small-caps {
+   font-feature-settings: "smcp", "c2sc";
+}
+
+@supports (font-variant-caps: all-small-caps) {
+   .small-caps {
+       font-feature-settings: normal;
+       font-variant-caps: all-small-caps;
+   }
+}
+
+ +

相关链接

+ +

CSS OpenType 特性演示

+ + + +

Web 字体分析工具

+ + + +

W3C 规范

+ + + +

其他资源

+ + diff --git a/files/zh-cn/web/css/css_fonts/variable_fonts_guide/index.html b/files/zh-cn/web/css/css_fonts/variable_fonts_guide/index.html new file mode 100644 index 0000000000..a79dba1cc3 --- /dev/null +++ b/files/zh-cn/web/css/css_fonts/variable_fonts_guide/index.html @@ -0,0 +1,221 @@ +--- +title: Variable fonts guide +slug: Web/CSS/CSS_Fonts/Variable_Fonts_Guide +tags: + - CSS + - web字体 + - 可变字体 + - 字体 + - 文本 +translation_of: Web/CSS/CSS_Fonts/Variable_Fonts_Guide +--- +

可变字体（Variable fonts）是OpenType字体规范上的演进，它允许将同一字体的多个变体统合进单独的字体文件中。从而无需再将不同字宽、字重或不同样式的字体分割成不同的字体文件。你只需通过CSS与一行{{cssxref("@font-face")}}引用，即可获取包含在这个单一文件中的各种字体变体。本文将介绍如何在Web中使用可变字体。

+ +
+

警告: 为了能够在您的操作系统上正确地使用可变字体，请确定您的操作系统已经升级到最新版本。例如各Linux发行版，应将Freetype升级到最新版本。10.13版本之前的macOS不支持可变字体。如果您的操作系统没有升级到最新版，您将无法在网页和Firefox Developer Tools中使用可变字体。

+
+ +

可变字体：何谓与何异

+ +

为了更好的理解可变字体有什么不同，我们有必要回顾一下什么是非可变字体，并对二者进行一番比较。

+ +

标准（静态）字体

+ +

过去，一个字体家族往往由大量独立字体文件组成，每个字体文件都代表某一特定的宽度/字重/样式的组合。因此你会看到有单独的字体文件叫做“Roboto Regular”、“Roboto Bold”，或是“Roboto Bold Italic”——这意味着你可能需要20或30个不同的字体文件才能算是有了一整个字体家族（对于有着不同宽度的大型字体来说，这个数量还要翻上几倍）。

+ +

在这样的情景下，为了在一个单纯显示进行正文展示的页面中使用一个字体，你至少需要四个字体文件：常规、斜体、加粗、斜体加粗。如果你想添加更多的字重，比如让题注更轻或让额外强调的地方更重，意味着你需要更多文件。这就导致了更多大量HTTP请求的产生，同时也需要下载更多的数据（通常每个文件至少有20k或更多）。

+ +

可变字体

+ +

通过使用可变字体，所有这些情况的排列组合都可以被装进一个文件中。这个文件可能比常规的单个字体文件大一些，但通常情况下，都不会大于，并且常常是小于你因为要展示正文所需要下载的四个文件的尺寸总和。使用可变字体的优势是你可以直接使用所有可用的字重、宽度和样式的字体，而不必像过去一样仅仅受限于使用其中单独的某一种。

+ +

这允许使用常见的排版技术，例如在不同的字重中设置不同大小的标题，以便在每种大小下都具有更好的可读性，或者在数据密集展示时使用稍窄一点的字体宽度。相比之下，在杂志的印刷系统中，在整个出版物中使用10-15种或更多不同的字重和宽度组合是很典型的——这比目前在web上的典型样式提供了更广泛的样式范围(或者仅从性能方面考虑确实很实用)。

+ +

关于字体系列，字重和变体的说明

+ +

您可能注意到，我们一直在讨论为每种权重和样式(即粗体，斜体以及斜体加粗)创建特定的字体文件，而不是依赖于浏览器来合成它们。这样做的原因，是大多数字体对于粗体和斜体都有非常特殊的设计，它们通常包含完全不同的字符(例如，小写字母的“a”和“g”在斜体中常常是完全不同的)。在使用非可变字体时，为了最准确地反映字体设计，避免浏览器之间的差异以及它们如何合成或不合成不同的样式，在需要的地方加载特定的字体文件会更为准确。

+ +

您可能还会发现一些可变字体分为两个文件：一个用于正体及其所有变体，另一个包含斜体变体。 有时这样做是为了在不需要或不使用斜体的情况下减小整体文件大小。 在所有情况下，仍然可以通过通用的  {{cssxref("font-family")}}  名称链接它们，以便您可以使用相同的font-family和相应的  {{cssxref("font-style")}} 来调用它们。

+ +

介绍“可变轴” (variation axis)

+ +

可变字体新格式的核心是可变轴的概念，其描述了字体设计中某一特性的允许变化范围。 例如‘字重轴’描述了字体的粗细；“宽度轴”描述了字体的宽窄；“斜体轴”描述是否使用斜体字形并且可相应地开关；等。请注意，轴既可以是范围选择又可以是开关选择。字重可能在1-999之间，而斜体可能只是简单的0或1（关闭或打开）。

+ +

如规范中所定义，存在两种变形轴，注册轴和自定义轴：

+ +
    +
  • +

    注册轴最为常见，常见到制定规范的作者认为有必要进行标准化。 目前注册的五个轴是字重，宽度，倾斜度，斜体和光学尺寸。 W3C已经将它们映射到现有的CSS属性，并在一个案例中引入了一个新的属性，您将在下面看到。

    +
    • +
  • +

    自定义轴实际上是无限的：字体设计师可以定义和界定他们喜欢的任何轴，并且只需要给它一个四个字母的标签以在字体文件格式本身中识别它。 您可以在CSS中使用这些四个字母的标签来指定沿该变化轴的点，您也将在下面的代码示例中看到。

    +
    • +
+ +

注册轴和现有的CSS属性

+ +

在本节中，我们将通过示例和相应的CSS来演示已定义的五个注册轴。 在可能的情况下，包括标准语法和低级语法。 较低级语法({{cssxref("font-variation-settings")}})是为了测试对可变字体支持的早期实现而实现的第一个机制，并且需要使用五个注册轴之外的新轴或自定义轴。 但是，W3C的意图是在其他属性可用时不使用此语法。 因此，应尽可能使用相应的属性，font-variation-settings的低级语法仅用于设置值不可用的值或轴。

+ +

注意

+ +
    +
  1. +

    当使用 font-variation-settings 时，请务必注意轴名称区分大小写。 注册轴名称必须为小写，自定义轴必须为大写。 例如：

    + + 
    font-variation-settings: 'wght' 375, 'GRAD' 88;
    + +

    wght (weight) 是一个注册轴， GRAD (grade) 是一个自定义轴。

    +
    2. +
  2. +

    如果您使用 font-variation-settings 设置了值并想要更改其中一个值，则必须重新声明所有值。 您可以通过对各个值使用CSS自定义属性（CSS变量）来解决此限制，并只需修改单个自定义属性的值。 该指南末尾有示例代码。

    +
    3. +
+ +

字重

+ +

字重（由 wght 标签表示）是定义了字形的笔画粗细范围（在印刷术语中称为轻重）的设计轴。 很长一段时间，CSS都能够通过 {{cssxref("font-weight")}}) 这个采用100到900之间的以100为增量的数字值以及类似于 normal 或 bold 等这样有相应数字值的别名（在这种情况下为400和700）的关键字的属性来实现。在处理非可变或可变字体时仍然会用到这些数值或关键字，但对于可变字体，1到1000之间的任何数字都是有效的。

+ +

应该注意的是，此时 @font-face 声明中没有办法将变量字体变形轴上的特定点“映射”到关键字 bold （或任何其他关键字）。 这通常可以很容易地解决，但在编写CSS时需要额外的步骤：

+ +
font-weight: 375;
+
+font-variation-settings: 'wght' 375;
+ +

可以通过编辑下面实例的CSS来使用字重值。

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}
+ +

字宽

+ +

字宽（由 wdth 标签表示）定义字形可以是多窄或多宽（印刷术语中称为压缩或扩展）的设计轴。 这通常在CSS中通过使用 {{cssxref("font-stretch")}}  属性设置，该属性值表示为高于或低于“正常”的百分比（100％），任何大于0的数字在技术上都是有效的 - 尽管它的范围更有可能是接近100％的，例如75％-125％。 如果提供的数字值超出了字体编码的范围，浏览器应该以允许的最接近值渲染字体。

+ +
+

注意: 在使用 font-variation-settings 时不需要使用%。

+
+ +
font-stretch: 115%;
+
+font-variation-settings: 'wdth' 115;
+ +

可以通过编辑下面实例的CSS来使用字宽值。

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/width.html", '100%', 520)}}
+ +

斜体

+ +

Italic（ital）轴的工作方式不同，因为它仅可以打开或关闭; 而没有中间值。 斜体设计通常包括与其正体截然不同的字形，因此在从正体到斜体的过渡中，通常会发生许多字形（或字符）替换。 Italic 和oblique 通常可以互换使用，但事实上实际上是完全不同的。 在这种情况下，Oblique 定义为术语 slant （参见下面的部分），并且字体通常具有一个或另一个斜体，但不是两者都有。

+ +

在CSS中，使用 {{cssxref("font-style")}} 属性对文本应用italic 和oblique 。

+ +
font-style: italic;
+
+font-variation-settings: 'ital' 1;
+ +

可以通过编辑下面实例的CSS来使用斜体值。

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/italic.html", '100%', 520)}}
+ +

倾斜

+ +

Slant（由 slnt 标签表示），或者它经常被称为“oblique” - 与真正的斜体不同之处在于它改变了字体的角度但不执行任何类型的字符替换。 它也是可变的，因为它表示为数值范围。 这允许字体沿该轴的任何位置变化。 允许的范围通常为0（直立）到20度 — 可以使用该范围内的任何数值，因此字体可以倾斜一点点。 但是，-90-90度的任何值都是有效的。

+ +
+

注意: 在使用 font-variation-settings 时不需要使用 deg  这个关键字。

+
+ +
font-style: oblique 14deg;
+
+font-variation-settings: 'slnt' 14;
+
+ +

可以通过编辑下面实例的CSS来使用slant/oblique值。

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}
+ +

视觉尺寸（Optical sizes）

+ +

这是数字字体和CSS的新功能，但其实对应于设计加工金属活字中的一项古老技艺。 视觉尺寸是指基于物理尺寸改变字形的整体笔画厚度的做法。 如果尺寸非常小（例如等于10或12px），则字符将具有整体较粗的笔画，可能还会进行其他小的修改，以确保以较小的物理尺寸复制和可读性。 相反，当使用更大尺寸（如48或60px）时，笔画的粗细重量可能会有更大的变化，外观会更接近原始设计意图。

+ +

虽然这样做最初是为了在油墨和纸张印刷过程中提供补偿（小尺寸铅字上非常细的线会很难印上，导致字形外观残损），但现在它很好地转化为在数字显示中对屏幕质量和物理尺寸渲染的补偿。

+ +

光学尺寸值通常旨在根据 font-size自动应用，但也可以使用较低级别的 font-variation-settings 语法进行操作。

+ +

创建了一个在CSS中中支持可变字体的新属性 {{cssxref("font-optical-sizing")}} 。 使用 font-optical-sizing 时，唯一允许的值是 auto 或 none - 因此该属性仅允许打开或关闭光学尺寸。 但是，当使用 font-variation-settings: 'opsz' <num>时，您可以使用数值。 在大多数情况下，您可能希望将 font-size（正在渲染的类型的物理大小）与 opsz 值（使用 auto时应用光学尺寸的方式）进行匹配。 提供了特定值，以便在必要时（为了易认性，美观或其他原因 ）可以应用特定值来覆盖默认值。

+ +
font-optical-sizing: auto;
+
+font-variation-settings: 'opsz' 36;
+
+ +

可以通过编辑下面实例的CSS来使用视觉尺寸值。

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/optical-sizing.html", '100%', 1020)}}
+ +

自定义轴

+ +

自定义轴可以是字体设计师想象的任何设计变化轴。 可能有一些会变得相当普遍，甚至演变成注册轴。

+ +

Grade

+ +

由于在字体设计方面有着众所周知的历史，等级可能会成为更常见的自定义轴之一。设计不同等级的字体通常是根据预期的用途和印刷技术来进行的。 “等级”一词指的是字体设计的相对重量或密度，但与传统的“重量”不同之处在于文本占据的物理空间不会改变，因此改变文本等级并不会改变文本或其周围元素的整体布局。 这使得等级成为有用的变化轴，因为它可以变化或动画而不会引起文本本身的回流。

+ +
font-variation-settings: 'GRAD' 88;
+ +

可以通过编辑下面实例的CSS来使用字体等级值。

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/grade.html", '100%', 520)}}
+ +

使用可变字体: 改变 @font-face

+ +

加载可变字体的语法与其他web字体非常相似，但有一些显著的差异，这些差异是通过对现代浏览器中可用的传统{{cssxref("@font-face")}}语法的升级提供的。

+ +

基本语法是相同的，但是字体技术是不一样的，并且可变字体可以提供像对 font-weight 和 font-stretch 等描述符的允许范围，而不是根据加载的字体文件来命名。

+ +
@font-face {
+ font-family: 'MyVariableFontName';
+ src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations');
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+}
+
+ +
+

注意: 并非所有浏览器都实现了字体格式的完整语法，因此请仔细测试。 如果您将字体格式设置为仅文件格式，而不是格式变体（即 woff2 而不是 woff2-variations），那么支持可变字体的所有浏览器仍将渲染它们，但如果可能，最好使用正确的语法。

+
+ +
+

注意: 如果使用适当的属性（即 font-weight或 font-stretch），提供 font-weight， font-stretch和 font-style的值范围将使浏览器不会尝试渲染超出该范围的轴，但不会阻止您通过 font-variation-settings 使用无效值，因此请小心使用。

+
+ +

使用旧版本浏览器

+ +

可以使用CSS特性查询检查是否支持可变字体（请参阅 {{cssxref("@supports")}}），因此在生产中，可以在特性查询块内使用可变字体。

+ +
h1 {
+ font-family: some-non-variable-font-family;
+}
+
+@supports (font-variation-settings: 'wdth' 115) {
+ h1 {
+    font-family: some-variable-font-family;
+ }
+}
+ +

示例页面

+ +

以下示例页面展示了构造CSS的两种不同方法。 第一种方法尽可能使用标准属性。 第二个示例使用CSS自定义属性设置 font-variation-settings 字符串的值，并展示如何通过覆盖单个变量而不是重写整个字符串来更轻松地更新单个变量值。 请注意 h2上的悬停效果，它只会改变等级轴自定义属性值。

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/sample-page.html", '100%', 1220)}}
+ +

资源

+ + diff --git a/files/zh-cn/web/css/css_functions/index.html b/files/zh-cn/web/css/css_functions/index.html new file mode 100644 index 0000000000..f5f1b38000 --- /dev/null +++ b/files/zh-cn/web/css/css_functions/index.html @@ -0,0 +1,257 @@ +--- +title: CSS Functional Notation +slug: Web/CSS/CSS_Functions +tags: + - CSS Function + - CSS 函数 + - attr() + - calc() + - minmax() + - var() +translation_of: Web/CSS/CSS_Functions +--- +
{{CSSRef}}
+ +

CSS 功能符号是一种 CSS 值，可以表示更复杂的数据类型或调用特殊的数据处理或计算。

+ +

句法

+ +
selector {
+  property: functional-notation( [argument]? [, argument]! );
+}
+ +

The syntax starts with the name of the functional notation, followed by a left parenthesis (. Next up are the notation argument(s), and the function is finished off with a closing parenthesis ).

+ +

Functions can take multiple arguments, which are formatted similarly to CSS property values. Whitespace is allowed, but they are optional inside the parentheses. In some functional notations multiple arguments are separated by commas, while others use spaces.

+ +

索引

+ +

Functional notation defined by a set of CSS specifications includes the following:

+ +
A + +
    +
  • {{CSSxRef("abs", "abs()")}} (math) {{Experimental_Inline}}
    • +
  • {{CSSxRef("acos", "acos()")}} (math) {{Experimental_Inline}}
    • +
  • {{CSSxRef("font-variant-alternates/annotation()", "annotation()")}} (font)
    • +
  • {{CSSxRef("asin", "asin()")}} (math) {{Experimental_Inline}}
    • +
  • {{CSSxRef("atan", "atan()")}} (math) {{Experimental_Inline}}
    • +
  • {{CSSxRef("atan2", "atan2()")}} (math) {{Experimental_Inline}}
    • +
  • {{CSSxRef("attr")}}
    • +
+B + +
    +
  • {{CSSxRef("filter-function/blur", "blur()")}} (filter)
    • +
  • {{CSSxRef("filter-function/brightness", "brightness()")}} (filter)
    • +
+C + +
    +
  • {{CSSxRef("calc")}} (math)
    • +
  • {{CSSxRef("font-variant-alternates/character-variant()", "character-variant()")}} (font)
    • +
  • {{CSSxRef("circle", "circle()")}} (shape)
    • +
  • {{CSSxRef("clamp")}} (math)
    • +
  • {{CSSxRef("color()")}} (colors) {{Experimental_Inline}}
    • +
  • {{CSSxRef("conic-gradient")}}
    • +
  • {{CSSxRef("cos", "cos()")}} (math) {{Experimental_Inline}}
    • +
  • {{CSSxRef("counter")}}
    • +
  • {{CSSxRef("counters")}}
    • +
  • {{CSSxRef("filter-function/contrast", "contrast()")}} (filter)
    • +
  • {{CSSxRef("cross-fade")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("cubic-bezier", "cubic-bezier()")}}
    • +
+D + +
    +
  • {{CSSxRef("device-cmyk", "device-cmyk()")}} (colors) {{Experimental_Inline}}
    • +
  • {{CSSxRef("filter-function/drop-shadow", "drop-shadow()")}} (filter)
    • +
+E + +
    +
  • {{CSSxRef("element")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("env")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("ellipse", "ellipse()")}} (shape)
    • +
  • {{CSSxRef("exp", "exp()")}} (math) {{Experimental_Inline}}
    • +
+F + +
    +
  • {{CSSxRef("fit-content", "fit-content()")}}
    • +
  • {{CSSxRef("format", "format()")}}
    • +
+G + +
    +
  • {{CSSxRef("filter-function/grayscale", "grayscale()")}} (filter)
    • +
+H + +
    +
  • {{CSSxRef("hsl", "hsl()")}} (colors)
    • +
  • {{CSSxRef("hsla", "hsla()")}} (colors)
    • +
  • {{CSSxRef("filter-function/hue-rotate", "hue-rotate()")}} (filter)
    • +
  • {{CSSxRef("hwb", "hwb()")}} (colors) {{Experimental_Inline}}
    • +
  • {{CSSxRef("hypot", "hypot()")}} (math) {{Experimental_Inline}}
    • +
+I + +
    +
  • {{CSSxRef("imagefunction", "image()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("image-set")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset()")}} (shape)
    • +
  • {{CSSxRef("filter-function/invert", "invert()")}} (filter)
    • +
+L + +
    +
  • {{CSSxRef("lab", "lab()")}} (colors) {{Experimental_Inline}}
    • +
  • {{CSSxRef("lch", "lch()")}} (colors) {{Experimental_Inline}}
    • +
  • {{CSSxRef("leader", "leader()")}}
    • +
  • {{CSSxRef("linear-gradient")}}
    • +
  • {{CSSxRef("local", "local()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("log", "log()")}} (math) {{Experimental_Inline}}
    • +
+M + +
    +
  • {{CSSxRef("transform-function/matrix", "matrix()")}} (transform)
    • +
  • {{CSSxRef("transform-function/matrix3d", "matrix3d()")}} (transform)
    • +
  • {{CSSxRef("max")}} (math)
    • +
  • {{CSSxRef("min")}} (math)
    • +
  • {{CSSxRef("minmax")}} (math)
    • +
  • {{CSSxRef("mod", "mod()")}} (math) {{Experimental_Inline}}
    • +
+O + +
    +
  • {{CSSxRef("filter-function/opacity", "opacity()")}} (filter)
    • +
  • {{CSSxRef("font-variant-alternates/ornaments()", "ornaments()")}} (font)
    • +
+P + +
    +
  • {{CSSxRef("paint")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("path", "path()")}} (shape)
    • +
  • {{CSSxRef("transform-function/perspective", "perspective()")}} (transform)
    • +
  • {{CSSxRef("polygon", "polygon()")}} (shape)
    • +
  • {{CSSxRef("pow", "pow()")}} (math) {{Experimental_Inline}}
    • +
+R + +
    +
  • {{CSSxRef("radial-gradient")}}
    • +
  • {{CSSxRef("rem", "rem()")}} (math) {{Experimental_Inline}}
    • +
  • {{CSSxRef("repeat")}}
    • +
  • {{CSSxRef("repeating-linear-gradient")}}
    • +
  • {{CSSxRef("repeating-radial-gradient")}}
    • +
  • {{CSSxRef("repeating-conic-gradient")}}
    • +
  • rgb() (colors)
    • +
  • rgba() (colors)
    • +
  • {{CSSxRef("transform-function/rotate", "rotate()")}} (transform)
    • +
  • {{CSSxRef("transform-function/rotate3d", "rotate3d()")}} (transform)
    • +
  • {{CSSxRef("transform-function/rotateX", "rotateX()")}} (transform)
    • +
  • {{CSSxRef("transform-function/rotateY", "rotateY()")}} (transform)
    • +
  • {{CSSxRef("transform-function/rotateZ", "rotateZ()")}} (transform)
    • +
  • {{CSSxRef("round", "round()")}} (math) {{Experimental_Inline}}
    • +
+S + +
    +
  • {{CSSxRef("filter-function/saturate", "saturate()")}} (filter)
    • +
  • {{CSSxRef("transform-function/scale", "scale()")}} (transform)
    • +
  • {{CSSxRef("transform-function/scale3d", "scale3d()")}} (transform)
    • +
  • {{CSSxRef("transform-function/scaleX", "scaleX()")}} (transform)
    • +
  • {{CSSxRef("transform-function/scaleY", "scaleY()")}} (transform)
    • +
  • {{CSSxRef("transform-function/scaleZ", "scaleZ()")}} (transform)
    • +
  • {{CSSxRef("filter-function/sepia", "sepia()")}} (filter)
    • +
  • {{CSSxRef("sign", "sign()")}} (math) {{Experimental_Inline}}
    • +
  • {{CSSxRef("sin", "sin()")}} (math) {{Experimental_Inline}}
    • +
  • {{CSSxRef("transform-function/skew", "skew()")}} (transform)
    • +
  • {{CSSxRef("transform-function/skewX", "skewX()")}} (transform)
    • +
  • {{CSSxRef("transform-function/skewY", "skewY()")}} (transform)
    • +
  • {{CSSxRef("sqrt", "sqrt()")}} (math) {{Experimental_Inline}}
    • +
  • {{CSSxRef("steps", "steps()")}}
    • +
  • {{CSSxRef("font-variant-alternates/styleset()", "styleset()")}} (font)
    • +
  • {{CSSxRef("font-variant-alternates/stylistic()", "stylistic()")}} (font)
    • +
  • {{CSSxRef("font-variant-alternates/swash()", "swash()")}} (font)
    • +
  • {{CSSxRef("symbols", "symbols()")}}
    • +
+T + +
    +
  • {{CSSxRef("tan", "tan()")}} (math) {{Experimental_Inline}}
    • +
  • {{CSSxRef("target-counter", "target-counter()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("target-counters", "target-counters()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("target-text", "target-text()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("toggle", "toggle()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("transform-function/translate", "translate()")}} (transform)
    • +
  • {{CSSxRef("transform-function/translate3d", "translate3d()")}} (transform)
    • +
  • {{CSSxRef("transform-function/translateX", "translateX()")}} (transform)
    • +
  • {{CSSxRef("transform-function/translateY", "translateY()")}} (transform)
    • +
  • {{CSSxRef("transform-function/translateZ", "translateZ()")}} (transform)
    • +
+U + +
    +
  • {{CSSxRef("url()", "url()")}}
    • +
+V + +
    +
  • {{CSSxRef("var")}}
    • +
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Values")}}{{Spec2("CSS4 Values")}}Adds toggle(), attr(), calc(), min(), max(), clamp(), round(), mod(), rem(), mod(), sin(), cos(), tan(), asin(), acos(), atan(), atan2(), pow(), sqrt(), hypot(), log(), exp(), abs() and sign() functional notation.
{{SpecName("CSS3 Values")}}{{Spec2("CSS3 Values")}}Adds calc() functional notation.
{{SpecName("CSS4 Colors")}}{{Spec2("CSS4 Colors")}}Adds commaless syntaxes for the rgb(), rgba(), hsl(), and hsla() functional notation.
+ Allows alpha values in rgb() and hsl(), turning rgba() and hsla() into (deprecated) aliases for them.
+ Adds hwb(), device-cmyk(), and color() functions.
{{SpecName("CSS3 Colors")}}{{Spec2("CSS3 Colors")}}Adds rgba(), hsl(), hsla() functional notation.
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}}Adds element(), image(), image-set() and conic-gradient() functional notation.
+ +

也可以看看

+ + + +
+
+
diff --git a/files/zh-cn/web/css/css_generated_content/index.html b/files/zh-cn/web/css/css_generated_content/index.html new file mode 100644 index 0000000000..2c05f29990 --- /dev/null +++ b/files/zh-cn/web/css/css_generated_content/index.html @@ -0,0 +1,57 @@ +--- +title: CSS 生成内容 +slug: Web/CSS/CSS_Generated_Content +tags: + - CSS +translation_of: Web/CSS/CSS_Generated_Content +--- +
{{CSSRef}}
+ +

CSS Generated Content 是CSS其中一个模块，定义了如何给一个元素添加内容

+ +

参考

+ +

属性

+ +
+
    +
  • {{cssxref("content")}}
    • +
  • {{cssxref("quotes")}}
    • +
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName("CSS3 Content")}}{{Spec2("CSS3 Content")}} 
{{SpecName('CSS2.1')}}{{Spec2('CSS2.1')}}Initial definition
+ +

浏览器兼容性

+ +

content 属性

+ +

{{Compat("css.properties.content")}}

+ +

quotes 属性

+ +
+

{{Compat("css.properties.quotes")}}

+
diff --git a/files/zh-cn/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html new file mode 100644 index 0000000000..9386a5ef17 --- /dev/null +++ b/files/zh-cn/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -0,0 +1,614 @@ +--- +title: CSS 网格布局中的自动定位 +slug: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +tags: + - CSS + - CSS Grids + - Guide + - Layout +translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +--- +

为了精确地把项目摆放到网格中，CSS 网格布局规范还包含另外一组规则，用来约定当部分或全部子项目没有被明确指定位置时该如何处理。你会发现针对含有数个项目的网格，实际上最简单的方式就是使用自动定位。如果没有为项目指定位置信息，它们就会把自己摆放在网格中，每个单元格中放一个。

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('placement_1', '500', '230') }}

+
+ +

自动定位的默认规则

+ +

正如上例所示，所有子项目都会把自己摆放到网格中，每个单元格中放一个。默认的流向是按行排列项目，网格会首先尝试在第1行的每个单元格中摆放项目。如果已经通过 grid-template-rows 属性创建了其他行，网格就会继续把项目摆放到这些行中。如果在显式的网格中没有足够的行用来摆放所有的项目，隐式的新行就会被创建出来。

+ +

调整网格中隐式行的大小

+ +

在默认情况下，网格中被自动创建的隐式行的尺寸是自适应大小的，也就是说它们会包含所有属于它们的内容，而不会让内容溢出。

+ +

不过你可以通过 grid-auto-rows 属性来控制它们的大小。为了让所有的行都是 100 像素高，可以像下面这样做：

+ +
+ + +
<div class="wrapper">
+    <div>One</div>
+    <div>Two</div>
+    <div>Three</div>
+    <div>Four</div>
+    <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+}
+
+ +

{{ EmbedLiveSample('placement_2', '500', '330') }}

+
+ +

也可以为 {{cssxref("grid-auto-rows")}} 设置 {{cssxref("minmax","minmax()")}} 值，这会让创建出的行保持一个最小尺寸，而且能够自动加高以适应更多的内容。

+ +
+ + +
<div class="wrapper">
+     <div>One</div>
+     <div>Two</div>
+     <div>Three</div>
+     <div>Four
+     <br>This cell
+     <br>Has extra
+     <br>content.
+     <br>Max is auto
+     <br> so the row expands.
+     </div>
+     <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ +

{{ EmbedLiveSample('placement_3', '500', '330') }}

+
+ +

也可以向 grid-auto-rows 属性传入一个轨道列表，行的大小就会按轨道列表重复设置。在下例中，轨道列表声明了一个 100 像素的行和第二个 200 像素的行，当内容很多时网格就会自动创建足够多的隐式行来容纳内容。

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px 200px;
+}
+
+ +

{{ EmbedLiveSample('placement_4', '500', '330') }}

+
+ +

按列自动定位

+ +

网格也可以按列来自动定位项目，只要设置 {{cssxref("grid-auto-flow")}} 的属性值为 column 即可。此时网格将根据已定义的 {{cssxref("grid-template-rows")}} 按列摆放项目，当一列中的项目排满，就继续排到下一列中，或排到一个新创建的隐式列中。因为显式定义了行轨道，所以列轨道是自适应大小的，同样地，也可以像 {{cssxref("grid-auto-rows")}} 那样通过设置 {{cssxref("grid-auto-columns")}} 来控制隐式列的尺寸。

+ +

在下面的例子中，创建了一个行高为 200 像素的三个行轨道的网格，按列优先自动排列，先创建一个 300 像素宽的列，接着是一个 100 像素宽的列，直至创建出足够多的列来容纳全部项目。

+ +
+
.wrapper {
+    display: grid;
+    grid-template-rows: repeat(3, 200px);
+    grid-gap: 10px;
+    grid-auto-flow: column;
+    grid-auto-columns: 300px 100px;
+}
+
+ + + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+</div>
+
+ +

{{ EmbedLiveSample('placement_5', '500', '640') }}

+
+ +

被自动定位的项目的顺序

+ +

网格中包含的多个项目可以混合定位，一些项目依靠明确的位置，而另一些则依靠自动定位。混合定位的用途在于，如果你有一个文档，其中部分项目已经定位，其他项目只要按顺序排列就行了，而无需为所有项目都指定绝对的位置。规范中用了很长的章节来详细描述网格项目的定位算法，好在我们只需要记住几条简单的规则就够了。

+ +

为修改过顺序的文档排序

+ +

对没有指定网格位置的项目进行定位，在标准中被称为“为修改过顺序的文档排序”。这意味着如果完全使用 order 属性，项目的顺序将根据 order 属性重新排序，而不是它们在 DOM 中的顺序，要不然它们本来是按在 DOM 中出现的顺序排列的。

+ +

含有定位属性的项目

+ +

网格首先要做的是让每个项目都有一个位置。在下面的例子中，一共有 12 个网格项目，项目 2 和项目 5 已经通过使用基于线定位的方法确定了它们在网格中的位置。仔细观察网格空间中这两个已定位的项目和那些自动定位的项目。自动定位的项目将按在 DOM 中的顺序从已定位项目的前面开始摆放，虽然有两个项目已经事先定位好，但其他项目不是从已经定位的项目之后才开始摆放的。

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+   <div>Nine</div>
+   <div>Ten</div>
+   <div>Eleven</div>
+   <div>Twelve</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+
+ +

{{ EmbedLiveSample('placement_6', '500', '450') }}

+
+ +

对占据多条轨道的项目的处理规则

+ +

在使用定位属性时仍然可以利用自动定位功能。在下面的例子中，有几个项目被设置为在行和列上都占据两条轨道，这是通过把 {{cssxref("grid-column-end")}} 和 {{cssxref("grid-row-end")}} 属性都设置为 span 2 实现的，这么写的意思是项目的开始线由自动定位规则确定，但是结束线将跨越两条轨道。

+ +

请观察网格中是如何被留出缺口的，因为对于自动定位的项目，如果轨道的大小不适合放入一个项目，这个项目就会被移动到下一行，直至它找到了可以容纳它的空间。

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+   <div>Nine</div>
+   <div>Ten</div>
+   <div>Eleven</div>
+   <div>Twelve</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+
+ +

{{ EmbedLiveSample('placement_7', '500', '770') }}

+
+ +

填充缺口

+ +

至此，除了我们明确定位过的项目，其他项目一般都会被网格自动处理并且保持它们在 DOM 中的顺序，这正是一般情况下我们想要的结果。比如你设计了一个表单，当然不想让标签和别的表单元素因为要填充缺口而使表单变得前后错乱。不过有时候要布局的项目并没有逻辑顺序，所以我们希望能够创建一种没有缺口的布局。

+ +

实现这个效果的方法是在网格容器的 {{cssxref("grid-auto-flow")}} 属性值中加入 dense 关键字。这和此前把网格流向改为列优先时设置值为 column 的是同一个属性，所以在列优先流向时，要设置2个值 grid-auto-flow: column dense。

+ +

经过以上设置，网格就会回填缺口，以前网格会遗留下缺口，而现在它会为此前的缺口找到适合它的项目，然后把项目从 DOM 中拿出来再放到缺口中去。对于已经重新指定过顺序的网格，这样做不会改变项目之间原有的逻辑顺序，比如对于 Tab 键的顺序仍然与文档的顺序相同。在后面的文章中我们会讨论网格布局潜在的可用性问题，此外你应该意识到，使用这个功能会让 DOM 中看到的顺序与实际显示的顺序不一致，它们两者之间的联系会被打破。

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+   <div>Nine</div>
+   <div>Ten</div>
+   <div>Eleven</div>
+   <div>Twelve</div>
+</div>
+
+ +
.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+  grid-auto-flow: dense;
+}
+
+ +

{{ EmbedLiveSample('placement_8', '500', '730') }}

+
+ +

匿名网格项目

+ +

标准中还提到了匿名网格项目。当有一些字符串或文本被包含在网格容器中，但却没有被其他元素包装，它们就会被创建为匿名网格项目。下面的例子，假设容器的类 grid 设置了 display: grid 属性，那么网格中就有三个网格项目，第一个就是匿名项目，因为它没有用标签分隔，所以会被自动定位规则处理。另2个放在 div 中的项目，它们可以被自动定位，也可以通过网格的定位属性来定位。

+ +
<div class="grid">
+  I am a string and will become an anonymous item
+  <div>A grid item</div>
+  <div>A grid item</div>
+</div>
+
+ +

匿名项目被自动定位是因为没有办法选定它们。所以如果在网格中有一些因故未被包装的文本，要小心它们可能会出现在网格的不可预期的位置，因为它们的位置完全靠自动定位规则来确定。

+ +

自动定位实例

+ +

当要展示一组相互之间没有逻辑顺序的项目，比如一组照片或产品列表，自动定位就非常有用了，这时你可以使用密集填充模式来填满网格的缺口。在下面的图片墙例子中，有横幅图片和纵幅图片，我们为所有横幅图片设置了样式 landscape，让它占据两列，然后使用 grid-auto-flow: dense 去创建一个密集填充的网格。

+ +
+
.wrapper {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    grid-gap: 10px;
+    grid-auto-flow: dense;
+    list-style: none;
+    margin: 1em auto;
+    padding: 0;
+    max-width: 800px;
+}
+.wrapper li {
+    border: 1px solid #ccc;
+}
+.wrapper li.landscape {
+    grid-column-end: span 2;
+}
+.wrapper li img {
+   display: block;
+   object-fit: cover;
+   width: 100%;
+   height: 100%;
+}
+
+ +
<ul class="wrapper">
+   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+   <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+   <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+   <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+   <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+</ul>
+
+ +

{{ EmbedLiveSample('placement_9', '500', '1300') }}

+
+ +

自动定位还可以帮你布局有逻辑顺序的界面元素。下面的术语列表就是一个例子。对术语列表有一个广泛质疑，即它的结构是扁平的，没有把成组的 dt 和 dd 元素包装起来。在例子中，我们使用自动定位来定位项目，另外还通过样式类把 dt 摆放在第 1 列，把 dd 摆放在第 2 列，以便让术语显示在一边，术语的定义显示在另一边，而不用管它们各有多少个。

+ +
+ + +
<div class="wrapper">
+   <dl>
+       <dt>Mammals</dt>
+       <dd>Cat</dd>
+       <dd>Dog</dd>
+       <dd>Mouse</dd>
+       <dt>Fish</dt>
+       <dd>Guppy</dd>
+       <dt>Birds</dt>
+       <dd>Pied Wagtail</dd>
+       <dd>Owl</dd>
+   </dl>
+</div>
+
+ +
dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  max-width: 300px;
+  margin: 1em;
+  line-height: 1.4;
+}
+dt {
+  grid-column: 1;
+  font-weight: bold;
+}
+dd {
+   grid-column: 2;
+ }
+
+ +

{{ EmbedLiveSample('placement_10', '500', '230') }}

+
+ +

自动定位做不了什么？

+ +

前面已经讨论过，目前我们还不能选定网格中的任意单元格上的任意项目，在上一篇文章的最后一节讲到如何为多条线定义相同名字，但是当这两个功能在一起执行时就会带来问题。这个问题被称为“自动定位的项目违反了后续第 n 个同名行的规则”，网格的自动定位算法将会跳过一些不该跳过的行。这个问题在 CSSWG 的 GitHub 仓库中已经被提出了，欢迎你去添加自己的用例。

+ +

可能你在使用自动定位或网格布局的其他功能时也会遇到问题，如果遇到了，请把它们抛出来，或者作为用例追加到已有问题上，一方面便于解决，另一方面也会帮助规范在未来的新版本变得更好。

+ + diff --git a/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html new file mode 100644 index 0000000000..04b58fe3c8 --- /dev/null +++ b/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -0,0 +1,745 @@ +--- +title: 网格布局的基本概念 +slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +tags: + - CSS + - CSS 网格 + - 入门 + - 布局 +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +

CSS网格布局引入了二维网格布局系统，可用于布局页面主要的区域布局或小型组件。本文介绍了CSS网格布局 与 CSS网格布局规范 Level 1 中的新术语。这篇简介中所展示的每种特性，接下来将在本指南的其余部分中有更详细地介绍。

+ +

什么是网格？

+ +

网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。CSS网格布局具有以下特点：

+ +

固定的位置和弹性的轨道的大小

+ +

你可以使用固定的轨道尺寸创建网格，比如使用像素单位。你也可以使用比如百分比或者专门为此目的创建的新单位 fr来创建有弹性尺寸的网格。

+ +

元素位置

+ +

你可以使用行号、行名或者标定一个网格区域来精确定位元素。网格同时还使用一种算法来控制未给出明确网格位置的元素。

+ +

创建额外的轨道来包含元素

+ +

可以使用网格布局定义一个显式网格，但是根据规范它会处理你加在网格外面的内容，当必要时它会自动增加行和列，它会尽可能多的容纳所有的列。

+ +

对齐控制

+ +

网格包含对齐特点，以便我们可以控制一旦放置到网格区域中的物体对齐，以及整个网格如何对齐。

+ +

控制重叠内容

+ +

多个元素可以放置在网格单元格中，或者区域可以部分地彼此重叠。然后可以CSS中的z-index属性来控制重叠区域显示的优先级。

+ +

Grid是一个强大的规范，当与CSS的其他部分（如flexbox）结合使用时，可以帮助您创建以前不可能在CSS中构建的布局。这一切都是通过在网格容器上创建一个网格来开始的。

+ +

网格容器

+ +

我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格元素。

+ +

在这个例子中，这有一个类名为 wrapper 的div 元素作为容器 ，它内部有五个子元素。

+ +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +

我将 .wrapper 作为一个网格容器。

+ +
.wrapper {
+  display: grid;
+}
+
+ + + +

{{ EmbedLiveSample('网格容器', '200', '330') }}

+ +

所有直系子元素现在都是网格项了。在浏览器中，元素转为网格前看不出什么差异，因为网格给这些元素创建了一个单列网格。此刻，Firefox 开发人员版（Developer Edition）可能会助你一臂之力。网格检查器（Grid Inspector）为其开发工具的一部分。如果你在 Firefox 中查看此示例并检查网格，则会在值 grid 旁边看到一个小图标。单击此图标后，此元素上的网格会覆盖在浏览器窗口中。

+ +

Using the Grid Highlighter in DevTools to view a grid

+ +

当你学习并且使用CSS网格布局时，这个工具能让你更好地了解到你的网格在视觉上发生了哪些变化。

+ +

如果我们想让这个例子更加“网格化”，我们需要使用列轨道。

+ +

网格轨道

+ +

我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。这些属性定义了网格的轨道。一个网格轨道就是网格中任意两条线之间的空间。在下图中你可以看到一个高亮的轨道——网格的第一个行轨道。

+ +

+ +

我可以通过添加 grid-template-columns 属性将列轨道添加到之前的例子，然后定义列轨道的大小。

+ +

我现在创建了一个网格，包含了三个200像素宽的列轨道。子元素将在网格上每个网格单元中展开。

+ +
+
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+
+ +

 

+ + + +

 

+ +

{{EmbedLiveSample('grid_first', '610', '200')}}

+
+ +

fr 单位

+ +

轨道可以使用任何长度单位进行定义。 网格还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。新的fr单位代表网格容器中可用空间的一等份。下一个网格定义将创建三个相等宽度的轨道，这些轨道会随着可用空间增长和收缩。

+ +
+
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ +

 

+ + + +

 

+ +

{{ EmbedLiveSample('fr_unit_ls', '220', '180') }}

+
+ +

在下面的这个例子中，我们创建定义了一个2fr轨道和两个1fr轨道。可用空间被四等分。其中两份给了第一个轨道，剩下两个轨道各占一份。

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+ +

在最后这个例子中，我们混合了绝对尺寸的轨道与分数单位轨道。第一个轨道是500像素，这个固定宽度被从可用空间中取走。剩下的空间被分为三份，按比例分配给了两个弹性尺寸轨道。

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+
+ +

在轨道清单中使用repeat()

+ +

有着多轨道的大型网格可使用 repeat() 标记来重复部分或整个轨道列表。如下方的网格定义：

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ +

也可写成：

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

Repeat 语句可以用于重复轨道列表中的一部分。在下面的例子中我创建了一个网格：它起始轨道为20像素，接着重复了6个1fr的轨道，最后再添加了一个20像素的轨道。

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+
+ +

Repeat 语句可以传入一个轨道列表，因此你可以用它来创建一个多轨道模式的重复轨道列表。在下一个例子中，网格将有共计10个轨道，为1个1fr轨道后面跟着1个2fr轨道，该模式重复5次。

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+
+ +

隐式和显式网格

+ +

当我们创建上文中网格例子的时候，我们用 grid-template-columns 属性定义了自己的列轨道，但是却让网格按所需的内容创建行，这些行会被创建在隐式网格中。显式网格包含了你在 grid-template-columns 和 grid-template-rows 属性中定义的行和列。如果你在网格定义之外又放了一些东西，或者因为内容的数量而需要的更多网格轨道的时候，网格将会在隐式网格中创建行和列。按照默认，这些轨道将自动定义尺寸，所以会根据它里面的内容改变尺寸。

+ +

你也可以在隐式网格中用 grid-auto-rows 和 grid-auto-columns 属性来定义一个设置大小尺寸的轨道。

+ +

在下面的例子中我们用 grid-auto-rows 属性来确保在隐式网格中创建的轨道是200像素高。

+ +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+
+ + + +

{{ EmbedLiveSample('隐式和显式网格', '230', '420') }}

+ +

轨道大小和minmax()

+ +

在设置一个显式的网格或者定义自动创建的行和列的大小的时候，我们也许想给网格一个最小的尺寸，确保他们能扩大到容纳他里面添加的内容。举个例子，我想让我的行的高度永远不会缩小到100像素以下，但是如果我的内容延伸到300像素高了我想让我的行高也延伸到这个高度。

+ +

网格用minmax()函数来解决这个问题。在下一个例子中我用minmax()作为grid-auto-rows的值。自动创建的行高将会是最小100像素，最大为auto。用auto意味着行的尺寸将会根据内容的大小来自动变换：根据本行中最高的单元，把空间扩展到足够容纳该单元。

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ + + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two
+   <p>I have some more content in.</p>
+
+<p>This makes me taller than 100 pixels.</p>
+</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('轨道大小和minmax()', '230', '490') }}

+ +

网格线

+ +

应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素. 例如下面这个三列两行的网格中，就拥有四条纵向的网格线。

+ +

Diagram showing numbered grid lines.

+ +

网格线的编号顺序取决于文章的书写模式。在从左至右书写的语言中，编号为 1 的网格线位于最左边。在从右至左书写的语言中，编号为 1 的网格线位于最右边。 网格线也可以被命名，我们将在稍后的教程中看到如何完成这一操作。

+ +

跨轨道放置网格元素

+ +

我们会在以后的文章中完整的探讨如何根据 网格线 定位元素，接下来的例子展示了一个简单的方法。当放置元素时，我们使用 网格线 定位，而非 网格轨道。

+ +

接下来这个例子中，我使用了{{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} 和 {{cssxref("grid-row-end")}} 属性，把前两个元素放到了我们的三列网格中。从左至右，第一个元素从列线1开始，延伸至列线4，也就是我们这个例子中最右边的列线。并从行线1延伸到行线3，占据了两个行轨道。

+ +

第二个元素从列线1开始，延伸了一个轨道。因为这是默认行为，所以我不用指定结束线。并且它从行线3到行线5，跨越了两个行轨道。剩下的元素会自动放到网格剩余的空间中。

+ +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+   <div class="box5">Five</div>
+</div>
+
+ +
.wrapper {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: 100px;
+}
+.box1 {
+    grid-column-start: 1;
+    grid-column-end: 4;
+    grid-row-start: 1;
+    grid-row-end: 3;
+}
+.box2 {
+    grid-column-start: 1;
+    grid-row-start: 3;
+    grid-row-end: 5;
+}
+
+ + + +

{{ EmbedLiveSample('跨轨道放置网格元素', '220', '410') }}

+ +

别忘了你可用 Firefox 开发者工具（Firefox Developer Tools）中的网格检查器（ Grid Inspector ）查看这些元素是如何被摆放在网格中的。

+ +

网格单元

+ +

一个网格单元是在一个网格元素中最小的单位， 从概念上来讲其实它和表格的一个单元格很像。现在再看回我们前面的一个例子, 一旦一个网格元素被定义在一个父级元素当中，那么他的子级元素将会排列在每个事先定义好的网格单元中。在下面的图中，我会将第一个网格单元作高亮处理。

+ +

The first cell of the grid highlighted

+ +

网格区域

+ +

网格元素可以向行或着列的方向扩展一个或多个单元，并且会创建一个网格区域。网格区域的形状应该是一个矩形 - 也就是说你不可能创建出一个类似于“L”形的网格区域。下图高亮的网格区域扩展了2列以及2行。

+ +

A grid area

+ +

网格间距

+ +

在两个网格单元之间的 网格横向间距  或 网格纵向间距  可使用 {{cssxref("grid-column-gap")}} 和 {{cssxref("grid-row-gap")}} 属性来创建，或者直接使用两个合并的缩写形式 {{cssxref("grid-gap")}}。在下面的例子中，我会创建一个横向间距为10px、纵向间距为1em的网格元素。

+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-column-gap: 10px;
+   grid-row-gap: 1em;
+}
+
+ +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ + + +

{{ EmbedLiveSample('网格间距') }}

+ +

间距使用的空间会在 使用弹性长度fr的轨道的空间计算前就被留出来，间距的尺寸定义行为和普通轨道一致，但不同的是你不能向其中插入任何内容。从以基线定位的角度来说，间距就像一条很宽的基线。

+ +

嵌套网格

+ +

一个网格元素可以也成为一个网格容器。在接下来的例子中我事先有了一个3列的网格元素，并有两个跨轨道的网格。在这个例子中，第一个网格元素含有几个子级元素。当这些元素不是网格容器的直接子级元素时，它们不会参与到网格布局中，并显示为正常的文档流。

+ +
+
<div class="wrapper">
+    <div class="box box1">
+        <div class="nested">a</div>
+        <div class="nested">b</div>
+        <div class="nested">c</div>
+    </div>
+    <div class="box box2">Two</div>
+    <div class="box box3">Three</div>
+    <div class="box box4">Four</div>
+    <div class="box box5">Five</div>
+</div>
+
+ +

Nested grid in flow

+ +

如果把 box1 设置成 display: grid 你可以给它定义轨道然后它也会变成一个网格元素，它的子级元素也会排列在这个新网格元素中。

+ +
.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+}
+
+ + +
+ +

{{ EmbedLiveSample('嵌套网格', '600', '410') }}

+ +

在这个例子中，嵌套网格和他的父级并没有关系。就像你在例子中所看见的一样，它并没有从它的父级继承 {{cssxref("grid-gap")}} 属性，并且嵌套网格里面的网格线没有与父级的网格线对齐。

+ +

子网格

+ +

在Level 1网格规范中有一个叫做 子网格  的特性。它能让我们在父级网格元素的轨道定义中就能定义一个嵌套网格。

+ +
+

子网格还并未在任何浏览器中实现，并且随时有可能从规范中移除。

+
+ +

在当前的规范中，我们可以将上面的嵌套网格的例子进行修改，使用 display: subgrid 而不是 display: grid，然后移除轨道定义。嵌套网格将会使用父级网格元素中的轨道定义来排列它其中的网格元素。

+ +

需要指出的是嵌套网格有同时有两个单位 — 行和列。隐式子网格的概念是没有的，这意味着你需要确保父级网格元素为了容纳所有的子网格元素需要包含足够的行与列的轨道。

+ +
.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   display: subgrid;
+}
+
+ +

使用z-index控制层级

+ +

多个网格项目可以占用同一个网格单位。如果我们回到之前根据网格线编号放置网格项目的话，我们可以更改此项来使两个网格项目重叠。

+ +
+
<div class="wrapper">
+   <div class="box box1">One</div>
+   <div class="box box2">Two</div>
+   <div class="box box3">Three</div>
+   <div class="box box4">Four</div>
+   <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: 100px;
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+}
+.box2 {
+   grid-column-start: 1;
+   grid-row-start: 2;
+   grid-row-end: 4;
+}
+
+ + + +

{{ EmbedLiveSample('l_ex', '210', '410') }}

+
+ +

网格项目 box2 现在覆盖于 box1 之上，其覆盖顺序遵循文档流的原始顺序（后来居上）。

+ +

控制顺序

+ +

我们可以在网格项目发生重叠时使用 z-index 属性控制重叠的顺序 - 就像放置网格项目一样。如果我们给 box2 设定一个低于 box1 的 z-index 值的话，box2将会显示在 box1 的下方。

+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: 100px;
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   z-index: 2;
+}
+.box2 {
+   grid-column-start: 1;
+   grid-row-start: 2;
+   grid-row-end: 4;
+   z-index: 1;
+}
+
+ + + +

{{ EmbedLiveSample('控制顺序', '210', '410') }}

+ +

下一步

+ +

在本文章中我们快速对网格布局的概念有了个基本的了解。利用示例代码进行练习，然后接下来我们正式开始挖掘关于网格布局的各种细节。

+ + diff --git a/files/zh-cn/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html new file mode 100644 index 0000000000..0b5c506a1f --- /dev/null +++ b/files/zh-cn/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -0,0 +1,702 @@ +--- +title: 网格布局中的盒模型对齐 +slug: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +tags: + - CSS + - CSS Grid + - Guide + - Layout +translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +--- +

如果你熟悉 flex 布局方式，那么你应该已经学习过如何在 flex 容器中对 flex 项目恰当对齐的方法了。这些对齐属性最初出现在 flex 布局方式中，后来被移到了一个新的被称为“盒模型对齐 Level 3”的规范中，这个规范详细约定了在不同的布局方式下如何处理对齐问题。

+ +

每种布局方式对盒模型对齐规范的实现都有一些差异，因为实际情况是每种方式都有各自的特点以及历史包袱，不能期望在所有的实现方式中都有完全一致的对齐表现。盒模型对齐规范对每种布局方式下的实现都有详细描述，不过如果你在各种布局方式下尝试过后可能会感到失望，因为浏览器对它还没有足够支持，好在浏览器已经支持网格布局下的对齐和空间分配了。本文将演示它是如何工作的，你会发现很多属性和值与 flex 布局中的用法是类似的，由于网格布局是二维的，flex 布局是一维的，所以你也会发现它们有一些小区别。我们就从处理网格对齐时用到的两条轴线开始吧。

+ +

网格布局的两条轴线

+ +

网格布局方式下共有两条轴线用于对齐 —— 块方向的列轴和文字方向的行轴。块方向的轴是采用块布局时块的排列方向。假设页面中有两个段落，其中一个显示在另一个下面，所以这个方向的轴被称为块方向的轴。在 CSS 网格布局规范中，它被称为列轴，因为这条轴的方向和列轨道是一致的。

+ +

Image showing the location of the Block or Column axis.

+ +

行方向的轴与块方向的轴垂直，它的方向和普通文本的方向一致。在 CSS 网格规范中，它有时被称为行轴，因为这条轴的方向和行轨道是一致的。

+ +

Image demonstrating the Inline or Row axis location.

+ +

我们可以把网格区域中的内容，以及网格轨道整体与这两条轴线对齐。

+ +

对齐项目到块方向的列轴

+ +

属性 {{cssxref("align-self")}} 和 {{cssxref("align-items")}} 用于控制项目在块方向的轴上对齐，通过设置这两个属性，可以改变网格区域中的项目的对齐方式。

+ +

在下面的例子中，网格里包含四个网格区域，可以通过网格容器上的 {{cssxref("align-items")}} 属性，把项目的对齐方式设置为下列值之一：

+ +
    +
  • auto
    • +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+  align-items: start;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_1', '500', '450') }}

+
+ +

设置了 {{cssxref("align-items")}} 属性，就相当于为网格的所有子项目都设置了 {{cssxref("align-self")}} 属性，当然也可以为单独的某一个网格元素设置它的个性化的 align-self 属性。

+ +

下一个例子演示把 align-self 设置为不同的值的对齐效果。第一个区域的 align-self 采用默认值即 stretch，第二个项目的 align-self 的值为 start，第三个项目的值为 end，第四个项目的值为 center。

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  align-self: start;
+}
+.item3 {
+  grid-area: c;
+  align-self: end;
+}
+.item4 {
+  grid-area: d;
+  align-self: center;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_2', '500', '450') }}

+
+ +

具有固定宽高比的项目

+ +

规范中对 {{cssxref("align-self")}} 的默认行为是拉伸（stretch），例外的情况是若项目具有固定宽高比，行为就改为与轴起点对齐（start）。此项例外的原因在于，如果把一个有固定宽高比的项目拉伸，将导致它扭曲变形。

+ +

虽然规范中已经阐明如何处理，但部分浏览器目前还没有按规范正确地实现，在此特性尚未被完全支持时，为了确保网格中的项目比如图片不被拉伸，可以通过把 {{cssxref("align-self")}} 和 {{cssxref("justify-self")}} 都设置为 start 来模拟正确的实现效果。

+ +

对齐项目到文本方向的行轴

+ +

与 {{cssxref("align-items")}} 和 {{cssxref("align-self")}} 用于对齐项目到块方向的轴类似，{{cssxref("justify-items")}} 和 {{cssxref("justify-self")}} 用于对齐项目到文本方向的列轴，可选值也和 align-self 一样。

+ +
    +
  • auto
    • +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +

借用上面演示过的设置 {{cssxref("align-items")}} 的例子，下面把它改为设置 {{cssxref("justify-self")}} 属性。

+ +

默认的对齐方式仍然是 stretch，除非项目具有固定宽高比。也就是说在默认情况下，网格项目会覆盖网格区域，除非改变它们的对齐方式。下面的例子中，第一个项目演示了默认的对齐效果：

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  justify-self: start;
+}
+.item3 {
+  grid-area: c;
+  justify-self: end;
+}
+.item4 {
+  grid-area: d;
+  justify-self: center;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_3', '500', '450') }}

+
+ +

与 {{cssxref("align-self")}} 和 {{cssxref("align-items")}} 的关系类似，通过为网格容器设置 {{cssxref("justify-items")}} 属性，就相当于为所有的项目都设置了 {{cssxref("justify-self")}} 属性。

+ +

属性 {{cssxref("justify-self")}} 和 {{cssxref("justify-items")}} 在 flex 布局方式中未被实现，是因为 flex 布局本质上是一维的，在轴上会有多个项目，无法单独对齐其中某一个元素。要在 flex 布局中实现沿主轴即文本方向上对齐项目，可以使用 {{cssxref("justify-content")}} 属性。

+ +

使项目居于区域正中

+ +

通过组合使用 align 和 justify 属性，让项目居于网格区域的正中就变得非常容易了。

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 200px;
+  grid-template-areas:
+    ". a a ."
+    ". a a .";
+}
+.item1 {
+  grid-area: a;
+  align-self: center;
+  justify-self: center;
+}
+
+ +
<div class="wrapper">
+ <div class="item1">Item 1</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_4', '500', '480') }}

+
+ +

对齐项目轨道到块方向的列轴

+ +

设想这样一种场景，网格轨道整体占据的空间小于网格容器，那么就可以在容器中对齐网格轨道。针对块方向和文本方向的轴线，分别使用 {{cssxref("align-content")}} 对齐到块方向的轴线，使用 {{cssxref("justify-content")}} 对齐到文本方向的轴线。属性 {{cssxref("align-content")}} 和 {{cssxref("justify-content")}} 的可选值都是：

+ +
    +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • space-around
    • +
  • space-between
    • +
  • space-evenly
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +

下面的例子中，网格容器的宽高都是 500 像素，分别定义了行轨道和列轨道各 3 条，轨道尺寸为 100 像素，轨道间隙为 10 像素。可知，网格容器的块方向和文字方向都留有多余的空间。

+ +

属性 align-content 要设置在网格容器上，但它的效果却体现在内部的网格中。网格布局中默认的行为是对齐到起点（start），所以我们看到网格轨道整体居于网格的左上角，紧挨着起始的网格线：

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_5', '500', '520') }}

+
+ +

如果把容器中 align-content 的值改为 end，那么网格轨道整体都会移到贴近块方向轴线的最后一条线：

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: end;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_6', '500', '520') }}

+
+ +

也可以为这个属性设置与 flex 布局方式类似的用于分配空间的值：space-between，space-around 和 space-evenly。比如把 {{cssxref("align-content")}} 的值改为 space-between，观察网格元素在空间中是如何摆放的：

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_7', '500', '520') }}

+
+ +

有必要强调一下，这些与分配空间有关的值会使网格项目变大。如果项目跨越了多于一条轨道，因为轨道的间隙变大了，所以项目也变得更大了。因为精确尺寸的网格较为常用，所以如果你决定使用这些值，一定要确保其中的内容能够适应多出来的空间，或者在使用这些属性值时，把项目的对齐方式设置为对齐到起点（start），可能会比设置为拉伸（stretch）要好。

+ +

下图中的网格使用了 align-content 属性，左侧的值为 start，右侧的值为 space-between。观察 Item 1 和 Item 2，它们都跨越了两条行轨道，右侧的图因为增加了轨道间隙，所以它们占据的空间变大了：

+ +

Demonstrating how items become larger if we use space-between.

+ +

对齐项目轨道到文本方向的行轴

+ +

在行轴上使用 {{cssxref("justify-content")}} 属性可以获得与在列轴上使用 {{cssxref("align-content")}} 相同的对齐效果。

+ +

继续利用上面的例子，设置 {{cssxref("justify-content")}} 的值为 space-around，那些占据超过一列的项目将因此获得额外的空间：

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+  justify-content: space-around;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_8', '500', '500') }}

+
+ +

对齐和自动外边距

+ +

另一个在网格区域内使项目对齐的方法是使用自动外边距。如果你曾经用过把容器的左右外边距都设置为 auto 以让页面布局显示在视口中间的方法的话，你肯定知道自动外边距能够消化掉全部的多余空间。当把两侧的外边距都设置为 auto 时，块元素就会被挤到中间，多余的空间则被留到两侧。

+ +

在下面的例子中，项目 item 1 的左外边距被设置成 auto，可以看到内容被推到了区域右侧，因为在为项目的内容分配了空间之后，自动外边距占据了剩余的空间：

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+  margin-left: auto;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_9', '500', '500') }}

+
+ +

在 Firefox Grid Highlighter 中可以清晰地看到项目是如何被对齐的：

+ +

Image showing auto-margins using the Grid Highlighter.

+ +

对齐和书写模式

+ +

上面所有的例子都是工作在英语这样一种从左到右的语言环境下，这意味着当从物理方向观察时，网格的起始线是在从左上开始的。

+ +

CSS 网格布局和盒模型对齐规范是为了解决 CSS 中的书写模式而设计的，这意味着，如果你用一种从右到左的语言工作，比如阿拉伯语，那网格的起始线就应该是从右上开始，此时 justify-content: start 也将使网格轨道从网格的右侧开始。为 margin-right 和 margin-left 设置自动外边距，或者使用绝对位置如 top，right，bottom 和 left 来设置偏移量对书写模式来说并不是一种友好的表达方式。在下一篇文章中，我们会深入讨论 CSS 网格布局、盒模型对齐和书写模式之间的关系，理解这些原理，对于开发用多种语言显示的网站，或者设计混合了多种语言和书写模式的页面将大有益处。

+ + diff --git a/files/zh-cn/web/css/css_grid_layout/css_grid,_logical_values_and_writing_modes/index.html b/files/zh-cn/web/css/css_grid_layout/css_grid,_logical_values_and_writing_modes/index.html new file mode 100644 index 0000000000..936634c06c --- /dev/null +++ b/files/zh-cn/web/css/css_grid_layout/css_grid,_logical_values_and_writing_modes/index.html @@ -0,0 +1,502 @@ +--- +title: CSS 网格，逻辑值和书写模式 +slug: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes' +tags: + - CSS + - CSS 指南 + - 指南 +translation_of: 'Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes' +--- +

在前面的文章中，我们已经接触了网格布局的一个重要特性：被纳入规范的对不同书写模式的支持。本文我们将探讨在网格和其他现代布局方式下的这个特性的表现，以及学习一些关于书写模式和逻辑属性与物理属性的知识。

+ +

逻辑属性与物理属性及逻辑值与物理值

+ +

CSS 中布满了物理位置的关键字 —— left 和 right，top 和 bottom。当使用绝对位置来定位项目时，就要使项目围绕上用物理关键字描述的偏移量。在下面的代码片断中，项目被定位到距容器顶部 20 像素，并且距容器左侧 30 像素：

+ +
.container {
+  position: relative;
+}
+.item {
+  position: absolute;
+  top: 20px;
+  left: 30px;
+}
+
+ +
<div class="container">
+  <div class="item">Item</div>
+</div>
+
+ +

另一个用到物理关键字的地方是使用 text-align: right 把文本对齐到右侧，这也是 CSS 中的物理属性。当我们为项目增加外边距、内边距和边框时会使用像 {{cssxref("margin-left")}}，{{cssxref("padding-left")}} 这样的物理属性。

+ +

把这些关键字称为物理属性，是因为它们与你看到的屏幕紧密相关，左永远是左，不管文本流动的方向如何。

+ +

在开发有多种语言的网站时，如果其中包含了从右侧而不是从左侧开始书写的文字，物理属性就会成为一个问题。浏览器很擅长处理文本方向，不需要真的在一种 {{glossary("rtl")}} （从右到左）的语言下开发，我们也可以一窥究竟。下面的例子里有两个段落，一个段落没有设置 {{cssxref("text-align")}} 属性，另一个段落的 text-align 设置为 left。在 html 元素上添加 dir="rtl" 声明，就会把书写模式从默认的 ltr （从左到右）的英语切换为 rtl （从右到左）的语言。我们可以看到，第一段仍然是从左到右显示，因为 text-align 的值为 left，但第二段把文字的流动方向切换成了从右到左。

+ +

A simple example of text direction.

+ +

这只是在使用物理属性和值时引起问题的一个非常简单的例子，它们阻止浏览器切换书写模式，因为这些物理属性和值已经假设文字的流动方向一定是从左到右、从上到下的。

+ +

逻辑属性和值

+ +

逻辑属性和值不会预设文字方向，这也是为什么在网格布局中要实现对齐到容器的开始位置时使用 start 关键字的原因。对我来说，因为我使用英语工作，所以 start 就是左侧，不过它并不总是代表左侧，并不能根据 start 这个词推断出物理位置。

+ +

块和行内

+ +

如果我们用逻辑属性而不是物理属性来思考，就不能使用从左到右、从上到下的方式观察世界，我们需要一个新的参考点，也就是在此前的文章中讨论对齐时接触过的块轴与行内轴。理解它们是非常重要的，如果开始用块轴与行内轴的方式来看待布局，在网格布局中使用到的术语就变得非常有意义了。

+ +

An image showing the default direction of the Block and Inline Axes.

+ +

CSS 书写模式

+ +

现在我要介绍另一个规范：CSS 书写模式规范，并在下面的例子中给出演示。这个规范详细描述了如何在 CSS 中使用多种不同的书写模式，不仅是支持与英语不同书写模式的语言，而且提供了更富创造性的用途。我将通过使用 {{cssxref("writing-mode")}} 属性来改变网格的书写模式，演示逻辑值是如何工作的。如果你想更深入地探讨书写模式，我推荐你阅读 Jen Simmons 的优秀文章：CSS Writing Modes，这篇文章对标准的讨论比本文要深入得多。

+ +

writing-mode

+ +

书写模式不仅可以使文字从左到右或从右到左显示，writing-mode 属性还可以设置其他的文字流动方向。{{cssxref("writing-mode")}} 属性有以下可选值：

+ +
    +
  • horizontal-tb
    • +
  • vertical-rl
    • +
  • vertical-lr
    • +
  • sideways-rl
    • +
  • sideways-lr
    • +
+ +

属性值 horizontal-tb 是 web 上显示文本的默认效果，也就是你现在正在阅读的这篇文章的方向，其他的属性值将会改变文字的流动方向，能匹配世界各地不同的书写模式，这些细节你都可以在 Jen 的文章中看到。下面用两个段落展示一个简单的例子，第一个段落使用默认的 horizontal-tb，第二个段落使用 vertical-rl，这种模式下文本仍然从左到右排列，不过文本的方向却是垂直的 —— 现在行内文本是从页面的顶部到底部向下流动的。

+ +
+ + +
<div class="wrapper">
+   <p style="writing-mode: horizontal-tb">I have writing mode set to the default <code>horizontal-tb</code></p>
+  <p style="writing-mode: vertical-rl">I have writing mode set to <code>vertical-rl</code></p>
+</div>
+
+ +

{{ EmbedLiveSample('writing_1', '500', '420') }}

+
+ +

网格布局中的书写模式

+ +

现在让我们来做一个网格布局的实验，就可以看到书写模式是如何改变你对块轴和行内轴的看法的。

+ +

下面例子是一个二行三列的网格，也就是说有三个沿着块轴方向的轨道。在默认的书写模式下，网格自动定位项目的流向，是从左上开始，向右延伸，填满行内轴方向的三个格子，然后转到下一行，创建一个新的行轨道，继续定位更多的项目：

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+  <div class="item5">Item 5</div>
+</div>
+
+ +

{{ EmbedLiveSample('writing_2', '500', '330') }}

+
+ +

如果给网格容器加上 writing-mode: vertical-lr 属性，就可以看到块轴和行内轴都转到不同的方向了，块轴从左到右地穿过页面，行内轴则从上到下到流动。

+ +
+ + +
.wrapper {
+  writing-mode: vertical-lr;
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+  <div class="item5">Item 5</div>
+</div>
+
+ +

{{ EmbedLiveSample('writing_3', '500', '330') }}

+
+ +

A image showing the direction of Block and Inline when writing-mode is vertical-lr

+ +

用于对齐的逻辑值

+ +

因为块轴和行内轴可以改变方向，所以在对齐属性中使用的逻辑值就具有更丰富的含义。

+ +

在下面的例子中，网格被设置了 writing-mode: vertical-lr 属性，我们将使用对齐属性来对齐项目。start 和 end 属性值仍然像在默认的书写模式下那样保留着它们的逻辑，但却已经不是 left 和 right，top 和 bottom 所能够表示的了。只要我们把网格翻转到一边，就会发生这种情况：

+ +
+ + +
.wrapper {
+  writing-mode: vertical-lr;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 100px);
+  grid-gap: 10px;
+}
+
+.item1 {
+    grid-column: 1 / 4;
+    align-self: start;
+}
+
+.item2 {
+    grid-column: 1 / 3;
+    grid-row: 2 / 4;
+    align-self: start;
+}
+
+.item3 {
+    grid-column: 3;
+    grid-row: 2 / 4;
+    align-self: end;
+    justify-self: end;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+</div>
+
+ +

{{ EmbedLiveSample('writing_4', '500', '330') }}

+
+ +

如果你要看看在先上到下再从右到左的书写模式，把 vertical-lr 换成 vertical-rl，就能得到一个从右到左的垂直书写模式。

+ +

自动定位和书写模式

+ +

如上例所示，我们已经看到当书写模式改变了方向时网格是如何定位项目的，项目将被沿着行内轴排列直到下一行，只是行内轴不再总是沿着从左到右的方向罢了。

+ +

基于网格线的定位和书写模式

+ +

要切记，当用网格线序号来定位项目时，不管在哪种书写模式下，第 1 行永远代表开始的那条网格线，第 -1 行永远代表结束的那条网格线。

+ +

在下面的例子中，网格的默认方向是 ltr（从左到右），用基于网格线定位方式定位了三个项目。

+ +
    +
  • Item 1 从列的第 1 条线开始，跨越1个轨道。
    • +
  • Item 2 从列表的第 -1 条线开始，跨越到第 -3 条线。
    • +
  • Item 3 从列的第 1 条线开始，跨越到列的第 3 条线。
    • +
+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+.item1 {
+    grid-column: 1 ;
+}
+.item2 {
+    grid-column: -1 / -3;
+}
+.item3 {
+    grid-column: 1 / 3;
+    grid-row: 2;
+}
+
+ +
<div class="wrapper">
+        <div class="item1">Item 1</div>
+        <div class="item2">Item 2</div>
+        <div class="item3">Item 3</div>
+    </div>
+
+ +

{{ EmbedLiveSample('writing_5', '500', '330') }}

+
+ +

如果现在为网格容器增加一个 {{cssxref("direction")}} 属性，属性值为 rtl，那么 第 1 条线就变到了网格的右侧，而第 -1 条线则变到左侧。

+ +
+ + +
.wrapper {
+  direction: rtl;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 100px);
+  grid-gap: 10px;
+}
+.item1 {
+    grid-column: 1 ;
+}
+.item2 {
+    grid-column: -1 / -3;
+}
+.item3 {
+    grid-column: 1 / 3;
+    grid-row: 2;
+}
+
+ +
<div class="wrapper">
+        <div class="item1">Item 1</div>
+        <div class="item2">Item 2</div>
+        <div class="item3">Item 3</div>
+    </div>
+
+ +

{{ EmbedLiveSample('writing_6', '500', '330') }}

+
+ +

这表明，如果要切换页面整体或部分的文本方向，并且正在使用网格线，那么如果不想让布局受到影响，应该命名网格线。有些情况下，比如网格包含文本内容，切换后的结果可能正是你想要的，但对于其他情况却不一定。

+ +

grid-area 属性值的奇怪顺序

+ +

可以把定义网格区域的四条线合并为一个值传给 {{cssxref("grid-area")}} 属性，在第一次使用这个属性时，人们经常会惊讶它的写法没有遵从 margin 的按顺时针的简写顺序：top，right，bottom，left。

+ +

但是 grid-area 的简写顺序却是：

+ +
    +
  • grid-row-start
    • +
  • grid-column-start
    • +
  • grid-row-end
    • +
  • grid-column-end
    • +
+ +

对于英语书写模式来说，从左到右的顺序应该是：

+ +
    +
  • top
    • +
  • left
    • +
  • bottom
    • +
  • right
    • +
+ +

grid-area 的简写顺序是逆时针！与我们常用的 margin 和 padding 相反。你要意识到 grid-area 是从“块和行内”的角度看世界的，牢记应该先设置两条开始线，再设置两条结束线。这样的顺序才更符合逻辑！

+ +

书写模式与网格布局的结合

+ +

书写模式除了为特定语言处理提供便利，另外对于文档的显示效果，也可以提供 ltr （从左到右）模式之外的创新性。在下面的例子中，想在网格布局的一侧展示若干链接，就可以通过变更书写模式把这些链接按列轨道方向排列：

+ +
+
.wrapper {
+    display: grid;
+    grid-gap: 20px;
+    grid-template-columns: 1fr auto;
+    font: 1em Helvetica, Arial, sans-serif;
+}
+.wrapper nav {
+    writing-mode: vertical-lr;
+}
+.wrapper ul {
+    list-style: none;
+    margin: 0;
+    padding: 1em;
+    display: flex;
+    justify-content: space-between;
+}
+.wrapper a {
+    text-decoration: none;
+}
+
+ +
<div class="wrapper">
+        <div class="content">
+            <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
+
+<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p>
+        </div>
+        <nav>
+            <ul>
+                <li><a href="">Link 1</a></li>
+                <li><a href="">Link 2</a></li>
+                <li><a href="">Link 3</a></li>
+            </ul>
+        </nav>
+    </div>
+
+ +

{{ EmbedLiveSample('writing_7', '500', '330') }}

+
+ +

物理值和网格布局

+ +

在构建网站时经常会遇到物理属性，尽管网格定位和对齐属性及它们的值都遵从书写模式，还是有很多时候即使在网格中也不得不使用物理属性和值。在 网格布局中的盒模型对齐 一文中，演示了在网格区域中如何利用自动边距，而自动边距也是 flexbox 布局的一种技巧，尽管这样又把布局和物理空间纠结到了一起。

+ +

如果在网格区域中使用绝对定位，那么你就会使用物理偏移量调整网格区域中的项目的位置。关键是要掌握使用物理属性与逻辑属性的力度，举例来说，要衡量把 ltr 切换到 rtl 时你需要对 CSS 做多少修改。

+ +

逻辑属性无处不在！

+ +

新的布局方法赋予使用逻辑值定位项目的能力，不过如果和使用物理属性的 margin、padding 属性混用，切记这些物理属性并不会依据书写模式来改变它们的显示效果。

+ +

CSS 逻辑属性规范 的目标是改变现状，在未来的 CSS 中，{{cssxref("margin-left")}} 和 {{cssxref("margin-right")}} 将与逻辑属性相同。Firefox 已经实现了，所以你现在就可以在 Firefox 中试上一试。未来如果得到全面支持，那么通过网格学习到的“块和行内”的知识，你也能马上举一反三地用在其他地方了。

+ + diff --git a/files/zh-cn/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html b/files/zh-cn/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html new file mode 100644 index 0000000000..e67b69a9fa --- /dev/null +++ b/files/zh-cn/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html @@ -0,0 +1,452 @@ +--- +title: CSS 网格布局和渐进增强 +slug: Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement +translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement +--- +

+ +

+ +

2017年春天，我们第一次看到像 Grid 这样的核心规范几乎同时发布于像FireFox，Chrome，Opera，Safari 和 Edge 等各大浏览器中，可虽然常用浏览器的支持意味着我们中的大部分人将很快看到大多数用户拥有 Grid Layout 支持，但也有一些旧的或不支持的浏览器需要应对。 在本指南中，我们将介绍各种支持策略。

+ +

浏览器支持

+ +

除了在Internet Explorer中，CSS Grid Layout在Safari，Chrome，Opera，Firefox和Edge中都没有前缀。 对这些指南中详述的所有属性和值的支持可跨浏览器进行互操作。 这意味着如果您在Firefox中编写一些网格布局代码，它应该在Chrome中以相同的方式工作。 这不再是实验规范，您可以安全地在生产环境中使用它。.

+ +

IE和Edge

+ +

应当谨记CSS网格布局在IE上实现的最早版本是IE10。这个早期规范并没有包含最新规范的所有属性和可用值。即使是相同的属性和相同的值，在IE10中的实现和现行的规范也有很大差异。早期规范也是Edge15之前实现的网格布局的版本。

+ +

IE/Edge(≤15)版本的规范带有-ms前缀，IE/Edge(≤15)上实现的属性如下：

+ +
    +
  • {{cssxref("grid-template-columns")}} 变成 -ms-grid-columns
    • +
  • {{cssxref("grid-template-rows")}} 变成 -ms-grid-rows
    • +
  • {{cssxref("grid-row-start")}} 变成 -ms-grid-row
    • +
  • {{cssxref("grid-column-start")}} 变成 -ms-grid-column
    • +
  • {{cssxref("align-self")}} 变成 -ms-grid-row-align
    • +
  • {{cssxref("justify-self")}} 变成 -ms-grid-column-align
    • +
+ +

IE版本另有一些在新版规范中非必须的属性-ms-grid-column-span和-ms-grid-row-span。这个版本不包含自动定位能力和网格模板区域。从IE10到Edge15的版本，使用-ms属性可以实现一些简单的网格布局。由于这些属性包含厂商前缀，它们在任何支持最新规范使用无前缀属性的浏览器上将无法生效。

+ +

Autoprefixer对网格布局的支持

+ +

流行的Autoprefixer更新之后已经能够支持-ms-网格布局版本。网格前缀默认是禁用的，你可以通过grid: true选项启用它。

+ +
autoprefixer({ grid: 'autoplace' })
+ +

Grid网格前缀被默认禁用是因为存在一些属性不能添加前缀。

+ +

我的布局使用CSS网格布局安全吗？

+ +

无论使用任何前端技术， 是否使用CSS网格布局都取决于网站访问者通常使用的浏览器。如果他们更多地使用最新版本地Firefox，Chrome，Opera和Safari，那么在这些浏览器更新之后开始使用CSS网格就很有意义了。但是如果你的站点服务于一个更旧浏览器绑定的超市，那目前就没有必要。然而，我的建议是不要根据过去浏览器中新规范的推出方式来进行假设。CSS网格布局是不同的，这取决它已经处于开发阶段的时间，和不同浏览器厂商为了确保所发布的内容对所有人都能以相同方式工作所做的工作。

+ +

Starting to use Grid in production

+ +

It is worth noting that you do not have to use grid in an all or nothing way. You could start by simply enhancing elements in your design with grid, that could otherwise display using an older method. Overwriting of legacy methods with grid layout works surprisingly well, due to the way grid interacts with these other methods.

+ +

Floats

+ +

We have typically used floats to create multiple column layouts. If you have floated an item, which is also a grid item in a supporting browser, the float will no longer apply to the item. The fact is that a grid item takes precedence. In the example below, I have a simple media object. In a non-supporting browser, I use {{cssxref("float")}}, however I have also defined the container as a grid container, in order to use the alignment properties that are implemented in CSS Grids.

+ +

The {{cssxref("float")}} no longer applies, and I can use the CSS Box Alignment property {{cssxref("align-self")}} to align my content to the end of the container:

+ +
+
* {box-sizing: border-box;}
+img {
+    max-width: 100%;
+    display: block;
+}
+.media {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 400px;
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    grid-template-areas: "img content";
+    margin-bottom: 1em;
+}
+.media::after {
+    content: "";
+    display: block;
+    clear: both;
+}
+.media .image {
+    float: left;
+    width: 150px;
+    margin-right: 20px;
+}
+.media .text {
+    padding: 10px;
+    align-self: end;
+}
+
+ +
<div class="media">
+    <div class="image"><img src="http://placehold.it/150x150" alt="placeholder"></div>
+    <div class="text">This is a media object example. I am using floats for older browsers and grid for new ones.</div>
+</div>
+
+ +

{{ EmbedLiveSample('enhancement_1', '500', '180') }}

+
+ +

The image below shows the media object in a non-supporting browser on the left, and a supporting one on the right:

+ +

A simple example of overriding a floated layout using grid.

+ +

Using feature queries

+ +

The above example is very simple, and we can get away without needing to write code that would be a problem to browsers that do not support grid, and legacy code is not an issue to our grid supporting browsers. However, things are not always so simple.

+ +

In this next example, I have a set of floated cards. I have given the cards a {{cssxref("width")}}, in order to {{cssxref("float")}} them. To create gaps between the cards, I use a {{cssxref("margin")}} on the items, and then a negative margin on the container:

+ +
+ + +
.wrapper ul {
+    overflow: hidden;
+    margin: 0 -10px;
+    padding: 0;
+    list-style: none;
+}
+.wrapper li {
+    float: left;
+    width: calc(33.333333% - 20px);
+    margin: 0 10px 20px 10px;
+}
+
+ +
<div class="wrapper">
+    <ul>
+        <li class="card"><h2>One</h2>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+        </li>
+        <li class="card"><h2>Two</h2>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+        </li>
+        <li class="card"><h2>Three</h2>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+        </li>
+        <li class="card"><h2>Four</h2>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+        </li>
+        <li class="card"><h2>Five</h2>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+        </li>
+        <li class="card"><h2>Six</h2>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+        </li>
+    </ul>
+</div>
+
+ +

{{ EmbedLiveSample('enhancement_2', '550', '400') }}

+
+ +

The example demonstrates the typical problem that we have with floated layouts: if additional content is added to any one card, the layout breaks.

+ +

A floated cards layout demonstrating the problem caused by uneven content height.

+ +

As a concession for older browsers, I have set a {{cssxref("min-height")}} on the items, and hope that my content editors won’t add too much content and make a mess of the layout!

+ +

I then enhance the layout using grid. I can turn my {{HTMLElement("ul")}} into a grid container with three column tracks. However, the width I have assigned to the list items themselves still applies, and it now makes those items a third of the width of the track:

+ +

After applying grid to our container, the width of the items is now incorrect as they display at one third of the item width.

+ +

If I reset the width to auto, then this will stop the float behavior happening for older browsers. I need to be able to define the width for older browsers, and remove the width for grid supporting browsers. Thanks to CSS Feature Queries I can do this, right in my CSS.

+ +

Feature queries will look very familiar if you have ever used a media query to create a responsive layout. Rather than checking a {{glossary("viewport")}} width, or some feature of the browser or device, we check for support of a CSS property and value pair using an {{cssxref("@supports")}} rule. Inside the feature query, we can then write any CSS we need to apply our modern layout, and remove anything required for the older layout.

+ +
@supports (display: grid) {
+    .wrapper {
+        /* do anything for grid supporting browsers here. */
+    }
+}
+
+ +

Feature queries have excellent browser support, and all of the browsers that support the updated grid specification support feature queries too. You can use them to deal with the issue we have with our enhanced: floated layout.

+ +

I use an @supports rule to check for support of display: grid. I then do my grid code on the {{HTMLElement("ul")}}, set my width and {{cssxref("min-height")}} on the {{HTMLElement("li")}} to auto. I also remove the margins and negative margins, and replace the spacing with the {{cssxref("grid-gap")}} property. This means I don’t get a final margin on the last row of boxes. The layout now works, even if there is more content in one of the cards, than the others:

+ +
+ + +
.wrapper ul {
+    overflow: hidden;
+    margin: 0 -10px;
+    padding: 0;
+    list-style: none;
+}
+.wrapper li {
+    float: left;
+    width: calc(33.333333% - 20px);
+    margin: 0 10px 20px 10px;
+}
+@supports (display: grid) {
+    .wrapper ul {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 20px;
+        margin: 0;
+    }
+    .wrapper li {
+        width: auto;
+        min-height: auto;
+        margin: 0;
+    }
+}
+
+ +
<div class="wrapper">
+    <ul>
+        <li class="card"><h2>One</h2>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+        </li>
+        <li class="card"><h2>Two</h2>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+        </li>
+        <li class="card"><h2>Three</h2>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+        </li>
+        <li class="card"><h2>Four</h2>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+        </li>
+        <li class="card"><h2>Five</h2>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+        </li>
+        <li class="card"><h2>Six</h2>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+        </li>
+    </ul>
+</div>
+
+ +

{{ EmbedLiveSample('enhancement_3', '550', '480') }}

+
+ +

Overwriting other values of display

+ +

Due to the problems of creating grids of items using floats, many of us would use a different method to the floated method shown above to layout a set of cards. Using display: inline-block is an alternate method.

+ +

Once again I can use feature queries to overwrite a layout that uses display: inline-block, and again I don’t need to overwrite everything. An item that is set to inline-block becomes a grid item, and so the behaviour of inline-block no longer applies. I have used the {{cssxref("vertical-align")}} property on my item when in the inline-block display mode, but this property does not apply to grid items and, therefore, is ignored once the item becomes a grid item:

+ +
+ + +
.wrapper ul {
+    margin: 0 -10px;
+    padding: 0;
+    list-style: none;
+}
+
+.wrapper li {
+    display: inline-block;
+    vertical-align: top;
+    width: calc(33.333333% - 20px);
+    margin: 0 10px 20px 10px;
+}
+@supports (display: grid) {
+    .wrapper ul {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 20px;
+        margin: 0;
+    }
+    .wrapper li {
+        width: auto;
+        margin: 0;
+    }
+}
+
+ +
<div class="wrapper">
+    <ul>
+        <li class="card">
+            <h2>One</h2>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+        </li>
+        <li class="card">
+            <h2>Two</h2>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+        </li>
+        <li class="card">
+            <h2>Three</h2>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+        </li>
+        <li class="card">
+            <h2>Four</h2>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+        </li>
+        <li class="card">
+            <h2>Five</h2>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+        </li>
+        <li class="card">
+            <h2>Six</h2>
+            <p>We can use CSS Grid to overwrite older methods.</p>
+        </li>
+    </ul>
+</div>
+
+ +

{{ EmbedLiveSample('enhancement_4', '500', '480') }}

+
+ +

Once again it is the width on the item we need to address, and then any other properties we want to enhance. In this example I have again used grid-gap, rather than margins and negative margins to create my gutters.

+ +

How does the specification define these overrides?

+ +

The CSS Grid Layout specification details why we can overwrite the behavior of certain properties when something becomes a grid item. The key sections of the specification are:

+ + + +

As this behavior is detailed in the specification, you are safe to rely on using these overrides in your support for older browsers. Nothing that I am describing here should be seen as a "hack", we are taking advantage of the fact that the grid specification details the interaction between different layout methods.

+ +

Other values of display

+ +

When an element has a parent set to display: grid it is blockified, as defined in the CSS display specification. In the case of our item set to inline-block, this is why display: inline-block no longer applied.

+ +

If you are using display: table for your legacy layout, an item set to display: table-cell generates anonymous boxes. Therefore, if you use display: table-cell without any parent element set to display-table, an anonymous table wrapper is created around any adjacent cells, just as if you had wrapped them in a div or other element set to display: table. If you have an item set to display: table-cell, and then in a feature query change the parent to display: grid, this anonymous box creation will not happen. This means you can overwrite display: table based layouts, without having additional anonymous boxes.

+ +

Floated elements

+ +

As we have already seen, {{cssxref("float")}} and also {{cssxref("clear")}} have no effect on a grid item. Therefore you do not need to explicitly set items to float: none.

+ +

Vertical alignment

+ +

The alignment property {{cssxref("vertical-align")}} has no effect on a grid item. In layouts using display: inline-block or display: table, you might use the vertical-align property to perform basic alignment. In your grid layout you then have the far more powerful box alignment properties.

+ +

Multiple-column layout

+ +

You can also use multiple column layout as your legacy browser plan, as the column-* properties do not apply when applied to a grid container.

+ +

Further reading

+ + + + diff --git a/files/zh-cn/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html b/files/zh-cn/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html new file mode 100644 index 0000000000..286a249901 --- /dev/null +++ b/files/zh-cn/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html @@ -0,0 +1,180 @@ +--- +title: CSS 网格布局和可访问性 +slug: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility +tags: + - CSS + - CSS 网格 + - 可访问性 + - 指南 +translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility +--- +

我们这些做 web 开发多年的人和比我们更早入行的人，可能都觉得 CSS 网格有一点像曾经用过的“表格布局”。在 web 设计的早期，构建页面布局的方式是使用 HTML 表格，通过把设计分割成表格的单元格来创建布局。这比后来的“CSS 定位”的优势在于，可以利用表格显示能力提供的对齐和全高度的列。最大的负面影响在于它将设计和 HTML 标记绑在一起，经常会造成可访问性的问题。为了将设计摆到表格中，内容被打散了，如果用屏幕阅读器去读它，读出来的内容就是毫无意义的。

+ +

在转向 CSS 布局时，我们经常说 CSS 把内容标记与内容表现分离了。最终的目标是，我们可以创建一个语义和结构良好的文档，然后应用 CSS 来创建我们想要的布局。CSS Zen Garden 等网站展示了这种能力，CSS Zen Garden 提供的挑战是，对于一个具有固定标记的 HTML 页面，却能用 CSS 来创建各种独特的设计。

+ +

CSS 网格布局没有表格布局的那种问题，网格结构是在 CSS 中而不是在 HTML 标记中定义的。如果我们需要添加一个元素，我们可以使用一些没有语义的标记。理论上，网格可以帮助我们延续 CSS 的承诺 —— 标记与表现分离，但是这个方案有可能会做得过火吗？是否会因为使用了网格而导致可访问性问题？

+ +

在 CSS 网格布局中重排内容

+ +

我们已经看到，网格使我们有能力以各种方式重新排列页面的内容。 通过 {{cssxref("order")}} 属性来改变项目自动定位，可以使用 grid-auto-flow: dense 使项目在视觉上脱离 DOM 顺序，还可以使用网格模板区域的基于线的定位来定位项目，这些方法都不用考虑标记位于 HTML 源代码中的位置。

+ +

CSS 网格布局规范包括一个涵盖重新排序和可访问性的部分。 该部分详细介绍了当使用网格布局对内容进行可视化重新排序时，规范期望浏览器执行的操作。

+ +
+

网格布局赋予了 web 开发者重新排列文档内容的强大能力，但是，这并不能取代 HTML 源代码中自身的排序。 order 属性和网格定位不影响非可视媒体（例如语音）的排序。 同样，可视化地重新排列网格项目不会影响顺序导航模式的默认遍历顺序（例如通过 TAB 键循环选取链接，参见 tabindex HTML5）。

+
+ +

虽然使用网格布局对内容进行了可视化重新排列，但是在通过屏幕阅读器或其他文本到语音的用户代理读取内容时，并不会改变项目的排列方式。另外，重新排序不会改变 tab 键顺序，这意味着使用键盘进行导航的用户，通过按 TAB 键来引导阅读顺序，但由于下一个项目是在源代码的下一行，而这个项目正好被重新排序过，那他就会从网站的顶部一下子跳转到网站的底部。

+ +

所以规范警告作者（CSSWG 称呼 web 开发者的术语）不要对内容重新排序。

+ +
+

作者必须仅把 order 和网格布局属性用于内容的视觉排序而非逻辑排序。使用这些功能执行逻辑重新排序的样式表是不符合标准的。

+
+ +

这在网格布局设计中意味着什么呢？

+ +

视觉的而非逻辑的排序

+ +

无论何时，当使用网格布局重新排序或使用 flex 布局重新排序时，只能执行视觉的重新排序。真实的源代码顺序是语音阅读器的顺序，以及文档的 Tab 键顺序。下面是一个非常简单的例子。

+ +

在这个例子中，用网格布局了一组包含链接的盒子，使用基于线的布局属性把 box1 放置在了网格的第 2 行。虽然 box1 看起来呈现为列表的第四个项目，但如果此时用 tab 链切换链接，仍然是从 box1 开始，因为它在源代码中排得最靠前。

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+ +
<div class="wrapper">
+  <div class="box box1"><a href="">One</a></div>
+  <div class="box box2"><a href="">Two</a></div>
+  <div class="box box3"><a href="">Three</a></div>
+  <div class="box box4"><a href="">Four</a></div>
+  <div class="box box5"><a href="">Five</a></div>
+</div>
+
+ +

{{ EmbedLiveSample('accessibility_1', '500', '330') }}

+
+ +

规范声称在这种情况下，如果 box1 在此位置确的有逻辑上的意义，那就应该返回去修改源代码，而不是使用网格布局来重新排序。此例就是视觉的排序与逻辑的排序的对比，逻辑排序对于文档的意义和结构非常重要，一定要确保文档中的逻辑顺序正确。

+ +

Firefox 中 flex 布局的排序 bug

+ +

Firefox 中一个久已存在的 bug 因此变得非常显眼。 虽然这个问题在 Firefox 的 CSS 网格布局实现中不存在，但它确实暴露了一个我们在使用网格时需要考虑的问题。

+ +

目前，在使用 flex 布局时，Firefox 将遵循视觉顺序而不是逻辑顺序浏览文档。有人认为，这实际上是一个更好的方法 —— 使 tab 键顺序遵循文档的视觉顺序。然而，事实证明，这是 Firefox 实现中的一个 bug。两种规范都声明逻辑顺序就是源文档的结构顺序，而 tab 键顺序和语音浏览器应遵循文档的逻辑顺序。

+ +

如何处理网格布局的可访问性？

+ +

从规范中我们知道需要确保文档内容的逻辑顺序。我们应该如何开发，才能对不同用户以及他们与页面的交互都保持良好的可访问性？

+ +
+
从结构化的、可访问的文档开始
+
网格布局意味着不需要改变文档源代码，就可以获得想要的布局。 因此，开发页面的起点应该是一个结构良好的，可访问的源文档。 正如 CSS 网格布局规范指出的，这通常也要求为最小的屏幕设备提供一个良好的文档结构。 如果用户在移动设备上滚动长文档，那么用户优先要看到的内容也应在文档中位于优先的位置。
+
创建响应式的、自适应的网格
+
有了一个结构稳固的文档，就可以创建布局了，很可能要使用媒体查询来创建额外的列，并对不同的屏幕尺寸和设备改变布局。 网格此时大有用武之地，例如，在移动设备上优先级不高的元素，在桌面设备上会被移到边栏中显示。此时的关键环节是要持续测试，一个非常简单的测试方法就是用 tab 键浏览文档。这个浏览顺序还有意义吗？检查是否有什么奇怪的从布局顶部跳到底部的情况，如果有的话，这就是一个信号，要赶快找找布局哪里出了问题。
+
回到源代码
+
如果在设计布局的过程中发现自己在使用网格重新定位元素的位置，就要考虑是否应该返回到文档并对逻辑顺序进行更改。使用CSS网格布局的一大好处是能够移动源文档中的项目以匹配逻辑顺序，而无需对布局进行大的更改。例如，对于基于 {{cssxref("float")}} 的布局，这是一个巨大的改进，其中文档的源代码非常重要，以便在不同的断点处获取布局。 然而，作为开发人员，我们需要记得回到源代码并更新它以维护逻辑顺序。
+
+ +

网格和标记变平的危险

+ +

CSS 网格布局中需要注意的另一个问题（在 CSS Flex 布局中程度较轻），是标记变平的诱惑。我们已经知道，一个项目要成为一个网格项目，它需是网格容器的直接子项目，因此，如果在网格容器中有一个 {{HTMLElement("ul")}} 元素，那么这个 ul 是一个网格项目，但子元素 {{HTMLElement("li")}} 并不是网格项目。

+ +

如果 {{cssxref("display")}} 属性的 subgrid 值得以实现，则可以通过将 ul 元素声明为 subgrid 来使网格项目的这些子元素参与到整个网格布局中。目前唯一的解决方法是使用 display：contents 使 ul 生成的方框从 DOM 中消失。有关此相互影响的更多信息，请参阅本指南的网格布局与其他布局方法的关系一文及文中的 display: contents 部分。

+ +

由于对可互相影响的 display: contents 的支持有限，而且 subgrid 还没得到支持，所以当开发一个使用 CSS 网格布局的网站时，为了简单地创建布局，不可避免地要受到标签扁平化和移除语义元素的诱惑。例如，某些内容在语义上被标记为列表，但是为了通过 display: grid 将这些元素设置为容器的直接子元素，可能会决定用一组 {{HTMLElement("div")}} 标签来替代。要抵抗这种诱惑，找到不删除标记的设计方法。从一个结构良好的文档开始，是避免这个问题是一个好办法，当不得已去修改文档时，你就会意识到，你将仅是为了让布局工作而要删除语义元素！

+ +

延伸阅读

+ +

目前关于可访问性和 CSS 网格布局的资料并不多。许多问题与 CSS Flex 布局遇到的问题类似，也提出了使用 {{cssxref("flex-direction")}} 和 {{cssxref("order")}} 属性重新排序内容的方法。

+ +

依据文档源代码顺序进行可视化显示的概念在 WCAG（无障碍网页内容指引）成熟标准技巧 - 技巧 C27 中有详细描述。

+ +

作为一种开始思考这些问题的方式，当使用 CSS 网格布局时，建议阅读 Leonie Watson 的 Flexbox & the Keyboard Navigation Disconnect。来自 ffconf 的 Leoie 的演示视频有助于了解屏幕阅读器如何使用 CSS 的视觉表示进行工作。Adrian Roselli 也发表了 tab order in various browsers —— 尽管这是在 Firefox 完全实现网格支持之前。

+ + diff --git a/files/zh-cn/web/css/css_grid_layout/grid_template_areas/index.html b/files/zh-cn/web/css/css_grid_layout/grid_template_areas/index.html new file mode 100644 index 0000000000..bdbddab744 --- /dev/null +++ b/files/zh-cn/web/css/css_grid_layout/grid_template_areas/index.html @@ -0,0 +1,541 @@ +--- +title: 网格模板区域 +slug: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas +tags: + - CSS + - Grid 布局 + - Grids + - 参考 + - 布局 +translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas +--- +

在上一篇指南中我们着眼于网格线以及如何依赖网格线定位项目。在使用 CSS 网格布局时，因为离不开网格线，所以最直接的方式就是使用网格线来定位项目。不过，还有另一种替代方法用于定位项目，你可以独立使用它，也可把它和基于网格线的定位结合起来。这个方法采用对模板区域命名的方式来定位项目，接下来我们就来弄清如何使用它。很快你就会知道为什么我们有时把这种方法称为网格布局的 ASCII 艺术方法！

+ +

命名网格区域

+ +

我们已经接触过 {{cssxref("grid-area")}} 属性了，它把网格线的4个属性值合为1个值，用于定位一个网格区域。

+ +
.box1 {
+   grid-area: 1 / 1 / 4 / 2;
+}
+
+ +

在用网格线定义网格区域时，我们是通过指定围绕网格区域的四条线来定义的。

+ +

The Grid Area defined by lines

+ +

我们也可以先给一个区域命名，然后在 {{cssxref("grid-template-areas")}} 属性值中指定这个区域的位置。你可以随意为区域命名，比如，如果我要创建下面的布局，我可以先划分出4个主要的区域：

+ +
    +
  • 头部（header）
    • +
  • 尾部（footer）
    • +
  • 侧边栏（sidebar)
    • +
  • 主要内容（content）
    • +
+ +

An image showing a simple two column layout with header and footer

+ +

通过 {{cssxref("grid-area")}} 属性为这些区域各分配一个名字，这不会影响布局。我们现在已经有了用于布局的命名过的区域了。

+ +
+
.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+
+ +

有了这些名字，接下来就可以创建布局了。此前我们是通过在项目自身上指定线序号来定位项目，而现在，则要把完整的布局都写在网格容器中。

+ +
.wrapper {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+
+ + + +

 

+ +
<div class="wrapper">
+    <div class="header">Header</div>
+    <div class="sidebar">Sidebar</div>
+    <div class="content">Content</div>
+    <div class="footer">Footer</div>
+</div>
+ +

{{ EmbedLiveSample('Grid_Area_1', '300', '330') }}

+
+ +

用这种方法，我们不需要为任何网格项目单独指定属性，所有的定义都在网格容器中。请仔细观察在 {{cssxref("grid-template-areas")}} 属性中是怎样描述布局的。

+ +

留出空白的网格单元

+ +

在上面的例子中，已经实现了用区域填充网格，不留空余空间，不过你也可以用这种布局方法留出空的网格单元。留出空单元的方法是使用句点符，“.”。假如想把尾部区域仅显示在主要内容的下方，就应该让侧边栏下面的三个单元格为空。

+ +
+
.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+
+ + + +
.wrapper {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      ".  .  .  ft   ft   ft   ft   ft   ft";
+}
+
+ +
<div class="wrapper">
+    <div class="header">Header</div>
+    <div class="sidebar">Sidebar</div>
+    <div class="content">Content</div>
+    <div class="footer">Footer</div>
+</div>
+ +

{{ EmbedLiveSample('Leaving_1', '300', '330') }}

+
+ +

为了让布局更整齐，可以使用多个 “.” 符号，如果在多个句点符号之间没有空格，那它们就会被计为一个单元格。用多个句点表示一个单元格的好处是对于复杂的布局来说很容易让行列对齐，这意味着你在 CSS 中看到的，就像是实际布局看起来那样。

+ +

跨越多个网格单元

+ +

在上面的例子中，每个区域都跨越了多个网格单元，为了实现这个效果，要把区域名字在它的区域内重复写多次，中间用空格分隔。你也可以在 grid-template-areas 中添加额外的空格以便让列对齐。你可以看到我把 hd 和 ft 都跟 main 对齐了。

+ +

用区域名连接起来的区域必须是矩形的，目前还不能创建 L 形的区域，尽管规范中指出未来的版本可能会提供这项功能。你可以像跨列那样实现跨行，举个例子，要让侧边栏向下跨到底部，只需要用  sd  标识替换掉  '.'  符号就可以了。

+ +
+
.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+
+ + + +
.wrapper {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      "sd sd sd  ft  ft   ft   ft   ft   ft";
+}
+
+ + + +

{{ EmbedLiveSample('Spanning_1', '300', '330') }}

+
+ +

{{cssxref("grid-template-areas")}} 的值必须是一个完整的网格，否则无效（即这个属性会被忽略掉），这意味着你应该让每一行都有相同数量的单元格，如果出现句点符就表示这个单元格将被留空。如果创建的区域不是矩形，也是无效的网格。

+ +

用媒体查询重新定义网格

+ +

现在我们的布局已经成为了 CSS 的一部分，（通过媒体查询）在 CSS 的多个不同地方修改它也非常容易。你可以重新定义网格、重新定位网格中的项目、甚至完全改变它。

+ +

若要（通过媒体查询）重新定义网格，应该把区域名称定义在媒体查询之外，在这种情况下，主要内容区域就总是会被称为 main，不管它被（媒体查询语句）定位在网格中的什么位置。

+ +

对于上面的例子，我们可能希望在较窄的宽度下使用非常简单的布局，网格只定义一个列，所有的项目从上到下排列。

+ +
+ + +
.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+
+.wrapper {
+    display: grid;
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "hd"
+      "main"
+      "sd"
+      "ft";
+}
+
+ +

把目前的布局放到媒体查询里，并且调整为当空间变得足够宽时，把目前两列的布局改为三列的布局。注意对于宽布局仍保留 9 列轨道，而只是在 grid-template-areas 里重新定义了项目的位置。

+ +
@media (min-width: 500px) {
+    .wrapper {
+        grid-template-columns: repeat(9, 1fr);
+        grid-template-areas:
+          "hd hd hd hd   hd   hd   hd   hd   hd"
+          "sd sd sd main main main main main main"
+          "sd sd sd  ft  ft   ft   ft   ft   ft";
+    }
+}
+@media (min-width: 700px) {
+    .wrapper {
+        grid-template-areas:
+          "hd hd hd   hd   hd   hd   hd   hd hd"
+          "sd sd main main main main main ft ft";
+    }
+}
+
+ + + +

{{ EmbedLiveSample('Redefining_1', '550', '330') }}

+
+ +

在 UI 元素上使用 grid-template-areas

+ +

许多网上流传的网格例子都假定使用网格来做页面的整体布局，实际上网格对于小元素一样有用。使用 {{cssxref("grid-template-areas")}} 能令人特别愉快，因为你在代码里就能直观地看到的这些元素的布局效果。

+ +

下面我们举一个非常简单的例子，来创建一个“媒体对象”。这个组件由一侧的图片或其他媒体以及另一侧的内容组成，图片将显示在盒子的右边或左边。

+ +

Images showing an example media object design

+ +

定义一个两个列轨道的网格，图片列的尺寸是 1fr，文本列的尺寸是 3fr。如果你想让图片区域占据固定的宽度，就可以把图片列的尺寸设定一个像素值，把文本区域的尺寸设定为 1fr。只有一个 1fr 的列轨道的意思是让它占据剩余的空间。

+ +

把图片区域命名为 img，把文本区域命名为 content，然后把它们摆放在 grid-template-areas 属性中。

+ +
+
* {box-sizing: border-box;}
+
+.media {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 400px;
+}
+.media {
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas: "img content";
+    margin-bottom: 1em;
+}
+
+.media .image {
+    grid-area: img;
+    background-color: #ffd8a8;
+}
+
+.media .text {
+    grid-area: content;
+    padding: 10px;
+
+}
+
+ +
<div class="media">
+    <div class="image"></div>
+    <div class="text">This is a media object example.
+      We can use grid-template-areas to switch around the image and text part of the media object.
+    </div>
+</div>
+ +

{{ EmbedLiveSample('Media_1', '300', '200') }}

+
+ +

把图片显示在盒子的另一侧

+ +

你也许习惯于把图片显示在盒子的另一侧，为了实现这个效果，只需要把网格的 1fr 轨道放到后边，把 {{cssxref("grid-template-areas")}} 里的值简单地调换个位置即可。

+ +
+
* {box-sizing: border-box;}
+
+.media {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 400px;
+}
+.media {
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas: "img content";
+    margin-bottom: 1em;
+}
+
+.media.flipped {
+    grid-template-columns: 3fr 1fr;
+    grid-template-areas: "content img";
+}
+
+.media .image {
+    grid-area: img;
+    background-color: #ffd8a8;
+}
+
+.media .text {
+    grid-area: content;
+    padding: 10px;
+
+}
+
+ +
<div class="media flipped">
+    <div class="image"></div>
+    <div class="text">This is a media object example.
+      We can use grid-template-areas to switch around the image and text part of the media object.
+    </div>
+</div>
+ +

{{ EmbedLiveSample('Media_2', '300', '200') }}

+
+ +

网格定义的简写规则

+ +

至此我们已经演示了多种定位网格中项目的方法，而且有多个属性用于定义网格，现在我们来学习两个简写方式，它们可以把定义网格及与网格有关的很多内容写在一行 CSS 语句里，非常强大。

+ +

这两个简写方式会让别的开发者甚至未来的你自己在阅读你的代码时的感到困难。因为这是规范的一部分，所以你在看示例或者读别人写的代码时偶然会遇到它们，即使你自己选择不使用它们。

+ +

在使用难以记忆的简写方式之前，你要知道，简写方式不仅能够一口气把多个属性缩写成一行，它们还会把一些你没有设置过的值、或不能在简写中设置的值重置成初始值。所以如果要用简写方式，一定要意识到它可能会把你在别处已经设置过的值给重置了。

+ +

这两个用于网格容器的简写方式，分别是显式网格简写 grid-template，和网格定义简写 grid。

+ +

grid-template

+ +

{{cssxref("grid-template")}} 属性可同时设置以下属性：

+ +
    +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-areas")}}
    • +
+ +

这个属性之所以被称为显式网格简写，是因为它设置的都是在定义显式网格时要用到的属性，而不是那些与创建隐式的行或列轨道相关的属性。

+ +

下面的代码使用 {{cssxref("grid-template-areas")}} 创建了一个布局，效果与本文前面创建的布局是一样的。

+ +
.wrapper {
+    display: grid;
+    grid-template:
+      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+      "sd sd sd main main main main main main" minmax(100px, auto)
+      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+             / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+
+ +

第一个值是 grid-template-areas 的值，并且在每一行的末尾声明了行的大小，也就是 minmax(100px, auto) 的作用。

+ +

在 grid-template-areas 之后用一个左斜杠分隔，再之后是一个详细的列轨道清单。

+ +

grid

+ +

{{cssxref("grid")}} 简写方式更进一步，它包含了与隐式网格相关的属性，所以通过它可以同时设置以下属性：

+ +
    +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-areas")}}
    • +
  • {{cssxref("grid-auto-rows")}}
    • +
  • {{cssxref("grid-auto-columns")}}
    • +
  • {{cssxref("grid-auto-flow")}}
    • +
+ +

这个属性会把 {{cssxref("grid-gap")}} 属性的值重置为 0，而且你还不能在简写中设置间距值。

+ +

你可以像使用 {{cssxref("grid-template")}} 一样使用这个语法，不过要注意的是当它执行时，它会重置一些其他值。

+ +
.wrapper {
+    display: grid;
+    grid: "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+    "sd sd sd main main main main main main" minmax(100px, auto)
+    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+
+ +

在读过本指南后面的自动定位和 grid-auto-flow 属性之后，我们会回过头来再看看这个属性提供的其他功能。

+ +

如果你通过阅读本指南前面的几篇文章已经开始上手了，那么你应该是用基于线的定位方式或用命名区域的方式来创建网格布局的。花费一些时间用网格去创建常见的布局模式，虽然还有很多的术语要学习，不过语法是非常一目了然的。在你练习开发的过程中可能会遭遇到一些问题，并且用我们没有讲过的方法去解决它们。在本指南后面的文章中，我们将着眼于更多规范中的细节 —— 目标是让你能用它创建出更加复杂的布局。

+ + diff --git a/files/zh-cn/web/css/css_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..17f637d96f --- /dev/null +++ b/files/zh-cn/web/css/css_grid_layout/index.html @@ -0,0 +1,263 @@ +--- +title: 网格布局 +slug: Web/CSS/CSS_Grid_Layout +tags: + - CSS + - CSS Grid Layout + - Grid Layout + - Grid 布局 + - Grids + - Layout + - css layout + - 参考 + - 布局 + - 总览 +translation_of: Web/CSS/CSS_Grid_Layout +--- +

CSS 网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）。

+ +

像表格一样，网格布局让我们能够按行或列来对齐元素。 然而在布局上，网格比表格更可能做到或更简单。 例如，网格容器的子元素可以自己定位，以便它们像CSS定位的元素一样，真正的有重叠和层次。

+ +

基本示例

+ +

以下示例显示了一个三列轨道的网格，其中创建的行最小为100像素，最大为自动。条目使用线性定位放置在网格上。

+ +
+ + +

HTML

+ +
<div class="wrapper">
+  <div class="one">One</div>
+  <div class="two">Two</div>
+  <div class="three">Three</div>
+  <div class="four">Four</div>
+  <div class="five">Five</div>
+  <div class="six">Six</div>
+</div>
+ +

CSS

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-row: 2 / 5;
+  grid-column: 1;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+
+ +

{{ EmbedLiveSample('example', '500', '440') }}

+
+ +

参考

+ +

CSS属性

+ +
+
    +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-template-areas")}}
    • +
  • {{cssxref("grid-template")}}
    • +
  • {{cssxref("grid-auto-columns")}}
    • +
  • {{cssxref("grid-auto-rows")}}
    • +
  • {{cssxref("grid-auto-flow")}}
    • +
  • {{cssxref("grid")}}
    • +
  • {{cssxref("grid-row-start")}}
    • +
  • {{cssxref("grid-column-start")}}
    • +
  • {{cssxref("grid-row-end")}}
    • +
  • {{cssxref("grid-column-end")}}
    • +
  • {{cssxref("grid-row")}}
    • +
  • {{cssxref("grid-column")}}
    • +
  • {{cssxref("grid-area")}}
    • +
  • {{cssxref("grid-row-gap")}}
    • +
  • {{cssxref("grid-column-gap")}}
    • +
  • {{cssxref("grid-gap")}}
    • +
+
+ +

CSS函数

+ +
+
    +
  • {{cssxref("repeat", "repeat()")}}
    • +
  • {{cssxref("minmax", "minmax()")}}
    • +
  • {{cssxref("fit-content", "fit-content()")}}
    • +
+
+ +

CSS 数据类型

+ +
+
    +
  • {{cssxref("<flex>")}}
    • +
+
+ +

术语表

+ +
+ +
+ +

指南

+ +
+ +
+ +

外部资源

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName("CSS Grid 2") }}{{ Spec2("CSS Grid 2") }}增加subgrids
{{ SpecName('CSS3 Grid') }}{{ Spec2('CSS3 Grid') }}初始版本
+ + diff --git a/files/zh-cn/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/zh-cn/web/css/css_grid_layout/layout_using_named_grid_lines/index.html new file mode 100644 index 0000000000..86699a10f4 --- /dev/null +++ b/files/zh-cn/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -0,0 +1,487 @@ +--- +title: 使用命名线布局 +slug: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines +tags: + - CSS + - CSS Grids + - Guide + - Layout +translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines +--- +

在前几篇文章中，我们已经学习了根据网格轨道创建出的网格线来定位，以及根据命名的模块区域来定位，在本文中我们将探讨如何通过为网格线命名来把这两种方法结合起来。命名网格线不可思议地有用，但是它那把名字和轨道尺寸混在一起的语法看上去令人困惑，不过通过学习本文的示例，它们会变得清晰而简单。

+ +

在定义网格时命名网格线

+ +

在用 grid-template-rows 和 grid-template-columns 属性定义网格时，可以为网格中的部分或全部网格线命名。为了便于演示，下面将使用在基于网格线定位一文中使用过的简单布局。这次我们会用命名线来创建网格。

+ +
+ + +

在定义网格时，把网格线的名字写在方括号内，名字随意。我们先为容器的起点和终点命名，既包括行的，也包括列的。接下来再把处于网格中间的块的起点和终点命名为 columns-start 和 columns-end，也是包括行和列的。不一定要把全部网格线都命名，只需要为布局时用到的关键线命名即可。

+ +
.wrapper {
+ display: grid;
+ grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+
+ +

一旦这些网格线有了名字，我们就可以用比线序号更易用的线名字来定位项目了。

+ +
.box1 {
+  grid-column-start: main-start;
+  grid-row-start: main-start;
+  grid-row-end: main-end;
+}
+.box2 {
+  grid-column-start: content-end;
+  grid-row-start: main-start;
+  grid-row-end: content-end;
+}
+.box3 {
+  grid-column-start: content-start;
+  grid-row-start: main-start;
+}
+.box4 {
+  grid-column-start: content-start;
+  grid-column-end: main-end;
+  grid-row-start: content-end;
+}
+
+ +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+</div>
+
+ +

{{ EmbedLiveSample('example_named_lines', '500', '330') }}

+
+ +

基于网格线布局的其他知识仍然照常可用，而且可以把命名线和线序号混合使用。为线命名的方法对于创建响应式页面特别有用，当需要在媒体查询中重新定义网格时，你就不需要通过修改线序号来改变布局，只要直接使用定义过的线名字就可以了，因为（即使在不同的布局中）线的名字总是相同的。

+ +

为网格线定义多个名字

+ +

你可能想要给一条线命名多个名字，比如在上例中的 sidebar-end 和 main-start 其实是同一条线。为了实现这个效果，只要把多个名字都写到方括号里，然后用空格分隔就行了：[sidebar-end main-start]。在引用时可以使用其中的任何一个名字。

+ +

由命名线定义的隐式网格区域

+ +

前面提到过，可以为网格线取任意名字，名字是 custom ident 类型的，它由开发者定义。不过在命名时要避免使用可能会出现在规范中的容易引起混淆的词，比如 span。名字两端不用加引号。

+ +

在选择名字时，如果把一个区域周围的线都用 -start 和 -end 作为后缀，就像上面的例子那样，网格就会为区域创建一个名字，名字就是后缀前的单词。再看上面的例子，我们把一些行和列命名为 content-start 和 content-end，这意味着得到了一个命名为 content 的网格区域，并且可以在这个区域中放入你想放的内容。

+ +
+ + +

下面的示例代码中，使用与上例相同的网格定义，但这次会在命名为 content 的区域里放入一个单独的项目。

+ +
.wrapper {
+   display: grid;
+   grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+   grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+.thing {
+  grid-area: content;
+}
+
+ +
<div class="wrapper">
+  <div class="thing">I am placed in an area named content.</div>
+</div>
+
+ +

{{ EmbedLiveSample('implicit_areas_from_lines', '500', '330') }}

+
+ +

不需要通过 grid-template-areas 来指定区域的位置，因为它已经被命名线约束好了。

+ +

由网格区域隐式定义的命名线

+ +

上面我们看到了如何通过命名网格线来创建命名的区域，而且这个方法反过来也可行，先用命名的模块区域来定义命名线，再用命名线定位项目。下面尝试利用《网格模板区域》一文中的布局示例，来探讨由网格区域创建的命名线是如何工作的。

+ +

在这个例子中额外增加了一个 div，它的样式类名为 overlay。我们先用 grid-area 属性创建命名的区域，然后用 grid-template-areas 创建布局。区域的名字是：

+ +
    +
  • hd
    • +
  • ft
    • +
  • main
    • +
  • sd
    • +
+ +

由此，即隐式地创建了行列网格线：

+ +
    +
  • hd-start
    • +
  • hd-end
    • +
  • sd-start
    • +
  • sd-end
    • +
  • main-start
    • +
  • main-end
    • +
  • ft-start
    • +
  • ft-end
    • +
+ +

下图中可以看到被命名的网格线，注意，有些线有2个名字，比如 sd-end 和  main-start 指的是同一条线。

+ +

An image showing the implicit line names created by our grid areas.

+ +

接下来使用隐式命名的网格线来定位项目 overlay，这和先显式命名网格线然后再定位是一样的。

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+.header {
+  grid-area: hd;
+}
+.footer {
+  grid-area: ft;
+}
+.content {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sd;
+}
+.wrapper > div.overlay {
+    z-index: 10;
+    grid-column: main-start / main-end;
+    grid-row: hd-start / ft-end;
+    border: 4px solid rgb(92,148,13);
+    background-color: rgba(92,148,13,.4);
+    color: rgb(92,148,13);
+    font-size: 150%;
+}
+
+ +
<div class="wrapper">
+  <div class="header">Header</div>
+  <div class="sidebar">Sidebar</div>
+  <div class="content">Content</div>
+  <div class="footer">Footer</div>
+  <div class="overlay">Overlay</div>
+</div>
+
+ +

{{ EmbedLiveSample('implicit_lines_from_area', '500', '330') }}

+
+ +

为了获得由命名的区域隐式创建命名线的能力，和由命名线隐式创建区域的能力，在创建网格布局时花一点时间来设计命名策略是非常值得的。慎重地选择名字对你和你的团队的意义在于，你创建网格的工作会变得容易，对其他使用和维护网格的人也大有益处。

+ +

用 repeat() 定义相同名字的多条线

+ +

如果要给网格中所有的线都定义唯一的名字，就要用普通写法，即在定义轨道时把名字写在方括号里，而不能使用 repeat 语法。使用 repeat 语法的结果是得到有相同名字的多条线，不过这也是有用的。

+ +

下面的例子创建了一个有 12 个等宽列的网格，在定义列轨道尺寸为 1fr 之前，也定义了网格线名字 [col-start]，也就是说最终会创建一个 12 列的网格，每个 1fr 宽的列左侧的线都被命名为 col-start。

+ +
+ + +

 

+ +
.wrapper {
+      display: grid;
+      grid-template-columns: repeat(12, [col-start] 1fr);
+}
+ +

网格创建好之后，就可以在其中定位项目了。我们有多条名为 col-start 的线，如果有一个项目位于 col-start 之后，就是指命名为 col-start 的第一条线，也就是指最左边那条线。如果要引用其他的同名线，就要加上序号。比如要定位项目从名为 col-start 的第1条线开始，到第5条线结束，应该这样写：

+ +
.item1 {
+  grid-column: col-start / col-start 5
+}
+
+ +

此处也可以使用 span 关键字。比如下一个项目的位置从名为 col-start 的第7条线开始，跨越3条线。

+ +
.item2 {
+  grid-column: col-start 7 / span 3;
+}
+
+ +

 

+ +
<div class="wrapper">
+    <div class="item1">I am placed from col-start line 1 to col-start 5</div>
+   <div class="item2">I am placed from col-start line 7 spanning 3 lines</div>
+</div>
+ +

{{ EmbedLiveSample('multiple_lines_same_name', '500', '330') }}

+
+ +

如果在 Firefox Grid Highlighter 中查看布局，就能观察到纵向的列线，以及项目是如何依赖这些线来定位的。

+ +

The 12 column grid with items placed. The Grid Highlighter shows the position of the lines.

+ +

The repeat syntax can also take a track list, it doesn’t just need to be a single track size that is being repeated. The code below would create an eight track grid, with a narrower 1fr width column named col1-start followed by a wider 3fr column named col2-start.

+ +

repeat 语法不仅可用于重复的单一轨道尺寸，也可以用于轨道列表。下面的代码创建了一个 8 个轨道的网格，在一个名为 col1-start 的 1fr 窄轨道之后，跟着是一个名为 col2-start 的 3fr 宽轨道。

+ +
.wrapper {
+  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
+}
+
+ +

如果 repeat 语法包含相邻的两条网格线，那它们会被合并，结果就像是不用 repeat 语法的创建的，所有的网格线都有多个名字。在下面的定义中，创建了四条 1fr 的轨道，每条轨道都有开始名和结束名。

+ +
.wrapper {
+  grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
+}
+
+ +

如果不用 repeat 语法来定义它们，应该写成这样。

+ +
.wrapper {
+  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr  [col-end col-start] 1fr [col-end];
+}
+
+ +

如果已经定义了一个轨道列表，接下来在使用 span 关键字定位项目时，不仅可以在 span 后面写一个行序数，还可以在 span 后面写一个命名线的行序数。

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
+}
+.item1 {
+  grid-column: col1-start / col2-start 2
+}
+.item2 {
+  grid-row: 2;
+  grid-column: col1-start 2 / span 2 col1-start;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">I am placed from col1-start line 1 to col2-start line 2</div>
+  <div class="item2">I am placed from col1-start line 2 spanning 2 lines named col1-start</div>
+</div>
+
+ +

{{ EmbedLiveSample('span_line_number', '500', '330') }}

+
+ +

通过前面的三篇文章，我们发现使用网格布局时有非常多不同的方法来定位项目，这乍看起来有些过于复杂了，不过其实你不必把它们都用上。在实践中，我发现使用命名的模块区域是最直截了当的布局方法，它的可视化表示法能让你看到布局的效果，并且也容易在网格上移动项目。

+ +

一个严格的多列布局已经可以工作得很好了，比如本文最后一部分用命名线做的演示，如果你考虑使用 Foundation 或 Bootstrap 这类框架，它们提供的是基于 12 列的网格系统，框架会导入代码然后进行计算以确保所有的列宽加在一起是 100%。如果使用网格布局，那么我们的“框架”只有这些代码就够了：

+ +
+
.wrapper {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}
+
+ +

然后就可以使用这个框架来布局页面了。比如，创建一个三列的布局，有头部和尾部，HTML 代码如下所示。

+ + + +
<div class="wrapper">
+  <header class="main-header">I am the header</header>
+   <aside class="side1">I am sidebar 1</aside>
+   <article class="content">I am the main article</article>
+   <aside class="side2">I am sidebar 2</aside>
+   <footer class="main-footer">I am the footer</footer>
+</div>
+
+ +

接下来就可以在网格布局框架上定位元素了。

+ +
.main-header,
+.main-footer  {
+  grid-column: col-start / span 12;
+}
+.side1 {
+  grid-column: col-start / span 3;
+  grid-row: 2;
+}
+.content {
+  grid-column: col-start 4 / span 6;
+  grid-row: 2;
+}
+.side2 {
+  grid-column: col-start 10 / span 3;
+  grid-row: 2;
+}
+
+ +

{{ EmbedLiveSample('three_column', '500', '330') }}

+ +

再一次，Firefox Grid Highlighter 工具帮助我们看到网格是如何定位项目的。

+ +

The layout with the grid highlighted.

+
+ +

这就是我们需要的，不用做任何计算，网格在分配 1fr 的列轨道空间之前会自动把 10 像素的轨道间距删除掉。在你动手创建自己的布局的过程中，语法会变得越来越熟悉，你能找到适于自己的方法和喜欢创建的项目类型。尝试用不同的方法去创建一些通用的布局模式，你会找到最适合自己的工作方式。在下一篇文章中我们会探讨如何用网格定位元素 —— 根本不需要使用定位属性！

+ + diff --git a/files/zh-cn/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/zh-cn/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html new file mode 100644 index 0000000000..004634d8b8 --- /dev/null +++ b/files/zh-cn/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html @@ -0,0 +1,659 @@ +--- +title: CSS网格中基于线的定位 +slug: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid +tags: + - CSS + - CSS网格 + - 指南 +translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid +--- +

在探讨网格布局的基础概念一文中，我们了解了如何使用线编号来排列元素，本文则会全面探索这个基础特性如何工作。

+ +

了解编号线是最好的探索网格布局方式的起点，当你使用网格布局时，编号线总是存在。这些线从1开始按行和列编号。要注意的是网格是根据书写方向来编号的。在像英文这样从左至右书写的语言中，网格线的1是最左边的线。当使用从右至左书写的语言时，网格线1就是最右边的线。我们会在之后的文章中深入探讨书写模式和网格间的交互。

+ +

基础例子

+ +

在这个非常简单的例子中，我们使用了3行3列的导轨，从而每个方向上我们有4条线。

+ +

网格容器中有4个子元素。如果我们不定义它们的位置，它们会按照自动定位规则布局，即前4个单元格中各1个元素。你可使用Firefox Grid Highlighter查看网格是如何定义行和列的。

+ +

Our Grid highlighted in DevTools

+ +
+ + +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-template-rows: repeat(3, 100px);
+}
+
+ +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +

 

+
+ +

{{ EmbedLiveSample('A_basic_example', '300', '330') }}

+ +

使用线编号定位元素

+ +

我们可以使用基于线的定位控制元素在网格上的位置。比如我想要第一个元素从网格的最左开始，占1个列导轨。它还应该从第1行线开始，延伸至第4行线：

+ +
+
.box1 {
+   grid-column-start: 1;
+   grid-column-end: 2;
+   grid-row-start: 1;
+   grid-row-end: 4;
+}
+
+ +

当你为某些元素定位，剩下的元素会继续按照自动定位规则定位。我们会在以后的文章中介绍这些规则，但现在你可以看到网格开始把未定位的元素放入空的单元格。

+ +

在逐个定义元素后，我们把所有4个元素都填充到了网格中。注意，我们可以留空一些单元格。网格布局的一个优势是：无需给元素周围加上margin来阻止文档流自动填补空白，就能实现设计中的留白区域。

+ +
+ + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box2 {
+   grid-column-start: 3;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-column-end: 3;
+   grid-row-start: 1;
+   grid-row-end: 2;
+}
+.box4 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 3;
+   grid-row-end: 4;
+}
+
+
+ +

{{ EmbedLiveSample('Line_Number', '300', '330') }}

+
+ +
+

grid-column 和 grid-row 缩写

+ +

我们用了不少代码定位每个元素，你应该不会惊讶有 {{glossary("shorthand properties", "shorthand")}}缩写。{{cssxref("grid-column-start")}}和{{cssxref("grid-column-end")}}属性可以合并为 {{cssxref("grid-column")}}，{{cssxref("grid-row-start")}}和{{cssxref("grid-row-end")}}则合并为{{cssxref("grid-row")}}。

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+   grid-column: 1 / 2;
+   grid-row: 1 / 4;
+}
+.box2 {
+   grid-column: 3 / 4;
+   grid-row: 1 / 3;
+}
+.box3 {
+   grid-column: 2 / 3;
+   grid-row: 1 /  2;
+}
+.box4 {
+   grid-column: 2 / 4;
+   grid-row: 3 / 4;
+}
+
+ +

{{ EmbedLiveSample('Grid_Shorthands', '300', '330') }}

+
+ +

默认跨度

+ +

在上例中，为了展示这些属性，我指定了每个结束行线和列线，但实际上如果一个元素只延伸一个轨道的话，你可以省略 grid-column-end 或 grid-row-end 值。元素默认延伸一个轨道。我们最初的例子的普通写法会是这样:

+ +
+ + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+   grid-column-start: 1;
+   grid-row-start: 1;
+   grid-row-end: 4;
+}
+.box2 {
+   grid-column-start: 3;
+   grid-row-start: 1;
+   grid-row-end: 3;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-row-start: 1;
+}
+.box4 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 3;
+}
+
+ +

{{ EmbedLiveSample('End_Lines', '300', '330') }}

+
+ +

当省略了跨越一个轨道的元素的／和第二个值，我们的缩写则会是这样

+ +
+ + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+   grid-column: 1 ;
+   grid-row: 1 / 4;
+}
+.box2 {
+   grid-column: 3 ;
+   grid-row: 1 / 3;
+}
+.box3 {
+   grid-column: 2 ;
+   grid-row: 1 ;
+}
+.box4 {
+   grid-column: 2 / 4;
+   grid-row: 3 ;
+}
+
+ +

{{ EmbedLiveSample('New_Shorthand', '300', '330') }}

+
+ +

grid-area属性

+ +

我们可以更进一步，给每个元素只定义一个属性 {{cssxref("grid-area")}}。值的顺序如下

+ +
    +
  • grid-row-start
    • +
  • grid-column-start
    • +
  • grid-row-end
    • +
  • grid-column-end
    • +
+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+   grid-area: 1 / 1 / 4 / 2;
+}
+.box2 {
+   grid-area: 1 / 3 / 3 / 4;
+}
+.box3 {
+   grid-area: 1 / 2 / 2 / 3;
+}
+.box4 {
+   grid-area: 3 / 2 / 4 / 4;
+}
+
+ +

{{ EmbedLiveSample('The_grid-area_property', '300', '330') }}

+ +

grid-area 的值的顺序看起来可能有点奇怪，比如说它正好和定义margin和padding的缩写的值的顺序相反。但如果说是因为它与CSS书写模式规范中的书写方向相关就不难理解了。我们会在之后的文章中探讨网格与书写模式的关系，但我们有4个书写流关联的方向：

+ +
    +
  • 块起始 （block-start）
    • +
  • 块结束 （block-end）
    • +
  • 行起始 （inline-start）
    • +
  • 行结束 （inline-end）
    • +
+ +

我们现在的工作语言是英语，一种从左至右书写的语言。块起始 就是网格容器的顶端行线，块结束 就是底端行线。行起始 是左端列线，因为 行起始 与当前书写模式的起点一致，行结束 就是网格右端列线。

+ +

当我们用 grid-area 属性来定义网格区域时，我们先定义 块起始（block-start） 和 行起始（inline-start）, 然后再定义 块结束（block-end） 和 行结束（inline-end）。起初，我们可能会因为习惯了顶、右、底、左的属性定义顺序，觉得这个顺序奇怪，但当从网站的书写模式有多个方向的角度思考，这就显得合理了。

+ +

反方向计数

+ +
+

我们也可以从行和块结束线开始反方向计数，对于英语来说就是右端的列线和底端的行线。这些线会被记为 -1，然后你可以从这往前数，所以倒数第2条线会被记为 -2。值得注意的是最后一条线是指显式定义网格的最后一条线，即由 grid-template-columns 和 grid-template-rows 定义的网格，并不把隐式定义网格的加入的行和列纳入考虑。

+ +

下面这个例子中，我通过从右端和底端开始定义布局，把之前的例子的布局翻转了

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+   grid-column-start: -1;
+   grid-column-end: -2;
+   grid-row-start: -1;
+   grid-row-end: -4;
+}
+.box2 {
+   grid-column-start: -3;
+   grid-column-end: -4;
+   grid-row-start: -1;
+   grid-row-end: -3;
+}
+.box3 {
+   grid-column-start: -2;
+   grid-column-end: -3;
+   grid-row-start: -1;
+   grid-row-end: -2;
+}
+.box4 {
+   grid-column-start: -2;
+   grid-column-end: -4;
+   grid-row-start: -3;
+   grid-row-end: -4;
+}
+
+
+ +

{{ EmbedLiveSample('Counting_backwards', '300', '330') }}

+ +

使元素跨越整个网格

+ +

拥有从开始计数和从末尾计数这两种定位方法使得使一个元素跨越整个网格变得很方便:

+ +
.item {
+  grid-column: 1 / -1;
+}
+
+ +

间距

+ +
+

CSS网格规范加入了用 {{cssxref("grid-column-gap")}}和{{cssxref("grid-row-gap")}}属性定义列间距和行间距的能力。这两个属性的行为和多列布局中的{{cssxref("column-gap")}}属性很像。

+ +

间距只出现在网格轨道与轨道之间，它们并不会出现在网格容器的四周。通过在网格容器上定义这些属性，我们给上例加上了间距：

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+   grid-column: 1 ;
+   grid-row: 1 / 4;
+}
+.box2 {
+   grid-column: 3 ;
+   grid-row: 1 / 3;
+}
+.box3 {
+   grid-column: 2 ;
+   grid-row: 1 ;
+}
+.box4 {
+   grid-column: 2 / 4;
+   grid-row: 3 ;
+}
+.wrapper {
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+     grid-column-gap: 20px;
+     grid-row-gap: 1em;
+}
+
+
+ +

{{ EmbedLiveSample('Gutters_or_Alleys', '300', '350') }}

+ +

网格间距缩写

+ +

这两个属性可以用{{cssxref("grid-gap")}}简写。如果你只给出一个值，那这个值会同时应用于行间距和列间距。如果你给了两个值，第一个会被用于grid-row-gap，第二个则会被用于grid-column-gap.

+ +
.wrapper {
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+     grid-gap: 1em 20px;
+}
+
+ +

从基于线定位的角度来说，间距的行为就像是使基线变得特别宽。所有从这条线开始的东西会从间距结束的地方开始，你并不能定位也不能放任何东西到这个间距的空间中。如果你希望得到行为和轨道行为相似的间距，你当然可以定义轨道来作为间距。

+ +

使用 span 关键字

+ +
+

除了”起始线与结束线“的定位方法，你还可以使用”起始线与跨越轨道数量“的定位方法

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+   grid-column: 1;
+   grid-row: 1 / span 3;
+}
+.box2 {
+   grid-column: 3;
+   grid-row: 1 / span 2;
+}
+.box3 {
+   grid-column: 2;
+   grid-row: 1;
+}
+.box4 {
+   grid-column: 2 / span 2;
+   grid-row: 3;
+}
+
+
+ +

{{ EmbedLiveSample('using_the_span_keyword', '300', '330') }}

+ +

你也可以在 grid-row-start/grid-row-end 和 grid-column-start/grid-column-end 属性中使用 span 关键字。接下来两个例子会创建同样的网格。第一个例子中我们设定了起始行，然后说我们想结束线在跨越3个线之后。那这个元素就会从1号线开始，跨越3个线，到4号线结束。

+ +
.box1 {
+    grid-column: 1;
+    grid-row: 1 /  span 3;
+}
+
+ +

第二个例子中，我们定义了结束行线，然后设置起始线为跨越3个线。意味着这个元素会从指定的线往上跨越3个线。这个元素会从4号线开始，跨越3个线到1号线。

+ +
.box1 {
+    grid-column: 1;
+    grid-row: span 3 / 4;
+}
+
+ +

为了熟悉基于线的定位方式，你可以尝试用网格布置几个列宽不同的元素来实现一些常见布局。记住，如果你没有给所有元素定位，那些没被定位的元素就会按照自动定位规则定位。这么做的结果可能恰好和你的目标一样，但如果一些元素在你预料之外的地方出现，先检查一下你有没有给它定位。

+ +

再者，记住你明确定位的元素是可以互相重叠的。有时你能用这点创造一些有趣的效果，但有时也会因为你定位错了线而导致不正确的重叠。Firefox Grid Highlighter 可以在你学习时给你帮助，特别是当你的网格比较复杂时。

+ + diff --git a/files/zh-cn/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/relationship_of_grid_layout/index.html new file mode 100644 index 0000000000..6294c4aa25 --- /dev/null +++ b/files/zh-cn/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -0,0 +1,639 @@ +--- +title: grid layout 和其它布局方法的联系 +slug: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +tags: + - CSS + - CSS网格 + - 指南 +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +

CSS 网格布局作为实现布局的一个完整系统，其设计使之和css其它部分能协同合作。在这个指南中，我会向你解释网格布局是如何与你正在使用的其它技巧协同合作的。

+ +

Grid and flexbox

+ +

CSS网格布局和弹性盒布局的主要区别在于弹性盒布局是为一维布局服务的（沿横向或纵向的），而网格布局是为二维布局服务的（同时沿着横向和纵向）。这两个规格有一些相同的特性。如果你已经掌握如何使用弹性盒布局的话，你可能会想知道这些相似之处怎样在能帮助你掌握网格布局。

+ +

一维布局 vs. 二维布局

+ +

一个简单的例子可以说明一维和二维布局的区别。

+ +

这个例子中我用弹性盒布置了一些盒子。容器中有5个元素，它们被设置了伸缩属性，在200px基准上伸缩。

+ +

我还设置了{{ cssxref("flex-wrap") }}属性，从而当容器变得太窄时，元素会换到新的一行。

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +
.wrapper {
+   display: flex;
+   flex-wrap: wrap;
+}
+.wrapper > div {
+   flex: 1 1 200px;
+}
+
+
+ +

{{ EmbedLiveSample('onedtwod', '500', '230') }}

+ +

你可以看到有两个元素被换到了新行。这两个元素分享了这行的可用空间，并没有与上一行的元素对齐。这是因为当你允许弹性元素换行时，每个新行都变成了一个新的弹性容器。空间分布只在行内进行。

+ +

从而产生了一个常见问题：如何能让这些元素对齐？这时你需要一种二维布局的方法，你希望通过行和列来控制对齐，是时候该网格登场了。

+ +

用CSS网格达成同样布局

+ +

下例中我用网格创建同样的布局。这次我们有3个1fr的列轨道。我们并不需要给这些子元素设置任何属性，它们会自动按顺序填充到网格的单元格中。你可以看到它们按网格规整的排列，行与行、列与列对齐。当有5个子元素时，第二行的尾部会留出一个空隙。

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+}
+
+ +

{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}

+
+ +

当抉择该用网格还是弹性盒时，你可以问自己一个简单的问题：

+ +
    +
  • 我只需要按行或者列控制布局？那就用弹性盒子
    • +
  • 我需要同时按行和列控制布局？那就用网格
    • +
+ +

从内容出发还是从布局入手?

+ +

除了一维和二维布局之间的区别，还有一种办法决定该使用弹性盒还是网格来布局。弹性盒从内容出发。一个使用弹性盒的理想情形是你有一组元素，希望它们能平均地分布在容器中。你让内容的大小决定每个元素占据多少空间。如果元素换到了新的一行，它们会根据新行的可用空间决定它们自己的大小。

+ +

网格则从布局入手。当使用CSS网格时，你先创建网格，然后再把元素放入网格中，或者让自动放置规则根据把元素按照网格排列。我们能创建根据内容改变大小的网格轨道，但整个轨道的大小都会随之改变。

+ +

当你使用弹性盒，并发现自己禁用了一些弹性特性，那你可能需要的是CSS网格布局。例如，你给一个弹性元素设置百分比宽度来使它和上一行的元素对齐。这种情况下，网格很可能是一个更好的选择。

+ +

盒对齐

+ +
+

对于很多人来说，弹性盒特性最让人激动的一点是我们第一次拥有了正当的对齐能力。这让一个盒子在页面里中心对齐变得简单。弹性元素还可以使自己延伸到和容器等高，意味我们能实现等高列。长久以来，我们都想实现这些行为，并一直在用一些所谓“技巧”去达到起码的视觉效果。

+ +

弹性盒特性已经被加入到新规范盒 Box Alignment Level 3。意味它们能被用在包括网格布局的其它规范中。它们未来也可能被用在其他的布局方法中。

+ +

本系列稍晚的指南中我会正式介绍盒对齐（Box Alignment）和它在网格布局中是如何工作的。不过现在我们先看一个比较弹性盒和网格的简单例子。

+ +

在这第一个例子中，我使用了弹性盒，一个容器内有三个元素。wrapper设定了 {{cssxref("min-height")}}，确定了弹性容器的高度。我还在弹性容器中定义了{{cssxref("align-items")}}: flex-end, 因此子元素会从弹性容器尾部开始排列。我还在box1上定义了{{cssxref("align-self")}}属性，这会覆盖默认值，使它延长至容器的高度；box2上也定义了{{cssxref("align-self")}}，所以它会与弹性容器的起点对齐。

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+   display: flex;
+   align-items: flex-end;
+   min-height: 200px;
+}
+.box1 {
+   align-self: stretch;
+}
+.box2 {
+   align-self: flex-start;
+}
+
+
+ +

{{ EmbedLiveSample('Box_alignment', '300', '230') }}

+ +

CSS网格中的对齐

+ +
+

这个第二个例子使用了网格创建一个同样的布局。这次我们使用了应用于网格布局的盒对齐属性。因此我们是相对网格而不是弹性盒的起始对齐。对于网格来说，我们是让元素在它们各自的网格区域中对齐。在本例中就是一个单元格，但它也可能是多个单元格组成的一个区域。

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3,1fr);
+   align-items: end;
+   grid-auto-rows: 200px;
+}
+.box1 {
+   align-self: stretch;
+}
+.box2 {
+   align-self: start;
+}
+
+
+ +

{{ EmbedLiveSample('Alignment_in_CSS_Grids', '200', '310') }}

+ +

fr单位和flex-basis属性

+ + + +

我们已经看到了fr单元如何在网格容器中分配一定比例的可用空间到我们的网格轨道。当与{{cssxref("minmax", "minmax()")}} 函数结合使用时，fr单元可以给我们与flexbox中的flex属性非常相似的行为 - 同时仍然可以创建二维布局。

+ +

之前我们通过例子验证了一维布局和二维布局的差异，可以发现这两种布局方式对响应式的处理存在着不同。对于弹性布局，当我们拖拽以改变浏览器大小时，弹性盒会根据可用空间适当的调整行中项目的个数。当有足够的空间时，全部的5个项目全部在一行展示，当容器变的过窄时，每行则只能展示一个项目。

+ +

相较而言，网格布局则始终保持3列轨道。轨道会自动拉伸，但始终会保持我们定义网格时的轨道数量，也就是3个。

+ +

自动填充网格轨道

+ +

我们可以通过使用repeat方法，配合auto-fill和auto-fit属性，创建类似弹性盒的效果，同时保证内容严格按照行和列的固定规则排列。

+ +

在接下来的例子中，在repeat方法中使用auto-fill属性替换整数值，并且设置轨道的宽度为200px。这意味着网格布局将会根据容器的宽度创建最多的宽度为200px的列轨道。

+ +
+ + +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(auto-fill, 200px);
+}
+
+
+ +

{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}

+ +

灵活的轨道数量

+ +

到这为止就和弹性盒布局不太一样了。在弹性盒布局例子中，子元素在被包裹起来之前大于基准的200px。我们可以用使用网格布局中的auto-fill和{{cssxref("minmax", "minmax()")}}函数实现同样的功能。在这个例子中，我创建了一个用minmax自动填充的轨道。我想要这个轨道的元素最小有200px，最大1fr的宽度。 一旦浏览器计算出有多少个200px会填充到这个容器里面，并算好网格间距，那么，浏览器就会把剩余的空间等分成以最大1fr单位计算的区域给其他元素。

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+
+ +

{{ EmbedLiveSample('A_flexible_number_of_tracks', '500', '170') }}

+ +

We now have the ability to create a grid with a flexible number of flexible tracks, but to see items laid out on the grid aligned by rows and columns at the same time.

+ +

网格和绝对定位元素

+ +

网格可以与绝对定位的元素进行交互，如果要将某个项目放置在网格或网格区域内，这可能很有用。该规范定义了当网格容器是包含块并且网格容器是绝对定位的项目的父级时的行为。

+ +

作为包含块的网格容器

+ +

要使网格容器成为一个包含块，需要为容器增加 position 属性，并把它的值设置为 relative，就像为任何其他绝对定位的项目创建一个包含块一样。接下来，如果再把一个网格项目设置为 position: absolute，那么网格容器就成为包含块，或者如果该项目具有网格定位的属性，那么被放置的网格就成为包含块。

+ +

在下面的例子中，一个容器中包含了四个子项。第三项是绝对定位的，并且使用基于行定位的方式把自己放置在网格中。网格容器具有 position: relative 属性，因此网格就成为该项目的定位上下文。

+ +
+ + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">
+    This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into.
+   </div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(4,1fr);
+   grid-auto-rows: 200px;
+   grid-gap: 20px;
+   position: relative;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   position: absolute;
+   top: 40px;
+   left: 40px;
+}
+
+
+ +

{{ EmbedLiveSample('A_grid_container_as_containing_block', '500', '330') }}

+ +

可以看到该项目占据的区域是纵向的第2条线到第4条线，横向起于第1条线。然后使用 top 和 left 属性在该区域中进行偏移。就像通常绝对定位的元素会脱离标准文档流一样，该项目也脱离了文档流，被自动定位规则定位在包含块中（译注：它会叠加在其他元素之上）。因为该项目脱离了文档流，所以不会再创建一个跨越纵向第3条线的轨道。

+ +

你可以试试看，如果把规则 position: absolute 从 .box3 的样式中移除掉，没有定位的元素会如何显示（译注：此时该元素仍表现得像普通的网格项目一样，top 和 left 属性都不起作用）。

+ +

作为父级的网格容器

+ +

如果具有绝对定位的子元素的父级是网格容器，即使网格容器没有被设置为新的定位上下文（译注：即网格容器没有设置 position: relative 属性），该子元素仍会脱离文档流。定位是基于定位上下文的，和这其他布局方式没有区别。在我们的例子中，如果把容器的 position: relative 属性移除掉，定位上下文就变成了当前视口，像下图中显示的那样。

+ +

Image of grid container as parent

+ +

此外，该项目不再被视为网格布局的一部分，当网格中其他元素调整尺寸或自动布局时，都与该项目无关。

+ +

以网格区域作为父级

+ +

如果绝对定位的项目嵌套在网格区域内，该区域则成为该项目的参照语境。 在下面的例子中，网格和上例相同，但是这次我们在网格 .box3 里嵌套了一个项目。

+ +

.box3 被设置了 position: relative 属性，其子元素设置了定位的偏移属性。此时，子元素的定位的参照语境就变成了网格区域（译注：这个网格区域即是 .box3）。

+ +
+ + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three
+       <div class="abspos">
+        This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the grid area.
+       </div>
+   </div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(4,1fr);
+   grid-auto-rows: 200px;
+   grid-gap: 20px;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   position: relative;
+}
+.abspos {
+   position: absolute;
+   top: 40px;
+   left: 40px;
+   background-color: rgba(255,255,255,.5);
+   border: 1px solid rgba(0,0,0,0.5);
+   color: #000;
+   padding: 10px;
+}
+
+
+ +

{{ EmbedLiveSample('With_a_grid_area_as_the_parent', '500', '420') }}

+ +

网格和 display: contents

+ +

最后一个值得关注的与其他布局规范的交互是 CSS 网格布局与 display: contents 之间的交互。display 属性的 contents 值是显示规范中描述的新值，如下所示：

+ +
+

“元素本身不会生成任何盒子，但其子元素和伪元素仍然会像平常一样生成盒子。（用户代理）为了生成盒子和布局，必须将元素视为已在文档树中被其子元素和伪元素替换。“

+
+ +

如果将项目设置为 display: contents，通常自身的盒子会消失，子元素的盒子仍显示，就像子元素在文档树中上升了一层。这意味着一个网格项目的子元素可以成为网格项目。听起来很奇怪？下面是一个简单的例子。在下面的网格中，第一个项目设置为跨越三个列轨道，它包含三个嵌套的项目，由于这些项目不是直接子项目，因此它们不会成为网格布局的一部分，因此使用常规的块布局进行显示。

+ +
+ + +
<div class="wrapper">
+   <div class="box box1">
+       <div class="nested">a</div>
+       <div class="nested">b</div>
+       <div class="nested">c</div>
+   </div>
+   <div class="box box2">Two</div>
+   <div class="box box3">Three</div>
+   <div class="box box4">Four</div>
+   <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+}
+
+
+ +

{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}

+
+ +

现在如果将 display：contents 添加到 box1 的样式规则中，则该项目的盒子将消失，子项目成为网格项目，并且应用自动定位规则放置在网格中。

+ +
+ + +
<div class="wrapper">
+   <div class="box box1">
+       <div class="nested">a</div>
+       <div class="nested">b</div>
+       <div class="nested">c</div>
+   </div>
+   <div class="box box2">Two</div>
+   <div class="box box3">Three</div>
+   <div class="box box4">Four</div>
+   <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   display: contents;
+}
+
+ +

{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}

+
+ +

这可以让项目嵌套到网格中，就好像它们是网格的一部分一样，并且可以用它解决 subgrid 值尚未实现时要解决的一些问题。 也可以在 flex 布局中用类似的方法通过 display: contents 使嵌套的项目成为 flex 项目。

+ +

正如本文中所述，CSS Grid Layout 只是您工具包的一部分。不要害怕在布局时将它与其他布局方法混用，大胆用它获得你想要的效果吧。

+ + diff --git "a/files/zh-cn/web/css/css_grid_layout/\345\210\251\347\224\250css\347\275\221\346\240\274\345\270\203\345\261\200\345\256\236\347\216\260\345\270\270\347\224\250\345\270\203\345\261\200/index.html" "b/files/zh-cn/web/css/css_grid_layout/\345\210\251\347\224\250css\347\275\221\346\240\274\345\270\203\345\261\200\345\256\236\347\216\260\345\270\270\347\224\250\345\270\203\345\261\200/index.html" new file mode 100644 index 0000000000..1f19e6933b --- /dev/null +++ "b/files/zh-cn/web/css/css_grid_layout/\345\210\251\347\224\250css\347\275\221\346\240\274\345\270\203\345\261\200\345\256\236\347\216\260\345\270\270\347\224\250\345\270\203\345\261\200/index.html" @@ -0,0 +1,593 @@ +--- +title: 利用CSS网格布局实现常用布局 +slug: Web/CSS/CSS_Grid_Layout/利用CSS网格布局实现常用布局 +translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +--- +

为了完善这组CSS网格布局指南，我将介绍几种不同的布局，它们演示了在使用网格布局进行设计时可以使用的一些不同技术。我们将看到一个使用 grid-template-areas 的示例，一个典型的12列灵活网格系统，以及一个使用自动布局的产品列表。正如您从这组示例中看到的，使用网格布局通常有不止一种方法来实现您想要的结果。选择对您正在解决的问题和需要实现的设计最有帮助的方法。

+ +

使用网格模板区域的响应式布局，包含1到3个流动列

+ +

许多网站都是这种布局的变体，有内容、边栏、页眉和页脚。在响应式设计中，您可能希望将布局显示为单个列，在某个断点添加侧栏，然后为更宽的屏幕引入三列布局。

+ +

Image of the three different layouts created by redefining our grid at two breakpoints.

+ +

我将使用我们在向导网格模板区域中了解到的命名模板区域来创建这个布局。

+ +

我的标记是一个容器，其中包含用于标题、页脚、主要内容、导航、边栏和打算放置广告的块的元素。

+ +
+ + +
<div class="wrapper">
+        <header class="main-head">The header</header>
+        <nav class="main-nav">
+            <ul>
+                <li><a href="">Nav 1</a></li>
+                <li><a href="">Nav 2</a></li>
+                <li><a href="">Nav 3</a></li>
+            </ul>
+        </nav>
+        <article class="content">
+            <h1>Main article area</h1>
+            <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p>
+        </article>
+        <aside class="side">Sidebar</aside>
+        <div class="ad">Advertising</div>
+        <footer class="main-footer">The footer</footer>
+</div>
+
+ +

因为我们使用{{cssxref("grid-template-areas")}}来创建布局。在任何媒体查询之外，我需要命名区域。我们使用{{cssxref("grid-area")}} 属性命名区域。

+ +
.main-head {
+  grid-area: header;
+}
+.content {
+  grid-area: content;
+}
+.main-nav {
+  grid-area: nav;
+}
+.side {
+  grid-area: sidebar;
+}
+.ad {
+  grid-area: ad;
+}
+.main-footer {
+  grid-area: footer;
+}
+
+ +

这不会创建任何布局，但是我们的项目现在有了名称，我们可以使用它来创建布局。在任何媒体查询之外，我现在要为移动宽度设置布局。在这里，我保持源文件的顺序，试图避免源文件和显示之间的任何断开，就像向导网格布局和可访问性中描述的那样。我没有定义任何列或行跟踪，但是这种布局规定了单个列，并且将根据需要为隐式网格中的每个项目创建行。

+ +
.wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-areas:
+    "header"
+    "nav"
+    "content"
+    "sidebar"
+    "ad"
+    "footer";
+}
+
+ +

在设置了移动布局之后，我们将获得所有屏幕大小的这一列，现在我们可以添加一个媒体查询并重新定义布局，以满足屏幕空间足够显示两列的情况。

+ +
@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas:
+      "header  header"
+      "nav     nav"
+      "sidebar content"
+      "ad      footer";
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+ +

您可以看到布局在{{cssxref("grid-template-areas")}}的值中成形。 header 跨越两个列轨道，就像 nav 一样。在第三行轨道中，我们在 content 旁边有 sidebar 。在第四行轨道，我选择了放置我的广告内容-所以它出现在侧边栏下，然后 footer 旁边的内容。我在导航栏上使用了一个flexbox来显示它。

+ +

现在我可以添加最后一个断点来移动到三列布局。

+ +
@media (min-width: 700px) {
+  .wrapper {
+    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-areas:
+      "header header  header"
+      "nav    content sidebar"
+      "nav    content ad"
+      "footer footer  footer"
+   }
+   nav ul {
+     flex-direction: column;
+   }
+}
+
+ +

三列布局有两个1fr单元侧列和一个中间列，轨道大小为4fr。这意味着容器中的可用空间被划分为6个部分，并按照我们的三个轨道的比例分配—每个轨道的一个部分位于侧列，四个部分位于中心。

+ +

在这个布局中，我在左边的列中显示导航，旁边是内容。在右边栏我们有侧边栏，在它下面是广告。页脚现在横跨布局的底部。然后我使用一个flex xbox将导航显示为一个列。

+ +

{{ EmbedLiveSample('layout_1', '800', '500') }}

+
+ +

这是一个简单的示例，但是演示了如何使用网格布局来为不同的断点重新安排布局。具体来说，我正在更改广告块的位置，这在不同的列设置中是合适的。我发现这种命名区域的方法在原型制作阶段非常有用，很容易处理元素的位置。您可以始终以这种方式开始使用grid进行原型设计，即使由于访问您站点的浏览器的原因，您不能在生产中完全依赖它。

+ +

灵活的12列布局

+ +

如果您使用过许多框架或网格系统之一，那么您可能已经习惯了将站点布置在12或16列的灵活网格上。我们可以使用CSS网格布局创建这种类型的系统。作为一个简单的例子，我正在创建一个12列的灵活网格，它有12个1fr-unit列轨道，它们都有一个名为col-start 的起始行。这意味着我们将拥有12条名为 col-start 的网格线。

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+
+ +

为了演示这个网格系统是如何工作的，我在包装器中包含了4个子元素。

+ +
<div class="wrapper">
+  <div class="item1">Start column line 1, span 3 column tracks.</div>
+  <div class="item2">Start column line 6, span 4 column tracks. 2 row tracks.</div>
+  <div class="item3">Start row 2 column line 2, span 2 column tracks.</div>
+  <div class="item4">Start at column line 3, span to the end of the grid (-1).</div>
+</div>
+
+ +

然后，我可以使用命名行和span关键字将它们放到网格上。

+ +
.item1 {
+  grid-column: col-start / span 3;
+}
+.item2 {
+  grid-column: col-start 6 / span 4 ;
+  grid-row: 1 / 3;
+}
+.item3 {
+  grid-column: col-start 2 / span 2;
+  grid-row: 2;
+}
+.item4 {
+  grid-column: col-start 3 / -1;
+  grid-row: 3;
+}
+
+ +

{{ EmbedLiveSample('layout_2', '800', '400') }}

+
+ +

正如命名行指南中所述，我们使用命名行来放置项目。因为我们有12行名称相同，所以我们使用名称，然后是行索引。如果您喜欢并完全避免使用命名行，也可以使用行索引本身。

+ +

我没有设置结束行号，而是选择使用span关键字表示这个元素应该跨多少个轨道。我喜欢这种方法，因为在使用多列布局系统时，我们通常根据网格的轨迹数量来考虑块，并根据不同的断点进行调整。要查看块如何与轨道对齐，请使用 Firefox Grid Inspector. 。它清楚地展示了我们的项目是如何放置的。

+ +

Showing the items placed on the grid with grid tracks highlighted.

+ +

与您以前可能使用过的网格系统上的网格布局的工作方式有一些关键区别。如您所见，我们不需要添加任何标记来创建行，网格系统需要这样做来阻止元素弹出到上面的行中。使用CSS网格布局，我们可以将内容放入行中，如果行是空的，则它们不会上升到上面的行中。由于这种严格的列和行布局，我们也可以很容易地在布局中留出空白。我们也不需要特殊的类来拉或推东西，将它们缩进网格。我们需要做的就是指定项目的开始和结束行。

+ +

使用12列系统构建布局

+ +

为了了解这种布局方法在实践中是如何工作的，我们可以使用12列网格系统创建与使用{{cssxref("grid-template-areas")}}创建的布局相同的布局。我开始使用与网格模板区域示例相同的标记。

+ +
+ + +
<div class="wrapper">
+        <header class="main-head">The header</header>
+        <nav class="main-nav">
+            <ul>
+                <li><a href="">Nav 1</a></li>
+                <li><a href="">Nav 2</a></li>
+                <li><a href="">Nav 3</a></li>
+            </ul>
+        </nav>
+        <article class="content"><h1>Main article area</h1>
+        <p>In this layout, we display the areas in source order for any screen less that 500 pixels wide. We go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p></article>
+        <aside class="side">Sidebar</aside>
+        <div class="ad">Advertising</div>
+        <footer class="main-footer">The footer</footer>
+    </div>
+
+ +

然后，我可以设置网格，如上面的示例12列布局。

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+
+ +

我们将再次使其成为响应式布局，不过这次使用的是命名行。每个断点都将使用一个12列的网格，但是，根据屏幕的大小，项目将跨越的轨道数量会发生变化。

+ +

我们首先启动移动设备，对于最窄的屏幕，我们想要的只是保持项目的源顺序，并且所有项目都跨越网格。

+ +
.wrapper > * {
+  grid-column: col-start / span 12;
+}
+
+ +

在下一个断点处，我们希望转移到两列布局。我们的标题和导航仍然跨整个网格，所以我们不需要为它们指定任何位置。侧边栏从第一行colstart开始，共3行。它在第3行之后，因为标题和导航位于前两行轨道中。

+ +

ad面板位于边栏下面，因此从网格行4开始。然后我们有内容和页脚，从colstart 4开始，跨越9个轨道，把它们带到网格的末端。

+ +
@media (min-width: 500px) {
+
+  .side {
+    grid-column: col-start / span 3;
+    grid-row: 3;
+  }
+  .ad {
+    grid-column: col-start / span 3;
+    grid-row: 4;
+  }
+  .content, .main-footer {
+    grid-column: col-start 4 / span 9;
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+ +

最后，我们转到这个布局的三列版本。标题继续横跨整个网格，但现在导航将向下移动，成为第一个侧边栏，其中包含内容，然后是旁边的侧边栏。页脚现在也跨整个布局。

+ +
@media (min-width: 700px) {
+  .main-nav {
+    grid-column: col-start / span 2;
+    grid-row: 2 / 4;
+  }
+  .content {
+    grid-column: col-start 3 / span 8;
+    grid-row: 2 / 4;
+  }
+  .side {
+    grid-column: col-start 11 / span 2;
+    grid-row: 2;
+  }
+  .ad {
+    grid-column: col-start 11 / span 2;
+    grid-row: 3;
+  }
+  .main-footer {
+    grid-column: col-start / span 12;
+  }
+  nav ul {
+    flex-direction: column;
+  }
+}
+
+ +

{{ EmbedLiveSample('layout_3', '800', '450') }}

+
+ +

网格检查器再次帮助我们了解布局是如何形成的。

+ +

Showing the layout with grid tracks highlighted by the grid inspector.

+ +

在创建这个布局时需要注意的一点是，我们不需要在每个断点显式地定位网格上的每个元素。我们能够继承为早期断点设置的位置——这是移动优先”的优势。我们还可以利用网格自动布局。通过保持元素的逻辑顺序，自动布局为我们将项目放到网格上做了很多工作。在本指南的最后一个示例中，我们将创建完全依赖自动布局的布局。

+ +

自动放置的产品列表

+ +

许多布局基本上是一组“卡片”——产品列表、图像库等等。网格可以使创建这些清单变得非常容易，而且无需添加媒体查询就可以响应。在下一个例子中，我将CSS Grid和flexbox布局相结合，以创建一个简单的产品列表布局。

+ +

我的列表的标记是一个无序的项目列表。每个项目都包含一个标题、一些不同高度的文本和对action链接的调用。

+ +
+
<ul class="listing">
+  <li>
+    <h2>Item One</h2>
+    <div class="body"><p>The content of this listing item goes here.</p></div>
+    <div class="cta"><a href="">Call to action!</a></div>
+  </li>
+   <li>
+     <h2>Item Two</h2>
+     <div class="body"><p>The content of this listing item goes here.</p></div>
+     <div class="cta"><a href="">Call to action!</a></div>
+   </li>
+   <li class="wide">
+     <h2>Item Three</h2>
+     <div class="body"><p>The content of this listing item goes here.</p>
+     <p>This one has more text than the other items.</p>
+     <p>Quite a lot more</p>
+     <p>Perhaps we could do something different with it?</p></div>
+     <div class="cta"><a href="">Call to action!</a></div>
+    </li>
+    <li>
+     <h2>Item Four</h2>
+     <div class="body"><p>The content of this listing item goes here.</p></div>
+     <div class="cta"><a href="">Call to action!</a></div>
+    </li>
+     <li>
+     <h2>Item Five</h2>
+     <div class="body"><p>The content of this listing item goes here.</p></div>
+      <div class="cta"><a href="">Call to action!</a></div>
+    </li>
+</ul>
+
+ + + +

我们将创建一个具有灵活数量的灵活列的网格。我希望它们永远不要小于200像素，然后平等地共享任何可用的剩余空间——所以我们总是得到相同宽度的列轨迹。我们使用minmax()函数实现了这一点，该函数是用于轨道大小的重复表示法。

+ +
.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+
+ +

一旦我添加了这个CSS，项目就开始以网格的形式展开。如果我让窗口变小或变宽，列跟踪的数量就会发生变化，而不需要使用媒体查询添加断点并重新定义网格。

+ +

然后，我就可以使用flex touch来整理这些盒子的内部结构。 我将列表项设置为 display: flex 和 flex-direction 设置为 column。 然后，我可以在 .cta 上使用自动边界将这个工具条推到盒子底部。

+ +
.listing li {
+  border: 1px solid #ffe066;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.listing .cta {
+  margin-top: auto;
+  border-top: 1px solid #ffe066;
+  padding: 10px;
+  text-align: center;
+}
+.listing .body {
+  padding: 10px;
+}
+
+ +

这是我使用flexbox而不是grid的一个关键原因，如果我只是在一个维度上调整或发布一些东西，那就是一个flexbox用例。

+ +

{{ EmbedLiveSample('layout_4', '800', '900') }}

+
+ +

这一切现在看起来相当完整，然而我们有时拥有这些卡片，其中包含的内容比其他卡片多得多。让它们跨越两条轨道可能很好，这样它们就不会那么高了。我在较大的项目上有一个wide类，我添加了一个规则{{cssxref("grid-column-end")}}，其值为span 2。现在，当grid遇到这个项目时，它将为它分配两个轨道。在某些断点处，这意味着我们将在网格中得到一个缺口——在这个缺口中没有空间放置一个双轨项目。

+ +

The layout has gaps as there is not space to layout a two track item.

+ +

我可以通过设置{{cssxref("grid-auto-flow")}}: dense 在网格容器上设置稠密，从而使网格填充这些空白。但是，在这样做时要小心，因为它会使项目偏离其逻辑源顺序。您应该只在项目没有设置顺序时才这样做——并且要注意源文件后面的选项卡顺序的问题，而不是重新排序的显示。

+ +
+ + +
.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-auto-flow: dense;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+.listing .wide {
+  grid-column-end: span 2;
+}
+
+ +

{{ EmbedLiveSample('layout_5', '800', '900') }}

+ +

这种技术使用auto-placement一些规则应用于某些物品是非常有用的,并且可以帮助你处理的内容是由CMS例如,输出有重复项,或许可以添加一个类特定的呈现为HTML。

+
+ +

Further exploration

+ +

学习使用网格布局的最佳方法是继续构建我们在这里介绍的示例。选择一些您通常使用选择的框架构建的东西，或者使用浮动构建的东西，看看是否可以使用grid构建它。不要忘记寻找用当前方法无法构建的示例。这可能意味着从杂志或其他非网络资源中获取灵感。网格布局提供了我们以前没有过的可能性，我们不需要绑定到相同的旧布局来使用它。

+ +
    +
  • 有关灵感，请参阅 Layout Labs from Jen Simmons, 她一直在创建基于一系列资源的布局。
    • +
  • 有关其他常见布局模式，请参见 Grid by Example, 这里有许多网格布局的小例子，也有一些较大的UI模式和完整的页面布局。
    • +
+ + diff --git a/files/zh-cn/web/css/css_logical_properties/basic_conceptsjie/index.html b/files/zh-cn/web/css/css_logical_properties/basic_conceptsjie/index.html new file mode 100644 index 0000000000..cfce90ff34 --- /dev/null +++ b/files/zh-cn/web/css/css_logical_properties/basic_conceptsjie/index.html @@ -0,0 +1,71 @@ +--- +title: 逻辑属性的和值的基本概念 +slug: Web/CSS/CSS_Logical_Properties/Basic_conceptsjie +translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts +--- +
{{CSSRef}}
+ +

逻辑属性与值详述中为CSS中许多属性和值引入相对浮动功能。本文介绍了详述，同时对浮动相关的属性和值做出了解释。

+ +

我们为什么需要逻辑属性?

+ +

传统CSS根据屏幕的物理大小定义了 traditionally has sized things according to the physical dimensions of the screen. Therefore we describe boxes as having a {{CSSxRef("width")}} and {{CSSxRef("height")}}, position items from the top and left, float things left, assign borders, margin, and padding to the top, right, bottom, left, etc. The Logical Properties and Values specification defines mappings for these physical values to their logical, or flow relative, counterparts — e.g. start and end as opposed to left and right/top and bottom.

+ +

An example of why these mappings might be needed is as follows. I have a Layout using CSS Grid, the grid container has a width applied and I am using the {{CSSxRef("align-self")}} and {{CSSxRef("justify-self")}} properties to align the items. These properties are flow relative — justify-self: start aligns the item to the start on the inline dimension, align-self: start does the same on the block dimension.

+ +

A grid in a horizontal writing mode

+ +

If I now change the writing mode of this component to vertical-rl using the {{CSSxRef("writing-mode")}} property, the alignment continues to work in the same way. The inline dimension is now running vertically and the block dimension horizontally. The grid doesn't look the same however, as the width assigned to the container is a horizontal measure, a measure tied to the physical and not the logical or flow relative running of the text.

+ +

A grid in vertical writing mode.

+ +

If instead of the width property we use the logical property {{CSSxRef("inline-size")}}, the component now works the same way no matter which writing mode it is displayed using.

+ +

A grid layout in vertical writing mode

+ +

You can try this out in the live example below. Change writing-mode from vertical-rl to horizontal-tb on .box to see how the different properties change the layout.

+ +

{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}

+ +

When working with a site in a writing mode other than a horizontal, top to bottom one, or when using writing modes for creative reasons, being able to relate to the flow of the content makes a lot of sense.

+ +

Block and inline dimensions

+ +

A key concept of working with flow relative properties and values is the two dimensions of block and inline. As we saw above, newer CSS layout methods such as Flexbox and Grid Layout use the concepts of block and inline rather than right and left/top and bottom when aligning items.

+ +

The inline dimension is the dimension along which a line of text runs in the writing mode in use. Therefore, in an English document with the text running horizontally left to right, or an Arabic document with the text running horizontally right to left, the inline dimension is horizontal. Switch to a vertical writing mode (e.g. a Japanese document) and the inline dimension is now vertical, as lines in that writing mode run vertically.

+ +

The block dimension is the other dimension, and the direction in which blocks — such as paragraphs — display one after the other. In English and Arabic these run vertically, whereas in any vertical writing mode these run horizontally.

+ +

The below diagram shows the inline and block directions in a horizontal writing mode:

+ +

diagram showing the inline axis running horizontally, block axis vertically.

+ +

This diagram shows block and inline in a vertical writing mode:

+ +

Diagram showing the block axis running horizontally the inline axis vertically.

+ +

Browser support

+ +

Logical Properties and Values can be thought of as a couple of groups in terms of current browser support. Some of the properties are essentially mappings from the physical versions, for example {{CSSxRef("inline-size")}} for {{CSSxRef("width")}} or {{CSSxRef("margin-inline-start")}} rather than {{CSSxRef("margin-left")}}. These mapped properties are starting to see good browser support, and if you look at the individual pages for the properties in the reference here on MDN you will see that Edge is the only modern browser currently missing these.

+ +

There are then a group of properties which do not have a direct mapping in terms of existing physical properties. These are shorthands made possible by the fact that we can refer to both edges of the block or inline dimension at once. An example would be {{CSSxRef("margin-block")}}, which is a shorthand setting for {{CSSxRef("margin-block-start")}} and {{CSSxRef("margin-block-end")}}. These currently have no browser support.

+ +
+

Note: The CSS Working Group are currently trying to decide what to do about the four-value shorthands for logical properties, for example the equivalents to setting four physical properties at once, like margins with the {{CSSxRef("margin")}} property. We would need some kind of modifier if we were to reuse margin for flow-relative properties. If you would like to read the suggestions or comment on them the relevant GitHub issue is #1282.

+
+ +

Testing for browser support

+ +

You can test for support of logical properties and values using feature queries. For example you could set a {{CSSxRef("width")}}, test for {{CSSxRef("inline-size")}} and, if it is supported, set the width to auto and the inline-size to the original width value.

+ +

{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}

+ +

See also

+ + diff --git a/files/zh-cn/web/css/css_logical_properties/index.html b/files/zh-cn/web/css/css_logical_properties/index.html new file mode 100644 index 0000000000..3fc98c3952 --- /dev/null +++ b/files/zh-cn/web/css/css_logical_properties/index.html @@ -0,0 +1,178 @@ +--- +title: CSS 逻辑属性与值 +slug: Web/CSS/CSS_Logical_Properties +tags: + - CSS + - CSS Logical Properies + - CSS 逻辑属性 + - Reference + - 参考 + - 概览 +translation_of: Web/CSS/CSS_Logical_Properties +--- +
{{CSSRef}}
+ +

CSS 逻辑属性与值是 CSS 的一个模块，其引入的属性与值能做从逻辑角度控制布局，而不是从物理、方向或维度来控制。

+ +

The module also defines logical properties and values for properties previously defined in CSS 2.1. Logical properties define direction‐relative equivalents of their corresponding physical properties.

+ +

block 与 inline

+ +

Logical properties and values use the abstract terms block and inline to describe the direction in which they flow. The physical meaning of these terms depends on the writing mode.

+ +
+
Block dimension
+
The dimension perpendicular to the flow of text within a line, i.e., the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes. For standard English text, it is the vertical dimension.
+
Inline dimension
+
The dimension parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. For standard English text, it is the horizontal dimension.
+
+ +

参考

+ +

大小属性

+ +
+
    +
  • {{CSSxRef("block-size")}}
    • +
  • {{CSSxRef("inline-size")}}
    • +
  • {{CSSxRef("max-block-size")}}
    • +
  • {{CSSxRef("max-inline-size")}}
    • +
  • {{CSSxRef("min-block-size")}}
    • +
  • {{CSSxRef("min-inline-size")}}
    • +
+
+ +

外边距 、边框与内边距属性

+ +
+
    +
  • {{CSSxRef("border-block")}}
    • +
  • {{CSSxRef("border-block-color")}}
    • +
  • {{CSSxRef("border-block-end")}}
    • +
  • {{CSSxRef("border-block-end-color")}}
    • +
  • {{CSSxRef("border-block-end-style")}}
    • +
  • {{CSSxRef("border-block-end-width")}}
    • +
  • {{CSSxRef("border-block-start")}}
    • +
  • {{CSSxRef("border-block-start-color")}}
    • +
  • {{CSSxRef("border-block-start-style")}}
    • +
  • {{CSSxRef("border-block-start-width")}}
    • +
  • {{CSSxRef("border-block-style")}}
    • +
  • {{CSSxRef("border-block-width")}}
    • +
  • {{CSSxRef("border-color")}} (logical {{Experimental_Inline}} keyword)
    • +
  • {{CSSxRef("border-inline")}}
    • +
  • {{CSSxRef("border-inline-color")}}
    • +
  • {{CSSxRef("border-inline-end")}}
    • +
  • {{CSSxRef("border-inline-end-color")}}
    • +
  • {{CSSxRef("border-inline-end-style")}}
    • +
  • {{CSSxRef("border-inline-end-width")}}
    • +
  • {{CSSxRef("border-inline-start")}}
    • +
  • {{CSSxRef("border-inline-start-color")}}
    • +
  • {{CSSxRef("border-inline-start-style")}}
    • +
  • {{CSSxRef("border-inline-start-width")}}
    • +
  • {{CSSxRef("border-inline-style")}}
    • +
  • {{CSSxRef("border-inline-width")}}
    • +
  • {{CSSxRef("border-start-start-radius")}}
    • +
  • {{CSSxRef("border-start-end-radius")}}
    • +
  • {{CSSxRef("border-end-start-radius")}}
    • +
  • {{CSSxRef("border-end-end-radius")}}
    • +
  • {{CSSxRef("border-style")}} (logical {{Experimental_Inline}} keyword)
    • +
  • {{CSSxRef("border-width")}} (logical {{Experimental_Inline}} keyword)
    • +
  • {{CSSxRef("margin")}} (logical {{Experimental_Inline}} keyword)
    • +
  • {{CSSxRef("margin-block")}}
    • +
  • {{CSSxRef("margin-block-end")}}
    • +
  • {{CSSxRef("margin-block-start")}}
    • +
  • {{CSSxRef("margin-inline")}}
    • +
  • {{CSSxRef("margin-inline-end")}}
    • +
  • {{CSSxRef("margin-inline-start")}}
    • +
  • {{CSSxRef("padding")}} (logical {{Experimental_Inline}} keyword)
    • +
  • {{CSSxRef("padding-block")}}
    • +
  • {{CSSxRef("padding-block-end")}}
    • +
  • {{CSSxRef("padding-block-start")}}
    • +
  • {{CSSxRef("padding-inline")}}
    • +
  • {{CSSxRef("padding-inline-end")}}
    • +
  • {{CSSxRef("padding-inline-start")}}
    • +
+
+ +

浮动与定位属性

+ +
+
    +
  • {{CSSxRef("clear")}} (inline-end and inline-start keywords)
    • +
  • {{CSSxRef("float")}} (inline-end and inline-start keywords)
    • +
  • {{CSSxRef("inset")}}
    • +
  • {{CSSxRef("inset-block")}}
    • +
  • {{CSSxRef("inset-block-end")}}
    • +
  • {{CSSxRef("inset-block-start")}}
    • +
  • {{CSSxRef("inset-inline")}}
    • +
  • {{CSSxRef("inset-inline-end")}}
    • +
  • {{CSSxRef("inset-inline-start")}}
    • +
+
+ +

其他属性

+ +
+
    +
  • {{CSSxRef("caption-side")}} (inline-end and inline-start keywords)
    • +
  • {{CSSxRef("overflow-block")}}
    • +
  • {{CSSxRef("overflow-inline")}}
    • +
  • {{CSSxRef("overscroll-behavior-block")}}
    • +
  • {{CSSxRef("overscroll-behavior-inline")}}
    • +
  • {{CSSxRef("resize")}} (block and inline keywords)
    • +
  • {{CSSxRef("text-align")}} (end and start keywords)
    • +
+
+ +

已弃用属性

+ +
+
    +
  • {{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (now {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})
    • +
  • {{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (now {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})
    • +
  • {{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (now {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})
    • +
  • {{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (now {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})
    • +
+
+ +

指南

+ + + +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS Logical Properties")}}{{Spec2("CSS Logical Properties")}}Initial definition.
+ +

浏览器兼容熊

+ +

In general:

+ +
    +
  • Firefox has support for the mapped properties — where there is a direct mapping from the physical to the logical version.
    • +
  • Chrome, from version 69, has support for the mapped properties.
    • +
  • Edge, from version 79, has the same support as Chrome.
    • +
  • Firefox 66 introduces support for two value shorthands, also behind a flag in Chrome.
    • +
  • Internet Explorer has no support.
    • +
+ +

See the individual property pages for full compatibility information.

diff --git a/files/zh-cn/web/css/css_masking/index.html b/files/zh-cn/web/css/css_masking/index.html new file mode 100644 index 0000000000..4a77f79254 --- /dev/null +++ b/files/zh-cn/web/css/css_masking/index.html @@ -0,0 +1,133 @@ +--- +title: CSS Masking +slug: Web/CSS/CSS_Masking +tags: + - CSS Masking +translation_of: Web/CSS/CSS_Masking +--- +
{{CSSRef}}
+ +

CSS Masking 是一个 CSS 模块，它定义了部分或完全隐藏视觉元素部分的方法，包括遮罩和剪裁。

+ +

Reference

+ +

Properties

+ +
+
    +
  • {{cssxref("clip")}} {{deprecated_inline}}
    • +
  • {{cssxref("clip-path")}}
    • +
  • {{cssxref("clip-rule")}}
    • +
  • {{cssxref("mask")}}
    • +
  • {{cssxref("mask-border")}}
    • +
  • {{cssxref("mask-border-mode")}}
    • +
  • {{cssxref("mask-border-outset")}}
    • +
  • {{cssxref("mask-border-repeat")}}
    • +
  • {{cssxref("mask-border-slice")}}
    • +
  • {{cssxref("mask-border-source")}}
    • +
  • {{cssxref("mask-border-width")}}
    • +
  • {{cssxref("mask-clip")}}
    • +
  • {{cssxref("mask-composite")}}
    • +
  • {{cssxref("mask-image")}}
    • +
  • {{cssxref("mask-mode")}}
    • +
  • {{cssxref("mask-origin")}}
    • +
  • {{cssxref("mask-position")}}
    • +
  • {{cssxref("mask-repeat")}}
    • +
  • {{cssxref("mask-size")}}
    • +
  • {{cssxref("mask-type")}}
    • +
+
+ +

Guides

+ +

None.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Masks")}}{{Spec2("CSS Masks")}} 
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support (for SVG){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Support for HTML, for mask and mask-* longhand properties{{CompatUnknown}}{{CompatGeckoDesktop(53.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support (for SVG){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Support for HTML, for mask and mask-* longhand properties{{CompatUnknown}}{{CompatGeckoMobile(53.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/zh-cn/web/css/css_positioning/index.html b/files/zh-cn/web/css/css_positioning/index.html new file mode 100644 index 0000000000..31d27615e2 --- /dev/null +++ b/files/zh-cn/web/css/css_positioning/index.html @@ -0,0 +1,108 @@ +--- +title: CSS Positioning +slug: Web/CSS/CSS_Positioning +translation_of: Web/CSS/CSS_Positioning +--- +

{{CSSRef}}

+ +

CSS Positioning 是一个CSS模块，用来定义如何将元素在页面中进行绝对定位和相对定位。

+ +

参考

+ +

CSS 属性

+ +
+
    +
  • {{cssxref("bottom")}}
    • +
  • {{cssxref("clear")}}
    • +
  • {{cssxref("display")}}
    • +
  • {{cssxref("float")}}
    • +
  • {{cssxref("left")}}
    • +
  • {{cssxref("position")}}
    • +
  • {{cssxref("right")}}
    • +
  • {{cssxref("top")}}
    • +
  • {{cssxref("visibility")}}
    • +
  • {{cssxref("z-index")}}
    • +
+
+ +

向导

+ +
+
理解 CSS z-index
+
通过几个例子来展现上下文叠加的概念以及解释z-ordering是如何工作的.
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{ SpecName('CSS3 Positioning') }}{{ Spec2('CSS3 Positioning') }} 
{{ SpecName('CSS2.1', 'visuren.html') }}{{ Spec2('CSS2.1') }} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
性能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1") }}5.06.01.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1") }}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/zh-cn/web/css/css_properties_reference/index.html b/files/zh-cn/web/css/css_properties_reference/index.html new file mode 100644 index 0000000000..31f0f85a4f --- /dev/null +++ b/files/zh-cn/web/css/css_properties_reference/index.html @@ -0,0 +1,311 @@ +--- +title: CSS属性参考 +slug: Web/CSS/CSS_Properties_Reference +tags: + - CSS +translation_of: Web/CSS/CSS_Properties_Reference +--- +

常见的CSS属性参考

+ +

以下是最常见的CSS属性的基本列表，其中包含通常从JavaScript访问的DOM表示法：

+ +
Note: 此列表不完整。 有关更多CSS属性，请参阅CSS参考和Mozilla CSS扩展。 参考文章还包括有关如何使用所有属性的示例。
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CSSJavaScript
backgroundbackground
background-attachmentbackgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-widthborderTopWidth
border-widthborderWidth
clearclear
clipclip
colorcolor
cursorcursor
displaydisplay
filterfilter
floatcssFloat
fontfont
font-familyfontFamily
font-sizefontSize
font-variantfontVariant
font-weightfontWeight
heightheight
leftleft
letter-spacingletterSpacing
line-heightlineHeight
list-stylelistStyle
list-style-imagelistStyleImage
list-style-positionlistStylePosition
list-style-typelistStyleType
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
overflowoverflow
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
page-break-afterpageBreakAfter
page-break-beforepageBreakBefore
positionposition
stroke-dasharraystrokeDasharray
stroke-dashoffsetstrokeDashoffset
stroke-widthstrokeWidth
text-aligntextAlign
text-decorationtextDecoration
text-indenttextIndent
text-transformtextTransform
toptop
vertical-alignverticalAlign
visibilityvisibility
widthwidth
z-indexzIndex
diff --git a/files/zh-cn/web/css/css_scroll_snap/index.html b/files/zh-cn/web/css/css_scroll_snap/index.html new file mode 100644 index 0000000000..bb45ffc102 --- /dev/null +++ b/files/zh-cn/web/css/css_scroll_snap/index.html @@ -0,0 +1,79 @@ +--- +title: CSS Scroll Snap +slug: Web/CSS/CSS_Scroll_Snap +translation_of: Web/CSS/CSS_Scroll_Snap +--- +
{{CSSRef}}
+ +

CSS 滚动快照是 CSS 的模块，它引入滚动捕捉位置，它强制滚动位置，即 {{Glossary("滚动容器")}}的 {{Glossary("滚动端口")}} 在滚动操作完成后可能结束的滚动位置。

+ +
+

注意：此模块的早期版本称为滚动捕捉点，已被弃用。CSS 滚动快照是当前实现。

+
+ +

参考

+ +

容器上的 CSS 属性

+ +
    +
  • {{cssxref("scroll-snap-type")}}
    • +
  • {{cssxref("scroll-snap-stop")}}
    • +
  • {{cssxref("scroll-padding")}}
    • +
  • {{cssxref("scroll-padding-top")}}
    • +
  • {{cssxref("scroll-padding-right")}}
    • +
  • {{cssxref("scroll-padding-bottom")}}
    • +
  • {{cssxref("scroll-padding-left")}}
    • +
  • {{cssxref("scroll-padding-inline")}}
    • +
  • {{cssxref("scroll-padding-inline-start")}}
    • +
  • {{cssxref("scroll-padding-inline-end")}}
    • +
  • {{cssxref("scroll-padding-block")}}
    • +
  • {{cssxref("scroll-padding-block-start")}}
    • +
  • {{cssxref("scroll-padding-block-end")}}
    • +
+ +

子上的 CSS 属性

+ +
    +
  • {{cssxref("scroll-snap-align")}}
    • +
  • {{cssxref("scroll-margin")}}
    • +
  • {{cssxref("scroll-margin-top")}}
    • +
  • {{cssxref("scroll-margin-right")}}
    • +
  • {{cssxref("scroll-margin-bottom")}}
    • +
  • {{cssxref("scroll-margin-left")}}
    • +
  • {{cssxref("scroll-margin-inline")}}
    • +
  • {{cssxref("scroll-margin-inline-start")}}
    • +
  • {{cssxref("scroll-margin-inline-end")}}
    • +
  • {{cssxref("scroll-margin-block")}}
    • +
  • {{cssxref("scroll-margin-block-start")}}
    • +
  • {{cssxref("scroll-margin-block-end")}}
    • +
+ +

指南

+ + + +

规范

+ + + + + + + + + + + + + + + + +
规范地位评论
{{SpecName("CSS Scroll Snap Points")}}{{Spec2("CSS Scroll Snap Points")}}初始定义
+ +

浏览器兼容性

+ +

The individual property pages detail the browser compatibility situation for Scroll Snap. Note that at the present time Firefox still implements an old version of the specification. Read the guide to browser compatibility for an overview of how to support both the old and new specification. 

diff --git a/files/zh-cn/web/css/css_scrollbars/index.html b/files/zh-cn/web/css/css_scrollbars/index.html new file mode 100644 index 0000000000..0c2c9659f3 --- /dev/null +++ b/files/zh-cn/web/css/css_scrollbars/index.html @@ -0,0 +1,86 @@ +--- +title: CSS Scrollbars +slug: Web/CSS/CSS_Scrollbars +translation_of: Web/CSS/CSS_Scrollbars +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS Scrollbars标准化了由ie5引入的废弃的滚动条颜色属性

+ +

基础例子

+ +

在这个例子里 我们选择使用一个比较细的 滚动轨道为绿色，滚动块为紫色的滚动条

+ +
+
.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-color: rebeccapurple green;
+  scrollbar-width: thin;
+}
+ +

HTML

+ +
<div class="scroller">
+Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
+welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
+Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
+tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
+Dandelion cucumber earthnut pea peanut soko zucchini.
+</div>
+ +

Result

+ +

{{EmbedLiveSample("Example")}}

+
+ +

Reference

+ +

CSS Properties

+ +
+
    +
  • {{CSSxRef("scrollbar-width")}}
    • +
  • {{CSSxRef("scrollbar-color")}}
    • +
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Scrollbars")}}{{Spec2("CSS Scrollbars")}}Initial definition.
+ +

Accessibility concerns

+ +

When you customize scrollbars, consider they have enough contrast and that their hit area is large enough for people who use touch input.

+ + + +

Browser compatibility

+ + + +

scrollbar-width

+ +
{{Compat("css.properties.scrollbar-width")}}
+ +

scrollbar-color

+ +
{{Compat("css.properties.scrollbar-color")}}
diff --git a/files/zh-cn/web/css/css_selectors/comparison_with_xpath/index.html b/files/zh-cn/web/css/css_selectors/comparison_with_xpath/index.html new file mode 100644 index 0000000000..c196e077e6 --- /dev/null +++ b/files/zh-cn/web/css/css_selectors/comparison_with_xpath/index.html @@ -0,0 +1,43 @@ +--- +title: Comparison of CSS Selectors and XPath +slug: Web/CSS/CSS_Selectors/Comparison_with_XPath +translation_of: Web/XPath/Comparison_with_CSS_selectors +--- +
{{CSSRef("Selectors")}}{{QuickLinksWithSubpages("/en-US/docs/Web/XPath")}}{{Draft}}
+ +

本文旨在记录CSS选择器和XPath之间的区别，以便Web开发人员能够更好地为正确的工作选择合适的工具。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
XPath featureCSS equivalent
ancestor, parent or preceding-sibling axis{{CSSxRef(":has",":has()")}} selector {{experimental_inline}}
attribute axisAttribute selectors
child axisChild combinator
descendant axisDescendant combinator
following-sibling axisGeneral sibling combinator or adjacent sibling combinator
self axis{{CSSxRef(":scope")}} or {{CSSxRef(":host")}} selector
diff --git a/files/zh-cn/web/css/css_selectors/index.html b/files/zh-cn/web/css/css_selectors/index.html new file mode 100644 index 0000000000..33963cb0d6 --- /dev/null +++ b/files/zh-cn/web/css/css_selectors/index.html @@ -0,0 +1,136 @@ +--- +title: CSS 选择器 +slug: Web/CSS/CSS_Selectors +tags: + - CSS + - CSS Selector + - CSS 优先级 + - Overview + - Reference + - Selectors + - 参考 + - 直接子代组合器 + - 选择器 +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef("Selectors")}}
+ +

CSS 选择器规定了 CSS 规则会被应用到哪些元素上。

+ +
+

备注：暂时没有能够选择 父元素、父元素的同级元素，或 父元素的同级元素的子元素 的选择器或者组合器。

+
+ +

基本选择器

+ +
+
通用选择器（Universal selector）
+
选择所有元素。（可选）可以将其限制为特定的名称空间或所有名称空间。
+ 语法：* ns|* *|*
+ 例子：* 将匹配文档的所有元素。
+
元素选择器（Type selector）
+
按照给定的节点名称，选择所有匹配的元素。
+ 语法：elementname
+ 例子：input 匹配任何 {{HTMLElement( "input" )}} 元素。
+
类选择器（Class selector）
+
按照给定的 class 属性的值，选择所有匹配的元素。
+ 语法：.classname
+ 例子：.index 匹配任何 class 属性中含有 "index" 类的元素。
+
ID 选择器（ID selector）
+
按照 id 属性选择一个与之匹配的元素。需要注意的是，一个文档中，每个 ID 属性都应当是唯一的。
+ 语法：#idname
+ 例子：#toc 匹配 ID 为 "toc" 的元素。
+
属性选择器（Attribute selector）
+
按照给定的属性，选择所有匹配的元素。
+ 语法：[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ 例子：[autoplay] 选择所有具有 autoplay 属性的元素（不论这个属性的值是什么）。
+
+ +

分组选择器（Grouping selectors）

+ +
+
选择器列表（Selector list）
+
, 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。
+ 语法：A, B
+ 示例：div, span 会同时匹配 {{HTMLElement("span")}} 元素和 {{HTMLElement("div")}} 元素。
+
+ +

组合器（Combinators）

+ +
+
后代组合器（Descendant combinator）
+
 （空格）组合器选择前一个元素的后代节点。
+ 语法：A B
+ 例子：div span 匹配所有位于任意 {{HTMLElement("div")}} 元素之内的 {{HTMLElement("span")}} 元素。
+
直接子代组合器（Child combinator）
+
> 组合器选择前一个元素的直接子代的节点。
+ 语法：A > B
+ 例子：ul > li 匹配直接嵌套在 {{HTMLElement("ul")}} 元素内的所有 {{HTMLElement("li")}} 元素。
+
一般兄弟组合器（General sibling combinator）
+
~ 组合器选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。
+ 语法：A ~ B
+ 例子：p ~ span 匹配同一父元素下，{{HTMLElement("p")}} 元素后的所有 {{HTMLElement("span")}} 元素。
+
紧邻兄弟组合器（Adjacent sibling combinator）
+
+ 组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。
+ 语法：A + B
+ 例子：h2 + p 会匹配所有紧邻在 {{HTMLElement("h2")}} 元素后的 {{HTMLElement("p")}} 元素。
+
列组合器（Column combinator）{{Experimental_Inline}}
+
|| 组合器选择属于某个表格行的节点。
+ 语法： A || B
+ 例子： col || td 会匹配所有 {{HTMLElement("col")}} 作用域内的 {{HTMLElement("td")}} 元素。
+
+ +

伪选择器（Pseudo）

+ +
+
伪类
+
: 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。
+ 例子：a:visited 匹配所有曾被访问过的 {{HTMLElement("a")}} 元素。
+
伪元素
+
:: 伪选择器用于表示无法用 HTML 语义表达的实体。
+ 例子：p::first-line 匹配所有 {{HTMLElement("p")}} 元素的第一行。
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}增加 || 列组合器，网格结构选择器（grid structural selectors），逻辑选择器（logical combinators）, location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}新增 ~ 一般兄弟选择器和 伪类。
+ 规定伪元素选择器使用 :: 前缀。增加 属性 选择器。
{{SpecName("CSS2.1", "selector.html")}}{{Spec2("CSS2.1")}}新增 > 子元素选择器和 + 相邻兄弟选择器。
+ 新增 通用 选择器和 属性 选择器。
{{SpecName("CSS1")}}{{Spec2("CSS1")}}最初定义版本.
+ +

 伪类和伪元素的规范位于各自的页面中。

+ +

参见

+ + diff --git a/files/zh-cn/web/css/css_shapes/from_box_values/index.html b/files/zh-cn/web/css/css_shapes/from_box_values/index.html new file mode 100644 index 0000000000..cda6ab71c7 --- /dev/null +++ b/files/zh-cn/web/css/css_shapes/from_box_values/index.html @@ -0,0 +1,83 @@ +--- +title: Shapes from box values +slug: Web/CSS/CSS_Shapes/From_box_values +translation_of: Web/CSS/CSS_Shapes/From_box_values +--- +
{{CSSRef}}
+ +
A straightforward way to create a shape is to use a value from the CSS Box Model. This article explains how to do this. +

创建形状的一个简单方法是使用CSS框模型中的值。本文将解释如何执行此操作

+ +


+ The box values allowable as a shape value are:
+ 允许作为形状值的框值为：

+
+ +
    +
  • content-box
    • +
  • padding-box
    • +
  • border-box
    • +
  • margin-box
    • +
+ +

The border-radius values are also supported, this means that you can have something in your page with a curved border, and your shape can follow the created shape.
+ 还支持边框半径值，这意味着您的页面中可以有带曲线边框的内容，并且您的形状可以跟随创建的形状。

+ +

CSS box model

+ +

The values listed above correspond to the various parts of the CSS Box Model. A box in CSS has content, padding, border, and margin.
+ 上面列出的值对应于CSS方框模型的各个部分。CSS中的框具有内容、填充、边框和边距。

+ +

The Box Model consists of the margin, border, padding and content boxes.

+ +

By using Box Values for Shapes we can wrap our content around the edges defined by these values. In all of the examples below I am using an element which has padding, a border, and a margin defined in order that you can see the different ways in which content will flow.
+ 通过对形状使用框值，我们可以将内容环绕在这些值定义的边上。在下面的所有示例中，我都使用了一个元素，该元素具有填充、边框和边界，以便您可以看到内容的不同流动方式。

+ +

margin-box

+ +

The margin-box is the shape defined by the outside margin edge and includes the corner radius of the shape, should {{cssxref("border-radius")}} have been used in defining the element.
+ 边界框是由外部边界边定义的形状，包括形状的角半径（如果边界半径已用于定义元素）。

+ +

In the example below, we have a circular purple item which is a {{htmlelement("div")}} with a height, width, and background colour. The border-radius property has been used to create a circle by setting border-radius: 50%. As the element has a margin, you can see that the content is flowing around the circular shape and the margin applied to it.
+ 在下面的示例中，我们有一个圆形的紫色项，它是一个带有高度、宽度和背景色的<div>项。border radius属性已用于通过设置border radius:50%创建圆。由于元素有一个边距，您可以看到内容围绕圆形流动，并且应用于圆形的边距。

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}}

+ +

border-box

+ +

The border-box value is the shape defined by the outside border edge. This shape follows all of the normal border radius shaping rules for the outside of the border. You still have a border, even if you have not used the CSS {{cssxref("border")}} property. In this case it will be the same as padding-box, the shape defined by the outside padding edge.
+ 边框值是由外部边框边缘定义的形状。此形状遵循边框外部的所有常规边框半径形状规则。即使没有使用css border属性，您仍然有边框。在这种情况下，它将与由外部填充边定义的形状padding box相同。

+ +

In the example below you can see how the text now follows the line created by the border. Change the border size and the content follows it.
+ 在下面的示例中，您可以看到文本现在是如何遵循由边框创建的行的。更改边框大小和内容。

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}

+ +

padding-box

+ +

The padding-box value defines the shape enclosed by the outside padding edge. This shape follows all of the normal border radius shaping rules for the inside of the border. If you have no padding then padding-box is the same as content-box.
+ 填充框值定义由外部填充边缘包围的形状。此形状遵循边框内部的所有常规边框半径形状规则。如果没有填充，则填充框与内容框相同。

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}}

+ +

content-box

+ +

The content-box value defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0 or border-radius − border-width − padding. This Means that it is impossible to have a negative value here.
+ 内容框值定义由外部内容边缘包围的形状。此框的每个角半径都是0或border radius-border width-padding中的较大值。这意味着这里不可能有负值。

+ + + +

{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}

+ +

When to use the box values

+ +

Using box values is a simple way to create shapes, however this is by nature only going to work with very simple shapes that can be defined using the well-supported border-radius property. The examples shown above show one such use case. You can create a circular shape using border-radius and then curve text around it.
+ 使用框值是创建形状的一种简单方法，但这本质上只适用于可以使用受良好支持的border radius属性定义的非常简单的形状。上面显示的示例显示了一个这样的用例。可以使用边框半径创建圆形，然后围绕它弯曲文本。

+ +

You can create some interesting effects however with just this simple technique. In my final example of this section, I have floated two elements left and right, giving each a border-radius of 100% in the direction closest to the text.
+ 不过，您可以使用这个简单的技术来创建一些有趣的效果。在本节的最后一个示例中，我将左右浮动两个元素，使每个元素在最接近文本的方向上具有100%的边框半径。

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}

+ +

For more complex shapes you will need to use one of the basic shapes as a value, or define your Shape from an image as covered in other guides in this section.
+ 对于更复杂的形状，您需要使用其中一个基本形状作为值，或者根据本节其他指南中介绍的图像定义形状。

diff --git a/files/zh-cn/web/css/css_shapes/index.html b/files/zh-cn/web/css/css_shapes/index.html new file mode 100644 index 0000000000..08df50f95b --- /dev/null +++ b/files/zh-cn/web/css/css_shapes/index.html @@ -0,0 +1,112 @@ +--- +title: CSS Shapes +slug: Web/CSS/CSS_Shapes +tags: + - CSS Regions + - CSS Shapes + - CSS3 Shapes & CSS3 Regions +translation_of: Web/CSS/CSS_Shapes +--- +
{{CSSRef}}
+ +

CSS Shapes  是一个 CSS 模块，用于定义在 CSS 值中使用的几何形状。

+ +
+

CSS3 Shapes & CSS3 Regions

+ +

https://www.w3.org/TR/css-shapes-1/
+ https://www.w3.org/TR/css-regions-1/

+
+ +

Reference

+ +

Properties

+ +
+
    +
  • {{cssxref("shape-image-threshold")}}
    • +
  • {{cssxref("shape-margin")}}
    • +
  • {{cssxref("shape-outside")}}
    • +
+
+ +

Data types

+ +
+
    +
  • {{cssxref("<basic-shape>")}}
    • +
+
+ +

Guides

+ +

None.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Shapes")}}{{Spec2("CSS Shapes")}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support3754{{CompatNo}}248.0 {{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}8.0 {{property_prefix("-webkit")}}
+
diff --git a/files/zh-cn/web/css/css_shapes/overview_of_css_shapes/index.html b/files/zh-cn/web/css/css_shapes/overview_of_css_shapes/index.html new file mode 100644 index 0000000000..c0e5f2706a --- /dev/null +++ b/files/zh-cn/web/css/css_shapes/overview_of_css_shapes/index.html @@ -0,0 +1,122 @@ +--- +title: CSS的图形（Shape）概览 +slug: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes +translation_of: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes +--- +
{{CSSRef}}
+ +

CSS Shapes Level 1 Specification 在CSS中描述了几何图形的shape（以下叫做形状）。在“Level 1 of the specification”中定义的形状被设计用来绘制浮动的元素。这篇文章提供关于“你能如何绘制这些形状”的概览。 

+ +

举个例子：你在左侧设计一个浮动元素，它可以令文本环绕于该浮动元素的右侧和底部，并且以一种矩形的样式。如果你接着指定一个圆形的样式，文本就会以圆形的样式环绕。.

+ +

事实上，我们有多种方式去创建这类形状，并且我们在指导中将会发现CSS形状是怎么工作的，然后就可以跟着感觉走了。

+ +

Specification定义了什么?

+ +

Specification定义了三种新的权限：

+ +
    +
  • {{cssxref("shape-outside")}} — 允许定义基本形状。
    • +
  • {{cssxref("shape-image-threshold")}} — 设定一个渗出阈值。如果一幅图像被用于定义形状，那么只有在大于等于渗出阈值的部分才会显示，其他部分不会显示出来。.
    • +
  • {{cssxref("shape-margin")}} — 在形状外面加上边框。
    • +
+ +

定义基本的形状

+ +

shape-outside 权限允许定义一个形状，它需要很多参数共同定义而成，这些参数被定义在 {{cssxref("<basic-shape>")}} 数据类型中。下面是一个小例子。

+ +

下面的例子中，左侧有一幅浮动的图像，然后使用shape-outside 权限定义一个circle(50%)属性。结果为文字环绕于图像，并且图像不显示为矩形，而显示为圆形。

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}

+ +

正如这个级别的元素必须被浮动化才能适用<basic-shape> 一样，有时候在创建依赖时就会发生副作用。如果在浏览器中不支持形状，那么用户就会看到文本围绕在矩形的图片周围。有了形状支持之后，视觉效果就增强了。

+ +

基本形状

+ +

circle(50%) 属性是一个基本形状的例子。它定义了四个 <basic-shape> 函数，分别是：

+ +
    +
  • inset()
    • +
  • circle()
    • +
  • ellipse()
    • +
  • polygon()
    • +
+ +

使用 inset() 修饰文本围绕效果时，你还可以增加偏移量 ，否则就会出现文本过于接近目标对象的情况。

+ +

我们已经看到了 circle() 如何创建圆形形状。 ellipse() 则用来创建椭圆形形状。如果还有特殊要求，使用 polygon() 可以创建任意难度的形状。

+ +

在我们的 Guide to Basic Shapes 中，我们探索每一种形状，并且学会如何创建它们。

+ +

含有Box参数的形状

+ +

形状可以加上Box参数，因此你可以创建形状在：

+ +
    +
  • border-box
    • +
  • padding-box
    • +
  • content-box
    • +
  • margin-box
    • +
+ +

当中。

+ +

在下面的例子中你可以改变 border-box 参数，然后查看形状靠近或者远离Box的效果。

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}}

+ +

详见 Shapes From Box Values。

+ +

由Image创建的形状

+ +

有意思的是，可以使用带有Alpha通道的图像来创建（形状的）路径——文本将会围绕不透明的图像部分。这个特性允许文本覆盖图像，有时候可以将文本围绕于一幅不可见的图像，达到一种多边形文本显示的效果。

+ +

需要注意的是，这种方式必须是 CORS compatible 的， 否则 shape-outside 相当于 none ，你将不会得到任何形状。

+ +

在下面的例子中，我们有一幅全透明的图像，使用如下 URL ，并且指定 shape-outside. 属性，创建出一个模糊的形状：一幅气球图像。

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}}

+ +

shape-image-threshold

+ +

shape-image-threshold 属性用于设定图像透明度的阈值并用来创建形状。 如果shape-image-threshold 是 0.0 (缺省值) ，那么图像必须是全透明的。如果是 1.0 那么图像必须是模糊的。 中间的值就代表了区分图像哪部分透明的阈值，以创建形状。

+ +

如果我们使用图像来创建形状，那么你可以看到阈值在起作用。在这么多例子中，如果你改变了阈值大小，形状会随之变化。

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}}

+ +

下面我们进入更深层次的Shapes from Images学习.

+ +

shape-margin 属性

+ +

 {{cssxref("shape-margin")}} 属性在 shape-outside.周围加上边框。它使得文本的Box形状更短了，而且远离了形状本身。

+ +

在下面的例子中，我们在基本形状中加入了 shape-margin 属性。改变边框的宽度可以将文本的距离增大。

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}}

+ +

将创建的元素作为浮动元素

+ +

在上面的例子中，我们使用图像或者可见元素创建形状，意思是你可以在网页上看到这些图形。或者，你也可以只创建图形（而使图形不可见），这就需要一个浮动元素，在浮动元素的基础上就可以使图形不可见。 它可以是插入到文档中的冗余元素，可以是空的{{htmlelement("div")}} 或者 {{htmlelement("span")}} ，但是我们建议用创建好的内容。这就意味着我们可以保留CSS中的样式。

+ +

在下面的例子中，我们在创建好的内容中插入一个宽高为150px的内容。然后，我们可以使用基本基本形状，Box参数甚至是Alpha通道去创建图形，使得文本可以环绕这个图形。

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}}

+ +

和clip-path的关系

+ +

基本图形和Box参数被用来创建图形时，和 {{cssxref("clip-path")}} 参数是等效的。所以如果你想要用图像创建形状的同时剪去部分图像，你可以用如下参数：

+ +

下面的图像是一个蓝色背景的方形图像，使用 shape-outside: ellipse(40% 50%); 和 clip-path: ellipse(40% 50%); 参数去剪去相同的区域，这个区域被定义为形状。

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}}

+ +

形状的开发工具

+ +

和CSS 形状的开发工具类似，Firefox在Firefox DevTools中自带 Shape Path Editor 开发工具。这个工具让你可以查看网页中的任意形状，甚至可以实时显示改变形状之后的效果。如果你的多边形不正确，你可以用 Shapes Editor 调节，然后复制粘贴到CSS中。

+ +

在Firefox 60当中，对于含有 clip-path的属性的元素默认启用Shape Path Editor。你也可以编辑 含有 shape-outside 的属性的元素，但前提是开启layout.css.shape-outside.enabled 首选项。

+ +

未来的CSS形状特性

+ +

形状初始化包括了一个 shape-inside 属性，用来在元素中创建形状。这个属性有可能在非浮动元素中创建形状，被移动到了 level 2 规则中。由于 shape-inside 以前属于Level 1规则，你或许可以在网上查到它的详细信息和属性。

diff --git a/files/zh-cn/web/css/css_table/index.html b/files/zh-cn/web/css/css_table/index.html new file mode 100644 index 0000000000..389970b591 --- /dev/null +++ b/files/zh-cn/web/css/css_table/index.html @@ -0,0 +1,45 @@ +--- +title: CSS Table +slug: Web/CSS/CSS_Table +tags: + - CSS + - 表格 +translation_of: Web/CSS/CSS_Table +--- +
{{CSSRef}}
+ +

CSS Table 是一个定义如何展示表格数据的CSS模块。

+ +

参考

+ +

属性

+ +
+
    +
  • {{cssxref("border-collapse")}}
    • +
  • {{cssxref("border-spacing")}}
    • +
  • {{cssxref("caption-side")}}
    • +
  • {{cssxref("empty-cells")}}
    • +
  • {{cssxref("table-layout")}}
    • +
  • {{cssxref("vertical-align")}}
    • +
+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName("CSS2.1", "tables.html")}}{{Spec2("CSS2.1")}}Initial definition
diff --git a/files/zh-cn/web/css/css_text/index.html b/files/zh-cn/web/css/css_text/index.html new file mode 100644 index 0000000000..c385cc13a6 --- /dev/null +++ b/files/zh-cn/web/css/css_text/index.html @@ -0,0 +1,71 @@ +--- +title: CSS Text +slug: Web/CSS/CSS_Text +tags: + - CSS + - CSS Text + - Overview + - 总览 +translation_of: Web/CSS/CSS_Text +--- +
{{CSSRef}}
+ +

CSS Text 是一个控制文本渲染方式的 CSS 模块，例如换行、对齐、空格处理、大小写。

+ +

参考

+ +

属性

+ +
+
    +
  • {{cssxref("hanging-punctuation")}}
    • +
  • {{cssxref("hyphens")}}
    • +
  • {{cssxref("letter-spacing")}}
    • +
  • {{cssxref("line-break")}}
    • +
  • {{cssxref("overflow-wrap")}}
    • +
  • {{cssxref("tab-size")}}
    • +
  • {{cssxref("text-align")}}
    • +
  • {{cssxref("text-align-last")}}
    • +
  • {{cssxref("text-indent")}}
    • +
  • {{cssxref("text-justify")}}
    • +
  • {{cssxref("text-size-adjust")}}
    • +
  • {{cssxref("text-transform")}}
    • +
  • {{cssxref("white-space")}}
    • +
  • {{cssxref("word-break")}}
    • +
  • {{cssxref("word-spacing")}}
    • +
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('CSS Logical Properties')}}{{Spec2('CSS Logical Properties')}}Updates some properties to be independent of the directionality of the text.
{{SpecName('CSS3 Text')}}{{Spec2('CSS3 Text')}}
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
diff --git a/files/zh-cn/web/css/css_text_decoration/index.html b/files/zh-cn/web/css/css_text_decoration/index.html new file mode 100644 index 0000000000..2d15c44650 --- /dev/null +++ b/files/zh-cn/web/css/css_text_decoration/index.html @@ -0,0 +1,66 @@ +--- +title: CSS 文本装饰 +slug: Web/CSS/CSS_Text_Decoration +translation_of: Web/CSS/CSS_Text_Decoration +--- +
{{CSSRef}}
+ +

CSS 文本装饰 是 CSS 的一个模块，用于定义与文本修饰相关的功能，例如下划线，文本阴影和强调标记。

+ +

参考

+ +

属性

+ +
+
    +
  • {{cssxref("letter-spacing")}}
    • +
  • {{cssxref("text-align")}}
    • +
  • {{cssxref("text-decoration")}}
    • +
  • {{cssxref("text-decoration-color")}}
    • +
  • {{cssxref("text-decoration-line")}}
    • +
  • {{cssxref("text-decoration-style")}}
    • +
  • {{cssxref("text-emphasis")}}
    • +
  • {{cssxref("text-emphasis-color")}}
    • +
  • {{cssxref("text-emphasis-position")}}
    • +
  • {{cssxref("text-emphasis-style")}}
    • +
  • {{cssxref("text-indent")}}
    • +
  • {{cssxref("text-rendering")}}
    • +
  • {{cssxref("text-shadow")}}
    • +
  • {{cssxref("text-transform")}}
    • +
  • {{cssxref("white-space")}}
    • +
  • {{cssxref("word-spacing")}}
    • +
+
+ +

指南

+ +

无。

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Text Decoration')}}{{Spec2('CSS3 Text Decoration')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
diff --git a/files/zh-cn/web/css/css_transforms/index.html b/files/zh-cn/web/css/css_transforms/index.html new file mode 100644 index 0000000000..b9140d9d6d --- /dev/null +++ b/files/zh-cn/web/css/css_transforms/index.html @@ -0,0 +1,48 @@ +--- +title: CSS Transforms +slug: Web/CSS/CSS_Transforms +translation_of: Web/CSS/CSS_Transforms +--- +

CSS Transforms 是一个CSS模块，它定义了如何在二维或三维空间中转换元素的CSS样式。

+ +

引用参考

+ +

CSS属性

+ +
+
    +
  • {{cssxref("backface-visibility")}}
    • +
  • {{cssxref("perspective")}}
    • +
  • {{cssxref("perspective-origin")}}
    • +
  • {{cssxref("transform")}}
    • +
  • {{cssxref("transform-box")}}
    • +
  • {{cssxref("transform-origin")}}
    • +
  • {{cssxref("transform-style")}}
    • +
+
+ +

使用指南

+ +
+
CSS transforms 使用
+
循序渐进的教程，教你如何使用CSS对进行元素变形处理。
+
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transforms') }}{{ Spec2('CSS3 Transforms') }}Initial definition.
diff --git a/files/zh-cn/web/css/css_transforms/using_css_transforms/index.html b/files/zh-cn/web/css/css_transforms/using_css_transforms/index.html new file mode 100644 index 0000000000..667ac11c4e --- /dev/null +++ b/files/zh-cn/web/css/css_transforms/using_css_transforms/index.html @@ -0,0 +1,81 @@ +--- +title: 使用 CSS 变形 +slug: Web/CSS/CSS_Transforms/Using_CSS_transforms +tags: + - 3D + - CSS + - 变换 + - 教程 +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +
{{CSSRef}}
+ +

通过改变坐标空间，CSS transforms 可以在不影响正常文档流的情况下改变作用内容的位置。这篇指南提供了有关使用CSS变形（CSS transforms）的介绍。

+ +

CSS transforms 通过一系列 CSS 属性实现，通过使用这些属性，可以对 HTML 元素进行线性仿射变形（affine linear transformations）。可以进行的变形包括旋转，倾斜，缩放以及位移，这些变形同时适用于平面与三维空间。

+ +
+

只有使用盒模型（Box Model）来定位的元素可以被变换（transformed）。根据一般经验（原文：As a rule of thumb），拥有 display: block 的元素是由盒模型定位的。

+
+ +

CSS transforms 属性

+ +

有两个主要的属性被用来定义 CSS transforms：{{cssxref("transform")}} 和 {{cssxref("transform-origin")}}

+ +
+
{{cssxref("transform-origin")}}
+
指定原点的位置。默认值为元素的中心，可以被移动。很多变形需要用到这个属性，比如旋转，缩放和倾斜，他们都需要一个指定的点作为参数。
+
{{cssxref("transform")}}
+
指定作用在元素上的变形。取值为空格分隔的一系列变形的列表，他们会像被组合操作请求一样被分别执行。
+
+ +

示例

+ +

这是一个未经任何变换的 MDN 标志：

+ +

MDN Logo

+ +

旋转

+ +

这是一个在 iframe 中的 MDN 的标志，从左下角开始，旋转了 90 度。

+ +
<img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+
+ +

{{EmbedLiveSample('Rotating', 'auto', 240) }}

+ +

倾斜与位移

+ +

还是 MDN 的标志，倾斜了 10 度，并从 X 轴位移了 150 个像素。

+ +
<img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+
+ +

{{EmbedLiveSample('Skewing_and_translating') }}

+ +

适用于三维的属性

+ +

在三维空间中使用 CSS 变形会稍微复杂一点。你必须先设置一个透视点（perspective）以便配置 3D 空间，再去定义 2D 元素在空间中的行为。

+ +

透视

+ +

首先需要设置的属性是透视值（{{cssxref("perspective")}}）。透视正是三维空间的立体感的源泉。元素与观察者之间的距离越远，他们就越小。

+ +

{{page("/en-US/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}}

+ +

第二个需要设置的是观察者的位置，可通过 {{cssxref("perspective-origin")}} 属性来设置。默认透视值中，为观察者被置于中心，但是这并不总是适当的。

+ +

{{page("/en-US/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}}

+ +

完成这些之后，你就可以折腾被置于三维空间之中的元素了。

+ +

参见

+ + diff --git a/files/zh-cn/web/css/css_transitions/index.html b/files/zh-cn/web/css/css_transitions/index.html new file mode 100644 index 0000000000..c77f811360 --- /dev/null +++ b/files/zh-cn/web/css/css_transitions/index.html @@ -0,0 +1,118 @@ +--- +title: CSS 变换 +slug: Web/CSS/CSS_Transitions +tags: + - CSS + - CSS 变换 + - 参考 + - 实验功能 + - 概述 +translation_of: Web/CSS/CSS_Transitions +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

CSS Transitions 是一个 CSS 模块，定义了如何创建一个平滑地变换 CSS 属性值的方法。它不仅允许创建变换方法，同时也允许通过定时函数来控制变换方法。

+ +

参考

+ +

CSS 属性

+ +
+
    +
  • {{cssxref("transition")}}
    • +
  • {{cssxref("transition-delay")}}
    • +
  • {{cssxref("transition-duration")}}
    • +
  • {{cssxref("transition-property")}}
    • +
  • {{cssxref("transition-timing-function")}}
    • +
+
+ +

向导

+ +
+
使用 CSS 变换
+
本教程将手把手展现如何通过 CSS 创建一个平滑的变换方法，这篇文章描述了每个相关的 CSS 属性是如何互相影响的。
+
+ +

文档

+ + + + + + + + + + + + + + + + +
文档状态注释
{{ SpecName('CSS3 Transitions') }}{{ Spec2('CSS3 Transitions') }}源定义文件。
+ +

浏览器兼容

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
兼容版本1.0 {{ property_prefix("-webkit") }}
+ 26.0		{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		10.011.6 {{ property_prefix("-o") }}
+ 12.10 #		3.0 {{ property_prefix("-webkit") }}
+ 6.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
兼容版本2.1 {{ property_prefix("-webkit") }}{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}10.0 {{ property_prefix("-o") }}
+ 12.10 #		3.2 {{ property_prefix("-webkit") }}
+
+ +

 

+ +

参见

+ +
    +
  • 关于 CSS 变换，CSS 动画 可以通过独立的属性值的改变来触发动画。
    • +
diff --git a/files/zh-cn/web/css/css_transitions/using_css_transitions/index.html b/files/zh-cn/web/css/css_transitions/using_css_transitions/index.html new file mode 100644 index 0000000000..9cc37073b1 --- /dev/null +++ b/files/zh-cn/web/css/css_transitions/using_css_transitions/index.html @@ -0,0 +1,1133 @@ +--- +title: 使用 CSS transitions +slug: Web/CSS/CSS_Transitions/Using_CSS_transitions +tags: + - CSS + - CSS Transitions + - Using CSS transitions + - 教程 + - 过渡 + - 高级 +translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions +--- +

{{CSSRef}} {{SeeCompattable}}

+ +

CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。

+ +

通常将两个状态之间的过渡称为隐式过渡（implicit transitions），因为开始与结束之间的状态由浏览器决定。

+ +

A CSS transition tells the browsder to draw the intermediate states between the initial and final states, showing the user a smooth transitions.

+ +

CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属性)，何时开始 (设置 delay），持续多久 (设置 duration) 以及如何动画 (定义timing function，比如匀速地或先快后慢)。

+ +
Note: transition 可以不用厂商前缀，不过鉴于标准刚刚稳定，对于基于 Webkit的浏览器仍然需要厂商前缀。如果想兼容旧版本的浏览器那么也需要厂商前缀（例如Firefox 15 及之前版本, Opera 12 及之前版本)。详情见本页底部的兼容性表格。
+ +

哪些 CSS 属性可以动画?

+ +

网页制作者可以定义哪个属性以哪种方式动画，这样能制作出复杂的过渡。因为有些属性动画无意义，所以 可动画属性列表 是一个有限集合。

+ +
Note: 可动画的属性集将有变动，开发者应关注。
+ +

auto 值常常较复杂，规范指出不要在它上动画。一些用户代理，比如基于 Gecko 的，遵循这点；一些，比如基于 WebKit的，没有这么严格限制。在 auto 上动画结果可能不可预期，这取决于浏览器及其版本，应当避免使用。

+ +

同时应当留意这种情形，在插入元素（如 .appendChild()）或改变属性 display: none 后立即使用过渡, 元素将视为没有开始状态，始终处于结束状态。简单的解决办法，改变属性前用 window.setTimeout() 延迟几毫秒。

+ +

多个属性一起动画示例

+ +

HTML 内容

+ +
<body>
+    <p>盒子的多个属性一起动画: width, height, background-color, transform. 将光标悬停在盒子上查看动画。</p>
+    <div class="box"></div>
+</body>
+ +

CSS 内容

+ +
.box {
+    border-style: solid;
+    border-width: 1px;
+    display: block;
+    width: 100px;
+    height: 100px;
+    background-color: #0000FF;
+    -webkit-transition:width 2s, height 2s,
+        background-color 2s, -webkit-transform 2s;
+    transition:width 2s, height 2s, background-color 2s, transform 2s;
+}
+.box:hover {
+    background-color: #FFCCCC;
+    width:200px;
+    height:200px;
+    -webkit-transform:rotate(180deg);
+    transform:rotate(180deg);
+}
+ +

{{ EmbedLiveSample('多个属性一起动画示例', 600, 300) }}

+ +

定义过渡

+ +

CSS 过渡 由简写属性 {{cssxref("transition")}} 定义是最好的方式，可以避免属性值列表长度不一，节省调试时间。

+ +

也可以用下面子属性来控制过渡的各部分：

+ +

(注意下面示例中过渡无限循环是为了说明例子，过渡只是从开始到结束变化，如果需要循环，查看 animation 。)

+ +
+
{{ cssxref("transition-property") }}
+
指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。
+
{{ cssxref("transition-duration") }}
+
指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长。 +
+
+

transition-duration: 0.5s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_0_5s",275,150)}}
+
+ +
+

transition-duration: 1s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_1s",275,150)}}
+
+ +
+

transition-duration: 2s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_2s",275,150)}}
+
+ +
+

transition-duration: 4s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_4s",275,150)}}
+
+
+
+
{{ cssxref("transition-timing-function") }}
+
指定一个函数，定义属性值怎么变化。缓动函数 Timing functions 定义属性如何计算。多数 timing functions 由四点定义一个 bezier 曲线。也可以从 Easing Functions Cheat Sheet 选择缓动效果。
+
+
+
+

transition-timing-function: ease

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_ease",275,150)}}
+
+ +
+

transition-timing-function: linear

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_linear",275,150)}}
+
+ +
+

transition-timing-function: step-end

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_stepend",275,150)}}
+
+ +
+

transition-timing-function: steps(4, end)

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_step4end",275,150)}}
+
+
+
+
{{ cssxref("transition-delay") }}
+
指定延迟，即属性开始变化时与过渡开始发生时之间的时长。
+
+
+
+

transition-delay: 0.5s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_0_5s",275,150)}}
+
+ +
+

transition-delay: 1s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_1s",275,150)}}
+
+ +
+

transition-delay: 2s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_2s",275,150)}}
+
+ +
+

transition-delay: 4s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_4s",275,150)}}
+
+
+
+
+ +

简写语法：

+ +
div {
+    transition: <property> <duration> <timing-function> <delay>;
+}
+ +

检测过渡是否完成

+ +

当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd. 详情查看页面底部的兼容性表格。 transitionend 事件提供两个属性:

+ +
+
propertyName
+
字符串，指示已完成过渡的属性。
+
elapsedTime
+
浮点数，指示当触发这个事件时过渡已运行的时间（秒）。这个值不受 {{ cssxref("transition-delay") }} 影响。
+
+ +

照例可以用  {{ domxref("element.addEventListener()") }} 方法来监听这个事件：

+ +
el.addEventListener("transitionend", updateTransition, true);
+
+ +
Note: 如果取消了过渡则不会触发 transitionend 事件，因为在过渡完成前动画的属性值改变了。
+ +

当属性值列表长度不一致时

+ +

以 {{ cssxref("transition-property") }} 的值列表长度为标准，如果某个属性值列表长度短于它的，则重复其值以长度一致， 例如:

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+
+ +

将按下面这样处理:

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}
+ +

类似地，如果某个属性的值列表长于 {{ cssxref("transition-property") }} 的，将被截短。 例如:

+ +
div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s, 2s, 1s;
+}
+ +

将按下面这样处理:

+ +
div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}
+ +

简单例子

+ +

这个例子实现这样的效果：4s 过渡改变字体大小，2s 延迟——在元素上鼠标悬停时与开始动画效果之间：

+ +
#delay1 {
+  position: relative;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 14px;
+}
+
+#delay1:hover {
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 36px;
+}
+
+ +

高亮菜单过渡效果

+ +

CSS 的一个常用地方是当鼠标悬停在菜单上时高亮此菜单，使用 transition 效果更佳。

+ +

HTML 内容

+ +
<div class="sidebar">
+  <p><a class="menuButton" href="home">Home</a></p>
+  <p><a class="menuButton" href="about">About</a></p>
+  <p><a class="menuButton" href="contact">Contact Us</a></p>
+  <p><a class="menuButton" href="links">Links</a></p>
+</div>
+ +

CSS 内容

+ +
.menuButton {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  text-align: left;
+  background-color: grey;
+  left: 5px;
+  top: 5px;
+  height: 26px;
+  color: white;
+  border-color: black;
+  font-family: sans-serif;
+  font-size: 20px;
+  text-decoration: none;
+  box-shadow: 2px 2px 1px black;
+  padding: 2px 4px;
+  border: solid 1px black;
+}
+
+.menuButton:hover {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  background-color:white;
+  color:black;
+  box-shadow: 2px 2px 1px black;
+}
+
+ +

{{ EmbedLiveSample('高亮菜单过渡效果') }}

+ +

这个 CSS 设置了菜单的外观，在{{ cssxref(":hover") }}时，菜单里的元素的文字、颜色及背景色都发生了变化。

+ +

transition 让 JavaScript 效果更平滑

+ +

transition 是非常好的工具，可以让 JavaScript 效果平滑而不用修改 JavaScript。 看下面例子。

+ +
<p>随便点击某处来移动球</p>
+<div id="foo"></div>
+
+ +

使用 JavaScript 将球移动到一个位置 ：

+ +
var f = document.getElementById('foo');
+document.addEventListener('click', function(ev){
+    f.style.left = (ev.clientX-25)+'px';
+    f.style.top = (ev.clientY-25)+'px';
+},false);
+
+ +

使用CSS 来平滑移动，只用简单地添加一个过渡 :

+ +
p {
+  padding-left: 60px;
+}
+
+#foo {
+  border-radius: 50px;
+  width: 50px;
+  height: 50px;
+  background: #c00;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition:  all 1s;
+}
+
+ +

演示： http://jsfiddle.net/RwtHn/5/

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transitions', '', '') }}{{ Spec2('CSS3 Transitions') }}Initial specification.
+ +

浏览器兼容性

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0 {{property_prefix("-webkit")}}
+ 26.0		{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1010.5 {{property_prefix("-o")}}
+ 12.10		3.2 {{property_prefix("-webkit")}}
transitionend event1.0[1]
+ 26.0		{{CompatGeckoDesktop("2.0")}}1010.5[2]
+ 12
+ 12.10		3.2[1]
+ 6.0
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		1010 {{property_prefix("-o")}}
+ 12.10		3.2
transitionend event2.1[1]{{CompatGeckoMobile("2.0")}}1010[2]
+ 12
+ 12.10		3.2[1]
+
+ +

另见

+ + diff --git a/files/zh-cn/web/css/css_types/index.html b/files/zh-cn/web/css/css_types/index.html new file mode 100644 index 0000000000..d660abe57b --- /dev/null +++ b/files/zh-cn/web/css/css_types/index.html @@ -0,0 +1,66 @@ +--- +title: CSS 基本数据类型 +slug: Web/CSS/CSS_Types +tags: + - CSS + - CSS Data Type + - Overview + - Reference +translation_of: Web/CSS/CSS_Types +--- +
{{ CssRef }}
+ +

CSS 基本数据类型是 组件值类型 component value type 的一种。用于定义 CSS属性和函数可以接受的变量（关键字和单位）的种类。

+ +

数据类型由放置在不等式符号 "<" 和 ">" 之间的关键字表示:

+ +

 

+ +

Reference

+ +
    +
  • {{cssxref("<angle>")}}
    • +
  • {{cssxref("<basic-shape>")}}
    • +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("<color>")}}
    • +
  • {{cssxref("<custom-ident>")}}
    • +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("<flex>")}}
    • +
  • {{cssxref("<frequency>")}}
    • +
  • {{cssxref("<gradient>")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("<integer>")}}
    • +
  • {{cssxref("<length>")}}
    • +
  • {{cssxref("<number>")}}
    • +
  • {{cssxref("<percentage>")}}
    • +
  • {{cssxref("<position>")}}
    • +
  • {{cssxref("<ratio>")}}
    • +
  • {{cssxref("<resolution>")}}
    • +
  • {{cssxref("<shape-box>")}}
    • +
  • {{cssxref("<single-transition-timing-function>")}}
    • +
  • {{cssxref("<string>")}}
    • +
  • {{cssxref("<time>")}}
    • +
  • {{cssxref("<transform-function>")}}
    • +
  • {{cssxref("<url>")}}
    • +
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}Initial definition.
+ +

 

diff --git a/files/zh-cn/web/css/css_values_and_units/index.html b/files/zh-cn/web/css/css_values_and_units/index.html new file mode 100644 index 0000000000..413e3a740c --- /dev/null +++ b/files/zh-cn/web/css/css_values_and_units/index.html @@ -0,0 +1,497 @@ +--- +title: CSS values and units +slug: Web/CSS/CSS_Values_and_Units +translation_of: Web/CSS/CSS_Values_and_Units +--- +
{{CSSRef}}
+ +

所有的 CSS 声明都包括一个 属性 / 值 对。由于属性不同，对应的值可能是一个单个整数或关键字，也可能是一串包含或不包含计数单位的数字和关键字的集合。CSS 中属性接受一个共同的数据类型（属性的值和对应的单位）。 下面是大多数这些数据类型的概览。想要获知每一种数据类型的更详细信息，请分别查看它们的链接。

+ +

文本数据类型

+ +
    +
  • {{cssxref("<custom-ident>")}}
    • +
  • 作为 <ident> 预定义的关键字
    • +
  • {{cssxref("<string>")}}
    • +
  • {{cssxref("<url>")}}
    • +
+ +

文本数据类型要么是 <string>，要么是一系列字符的合集，或者是 <ident> —— 一个实质上是不带引号的字符串的"CSS 标识符"。一个 <string> 必须被单引号或者双引号所包围。CSS 标识符，在标准中所列出的 <ident> 或者 <custom-ident> 则必须不带引号。

+ +

在 CSS 标准中，属性的值可以由 Web 开发者指定，例如关键帧动画（keyframe animations），字体的名称（font-family names），或者是被列为 {{cssxref("<custom-ident>")}} 和 / 或 {{cssxref("<string>")}} 的栅格区域（grid-areas）。

+ +

当允许使用带引号或者不带引号的两种用户定义的文本属性值时，标准列出为 <custom-ident> | <string>，也就是说引号是可选的。例如在指定动画的名称时：

+ +
@keyframe validIdent {
+  /* keyframes go here */
+}
+@keyframe 'validString' {
+  /* keyframes go here */
+}
+ +

有些文本属性值不允许被引号包围。例如， {{cssxref("grid-area")}} 属性对应的值可以是<custom-ident>，所以假设有一个栅格区域名为 content ，我们必须不带引号地使用：

+ +
.item {
+  grid-area: content;
+}
+
+ +

相比之下，另一种数据类型是 {{cssxref("<string>")}}，例如 {{cssxref("content")}} 属性的值则必须被引号包围：

+ +
.item::after {
+    content: "This is my content.";
+}
+
+ +

大多数时候你可以随心所欲地创建任何名称作为标识符，甚至包括使用 emoji 表情。然而标识符不能是 none，unset，initial， 或者 inherit，以两条短横线开头。并且，你也不可以使用任何已经预定义的 CSS 关键字。查看 {{cssxref("<custom-ident>")}} 和 {{cssxref("<string>")}} 页面了解更多信息。

+ +

预定义的关键值

+ +

预定义的关键值是由 CSS 标准为属性定义的文本值。这些关键字也属于 CSS 标识符，因此在使用时无需用引号包围。

+ +

当在 CSS 标准或者 MDN 属性页面中查看某个 CSS 属性时，该属性所有允许的取值都会以下面表格的形式列出。下面的值是 {{cssxref("float")}} 属性可以取的预定义值：

+ +
left | right | none | inline-start | inline-end
+ +

这些值在使用时不需要引号：

+ +
.box {
+    float: left;
+}
+
+ +

CSS 全局范围内的值

+ +

预定义的关键值往往是针对某一个属性的。作为补充，所有 CSS 属性都可以接受 CSS 全局范围内的值：{{cssxref("initial")}}，{{cssxref("inherit")}} 和 {{cssxref("unset")}}。这些全局范围的值往往指定了一种默认的行为。

+ +

initial指定了当前值作为属性的初始值。inherit关键字则指定当前元素的属性值基于父元素进行计算，即继承。

+ +

unset关键字的作用是inherit或initial中的一者，取决于某个 CSS 属性是否可以自父元素继承。

+ +

{{cssxref("revert")}} 在 Cascade Level 4 标准中被引入，但这一属性值还没有较好的浏览器支持现状。

+ +

URLs

+ +

{{cssxref("<url>")}} 类型使用一个函数符号，接收一个<string>类型的URL。这个URL可以是绝对地址或者相对地址。例如，如果你想要设置一张背景图片，那么你可以采用如下两种做法：

+ +
.box {
+  background-image: url("images/my-background.png");
+}
+
+.box {
+  background-image: url("https://www.exammple.com/images/my-background.png");
+}
+
+ +

url()的参数可以也可以不使用引号。如果使用引号包围了URL，那么它会被解析为一个<url-token>，包含对某些字符的额外转义。查看 {{cssxref("<url>")}} 以获取更多信息。

+ +

数值数据类型

+ +
    +
  • {{cssxref("<integer>")}}
    • +
  • {{cssxref("<number>")}}
    • +
  • {{cssxref("<dimension>")}}
    • +
  • {{cssxref("<percentage>")}}
    • +
+ +

整数

+ +

一个整数包含 0 到 9的一个或多个十进制数字，例如 1024 或 -55。一个整数可能额外包含 + 或 - 前缀，在正负号和数值之间没有任何空格。

+ +

数值

+ +

{{cssxref("<number>")}} 表示一个真正的数，有可能又或者没有小数点和小数部分。例如 0.255，128 或 -1.2。数值也可能包含前缀 + 或 - 标识正负。

+ +

尺寸

+ +

{{cssxref("<dimension>")}} 是一个包含单位的 <number>，例如 45deg，100ms，或者 10px。单位是大小写敏感的，且数值和单位之间不允许有任何的空格或其他字符。例如 1 cm 不是一个合法的值。

+ +

CSS 使用尺寸来指定：

+ +
    +
  • {{cssxref("<length>")}} （距离单位）
    • +
  • {{cssxref("<angle>")}}
    • +
  • {{cssxref("<time>")}}
    • +
  • {{cssxref("<frequency>")}}
    • +
  • {{cssxref("<resolution>")}}
    • +
+ +

这些都将在下面的部分里一一介绍。

+ +

距离单位

+ +

一个距离单位，或这也称为长度（length），允许作为属性的值。它被描述为 {{cssxref("<length>")}} 类型。CSS中有两种长度：相对和绝对。

+ +

相对长度单位基于其它元素的长度。例如 em 基于该元素的字号大小，vh 则与设备视口的高度有关。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

相对长度单位

+
单位基于...
em元素的字号
ex字体的X字高（x-height）
cap字体中大写字母的标称高度
chAverage character advance of a narrow glyph in the element’s font, as represented by the “0” (ZERO, U+0030) glyph.
icAverage character advance of a full width glyph in the element’s font, as represented by the “水” (CJK water ideograph, U+6C34) glyph.
rem根元素的字体大小。
lh元素的行高。
rlh根元素的行高。
vw1% of viewport's width.
vh1% of viewport's height.
vi1% of viewport's size in the root element's inline axis.
vb1% of viewport's size in the root element's block axis.
vmin1% of viewport's smaller dimension.
vmax1% of viewport's larger dimension.
+ +

Absolute length units are fixed to a physical length: either an inch or a centimeter. Many of these units are therefore more useful when the output is a fixed size media, such as print. For example, mm is a physical millimeter, 1/10th of a centimeter.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Absolute length units

+
UnitNameEquivalent to
cmCentimeters1cm = 96px/2.54
mmMillimeters1mm = 1/10th of 1cm
QQuarter-millimeters1Q = 1/40th of 1cm
inInches1in = 2.54cm = 96px
pcPicas1pc = 1/16th of 1in
ptPoints1pt = 1/72th of 1in
pxPixels1px = 1/96th of 1in
+ +

When including a length value, if the length is 0, the unit identifier is not required. Otherwise, the unit identifier is required, is case insensitive, and must come immediately after the numeric part of the value, with no space in-between.

+ +

Angle units

+ +

Angle values are represented by the type {{cssxref("<angle>")}} and accept the following values:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitNameDescription
degDegreesThere are 360 degrees in a full circle.
gradGradiansThere are 400 gradians in a full circle.
radRadiansThere are 2π radians in a full circle.
turnTurnsThere is 1 turn in a full circle.
+ +

Time units

+ +

Time values are represented by the type {{cssxref("<time>")}}. When including a time value, the unit identifier -- the s or ms -- is required. It accepts the following values.

+ + + + + + + + + + + + + + + + + + + + + +
UnitNameDescription
sSeconds
msMillisecondsThere are 1,000 milliseconds in a second.
+ +

Frequency units

+ +

Frequency values are represented by the type {{cssxref("<frequency>")}}. It accepts the following values.

+ + + + + + + + + + + + + + + + + + + + + +
UnitNameDescription
HzHertzRepresents the number of occurrences per second.
kHzKiloHertzA kiloHertz is 1000 Hertz.
+ +

1Hz, which can also be written as 1hz or 1HZ, is one cycle per second.

+ +

Resolution unit

+ +

Resolution units are represented by the type {{cssxref("<resolution>")}}. They represent the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a CSS inch, centimeter, or pixel. It accepts the following values:

+ + + + + + + + + + + + + + + + + + + + + + +
UnitDescription
dpiDots per inch.
dpcmDots per centimetre.
dppx, xDots per px unit.
+ +

Percentages

+ +

A {{cssxref("<percentage>")}} is a type that represents a fraction of some other value.

+ +

Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property of the same element, the value of a property of an ancestor element, a measurement of a containing block, or something else.

+ +

As an example, if you specify the {{cssxref("width")}} of a box as a percentage, it refers to the percentage of the box's parent's computed width:

+ +
.box {
+  width: 50%;
+}
+ +

Mixing percentages and dimensions

+ +

Some properties accept a dimension that could be either one of two types, for example a <length> or a <percentage>. In this case the allowed value is detailed in the specification as a combination unit, e.g. {{cssxref("<length-percentage>")}}. Other possible combinations are as follows:

+ +
    +
  • {{cssxref("<frequency-percentage>")}}
    • +
  • {{cssxref("<angle-percentage>")}}
    • +
  • {{cssxref("<time-percentage>")}}
    • +
+ +

Special data types (defined in other specs)

+ +
    +
  • {{cssxref("<color>")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("<position>")}}
    • +
+ +

Color

+ +

The {{cssxref("<color>")}} value specifies the color of an element feature (e.g. it's background color), and is defined in the CSS Color Module.

+ +

Image

+ +

The {{cssxref("<image>")}} value specifies all the different types of image that can be used in CSS, and is defined in the CSS Image Values and Replaced Content Module.

+ +

Position

+ +

The {{cssxref("<position>")}} type defines 2D positioning of an object inside a positioning area, for example a background image inside a container. This type is interpreted as a  {{cssxref("background-position")}} and therefore specified in the CSS Backgrounds and Borders specification.

+ +

Functional notation

+ +
    +
  • {{cssxref("calc()")}}
    • +
  • {{cssxref("min", "min()")}}
    • +
  • {{cssxref("max", "max()")}}
    • +
  • {{cssxref("clamp", "clamp()")}}
    • +
  • {{cssxref("toggle", "toggle()")}}
    • +
  • {{cssxref("attr", "attr()")}}
    • +
+ +

Functional notation is a type of value that can represent more complex types or invoke special processing by CSS. The syntax starts with the name of the function immediately followed by a left parenthesis ( followed by the argument(s) to the notation followed by a right parenthesis ). Functions can take multiple arguments, which are formatted similarly to a CSS property value.

+ +

White space is allowed, but optional inside the parentheses. (But see notes regarding whitespace within pages for min(), max() and clamp() functions.)

+ +

Some legacy functional notations such as rgba() use commas, but generally commas are only used to separate items in a list. If a comma is used to separate arguments, white space is optional before and after the comma.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Values")}}{{Spec2("CSS4 Values")}}Adds the vi, vb, ic, cap, lh and rlh units.
+ Adds the min(), max() and clamp() functional notation
+ Adds toggle()
{{SpecName("CSS3 Values")}}{{Spec2("CSS3 Values")}}Adds calc(), ch, rem, vw, vw, vmin, vmax, Q
{{SpecName("CSS4 Colors")}}{{Spec2("CSS4 Colors")}}Adds commaless syntaxes for the rgb(), rgba(), hsl(), and hsla() functions. Allows alpha values in rgb() and hsl(), turning rgba() and hsla() into (deprecated) aliases for them.
+ Adds color keyword rebeccapurple.
+ Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.
+ Adds hwb(), device-cmyk(), and color() functions.
{{SpecName("CSS3 Colors")}}{{Spec2("CSS3 Colors")}}Deprecates system-colors. Adds SVG colors. Adds the rgba(), hsl(), and hsla() functions.
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}} +

Adds element(), image(), image-set(), conic-gradient()

+
{{SpecName("CSS3 Images")}}{{Spec2("CSS3 Images")}}Initial definition of image.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition.
+ +

See also

+ + + +
+
+
diff --git a/files/zh-cn/web/css/css_writing_modes/index.html b/files/zh-cn/web/css/css_writing_modes/index.html new file mode 100644 index 0000000000..3cd44e89be --- /dev/null +++ b/files/zh-cn/web/css/css_writing_modes/index.html @@ -0,0 +1,53 @@ +--- +title: CSS Writing Modes CSS写入模式 +slug: Web/CSS/CSS_Writing_Modes +translation_of: Web/CSS/CSS_Writing_Modes +--- +
{{CSSRef}}
+ +

CSS Writing Modes is a CSS module that defines various international writing modes, such as left-to-right (e.g. used by Latin and Indic scripts), right-to-left (e.g. used by Hebrew or Arabic scripts), bidirectional (used when mixing left-to-right and right-to-left scripts) and vertical (e.g. used by some Asian scripts).
+ CSS书写模式是一个CSS模块，它定义了各种国际书写模式，例如从左到右（例如拉丁和印度语脚本使用）、从右到左（例如希伯来语或阿拉伯语脚本使用）、双向（当混合从左到右和从右到左的脚本时使用）和垂直（例如使用B你的一些亚洲剧本）。

+ +

Reference 参考

+ +

Properties

+ +
+
    +
  • {{cssxref("direction")}}
    • +
  • {{cssxref("glyph-orientation-horizontal")}}
    • +
  • {{cssxref("text-combine-upright")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
  • {{cssxref("unicode-bidi")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
+
+ +

Specifications 规格

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Writing Modes')}}{{Spec2('CSS3 Writing Modes')}}
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
diff --git "a/files/zh-cn/web/css/css_\345\210\206\347\211\207/index.html" "b/files/zh-cn/web/css/css_\345\210\206\347\211\207/index.html" new file mode 100644 index 0000000000..5b0d8e7a13 --- /dev/null +++ "b/files/zh-cn/web/css/css_\345\210\206\347\211\207/index.html" @@ -0,0 +1,46 @@ +--- +title: CSS分片 +slug: Web/CSS/CSS_分片 +tags: + - CSS + - CSS分片 + - 参考 +translation_of: Web/CSS/CSS_Fragmentation +--- +
{{cssref}}
+ +

CSS Fragmentation是CSS的模块，它定义了内容在跨多个页面，区域或列中被分割（分段）时如何显示。

+ +

当一个内联框包装成多行时会发生碎片。当一个块跨越一个列布局容器内的多个列，或者在打印时跨越一个分页符时，也会发生这种情况。元素的每个渲染片段称为一个片段。

+ +

参考

+ +
+
    +
  • {{cssxref("box-decoration-break")}}
    • +
  • {{cssxref("break-after")}}
    • +
  • {{cssxref("break-before")}}
    • +
  • {{cssxref("break-inside")}}
    • +
  • {{cssxref("orphans")}}
    • +
  • {{cssxref("widows")}}
    • +
+
+ +

规格

+ + + + + + + + + + + + + + + + +
规格状态评论
{{SpecName('CSS3 Fragmentation')}}{{Spec2('CSS3 Fragmentation')}}初始定义。
diff --git a/files/zh-cn/web/css/cssom_view/index.html b/files/zh-cn/web/css/cssom_view/index.html new file mode 100644 index 0000000000..6e2aa61e50 --- /dev/null +++ b/files/zh-cn/web/css/cssom_view/index.html @@ -0,0 +1,99 @@ +--- +title: CSSOM View +slug: Web/CSS/CSSOM_View +tags: + - CSS + - CSSOM View + - 参考 + - 概述 + - 试验性的 +translation_of: Web/CSS/CSSOM_View +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSSOM视图是一个模块,允许操作文档的可视化视图,尤其是其滚动行为。

+ +

参考

+ +

属性

+ +
+
    +
  • {{cssxref("scroll-behavior")}}
    • +
+
+ +

指南

+ +

None.

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态评论
{{SpecName('CSSOM View')}}{{Spec2('CSSOM View')}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
功能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本支持{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
功能AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本支持{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git "a/files/zh-cn/web/css/cssom_view/\345\235\220\346\240\207\347\263\273/index.html" "b/files/zh-cn/web/css/cssom_view/\345\235\220\346\240\207\347\263\273/index.html" new file mode 100644 index 0000000000..d6ea967a43 --- /dev/null +++ "b/files/zh-cn/web/css/cssom_view/\345\235\220\346\240\207\347\263\273/index.html" @@ -0,0 +1,178 @@ +--- +title: 坐标系 +slug: Web/CSS/CSSOM_View/坐标系 +translation_of: Web/CSS/CSSOM_View/Coordinate_systems +--- +
{{cssref}}
+ +

当我们需要在图形上指定一点的坐标{{interwiki("wikipedia", "algebra")}})，这个坐标需要先对于某一个固定点. 这个固定点我们称为原点{{interwiki("wikipedia", "Origin_(mathematics)", "origin")}}. 这个指定点的坐标即为包含在各个维度上相对于远点的距离值。

+ +

下面我将谈谈基于CSS对象模型的坐标系系统。大体上来讲这些坐标系唯一的不同就是坐标原点不一样。

+ +

Dimensions坐标维度

+ +

在网页技术里，通常来讲，相对于坐标原点，x轴指向右为正值，向左为负值；y轴向下为正值，向上为负值。

+ +

On the web, the default origin is the top-left corner of a given context (with positive y-coordinate values being below the origin). Note that this is unlike most mathematical models, where the origin is at the bottom-left corner, with positive y-coordinate values being above the origin.

+ +

When drawing 3D graphics, or using a third dimension to layer objects from front to back, the z-coordinate is also used. This specifies the distance away from the viewer if positive and toward the viewer if negative.

+ +
+

It's actually possible to change the definitions and orientations of these coordinate systems using CSS properties such as {{cssxref("transform")}}. However, we'll only talk about the standard coordinate system for now.

+
+ +

Standard CSSOM coordinate systems

+ +

There are four standard coordinate systems used by the CSS object model, as described below.

+ +

Offset

+ +

Coordinates specified using the "offset" model use the top-left corner of the element being examined, or on which an event has occurred.

+ +

For example, when a {{domxref("MouseEvent", "mouse event", "", 1)}} occurs, the position of the mouse as specified in the event's {{domxref("MouseEvent.offsetX", "offsetX")}} and {{domxref("MouseEvent.offsetY", "offsetY")}} properties are given relative to the top-left corner of the node to which the event has been delivered. The origin is inset by the distances specified by {{cssxref("padding-left")}} and {{cssxref("padding-top")}}.

+ +

Client

+ +

The "client" coordinate system uses as its origin the top-left corner of the viewport or browsing context in which the event occurred. This is the entire viewing area in which the document is presented. Scrolling is not a factor.

+ +

On a desktop computer, for example, the {{domxref("MouseEvent.clientX")}} and {{domxref("MouseEvent.clientY")}} properties indicate the position of the mouse cursor at the moment the event occurred, relative to the top-left corner of the browser window. The top-left corner of the window is always (0, 0), regardless of the content of the document or any scrolling that may have been done. In other words, scrolling the document will change the client coordinates of a given position within the document.

+ +

Page

+ +

The "page" coordinate system gives the position of a pixel relative to the top-left corner of the entire {{domxref("Document")}} in which the pixel is located. That means that a given point in an element within the document will keep the same coordinates in the page model unless the element moves (either directly by changing its position or indirectly by adding or resizing other content).

+ +

Mouse events' {{domxref("MouseEvent.pageX", "pageX")}} and {{domxref("MouseEvent.pageY", "pageY")}} properties provide the position of the mouse at the time the event was generated, given relative to the top-left corner of the document.

+ +

Screen

+ +

Finally, we come to the "screen" model. It's probably fairly obvious what this is: it's the coordinate system where the origin is located at the top-left corner of the user's entire screen space. This means that the position of a given point within a document will change if the containing window is moved, for example, or if the user's screen geometry changes (by changing display resolution or by adding or removing monitors to their system).

+ +

The {{domxref("MouseEvent.screenX")}} and {{domxref("MouseEvent.screenY")}} properties give the coordinates of a mouse event's position relative to the screen's origin.

+ +

Example

+ +

Let's take a look at an example. This simple example creates a set of nested boxes. Whenever the mouse enters, moves around inside, or exits the inner box, the corresponding event is handled by updating a set of informational messages within the box, listing out the current mouse coordinates in each of the four available coordinate systems.

+ +

JavaScript

+ +

Let's look at the script in two sections. First, the code that logs the coordinates to the screen. This code will be called by the event handler for the various mouse events we watch.

+ +

Displaying the coordinates

+ +

As we'll see in the HTML, the inner box (the one we're watching for events on) contains several paragraphs; one for each of the four coordinate systems we'll be reporting on.

+ +
let inner = document.querySelector(".inner");
+let log = document.querySelector(".log");
+
+function setCoords(e, type) {
+  let idX = type + "X";
+  let idY = type + "Y";
+
+  document.getElementById(idX).innerText = e[idX];
+  document.getElementById(idY).innerText = e[idY];
+}
+
+ +

A reference to the {{HTMLElement("div")}} inside the inner box which contains the paragraphs that will show the coordinate information is fetched into log.

+ +

The setCoords() function is designed to accept as input a {{domxref("MouseEvent")}} and the name of the origin to use when obtaining the coordinates. The implementation is then quite simple. The variables idX and idY are set to strings with the names of the properties corresponding to the coordinates in the given coordinate system. For example, if the value of type is "page", then idX is "pageX" and idY is "pageY".

+ +

Handling the mouse events

+ +

setCoords() is called by the event handler for the various mouse events, named update(); this is shown below.

+ +
function update(e) {
+  setCoords(e, "offset");
+  setCoords(e, "client");
+  setCoords(e, "page");
+  setCoords(e, "screen");
+}
+
+inner.addEventListener("mouseenter", update, false);
+inner.addEventListener("mousemove", update, false);
+inner.addEventListener("mouseleave", update, false);
+ +

The event handler is in the update() method. It simply calls setCoords() once for each coordinate system, passing in the event that occurred.

+ +

Our main code sets up the event handlers on the inner box by calling {{domxref("EventTarget.addEventListener", "addEventListener()")}} for each of the types {{event("mouseenter")}}, {{event("mousemove")}}, and {{event("mouseleave")}}.

+ +

HTML

+ +

The HTML for our example is below. Note that within the <div> with the ID "log", we have a paragraph for each coordinate system, with {{domxref("span")}} used for each of the elements to receive and display the coordinates in each model.

+ +
<div class="outer">
+  <div class="inner">
+    <div class="log">
+      <p>
+        Offset-relative: <span id="offsetX">0</span>,
+        <span id="offsetY">0</span>
+      </p>
+      <p>
+        Client-relative: <span id="clientX">0</span>,
+        <span id="clientY">0</span>
+      </p>
+      <p>
+        Page-relative: <span id="pageX">0</span>,
+        <span id="pageY">0</span>
+      </p>
+      <p>
+        Screen-relative: <span id="screenX">0</span>,
+        <span id="screenY">0</span>
+      </p>
+    </div>
+  </div>
+</div>
+ +
+

CSS

+ + +

The CSS is pretty much just for appearances here. The class "outer" is used for the containing box, which is intentionally too wide to show in the MDN window, to allow you to scroll it horizontally. The "inner" box is the one that we track events in and in which we show the mouse coordinates.

+ +
.outer {
+  width: 1000px;
+  height: 200px;
+  background-color: red;
+}
+
+.inner {
+  position: relative;
+  width: 500px;
+  height: 150px;
+  top: 25px;
+  left: 100px;
+  background-color: blue;
+  color: white;
+  cursor: crosshair;
+  user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+}
+
+.log {
+  position: relative;
+  width: 100%;
+  text-align: center;
+}
+
+ +

Result

+ +

Here you can see the results in action. As you mouse in and around the blue box, watch the values of the mouse's X and Y coordinates change in the various coordinate systems in which you can obtain the values. Note also the effect of scrolling the example horizontally upon the values returned and how the value of clientX doesn't change.

+ +

{{EmbedLiveSample("Example", 600, 250)}}

+ +

See also

+ +
    +
  • Using CSS transforms: how to alter a coordinate system
    • +
  • Coordinates of a mouse event: +
      +
    • {{domxref("MouseEvent.offsetX")}} and {{domxref("MouseEvent.offsetY")}}
      • +
    • {{domxref("MouseEvent.clientX")}} and {{domxref("MouseEvent.clientY")}}
      • +
    • {{domxref("MouseEvent.pageX")}} and {{domxref("MouseEvent.pageY")}}
      • +
    • {{domxref("MouseEvent.screenX")}} and {{domxref("MouseEvent.screenY")}}
      • +
    +
    • +
diff --git a/files/zh-cn/web/css/cursor/index.html b/files/zh-cn/web/css/cursor/index.html new file mode 100644 index 0000000000..e079ff86f8 --- /dev/null +++ b/files/zh-cn/web/css/cursor/index.html @@ -0,0 +1,333 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - CSS Reference + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - NeedsTranslation + - TopicStub +translation_of: Web/CSS/cursor +--- +
{{CSSRef}}
+ +

cursor CSS 属性设置光标的类型（如果有），在鼠标指针悬停在元素上时显示相应样式。

+ +
{{EmbedInteractiveExample("pages/css/cursor.html")}}
+ + + +

语法

+ +
/* 关键字值 */
+cursor: pointer;
+cursor: auto;
+
+/* 使用URL，并提供一个关键字值作为备用 */
+cursor: url(hand.cur), pointer;
+
+/* URL和xy的坐标偏移值，最后提供一个关键字值作为备用 */
+cursor:  url(cursor1.png) 4 12, auto;
+cursor:  url(cursor2.png) 2 2, pointer;
+
+/* 全局属性 */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+
+ +

cursor属性为零个或多个<url>值，它们之间用逗号分隔，最后必填一个关键字值。每个<url>指向一个图像文件。浏览器将尝试加载指定的第一个图像，如果无法加载则返回下一个图像，如果无法加载图像或未指定图像，则使用关键字值代表的指针类型。

+ +

每个<url>后面都可选跟一对空格分隔的数字<x><y>表示偏移。它们用来设置指针的热点(即自定义图标的实际点击位置)，位置相对于图标的左上角。

+ +

例如，下面的例子使用<url>值指定两个图像，为第二个图像提供<x><y>坐标，如果两个图像都无法加载，则返回progress关键字值：

+ +
cursor: url(one.svg), url(two.svg) 5 5, progress;
+
+ +

值

+ +
+
<url>
+
url(…)或者逗号分隔的url(…), url(…), …，指向图片文件。用大于一个{{cssxref("<url>")}}值提供后备，以防某些指针图片类型不被支持。最后必须提供一个非URL后备值。详情参见cursor属性中使用URL值。
+
<x> <y> {{experimental_inline}}
+
可选 x，y坐标。两个小于32的无单位非负数。
+
关键字值
+
+

   鼠标悬浮于值上可实时演示

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
类型CSS值描述
Generalauto +

浏览器根据当前内容决定指针样式
+ 例如当是内容是文字时使用text样式

+
defaultdefault.gif默认指针，通常是箭头。
none无指针被渲染
链接及状态context-menucontext-menu.png指针下有可用内容目录。
helphelp.gif指示帮助
pointerpointer.gif悬浮于连接上时，通常为手
progressprogress.gif程序后台繁忙，用户仍可交互 (与wait相反).
waitwait.gif程序繁忙，用户不可交互 (与progress相反).图标一般为沙漏或者表。
选择cellcell.gif指示单元格可被选中
crosshaircrosshair.gif交叉指针，通常指示位图中的框选
texttext.gif指示文字可被选中
vertical-textvertical-text.gif指示垂直文字可被选中
拖拽aliasalias.gif复制或快捷方式将要被创建
copycopy.gif指示可复制
movemove.gif被悬浮的物体可被移动
no-dropno-drop.gif当前位置不能扔下
+ {{ bug("275173") }}Windows或Mac OS X中 "no-drop 与not-allowed相同".
not-allowednot-allowed.gif不能执行
grabgrab.gif +

可抓取

+ +

译者注:grab和grabbing在比较后期才被支持，见浏览器兼容表

+
grabbinggrabbing.gif抓取中
重设大小及滚动all-scrollall-scroll.gif元素可任意方向滚动 （平移）.
+ {{ bug("275174") }}Windows中, "all-scroll 与 move相同".
col-resizecol-resize.gif元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头
row-resizerow-resize.gif +

元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头

+
n-resizeExample of a resize towards the top cursor某条边将被移动。例如元素盒的东南角被移动时使用se-resize
e-resizeExample of a resize towards the right cursor
s-resizeExample of a resize towards the bottom cursor
w-resizeExample of a resize towards the left cursor
ne-resizeExample of a resize towards the top-right corner cursor
nw-resizeExample of a resize towards the top-left corner cursor
se-resizeExample of a resize towards the bottom-right corner cursor
sw-resizeExample of a resize towards the bottom-left corner cursor
ew-resize3-resize.gif指示双向重新设置大小
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
缩放zoom-inzoom-in.gif +

指示可被放大或缩小

+
zoom-outzoom-out.gif
+
+
+ +

语法形式

+ +
+
+ 
{{csssyntax("cursor")}}
+
+
+
+ +

注意事项

+ +

尽管规范没有为游标定义任何大小限制，但是不同的{{Glossary("user agent", "user agents")}}可能进行了限制。 使用超出浏览器支持的大小范围的图像进行的光标更改通常只会被忽略。

+ +

查阅 {{anch("Browser compatibility")}} 表格来获取指针大小的限制信息。

+ +

示例

+ +
.foo {
+  cursor: crosshair;
+}
+
+.bar {
+  cursor: zoom-in;
+}
+
+/* A fallback keyword value is required when using a URL */
+.baz {
+  cursor: url("hyper.cur"), auto;
+}
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{ SpecName('CSS3 UI', '#cursor', 'cursor') }}{{ Spec2('CSS3 UI') }}增加了一些关键字，url()的位置语法
{{ SpecName('CSS2.1', 'ui.html#cursor-propsy', 'cursor') }}{{ Spec2('CSS2.1') }}首次定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.cursor")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/cursor/url/index.html b/files/zh-cn/web/css/cursor/url/index.html new file mode 100644 index 0000000000..fcde4cecb2 --- /dev/null +++ b/files/zh-cn/web/css/cursor/url/index.html @@ -0,0 +1,125 @@ +--- +title: Using URL values for the cursor property +slug: Web/CSS/cursor/url +tags: + - Cursor + - URL +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +

Gecko 1.8 (Firefox 1.5，SeaMonkey 1.0) 支持CSS的URL值 {{cssxref("cursor")}} 属性在Windows和Linux。Mac支持是在Gecko 2（Firefox 4）中添加的。这允许将任意图像指定为鼠标光标 - 可以使用Gecko支持的任何图像格式。

+ +

语法

+ +

此属性的基本（CSS 2.1）语法是：

+ +
cursor: [<url>,]* keyword;
+
+ +

这意味着可以指定零个或多个URL（逗号分隔），后面必须跟随CSS规范中定义的一个关键字，例如 auto或 pointer。

+ +

例如，将允许以下值：

+ +
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
+
+ +

首先尝试加载 foo.cur。如果文件不存在或者其它无效原因，bar.gif被尝试加载，如果bar.gif不能被加载，那么使用auto。

+ +

在Gecko 1.8beta3 (Deer Park Alpha 2)中加入了对CSS3 语法的指针属性的支持。

+ +
cursor:  [<uri> [<x> <y>]?,]* keyword
+ +

因此，它能在Firefox 1.5中工作。它允许定义指针的热点，加强对指针图橡的边界的控制。如果一个也没有设置，指针的热点会从文件本身读取（适合CUR和XBM文件类型）。否则，设置成图像的左上角。一个CSS3语法的例子：

+ +
.foo  {
+    cursor:  auto;
+    cursor:  url(cursor1.png) 4 12, auto;
+}
+
+.bar  {
+    cursor:  pointer;
+    cursor:  url(cursor2.png) 2 2, pointer;
+}
+
+/*
+fallsback onto 'auto' and 'pointer' in IE,
+but must be set separately
+*/
+ +

第一个数字是X坐标，第二个数字是Y坐标。该示例将热点设置为从左上角（0,0）到（4,12）处的像素。

+ +

局限性

+ +

可以使用任何被Gecko所支持的图像格式。这意味着你可以使用BMP，JPG，CUR，GIF等等。可是，ANI不被支持。还有即使你定义一个GIF动画，指针也不会变成GIF动画。这个局限性可能在以后的版本去掉。

+ +

Gecko它本身不能限制被替换的指针大小。无论如何，你应该自己限制图像的最大值在32x32，以便兼容各种平台的操作系统。尤其是大于这个尺寸的指针不能在Windows 9x (95，98，ME）下工作。

+ +

透明效果的指针在Windows XP以前都不被支持。这是操作系统的一个局限性。透明效果可以在所有平台下工作。

+ +

只 有Windows，OS/2和Linux（使用Gtk+ 2.4及更高版本）的Mozilla版本支持光标属性的URL参数。其它版本可能在以后的版本中加入支持(Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, Gtk 2.0/2.2: {{ Bug(308536) }})。

+ +

关于其它浏览器的兼容性

+ +

Microsoft Internet Explorer 6.0还支持cursor属性的URI值。然而：

+ +
    +
  • IE只支持CUR和ANI格式。
    • +
  • IE不支持带有x和y坐标的CSS 3语法。将忽略光标图像和属性的其余部分。
    • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BrowserLowest versionformats (e.g.)x-y-coordinates
Internet Explorer6.0.cur | .ani---
Firefox (Gecko), Windows and Linux1.5 (1.8).cur | .png | .gif | .jpg1.5 (1.8)
Firefox (Gecko)4.0 (2.0).cur | .png | .gif | .jpg | .svg(Gecko 2.0)
Opera---------
Safari (Webkit)3.0 (522-523).cur | .png | .gif | .jpg3.0 (522-523)
Since OS X 10.5 supports Safari (Mac) .curfiles
+ +

它也使用不严格的光标属性语法。例如像这样的参数：

+ +
cursor: url(foo.cur);
+
+ +

或者：

+ +
cursor: url(foo.cur), pointer, url(bar.cur), auto;
+
+ +

可以在MSIE上工作，但是不能在Gecko上面工作。因为Gecko的兼容性与CSS的规范一致，URIs表始终放置在前面，在最后放置正确的关键字。

+ +

 

diff --git a/files/zh-cn/web/css/custom-ident/index.html b/files/zh-cn/web/css/custom-ident/index.html new file mode 100644 index 0000000000..09712f52e9 --- /dev/null +++ b/files/zh-cn/web/css/custom-ident/index.html @@ -0,0 +1,119 @@ +--- +title: +slug: Web/CSS/custom-ident +tags: + - CSS + - CSS数据类型 +translation_of: Web/CSS/custom-ident +--- +
{{CSSRef}}
+ +

<custom-ident> 指用户自定义字符串标识符。一种CSS 数据类型；要区分大小写，值不能有任何歧义。

+ +

语法

+ +

<custom-ident> 语法同CSS属性名相似，但它是区分大小写的。可以由以下字符组成：

+ +
    +
  • 字母 (A - Z,  a - z),
    • +
  • 十进制数 (0 - 9),
    • +
  • 连字符 (-),
    • +
  • 下划线 (_),
    • +
  • 转义字符 ( \),
    • +
  • Unicode 编码（格式：转义字符（\）后跟1到6位十六进制数）
    • +
+ +

注意：id1, Id1, iD1和ID1都是不同标识符，因为标识符是区分大小写的。另一方面，因为可以解码，所以 toto\? 和 toto\3F 是相同的。

+ +

禁用值

+ +

<custom-ident> 不能用单引号或双引号包起来。此外，第一个字符不能为数字，字符串开头不能是连字符 (-) 后跟数字或连字符。

+ +

为避免歧义，各个属性对应的<custom-ident> 禁止使用以下特殊值：

+ +
+
{{cssxref("animation-name")}}
+
禁用CSS关键字 unset, initial,  inherit, none
+
{{cssxref("counter-reset")}}
+
{{cssxref("counter-increment")}}
+
禁止使用unset, initial,  inherit,  none.
+
{{cssxref("@counter-style")}}
+
{{cssxref("list-style-type")}}
+
禁止使用unset, initial,  inherit, none, inline, outside. 同时不同浏览器预定义的值如: disc, circle, square, decimal, cjk-decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, arabic-indic, armenian, bengali, cambodian, cjk-earthly-branch, cjk-heavenly-stem, cjk-ideographic, devanagari, ethiopic-numeric, georgian, gujarati, gurmukhi, hebrew, hiragana, hiragana-iroha, japanese-formal, japanese-informal, kannada, katakana, katakana-iroha, khmer, korean-hangul-formal, korean-hanja-formal, korean-hanja-informal, lao, lower-armenian, malayalam, mongolian, myanmar, oriya, persian, simp-chinese-formal, simp-chinese-informal, tamil, telugu, thai, tibetan, trad-chinese-formal, trad-chinese-informal, upper-armenian, disclosure-open, 和 disclosure-close也不能使用。
+
{{cssxref("grid-row-start")}}
+ {{cssxref("grid-row-end")}}
+ {{cssxref("grid-column-start")}}
+ {{cssxref("grid-column-end")}}
+
禁止使用 span 。
+
{{cssxref("will-change")}}
+
禁止使用unset, initial,  inherit, 以及 will-change, auto, scroll-position, and contents.
+
+ +

示例

+ +

有效标识符

+ +
nono79            字母数字混合
+ground-level      字母-字母
+-test             连字符后跟字母
+_internal         下划线后跟字母
+\22 toto          Unicode编码后跟字母
+bili\.bob         转义的句号
+
+ +

无效标识符

+ +
34rem             第一个字符不能是数字
+-12rad            第一个字符连字符后不能跟数字
+bili.bob          只有字母数字、连字符-、下划线_不需要转义
+--toto            第一个字符不能为连字符后跟连字符
+'bilibob'         不能用单引号包起来，这是一个字符串类型
+"bilibob"         不能用双引号包起来，这是一个字符串类型
+ +

参考文档

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<custom-ident> for will-change')}}{{Spec2('CSS Will Change')}}Defines which values are excluded for {{cssxref("will-change")}}.
{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<custom-ident> for list-style-type')}}{{Spec2('CSS3 Counter Styles')}}Uses <custom-ident> instead of a finite list of keywords. Defines which values are excluded for {{cssxref("list-style-type")}} and {{cssxref("@counter-style")}}.
{{SpecName('CSS3 Lists', '#counter-properties', '<custom-ident> for counter-*')}}{{Spec2('CSS3 Lists')}}Renames <identifier> to <custom-ident>. Adds its usage to the new counter-set property.
{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<custom-ident> for animation-name')}}{{Spec2('CSS3 Animations')}}Defines which values are excluded for {{cssxref("animation-name")}}.
{{SpecName('CSS3 Values', '#identifier-value', '<custom-ident>')}}{{Spec2('CSS3 Values')}}Renames <identifier> to <custom-ident>. Makes it a pseudo-type and forbids the use of excluded values.
{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<identifier>')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

浏览器兼容性

+ +

由于这种类型不是真正的类型，而是用于简化允许值描述的便利类型，因此没有浏览器兼容性信息。

diff --git a/files/zh-cn/web/css/descendant_combinator/index.html b/files/zh-cn/web/css/descendant_combinator/index.html new file mode 100644 index 0000000000..69aec535c7 --- /dev/null +++ b/files/zh-cn/web/css/descendant_combinator/index.html @@ -0,0 +1,109 @@ +--- +title: 后代选择器 +slug: Web/CSS/Descendant_combinator +tags: + - CSS + - Selectors +translation_of: Web/CSS/Descendant_combinator +--- +
{{CSSRef("Selectors")}}
+ +

后代组合器（通常用单个空格（ ）字符表示）组合了两个选择器，如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父母，父母的父母，父母的父母的父母等）元素，则它们将被选择。利用后代组合器的选择器称为后代选择器。

+ +
/* List items that are descendants of the "my-things" list */
+ul.my-things li {
+  margin: 2em;
+}
+ +

从技术上讲，后代组合器是两个选择器之间的一个或多个 {{Glossary("CSS")}}  空格字符-空格字符和/或四个控制字符之一：回车，换页，换行和制表符在没有其他组合器的情况下。此外，组成组合器的空白字符可以包含任意数量的CSS注释。

+ + + +

语法

+ +
selector1 selector2 {
+  /* property declarations */
+}
+ +

Examples

+ +

CSS

+ +
li {
+  list-style-type: disc;
+}
+
+li li {
+  list-style-type: circle;
+}
+
+ +

HTML

+ +
<ul>
+  <li>
+    <div>Item 1</div>
+    <ul>
+      <li>Subitem A</li>
+      <li>Subitem B</li>
+    </ul>
+  </li>
+  <li>
+    <div>Item 2</div>
+    <ul>
+      <li>Subitem A</li>
+      <li>Subitem B</li>
+    </ul>
+  </li>
+</ul>
+
+ +

Result

+ +

{{EmbedLiveSample("Examples", "100%", 160)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}{{Spec2("CSS4 Selectors")}}
{{SpecName("CSS3 Selectors", "#descendant-combinators", "descendant combinator")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#descendant-selectors", "descendant selectors")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1", "#contextual-selectors", "contextual selectors")}}{{Spec2("CSS1")}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.descendant")}}

+ +

相关

+ + diff --git a/files/zh-cn/web/css/dimension/index.html b/files/zh-cn/web/css/dimension/index.html new file mode 100644 index 0000000000..367cd4a5d4 --- /dev/null +++ b/files/zh-cn/web/css/dimension/index.html @@ -0,0 +1,74 @@ +--- +title: dimension +slug: Web/CSS/dimension +tags: + - CSS + - CSS数据类型 +translation_of: Web/CSS/dimension +--- +
{{CSSRef}}
+ +

<dimension> CSS 数据类型是一个带有单位的{{CSSxRef("<number>")}}，例如：10px

+ +

CSS使用度量值来描述距离 ({{CSSxRef("<length>")}})，时间({{CSSxRef("<time>")}})，频率({{CSSxRef("<frequency>")}})，分辨率({{CSSxRef("<resolution>")}})以及其他量。

+ +

格式

+ +

 <dimension> 的格式是一个{{CSSxRef("<number>")}}后紧随一个是标记符的单位，单位大小写不敏感。

+ +

Examples

+ +

合法的度量值

+ +
12px      12像素
+1rem      1 rem
+1.2pt     1.2点
+2200ms    2200毫秒
+200hz     200赫兹
+200Hz     200赫兹(单位大小写不敏感)
+
+ +

非法的度量值

+ +
12 px       单位必须紧随数字，不能有空格
+12"px"      单位是标识符，不能加引号
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Specification状态说明
{{SpecName("CSS4 Values", "#dimensions", "<dimension>")}}{{Spec2("CSS4 Values")}}添加 cap, ic, lh, rlh, vi, vb
{{SpecName("CSS3 Values", "#dimensions", "<dimension>")}}{{Spec2("CSS3 Values")}}添加 ch, rem, vw, vw, vmin, vmax, Q
{{SpecName("CSS2.1", "syndata.html#numbers", "<dimension>")}}{{Spec2("CSS2.1")}}Defined under Numbers and Length
{{SpecName("CSS1", "", "<dimension>")}}{{Spec2("CSS1")}}Initial definition under "length units"
+ +

浏览器兼容性

+ + + +

{{Compat("css.types.dimension")}}

diff --git a/files/zh-cn/web/css/direction/index.html b/files/zh-cn/web/css/direction/index.html new file mode 100644 index 0000000000..16c0371860 --- /dev/null +++ b/files/zh-cn/web/css/direction/index.html @@ -0,0 +1,93 @@ +--- +title: direction +slug: Web/CSS/direction +translation_of: Web/CSS/direction +--- +
CSS属性 direction 用来设置文本、表列水平溢出的方向。  rtl 表示从右到左 (类似希伯来语或阿拉伯语)， ltr 表示从左到右 (类似英语等大部分语言).
+ +
 
+ +
{{EmbedInteractiveExample("pages/css/direction.html")}}
+ + + +

值得注意的是文本方向通常由文档定义 (e.g., with HTML's dir attribute)而不是通过直接使用 direction 属性定义。

+ +

该属性设置可以设置块级元素文本的基本方向，也可以设置由通过 {{Cssxref("unicode-bidi")}}属性创建的嵌入元素的方向。与此同时，它还可以设置文本、块级元素的默认对齐方式 ，以及表行中的单元格的流动方向。

+ +

与 HTML 中的 dir 属性不同，direction属性不会从表列继承到表单元格, 因为 CSS 继承遵从文档流, 而表单元格位于行内部, 但不在列内部。

+ +

direction 属性和 {{cssxref("unicode-bidi")}} 属性不受 {{cssxref("all")}} 属性影响。

+ +

语法

+ +
/* Keyword values */
+direction: ltr;
+direction: rtl;
+
+/* Global values */
+direction: inherit;
+direction: initial;
+direction: unset;
+
+ +

取值

+ +
+
ltr
+
默认属性。可设置文本和其他元素的默认方向是从左到右。
+
rtl
+
可设置文本和其他元素的默认方向是从右到左。
+
+ +

标准语法

+ +
{{csssyntax}}
+ +

示例

+ +
blockquote {
+  direction: rtl;
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
Specification（规范）Status（状态）Comment（备注）
{{SpecName('CSS3 Writing Modes', '#direction', 'direction')}}{{Spec2('CSS3 Writing Modes')}}No change.
{{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.properties.direction")}}

+
+ +

参见

+ +
    +
  • {{Cssxref("unicode-bidi")}}
    • +
  • {{Cssxref("writing-mode")}}
    • +
diff --git a/files/zh-cn/web/css/display-box/index.html b/files/zh-cn/web/css/display-box/index.html new file mode 100644 index 0000000000..51b0cffa39 --- /dev/null +++ b/files/zh-cn/web/css/display-box/index.html @@ -0,0 +1,109 @@ +--- +title: +slug: Web/CSS/display-box +translation_of: Web/CSS/display-box +--- +
{{CSSRef}}
+ +

这些关键词定义一个元素到底是否产生显示盒（display boxes）。

+ +

语法

+ +

有效的 <display-box> 值:

+ +

contents {{Experimental_Inline}}

+ +
+
这些元素自己不显示。它们被它们的伪盒（pseudo-box）和子项盒（child boxes）取代。请注意CSS 层次3显示规格定义的 contents 值应该怎样影响"非常见元素" - 即不由CSS渲染的元素（诸如被取代元素）。参考 Appendix B: Effects of display: contents on Unusual Elements 以获取细节。
+
+ 由于浏览器中有个bug，它会从访问树（accessibility tree）删除元素，屏幕阅读者会看不到里面内容。参考下方访问性关注 Accessibility concerns  章节以获取细节。
+
none
+
关闭元素的显示，不影响布局（文件中没有该元素）。所有子项的显示也被关闭。
+
要一个元素占据空间（文件中存在），但不渲染，请使用 {{CSSxRef("visibility")}} 属性。
+
+ +

举例

+ +

在第一个例子中，带有secret类的段落，会被设置成 display: none; 该盒子和内容不会渲染。

+ +

display: none

+ +

HTML

+ +
+
<p>Visible text</p>
+<p class="secret">Invisible text</p>
+ +

CSS

+ +
p.secret {
+  display: none;
+}
+ +

结果

+ +

{{EmbedLiveSample("Hide_element", "100%", 60)}}

+
+ +
+

display: contents

+ +

在本例中，其外部 {{htmlelement("div")}} 有一个 2px 红色边框 和300px的宽度。然而，它有 display: contents 因而指定这个 <div> 不会渲染，边框和宽度都没有，其子元素会显示。

+ +

HTML

+ +
<div class="outer">
+  <div>Inner div.</div>
+</div>
+
+ +

CSS

+ +
.outer {
+  border: 2px solid red;
+  width: 300px;
+  display: contents;
+}
+
+.outer > div {
+  border: 1px solid green;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("Display_contents", 300, 60)}}

+
+ +

Accessibility concerns

+ +

目前在大多数浏览器中的实现，是会从删除 accessibility tree 删除 display 属性值为 contents 的元素。这会引起该元素（在部分浏览器版本中）和其子项不读出来。这不符合 CSSWG specification的行为要求。

+ + + +

浏览器兼容性

+ + + +

Support of contents

+ +

{{Compat("css.properties.display.contents", 10)}}

+ +

其它参考

+ + diff --git a/files/zh-cn/web/css/display-internal/index.html b/files/zh-cn/web/css/display-internal/index.html new file mode 100644 index 0000000000..1af7821c89 --- /dev/null +++ b/files/zh-cn/web/css/display-internal/index.html @@ -0,0 +1,74 @@ +--- +title: +slug: Web/CSS/display-internal +tags: + - CSS数据类型 + - CSS显示 + - 参考 + - 显示内部 +translation_of: Web/CSS/display-internal +--- +
 
+ +

一些布局模型，例如  table 并且ruby具有复杂的内部结构，具有他们的孩子和后代可以填充的几个不同的角色。此页面定义了那些“内部”显示值，这些值仅在该特定布局模式中具有意义。

+ +

语法

+ +

除非另有说明，否则使用这些显示值的元素的内部显示类型和外部显示类型都将设置为给定的关键字。

+ +
+
table-row-group
+
这些元素的行为类似于<tbody>HTML元素。
+
table-header-group
+
这些元素的行为类似于<thead>HTML元素。
+
table-footer-group
+
这些元素的行为类似于<tfoot>HTML元素。
+
table-row
+
这些元素的行为类似于<tr>HTML元素。
+
table-cell
+
这些元素的行为类似于<td>HTML元素。
+
table-column-group
+
这些元素的行为类似于<colgroup>HTML元素。
+
table-column
+
这些元素的行为类似于<col>HTML元素。
+
table-caption
+
这些元素的行为类似于<caption>HTML元素。
+
ruby-base {{Experimental_Inline}}
+
这些元素的行为类似于<rb>HTML元素。
+
ruby-text {{Experimental_Inline}}
+
这些元素的行为类似于<rt>HTML元素。
+
ruby-base-container {{Experimental_Inline}}
+
这些元素的行为类似于<rbc>匿名框生成的HTML元素。
+
ruby-text-container {{Experimental_Inline}}
+
这些元素的行为类似于<rtc>HTML元素。
+
+ +

浏览器兼容性编辑

+ + + +

支持表值

+ +

table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, and table-row-group

+ +

{{Compat("css.properties.display.table_values", 10)}}

+ +

支持ruby值

+ +

ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container

+ +

{{Compat("css.properties.display.ruby_values", 10)}}

+ +

另请参见

+ +
    +
  • {{CSSxRef("display")}} +
      +
    • {{CSSxRef("<display-outside>")}}
      • +
    • {{CSSxRef("<display-inside>")}}
      • +
    • {{CSSxRef("<display-listitem>")}}
      • +
    • {{CSSxRef("<display-box>")}}
      • +
    • {{CSSxRef("<display-legacy>")}}
      • +
    +
    • +
diff --git a/files/zh-cn/web/css/display-legacy/index.html b/files/zh-cn/web/css/display-legacy/index.html new file mode 100644 index 0000000000..3912ff8fbf --- /dev/null +++ b/files/zh-cn/web/css/display-legacy/index.html @@ -0,0 +1,100 @@ +--- +title: +slug: Web/CSS/display-legacy +translation_of: Web/CSS/display-legacy +--- +
{{CSSRef}}
+ +

CSS 2使用单个关键字来指定display的属性，对于相同布局模式的 block 级和 inline 级变体需要使用单独的关键字。本文详述这些关键字。

+ +

语法

+ +
+
inline-block
+
元素会产生一个块元素盒子，并且像内联盒子一样（表现得更像一个被替换的元素），可以融入到周围内容中。
+
+ 等同于 inline flow-root。
+
inline-table
+
在HTML中， inline-table 没有直接对应关系。它表现为一个HTML {{HTMLElement("table")}} 元素， 但是又表现为一个不同于块级盒子的内联盒子。表盒子内部是一个块级上下文。
+
+ 等同于 inline table。
+
inline-flex
+
元素表现为一个内联元素，并对内容采用弹性盒子模型进行布局。
+
+ 等同于 inline flex。
+
inline-grid
+
元素表现为一个内联元素，并对内容采用网格模型进行布局。
+
+ 等同于 inline grid。
+
+ +

正式语法

+ +
{{CSSSyntax}}
+ +

例子

+ +

在下面的例子中，我们使用inline-flex关键字（遗留关键字），创建一个inline flex的容器。

+ +
+

HTML

+ +
<div class="container">
+  <div>Flex Item</div>
+  <div>Flex Item</div>
+</div>
+
+Not a flex item
+
+ +

CSS

+ +
.container {
+  display: inline-flex;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("Example", 300, 150)}}

+
+ +

新的语法中，使用两个关键字来创建inline flex容器，inline用来指定外部显示类型, flex用来指定内部显示类型。

+ +
.container {
+  display: inline flex;
+}
+ +

浏览器兼容性

+ + + +

支持 inline-block

+ +

{{Compat("css.properties.display.inline-block", 10)}}

+ +

支持 inline-table

+ +

{{Compat("css.properties.display.inline-table", 10)}}

+ +

支持 inline-flex

+ +

{{Compat("css.properties.display.inline-flex", 10)}}

+ +

支持 inline-grid

+ +

{{Compat("css.properties.display.inline-grid", 10)}}

+ +

相关链接

+ +
    +
  • {{CSSxRef("display")}} +
      +
    • {{CSSxRef("<display-outside>")}}
      • +
    • {{CSSxRef("<display-inside>")}}
      • +
    • {{CSSxRef("<display-listitem>")}}
      • +
    • {{CSSxRef("<display-internal>")}}
      • +
    • {{CSSxRef("<display-box>")}}
      • +
    +
    • +
diff --git a/files/zh-cn/web/css/display-outside/index.html b/files/zh-cn/web/css/display-outside/index.html new file mode 100644 index 0000000000..ee95363595 --- /dev/null +++ b/files/zh-cn/web/css/display-outside/index.html @@ -0,0 +1,85 @@ +--- +title: +slug: Web/CSS/display-outside +translation_of: Web/CSS/display-outside +--- +
{{CSSRef}}
+ +

The <display-outside> keywords specify the element’s outer {{CSSxRef("display")}} type, which is essentially its role in flow layout. These keywords are used as values of the display property, and can be used for legacy purposes as a single keyword, or as defined in the Level 3 specification alongside a value from the {{CSSxRef("<display-inside>")}} keywords.

+ +

语法

+ +

 <display-outside> 的可用值：

+ +
+
block
+
这个值会生成一个块级元素盒子，同时在该元素之前和之后打断（换行）。简单来说就是，这个值会将该元素变成块级元素。
+
inline
+
这个值会生成一个行内元素盒子，该元素之前和之后不会打断（换行）。如果空间充足，该元素后的元素将会在同一行显示。简单来说就是，这个值会将该元素变成行内元素。
+
run-in {{Experimental_Inline}}
+
这个值生成一个run-in盒子。如果其后的兄弟元素是块级盒子，那么这个run-in盒子就会以兄弟元素的第一个行内元素盒子的形式存在；如果其后的兄弟元素是行内元素，那么这个run-in盒子会变成块级元素。
+
run-in元素的存在形式取决于相邻的元素，如果它的内部存在block box，那么它会变成块级元素盒子。
+
+ +
+

Note: Browsers that support the two value syntax, on finding the outer value only, such as when display: block or display: inline is specified, will set the inner value to flow. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.

+
+ +

举例

+ +

In the following example, span elements (normally displayed as inline elements) are set to display: block and so break onto new lines and expand to fill their container in the inline dimension.

+ +

HTML

+ +
<span>span 1</span>
+<span>span 2</span>
+ +

CSS

+ +
span {
+    display: block;
+    border: 1px solid rebeccapurple;
+}
+ +

Result

+ +

{{EmbedLiveSample("Examples", 300, 60)}}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatus
{{SpecName('CSS3 Display', '#typedef-display-outside', 'display-outside')}}{{Spec2('CSS3 Display')}}
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.display.display-outside", 10)}}

+ +

其它

+ + diff --git a/files/zh-cn/web/css/display/index.html b/files/zh-cn/web/css/display/index.html new file mode 100644 index 0000000000..937e70a48d --- /dev/null +++ b/files/zh-cn/web/css/display/index.html @@ -0,0 +1,231 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS +translation_of: Web/CSS/display +--- +
{{CSSRef}} +

display 属性可以设置元素的内部和外部显示类型 display types。元素的外部显示类型 outer display types 将决定该元素在流式布局中的表现（块级或内联元素）；元素的内部显示类型 inner display types 可以控制其子元素的布局（例如：flow layout，grid 或 flex）。

+
+ +

在 CSS 规范（特指 CSS Level 1/2/3 规范）中查阅 display 属性的所有取值时需要注意：个别取值的详细信息记录在独立的规范中。 例如，display: flex 的详细信息在 CSS Flexible Box Model 规范中记录。可以在本文档末尾的表格中查看所有有关的规范。

+ +

语法

+ +

display 属性使用关键字取值来指定，关键字取值被分为六类：

+ +
.container {
+  display:  [ <display-outside> | <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ;
+}
+
+ +

Outside

+ +
+
{{CSSxRef("<display-outside>")}}
+
这些关键字指定了元素的外部显示类型，实际上就是其在流式布局中的角色（即在流式布局中的表现）。
+
{{page("/zh-CN/docs/Web/CSS/display-outside", "Syntax")}}
+
+

Inside

+
+
{{CSSxRef("<display-inside>")}}
+
这些关键字指定了元素的内部显示类型，它们定义了该元素内部内容的布局方式（假定该元素为非替换元素 non-replaced element）。
+
{{page("/zh-CN/docs/Web/CSS/display-inside", "Syntax")}}
+
+

List Item

+
+
{{CSSxRef("<display-listitem>")}}
+
将这个元素的外部显示类型变为 block 盒，并将内部显示类型变为多个 list-item inline 盒。
+
{{page("/zh-CN/docs/Web/CSS/display-listitem", "Syntax")}}
+
+

Internal

+
+
{{CSSxRef("<display-internal>")}}
+
有些布局模型（如 table 和 ruby）有着复杂的内部结构，因此它们的子元素可能扮演着不同的角色。这一类关键字就是用来定义这些“内部”显示类型，并且只有在这些特定的布局模型中才有意义。
+
{{page("/en-US/docs/Web/CSS/display-internal", "Syntax")}}
+
+

Box

+
+
{{CSSxRef("<display-box>")}}
+
这些值决定元素是否使用盒模型。
+
{{page("/en-US/docs/Web/CSS/display-box", "Syntax")}}
+
+

Legacy

+
+
{{CSSxRef("<display-legacy>")}}
+
CSS 2 对于 display 属性使用单关键字语法，对于相同布局模式的 block 级和 inline 级变体需要使用单独的关键字。
+
{{page("/en-US /docs/Web/CSS/display-legacy", "Syntax")}}
+
+ +

是否该继续使用 Legacy 取值？

+ +

CSS Level 3 规范详细说明了 display 属性的两类取值——显式地指定了外部和内部显示属性的规范——但是还没有被浏览器广泛支持。

+ +

{{CSSxRef("<display-legacy>")}} 方法允许使用单个关键字达到相同效果，开发者应该在双关键字取值被广泛支持之前采用这个方法。举例来说，你可以这样指定 inline flex 容器：

+ +
.container {
+    display: inline-flex;
+}
+ +

也可以用两个关键字来指定。

+ +
.container {
+    display: inline flex;
+}
+
+ +

有关规范变更的更多信息，查阅文章 Adapting to the new two-value syntax of display。

+ +

全局设置

+ +
/* Global values */
+display: inherit;
+display: initial;
+display: unset;
+ +

指南和示例

+ +

上面 {{anch("语法")}} 部分提供了 display 取值的多个示例。下面的资料将详细介绍 display 的各个取值。

+ + + +

CSS Flow Layout (display: block, display: inline)

+ + + +

display: flex

+ + + +

display: grid

+ + + +

除此之外，你可以在 MDN 上找到布局模型的详细解释：

+ + + +

可访问性相关

+ +

display: none;

+ +

将 display 设置为 none 会将元素从 可访问性树 accessibility tree 中移除。这会导致该元素及其所有子代元素不再被屏幕阅读技术 screen reading technology 访问。

+ +

如果你只是想从视觉上隐藏这个元素，对可访问性更加友好的做法是使用 属性组合 来将其从屏幕上隐藏，但仍可以被屏幕阅读器 screen readers  等辅助技术解析。

+ +

display: contents;

+ +

当前大多数浏览器对 display: contents; 的实现是：将设置了该值的元素从 可访问性树 accessibility tree 中移除，但保留其子代元素。这会导致该元素自身不再被屏幕阅读技术 screen reading technology  访问。这在 CSS 规范 中被视为不正确的行为。

+ + + +

Tables

+ +

将 {{HTMLElement("table")}} 元素的 display 值修改为 block, grid, 或 flex 会修改其在 可访问性树 accessibility tree 中的表现，这会使得 table 元素不能被屏幕阅读技术正常处理。

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}{{Spec2('CSS3 Display')}}新增 run-in, flow, flow-root, contents, 以及多关键字取值。
{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}{{Spec2('CSS3 Ruby')}}新增 ruby, ruby-base, ruby-text, ruby-base-container, 和 ruby-text-container。
{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}{{Spec2('CSS3 Grid')}}新增 grid 盒模型的值。
{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}{{Spec2('CSS3 Flexbox')}}新增 flexible 盒模型的值。
{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}{{Spec2('CSS2.1')}}新增 table 模型的值和 inline-block.
{{SpecName('CSS1', '#display', 'display')}}{{Spec2('CSS1')}}初始定义.，基础值： none, block, inline, 以及 list-item.
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.display", 10)}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/easing-function/index.html b/files/zh-cn/web/css/easing-function/index.html new file mode 100644 index 0000000000..0af33c48c2 --- /dev/null +++ b/files/zh-cn/web/css/easing-function/index.html @@ -0,0 +1,242 @@ +--- +title: +slug: Web/CSS/easing-function +translation_of: Web/CSS/easing-function +--- +
{{CSSRef}}
+ +

The <easing-function> CSS data type denotes a mathematical function that describes how fast one-dimensional values change during animations. This lets you vary the animation's speed over the course of its duration.

+ +

The easing functions in the cubic-bezier subset of easing functions are often called "smooth" easing functions, because they can be used to smooth down the start and end of the animation. They correlate a time ratio to an output ratio, both expressed as {{cssxref("<number>")}}s. For these values, 0.0 represents the initial state, and 1.0 represents the final state.

+ +

Depending on the specific function used, the calculated output can sometimes grow to be greater than 1.0 or smaller than 0.0 during the course of an animation. This causes the animation to go farther than the final state, and then return. For some properties, such as {{cssxref("left")}} or {{cssxref("right")}}, this creates a kind of "bouncing" effect.

+ +

However, certain properties will restrict the output if it goes outside an allowable range. For example, a color component greater than 255 or smaller than 0 will be clipped to the closest allowed value (255 and 0, respectively). Some cubic-bezier() curves exhibit this property.

+ +

Easing functions

+ +

CSS supports two kinds of easing functions: the subset of the cubic Bézier curves that are functions, and staircase functions. The most useful of these functions are given a keyword that allows them to be easily referenced.

+ +

The cubic-bezier() class of easing functions

+ +

+ +

The cubic-bezier() functional notation defines a cubic Bézier curve. As these curves are continuous, they are often used to smooth down the start and end of the animation and are therefore sometimes called easing functions.

+ +

A cubic Bézier curve is defined by four points P0, P1, P2, and P3. P0 and P3 are the start and the end of the curve and, in CSS these points are fixed as the coordinates are ratios (the abscissa the ratio of time, the ordinate the ratio of the output range). P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state.

+ +

Not all cubic Bézier curves are suitable as easing functions as not all are mathematical functions; i.e., curves that for a given abscissa have zero or one value. With P0 and P3 fixed as defined by CSS, a cubic Bézier curve is a function, and is therefore valid, if and only if the abscissas of P1 and P2 are both in the [0, 1] range.

+ +

Cubic Bézier curves with the P1 or P2 ordinate outside the [0, 1] range may generate bouncing effects.

+ +

When you specify an invalid cubic-bezier curve, CSS ignores the whole property.

+ +

Syntax

+ +
cubic-bezier(x1, y1, x2, y2)
+
+ +

where:

+ +
+
x1, y1, x2, y2
+
Are {{cssxref("<number>")}} values representing the abscissas, and ordinates of the P1 and P2 points defining the cubic Bézier curve. x1 and x2 must be in the range [0, 1] or the value is invalid.
+
+ +

Examples

+ +

These cubic Bézier curves are valid for use in CSS:

+ +
/* The canonical Bézier curve with four <number> in the [0,1] range. */
+cubic-bezier(0.1, 0.7, 1.0, 0.1)
+
+/* Using <integer> is valid as any <integer> is also a <number>. */
+cubic-bezier(0, 0, 1, 1)
+
+/* Negative values for ordinates are valid, leading to bouncing effects.*/
+cubic-bezier(0.1, -0.6, 0.2, 0)
+
+/* Values > 1.0 for ordinates are also valid. */
+cubic-bezier(0, 1.1, 0.8, 4)
+
+ +

These cubic Bézier curves definitions are invalid:

+ +
/* Though the animated output type may be a color,
+   Bézier curves work w/ numerical ratios.*/
+cubic-bezier(0.1, red, 1.0, green)
+
+/* Abscissas must be in the [0, 1] range or
+   the curve is not a function of time. */
+cubic-bezier(2.45, 0.6, 4, 0.1)
+
+/* The two points must be defined, there is no default value. */
+cubic-bezier(0.3, 2.1)
+
+/* Abscissas must be in the [0, 1] range or
+   the curve is not a function of time. */
+cubic-bezier(-1.9, 0.3, -0.2, 2.1)
+
+ +

Keywords for common cubic-bezier easing functions

+ +

linear

+ +

+ +

动画以恒定速度运行。此关键词表示缓冲函数  cubic-bezier(0.0, 0.0, 1.0, 1.0)。

+ +

ease

+ +

+ +

动画缓慢开始，然后突然加速，最后缓慢移向目标。此关键词表示缓冲函数 cubic-bezier(0.25, 0.1, 0.25, 1.0).。它与 ease-in-out 类似，但它在开始时加速更快。 

+ +

ease-in

+ +

+ +

动画缓慢开始，然后逐渐加速直到结束，在结束点时突然停止。此关键词表示缓冲函数 cubic-bezier(0.42, 0.0, 1.0, 1.0)。

+ +

ease-in-out

+ +

+ +

动画缓慢开始，然后加速，最后减速直至结束。此关键词表示缓冲函数 cubic-bezier(0.42, 0.0, 0.58, 1.0)。开始时，其表现与 ease-in 函数类似；结束时，与 ease-out 函数类似。

+ +

ease-out

+ +

+ +

此动画突然开始，然后逐渐减速直至结束。此关键词表示缓冲函数 cubic-bezier(0.0, 0.0, 0.58, 1.0)。

+ +

+ +

The steps() class of easing functions

+ +

The steps() functional notation defines a step function dividing the domain of output values in equidistant steps.This subclass of step functions are sometimes also called staircase functions.

+ +

Syntax

+ +
steps(number_of_steps, direction)
+
+ +

where:

+ +
+
number_of_steps
+
Is a strictly positive {{cssxref("<integer>")}}, representing the amount of equidistant treads composing the stepping function.
+
direction
+
Is a keyword indicating if it the function is left- or right-continuous:
+
+
    +
  • jump-start denotes a left-continuous function, so that the first step or jump happens when the animation begins;
    • +
  • jump-end denotes a right-continuous function, so that the last step or jump happens when the animation ends;
    • +
  • jump-both denotes a right and left continuous function, includes pauses at both the 0% and 100% marks, effectively adding a step during the animation iteration;
    • +
  • jump-none There is no jump on either end. Instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration
    • +
  • start is the equivalent of jump-start
    • +
  • end is the equivalent of jump-end
    • +
+
+
end is the default.
+
+ +

steps( n, <direction> )

+ +
    +
  • +

    steps(2, jump-start)
    + steps(2, start)

    +
    • +
  • +

    steps(4, jump-end)
    + steps(4, end)

    + four steps, with a jump from the fourth step to the final value at the 100% mark
    • +
  • +

    steps(5, jump-none)

    + five steps, with no jumps, so 20% of the time is at the beginning state or 0% mark and the last 20% is at the final state, or 100% mark
    • +
  • +

    steps(3, jump-both)

    +
    • +
+ +
+
steps-start
+
The equivalent of steps(1, jump-start)
+
steps-end
+
The equivalent of steps(1, jump-end)
+
+ +

step-start

+ +

The animation jumps immediately to its final state, where it stays until the end. This keyword represents the easing function steps(1, jump-start) or steps(1, start).

+ +

step-end

+ +

The animation stays in its initial state until the end, at which point it jumps directly to its final state. This keyword represents the easing function steps(1, jump-end) or steps(1, end).

+ +

Examples

+ +

These easing functions are valid:

+ +
/* There is 5 treads, the last one happens
+   right before the end of the animation. */
+steps(5, end)
+
+/* A two-step staircase, the first one happening
+   at the start of the animation. */
+steps(2, start)
+
+/* The second parameter is optional. */
+steps(2)
+
+ +

These easing function are invalid:

+ +
/* The first parameter must be an <integer> and
+   cannot be a real value, even if it is equal to one. */
+steps(2.0, jump-end)
+
+/* The amount of steps must be non-negative. */
+steps(-3, start)
+
+/* There must be at least one step.*/
+steps(0, jump-none)
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Animations', '#animation-timing-function', '<timing-function>')}}{{Spec2('CSS3 Animations')}}Defines <single-timing-function> as a synonym for <single-transition-timing-function> of the CSS Transitions Module.
{{SpecName('CSS Timing 1', '#typedef-easing-function', '<easing-function>')}}{{Spec2('CSS Timing 1')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("css.types.easing-function", 2)}}

+ +

See also

+ + diff --git a/files/zh-cn/web/css/element()/index.html b/files/zh-cn/web/css/element()/index.html new file mode 100644 index 0000000000..57873c6e7d --- /dev/null +++ b/files/zh-cn/web/css/element()/index.html @@ -0,0 +1,103 @@ +--- +title: element +slug: Web/CSS/element() +tags: + - CSS + - CSS Function + - Layout + - Web + - 参考 + - 布局 +translation_of: Web/CSS/element() +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS 函数 element() 定义了一个从任意的 HTML 元素中生成的图像 {{cssxref("<image>")}} 值。该图像值是实时的，这意味着如果被指定的 HTML 元素被更改，the CSS properties using the resulting value are automatically updated.

+ +

一个特别实用的应用场景是，在某个 HTML {{HTMLElement("canvas")}} 元素中渲染图像，然后将其用作背景。

+ +

在使用 Gecko 渲染引擎的浏览器中，可以使用非标准的 {{domxref("document.mozSetImageElement()")}} 方法，将某个元素指定为其他元素的背景图像。

+ +

语法

+ +
element(id)
+ +

其中：

+ +
+
id
+
The ID of an element to use as the background, specified using the HTML attribute #id on the element.
+
+ +

示例

+ +

在支持 -moz-element() 的 Firefox 中，可以实地考察这些例子。

+ +

一个比较现实的例子

+ +

这个例子将文档中另一个隐藏的 {{HTMLElement("div")}} 元素作为背景。被隐藏的元素本身使用了渐变背景，也包含了一些文字，渐变背景和文字都成为了第一个元素的背景。

+ +
<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
+  <p>This box uses the element with the #myBackground1 ID as its background!</p>
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
+  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
+  </div>
+</div>
+ +

The {{HTMLElement("div")}} element with the ID "myBackground1" is used as the background for the content including the paragraph "This box uses the element with the #myBackground1 ID as its background!".

+ +

example1.png

+ +

一个有点怪怪的例子

+ +

This example uses a hidden {{HTMLElement("button")}} element in a repeating pattern as its background. This demonstrates that you can use arbitrary elements as background, but doesn't necessarily demonstrate good design practices.

+ +
<div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <button id="myBackground2" type="button">Evil button!</button>
+</div>
+
+ +

example2.png

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}{{Spec2('CSS4 Images')}}Deferred from CSS3 Images.
+ +

浏览器兼容性

+ + + +

{{Compat("css.types.image.element")}}

+ +

参见

+ +
    +
  • {{cssxref("_image", "image()")}}
    • +
  • {{cssxref("image-set", "image-set()")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("<gradient>")}}
    • +
  • {{cssxref("element()")}}
    • +
  • {{cssxref("cross-fade")}}
    • +
  • {{domxref("document.mozSetImageElement()")}}
    • +
diff --git a/files/zh-cn/web/css/empty-cells/index.html b/files/zh-cn/web/css/empty-cells/index.html new file mode 100644 index 0000000000..6098c59ac4 --- /dev/null +++ b/files/zh-cn/web/css/empty-cells/index.html @@ -0,0 +1,118 @@ +--- +title: empty-cells +slug: Web/CSS/empty-cells +tags: + - CSS + - CSS属性 + - CSS表格 +translation_of: Web/CSS/empty-cells +--- +
{{CSSRef}}
+ +

CSS中 empty-cells 属性定义了用户端 {{glossary("user agent")}} 应该怎么来渲染表格 {{htmlelement("table")}} 中没有可见内容的单元格的边框和背景。

+ +
/* Keyword values */
+empty-cells: show;
+empty-cells: hide;
+
+/* Global values */
+empty-cells: inherit;
+empty-cells: initial;
+empty-cells: unset;
+
+ +

只有当 {{cssxref("border-collapse")}} 属性值是 separate 时，才会生效。

+ +

{{cssinfo}}

+ +

语法

+ +

empty-cells 的属性值必须是以下取值中的一个。

+ +

取值

+ +
+
show
+
边框和背景正常渲染。与普通元素一样。
+
hide
+
边框和背景被隐藏。
+
+ +

语法形式

+ +
{{csssyntax}}
+
+ +

示例

+ +

HTML

+ +
<table class="table_1">
+  <tr>
+    <td>Moe</td>
+    <td>Larry</td>
+  </tr>
+  <tr>
+    <td>Curly</td>
+    <td></td>
+  </tr>
+</table>
+<br>
+<table class="table_2">
+  <tr>
+    <td>Moe</td>
+    <td>Larry</td>
+  </tr>
+  <tr>
+    <td>Curly</td>
+    <td></td>
+  </tr>
+</table>
+
+ +

CSS

+ +
.table_1 {
+  empty-cells: show;
+}
+
+.table_2 {
+  empty-cells: hide;
+}
+
+td,
+th {
+  border: 1px solid gray;
+  padding: 0.5rem;
+}
+ +

Result

+ +

{{ EmbedLiveSample('Examples', '100%', '200') }}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS2.1', 'tables.html#empty-cells', 'empty-cells')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.properties.empty-cells")}}

+
diff --git a/files/zh-cn/web/css/env()/index.html b/files/zh-cn/web/css/env()/index.html new file mode 100644 index 0000000000..ff7f9e8bcb --- /dev/null +++ b/files/zh-cn/web/css/env()/index.html @@ -0,0 +1,133 @@ +--- +title: env() +slug: Web/CSS/env() +tags: + - CSS + - env + - env() + - iPhoneX +translation_of: Web/CSS/env() +--- +
{{CSSRef}}
+ +
 env() CSS 函数以类似于 {{cssxref("var")}} 函数和 custom properties 的方式将用户代理定义的环境变量值插入你的 CSS 中。区别在于，环境变量除了由用户代理定义而不是由用户定义外，还被全局作用在文档中，而自定义属性则限定在声明它们的元素中。
+ +
+ +
为了告诉浏览器使用屏幕上所有的可用空间，并以此使用env()变量，我们需要添加一个新的视口元值：
+ +
+
<meta name="viewport" content="... viewport-fit=cover">
+
+ +
body {
+  padding:
+    env(safe-area-inset-top, 20px)
+    env(safe-area-inset-right, 20px)
+    env(safe-area-inset-bottom, 20px)
+    env(safe-area-inset-left, 20px);
+}
+ +

另外，与自定义属性不同，自定义属性不能在声明之外使用，而env()函数可以代替属性值或描述符的任何部分（例如，在 媒体查询的规则 中）。 随着规范的发展，它也可能在像是 选择器 等其他地方使用。

+ +

最初由iOS浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的safe-area-inset-* 值可用于确保内容即使在非矩形的视区中也可以完全显示。

+ +

语法

+ +
/* Using the four safe area inset values with no fallback values */
+env(safe-area-inset-top);
+env(safe-area-inset-right);
+env(safe-area-inset-bottom);
+env(safe-area-inset-left);
+
+/* Using them with fallback values */
+env(safe-area-inset-top, 20px);
+env(safe-area-inset-right, 1em);
+env(safe-area-inset-bottom, 0.5vh);
+env(safe-area-inset-left, 1.4rem);
+
+ +

Values

+ +
+
safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left
+
safe-area-inset-*由四个定义了视口边缘内矩形的 top, right, bottom 和 left 的环境变量组成，这样可以安全地放入内容，而不会有被非矩形的显示切断的风险。对于矩形视口，例如普通的笔记本电脑显示器，其值等于零。 对于非矩形显示器（如圆形表盘，iPhoneX屏幕），在用户代理设置的四个值形成的矩形内，所有内容均可见。
+
+ +

注意: 不同于其他的 CSS 属性，用户代理定义的属性名字对大小写敏感。

+ +

Formal syntax

+ +
{{CSSSyntax}}
+ +

Examples

+ +

下面的示例使用env()的第二个可选参数，如果环境变量不可用，该参数可让您设置备用值

+ +
<p>
+  If the <code>env()</code> function is supported in your browser,
+  this paragraph’s text will have 50px of padding between it and
+  the left border — but not the top, right and bottom.
+  This is because the accompanying CSS is the equivalent of
+  <code>padding: 0 0 0 50px</code>, because, unlike other CSS
+  properties, user agent property names are case-sensitive.
+</p>
+ +
p {
+  width: 300px;
+  border: 2px solid red;
+  padding:
+    env(safe-area-inset-top, 50px)
+    env(safe-area-inset-right, 50px)
+    env(safe-area-inset-bottom, 50px)
+    env(SAFE-AREA-INSET-LEFT, 50px);
+}
+ +

{{EmbedLiveSample("Examples")}}

+ +

Example values

+ +
padding: env(safe-area-inset-bottom, 50px); /* zero for all rectangular user agents */
+padding: env(Safe-area-inset-bottom, 50px); /* 50px because UA properties are case sensitive */
+padding: env(x, 50px 20px); /* as if padding: '50px 20px' were set because x is not a valid environment variable */
+padding: env(x, 50px, 20px); /* ignored because '50px, 20px' is not a valid padding value and x is not a valid environment variable */
+
+ +

向下兼容的语法和自定义属性一样，允许使用逗号。但是如果属性值不支持逗号，则该值无效。

+ +

Note: User agent properties are not reset by the all property.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Environment Variables", "#env-function", "env()")}}{{Spec2("CSS3 Environment Variables")}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.custom-property.env")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/css/filter-function/blur()/index.html b/files/zh-cn/web/css/filter-function/blur()/index.html new file mode 100644 index 0000000000..693f0a5bbe --- /dev/null +++ b/files/zh-cn/web/css/filter-function/blur()/index.html @@ -0,0 +1,49 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur() +tags: + - CSS + - CSS Function + - Filter Effects + - Reference +translation_of: Web/CSS/filter-function/blur() +--- +
{{cssref}}
+ +

blur() CSS 方法将高斯模糊应用于输出图片. 结果为 {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-blur.html")}}
+ + + +

语法

+ +
blur(radius)
+ +

值

+ +
+
radius
+
模糊的半径，值为{{cssxref("<length>")}}。 它定义了高斯函数的标准偏差值，即屏幕上有多少像素相互融合; 因此，较大的值会产生更多模糊。 值为0会使输入保持不变。 该值为空则为0。
+
+ +

示例

+ +
blur(0)        /* No effect */
+blur(8px)      /* Blur with 8px radius */
+blur(1.17rem)  /* Blur with 1.17rem radius */
+ +

参见

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("filter-function/brightness", "brightness()")}}
    • +
  • {{cssxref("filter-function/contrast", "contrast()")}}
    • +
  • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
    • +
  • {{cssxref("filter-function/grayscale", "grayscale()")}}
    • +
  • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}​​​​​​​
    • +
  • {{cssxref("filter-function/invert", "invert()")}}
    • +
  • {{cssxref("filter-function/opacity", "opacity()")}}
    • +
  • {{cssxref("filter-function/saturate", "saturate()")}}
    • +
  • {{cssxref("filter-function/sepia", "sepia()")}}
    • +
diff --git a/files/zh-cn/web/css/filter-function/brightness()/index.html b/files/zh-cn/web/css/filter-function/brightness()/index.html new file mode 100644 index 0000000000..f7ec2f77d5 --- /dev/null +++ b/files/zh-cn/web/css/filter-function/brightness()/index.html @@ -0,0 +1,36 @@ +--- +title: brightness() +slug: Web/CSS/filter-function/brightness() +translation_of: Web/CSS/filter-function/brightness() +--- +
{{cssref}}
+ +

brightness() CSS函数将线性乘数应用于输入图像，使其看起来更亮或更暗。 结果是一个{{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-brightness.html")}}
+ + + +

语法

+ +
brightness(amount)
+ +

值

+ +
+
amount
+
输出的亮度值取决于{{cssxref("<number>")}}或{{cssxref("<percentage>")}}的大小. 低于100% 的值会使图片变暗, 超过100%的值将会使其变亮.当值为0%时将会创建一个全黑的图像, 当值为100%时不会有任何变化. 该值为空时默认为1.
+
+ +

例子

+ +
brightness(0%)   /* 全黑 */
+brightness(0.4)  /* 40% 亮度 */
+brightness(1)    /* 无效果 */
+brightness(200%) /* 两倍亮度 */
+ +

参见

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/zh-cn/web/css/filter-function/contrast()/index.html b/files/zh-cn/web/css/filter-function/contrast()/index.html new file mode 100644 index 0000000000..e03364015d --- /dev/null +++ b/files/zh-cn/web/css/filter-function/contrast()/index.html @@ -0,0 +1,45 @@ +--- +title: contrast() +slug: Web/CSS/filter-function/contrast() +translation_of: Web/CSS/filter-function/contrast() +--- +
{{cssref}}
+ +

contrast() CSS 函数调整输入图像的对比度. 结果是一个 {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-contrast.html")}}
+ + + +

语法

+ +
contrast(amount)
+ +

参数

+ +
+
amount
+
输出的对比度取决于 {{cssxref("<number>")}}或者{{cssxref("<percentage>")}}的大小. 低于 100%  的值会降低对比度, 高于 100% 的值会增加对比度. 值为 0% 将创建完全灰色的图像, 值为 100% 时不会有任何变化. 该值为空时默认为 1.
+
+ +

例子

+ +
contrast(0)     /* 完全灰色 */
+contrast(65%)   /* 65% 对比度 */
+contrast(1)     /* 无效果 */
+contrast(200%)  /* 两倍对比度 */
+ +

参见

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("filter-function/blur", "blur()")}}
    • +
  • {{cssxref("filter-function/brightness", "brightness()")}}
    • +
  • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
    • +
  • {{cssxref("filter-function/grayscale", "grayscale()")}}
    • +
  • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
    • +
  • {{cssxref("filter-function/invert", "invert()")}}
    • +
  • {{cssxref("filter-function/opacity", "opacity()")}}
    • +
  • {{cssxref("filter-function/saturate", "saturate()")}}
    • +
  • {{cssxref("filter-function/sepia", "sepia()")}}
    • +
diff --git a/files/zh-cn/web/css/filter-function/drop-shadow()/index.html b/files/zh-cn/web/css/filter-function/drop-shadow()/index.html new file mode 100644 index 0000000000..7875c9932f --- /dev/null +++ b/files/zh-cn/web/css/filter-function/drop-shadow()/index.html @@ -0,0 +1,65 @@ +--- +title: drop-shadow() +slug: Web/CSS/filter-function/drop-shadow() +translation_of: Web/CSS/filter-function/drop-shadow() +--- +
{{cssref}}
+ +

The drop-shadow() CSS function applies a drop shadow effect to the input image. Its result is a {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}}
+ + + +

投影实际上是输入图像的alpha蒙版的一个模糊的、偏移的版本，用特定的颜色绘制并合成在图像下面。

+ +
+

注意: 这个函数有点类似于 {{Cssxref("box-shadow")}} 属性.  box-shadow 属性在元素的整个框后面创建一个矩形阴影, 而 drop-shadow() 过滤器则是创建一个符合图像本身形状(alpha通道)的阴影。

+
+ +

Syntax

+ +
drop-shadow(offset-x offset-y blur-radius spread-radius color)
+ +

The drop-shadow() function accepts a parameter of type <shadow> (defined in the {{cssxref("box-shadow")}} property), with the exception that the inset keyword is not allowed.

+ +

Parameters

+ +
+
offset-x offset-y (required)
+
offset-x指定水平距离，其中负值将阴影放置到元素的左侧。offset-y指定垂直距离，其中负值将阴影置于元素之上。如果两个值都为 0，则阴影直接放置在元素后面。
+
blur-radius (optional)
+
阴影的模糊半径，指定为 {{cssxref("<length>")}}。值越大，阴影就越大，也越模糊。如果未指定，则默认为 0，从而产生清晰、不模糊的边缘。不允许有负值。
+
spread-radius (optional)
+
阴影的扩展半径，指定为 {{cssxref("<length>")}}. 正的值会导致阴影扩大和变大，而负的值会导致阴影缩小。如果未指定，则默认为0，阴影的大小将与输入图像相同。
+
+
大多数浏览器不支持这个参数;如果使用，效果将不会呈现。截止2020年10,14日,Chrome  v.85.0.4183.121（正式版本）,Microsoft Edge Beta  v85.0.564.63(64位), Firefox v.85.0.564.63 暂未支持
+
+
color (optional)
+
阴影的颜色，指定为 {{cssxref("<color>")}}。如果未指定，则使用 {{cssxref("color")}} 属性的值。
+
+ +

Examples

+ +
/* Black shadow with 10px blur */
+drop-shadow(16px 16px 10px black)
+
+/* Reddish shadow with 1rem blur and .3rem spread */
+/* WARNING: not generally supported by browsers */
+drop-shadow(.5rem .5rem 1rem .3rem #e23)
+ +

See also

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • CSS {{cssxref("box-shadow")}} property
    • +
  • {{cssxref("filter-function/blur", "blur()")}}
    • +
  • {{cssxref("filter-function/brightness", "brightness()")}}
    • +
  • {{cssxref("filter-function/contrast", "contrast()")}}
    • +
  • {{cssxref("filter-function/grayscale", "grayscale()")}}
    • +
  • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
    • +
  • {{cssxref("filter-function/invert", "invert()")}}
    • +
  • {{cssxref("filter-function/opacity", "opacity()")}}
    • +
  • {{cssxref("filter-function/saturate", "saturate()")}}
    • +
  • {{cssxref("filter-function/sepia", "sepia()")}}
    • +
diff --git a/files/zh-cn/web/css/filter-function/grayscale()/index.html b/files/zh-cn/web/css/filter-function/grayscale()/index.html new file mode 100644 index 0000000000..6f7793c6b0 --- /dev/null +++ b/files/zh-cn/web/css/filter-function/grayscale()/index.html @@ -0,0 +1,35 @@ +--- +title: grayscale() +slug: Web/CSS/filter-function/grayscale() +translation_of: Web/CSS/filter-function/grayscale() +--- +
{{cssref}}
+ +

grayscale() : 对图片进行灰度转换, 它是 {{cssxref("<filter-function>")}} 的子属性.

+ +
{{EmbedInteractiveExample("pages/css/function-grayscale.html")}}
+ + + +

语法

+ +
grayscale(amount)
+ +

参数

+ +
+
amount
+
转换值的大小, 可以是{{cssxref("<number>")}} 或 {{cssxref("<percentage>")}}. 当值为100%时, 灰度最大. 0%时与原图没有区别. 0% 到 100% 之间的值会使灰度线性变化. amount 为空时使用值为1.
+
+ +

例子

+ +
grayscale(0)     /* 无效果 */
+grayscale(.7)    /* 70% 灰度 */
+grayscale(100%)  /* 灰度最大 */
+ +

更多

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/zh-cn/web/css/filter-function/index.html b/files/zh-cn/web/css/filter-function/index.html new file mode 100644 index 0000000000..8a2be3c37a --- /dev/null +++ b/files/zh-cn/web/css/filter-function/index.html @@ -0,0 +1,68 @@ +--- +title: +slug: Web/CSS/filter-function +tags: + - CSS + - CSS Data Type + - Filter Effects + - NeedsCompatTable + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/filter-function +--- +
{{cssref}}
+ +

 <filter-function> CSS 数据类型 代表可以改变输入图像外观的图形效果。它可以用于{{cssxref("filter")}} 和 {{cssxref("backdrop-filter")}} 属性。

+ +

语法

+ +

<filter-function> 数据类型由下列过滤器函数之一指定的。每个函数需要一个参数，如果参数无效，结果不会被改变，如同没有使用过滤器一样。

+ +
+
blur()
+
模糊图像
+
brightness()
+
让图像更明亮或更暗淡
+
contrast()
+
增加或减少图像的对比度
+
drop-shadow()
+
在图像后方应用投影
+
grayscale()
+
将图像转为灰度图
+
hue-rotate()
+
改变图像的整体色调
+
invert()
+
反转图像颜色
+
opacity()
+
改变图像透明度
+
saturate()
+
超饱和或去饱和输入的图像
+
sepia()
+
将图像转为棕褐色
+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
{{ SpecName('Filters 1.0', '#typedef-filter-function', '<filter-function>') }}{{ Spec2('Filters 1.0') }}初始版本
+ +

相关参考

+ +
    +
  • 使用此数据类型的属性: {{cssxref("filter")}} 以及 {{cssxref("backdrop-filter")}}
    • +
diff --git a/files/zh-cn/web/css/filter-function/opacity()/index.html b/files/zh-cn/web/css/filter-function/opacity()/index.html new file mode 100644 index 0000000000..877b0dcf4e --- /dev/null +++ b/files/zh-cn/web/css/filter-function/opacity()/index.html @@ -0,0 +1,40 @@ +--- +title: opacity() +slug: Web/CSS/filter-function/opacity() +translation_of: Web/CSS/filter-function/opacity() +--- +
{{cssref}}
+ +

The opacity() CSS 函数在输入的图片实例上应用透明度属性，它的结果是一个 {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-opacity.html")}}
+ + + +
+

Note: 这个函数与其他既有的{{Cssxref("opacity")}}属性类似，区别在于有了filters，有些浏览器会提供硬件加速以获取更好的性能表现。

+
+ +

语法

+ +
opacity(amount)
+ +

参数

+ +
+
amount
+
转化的数值，要求是一个 {{cssxref("<number>")}} 或一个 {{cssxref("<percentage>")}}（百分比）。值为 0% 是完全透明的,值为100%会保留原来的效果。值在0%与100%之间效果为线性变化的，参数的最小差值为1。
+
+ +

Examples

+ +
opacity(0%)   /* 完全透明*/
+opacity(50%)  /* 50% 透明 */
+opacity(1)    /* 无效果 */
+ +

See also

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • CSS {{cssxref("opacity")}} property
    • +
diff --git a/files/zh-cn/web/css/filter/index.html b/files/zh-cn/web/css/filter/index.html new file mode 100644 index 0000000000..0bb84948cb --- /dev/null +++ b/files/zh-cn/web/css/filter/index.html @@ -0,0 +1,1118 @@ +--- +title: filter +slug: Web/CSS/filter +tags: + - CSS + - SVG + - SVG Filter + - filter +translation_of: Web/CSS/filter +--- +

{{CSSRef}}

+ +

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

+ +

CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG滤镜，通过一个URL链接到SVG滤镜元素(SVG filter element)。

+ +
{{EmbedInteractiveExample("pages/css/filter.html")}}
+ + + +

语法

+ +
/* URL to SVG filter */
+filter: url("filters.svg#filter-id");
+
+/* <filter-function> values */
+filter: blur(5px);
+filter: brightness(0.4);
+filter: contrast(200%);
+filter: drop-shadow(16px 16px 20px blue);
+filter: grayscale(50%);
+filter: hue-rotate(90deg);
+filter: invert(75%);
+filter: opacity(25%);
+filter: saturate(30%);
+filter: sepia(60%);
+
+/* Multiple filters */
+filter: contrast(175%) brightness(3%);
+
+/* Global values */
+filter: inherit;
+filter: initial;
+filter: unset;
+
+ +

设置一种函数，方法如下：

+ +
filter: <filter-function> [<filter-function>]* | none
+
+ +

给SVG元素 {{ SVGElement("filter") }}引用滤镜, 如下：

+ +
filter: url(svg-url#element-id)
+
+ +

插值

+ +

如果起始和结束过滤器都有一个不含{{cssxref("<url>")}}的相同长度的函数列表，则会根据其指定的规则对其每个过滤器函数进行插值。如果它们的长度不同，较长列表中确实的等效过滤器函数将使用空白的值添加到较短列表的尾部，然后所有的过滤器函数根据其特定的规则插值。如果一个过滤器是none则会使用过滤器函数的默认值替换函数列表，然后根据特定的规则进行插值，否则使用离散插值。

+ +

形式语法

+ +
{{csssyntax}}
+ +

实例

+ +

下面的例子是使用预设的滤镜函数。每个函数都有特定的例子.

+ +
.mydiv { filter: grayscale(50%) }
+
+/* gray all images by 50% and blur by 10px */
+img {
+  filter: grayscale(0.5) blur(10px);
+}
+ +

下面的例子展示：通过url函数引入一个svg资源.

+ +
.target { filter: url(#c1); }
+
+.mydiv { filter: url(commonfilters.xml#large-blur) }
+
+ +

函数

+ +

使用CSS滤镜属性，你需要设定下面某一函数的值。如果该值无效，函数返回“none“。除特殊说明外，函数的值如果接受百分比值（如34%），那么该函数也接受小数值（如0.34）。

+ +

url()

+ +

URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素.

+ +
filter: url(resources.svg#c1)
+
+ +

blur()

+ +

给图像设置高斯模糊。“radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

+ +
filter: blur(5px)
+
+ + + +
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
+  </filter>
+</svg>
+ +

{{EmbedLiveSample('blur_example','100%','236px','')}}

+ +

brightness()

+ +

给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。

+ +
filter: brightness(0.5)
+ +
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+ <filter id="brightness">
+    <feComponentTransfer>
+        <feFuncR type="linear" slope="[amount]"/>
+        <feFuncG type="linear" slope="[amount]"/>
+        <feFuncB type="linear" slope="[amount]"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+ + + +

{{EmbedLiveSample('brightness_example','100%','231px','')}}

+ +

contrast()

+ +

调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。

+ +
filter: contrast(200%)
+
+ +
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+  <filter id="contrast">
+    <feComponentTransfer>
+      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+
+ + + +

{{EmbedLiveSample('contrast_example','100%','203px','')}}

+ +

drop-shadow()

+ +

给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>（在CSS3背景中定义）类型的值，除了“inset”关键字是不允许的。该函数与已有的box-shadow {{cssxref("box-shadow")}}属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。 <shadow>参数如下：

+ +
+
<offset-x> <offset-y> (必须)
+
这是设置阴影偏移量的两个 {{cssxref("<length>")}}值. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。.查看 {{cssxref("<length>")}}可能的单位.
+ 如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 <blur-radius> and/or <spread-radius>，会有模糊效果).
+
<blur-radius> (可选)
+
这是第三个 {{cssxref("<length>")}}值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利).
+
<spread-radius> (可选)
+
这是第四个 {{cssxref("<length>")}} 值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). 
+ 注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。
+
<color> (可选)
+
查看 {{cssxref("<color>")}}该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用 {{ cssxref("color") }}属性的值。另外，如果颜色值省略，WebKit中阴影是透明的。
+
+ +
filter: drop-shadow(16px 16px 10px black)
+ +
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+ <filter id="drop-shadow">
+    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
+    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
+    <feFlood flood-color="[color]"/>
+    <feComposite in2="offsetblur" operator="in"/>
+    <feMerge>
+      <feMergeNode/>
+      <feMergeNode in="SourceGraphic"/>
+    </feMerge>
+  </filter>
+</svg>
+
+ + + +

{{EmbedLiveSample('shadow_example','100%','300px','')}}

+ +

grayscale()

+ +

将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。

+ +
filter: grayscale(100%)
+ + + +

{{EmbedLiveSample('grayscale_example','100%','209px','')}}

+ +

hue-rotate()

+ +

给图像应用色相旋转。“angle”一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

+ +
filter: hue-rotate(90deg)
+ + + +

{{EmbedLiveSample('huerotate_example','100%','221px','')}}

+ +

invert()

+ +

反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。

+ +
filter: invert(100%)
+ + + +

{{EmbedLiveSample('invert_example','100%','407px','')}}

+ +

opacity()

+ +

转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

+ +
filter: opacity(50%)
+ + + +

{{EmbedLiveSample('opacity_example','100%','210px','')}}

+ +

saturate()

+ +

转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。

+ +
filter: saturate(200%)
+ + + +

{{EmbedLiveSample('saturate_example','100%','332px','')}}

+ +

sepia()

+ +

将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。

+ +
filter: sepia(100%)
+ + + +

{{EmbedLiveSample('sepia_example','100%','229px','')}}

+ +

复合函数

+ +

你可以组合任意数量的函数来控制渲染。下面的例子可以增强图像的对比度和亮度。

+ +
filter: contrast(175%) brightness(3%)
+ + + +

{{EmbedLiveSample('combination_example','100%','209px','')}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }}{{ Spec2('Filters 1.0') }}Initial definition.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ +

{{Compat("css.properties.filter")}}

+ +

查看更多

+ + diff --git a/files/zh-cn/web/css/fit-content/index.html b/files/zh-cn/web/css/fit-content/index.html new file mode 100644 index 0000000000..ac7b3d2737 --- /dev/null +++ b/files/zh-cn/web/css/fit-content/index.html @@ -0,0 +1,106 @@ +--- +title: fit-content() +slug: Web/CSS/fit-content +translation_of: Web/CSS/fit-content +--- +
{{CSSRef}}
+ +

fit-content() CSS 函数将给定大小夹紧为可用大小 根据公式 min(maximum size, max(minimum size, argument)).

+ +
/* <length> values */
+fit-content(200px)
+fit-content(5cm)
+fit-content(30vw)
+fit-content(100ch)
+
+/* <percentage> value */
+fit-content(40%)
+
+ +

The function can be used as a track size in CSS Grid properties, where the maximum size is defined by max-content and the minimum size by auto, which is calculated similar to auto (i.e., minmax(auto, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum.

+ +

The function can also be used as laid out box size for {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} and {{cssxref("max-height")}}, where the maximum and minimum sizes refer to the content size.

+ +

Syntax

+ +

The fit-content() function accepts a <length> or a <percentage> as an argument.

+ +

Values

+ +
+
{{cssxref("<length>")}}
+
An absolute length.
+
{{cssxref("<percentage>")}}
+
A percentage relative to the available space in the given axis.
+
In grid properties it is relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. Otherwise it is relative to the available inline size or block size of the laid out box depending on the writing mode.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>Item as wide as the content.</div>
+  <div>
+    Item with more text in it. Because the contents of it are
+    wider than the maximum width, it is clamped at 300 pixels.
+  </div>
+  <div>Flexible item</div>
+</div>
+ +

Result

+ +

{{EmbedLiveSample("Example", "100%", 200)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}}{{Spec2("CSS3 Sizing")}}Defines the function as laid out box size for {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} and {{cssxref("max-height")}}.
{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}{{Spec2("CSS Grid")}}Defines the function when used as a track size.
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.grid-template-columns.fit-content")}}

diff --git a/files/zh-cn/web/css/flex-basis/index.html b/files/zh-cn/web/css/flex-basis/index.html new file mode 100644 index 0000000000..d23edb5b0f --- /dev/null +++ b/files/zh-cn/web/css/flex-basis/index.html @@ -0,0 +1,215 @@ +--- +title: flex-basis +slug: Web/CSS/flex-basis +tags: + - CSS + - CSS 属性 + - CSS 弹性盒子 + - 参考 +translation_of: Web/CSS/flex-basis +--- +
{{CSSRef}}
+ +

CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用  {{Cssxref("box-sizing")}} 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

+ +
{{EmbedInteractiveExample("pages/css/flex-basis.html")}}
+ +
+ + + +
+

Note: 当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级.

+
+ +

语法

+ +
/* 指定<'width'> */
+flex-basis: 10em;
+flex-basis: 3px;
+flex-basis: auto;
+
+/* 固有的尺寸关键词 */
+flex-basis: fill;
+flex-basis: max-content;
+flex-basis: min-content;
+flex-basis: fit-content;
+
+/* 在flex item内容上的自动尺寸 */
+flex-basis: content;
+
+/* 全局数值 */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+
+ +

这个 flex-basis 属性 被指定为关键词 content 或者 <'width'>.

+ +

取值

+ +
+
<'width'>
+
+

width 值可以是 {{cssxref("<length>")}}; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的{{cssxref("<percentage>", "百分数")}} 。负值是不被允许的。默认为 auto。

+
+
content
+
基于 flex 的元素的内容自动调整大小。
+
+
Note:由于最初规范中没有包括这个值，在一些早期的浏览器实现的flex布局中，content值无效，可以利用设置(width 或 height) 为 auto达到同样的效果.
+ +
+

Note:简史

+ +
    +
  • 最初, "flex-basis:auto" 的含义是 "参照我的width和height属性".
    • +
  • 在此之后, "flex-basis:auto" 的含义变成了自动尺寸, 而 "main-size" 变成了 "参照我的width和height属性"。实际执行于 bug 1032922.
    • +
  • 然后呢, 这个更改又在 bug 1093316 中被撤销了, 所以 "auto" 变回了原来的含义; 而一个新的关键字 'content' 变成了自动尺寸。 ({{bug("1105111")}} 包括了增加这个关键字).
    • +
+
+
+
+ +

规范

+ +
{{csssyntax}}
+ +

例子

+ +

HTML

+ +
<ul class="container">
+  <li class="flex flex1">1: flex-basis test</li>
+  <li class="flex flex2">2: flex-basis test</li>
+  <li class="flex flex3">3: flex-basis test</li>
+  <li class="flex flex4">4: flex-basis test</li>
+  <li class="flex flex5">5: flex-basis test</li>
+</ul>
+
+<ul class="container">
+  <li class="flex flex6">6: flex-basis test</li>
+</ul>
+
+ +

CSS

+ +
.container {
+  font-family: arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex {
+  background: #6AB6D8;
+  padding: 10px;
+  margin-bottom: 50px;
+  border: 3px solid #2E86BB;
+  color: white;
+  font-size: 20px;
+  text-align: center;
+  position: relative;
+}
+
+.flex:after {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 100%;
+  margin-top: 10px;
+  width: 100%;
+  color: #333;
+  font-size: 18px;
+}
+
+.flex1 {
+  flex-basis: auto;
+}
+
+.flex1:after {
+  content: 'auto';
+}
+
+.flex2 {
+  flex-basis: max-content;
+}
+
+.flex2:after {
+  content: 'max-content';
+}
+
+.flex3 {
+  flex-basis: min-content;
+}
+
+.flex3:after {
+  content: 'min-content';
+}
+
+.flex4 {
+  flex-basis: fit-content;
+}
+
+.flex4:after {
+  content: 'fit-content';
+}
+
+.flex5 {
+   flex-basis: content;
+}
+
+.flex5:after {
+  content: 'content';
+}
+
+.flex6 {
+  flex-basis: fill;
+}
+
+.flex6:after {
+  content: 'fill/-webkit-fill-available/-moz-available';
+}
+
+ +

结果

+ +

{{EmbedLiveSample('例子', '860', '360', '', 'Web/CSS/flex-basis')}}

+ +

规格

+ + + + + + + + + + + + + + + + +
规格状态评论
{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}{{Spec2('CSS3 Flexbox')}}初始化定义
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +
+ +

{{Compat("css.properties.flex-basis")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/flex-direction/index.html b/files/zh-cn/web/css/flex-direction/index.html new file mode 100644 index 0000000000..8a63ba1e6e --- /dev/null +++ b/files/zh-cn/web/css/flex-direction/index.html @@ -0,0 +1,194 @@ +--- +title: flex-direction +slug: Web/CSS/flex-direction +translation_of: Web/CSS/flex-direction +--- +

{{ CSSRef("CSS Flexible Boxes") }}

+ +

CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。

+ +
/* The direction text is laid out in a line */
+flex-direction: row;
+
+/* Like <row>, but reversed */
+flex-direction: row-reverse;
+
+/* The direction in which lines of text are stacked */
+flex-direction: column;
+
+/* Like <column>, but reversed */
+flex-direction: column-reverse;
+
+/* Global values */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+ +

请注意，值 row 和 row-reverse 受 flex 容器的方向性的影响。 如果它的 dir 属性是 ltr，row 表示从左到右定向的水平轴，而 row-reverse 表示从右到左; 如果 dir 属性是 rtl，row 表示从右到左定向的轴，而 row-reverse 表示从左到右。

+ +

{{cssinfo}}

+ +

查看 使用 CSS 弹性盒子 以了解更多的属性和信息.

+ +

语法

+ +

取值

+ +

接受以下取值:

+ +
+
row
+
flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。
+
row-reverse
+
表现和row相同，但是置换了主轴起点和主轴终点
+
column
+
flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
+
column-reverse
+
表现和column相同，但是置换了主轴起点和主轴终点
+
+

语法格式

+
+
+ +
{{csssyntax("flex-direction")}}
+
+ +

例子

+ +

HTML

+ +
<h4>This is a Column-Reverse</h4>
+<div id="content">
+    <div id="box" style="background-color:red;">A</div>
+    <div id="box" style="background-color:lightblue;">B</div>
+    <div id="box" style="background-color:yellow;">C</div>
+</div>
+<h4>This is a Row-Reverse</h4>
+<div id="content1">
+    <div id="box1" style="background-color:red;">A</div>
+    <div id="box1" style="background-color:lightblue;">B</div>
+    <div id="box1" style="background-color:yellow;">C</div>
+</div>
+ +

CSS

+ +
#content {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: -webkit-flex;
+  -webkit-flex-direction: column-reverse;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+#box {
+  width: 50px;
+  height: 50px;
+}
+
+#content1 {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: -webkit-flex;
+  -webkit-flex-direction: row-reverse;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+#box1 {
+  width: 50px;
+  height: 50px;
+}
+ +

结果

+ +

{{ EmbedLiveSample('例子', '', '300', '', 'Web/CSS/flex-direction') }}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction') }}{{ Spec2('CSS3 Flexbox') }} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("18.0")}} (behind a pref) [1] [2]
+ {{CompatGeckoDesktop("20.0")}} [2]		21.0{{ property_prefix("-webkit") }} +

10 {{ property_prefix("-ms") }}
+ 11

+ 		12.10 +

7 {{ property_prefix("-webkit") }}

+
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatNo() }}12.10{{ CompatNo() }}
+
+ +

[1] 要激活Firefox 18和19的flexbox支持，用户必须将about：config首选项“layout.css.flexbox.enabled”更改为true。

+ +

[2] 从Firefox 28开始支持多行flexbox。

+ +

除了无前缀的支持外，Gecko 48.0{{geckoRelease("48.0")}}由于web兼容性原因，在首选项“layout.css.prefixes.webkit”之后增加了-webkit前缀版本的支持，默认设为false。 由于Gecko 49.0 {{geckoRelease("49.0")}}，首选项默认为true。

+ +

参考

+ + diff --git a/files/zh-cn/web/css/flex-flow/index.html b/files/zh-cn/web/css/flex-flow/index.html new file mode 100644 index 0000000000..bbdf1afc30 --- /dev/null +++ b/files/zh-cn/web/css/flex-flow/index.html @@ -0,0 +1,110 @@ +--- +title: flex-flow +slug: Web/CSS/flex-flow +translation_of: Web/CSS/flex-flow +--- +
{{ CSSRef("CSS Flexible Boxes") }}
+ +

概述

+ +

+ CSS flex-flow 属性是 flex-direction 和 flex-wrap 的简写。 +

+ +

{{cssinfo}}

+ +

更多信息参见 使用 CSS 弹性盒

+ +

语法

+ +
Formal syntax: {{csssyntax("flex-flow")}}
+ +

取值

+ +

更多取值信息请查看 flex-direction 和 flex-wrap

+ +

示例

+ +
element {
+  /* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */
+  flex-flow: column-reverse wrap;
+}
+
+ +

查询参考

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
CSS Flexible Box Layout Module{{ Spec2('CSS3 Flexbox') }} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
特性Firefox (Gecko)ChromeInternet ExplorerOperaSafari
基础支持28.0 +

21.0{{property_prefix("-webkit")}}
+ 29.0

+ 		1112.106.1{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
基础支持28.0{{ CompatUnknown() }}1112.107.1{{ property_prefix("-webkit") }}
+
+ +

另参见

+ + diff --git a/files/zh-cn/web/css/flex-grow/index.html b/files/zh-cn/web/css/flex-grow/index.html new file mode 100644 index 0000000000..a1f96403f6 --- /dev/null +++ b/files/zh-cn/web/css/flex-grow/index.html @@ -0,0 +1,132 @@ +--- +title: flex-grow +slug: Web/CSS/flex-grow +tags: + - CSS属性 + - CSS弹性盒 + - 布局 + - 网络 +translation_of: Web/CSS/flex-grow +--- +
{{CSSRef}}
+ +

CSS属性 flex-grow设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数）。

+ +

主尺寸是项的宽度或高度，这取决于{{cssxref("flex-direction")}}值。

+ +

剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的flex-grow系数定义的比例进行分配。

+ +

flex-grow 与其他的flex属性{{cssxref("flex-shrink")}}和{{cssxref("flex-basis")}}一起使用，通常使用{{cssxref("flex")}} 速记来定义，以确保所有的值都被设置。

+ +
{{EmbedInteractiveExample("pages/css/flex-grow.html")}}
+ + + +

更多属性和信息请参见使用 CSS 弹性盒子。

+ +

语法

+ +
CSS 属性值定义语法: {{csssyntax("flex-grow")}}
+
+ +
/* <number> values */
+flex-grow: 3;
+flex-grow: 0.6;
+
+/* 全局 values */
+flex-grow: inherit;
+flex-grow: initial;
+flex-grow: unset;
+ +

值

+ +
+
<number>
+
参见 {{cssxref("<number>")}}。负值无效，默认为0。
+
+

正式语法

+ + 
{{csssyntax}}
+
+
+ +

例子：

+ +

HTML

+ +
+
<h4>This is a Flex-Grow</h4>
+<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+  <div class="box" style="background-color:brown;">F</div>
+</div>
+ +

CSS

+ +
#content {
+  display: flex;
+
+  justify-content: space-around;
+  flex-flow: row wrap;
+  align-items: stretch;
+}
+
+.box {
+  flex-grow: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box1 {
+  flex-grow: 2;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+ +

结果

+ +

{{EmbedLiveSample('Example', '700px', '300px', '', 'Web/CSS/flex-grow')}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
CSS灵活包装盒布局模块{{Spec2('CSS3 Flexbox')}}初步定义
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.flex-grow")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/flex-shrink/index.html b/files/zh-cn/web/css/flex-shrink/index.html new file mode 100644 index 0000000000..1f95357a2b --- /dev/null +++ b/files/zh-cn/web/css/flex-shrink/index.html @@ -0,0 +1,173 @@ +--- +title: flex-shrink +slug: Web/CSS/flex-shrink +tags: + - CSS + - CSS Property + - CSS 属性 + - Reference + - 参考 + - 弹性盒 +translation_of: Web/CSS/flex-shrink +--- +
{{ CSSRef}}
+ +

CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

+ +
flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* Global values */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset
+ +

{{cssinfo}}

+ +

更多属性和定义请参见使用 CSS 弹性盒子

+ +

语法

+ +

flex-shrink 属性只能是一个 <number>。

+ +

取值

+ +
+
<number>
+
负值是不被允许的。参考 {{cssxref("<number>")}}。
+
+

Formal syntax

+ + 
{{csssyntax}}
+
+
+ +

示例

+ +

HTML

+ +
<p>the width of content is 500px, flex-basic of flex item is 120px.</p>
+<p>A, B, C are flex-shrink:1. D and E are flex-shrink:2</p>
+<p>the width of D is not the same as A's</p>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+</div>
+ +

CSS

+ +
#content {
+  display: flex;
+  width: 500px;
+}
+
+#content div {
+  flex-basis: 120px;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box {
+  flex-shrink: 1;
+}
+
+.box1 {
+  flex-shrink: 2;
+}
+ +

结果

+ +

{{EmbedLiveSample('示例', '500px', '300px', '', 'Web/CSS/flex-shrink')}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }}{{ Spec2('CSS3 Flexbox') }} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("18.0")}}[1]
+ {{CompatGeckoDesktop("32.0")}}[2]		21.0{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		10[3]12.108.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile("18.0")}}[1]
+ {{CompatGeckoMobile("32.0")}}[2]		{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatNo}}12.10{{CompatNo}}
+
+ +

[1] Firefox 仅支持单行 flexbox 直到 Firefox 28版本。To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true.

+ +

In addition to the unprefixed support, Gecko 48.0 {{geckoRelease("48.0")}} added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

+ +

[2] 在 Firefox 32 之前，Gecko不能将动画从0开始或停止在0(Spec,Demo).。

+ +

[3] Internet Explorer 10 使用 0 而不是 1 作为 flex-shrink 属性的初始值。A workaround is to always set an explicit value for flex-shrink. See Flexbug #6 for more info.

+ +

参考

+ + diff --git a/files/zh-cn/web/css/flex-wrap/index.html b/files/zh-cn/web/css/flex-wrap/index.html new file mode 100644 index 0000000000..7fc3f1b342 --- /dev/null +++ b/files/zh-cn/web/css/flex-wrap/index.html @@ -0,0 +1,193 @@ +--- +title: flex-wrap +slug: Web/CSS/flex-wrap +tags: + - CSS3 + - Default value + - Flex + - flex-wrap +translation_of: Web/CSS/flex-wrap +--- +

{{ CSSRef("CSS Flexible Boxes") }}

+ +

概述

+ +

CSS flex-wrap 指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。

+ +

{{cssinfo}}

+ +

参考 使用 CSS 弹性盒子 查看更多的属性和信息

+ +

语法

+ +
flex-wrap: nowrap;  /* Default value */
+flex-wrap: wrap;
+flex-wrap: wrap-reverse;
+
+/* Global values */
+flex-wrap: inherit;
+flex-wrap: initial;
+flex-wrap: unset;
+
+ +

取值

+ +

下面这些值是可以接受的:

+ +
+
nowrap
+
flex 的元素被摆放到到一行，这可能导致溢出 flex 容器。 cross-start  会根据 {{cssxref("flex-direction")}} 的值 相当于 start 或 before。
+
wrap
+
flex 元素 被打断到多个行中。cross-start 会根据 {{cssxref("flex-direction")}} 的值选择等于start 或before。cross-end 为确定的 cross-start 的另一端。
+
wrap-reverse
+
和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。
+
+

语法格式

+
+
+ +
{{csssyntax}}
+
+ +

例子

+ +

HTML

+ +
<h4>This is an example for flex-wrap:wrap </h4>
+<div class="content">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+<h4>This is an example for flex-wrap:nowrap </h4>
+<div class="content1">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+<h4>This is an example for flex-wrap:wrap-reverse </h4>
+<div class="content2">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+ +

CSS

+ +
/* Common Styles */
+.content,
+.content1,
+.content2 {
+    color: #fff;
+    font: 100 24px/100px sans-serif;
+    height: 150px;
+    text-align: center;
+}
+
+.content div,
+.content1 div,
+.content2 div {
+    height: 50%;
+    width: 50%;
+}
+.red {
+    background: orangered;
+}
+.green {
+    background: yellowgreen;
+}
+.blue {
+    background: steelblue;
+}
+
+/* Flexbox Styles */
+.content {
+    display: flex;
+    flex-wrap: wrap;
+}
+.content1 {
+    display: flex;
+    flex-wrap: nowrap;
+}
+.content2 {
+    display: flex;
+    flex-wrap: wrap-reverse;
+}
+ +

结果

+ +

{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}{{ Spec2('CSS3 Flexbox') }}                    
+ +

浏览器兼容性

+ + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support28.029.012.011.0[1]17.09.0
+ + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox for Android (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Basic support52.04.412.011.012.19.2
+ +

参考

+ + diff --git a/files/zh-cn/web/css/flex/index.html b/files/zh-cn/web/css/flex/index.html new file mode 100644 index 0000000000..9911e9c77d --- /dev/null +++ b/files/zh-cn/web/css/flex/index.html @@ -0,0 +1,299 @@ +--- +title: flex +slug: Web/CSS/flex +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - CSS 弹性盒子布局 + - Flex + - Reference +translation_of: Web/CSS/flex +--- +
{{CSSRef}}
+ +

flex CSS简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

+ +
{{EmbedInteractiveExample("pages/css/flex.html")}}
+ + + +

成分属性

+ +

此属性是以下CSS属性的简写：

+ +
    +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
+ +
+ +

语法

+ +
/* 关键字值 */
+flex: auto;
+flex: initial;
+flex: none;
+
+/* 一个值, 无单位数字: flex-grow */
+flex: 2;
+
+/* 一个值, width/height: flex-basis */
+flex: 10em;
+flex: 30px;
+flex: min-content;
+
+/* 两个值: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* 两个值: flex-grow | flex-shrink */
+flex: 2 2;
+
+/* 三个值: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/*全局属性值 */
+flex: inherit;
+flex: initial;
+flex: unset;
+
+ +

可以使用一个，两个或三个值来指定 flex属性。

+ +

单值语法: 值必须为以下其中之一:

+ +
    +
  • 一个无单位数({{cssxref("<number>")}}): 它会被当作<flex-grow>的值。
    • +
  • 一个有效的宽度({{cssxref("width")}})值: 它会被当作 <flex-basis>的值。
    • +
  • 关键字none，auto或initial.
    • +
+ +

双值语法: 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一：

+ +
    +
  • 一个无单位数：它会被当作 <flex-shrink> 的值。
    • +
  • 一个有效的宽度值: 它会被当作 <flex-basis> 的值。
    • +
+ +

三值语法:

+ +
    +
  • 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
    • +
  • 第二个值必须为一个无单位数，并且它会被当作  <flex-shrink> 的值。
    • +
  • 第三个值必须为一个有效的宽度值， 并且它会被当作 <flex-basis> 的值。
    • +
+ +

取值

+ +
+
initial
+
元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为"flex: 0 1 auto"。
+
+ +
+
auto
+
元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".
+
none
+
元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。
+
<'flex-grow'>
+
定义 flex 项目的 {{cssxref("flex-grow")}} 。负值无效。省略时默认值为 1。 (初始值为 0)
+
<'flex-shrink'>
+
定义 flex 元素的 {{cssxref("flex-shrink")}} 。负值无效。省略时默认值为1。 (初始值为 1)
+
<'flex-basis'>
+
定义 flex 元素的 {{cssxref("flex-basis")}} 属性。若值为0，则必须加上单位，以免被视作伸缩性。省略时默认值为 auto。(初始值为 0)
+
+

描述

+
+
+ +

大多数情况下，开发者需要将 flex 设置为以下值之一： auto，initial，none，或一个无单位正数。要查看这些值的效果，请尝试调整以下 flex容器的大小：

+ +
+ + + + +

{{EmbedLiveSample("flex", 1200, 370, "", "", "example-outcome-frame")}}

+ +

默认情况下，元素不会缩短至小于内容框尺寸，若想改变这一状况，请设置元素的{{cssxref("min-width")}} 与 {{cssxref("min-height")}}属性。

+
+ +

正式定义

+ +

{{cssinfo}}

+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

设置 flex: auto

+ +

HTML

+ +
<div id="flex-container">
+  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
+  <div class="raw-item" id="raw">Raw box</div>
+</div>
+
+ +

CSS

+ +
#flex-container {
+  display: flex;
+  flex-direction: row;
+}
+
+#flex-container > .flex-item {
+  flex: auto;
+}
+
+#flex-container > .raw-item {
+  width: 5rem;
+}
+
+
+ + + +

Result

+ +

{{EmbedLiveSample('示例','100%','60')}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.flex")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/flex_value/index.html b/files/zh-cn/web/css/flex_value/index.html new file mode 100644 index 0000000000..9aedc6c3e1 --- /dev/null +++ b/files/zh-cn/web/css/flex_value/index.html @@ -0,0 +1,56 @@ +--- +title: +slug: Web/CSS/flex_value +tags: + - CSS + - CSS数据类型 + - Web + - 参考 + - 布局 + - 需浏览器兼容 +translation_of: Web/CSS/flex_value +--- +
{{CSSRef}}
+ +

<flex> CSS 数据类型 表示了网格（grid）容器中的一段可变长度。于{{cssxref("grid-template-columns")}}、{{cssxref("grid-template-rows")}}及相关属性中使用。

+ +

语法

+ +

<flex>数据类型为一{{cssxref("<number>")}}后加单位fr。与所有CSS尺寸相同，单位与数字间无空格。

+ +

Examples

+ +
1fr    /* 使用整型 */
+2.5fr  /* 使用浮点 */
+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName("CSS Grid", "#typedef-flex", "<flex>")}}{{Spec2("CSS Grid")}}初步定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.types.flex")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/css/font-family/index.html b/files/zh-cn/web/css/font-family/index.html new file mode 100644 index 0000000000..399dc110a4 --- /dev/null +++ b/files/zh-cn/web/css/font-family/index.html @@ -0,0 +1,229 @@ +--- +title: font-family +slug: Web/CSS/font-family +tags: + - CSS + - CSS Font + - 参考 + - 字体 +translation_of: Web/CSS/font-family +--- +
{{CSSRef}}
+ +

CSS 属性 font-family 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。

+ +
{{EmbedInteractiveExample("pages/css/font-family.html")}}
+ + + +

属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 {{cssxref("@font-face")}} 指定的可以直接下载的字体。

+ +

通常会使用属性缩写 {{cssxref("font")}} 来设置 font-size 和其他与字体相关的属性。

+ +

应当至少在使用的 font-family 列表中添加一个通用的字体族名，因为无法保证用户的计算机内已经安装了指定的字体，也不能保证使用 {{cssxref("@font-face")}} 提供的字体移动能够正确地下载。提供通用的字体族使得浏览器可以在无法得到最佳字体的情况下使用一个相对接近的备选字体。

+ +

font-family 属性指定的是一个优先级从高到低的可选字体列表。 字体的选定不是在发现用户计算机上安装的列表中的第一个字体时停止。相反，对字体的选择是逐字进行的。也就是说即使某个字符周围都在某个字体中可以显示，但该字符在当前的字体文件中没有适合的图形，那么会继续尝试列表中靠后的字体。（不过这在 Internet Explorer 6 以及之前的版本的 IE 浏览器中不适用。）当一个字体只在某些特定的 font-style、 font-variant、或 font-size 属性值下有效时，这些属性的值也可能对字体族 font family 的选择造成影响。

+ +

语法

+ +
/* 一个字体族名和一个通用字体族名 */
+font-family: "Gill Sans Extrabold", sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;
+
+/* 仅有一个通用字体族名 */
+font-family: serif;
+font-family: sans-serif;
+font-family: monospace;
+font-family: cursive;
+font-family: fantasy;
+font-family: system-ui;
+font-family: emoji;
+font-family: math;
+font-family: fangsong;
+
+/* 全局值 */
+font-family: inherit;
+font-family: initial;
+font-family: unset;
+
+ +

属性 font-family 列举一个或多个由逗号隔开的字体族。每个字体族由 <family-name> 或 <generic-name> 值指定。

+ +

下面的例子列举了两个字体族，其中第一个是 <family-name>，第二个是 <generic-name>：

+ +
font-family: "Gill Sans Extrabold", sans-serif;
+ +

取值

+ +
+
<family-name>
+
一个字体族的名字。例如"Times" 和 "Helvetica" 都是字体族名。字体族名可以包含空格，但包含空格时应该用引号。
+
<generic-name>
+
+

通用字体族名是一种备选机制，用于在指定的字体不可用时给出较好的字体。通用字体族名都是关键字，所以不可以加引号。 在列表的末尾应该至少有一个通用字体族名。 以下是该属性可能的取值以及他们的定义。

+ +
+
serif
+
带衬线字体，笔画结尾有特殊的装饰线或衬线。
+ 例如： Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif.
+
sans-serif
+
无衬线字体，即笔画结尾是平滑的字体。
+ 例如， "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif.
+
monospace
+
等宽字体，即字体中每个字宽度相同。
+ 例如， "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace.
+
cursive
+
草书字体。这种字体有的有连笔，有的还有特殊的斜体效果。因为一般这种字体都有一点连笔效果，所以会给人一种手写的感觉。
+ 例如，"Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.
+
fantasy
+
Fantasy 字体主要是那些具有特殊艺术效果的字体。
+ 例如，Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.
+
system-ui
+
从浏览器所处平台处获取的默认用户界面字体。由于世界各地的排版习惯之间有很大的差异，这个通用选项 is provided for typefaces that don't map cleanly into the other generics.
+
math
+
针对显示数学相关字符的特殊样式问题而设计的字体：支持上标和下标、跨行括号、嵌套表达式和具有不同含义的double struck glyphs。
+
emoji
+
专门用于呈现 Emoji 表情符号的字体。
+
fangsong
+
一种汉字字体，介于宋体和楷体之间。这种字体常用于某些政府文件。
+
+
+
+ +

有效的字体族名

+ +

字体族名或者是引号包括的字符串，或者是不含引号的一个或多个合法标识串构成的。这意味着在没有带引号的字体族名的开头是不能使用标点符号字符和数字字符的。

+ +

例如，以下的声明是有效的：

+ +
font-family: "Gill Sans Extrabold", sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;
+ +

以下的声明是无效的：

+ +
font-family: Goudy Bookletter 1911, sans-serif;
+font-family: Red/Black, sans-serif;
+font-family: "Lucida" Grande, sans-serif;
+font-family: Ahem!, sans-serif;
+font-family: test@foo, sans-serif;
+font-family: #POUND, sans-serif;
+font-family: Hawaii 5-0, sans-serif;
+ +

正式语法

+ +
{{CSSSyntax}}
+ +

示例

+ +

一些通用字体

+ +
.serif {
+  font-family: Times, "Times New Roman", Georgia, serif;
+}
+
+.sansserif {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+
+.monospace {
+  font-family: "Lucida Console", Courier, monospace;
+}
+
+.cursive {
+  font-family: cursive;
+}
+
+.fantasy {
+  font-family: fantasy;
+}
+
+.emoji {
+  font-family: emoji;
+}
+
+.math {
+  font-family: math;
+}
+
+.fangsong {
+  font-family: fangsong;
+}
+
+ + + +

{{EmbedLiveSample("Some_common_font_families", 600, 120)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName("CSS4 Fonts", "#generic-font-families", "generic font families")}}{{Spec2("CSS4 Fonts")}}Adds new generic font families, specifically: system-ui, emoji, math, and fangsong.
{{SpecName("CSS3 Fonts", "#font-family-prop", "font-family")}}{{Spec2("CSS3 Fonts")}}No significant change
{{SpecName("CSS2.1", "fonts.html#propdef-font-family", "font-family")}}{{Spec2("CSS2.1")}}No significant change
{{SpecName("CSS1", "#font-family", "font-family")}}{{Spec2("CSS1")}}Initial definition
+ +

{{CSSInfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.font-family")}}

diff --git a/files/zh-cn/web/css/font-feature-settings/index.html b/files/zh-cn/web/css/font-feature-settings/index.html new file mode 100644 index 0000000000..ee6c1cffa4 --- /dev/null +++ b/files/zh-cn/web/css/font-feature-settings/index.html @@ -0,0 +1,121 @@ +--- +title: font-feature-settings +slug: Web/CSS/font-feature-settings +tags: + - CSS + - CSS 字体 + - CSS 属性 + - 参考 +translation_of: Web/CSS/font-feature-settings +--- +
{{CSSRef}}
+ +

font-feature-settings 属性用于控制OpenType字体中的高级印刷功能。

+ +
{{EmbedInteractiveExample("pages/css/font-feature-settings.html")}}
+ + + +

语法

+ +
/* 默认设置 */
+font-feature-settings: normal;
+
+/* 设置 OpenType 功能标签的值 */
+font-feature-settings: "smcp";
+font-feature-settings: "smcp" on;
+font-feature-settings: "swsh" 2;
+font-feature-settings: "smcp", "swsh" 2;
+
+/* 全局值 */
+font-feature-settings: inherit;
+font-feature-settings: initial;
+font-feature-settings: unset;
+
+ +
Note: Web开发者应该尽可能的使用类似 {{cssxref("font-variant")}} 这样的短标记属性或者相关的速记标识属性等, 类似 {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}} or {{cssxref("font-variant-position")}}.
+
+该属性是一个比较偏底层的功能接口，用于解决由于没有其他方法去访问和设置OpenType字体某些特性而无法解决一些特殊功能需求.
+
+特别需要注意的是，该CSS属性不应该用来开启大写字母转换.
+ +

{{cssinfo}}

+ +

值

+ +
+
normal
+
文本使用默认设置进行布局。
+
<feature-tag-value>
+
在呈现文本时，OpenType要素标记值的列表被传递到文本布局引擎以启用或禁用字体特征。标签始终是4个ASCII字符的 {{cssxref("<string>")}} 。如果是U + 20 - U + 7E代码点范围以外的字符或字符个数不对，则整个属性无效。 
+ 值是一个正整数。两个关键字on和off分别是1和0的同义词。如果未设置任何值，则默认值为1。对于非布尔型OpenType功能（例如，文体替代 stylistic alternates），该值意味着要选择特定的字形；对于布尔值，它是一个开关。
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

实例

+ +
/* use small-cap alternate glyphs */
+.smallcaps { font-feature-settings: "smcp" on; }
+
+/* convert both upper and lowercase to small caps (affects punctuation also) */
+.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }
+
+/* enable historical forms */
+.hist { font-feature-settings: "hist"; }
+
+/* disable common ligatures, usually on by default */
+.noligs { font-feature-settings: "liga" 0; }
+
+/* enable tabular (monospaced) figures */
+td.tabular { font-feature-settings: "tnum"; }
+
+/* enable automatic fractions */
+.fractions { font-feature-settings: "frac"; }
+
+/* use the second available swash character */
+.swash { font-feature-settings: "swsh" 2; }
+
+/* enable stylistic set 7 */
+.fancystyle {
+  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
+  font-feature-settings: "ss07";
+}
+
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.properties.font-feature-settings")}}

+
+ +

其他参考

+ + diff --git a/files/zh-cn/web/css/font-kerning/index.html b/files/zh-cn/web/css/font-kerning/index.html new file mode 100644 index 0000000000..3ef355842a --- /dev/null +++ b/files/zh-cn/web/css/font-kerning/index.html @@ -0,0 +1,115 @@ +--- +title: font-kerning +slug: Web/CSS/font-kerning +translation_of: Web/CSS/font-kerning +--- +
{{CSSRef}}
+ +

font-kerning CSS 属性设置是否使用字体中储存的字距信息。

+ +
/* Keyword values */
+font-kerning: auto;
+font-kerning: normal;
+font-kerning: none;
+
+/* Global values */
+font-kerning: inherit;
+font-kerning: initial;
+font-kerning: unset;
+
+ +

Kerning（字距）定义了字母的分布情况。对于良好地规定了字距的字体，字距特性使得字母分布更为统一，阅读体验更佳。如下图所示，左侧的示例没有应用字距，而右侧使用了：

+ +

Example of font-kerning

+ +

{{cssinfo}}

+ +

语法

+ +

font-kerning 属性通过以下的关键字进行指定。

+ +

值

+ +
+
auto
+
浏览器来决定是否使用字体字距。比如，一些浏览器会在小字体的情况下禁用字距，因为这会使得文本可读性下降。
+
normal
+
必须应用字体中的字距信息。
+
none
+
禁用字体中的字距信息。
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<div id="kern"></div>
+<div id="nokern"></div>
+<textarea id="input">AV T. ij</textarea>
+ +

CSS

+ +
div {
+  font-size: 2rem;
+  font-family: serif;
+}
+
+#nokern {
+  font-kerning: none;
+}
+
+#kern {
+  font-kerning: normal;
+}
+ +

JavaScript

+ +
var input  = document.getElementById('input'),
+    kern   = document.getElementById('kern'),
+    nokern = document.getElementById('nokern');
+
+input.addEventListener('keyup', function() {
+  kern.textContent = input.value; /* Update content */
+  nokern.textContent = input.value;
+});
+
+kern.textContent = input.value; /* Initialize content */
+nokern.textContent = input.value;
+
+ +

{{ EmbedLiveSample('Example') }}

+ +

规格

+ + + + + + + + + + + + + + + + +
规格状态注释
{{SpecName('CSS3 Fonts', '#propdef-font-kerning', 'font-kerning')}}{{Spec2('CSS3 Fonts')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.font-kerning")}}

+ +

参考

+ +
    +
  • {{cssxref("font-variant")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-synthesis")}}, {{cssxref("letter-spacing")}}
    • +
diff --git a/files/zh-cn/web/css/font-language-override/index.html b/files/zh-cn/web/css/font-language-override/index.html new file mode 100644 index 0000000000..80aa0c3cf8 --- /dev/null +++ b/files/zh-cn/web/css/font-language-override/index.html @@ -0,0 +1,100 @@ +--- +title: font-language-override +slug: Web/CSS/font-language-override +translation_of: Web/CSS/font-language-override +--- +
{{CSSRef}}
+ +

font-language-override CSS属性控制在指定的语言中使用特定的字形。

+ +
/* 关键字作为值 */
+font-language-override: normal;
+
+/* 字符串作为值 */
+font-language-override: "ENG";  /* Use English glyphs */
+font-language-override: "TRK";  /* Use Turkish glyphs */
+
+/* 使用全局值 */
+font-language-override: initial;
+font-language-override: inherit;
+font-language-override: unset;
+ +

默认情况下，HTML的 lang 属性告诉浏览器使用语言的特定字形。例如，很多字体都有针对合成符 fi 的字形（i 上的点会被合并进 f 里）。而当使用土耳其语时，字体就不会使用合成字形。因为土耳其语有两个版本的i: 一个带点 (i) 一个不带点 (ı)。这种情况下如果使用连写会把带点的 i 不正确地渲染成不带点的 ı。

+ +

font-language-override属性可以使你重载针对特定语言的字体行为。 当你使用的字体缺少对某种语言的正确支持时，这很有用。 例如，如果一种字体没有针对阿塞拜疆语的适当规则，你可以强制字体使用遵循类似规则的土耳其语字形。

+ +

{{cssinfo}}

+ +

语法

+ +

font-language-override 属性被指定为关键词 normal 或者一个字符串 <string>。

+ +

值

+ +
+
normal
+
指示浏览器使用适合 lang 属性指定的语言的字体字形。这是默认值。
+
{{cssxref("string")}}
+
指示浏览器使用适合该字符串指定的语言的字体字形。该字符串必须与 OpenType 语言系统中的语言标签相匹配。例如，"ENG "是英语，"KOR "是韩语。
+
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

使用丹麦文字形

+ +

HTML

+ +
<p class="para1">Default language setting.</p>
+<p class="para2">This is a string with the <code>font-language-override</code> set to Danish.</p>
+
+ +

CSS

+ +
p.para1 {
+  font-language-override: normal;
+}
+
+p.para2 {
+  font-language-override: "DAN";
+}
+
+ +

Result

+ +

{{ EmbedLiveSample('Using_Danish_glyphs', '600', '', '', 'Web/CSS/font-language-override') }}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('CSS4 Fonts', '#propdef-font-language-override', 'font-language-override')}}{{Spec2('CSS4 Fonts')}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.font-language-override")}}

+ +

另请参阅

+ +
    +
  • {{cssxref("font-variant")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-kerning")}}.
    • +
diff --git a/files/zh-cn/web/css/font-size-adjust/index.html b/files/zh-cn/web/css/font-size-adjust/index.html new file mode 100644 index 0000000000..0aaa5b46dd --- /dev/null +++ b/files/zh-cn/web/css/font-size-adjust/index.html @@ -0,0 +1,145 @@ +--- +title: font-size-adjust +slug: Web/CSS/font-size-adjust +translation_of: Web/CSS/font-size-adjust +--- +

{{ CSSRef() }}

+ +

概述

+ +

font-size-adjust CSS属性定义字体大小应取决于小写字母，而不是大写字母。在字体较小时，字体的可读性主要由小写字母的大小决定，通过此选项即可进行调整。

+ +

当{{ Cssxref("font-family") }}的首选字体不可用时，如果备选字体的尺寸比（小写字母的大小与字体大小的比）有较大的差别时，可读性可能会成为一大问题。

+ +

为了兼容于不支持font-size-adjust的浏览器，该属性的值应该被定义为{{ Cssxref("font-size") }}的值所要乘的系数。 这意味着定义的值应该为首选字体的尺寸比。例如，样式表这样定义

+ +
font-size: 14px;
+font-size-adjust: 0.5;
+
+ +

的真实作用是定义小写字母的大小应该为7px高 (0.5 × 14px).

+ +

{{cssinfo}}

+ +

语法

+ +
/* 仍使用font size的值 */
+font-size-adjust: none;
+
+/* 使用小写字母大小为font size一半大小的字体大小 */
+font-size-adjust: 0.5;
+
+font-size-adjust: inherit;
+
+ +

值

+ +
+
none
+
仅根据{{ Cssxref("font-size") }}属性决定字体大小。
+
<number>
+
+

根据使小写字母大小（根据字体的x-height--西文字体设计中的基线与主线的距离--决定）为该值乘以{{ Cssxref("font-size") }}的结果定义字体。

+ +

数字应为{{ Cssxref("font-family") }}的首选字体的尺寸比（x-height和字体大小的比）。这意味着当首选字体可用时，不论浏览器是否支持font-size-adjust，都会显示文字为{{ Cssxref("font-size") }}的大小。

+
+
+ +

正式语法

+ +
{{csssyntax("font-size-adjust")}}
+ +

示例

+ +

查看在线演示

+ +
p {
+   font: 12px Verdana, "DejaVu Sans", sans-serif;
+   font-size-adjust: 0.58;
+} 
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态b
{{ SpecName('CSS3 Fonts', '#propdef-font-size-adjust', 'font-size-adjust') }}{{ Spec2('CSS3 Fonts') }} 
+ +

font-size-adjust CSS属性最初在CSS 2中被定义，但在CSS 2.1被放弃。后又被新添加至CSS 3。

+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support +

{{ CompatNo() }}

+ 		1.0 (1.0)
+ Windows only		{{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} 
{{ CompatGeckoDesktop("1.9") }}
+ All platforms
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("1.9.2") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatChrome(42.0)}}
+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/font-size/index.html b/files/zh-cn/web/css/font-size/index.html new file mode 100644 index 0000000000..70468a0b62 --- /dev/null +++ b/files/zh-cn/web/css/font-size/index.html @@ -0,0 +1,231 @@ +--- +title: font-size +slug: Web/CSS/font-size +tags: + - font-size +translation_of: Web/CSS/font-size +--- +
{{CSSRef}}
+ +

font-size CSS 属性指定字体的大小。因为该属性的值会被用于计算em和ex长度单位，定义该值可能改变其他元素的大小。

+ +
/* <absolute-size>，绝对大小值 */
+font-size: xx-small;
+font-size: x-small;
+font-size: small;
+font-size: medium;
+font-size: large;
+font-size: x-large;
+font-size: xx-large;
+
+/* <relative-size>，相对大小值 */
+font-size: larger;
+font-size: smaller;
+
+/* <length>，长度值 */
+font-size: 12px;
+font-size: 0.8em;
+
+/* <percentage>，百分比值 */
+font-size: 80%;
+
+font-size: inherit;
+
+ +

{{cssinfo}}

+ +

语法

+ +

font-size 属性以两种方式之一指定：

+ + + +

值

+ +
+
xx-small, x-small, small, medium, large, x-large, xx-large
+
该套绝对大小关键字定义相对于用户的默认字体大小(medium)。与展示HTML的<font size="1"> 到<font size="7">（用户默认字体大小<font size="3">）类似。
+
larger, smaller
+
比父元素的字体大或小，使用与上面的关键字的相近缩放比率。
+
<length>
+
正数{{cssxref("<length>")}}.。当单位为em或ex时，大小为相对于父元素的文字的大小。例如，0.5em就是当前元素的父元素的字体大小的一半。
+
<percentage>
+
父元素字体大小的正数{{cssxref("<percentage>")}}
+
+ +

最好使用用户默认字体大小的相对大小，避免使用除了em或ex的绝对大小单位。但是如果一定要使用绝对大小的话，px是众多单位中最好的选择，因为它的含义不会随着操作系统所认为的屏幕分辨率的大小（通常是不对的）改变而改变。

+ +

正式语法

+ +
{{csssyntax("font-size")}}
+
+ +

可用方法

+ +

有多重定义字体大小的方法，包括了使用关键字及使用像素或em数字值。请根据网页的特定需求选择适用的方法。

+ +

关键字

+ +

关键字是定义网络字体大小的好方法。通过在body元素上定义关键字字体大小，你可以在网页的任何地方设置相对字体大小，这让你能轻易地缩放整个网页的字体大小。

+ +

像素

+ +

当你需要精确地像素时，用px设定字体大小是一种好方法。一像素的大小是固定的。这是一个不取决于平台的、跨浏览器的准确设置字体大小高度为你所想的像素大小的方法。因为不同浏览器为得到同样效果的算法可能不同，所以显示效果可能有微小的不同。

+ +

字体大小的设置也可以使用组合值。例如，如果父元素设定为16px而子元素设定为larger, 子元素显示的字体大小就会大于父元素。

+ +
注意: 用像素字体定义使得字体大小不可由用户的浏览器改变。（例如，视力较低用户可能希望使用比网页设计师设定的字体大小大很多的字体）所以，如果你想创造能广泛使用的设计请避免使用像素设定字体。
+ +

Em

+ +

另一种方法是用em值设定字体大小。em 值的大小是动态的。当定义或继承font-size属性时，1em等于该元素的字体大小。如果你在网页中任何地方都没有设置文字大小的话，那它将等于浏览器默认文字大小，通常是16px。所以通常1em = 16px。2em = 32px。 如果你设置了body元素的字体大小为20px，那1em = 20px、2em = 40px。那个2就是当前em大小的倍数。

+ +

可用这个公式计算像素大小的等价em大小：

+ +
em = 希望得到的像素大小 / 父元素字体像素大小
+ +

例如，假设body的文字大小设为1em，且浏览器默认1em = 16px。如果你想得到12px，那你就可设定0.75em (because 12/16 = 0.75)。同样的，如果你想设定文字大小为10px，那就定义0.625em (10/16 = 0.625)；若想要22px就定义1.375em (22/16=1.375).

+ +

一个流行的技巧是设置body元素的字体大小为62.5% (即默认大小16px的62.5%)，等于10px。现在你可以通过计算基准大小10px的倍数，在任何元素上方便的使用em单位。这样有6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em。例如：

+ +
body {
+  font-size: 62.5%; /* font-size 1em = 10px */
+}
+p {
+  font-size: 1.6em; /* 1.6em = 16px */
+}
+ +

因为em可以自动适应用户的字体，em是一个非常有用的CSS单位。

+ +

示例

+ +

示例1

+ +
/* 设定段落文字大小为非常大 */
+p { font-size: xx-large }
+
+/* 设定一级标题的文字大小为2.5倍大小 */
+h1 { font-size: 250% }
+
+/* 设定span里的文字大小为16px */
+span { font-size: 16px; }
+
+ +

示例2

+ +
.small {
+	font-size: xx-small;
+}
+.larger {
+	font-size: larger;
+}
+.point {
+	font-size: 24pt;
+}
+.percent {
+	font-size: 200%;
+}
+
+ +
<h1 class="small">Small H1</h1>
+<h1 class="larger">Larger H1</h1>
+<h1 class="point">24 point H1</h1>
+<h1 class="percent">200% H1</h1>
+
+ +

Live Sample

+ +

{{EmbedLiveSample('Example_2','600','200')}}

+ +

备注

+ +

{{Cssxref("font-size")}}属性的em和ex单位值相对于父元素的字体大小（不像其他属性，它们指的是相对当前元素的字体大小）。这意味对于{{Cssxref("font-size")}}属性来说，em单位和百分比单位的作用是一样的。

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS3 Fonts')}}No change.
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}{{Spec2('CSS3 Transitions')}}Defines font-size as animatable.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('CSS1', '#font-size', 'font-size')}}  
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}5.57.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.01.0{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/zh-cn/web/css/font-smooth/index.html b/files/zh-cn/web/css/font-smooth/index.html new file mode 100644 index 0000000000..49c5319ac1 --- /dev/null +++ b/files/zh-cn/web/css/font-smooth/index.html @@ -0,0 +1,134 @@ +--- +title: 字体平滑 +slug: Web/CSS/font-smooth +tags: + - CSS + - CSS Reference + - Non-standard + - Reference +translation_of: Web/CSS/font-smooth +--- +
{{ CSSRef }} {{ Non-standard_header }}
+ +

font-smooth CSS 属性用来控制字体渲染时的平滑效果。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{ Xref_cssinitial() }}auto
适用元素所有元素与生成的内容
{{ Xref_cssinherited() }}是
Percentagesrelative to parent element's font size
Media{{ Xref_cssvisual() }}
{{ Xref_csscomputed() }}as specified
+ +

语法

+ +
/* Keyword values */
+font-smooth: auto;
+font-smooth: never;
+font-smooth: always;
+
+/* <length> value */
+font-smooth: 2em;
+
+ +
Webkit 实现了名为-webkit-font-smoothing的相似属性。这个属性仅在 Mac OS X/macOS 下生效。 + +
    +
  • none - 关闭字体平滑；展示有锯齿边缘的文字。
    • +
  • antialiased - 平滑像素级别的字体，而不是子像素。从亚像素渲染切换到黑暗背景上的浅色文本的抗锯齿使其看起来更轻。
    • +
  • subpixel-antialiased - 在大多数非视网膜显示器上，这将会提供最清晰的文字。
    • +
+
+ +
Firefox 实现了名为 -moz-osx-font-smoothing 的相似属性。这个属性仅在 Mac OS X / macOS 下生效。 + +
    +
  • auto - 允许浏览器选择字体平滑的优化方式，通常为grayscale。
    • +
  • grayscale - 用灰度抗锯齿渲染文本，而不是子像素。从亚像素渲染切换到黑暗背景上的浅色文本的抗锯齿使其看起来更轻。
    • +
  • {{cssxref("inherit")}}
    • +
  • {{cssxref("unset")}}
    • +
+
+ +

规范

+ +

尽管在早期（2002）的 CSS3 Fonts 草稿中就出现了 font-smooth ，但是这个属性已经在规范中被移除，而且已经不在标准跟踪之中。

+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support25.0[2]5.0[1]{{ CompatNo() }}{{ CompatNo() }}4.0[1]
+
+ +
+ + + + + + + + + + + + + + + + + +
FeatureiOS SafariOpera MiniOpera MobileAndroid Browser
Basic support?[1]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

[1] Webkit 实现了名为-webkit-font-smoothing的相似属性。这个属性仅在 Mac OS X/macOS 下生效。

+ +

[2] Firefox 实现了名为 -moz-osx-font-smoothing 的相似属性。这个属性仅在 Mac OS X / macOS 下生效。

+ +

参见

+ + diff --git a/files/zh-cn/web/css/font-stretch/index.html b/files/zh-cn/web/css/font-stretch/index.html new file mode 100644 index 0000000000..8782c3a629 --- /dev/null +++ b/files/zh-cn/web/css/font-stretch/index.html @@ -0,0 +1,156 @@ +--- +title: font-stretch +slug: Web/CSS/font-stretch +translation_of: Web/CSS/font-stretch +--- +

{{CSSRef}}

+ +

Summary

+ +

font-stretch 属性为字体定义一个正常或经过伸缩变形的字体外观，这个属性并不会通过伸展/缩小而改变字体的几何外形，如{{cssxref("font-feature-settings")}}和{{cssxref("font-variant")}}属性，它仅仅意味着当有多种字体可供选择时，会为字体选择最适合的大小。

+ +

The two 'e' belong to the same fonts. One is condensed, the other normal and can be selected by 'font-stretch'.

+ +
+

Note: If the font provides several faces, the one fitting the best with the value of the font-stretch property is chosen. E.g. On OS X, in addition to the more common Bold, Regular, Italic, and BoldItalic faces, the "Helvetica Neue" font proposes a second set of faces with condensed, that is shrunk, characters: Condensed. Browsers supporting font-stretch will use the condensed faces for the value ultra-condensed to semi-condensed and the normal faces for the other (normal and all expanded values).

+Font-stretch results with a font having 2 faces, one condensed and one normal. +

If the font has no condensed or expanded faces, like the default "Times New Roman" on Mac OS, font-stretch will not have any visible effect as the only suitable face will be used in all cases.:
+ Font-stretch results with a font having 1 single face.

+
+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Keyword values */
+font-stretch: ultra-condensed;
+font-stretch: extra-condensed;
+font-stretch: condensed;
+font-stretch: semi-condensed;
+font-stretch: normal;
+font-stretch: semi-expanded;
+font-stretch: expanded;
+font-stretch: extra-expanded;
+font-stretch: ultra-expanded;
+
+/* Global values */
+font-stretch: inherit;
+font-stretch: initial;
+font-stretch: unset;
+
+ +

Values

+ +
+
normal
+
指定默认字体
+
semi-condensed, condensed, extra-condensed, ultra-condensed
+
小于默认字体，其中ultra-condensed是缩的最小的字体
+
semi-expanded, expanded, extra-expanded, ultra-expanded
+
大于默认字体的值
+
+ +

Interpolation

+ +

Font stretch values are interpolated in discrete steps. The interpolation happens as though the ordered values are equally spaced real numbers; the result is rounded to the nearest value, with values exactly halfway between two values rounded towards the later value, that is the most expanded one.

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
<div class="ultra stretch"> This is text with the font extremely expanded</div>
+<div class="stretch"> This is text with the font stretched</div>
+<div class="normal"> This is text without font stretching</div>
+<div class="condensed"> This is text with the font condensed</div>
+<div class="ultra condensed"> This is text with the font extremely condensed</div>
+ +

CSS

+ +
.ultra.stretch{font-stretch: ultra-expanded;}
+.stretch {font-stretch: expanded;}
+.normal {font-stretch: normal;}
+.condensed {font-stretch: condensed;}
+.ultra.condensed {font-stretch: ultra-condensed;}
+ +

Result

+ +

{{ EmbedLiveSample('Example', '500', '', '', 'Web/CSS/font-stretch') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch') }}{{ Spec2('CSS3 Fonts') }}Initial definition
+ +

The CSS property font-stretch was initially defined in CSS 2, but dropped in CSS 2.1 due to lack of implementation experience. It has been newly defined in CSS 3.

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support48.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("9.0") }}9.035.0{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("9.0") }}{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}
+
diff --git a/files/zh-cn/web/css/font-style/index.html b/files/zh-cn/web/css/font-style/index.html new file mode 100644 index 0000000000..9eefa5b5f4 --- /dev/null +++ b/files/zh-cn/web/css/font-style/index.html @@ -0,0 +1,232 @@ +--- +title: font-style +slug: Web/CSS/font-style +tags: + - CSS + - CSS 字体 + - Web + - 参考 + - 字体 +translation_of: Web/CSS/font-style +--- +
{{CSSRef}}
+ +

font-style CSS 属性允许你选择 {{cssxref("font-family")}} 字体下的 italic 或 oblique 样式。

+ +
{{EmbedInteractiveExample("pages/css/font-style.html")}}
+ + + +

Italic 样式一般是指书写体，相比无样式的字体，通常会占用较少的高度，而 oblique 字形一般只是常规字形的倾斜版本。斜体（italic） 和倾斜体（oblique）都是通过人工倾斜常规字体的字形来模拟的（使用 {{cssxref("font-synthesis")}} 对此进行控制）。

+ +

Italic font faces are generally cursive in nature, usually using less horizontal space than their unstyled counterparts, while oblique faces are usually just sloped versions of the regular face. When the specified style is not available, both italic and oblique faces are simulated by artificially sloping the glyphs of the regular face (use {{cssxref("font-synthesis")}} to control this behavior).

+ +

语法

+ +
font-style: normal;
+font-style: italic;
+font-style: oblique;
+font-style: oblique 10deg;
+
+/* Global values */
+font-style: inherit;
+font-style: initial;
+font-style: unset;
+
+ +

font-style 属性被指定为从下面的取值列表中的单独一个关键字，如果关键字是 oblique，则可附加一个可选的角度。

+ +

值

+ +
+
normal
+
选择 {{Cssxref("font-family")}} 的常规字体。
+
italic
+
选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（oblique ）替代。
+
oblique
+
选择倾斜体，如果当前字体没有可用的倾斜体版本，会选用斜体（italic ）替代。 If one or more oblique faces are available in the chosen font family, the one that most closely matches the specified angle is chosen. If no oblique faces are available, the browser will synthesize an oblique version of the font by slanting a normal face by the specified amount. Valid values are degree values of -90deg to 90deg inclusive. If an angle is not specified, an angle of 14 degrees is used. Positive values are slanted to the end of the line, while negative values are slanted towards the beginning.
+
+ In general, for a requested angle of 14 degrees or greater, larger angles are prefered; otherwise, smaller angles are preferred (see the spec's font matching section for the precise algorithm).
+
+ +

可变字体

+ +

可变字体（Variable font）可以精确控制 oblique 字体的倾斜程度。You can select this using the <angle> modifier for the oblique keyword.

+ +

For TrueType or OpenType variable fonts, the "slnt" variation is used to implement varying slant angles for oblique, and the "ital" variation with a value of 1 is used to implement italic values. See {{cssxref("font-variation-settings")}}.

+ +

For the example below to work, you'll need a browser that supports the CSS Fonts Level 4 syntax in which font-style: oblique can accept an <angle>.

+ +
{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}
+ +

HTML

+ +
+
<header>
+    <input type="range" id="slant" name="slant" min="-90" max="90" />
+    <label for="slant">Slant</label>
+</header>
+<div class="container">
+    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
+</div>
+
+ +

CSS

+ +
/*
+AmstelvarAlpha-VF 由 David Berlow 制作：https://github.com/TypeNetwork/Amstelvar
+在此使用时，遵循此开源协议：
+https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
+  font-family:'AmstelvarAlpha';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+}
+
+.container {
+  max-height: 150px;
+  overflow: scroll;
+}
+
+.sample {
+  font: 2rem 'AmstelvarAlpha', sans-serif;
+}
+
+
+ + + +

JavaScript

+ +
let slantLabel = document.querySelector('label[for="slant"]');
+let slantInput = document.querySelector('#slant');
+let sampleText = document.querySelector('.sample');
+
+function update() {
+  let slant = `oblique ${slantInput.value}deg`;
+  slantLabel.textContent = `font-style: ${slant};`;
+  sampleText.style.fontStyle = slant;
+}
+
+slantInput.addEventListener('input', update);
+
+update();
+
+
+ +

形式化语法

+ +
{{csssyntax}}
+ +

示例

+ +

示例展示了不同的 font-style 值。CSS 看起来像这样：

+ + + +
.normal {
+  font-style: normal;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.oblique {
+  font-style: oblique;
+}
+ +

{{ EmbedLiveSample('Font_styles') }}

+ +

请注意，不是所有的字体都有确切的 oblique 和 italic 字形，即便如此，浏览器也会通过使用现有的字形来模拟所缺少的字形。下面是一个使用这两种字形渲染字体的示例：

+ +

+ +

可访问性问题

+ +

Large sections of text set with a font-style value of italic may be difficult for people with cognitive concerns such as Dyslexia to read.

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS4 Fonts')}}Adds the ability to specify an angle after oblique
{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS3 Fonts')}}没有变化
{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}{{Spec2('CSS2.1')}}没有变化
{{SpecName('CSS1', '#font-style', 'font-style')}}{{Spec2('CSS1')}}初始定义
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.font-style")}}

+ +

[1] 在 Firefox 44 之前，Gecko 并不对 oblique 和 italic 字形做出区分。在那之后，如果有可用的字形，它将使用正确的字形。

diff --git a/files/zh-cn/web/css/font-synthesis/index.html b/files/zh-cn/web/css/font-synthesis/index.html new file mode 100644 index 0000000000..c344d0a3f5 --- /dev/null +++ b/files/zh-cn/web/css/font-synthesis/index.html @@ -0,0 +1,96 @@ +--- +title: font-synthesis +slug: Web/CSS/font-synthesis +tags: + - CSS + - 参考 + - 字体 +translation_of: Web/CSS/font-synthesis +--- +
{{CSSRef}}
+ +

font-synthesis CSS 属性控制浏览器可以合成（synthesize）哪些缺失的字体，粗体或斜体。

+ +
{{EmbedInteractiveExample("pages/css/font-synthesis.html")}}
+ + + +

大多数标准西方字体包含斜体和粗体变体，但许多新颖（novelty）的字体不包括这些。用于中文、日文、韩文和其他语标文字（logographic script）的字体往往不含这些变体，同时，从默认字体中生成、合成这些变体可能会妨碍文本的易读性。在这些情况下，可能最好关闭浏览器默认的 font-synthesis 字体合成特性。

+ +

{{cssinfo}}

+ +

语法

+ +

此属性（的值）可采用下列任意一种形式：

+ +
    +
  • 关键词 none
    • +
  • 关键词 weight 或 style
    • +
  • 关键词 weight 和 style。
    • +
+ +

属性值

+ +
+
none
+
此关键词表示不合成粗体字型（typeface）或斜体字型。
+
weight
+
此关键词表示，如果需要的话，可以合成粗体字型。
+
style
+
此关键词表示，如果需要的话，可以合成斜体字型。
+
+ +

形式化语法

+ +
{{csssyntax}}
+ +

例子

+ +

HTML

+ +
<em class="syn">Synthesize me! 站直。</em>
+<br/>
+<em class="no-syn">Don't synthesize me! 站直。</em>
+
+ +

CSS

+ +
em {
+  font-weight: bold;
+}
+.syn {
+  font-synthesis: style weight;
+}
+.no-syn {
+  font-synthesis: none;
+}
+
+ +

结果

+ +

{{ EmbedLiveSample('Examples', '', '50', '', 'Web/CSS/font-synthesis') }}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Fonts', '#propdef-font-synthesis', 'font-synthesis')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.font-synthesis")}}

diff --git a/files/zh-cn/web/css/font-variant-alternates/index.html b/files/zh-cn/web/css/font-variant-alternates/index.html new file mode 100644 index 0000000000..bc4fd876ce --- /dev/null +++ b/files/zh-cn/web/css/font-variant-alternates/index.html @@ -0,0 +1,110 @@ +--- +title: font-variant-alternates +slug: Web/CSS/font-variant-alternates +translation_of: Web/CSS/font-variant-alternates +--- +
{{CSSRef}}
+ +

font-variant-alternates CSS属性控制备用字体的使用。 这些替代字体可以通过{{cssxref("@font-feature-values")}}中定义的替代名称来引用。

+ +
/* Keyword values */
+font-variant-alternates: normal;
+font-variant-alternates: historical-forms;
+
+/* Functional notation values */
+font-variant-alternates: stylistic(user-defined-ident);
+font-variant-alternates: styleset(user-defined-ident);
+font-variant-alternates: character-variant(user-defined-ident);
+font-variant-alternates: swash(user-defined-ident);
+font-variant-alternates: ornaments(user-defined-ident);
+font-variant-alternates: annotation(user-defined-ident);
+font-variant-alternates: swash(ident1) annotation(ident2);
+
+/* Global values */
+font-variant-alternates: initial;
+font-variant-alternates: inherit;
+font-variant-alternates: unset;
+
+ +

在 {{cssxref("@font-feature-values")}} 规则中可以定义替代字体的函数(stylistic, styleset, character-variant, swash, ornament 或 annotation), 将名称与OpenType参数相关联。 此属性允许样式表中使用那些易于理解的名称(定义于 {{cssxref("@font-feature-values")}})。

+ +

语法

+ +

font-variant-alternates属性可以采用以下两种形式之一：

+ +
    +
  • 默认值 normal
    • +
  • 一个或多个关键词及函数，使用任意顺序用空格分隔。
    • +
+ +

取值

+ +
+
normal
+
此关键字禁用备用字体。
+
historical-forms
+
此关键字启用历史类型-过去常见但今天不常见的字体。 它对应于OpenType值 hist.
+
stylistic()
+
此函数可以为个别字体启用字体样式替换。该参数是特定于字体映射到数字的名称。 它对应于OpenType值 salt，例如salt 2。
+
styleset()
+
此函数可以对字符集启用字体样式替换。 该参数是特定于字体映射到数字的名称。它对应于OpenType的值 ssXY， 例如 ss02。
+
character-variant()
+
此函数启用字符的特定样式替代。 它与styleset（）类似，但是不会为一组字符创建连贯的字形； 单个字符将具有独立且不一定一致的样式。 该参数是映射到数字的特定于字体的名称。 它对应于OpenType值 cvXY， 例如cv02。
+
swash()
+
此函数启用斜字体。 该参数是特定于字体映射到数字的名称。 它对应于OpenType值 swsh 和 cswh，例如swsh 2 和cswh 2。
+
ornaments()
+
此函数可启用装饰物，例如 fleurons 与其他dingbat字形。 该参数是特定于字体映射到数字的名称。 它对应于OpenType值 ornm，例如 ornm 2。 +
注意: 为了保留文本语义，字体设计师应该包括与Unicode dingbat字符不匹配的装饰，作为项目符号字符（U + 2022）的装饰变体。请注意，某些现有字体不遵循此建议。
+
+
annotation()
+
此函数支持注释, 如带圆圈的数字或倒置的字符。 该参数是特定于字体映射到数字的名称。 它对应于OpenType值nalt，例如 nalt 2。
+
+ +

正式定义

+ +

{{CSSInfo}}

+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<p>Firefox rocks!</p>
+<p class="variant">Firefox rocks!</p>
+
+ +

CSS

+ +
@font-feature-values "Leitura Display Swashes" {
+    @swash { fancy: 1 }
+}
+
+p {
+  font-size: 1.5rem;
+}
+
+.variant {
+  font-family: Leitura Display Swashes;
+  font-variant-alternates: swash(fancy);
+}
+ +

结果

+ +
+

注意: 你需要安装 OpenType 字体 Leitura Display Swashes 才能使这个例子正常运行。您可以找到一些免费版本进行测试，例如从 fontsgeek.com.

+
+ +

{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/font-variant-alternates') }}

+ +

规范

+ +

不属于任何标准。

+ +

浏览器兼容

+ + + +

{{Compat("css.properties.font-variant-alternates")}}

diff --git a/files/zh-cn/web/css/font-variant-caps/index.html b/files/zh-cn/web/css/font-variant-caps/index.html new file mode 100644 index 0000000000..12b0fa5ecb --- /dev/null +++ b/files/zh-cn/web/css/font-variant-caps/index.html @@ -0,0 +1,133 @@ +--- +title: font-variant-caps +slug: Web/CSS/font-variant-caps +tags: + - CSS + - CSS属性 + - css字体 + - 参照 +translation_of: Web/CSS/font-variant-caps +--- +
{{CSSRef}}
+ +

CSS属性 font-variant-caps 使您可以控制大写字母特殊字符的使用。

+ +
{{EmbedInteractiveExample("pages/css/font-variant-caps.html")}}
+ + + +

如果项目的字体库中包含不同大小的大写字母特殊字符，该属性将选择其中最接近指定大小的字符。例如，如果字体中没有“特小”(petite)型大写字母，该字符将会被以“小”(small)型大写字母进行渲染。如果这些字符均不存在，浏览器将用默认大写字符集进行尺寸加工。

+ +

字体库中有时会包含无大小写的特殊字符（例如标点符号）的不同写法来适应在文本中临近的大写字母。但是，小型大写字母永远不会被用来加工无大小写的字符。

+ +

多语言规则

+ +

这一属性被用来指定各种语言特定的映射规则。例如：

+ +
    +
  • 在突厥语系中 - 比如土耳其语（ISO 639-1代码‘tr’）、阿塞拜疆语（ISO 639-1代码‘az’）、克里米亚鞑靼语（ISO 639-3代码‘crh’）、鞑靼语（ISO 639-1代码‘tt’）和巴什基尔语（ISO 639-1代码‘ba’），有两种发音近似的“i”字母（区别在于一种有顶部的“.”，另一种没有），而它们的大小写写法也有区别：一种是i/İ，另一种是 ı/I。
    • +
  • 在德语（ISO 639-1代码‘de’）中，ß 的大写可能会被写作ẞ（收录于通用字符集U+1E9E）。
    • +
  • 在希腊语（ISO 639-1代码‘el’）中，如果整个单词是大写的（ά/Α），元音将失去重音。（分离字母eta （ή/Ή）除外。）除此之外，重音在第一个元音的双元音将失去重音，并被在第二个元音上加上一个变音符（άι/ΑΪ）.
    • +
+ +

句法

+ +
/* Keyword values */
+font-variant-caps: normal;
+font-variant-caps: small-caps;
+font-variant-caps: all-small-caps;
+font-variant-caps: petite-caps;
+font-variant-caps: all-petite-caps;
+font-variant-caps: unicase;
+font-variant-caps: titling-caps;
+
+/* Global values */
+font-variant-caps: inherit;
+font-variant-caps: initial;
+font-variant-caps: unset;
+
+ +

font-variant-caps 属性使用以下列表中的单一关键词确定。在任一使用场景中，如果字体库不支持OpenType值，则会被尺寸加工。

+ +

可选值

+ +
+
normal
+
关闭一切特殊字符变体的使用。
+
small-caps
+
允许小型大写字母的使用（OpenType特性：smcp）。小型大写字母指使用大写形式，但尺寸与对应小写字母相同的字母。
+
all-small-caps
+
将大小写字母全部转化为小型大写字母。（OpenType 特性: c2sc, smcp）。
+
petite-caps
+
允许特小型大写字母的使用（OpenType特性: pcap）。
+
all-petite-caps
+
将大小写字母全部转化为小型大写字母。（OpenType 特性: c2pc, pcap）。
+
unicase
+
允许将大写字母转化为小型大写字母与普通小写字母的混用 （OpenType 特性: unic）。
+
titling-caps
+
允许首字母大写（OpenType 特性: titl）。大写字母变体字符通常被设计成与用于小写字母。在标题序列中，如果均使用大写字母，可能会带来过于强烈的视觉效果。首字母大写即用来应对这种情况。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<p class="small-caps">Firefox rocks, small caps!</p>
+<p class="normal">Firefox rocks, normal caps!</p>
+
+ +

CSS

+ +
.small-caps {
+  font-variant-caps: small-caps;
+  font-style: italic;
+}
+.normal {
+  font-variant-caps: normal;
+  font-style: italic;
+}
+
+ +

Result

+ +

{{ EmbedLiveSample('Examples') }}

+ +

无障碍访问风险

+ +

当大量文本信息的font-variant属性被设置为all-small-caps或all-petite-caps，将会为认知障碍者（如读写障碍）的阅读带来困难。

+ + + +

规范

+ +

{{cssinfo}}

+ + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName('CSS3 Fonts', '#propdef-font-variant-caps', 'font-variant-caps')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.font-variant-caps")}}

diff --git a/files/zh-cn/web/css/font-variant-ligatures/index.html b/files/zh-cn/web/css/font-variant-ligatures/index.html new file mode 100644 index 0000000000..dea2c73f30 --- /dev/null +++ b/files/zh-cn/web/css/font-variant-ligatures/index.html @@ -0,0 +1,211 @@ +--- +title: font-variant-ligatures +slug: Web/CSS/font-variant-ligatures +translation_of: Web/CSS/font-variant-ligatures +--- +
{{CSSRef}}
+ +

font-variant-ligatures 属性控制着其所应用元素文本的 {{Glossary("ligature", "ligatures")}} 与 {{Glossary("contextual forms")}} 。 会使文字最终的表现形式更加统一。

+ +
{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}}
+ + + +

Syntax

+ +
/* Keyword values */
+font-variant-ligatures: normal;
+font-variant-ligatures: none;
+font-variant-ligatures: common-ligatures;           /* <common-lig-values> */
+font-variant-ligatures: no-common-ligatures;        /* <common-lig-values> */
+font-variant-ligatures: discretionary-ligatures;    /* <discretionary-lig-values> */
+font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
+font-variant-ligatures: historical-ligatures;       /* <historical-lig-values> */
+font-variant-ligatures: no-historical-ligatures;    /* <historical-lig-values> */
+font-variant-ligatures: contextual;                 /* <contextual-alt-values> */
+font-variant-ligatures: no-contextual;              /* <contextual-alt-values> */
+
+/* Global values */
+font-variant-ligatures: inherit;
+font-variant-ligatures: initial;
+font-variant-ligatures: unset;
+
+ +

font-variant-ligatures取值为下列关键字之一。

+ +

Values

+ +
+
normal
+
默认值，表示在渲染时会使用常用的连字，连字的效果取决于字体，语言和脚本。
+
none
+
不使用任何连字，包括常规的形式
+
<common-lig-values>
+
These values control the most common ligatures, like for fi, ffi, th or similar. They correspond to the OpenType values liga and clig. Two values are possible: +
    +
  • common-ligatures activating these ligatures. Note that the keyword normal activates these ligatures.
    • +
  • no-common-ligatures deactivating these ligatures.
    • +
+
+
<discretionary-lig-values>
+
These values control specific ligatures, specific to the font and defined by the type designer. They correspond to the OpenType values dlig. Two values are possible: +
    +
  • discretionary-ligatures activating these ligatures.
    • +
  • no-discretionary-ligatures deactivating the ligatures. Note that the keyword normal usually deactivates these ligatures.
    • +
+
+
<historical-lig-values>
+
These values control the ligatures used historically, in old books, like the German tz digraph being displayed as ꜩ. They correspond to the OpenType values hlig. Two values are possible: +
    +
  • historical-ligatures activating these ligatures.
    • +
  • no-historical-ligatures deactivating the ligatures. Note that the keyword normal usually deactivates these ligatures.
    • +
+
+
<contextual-alt-values>
+
These values control whether letters adapt to their context—that is, whether they adapt to the surrounding letters. These values correspond to the OpenType values calt. Two values are possible: +
    +
  • contextual specifies that the contextual alternates are to be used. Note that the keyword normal usually activates these ligatures too.
    • +
  • no-contextual prevents their use.
    • +
+
+
+ +

Formal definition

+ +

{{cssinfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Setting font ligatures and contextual forms

+ +

HTML

+ +
<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet">
+<p class="normal">
+  normal<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="none">
+  none<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="common-ligatures">
+  common-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="no-common-ligatures">
+  no-common-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="discretionary-ligatures">
+  discretionary-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="no-discretionary-ligatures">
+  no-discretionary-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="historical-ligatures">
+  historical-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="no-historical-ligatures">
+  no-historical-ligatures<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="contextual">
+  contextual<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="no-contextual">
+  no-contextual<br>
+  if fi ff tf ft jf fj
+</p>
+<p class="contextual">
+  contextual<br>
+  if fi ff tf ft jf fj
+</p>
+
+
+ +

CSS

+ +
p {
+  font-family: Lora, serif;
+}
+.normal {
+  font-variant-ligatures: normal;
+}
+
+.none {
+  font-variant-ligatures: none;
+}
+
+.common-ligatures {
+  font-variant-ligatures: common-ligatures;
+}
+
+.no-common-ligatures {
+  font-variant-ligatures: no-common-ligatures;
+}
+
+.discretionary-ligatures {
+  font-variant-ligatures: discretionary-ligatures;
+}
+
+.no-discretionary-ligatures {
+  font-variant-ligatures: no-discretionary-ligatures;
+}
+
+.historical-ligatures {
+  font-variant-ligatures: historical-ligatures;
+}
+
+.no-historical-ligatures {
+  font-variant-ligatures: no-historical-ligatures;
+}
+
+.contextual {
+  font-variant-ligatures: contextual;
+}
+
+.no-contextual {
+  font-variant-ligatures: no-contextual;
+}
+
+.contextual {
+  font-variant-ligatures: contextual;
+}
+ +

Result

+ +

{{ EmbedLiveSample('Setting_font_ligatures_and_contextual_forms', '', '700', '', 'Web/CSS/font-variant-ligatures') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#propdef-font-variant-ligatures', 'font-variant-ligatures')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.font-variant-ligatures")}}

diff --git a/files/zh-cn/web/css/font-variant-numeric/index.html b/files/zh-cn/web/css/font-variant-numeric/index.html new file mode 100644 index 0000000000..16b4e1640c --- /dev/null +++ b/files/zh-cn/web/css/font-variant-numeric/index.html @@ -0,0 +1,138 @@ +--- +title: font-variant-numeric +slug: Web/CSS/font-variant-numeric +translation_of: Web/CSS/font-variant-numeric +--- +
{{CSSRef}}
+ +

font-variant-numeric CSS 属性控制数字，分数和序号标记的替代字形的使用。

+ +
{{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}
+ + + +

语法

+ +
font-variant-numeric: normal;
+font-variant-numeric: ordinal;
+font-variant-numeric: slashed-zero;
+font-variant-numeric: lining-nums;         /* <numeric-figure-values> */
+font-variant-numeric: oldstyle-nums;       /* <numeric-figure-values> */
+font-variant-numeric: proportional-nums;   /* <numeric-spacing-values> */
+font-variant-numeric: tabular-nums;        /* <numeric-spacing-values> */
+font-variant-numeric: diagonal-fractions;  /* <numeric-fraction-values> */
+font-variant-numeric: stacked-fractions;   /* <numeric-fraction-values> */
+font-variant-numeric: oldstyle-nums stacked-fractions;
+
+/* Global values */
+font-variant-numeric: inherit;
+font-variant-numeric: initial;
+font-variant-numeric: unset;
+
+ +

此属性以以下两种方式之一指定：

+ +
    +
  • 关键字值 normal
    • +
  • 或下列的一个或多个其他值，按任意顺序排列并以空格分隔。
    • +
+ +

值

+ +
+
normal
+
+

下列特性均不启用。

+
+
ordinal
+
启用序数形式显示。对序号标记强制启用特殊字形，如英文中的 1st，2nd，3rd，4th ，意大利文中的 1a。等同于 OpenType 特性 ordn。
+
slashed-zero
+
启用区分零显示。强制使用带有斜杠的 0；常用于区分 O 和 0。等同于 OpenType 特性 zero。
+
<numeric-figure-values>
+
下列值用于控制数字样式，可用值如下： +
    +
  • lining-nums 启用内衬数字显示。使数字全部对齐到基线。等同于 OpenType 特性 lnum。
    • +
  • oldstyle-nums 启用旧式数字显示。部分数字如 3、4、7、9 会有下沉。等同于 OpenType 特性 onum。
    • +
+
+
<numeric-spacing-values>
+
下列值用于控制数字宽度，可用值如下： +
    +
  • proportional-nums 启用比例数字显示。使数字变成基于字形本身形状下的特定宽度表现。等同于 OpenType 特性 pnum。
    • +
  • tabular-nums 启用表格数字显示。使数字等宽，易于像表格那样对齐。等同于 OpenType 特性 tnum。
    • +
+
+
<numeric-fraction-values>
+
下列值用于控制分数字形，可用值如下： +
    +
  • diagonal-fractions 启用斜角分数显示。使分子和分母变成像下标字，并用变长的斜线分隔。等同于 OpenType 特性 frac。
    • +
  • stacked-fractions 启用标准分数显示。使分子在上，分母在下，并用水平线分隔。等同于 OpenType 特性 afrc。
    • +
+
+
+ +

Formal definition

+ +

{{cssinfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

示例

+ +

Setting ordinal numeric forms

+ +

HTML

+ +
<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>
+ +

CSS

+ +
/*
+This example uses the Source Sans Pro OpenType font, developed by Adobe
+and used here under the terms of the SIL Open Font License, Version 1.1:
+http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
+*/
+
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype");
+}
+
+.ordinal {
+  font-variant-numeric: ordinal;
+  font-family: "Source Sans Pro";
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Setting_ordinal_numeric_forms')}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.font-variant-numeric")}}

diff --git a/files/zh-cn/web/css/font-variant-position/index.html b/files/zh-cn/web/css/font-variant-position/index.html new file mode 100644 index 0000000000..c150db8747 --- /dev/null +++ b/files/zh-cn/web/css/font-variant-position/index.html @@ -0,0 +1,103 @@ +--- +title: font-variant-position +slug: Web/CSS/font-variant-position +translation_of: Web/CSS/font-variant-position +--- +
{{CSSRef}}
+ +

The font-variant-position CSS property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript.

+ +

The glyphs are positioned relative to the baseline of the font, which remains unchanged. These glyphs are typically used in {{HTMLElement("sub")}} and {{HTMLElement("sup")}} elements.

+ +
/* Keyword values */
+font-variant-position: normal;
+font-variant-position: sub;
+font-variant-position: super;
+
+/* Global values */
+font-variant-position: inherit;
+font-variant-position: initial;
+font-variant-position: unset;
+
+ +

When the usage of these alternate glyphs is activated, if one character in the run doesn't have such a typographically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs.

+ +

These alternate glyphs share the same em-box and the same baseline as the rest of the font. They are merely graphically enhanced, and have no effect on the line-height and other box characteristics.

+ +

{{cssinfo}}

+ +

语法

+ +

The font-variant-position property is specified as one of the keyword values listed below.

+ +

可选值

+ +
+
normal
+
Deactivates alternate superscript and subscript glyphs.
+
sub
+
Activates subscript alternate glyphs. If, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs.
+
super
+
Activates superscript alternate glyphs. If, in a given run, one such glyph is not available for a character, all the characters in the run are rendered using synthesized glyphs.
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<p class="normal">Normal!</p>
+<p class="super">Super!</p>
+<p class="sub">Sub!</p>
+
+ +

CSS

+ +
p {
+  display: inline;
+}
+
+.normal {
+  font-variant-position: normal;
+}
+
+.super {
+  font-variant-position: super;
+}
+
+.sub {
+  font-variant-position: sub;
+}
+
+ +

Result

+ +

{{ EmbedLiveSample('Examples') }}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName('CSS3 Fonts', '#propdef-font-variant-position', 'font-variant-position')}}{{Spec2('CSS3 Fonts')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.font-variant-position")}}

diff --git a/files/zh-cn/web/css/font-variant/index.html b/files/zh-cn/web/css/font-variant/index.html new file mode 100644 index 0000000000..8b66cb1f50 --- /dev/null +++ b/files/zh-cn/web/css/font-variant/index.html @@ -0,0 +1,121 @@ +--- +title: font-variant +slug: Web/CSS/font-variant +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference +translation_of: Web/CSS/font-variant +--- +
{{CSSRef}}
+ +

font-variant 属性是{{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-east-asian")}}等属性的简写。你也可以使用简写 {{cssxref("font")}} 设定font-variant在CSS Level 2 (Revision 1)中的值（即normal 或 small-caps）。

+ +
{{EmbedInteractiveExample("pages/css/font-variant.html")}}
+ + + +

语法

+ +
font-variant: small-caps;
+font-variant: common-ligatures small-caps;
+
+/* Global values */
+font-variant: inherit;
+font-variant: initial;
+font-variant: unset;
+
+ +

值

+ +
+
normal
+
规定一个常规（normal）字型；每个非简写的属性的初始值都是normal。属于 font-variant 的非简写属性有：{{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}} 和 {{cssxref("font-variant-east-asian")}}。
+
none
+
将{{cssxref("font-variant-ligatures")}}设定为 none ，将其他非简写属性的值设定为初始值normal。
+
<common-lig-values>, <discretionary-lig-values>, <historical-lig-values>, <contextual-alt-values>
+
规定与{{cssxref("font-variant-ligatures")}}属性相关的关键字，可能的值包括： common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, contextual 和 no-contextual。
+
stylistic(),  historical-forms, styleset(), character-variant(), swash(), ornaments(), annotation()
+
规定与{{cssxref("font-variant-alternates")}}属性相关的关键字和函数。
+
small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps
+
规定与{{cssxref("font-variant-caps")}} 属性相关的关键字和函数。
+
<numeric-figure-values>, <numeric-spacing-values>, <numeric-fraction-values>, ordinal, slashed-zero
+
规定与{{cssxref("font-variant-alternates")}}属性相关的关键字，可能的值包括：lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions, ordinal 和 slashed-zero。
+
<east-asian-variant-values>, <east-asian-width-values>, ruby
+
规定与{{cssxref("font-variant-east-asian")}}属性相关的关键字，可能的值包括：jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width, ruby。
+
+

正式语法

+
+
+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<p class="normal">Firefox rocks!</p>
+<p class="small">Firefox rocks!</p>
+
+ +

CSS

+ +
p.normal {
+  font-variant: normal;
+}
+p.small {
+  font-variant: small-caps;
+}
+
+ +

结果

+ +

+ +

规范

+ +

{{cssinfo}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#propdef-font-variant', 'font-variant')}}{{Spec2('CSS3 Fonts')}}Made it a shorthand of the new font-variant-* properties.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}}{{Spec2('CSS2.1')}}No change
{{SpecName('CSS1', '#font-variant', 'font-variant')}}{{Spec2('CSS1')}}Initial definition
+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.properties.font-variant")}}

+
+ +

参见

+ +
    +
  • {{cssxref("text-transform")}}
    • +
  • {{cssxref("text-combine-upright")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
diff --git a/files/zh-cn/web/css/font-variation-settings/index.html b/files/zh-cn/web/css/font-variation-settings/index.html new file mode 100644 index 0000000000..e55f4740ce --- /dev/null +++ b/files/zh-cn/web/css/font-variation-settings/index.html @@ -0,0 +1,154 @@ +--- +title: font-variation-settings +slug: Web/CSS/font-variation-settings +tags: + - font-variation-settings + - 可变字体 +translation_of: Web/CSS/font-variation-settings +--- +
{{CSSRef}}
+ +

font-variation-settings CSS属性提供了对 variable font 特征的低级控制，通过指定要更改的特征的四个字母轴名称及其值。

+ +
{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}}
+ + + +
Note: This property is a low-level mechanism designed to set variable font features where no other way to enable or access those features exist. You should only use it when no basic properties exist to set those features (e.g. {{cssxref("font-weight")}}, {{cssxref("font-style")}}).
+ +
Note: font characteristics set using font-variation-settings will always override those set using the corresponding basic font properties, e.g. font-weight, no matter where they appear in the cascade. In some browsers, this is currently only true when the @font-face declaration includes a font-weight range.
+ +

Syntax

+ +
/* Use the default settings */
+font-variation-settings: normal;
+
+/* Set values for variable font axis names */
+font-variation-settings: "XHGT" 0.7;
+
+/* Global values */
+font-variation-settings: inherit;
+font-variation-settings: initial;
+font-variation-settings: unset;
+
+ +

Values

+ +

This property's value can take one of two forms:

+ +
+
normal
+
Text is laid out using default settings.
+
<string> <number>
+
When rendering text, the list of variable font axis names is passed to the text layout engine to enable or disable font features. Each setting is always one or more pairs consisting of a {{cssxref("<string>")}} of 4 ASCII characters followed by a {{cssxref("number")}} indicating the axis value to set. If the <string> has more or fewer characters or contains characters outside the U+20 - U+7E codepoint range, the whole property is invalid. The <number> can be fractional or negative, depending on the value range available in your font, as defined by the font designer.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Registered and custom axes

+ +

Variable font axes come in two types: registered and custom.

+ +

Registered axes are the most commonly encountered — common enough that the authors of the specification felt they were worth standardizing. Note that this doesn't mean that the author has to include all of these in their font.

+ +

Here are the registered axes along with their corresponding CSS properties:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Axis TagCSS Property
"wght"{{cssxref("font-weight")}}
"wdth"{{cssxref("font-stretch")}}
"slnt" (slant){{cssxref("font-style")}}: oblique + angle
"ital"{{cssxref("font-style")}}: italic
"opsz" +

{{cssxref("font-optical-sizing")}}

+
+ +

Custom axes can be anything the font designer wants to vary in their font, for example ascender or descender heights, the size of serifs, or anything else they can imagine. Any axis can be used as long as it is given a unique 4-character axis. Some will end up becoming more common, and may even become registered over time.

+ +
+

Note: Registered axis tags are identified using lower-case tags, whereas custom axes should be given upper-case tags. Note that font designers aren't forced follow this practice in any way, and some won't. The important takeaway here is that axis tags are case-sensitive.

+
+ +

Examples

+ +

See below for interactive examples demonstrating the registered axes. You can find a number of other variable fonts examples at our Variable fonts guide, v-fonts.com, and axis-praxis.org.

+ +
+

Warning: In order to use variable fonts on your operating system, you need to make sure that it is up to date. For example Linux OSes need the latest Linux Freetype version, and macOS prior to 10.13 does not support variable fonts. If your operating system is not up to date, you will not be able to use variable fonts in web pages or the Firefox Developer Tools.

+
+ +

Weight (wght)

+ +

The following live example's CSS can be edited to allow you to play with font weight values.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}
+ +

Slant (slnt)

+ +

The following live example's CSS can be edited to allow you to play with font slant/oblique values.

+ +
{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Fonts', '#low-level-font-variation-settings-control-the-font-variation-settings-property', 'font-variation-settings')}}{{Spec2('CSS4 Fonts')}}Initial definition
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.font-variation-settings")}}

+ +

See also

+ + + +
+
+
diff --git a/files/zh-cn/web/css/font-weight/index.html b/files/zh-cn/web/css/font-weight/index.html new file mode 100644 index 0000000000..6400488a40 --- /dev/null +++ b/files/zh-cn/web/css/font-weight/index.html @@ -0,0 +1,368 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +tags: + - CSS + - CSS Fonts +translation_of: Web/CSS/font-weight +--- +
{{CSSRef}}
+ +

概述

+ +

 {{Cssxref("font-weight")}} CSS 属性指定了字体的粗细程度。 一些字体只提供 normal 和 bold 两种值。

+ +
{{EmbedInteractiveExample("pages/css/font-weight.html")}}
+ +
/* Keyword values */
+font-weight: normal;
+font-weight: bold;
+
+/* Keyword values relative to the parent */
+font-weight: lighter;
+font-weight: bolder;
+
+/* Numeric keyword values */
+font-weight: 1
+font-weight: 100;
+font-weight: 100.6;
+font-weight: 123;
+font-weight: 200;
+font-weight: 300;
+font-weight: 321;
+font-weight: 400;
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;
+font-weight: 800;
+font-weight: 900;
+font-weight: 1000;
+
+/* Global values */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+
+ + + +

{{EmbedLiveSample("font-weight", "100%", 500, "", "", "example-outcome-frame")}}

+ +

{{cssinfo}}

+ +

语法

+ +

值

+ +
+
normal
+
正常粗细。与400等值。
+
bold
+
 加粗。 与700等值。
+
lighter
+
比从父元素继承来的值更细(处在字体可行的粗细值范围内)。
+
bolder
+
比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。
+
<number>
+
一个介于 1 和 1000 (包含) 之间的 <number> 类型值。更大的数值代表字体重量粗于更小的数值 (或一样粗)。一些常用的数值对应于通用的字体重量名称，如章节常见粗细值名称和数值对应所描述。
+
+ +

回退机制

+ +

如果指定的权重值不可用，则使用以下规则来确定实际呈现的权重：

+ +
    +
  • 如果指定的权重值在 400和 500之间（包括400和500）： + +
      +
    • 按升序查找指定值与500之间的可用权重；
      • +
    • 如果未找到匹配项，按降序查找小于指定值的可用权重；
      • +
    • 如果未找到匹配项，按升序查找大于500的可用权重。
      • +
    +
    • +
  • 如果指定值小于400，按降序查找小于指定值的可用权重。 如果未找到匹配项，按升序查找大于指定值的可用权重（先尽可能的小，再尽可能的大）。
    • +
  • 如果指定值大于500，按升序查找大于指定值的可用权重。 如果未找到匹配项，按降序查找小于指定值的可用权重（先尽可能的大，再尽可能的小）。
    • +
+ +

以上策略意味着，如果一个字体只有 normal 和 bold 两种粗细值选择，指定粗细值为 100-500 时，实际渲染时将使用 normal，指定粗细值为 600-900 时，实际渲染时将使用 bold 。

+ +

相对粗细值的解析

+ +

当指定的是相对粗细值 lighter 或 bolder 时，将使用如下图表来决定元素渲染时的绝对粗细值：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
继承值（Inherited value）bolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700
+ +

常见粗细值名称和数值对应

+ +

100 到 900 之间的数值大致对应如下的常见粗细值名称：

+ +
+
100
+
Thin (Hairline)
+
200
+
Extra Light (Ultra Light)
+
300
+
Light
+
400
+
Normal
+
500
+
Medium
+
600
+
Semi Bold (Demi Bold)
+
700
+
Bold
+
800
+
Extra Bold (Ultra Bold)
+
900
+
Black (Heavy)
+
+ +

插值规律

+ +

font-weight 数值采取离散式定义（使用 100 的整倍数）。数值为实数，非 100 的整数倍的值将被四舍五入转换为 100 的整倍数，遇到 *50 时，将向上转换，如 150 将转换为 200 。

+ +

正式的语法

+ +
{{csssyntax("font-weight")}}
+ +

例子

+ +

HTML

+ +
<p>
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, 'and what is the use of a book,' thought Alice 'without pictures or
+  conversations?'
+</p>
+
+<div>I'm heavy<br/>
+  <span>I'm lighter</span>
+</div>
+
+ +

CSS

+ +
/* Set paragraph text to be bold. */
+p {
+  font-weight: bold;
+}
+
+/* Set div text to two steps darker than
+   normal but less than a standard bold. */
+div {
+ font-weight: 600;
+}
+
+/* Sets text enclosed within span tag
+   to be one step lighter than the parent. */
+span {
+  font-weight: lighter;
+}
+ +

结果

+ +

{{EmbedLiveSample("Examples","400","300")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS3 Fonts')}}No change.
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}{{Spec2('CSS3 Transitions')}}Defines font-weight as animatable.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('CSS1', '#font-weight', 'font-weight')}}{{Spec2('CSS1')}}
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.font-weight")}}

diff --git a/files/zh-cn/web/css/font/index.html b/files/zh-cn/web/css/font/index.html new file mode 100644 index 0000000000..6a5b733707 --- /dev/null +++ b/files/zh-cn/web/css/font/index.html @@ -0,0 +1,342 @@ +--- +title: font +slug: Web/CSS/font +translation_of: Web/CSS/font +--- +

{{ CSSRef() }}

+ +

概述

+ +

font 属性可以用来作为 {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} 和 {{ Cssxref("font-family") }} 属性的简写，或将元素的字体设置为系统字体。

+ +

{{EmbedInteractiveExample("pages/css/font.html")}}

+ + + + + +

与任何简写属性一样，任何未指定的值都将设置为其对应的初始值（可能覆盖先前使用非简写属性设置的值）。 虽然不能通过 font 直接设置，但是{{ cssxref("font-stretch") }}，{{ cssxref("font-size-adjust") }} 和 {{ cssxref("font-kerning") }} 也会重置为初始值。

+ +

语法

+ +

可以将font属性指定为单个关键字，它将选择系统字体，或者作为字体相关的属性的简写。

+ +

如果将 font 指定为系统关键字，则它必须是以下之一：caption, icon, menu, message-box, small-caption, status-bar。

+ +

如果 font 字体相关的属性的简写：

+ +
    +
  • 必须包含以下值： +
      +
    • {{cssxref("<font-size>")}}
      • +
    • {{cssxref("<font-family>")}}
      • +
    +
    • +
  • 可以选择性包含以下值： +
      +
    • {{cssxref("<font-style>")}}
      • +
    • {{cssxref("<font-variant>")}}
      • +
    • {{cssxref("<font-weight>")}}
      • +
    • {{cssxref("<line-height>")}}
      • +
    +
    • +
  • font-style, font-variant 和 font-weight 必须在 font-size 之前
    • +
  • 在 CSS 2.1 中 font-variant 只可以是 normal 和 small-caps
    • +
  • line-height 必须跟在 font-size 后面，由 "/" 分隔，例如 "16px/3"
    • +
  • font-family 必须最后指定
    • +
+ +

值

+ +
+
<'font-style'>
+
见 {{ Cssxref("font-style") }} 属性。
+
<'font-variant'>
+
见 {{ Cssxref("font-variant") }} 属性。
+
<'font-weight'>
+
见 {{ Cssxref("font-weight") }} 属性。
+
<'font-size'>
+
见 {{ Cssxref("font-size") }} 属性。
+
<'line-height'>
+
见 {{ cssxref("line-height") }} 属性。
+
<'font-family'>
+
见 {{ Cssxref("font-family") }} 属性。
+
+

系统字体

+
+
caption
+
用于标题控件（如按钮，下拉列表等）的系统字体。
+
icon
+
用于标签图标的系统字体。
+ +
菜单中（如下拉菜单和菜单列表）使用的系统字体。
+
message-box
+
用于对话框的系统字体。
+
small-caption
+
用于小标题控件的系统字体。
+
status-bar
+
用于窗口状态栏的系统字体。
+
系统关键字前缀
+
浏览器经常会多实现几个带前缀的关键字；Gecko 实现了 -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, 和 -moz-field.
+
+

正式语法

+
+
+ +
{{csssyntax("font")}}
+ +

示例

+ +
/* Set the font size to 12px and the line height to 14px.
+   Set the font family to sans-serif */
+p { font: 12px/14px sans-serif }
+
+/* Set the font size to 80% of the parent element
+   or default value (if no parent element present).
+   Set the font family to sans-serif */
+p { font: 80% sans-serif }
+
+/* Set the font weight to bold,
+   the font-style to italic,
+   the font size to large,
+   and the font family to serif. */
+p { font: bold italic large serif }
+
+/* Use the same font as the status bar of the window */
+p { font: status-bar }
+ +

实样

+ + + + + + + + + + + + + +

{{ EmbedLiveSample('live_sample','100%', '380px') }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{ SpecName('CSS3 Fonts', '#font', 'font') }}{{ Spec2('CSS3 Fonts') }}添加对 font-stretch 的支持
{{ SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight') }}{{ Spec2('CSS2.1') }}添加对关键字的支持
{{ SpecName('CSS1', '#font', 'font') }}{{ Spec2('CSS1') }}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.font")}}

diff --git a/files/zh-cn/web/css/frequency/index.html b/files/zh-cn/web/css/frequency/index.html new file mode 100644 index 0000000000..f230c49052 --- /dev/null +++ b/files/zh-cn/web/css/frequency/index.html @@ -0,0 +1,74 @@ +--- +title: +slug: Web/CSS/frequency +tags: + - CSS + - Web + - 参考 +translation_of: Web/CSS/frequency +--- +
{{CSSRef}}
+ +

<frequency> CSS数据类型表示频率维度，例如语音的音高。目前它未在任何 CSS 属性中被使用。

+ +

语法

+ +

The <frequency> data type consists of a {{cssxref("<number>")}} followed by one of the units listed below. As with all CSS dimensions, there is no space between the unit literal and the number.

+ +

单位

+ +

可以使用以下单位：

+ +
+
Hz
+
表示以赫兹（hertz）为单位的频率。例如：0Hz、1500Hz、10000Hz。
+
kHz
+
表示以千赫兹（kilohertz）为单位的频率。例如：0kHz、1.5kHz、10kHz。
+
+ +
+

Note: Although the number 0 is always the same regardless of unit, the unit may not be omitted. In other words, 0 is invalid and does not represent 0Hz or 0kHz. Though the units are case-insensitive, it is good practice to use a capital "H" for Hz and kHz, as specified in the SI.

+
+ +

示例

+ +
12Hz     Positive integer
+4.3Hz    Non-integer
+14KhZ    The unit is case-insensitive, though non-SI capitalization is not recommended.
++0Hz     Zero, with a leading + and a unit
+-0kHz    Zero, with a leading - and a unit
+ +

Invalid frequency values

+ +
12.0     This is a <number>, not an <frequency>, because it is missing a unit.
+7 Hz     No space is allowed between the number and the unit.
+0        Although unitless zero is an allowable <length>, it's an invalid <frequency>.
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Values', '#frequency', '<frequency>')}}{{Spec2('CSS3 Values')}}Initial definition
+ +
+

Note: This data type was initially introduced in CSS Level 2 for the now-obsolete aural media type, where it was used to define the pitch of the voice. However, the <frequency> data type has been reintroduced in CSS3, though no CSS property is using it at the moment.

+
+ +

浏览器兼容性

+ + + +

{{Compat("css.types.frequency")}}

diff --git a/files/zh-cn/web/css/gap/index.html b/files/zh-cn/web/css/gap/index.html new file mode 100644 index 0000000000..c95b2c5897 --- /dev/null +++ b/files/zh-cn/web/css/gap/index.html @@ -0,0 +1,211 @@ +--- +title: gap (grid-gap) +slug: Web/CSS/gap +tags: + - CSS + - CSS Flexible Boxes + - CSS Grid +translation_of: Web/CSS/gap +--- +
{{CSSRef}}
+ +

gap 属性是用来设置网格行与列之间的间隙（{{glossary("gutters")}}），该属性是{{cssxref("row-gap")}} and {{cssxref("column-gap")}}的简写形式。

+ +
{{EmbedInteractiveExample("pages/css/gap.html")}}
+ + + +
+

CSS Grid Layout 起初是用 {{cssxref('grid-gap')}} 属性来定义的，目前逐渐被 gap 替代。但是，为了兼容那些不支持 gap 属性的浏览器，你需要像上面的例子一样，使用带有前缀的属性。

+
+ +

语法

+ +
/* One <length> value */
+gap: 20px;
+gap: 1em;
+gap: 3vmin;
+gap: 0.5cm;
+
+/* One <percentage> value */
+gap: 16%;
+gap: 100%;
+
+/* Two <length> values */
+gap: 20px 10px;
+gap: 1em 0.5em;
+gap: 3vmin 2vmax;
+gap: 0.5cm 2mm;
+
+/* One or two <percentage> values */
+gap: 16% 100%;
+gap: 21px 82%;
+
+/* calc() values */
+gap: calc(10% + 20px);
+gap: calc(20px + 10%) calc(10% - 5px);
+
+/* Global values */
+gap: inherit;
+gap: initial;
+gap: unset;
+
+ +

该属性用来表示 <'row-gap'> 和 <'column-gap'>的值，而<'column-gap'>是可选的，假如 <'column-gap'> 缺失的话，则会被设置成跟<'row-gap'>一样的的值。

+ +

<'row-gap'> and <'column-gap'> 都可以用  <length> 或者 <percentage> 来表示。

+ +

值

+ +
+
{{cssxref("<length>")}}
+
网格线之间的间隙宽度。
+
{{cssxref("<percentage>")}}
+
网格线直接的间隙宽度，相对网格容器的百分比。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

Flex布局

+ +

{{SeeCompatTable}}

+ +

HTML

+ +
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+ +

CSS

+ +
#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  gap: 20px 5px;
+}
+
+#flexbox > div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Flex布局', "auto", "120px")}}

+ +

Grid布局

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  gap: 20px 5px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Grid布局', 'auto', 120)}}

+ +

多列布局

+ +

HTML

+ +
<p class="content-box">
+  This is some multi-column text with a 40px column
+  gap created with the CSS <code>gap</code> property.
+  Don't you think that's fun and exciting? I sure do!
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 3;
+  gap: 40px;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("多列布局", "auto", "120px")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS3 Box Alignment", "#propdef-gap", "gap")}}{{Spec2("CSS3 Box Alignment")}}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

在Flex 布局的兼容性

+ +

{{Compat("css.properties.gap.flex_context")}}

+ +

在Grid layout的兼容性

+ +

{{Compat("css.properties.gap.grid_context")}}

+ +

多列布局的兼容性

+ +

{{Compat("css.properties.gap.multicol_context")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/general_sibling_combinator/index.html b/files/zh-cn/web/css/general_sibling_combinator/index.html new file mode 100644 index 0000000000..941e9c9218 --- /dev/null +++ b/files/zh-cn/web/css/general_sibling_combinator/index.html @@ -0,0 +1,73 @@ +--- +title: 通用兄弟选择器 +slug: Web/CSS/General_sibling_combinator +tags: + - CSS + - Selectors +translation_of: Web/CSS/General_sibling_combinator +--- +
{{CSSRef}}
+ +

概述

+ +

兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。

+ +

语法

+ +
former_element ~ target_element { style properties }
+ +

示例

+ +
p ~ span {
+  color: red;
+}
+ +

上面的CSS作用于下面的HTML中:

+ +
<span>This is not red.</span>
+<p>Here is a paragraph.</p>
+<code>Here is some code.</code>
+<span>And here is a span.</span>
+ +

则会产生下面的效果:

+ +

This is not red.

+ +

Here is a paragraph.

+ +

Here is some code.And here is a span.

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
CSS Selectors Level 3{{Spec2('CSS3 Selectors')}}
+ +

浏览器兼容性

+ +

{{Compat("css.selectors.general_sibling")}}

+ +
+ +

相关

+ +
    +
  • {{Cssxref("Adjacent_sibling_selectors", "Adjacent sibling selectors")}}
    • +
+ +
+
+
diff --git a/files/zh-cn/web/css/gradient/index.html b/files/zh-cn/web/css/gradient/index.html new file mode 100644 index 0000000000..8cb033cb7b --- /dev/null +++ b/files/zh-cn/web/css/gradient/index.html @@ -0,0 +1,127 @@ +--- +title: +slug: Web/CSS/gradient +translation_of: Web/CSS/gradient +--- +
{{CSSRef}}
+ +
<gradient> 是一种{{cssxref("<image>")}}CSS数据类型的子类型，用于表现两种或多种颜色的过渡转变。
+ +
<gradient> 没有内在尺寸；即，不具备固有或首选的尺寸，也不具备首选的比率。其实际的大小取决于其填充元素的大小。
+ +

语法

+ +

渐变函数

+ +

<gradient> 数据类型由下列函数定义。

+ +
+

线形渐变

+ +

颜色值沿着一条隐式的直线逐渐过渡。由{{cssxref("linear-gradient", "linear-gradient()")}}产生。

+ + + +
.linear-gradient {
+  background: linear-gradient(to right,
+      red, orange, yellow, green, blue, indigo, violet);
+}
+ +

{{EmbedLiveSample('linear-gradient', 240, 80)}}

+
+ +
+

径向渐变

+ +

颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值。由{{cssxref("radial-gradient", "radial-gradient()")}}函数产生。

+ + + +
.radial-gradient {
+  background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+
+ +

{{EmbedLiveSample('radial-gradient', 240, 80)}}

+
+ +
+

重复渐变

+ +

重复多次渐变图案直到足够填满指定元素。由 {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}和{{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}函数产生。

+ + + +
.linear-repeat {
+  background: repeating-linear-gradient(to top left,
+      lightpink, lightpink 5px, white 5px, white 10px);
+}
+
+.radial-repeat {
+  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
+}
+ +

{{EmbedLiveSample('repeating-gradient', 220, 180)}}

+
+ +

插值

+ +

与其他的颜色插值一样，颜色渐变也通过Alpha预乘(alpha-permultiplied)计算得到结果。这样避免了因为颜色和透明度转变带来的不可预见的灰色阴影。（在使用transparent keyword时，敬请注意一些没有使用这种计算方式的旧浏览器。）

+ +

规格

+ + + + + + + + + + + + + + + + +
规格状态评价
{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}{{Spec2('CSS3 Images')}}初始定义。
+ +

浏览器兼容性

+ +

每一种渐变都有不同的兼容性，敬请查阅特定渐变的相关文献与资料以获取更多信息。

+ +

See also

+ +
    +
  • Using CSS gradients,
    • +
  • 渐变方程：{{cssxref("<gradient>")}}, {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}};
    • +
+ +

 

diff --git a/files/zh-cn/web/css/grid-area/index.html b/files/zh-cn/web/css/grid-area/index.html new file mode 100644 index 0000000000..f3b85e611d --- /dev/null +++ b/files/zh-cn/web/css/grid-area/index.html @@ -0,0 +1,277 @@ +--- +title: grid-area +slug: Web/CSS/grid-area +tags: + - CSS + - CSS 网格 + - grid +translation_of: Web/CSS/grid-area +--- +

CSS 属性 grid-area 是一种对于 {{cssxref("grid-row-start")}}、{{cssxref("grid-column-start")}}、{{cssxref("grid-row-end")}} 和 {{cssxref("grid-column-end")}} 的简写，通过基线（line），跨度（span）或没有（自动）的网格放置在 {{glossary("grid rows", "grid row")}} 中指定一个网格项的大小和位置，继而确定 {{glossary("grid areas", "grid area")}} 的边界。

+ +
/* Keyword values */
+grid-area: auto;
+grid-area: auto / auto;
+grid-area: auto / auto / auto;
+grid-area: auto / auto / auto / auto;
+
+/* <custom-ident> values */
+grid-area: some-grid-area;
+grid-area: some-grid-area / another-grid-area;
+
+/* <integer> && <custom-ident>? values */
+grid-area: some-grid-area 4;
+grid-area: some-grid-area 4 / 2 another-grid-area;
+
+/* span && [ <integer> || <custom-ident> ] values */
+grid-area: span 3;
+grid-area: span 3 / span some-grid-area;
+grid-area: 2 span / another-grid-area span;
+
+/* Global values */
+grid-area: inherit;
+grid-area: initial;
+grid-area: unset;
+
+ +

如果指定了4个 <grid-line> 的值，grid-row-start 会被设为第一个值，grid-column-start 为第二个值， grid-row-end 为第三个值，grid-column-end 为第四个值。

+ +

当 grid-column-end 被忽略时，若 grid-column-start 为一 {{cssxref("<custom-ident>")}}（自定义关键字数据类型）， grid-column-end 则为该 <custom-ident>；否则为 auto。

+ +

当 grid-row-end 被忽略时，若 grid-row-start 为一 <custom-ident>，grid-row-end 则为该 <custom-ident>；否则为 auto。

+ +

当 grid-column-start 被忽略时，若 grid-row-start 为一 <custom-ident>，则所有四项普通写法的属性值均为该值。否则为 auto。

+ +

网格面的属性亦可设为一 {{cssxref("<custom-ident>")}} 作为其名称，然后可通过 {{cssxref("grid-template-areas")}} 放置。

+ +

语法

+ +
/* Keyword values */
+grid-area: auto;
+grid-area: auto / auto;
+grid-area: auto / auto / auto;
+grid-area: auto / auto / auto / auto;
+
+/* <custom-ident> values */
+grid-area: some-grid-area;
+grid-area: some-grid-area / another-grid-area;
+
+/* <integer> && <custom-ident>? values */
+grid-area:  4 some-grid-area;
+grid-area:  4 some-grid-area / 2 another-grid-area;
+
+/* span && [ <integer> || <custom-ident> ] values */
+grid-area: span 3;
+grid-area: span 3 / span some-grid-area;
+grid-area: 2 span / another-grid-area span;
+
+/* Global values */
+grid-area: inherit;
+grid-area: initial;
+grid-area: unset;
+ +

值

+ +
+
auto
+
该关键字表明该属性未指定该如何纺织网格项目。网格项目会被以默认跨度（span）1自动放置。
+
<custom-ident> 自定义关键字数据类型
+
如果存在以 '<custom-ident>-start'/'<custom-ident>-end' 命名的自定义基线，它会将第一个这样的基线贡献给网格单元以布置。 +

注意: 被命名的网格区域（grid areas）会自动生成隐式的被命名的基线，因此指定 grid-row: foo; 将会选择这个命名区域的开始和结束的边界（除非在它之前存在显式指定的以 foo-start/foo-end 命名的其他基线）。

+ +

否则，它就会被当作整数 1 与 <custom-ident> 一起指定。

+
+
<integer> && <custom-ident>?
+
将第 n 条网格基线贡献给网格单元布置。如果指定的是负数，则指的是从下边界向上边界计算的反向顺序。如果提供的是 {{cssxref("<custom-ident>")}}，那么只有以此命名的基线才会被计算。如果所命名的基线数超过了网格线数，为了找到该位置，所有隐式的网格线会被假定拥有这个命名。
+
{{cssxref("integer")}} 值不能为 0。
+
span && [ <integer> || <custom-ident> ]
+
为网格单元定义一个跨度，使得网格单元的网格区域中的一条边界远离另一条边界线 n 条基线。如果提供的是 +

{{cssxref("<custom-ident>")}}，则只有以此命名的基线才会被计算。如果网格线不足，则假定与搜索方向对应的显式网格一侧的所有隐式网格线都具有该名称。

+
+
+

如果忽略 <integer> ，它就默认设为 1。它的值也不能为0。

+
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML 内容

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

CSS 内容

+ +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template: repeat(4, 1fr) / 50px 100px;
+}
+
+#item1 {
+  background-color: lime;
+  grid-area: 2 / 2 / auto / span 3;
+}
+
+#item2 {
+  background-color: yellow;
+}
+
+#item3 {
+  background-color: blue;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", "150px")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-area", "grid-area")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

浏览器兼容性

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("57.0")}}[1]{{CompatVersionUnknown}}[3]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatOpera(44)}}[4]{{CompatSafari("10.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatChrome("57.0")}}[1]{{CompatChrome("57.0")}}[1]{{CompatVersionUnknown}}{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatOperaMobile(44)}}{{CompatNo}}
+
+ +

[1] Implemented behind the experimental Web Platform features flag in chrome://flags since Chrome 29.0.

+ +

[2] Implemented behind the preference layout.css.grid.enabled since Gecko 40.0 {{geckoRelease("40.0")}}, defaulting to false. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.

+ +

[3] Supported as of EdgeHTML 16. Internet Explorer and Edge implement an older version of the specification, which does not define this property. See the request for updating the implementation.

+ +

[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags since Opera 28.0.

+ +

另请参见

+ +
    +
  • Related CSS properties: {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-template-areas")}}
    • +
  • Grid Layout Guide: Grid template areas
    • +
  • Video tutorial: Grid Template Areas
    • +
+ + diff --git a/files/zh-cn/web/css/grid-auto-columns/index.html b/files/zh-cn/web/css/grid-auto-columns/index.html new file mode 100644 index 0000000000..b858046b8e --- /dev/null +++ b/files/zh-cn/web/css/grid-auto-columns/index.html @@ -0,0 +1,206 @@ +--- +title: grid-auto-columns +slug: Web/CSS/grid-auto-columns +tags: + - CSS + - grid +translation_of: Web/CSS/grid-auto-columns +--- +

CSS 属性 grid-auto-columns 指定了隐式创建的网格纵向轨道（{{glossary("grid tracks", "track")}}）的宽度。

+ +
{{EmbedInteractiveExample("pages/css/grid-auto-columns.html")}}
+ + + +

如果一个表格项目被定位在没有使用 {{cssxref("grid-template-columns")}} 显式指定尺寸的列中，隐式的 {{glossary("grid", "grid")}} 轨道就会被创建出来支撑它。显式地定位到超出范围的列中，或者通过自动布局算法创建额外的列，就会发生上诉情况。

+ +

语法

+ +
/* 以下是不同类型的属性值示例 */
+/* Keyword values */
+grid-auto-columns: min-content;
+grid-auto-columns: max-content;
+grid-auto-columns: auto;
+
+/* <length> values */
+grid-auto-columns: 100px;
+grid-auto-columns: 20cm;
+grid-auto-columns: 50vmax;
+
+/* <percentage> values */
+grid-auto-columns: 10%;
+grid-auto-columns: 33.3%;
+
+/* <flex> values */
+grid-auto-columns: 0.5fr;
+grid-auto-columns: 3fr;
+
+/* minmax() values */
+grid-auto-columns: minmax(100px, auto);
+grid-auto-columns: minmax(max-content, 2fr);
+grid-auto-columns: minmax(20%, 80vmax);
+
+/* fit-content() values */
+grid-auto-columns: fit-content(400px);
+grid-auto-columns: fit-content(5cm);
+grid-auto-columns: fit-content(20%);
+
+/* multiple track-size values */
+grid-auto-columns: min-content max-content auto;
+grid-auto-columns: 100px 150px 390px;
+grid-auto-columns: 10% 33.3%;
+grid-auto-columns: 0.5fr 3fr 1fr;
+grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
+
+/* Global values */
+grid-auto-columns: inherit;
+grid-auto-columns: initial;
+grid-auto-columns: unset;
+
+ +

属性值

+ +
+
<length>
+
指定一个非负的数作为尺寸。
+
<percentage>
+
一个非负的百分数（{{cssxref("percentage", "<percentage>")}}），相对于 grid 容器的尺寸。如果 grid 的尺寸不确定，该百分值就会被当作 auto 对待。
+
<flex>
+
一个以 fr 为单位非负的尺寸，表示轨道的伸缩系数。每个以 <flex> 定义尺寸的轨道会以该伸缩系数为比例来占据剩余的可用空间。如果使用 minmax()，则表示自动缩小并指定最大尺寸（也就是 minmax(auto, <flex>)）。
+
max-content
+
一个关键字，表示以网格项的最大的内容来占据网格轨道。
+
min-content
+
一个关键字，表示以网格项的最大的最小内容来占据网格轨道。
+
minmax(min, max)
+
定义一个尺寸范围，即大于或等于 min 值，并且小于或等于 max 值。如果 max 值小于 min 值，那么 max 值会被忽略并且最终表现为 min 值。最大值可以设置为网格轨道系数值<flex> ，但最小值则不行。
+
fit-content(argument)
+
相当于公式 min(max-content, max(auto, argument))，类似于auto 的计算(即 minmax(auto, max-content))，除了网格轨道大小值是确定下来的，否则该值都大于 auto 的最小值。
+
auto
+
如果该网格轨道为最大时，该属性等同于 <max-content> ，为最小时，则等同于 <min-content> 。
+
+

Note: auto 轨道尺寸 (且只为 auto 值时) 才可以被 {{cssxref("align-content")}} 和 {{cssxref("justify-content")}} 属性拉伸。

+
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML content

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

CSS content

+ +
#grid {
+  height: 100px;
+  display: grid;
+  grid-template-areas: "a a";
+  grid-gap: 10px;
+  grid-auto-columns: 200px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

{{EmbedLiveSample("Example", "410px", "100px")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-auto-columns", "grid-auto-columns")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.grid-auto-columns")}}

+ +

参见

+ + + + diff --git a/files/zh-cn/web/css/grid-auto-flow/index.html b/files/zh-cn/web/css/grid-auto-flow/index.html new file mode 100644 index 0000000000..11e133f057 --- /dev/null +++ b/files/zh-cn/web/css/grid-auto-flow/index.html @@ -0,0 +1,211 @@ +--- +title: grid-auto-flow +slug: Web/CSS/grid-auto-flow +tags: + - CSS + - CSS 属性 + - CSS 网格 +translation_of: Web/CSS/grid-auto-flow +--- +

grid-auto-flow 属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。

+ +
{{EmbedInteractiveExample("pages/css/grid-auto-flow.html")}}
+ + + +

语法

+ +
/* Keyword values */
+grid-auto-flow: row;
+grid-auto-flow: column;
+grid-auto-flow: dense;
+grid-auto-flow: row dense;
+grid-auto-flow: column dense;
+
+/* Global values */
+grid-auto-flow: inherit;
+grid-auto-flow: initial;
+grid-auto-flow: unset;
+ +

此属性有两种形式：

+ +
    +
  • 单个关键字：row、column，或 dense 中的一个。
    • +
  • 两个关键字：row dense 或 column dense。
    • +
+ +

取值

+ +
+
row
+
该关键字指定自动布局算法按照通过逐行填充来排列元素，在必要时增加新行。如果既没有指定 row 也没有 column，则默认为 row。
+
column
+
该关键字指定自动布局算法通过逐列填充来排列元素，在必要时增加新列。
+
dense
+
该关键字指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。
+
+

如果省略它，使用一种「稀疏」算法，在网格中布局元素时，布局算法只会「向前」移动，永远不会倒回去填补空白。这保证了所有自动布局元素「按照次序」出现，即使可能会留下被后面元素填充的空白。

+
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+  <div id="item4"></div>
+  <div id="item5"></div>
+</div>
+<select id="direction" onchange="changeGridAutoFlow()">
+  <option value="column">column</option>
+  <option value="row">row</option>
+</select>
+<input id="dense" type="checkbox" onchange="changeGridAutoFlow()">
+<label for="dense">dense</label>
+
+ +

CSS

+ +
#grid {
+  height: 200px;
+  width: 200px;
+  display: grid;
+  grid-gap: 10px;
+  grid-template: repeat(4, 1fr) / repeat(2, 1fr);
+  grid-auto-flow: column;  /* or 'row', 'row dense', 'column dense' */
+}
+
+#item1 {
+  background-color: lime;
+  grid-row-start: 3;
+}
+
+#item2 {
+  background-color: yellow;
+}
+
+#item3 {
+  background-color: blue;
+}
+
+#item4 {
+  grid-column-start: 2;
+  background-color: red;
+}
+
+#item5 {
+  background-color: aqua;
+}
+ + + +

{{EmbedLiveSample("示例", "200px", "230px")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-auto-flow", "grid-auto-flow")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.grid-auto-flow")}}

+ +

参见

+ + + + diff --git a/files/zh-cn/web/css/grid-auto-rows/index.html b/files/zh-cn/web/css/grid-auto-rows/index.html new file mode 100644 index 0000000000..ce4385ca40 --- /dev/null +++ b/files/zh-cn/web/css/grid-auto-rows/index.html @@ -0,0 +1,205 @@ +--- +title: grid-auto-rows +slug: Web/CSS/grid-auto-rows +tags: + - CSS + - CSS Grid + - CSS Property + - CSS属性 + - CSS网格 + - Reference + - 参考 +translation_of: Web/CSS/grid-auto-rows +--- +

CSS属性 grid-auto-rows 用于指定隐式创建的行轨道大小。

+ +
{{EmbedInteractiveExample("pages/css/grid-auto-rows.html")}}
+ + + +

如果定位到某行中的网格元素没有使用 {{cssxref("grid-template-rows")}}来指定大小，则会隐式创建{{glossary("grid", "grid")}} 轨道来保存它。这可能在显示定位到超出范围的行，或者由自动放置算法创建额外的行时发生。

+ +

语法

+ +
/* Keyword values */
+grid-auto-rows: min-content;
+grid-auto-rows: max-content;
+grid-auto-rows: auto;
+
+/* <length> values */
+grid-auto-rows: 100px;
+grid-auto-rows: 20cm;
+grid-auto-rows: 50vmax;
+
+/* <percentage> values */
+grid-auto-rows: 10%;
+grid-auto-rows: 33.3%;
+
+/* <flex> values */
+grid-auto-rows: 0.5fr;
+grid-auto-rows: 3fr;
+
+/* minmax() values */
+grid-auto-rows: minmax(100px, auto);
+grid-auto-rows: minmax(max-content, 2fr);
+grid-auto-rows: minmax(20%, 80vmax);
+
+/* multiple track-size values */
+grid-auto-rows: min-content max-content auto;
+grid-auto-rows: 100px 150px 390px;
+grid-auto-rows: 10% 33.3%;
+grid-auto-rows: 0.5fr 3fr 1fr;
+grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
+
+/* Global values */
+grid-auto-rows: inherit;
+grid-auto-rows: initial;
+grid-auto-rows: unset;
+
+ +

取值

+ +
+
<length>
+
一个非负的长度。
+
<percentage>
+
相对于网格窗口块尺寸的非负 {{cssxref("percentage", "<percentage>")}} 值。如果网格容器的块尺寸是不确定的, 则百分比值将被视为 auto。
+
<flex>
+
非负的、以 fr 为单位的维度指定轨道的弹性因子。每个 <flex>-尺寸的轨道都按其弹性因子的比例挤占剩余空间的一部分。 +

当使用在 minmax() 符号外时，意味着最小值为 auto (例： minmax(auto, <flex>)).

+
+
max-content
+
关键词，指明由网格元素中占用空间最大的那一个来决定轨道的尺寸。
+
min-content
+
关键词，指明由网格元素中占用空间最小的那一个来决定轨道的尺寸。
+
minmax(min, max)
+
函数符号，定义一个不小于min且不大于max的尺寸范围。如果max比min小，则max会被忽略，函数会被录作min处理。作为最大值，<flex> 值设置了轨道的弹性因子。作为最小值，会被当作0处理（或者最小内容——当网格容器指定了尺寸为最小内容）。
+
auto
+
关键字，当用来指定最大值时与最大内容一致，当用来指定最小值时，它表示轨道中所有网格元素最小尺寸中的最大值（由{{cssxref("min-width")}}/{{cssxref("min-height")}}指定）。
+
+

注意：auto 轨道尺寸（且仅有 auto 轨道尺寸）可配合{{cssxref("align-content")}} 和{{cssxref("justify-content")}} 属性使用。

+
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML内容

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

CSS内容

+ +
#grid {
+  width: 200px;
+  display: grid;
+  grid-template-areas: "a a";
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

{{EmbedLiveSample("Example", "210px", "210px")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
标准状态说明
{{SpecName("CSS3 Grid", "#propdef-grid-auto-rows", "grid-auto-rows")}}{{Spec2("CSS3 Grid")}}初始定义。
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.grid-auto-rows")}}

+ +

相关链接

+ + + + diff --git a/files/zh-cn/web/css/grid-column/index.html b/files/zh-cn/web/css/grid-column/index.html new file mode 100644 index 0000000000..f6074374b2 --- /dev/null +++ b/files/zh-cn/web/css/grid-column/index.html @@ -0,0 +1,195 @@ +--- +title: grid-column +slug: Web/CSS/grid-column +translation_of: Web/CSS/grid-column +--- +

grid-column CSS属性是 {{cssxref("grid-column-start")}} 和 {{cssxref("grid-column-end")}} 的简写属性，用于指定网格项目的大小和位置{ 通过为它的网格位置贡献线条，跨度或不添加任何内容（自动），从而指定其 {{glossary("grid area","grid area","网格区域")}}。

+ +
{{EmbedInteractiveExample("pages/css/grid-column.html")}}
+ + + +

语法

+ +

如果给出两个<grid-line>值，它们之间用“ /”分隔。 将grid-column-start的正手设置为斜线之前的值，并将grid-column-end的正手设置为斜线之后的值。

+ +

每个<grid-line>值可以指定为：

+ +
    +
  • 要么是auto关键字
    • +
  • 或<custom-ident>值
    • +
  • 或<integer>值
    • +
  • 或者<custom-ident>和<integer>，两者之间用空格分隔
    • +
  • 或关键字span与<custom-ident>或<integer>或两者一起使用。
    • +
+ +

值

+ +


+ auto

+ +


+ 是一个关键字，指示该属性对网格项目的放置没有任何作用，表示自动放置，自动跨度或默认跨度为1。

+ +


+ <custom-ident>

+ +


+ 如果有一个名为"<custom-ident>-start"/"<custom-ident>-start"的命名行，则它将第一行添加到网格项目的位置。

+ +
+

注意：命名网格区域会自动生成这种形式的隐式命名行，因此请指定grid-column: foo;将选择该命名网格区域的开始/结束边缘（除非在其之前明确指定了另一条名为foo-start / foo-end的行）。

+
+ +

否则，将其视为与<custom-ident>一起指定了整数1。

+ +


+ <integer> && <custom-ident>?

+ +


+ 将第n条网格线贡献到网格项目的位置。如果给定一个负整数，则从显式网格的末端开始，反向计数。

+ +

如果将名称指定为<custom-ident>，则仅计算具有该名称的行。如果没有足够多的具有该名称的线，则假定所有隐式网格线都具有该名称，以查找该位置。

+ +

{{cssxref("integer")}}的值为0无效。

+ +

span && [ <integer> || <custom-ident> ]
+ 将网格范围扩展到该网格项目的位置，以使该网格项目的网格区域的相应边缘距离相对边缘n行。
+ 如果将名称指定为<custom-ident>，则仅计算具有该名称的行。如果没有足够多的具有该名称的线，则为计算此跨度，假定与搜索方向相对应的显式网格侧的所有隐式网格线均具有该名称。

+ +

如果省略<integer>，则默认为1。负整数或0无效。

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

示例

+ +

HTML Content

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

CSS Content

+ +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: 100px;
+}
+
+#item1 {
+  background-color: lime;
+}
+
+#item2 {
+  background-color: yellow;
+  grid-column: 2 / 4;
+}
+
+#item3 {
+  background-color: blue;
+  grid-column: span 2 / 7;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", "100px")}}

+ +

IE问题

+ +

IE11不支持自动放置网格项目。 除非用-ms-{{cssxref("grid-column")}}和-ms-{{cssxref("grid-row")}}显式注释，否则所有项目都以网格的第一行/列结尾。 可以使用一些JavaScript来启用自动注释：源存储库。

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-column", "grid-column")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.grid-column")}}

+ +

参见

+ +
    +
  • Related CSS properties: {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}
    • +
  • Grid Layout Guide: Line-based placement with CSS Grid
    • +
  • Video tutorial: Line-based placement
    • +
+ + diff --git a/files/zh-cn/web/css/grid-row/index.html b/files/zh-cn/web/css/grid-row/index.html new file mode 100644 index 0000000000..d70f516ec5 --- /dev/null +++ b/files/zh-cn/web/css/grid-row/index.html @@ -0,0 +1,201 @@ +--- +title: grid-row +slug: Web/CSS/grid-row +tags: + - CSS + - CSS Grid + - CSS 网格 +translation_of: Web/CSS/grid-row +--- +

grid-row 属性是一种 {{cssxref("grid-row-start")}} 和 {{cssxref("grid-row-end")}} 的缩写（shorthand）形式，它定义了网格单元与网格行（row）相关的尺寸和位置，可以通过在网格布局中的基线（line），跨度（span），或者什么也不做（自动），从而指定 {{glossary("grid areas", "grid area")}} 的行起始与行结束。

+ +
{{EmbedInteractiveExample("pages/css/grid-row.html")}}
+ + + +

如果指定了两个 <grid-line> 值，那么斜杠号前的值就被指定为 grid-row-start，斜杠后面的值就被指定为 grid-row-end 的值。

+ +

语法

+ +
/* 不同类型的属性值 */
+/* Keyword values */
+grid-row: auto;
+grid-row: auto / auto;
+
+/* <custom-ident> values */
+grid-row: somegridarea;
+grid-row: somegridarea / someothergridarea;
+
+/* <integer> + <custom-ident> values */
+grid-row: somegridarea 4;
+grid-row: 4 somegridarea / 6;
+
+/* span + <integer> + <custom-ident> values */
+grid-row: span 3;
+grid-row: span somegridarea;
+grid-row: 5 somegridarea span;
+grid-row: span 3 / 6;
+grid-row: span somegridarea / span someothergridarea;
+grid-row: 5 somegridarea span / 2 span;
+
+/* Global values */
+grid-row: inherit;
+grid-row: initial;
+grid-row: unset;
+
+ +

值

+ +
+
auto
+
表示对网格的布置行为不做干涉，即自动布置，自动的 span 或者默认 span 值为 1。
+
<custom-ident>
+
如果存在自定义的基线名（'<custom-ident>-start'/'<custom-ident>-end'），它就将第一个这样的基线贡献给网格单元。 +

注意: 被命名的网格区域（grid areas）会自动生成隐式的被命名的基线，因此指定 grid-row: foo; 将会选择这个命名区域的开始和结束的边界（除非在它之前存在显式指定的以 foo-start/foo-end 命名的其他基线）。

+ +

否则，它就会被当作整数 1 与 <custom-ident> 一起指定。

+
+
<integer> && <custom-ident>?
+
将第 n 条网格基线贡献给网格单元布置。如果指定的是负数，则指的是从下边界向上边界计算的反向顺序。如果提供的是 <custom-ident>，那么只有以此命名的基线才会被计算。如果所命名的基线数超过了网格线数，为了找到该位置，所有隐式的网格线会被假定拥有这个命名。
+
{{cssxref("integer")}} 值不能为 0。
+
span && [ <integer> || <custom-ident> ]
+
为网格单元定义一个跨度，使得网格单元的网格区域中的一条边界远离另一条边界线 n 条基线。如果提供的是 <custom-ident>，则只有以此命名的基线才会被计算。如果网格线不足，则假定与搜索方向对应的显式网格一侧的所有隐式网格线都具有该名称。
+
+

如果忽略 <integer> ，它就默认设为 1。它的值也不能为0。

+
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML Content

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

CSS Content

+ +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(6, 1fr);
+}
+
+#item1 {
+  background-color: lime;
+}
+
+#item2 {
+  background-color: yellow;
+  grid-row: 2 / 4;
+}
+
+#item3 {
+  background-color: blue;
+  grid-row: span 2 / 7;
+}
+
+ +

{{EmbedLiveSample("Example", "200px", "200px")}}

+ +

IE 中的问题

+ +

IE11 不支持网格单元的自动布置。除非显式地注释 -ms-{{cssxref("grid-column")}} 和 -ms-{{cssxref("grid-row")}}，否则所有单元都会在网格的第一行/列结束。这里有一个使用 JavaScript 提供自动注释的工具：source repository.

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-row", "grid-row")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.grid-row")}}

+ +

参见

+ +
    +
  • Related CSS properties: {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}
    • +
  • Grid Layout Guide: Line-based placement with CSS Grid
    • +
  • Video tutorial: Line-based placement
    • +
+ + diff --git a/files/zh-cn/web/css/grid-template-areas/index.html b/files/zh-cn/web/css/grid-template-areas/index.html new file mode 100644 index 0000000000..ac9197b0f5 --- /dev/null +++ b/files/zh-cn/web/css/grid-template-areas/index.html @@ -0,0 +1,214 @@ +--- +title: grid-template-areas +slug: Web/CSS/grid-template-areas +tags: + - CSS + - CSS属性 + - CSS布局 + - CSS网格 +translation_of: Web/CSS/grid-template-areas +--- +

grid-template-areas CSS 属性是网格区域 {{glossary("grid areas")}} 在CSS中的特定命名。

+ +
{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}
+ + + + + +

网格区块(grid areas)和网格项(grid item)沒有关联，但是它们可以和一些网格定位属性(grid-placement properties)关联起来，比如{{cssxref("grid-row-start")}}， {{cssxref("grid-row-end")}}， {{cssxref("grid-column-start")}}和{{cssxref("grid-column-end")}}；也可以和一些速记(shorthands)属性关联起来，比如{{cssxref("grid-row")}}，{{cssxref("grid-column")}} 和 {{cssxref("grid-area")}}。

+ +

Syntax[语法]

+ +
/* Keyword value */
+grid-template-areas: none;
+
+/* <string> values */
+grid-template-areas: "a b"; /* 一行 两列 */
+grid-template-areas: "a b b"
+                     "a c d"; /* 两行 三列 */
+
+/* Global values */
+grid-template-areas: inherit; /* 继承 */
+grid-template-areas: initial; /* 默认值 */
+grid-template-areas: unset; /* 未设置 */
+
+ +

 Values[可选值]

+ +
+
none
+
网格容器没有定义任何的网格区块(grid areas)。
+
{{cssxref("<string>")}}+
+
每一个给定的字符串会生成一行，一个字符串中用空格分隔的每一个单元(cell)会生成一列。多个同名的，跨越相邻行或列的单元称为网格区块(grid area)。非矩形的网格区块是无效的。
+
+ +

形式化语法

+ +
{{csssyntax}}
+ +

例子

+ +

HTML

+ +
<section id="page">
+  <header>Header</header>
+  <nav>Navigation</nav>
+  <main>Main area</main>
+  <footer>Footer</footer>
+</section>
+ +

CSS

+ +
#page {
+  display: grid; /* 1.设置display为grid */
+  width: 100%;
+  height: 250px;
+  grid-template-areas: "head head"
+                       "nav  main"
+                       "nav  foot"; /* 2.区域划分 当前为 三行 两列 */
+  grid-template-rows: 50px 1fr 30px; /* 3.各区域 宽高设置 */
+  grid-template-columns: 150px 1fr;
+}
+
+#page > header {
+  grid-area: head; /* 4. 指定当前元素所在的区域位置, 从grid-template-areas选取值 */
+  background-color: #8ca0ff;
+}
+
+#page > nav {
+  grid-area: nav;
+  background-color: #ffa08c;
+}
+
+#page > main {
+  grid-area: main;
+  background-color: #ffff64;
+}
+
+#page > footer {
+  grid-area: foot;
+  background-color: #8cffa0;
+}
+
+ +

结果

+ +

{{ EmbedLiveSample('例子', '100%', '250px', '', 'Web/CSS/grid-template-areas') }}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.grid-template-areas")}}

+ +

[1] 从Chrome 29.0 开始支持，在 chrome://flags 中打开"开启实验性网络平台特性"(experimental Web Platform features)。从 Chrome {{CompatChrome("57.0")}} 开始默认开启。

+ +

[2] 从Gecko 40.0 {{geckoRelease("40.0")}} 开始支持, 在设置中打开layout.css.grid.enabled，默认是 false。从Gecko 52.0 {{geckoRelease("52.0")}}开始默认开启。

+ +

[3] EdgeHTML 16已支持。Internet Explorer 和 Edge 实现了一个旧版本的规范，旧的规范中没有定义这个属性。

+ +

[4] 从 Opera 28.0开始支持，在 chrome://flags中打开"开启实验性网络平台特性"(experimental Web Platform features)。从Opera {{CompatOpera(44)}}开始默认开启。

+ +

See also

+ +
    +
  • 相关 CSS 属性：{{cssxref("grid-template-rows")}}、{{cssxref("grid-template-columns")}}、{{cssxref("grid-template")}}
    • +
  • Grid Layout 指南：Grid template areas
    • +
  • 视频教程：Grid Template Areas
    • +
+ + + +
+ +
+
+
+
+ +
+ +
+
+ +
+
+
diff --git a/files/zh-cn/web/css/grid-template-columns/index.html b/files/zh-cn/web/css/grid-template-columns/index.html new file mode 100644 index 0000000000..00ed19a00f --- /dev/null +++ b/files/zh-cn/web/css/grid-template-columns/index.html @@ -0,0 +1,197 @@ +--- +title: grid-template-columns +slug: Web/CSS/grid-template-columns +tags: + - grid-template-columns +translation_of: Web/CSS/grid-template-columns +--- +

grid-template-columns 该属性是基于 {{glossary("grid column", "网格列")}}. 的维度，去定义网格线的名称和网格轨道的尺寸大小。

+ +
{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}}
+ + + +

语法

+ +
/* Keyword value */
+grid-template-columns: none;
+
+/* <track-list> values */
+grid-template-columns: 100px 1fr;
+grid-template-columns: [linename] 100px;
+grid-template-columns: [linename1] 100px [linename2 linename3];
+grid-template-columns: minmax(100px, 1fr);
+grid-template-columns: fit-content(40%);
+grid-template-columns: repeat(3, 200px);
+
+/* <auto-track-list> values */
+grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
+grid-template-columns: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-columns: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-columns: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* Global values */
+grid-template-columns: inherit;
+grid-template-columns: initial;
+grid-template-columns: unset;
+
+ +

值

+ +
+
none
+
这个关键字表示不明确的网格。所有的列和其大小都将由{{cssxref("grid-auto-columns")}} 属性隐式的指定。
+
{{cssxref("<length>")}}
+
非负值的长度大小。
+
{{cssxref("<percentage>")}}
+
非负值且相对于网格容器的 {{cssxref("percentage", "<百分比>")}}。 如果网格容器的尺寸大小依赖网格轨道的大小（比如 inline-grid ），则百分比值将被视为auto。
+
为了遵守网格的百分比，网格轨道本身定义的大小，将自动被调整为相对网格容器大小，并且是以最小量将网格轨道调整到最终的大小。
+
{{cssxref("<flex>")}}
+
非负值，用单位 fr 来定义网格轨道大小的弹性系数。 每个定义了 <flex> 的网格轨道会按比例分配剩余的可用空间。当外层用一个 minmax() 表示时，它将是一个自动最小值(即 minmax(auto, <flex>) ) .
+
max-content
+
是一个用来表示以网格项的最大的内容来占据网格轨道的关键字。
+
min-content
+
是一个用来表示以网格项的最大的最小内容来占据网格轨道的关键字。
+
{{cssxref("minmax", "minmax(min, max)")}}
+
是一个来定义大小范围的属性，大于等于min值，并且小于等于max值。如果max值小于min值，则该值会被视为min值。最大值可以设置为网格轨道系数值<flex> ，但最小值则不行。
+
+

Note:  该规范在将来可能会允许设置最小值为 flex ，也会调整网格轨道算法(track sizing algorithm) 计算出正确的大小。

+
+
auto
+
如果该网格轨道为最大时，该属性等同于 <max-content> ，为最小时，则等同于 <min-content> 。
+
+

Note: 网格轨道大小为 auto (且只有为 auto ) 时，才可以被属性{{cssxref("align-content")}} 和 {{cssxref("justify-content")}} 拉伸 。

+
+
{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}
+
相当于公式 min(max-content, max(auto, argument))，类似于auto 的计算(即 minmax(auto, max-content))，除了网格轨道大小值是确定下来的，否则该值都大于 auto 的最小值。
+
{{cssxref("repeat", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}}
+
表示网格轨道的重复部分，以一种更简洁的方式去表示大量而且重复列的表达式。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

CSS

+ +
#grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 50px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}
+ +

HTML

+ +
<div id="grid">
+  <div id="areaA">A</div>
+  <div id="areaB">B</div>
+</div>
+ +

结果

+ +

{{EmbedLiveSample("示例", "100%", "20px")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}{{Spec2("CSS3 Grid")}}初始定义
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.grid-template-columns")}}

+ +

参见

+ + + + diff --git a/files/zh-cn/web/css/grid-template/index.html b/files/zh-cn/web/css/grid-template/index.html new file mode 100644 index 0000000000..7727ea9f32 --- /dev/null +++ b/files/zh-cn/web/css/grid-template/index.html @@ -0,0 +1,203 @@ +--- +title: grid-template +slug: Web/CSS/grid-template +tags: + - CSS + - CSS Grid + - CSS 网格 +translation_of: Web/CSS/grid-template +--- +

grid-template，CSS属性简写，用以定义网格中{{glossary("grid rows", "行")}}、{{glossary("grid column", "列")}}与{{glossary("grid areas", "分区")}}。

+ +

{{EmbedInteractiveExample("pages/css/grid-template.html")}}

+ +

所简写属性：{{cssxref("grid-template-rows")}}、{{cssxref("grid-template-columns")}}与{{cssxref("grid-template-areas")}}。

+ +

语法

+ +
/* 值为关键词 */
+grid-template: none;
+
+/* 为 grid-template-rows / grid-template-columns */
+grid-template: 100px 1fr / 50px 1fr;
+grid-template: auto 1fr / auto 1fr auto;
+grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
+grid-template: fit-content(100px) / fit-content(40%);
+
+/* 为 grid-template-areas grid-template-rows / grid-template-column */
+grid-template: "a a a"
+               "b b b";
+grid-template: "a a a" 20%
+               "b b b" auto;
+grid-template: [header-top] "a a a"     [header-bottom]
+                 [main-top] "b b b" 1fr [main-bottom]
+                            / auto 1fr auto;
+
+/* 为全局值 */
+grid-template: inherit;
+grid-template: initial;
+grid-template: unset;
+
+ +

可设值

+ +
+
none
+
关键词，设上文“所简写属性”为none，即恢复默认设置。行列隐式生成，{{cssxref("grid-auto-rows")}}与{{cssxref("grid-auto-columns")}}定其尺寸。
+
<'grid-template-rows'> / <'grid-template-columns'>
+
指定{{cssxref("grid-template-rows")}}与{{cssxref("grid-template-columns")}}之值，并设{{cssxref("grid-template-areas")}}为none。
+
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
+
设{{cssxref("grid-template-areas")}}为列得<string>、{{cssxref("grid-template-columns")}}为<explicit-track-list>（默认为none）、{{cssxref("grid-template-rows")}}为<track-size>（默认为auto）并拼接尺寸前后所定义之行。
+ +

注：轨道被用以与“ASCII art”（即字符画，此处指<string>）中行列逐一视觉对齐，故<explicit-track-list>中不允许{{cssxref("repeat()")}}。

+
+
+ +

注：{{cssxref("grid")}}可如此用，但将重置隐式网格属性。Use grid (as opposed to grid-template) to prevent these values from cascading in seperately.

+ +

语法形式

+ +
{{csssyntax}}
+ +

示例

+ +

CSS

+ +
#page {
+  display: grid;
+  width: 100%;
+  height: 200px;
+  grid-template: [header-left] "head head" 30px [header-right]
+                 [main-left]   "nav  main" 1fr  [main-right]
+                 [footer-left] "nav  foot" 30px [footer-right]
+                 / 120px 1fr;
+}
+
+header {
+  background-color: lime;
+  grid-area: head;
+}
+
+nav {
+  background-color: lightblue;
+  grid-area: nav;
+}
+
+main {
+  background-color: yellow;
+  grid-area: main;
+}
+
+footer {
+  background-color: red;
+  grid-column: foot;
+}
+ +

HTML

+ +
<section id="page">
+  <header>Header</header>
+  <nav>Navigation</nav>
+  <main>Main area</main>
+  <footer>Footer</footer>
+</section>
+ +

结果

+ +

{{EmbedLiveSample("Examples", "100%", "200px")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS3 Grid", "#propdef-grid-template", "grid-template")}}{{Spec2("CSS3 Grid")}}初定
+ + + +

{{cssinfo}}

+ +

浏览器兼容性

+ +

{{Compat("css.properties.grid-template")}}

+ +

相关链接

+ + + + diff --git a/files/zh-cn/web/css/grid/index.html b/files/zh-cn/web/css/grid/index.html new file mode 100644 index 0000000000..750631c773 --- /dev/null +++ b/files/zh-cn/web/css/grid/index.html @@ -0,0 +1,190 @@ +--- +title: grid +slug: Web/CSS/grid +tags: + - CSS + - CSS Grid + - CSS Property +translation_of: Web/CSS/grid +--- +

grid 是一个CSS简写属性，可以用来设置以下属性：
+ 显式网格属性 {{cssxref("grid-template-rows")}}、{{cssxref("grid-template-columns")}} 和 {{cssxref("grid-template-areas")}}，
+ 隐式网格属性 {{cssxref("grid-auto-rows")}}、{{cssxref("grid-auto-columns")}} 和  {{cssxref("grid-auto-flow")}}，
+ 间距属性 {{cssxref("grid-column-gap")}} 和 {{cssxref("grid-row-gap")}}。

+ +
{{EmbedInteractiveExample("pages/css/grid.html")}}
+ + + +
+

注意：您仅可在一个 grid 属性中声明显式或隐式网格。与其他简写属性同样，若有次级属性未被声明，其将使用初始值。另外，尽管此简写声明无法设置网格的槽（gutter），槽会被该声明重置。

+
+ +

语法

+ +
/* <'grid-template'> values */
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+grid: "a" minmax(100px, max-content) "b" 20%;
+grid: 100px / 200px;
+grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
+
+/* <'grid-template-rows'> /
+   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
+grid: 200px / auto-flow;
+grid: 30% / auto-flow dense;
+grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
+grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
+
+/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
+   <'grid-template-columns'> values */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* Global values */
+grid: inherit;
+grid: initial;
+grid: unset;
+
+ +

值

+ +
+
<'grid-template'>
+
定义了 {{cssxref("grid-template")}}，其包含 {{cssxref("grid-template-columns")}}，{{cssxref("grid-template-rows")}} 和 {{cssxref("grid-template-areas")}}。
+
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
+
通过 {{cssxref("grid-template-rows")}} 属性显式设置行轨道来设置自动流（{{cssxref("grid-template-columns")}} 属性设为 none），并通过 {{cssxref("grid-auto-columns")}} 明确该如何自动重复列轨道（同时{{cssxref("grid-auto-rows")}}属性设为 auto）。{{cssxref("grid-auto-flow")}} 属性也被相应的设置为 column，并可附有 dense。
+
所有其余 grid 次级属性被重置为初始值。
+
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
+
通过 {{cssxref("grid-template-columns")}} 属性显式设置列轨道来设置自动流（{{cssxref("grid-template-rows")}} 属性设为 none），并通过 {{cssxref("grid-auto-rows")}} 明确该如何自动重复行轨道（同时{{cssxref("grid-auto-columns")}}属性设为 auto）。{{cssxref("grid-auto-flow")}} 属性也被相应的设置为 row，并可附有 dense。
+
所有其余 grid 次级属性被重置为初始值。
+
+ +

标准语法

+ +
{{csssyntax}}
+ +

实例

+ +

HTML

+ +
<div id="container">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ +
#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}
+ +

结果

+ +

{{EmbedLiveSample("实例", "100%", 150)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

浏览器兼容

+ + + +

{{Compat("css.properties.grid")}}

+ +

参见

+ + + + diff --git a/files/zh-cn/web/css/hanging-punctuation/index.html b/files/zh-cn/web/css/hanging-punctuation/index.html new file mode 100644 index 0000000000..b7d28f226f --- /dev/null +++ b/files/zh-cn/web/css/hanging-punctuation/index.html @@ -0,0 +1,99 @@ +--- +title: hanging-punctuation +slug: Web/CSS/hanging-punctuation +tags: + - css css属性 css文本 +translation_of: Web/CSS/hanging-punctuation +--- +
{{cssref}}
+ +
hanging-punctuation CSS属性指定了标点符号应该放在文本句子的开头还是结尾。悬挂标点符号可能被放在线框外。
+ +
+ +
/* Keyword values */
+hanging-punctuation: none;
+hanging-punctuation: first;
+hanging-punctuation: last;
+hanging-punctuation: force-end;
+hanging-punctuation: allow-end;
+
+/* Two keywords */
+hanging-punctuation: first force-end;
+hanging-punctuation: first allow-end;
+hanging-punctuation: first last;
+hanging-punctuation: last force-end;
+hanging-punctuation: last allow-end;
+
+/* Three keywords */
+hanging-punctuation: first force-end last;
+hanging-punctuation: first allow-end last;
+
+/* Global values */
+hanging-punctuation: inherit;
+hanging-punctuation: initial;
+hanging-punctuation: unset;
+
+ +

{{cssinfo}}

+ +

语法

+ +

这个属性可被指定多个值，可以是一个值，也可以是两个值，或者是三个值。

+ +
    +
  • 一个值 语法：在下面列表中的任意一个值。
    • +
  • 两个值 语法： +
      +
    • 或者与以下任何一个一起使用，并以它们结尾：last，allow-end或force-end
      • +
    • 或者与以下任何一个一起使用，并以它们开头：first，allow-end或force-end。
      • +
    +
    • +
  • 三个值 语法: +
      +
    • 或者first, allow-end, 和last
      • +
    • 或者 first, force-end, 和 last.
      • +
    +
    • +
+ +

取值

+ +
+
none
+
无悬挂字符。
+
first
+
显示元素的第一个格式化行开头的括号或引号。
+
last
+
显示元素的最后一个格式化行结尾的括号或引号。
+
force-end
+
显示行结尾处的句号或逗号。
+
allow-end
+
如果预先没有其它适合的来适应的，则在行尾显示句号或逗号。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”</p>
+ +

CSS

+ +
p {
+  hanging-punctuation: first;
+  margin: .5rem;
+}
+ +

Result

+ +

Specifications

+ + diff --git a/files/zh-cn/web/css/height/index.html b/files/zh-cn/web/css/height/index.html new file mode 100644 index 0000000000..1666465e3f --- /dev/null +++ b/files/zh-cn/web/css/height/index.html @@ -0,0 +1,167 @@ +--- +title: height +slug: Web/CSS/height +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/height +--- +
{{CSSRef()}}
+ +
height CSS 属性指定了一个元素的高度。默认情况下，这个属性决定的是内容区（ content area）的高度，但是，如果将 {{cssxref("box-sizing")}} 设置为  border-box , 这个属性决定的将是边框区域（border area）的高度。
+ +
{{EmbedInteractiveExample("pages/css/height.html")}}
+ +
{{cssxref("min-height")}} 和 {{cssxref("max-height")}} 属性会覆盖  {{Cssxref("height")}}。
+ +

语法

+ +
/* Keyword value */
+height: auto;
+
+/* <length> values */
+height: 120px;
+height: 10em;
+
+/* <percentage> value */
+height: 75%;
+
+/* Global values */
+height: inherit;
+height: initial;
+height: unset;
+ +

值

+ +
+
{{cssxref("<length>")}}
+
将高度定义为一个绝对值。
+
{{cssxref("<percentage>")}}
+
将高度定义为相对包含块高度的百分比。
+
border-box {{experimental_inline}}
+
如果设置该值，则 {{cssxref("<length>")}} 或者 {{cssxref("<percentage>")}} 会设置为该元素的 border box。
+
content-box {{experimental_inline}}
+
如果设置该值，则 {{cssxref("<length>")}} 或者 {{cssxref("<percentage>")}} 会设置为该元素的 content box。
+
+ +
+
auto
+
由浏览器为元素计算并选择一个高度。
+
fill {{experimental_inline}}
+
根据文字方向，使用 fill-available 作为行大小或者块大小。
+
max-content {{experimental_inline}}
+
设置为允许的最大高度。
+
min-content {{experimental_inline}}
+
设置为允许的最小高度.
+
available {{experimental_inline}}
+
包含块高度减去当前元素的边距，边框和填充。
+
fit-content {{experimental_inline}}
+
将 fill-content 公式中的可用位置替换为特定的参数以进行使用，如：min(max-content, max(min-content, ))
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<div id="taller">I'm 50 pixels tall.</div>
+<div id="shorter">I'm 25 pixels tall.</div>
+<div id="parent">
+  <div id="child">
+    I'm half the height of my parent.
+  </div>
+</div>
+ +

CSS

+ +
div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 2px solid blue;
+}
+
+#taller {
+  height: 50px;
+}
+
+#shorter {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+
+ +

结果

+ +

{{EmbedLiveSample('示例', 'auto', 240)}}

+ +

无障碍问题

+ +

确保设定了 height 的元素在显示上不会被截断，或者当页面放大时增大的字体大小不会遮挡其他内容。 

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}}{{Spec2('CSS3 Box')}}Added the max-content, min-content, available, fit-content, border-box, content-boxkeywords.
{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}{{Spec2('CSS3 Transitions')}}Lists height as animatable.
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}{{Spec2('CSS2.1')}}Adds support for the {{cssxref("<length>")}} values and precises on which element it applies to.
{{SpecName('CSS1', '#height', 'height')}}{{Spec2('CSS1')}}Initial definition.
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}Adds new sizing keywords for width and height.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ +

{{Compat("css.properties.height")}}

+ +

参见

+ +
    +
  • box model, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}
    • +
diff --git a/files/zh-cn/web/css/hyphens/index.html b/files/zh-cn/web/css/hyphens/index.html new file mode 100644 index 0000000000..6854413c53 --- /dev/null +++ b/files/zh-cn/web/css/hyphens/index.html @@ -0,0 +1,812 @@ +--- +title: hyphens +slug: Web/CSS/hyphens +translation_of: Web/CSS/hyphens +--- +
{{CSSRef}}
+ +

Summary

+ +

CSS 属性 hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。

+ +

连字规则具有语言特定性。在 HTML 中，语言由 lang 属性决定，浏览器只会在当前属性存在且有合适的连字字典可用的情况使用连字进行连接。 在 XML 中，必须使用 xml:lang 属性。

+ +
注意:：在规范中，没有明确定义连字符的实现规则，所以具体的连字符在不同浏览器中可能有所区别。
+ +

{{cssinfo}}

+ +

语法

+ +
hyphens: none;
+hyphens: manual;
+hyphens: auto;
+
+/* Global values */
+hyphens: inherit;
+hyphens: initial;
+hyphens: unset;
+
+ +

值

+ +
+
none
+
换行时单词不会被打断，甚至在单词内的字符建议有换行点时。行只会在空白符处换行。
+
manual
+
Words are broken for line-wrapping only where characters inside the word suggest line break opportunities. See {{anch("Suggesting line break opportunities")}} for details.
+
auto
+
The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses to use. Suggested line break opportunities, as covered in {{anch("Suggesting line break opportunities")}}, should be preferred over automatically selecting break points whenever possible.
+
+ +
Note: The auto setting's behavior depends on the language being properly tagged so that the appropriate hyphenation rules can be selected. You must specify a language using the lang HTML attribute in order to guarantee that automatic hyphenation is applied in the language of your choice.
+ +

Suggesting line break opportunities

+ +

There are two Unicode characters that can be used to manually specify potential line break points within text:

+ +
+
U+2010 (HYPHEN)
+
The "hard" hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered.
+
U+00AD (SHY)
+
An invisible, "soft" hyphen. This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use &shy; to insert a soft hyphen.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

示例

+ +

以下代码段展示了hyphens属性取none/manual/auto这三类值的效果。

+ +
<ul>
+  <li><code>none</code>: no hyphen; overflow if needed
+    <p lang="en" class="none">An extreme&shy;ly long English word</p>
+  </li>
+  <li><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)
+    <p lang="en" class="manual">An extreme&shy;ly long English word</p>
+  </li>
+  <li><code>auto</code>: hyphen where the algo is deciding (if needed)
+    <p lang="en" class="auto">An extreme&shy;ly long English word</p>
+  </li>
+</ul>
+
+ +
p {
+  width: 55px;
+  border: 1px solid black;
+ }
+p.none {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+p.manual {
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+p.auto {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+
+ +
+

{{EmbedLiveSample("Example", "100%", "470'")}}

+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}{{Spec2("CSS3 Text")}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("13")}}{{property_prefix("-webkit")}}[1] +

{{CompatGeckoDesktop("6.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoDesktop("43.0")}}

+ 		{{CompatIE("10.0")}}{{property_prefix("-ms")}}[3]{{CompatNo}}{{CompatSafari(5.1)}}{{property_prefix("-webkit")}}
Hyphenation dictionary for Afrikaans (af, af-*){{CompatNo}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Bulgarian (bg, bg-*){{CompatNo}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Catalan (ca, ca-*){{CompatNo}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Croatian (hr, hr-*){{CompatNo}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Czech (cs, cs-*){{CompatNo}}{{CompatNo}}10.0{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Danish (da, da-*){{CompatNo}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Dutch (nl, nl-*){{CompatNo}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatNo}}5.1
Hyphenation dictionary for English (en, en-*){{CompatNo}}{{CompatGeckoDesktop("6.0")}}[4]10.0{{CompatNo}}5.1[5]
Hyphenation dictionary for Esperanto (eo, eo-*){{CompatNo}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Estonian (et, et-*){{CompatNo}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Finnish (fi, fi-*){{CompatNo}}{{CompatGeckoDesktop("8.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for French (fr, fr-*){{CompatNo}}{{CompatGeckoDesktop("8.0")}}10.0{{CompatNo}}5.1
Hyphenation dictionary for Galician (gl, gl-*){{CompatNo}}9.0{{CompatNo}}{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901){{CompatNo}}8.0{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*){{CompatNo}}8.010.0{{CompatNo}}5.1
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*){{CompatNo}}8.0{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
Hyphenation dictionary for Hungarian (hu, hu-*){{CompatNo}}9.0{{CompatNo}}{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Icelandic (is, is-*){{CompatNo}}8.0{{CompatNo}}{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Interlingua (ia, ia-*){{CompatNo}}8.0{{CompatNo}}{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Italian (it, it-*){{CompatNo}}9.010.0{{CompatNo}}5.1
Hyphenation dictionary for Kurmanji (kmr, kmr-*){{CompatNo}}8.0{{CompatNo}}{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Latin (la, la-*){{CompatNo}}8.0{{CompatNo}}{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Lithuanian (lt, lt-*){{CompatNo}}8.0{{CompatNo}}{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Mongolian (mn, mn-*){{CompatNo}}8.0{{CompatNo}}{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*){{CompatNo}}8.010.0{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*){{CompatNo}}8.010.0{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Polish (pl, pl-*){{CompatNo}}31.010.0{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Portuguese (pt, pt-*){{CompatNo}}8.0[6]10.0{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Brazilian Portuguese (pt-BR){{CompatNo}}8.0[6]10.0{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Russian (ru, ru-*){{CompatNo}}8.010.0{{CompatNo}}5.1
Hyphenation dictionary for Serbian, Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*){{CompatNo}}8.0{{CompatNo}}{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Slovenian (sl, sl-*){{CompatNo}}8.0{{CompatNo}}{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Spanish (es, es-*){{CompatNo}}8.010.0{{CompatNo}}5.1
Hyphenation dictionary for Swedish (sv, sv-*){{CompatNo}}8.010.0{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Turkish (tr, tr-*){{CompatNo}}9.010.0{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Ukrainian (uk, uk-*){{CompatNo}}9.0{{CompatNo}}{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*){{CompatNo}}8.0{{CompatNo}}{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for Welsh (cy, cy-*){{CompatNo}}8.0{{CompatNo}}{{CompatNo}}{{CompatNo}}
Hyphenation dictionary for other languages{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatAndroid("4.0")}}{{property_prefix("-webkit")}}[1]{{CompatGeckoMobile("6.0")}}{{property_prefix("-moz")}}[2]
+ {{CompatGeckoDesktop("43.0")}}		{{CompatNo}}{{CompatNo}}{{CompatSafari(4.2)}}{{property_prefix("-webkit")}}
Hyphenation dictionary for Afrikaans (af, af-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Bulgarian (bg, bg-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Catalan (ca, ca-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Croatian (hr, hr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Czech (cs, cs-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Danish (da, da-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Dutch (nl, nl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for English (en, en-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Esperanto (eo, eo-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Estonian (et, et-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Finnish (fi, fi-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for French (fr, fr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Galician (gl, gl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Hungarian (hu, hu-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Icelandic (is, is-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Interlingua (ia, ia-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Italian (it, it-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Kurmanji (kmr, kmr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Latin (la, la-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Lithuanian (lt, lt-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Mongolian (mn, mn-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Polish (pl, pl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Portuguese (pt, pt-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Brazilian Portuguese (pt-BR){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Russian (ru, ru-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Serbian, Bosnian, Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Slovenian (sl, sl-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Spanish (es, es-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Swedish (sv, sv-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Turkish (tr, tr-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Ukrainian (uk, uk-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for Welsh (cy, cy-*){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Hyphenation dictionary for other languages{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] No automatic hyphenation, only -webkit-hyphens: none is supported.

+ +

[2] Automatic hyphenation only works for languages whose hyphenation dictionaries are integrated in Gecko. See the note below for a complete list of such languages.

+ +

[3] Automatic hyphenation only works for languages whose hyphenation dictionaries are integrated in Internet Explorer. See the note below for a complete list of such languages.

+ +

[4] Uses an en-US dictionary.

+ +

[5] en-GB and en-US used different dictionaries.

+ +

[6] Uses a Portuguese dictionary.

+ +

See also

+ +
    +
  • {{Cssxref("content")}}
    • +
diff --git a/files/zh-cn/web/css/id_selectors/index.html b/files/zh-cn/web/css/id_selectors/index.html new file mode 100644 index 0000000000..41ae08f7b7 --- /dev/null +++ b/files/zh-cn/web/css/id_selectors/index.html @@ -0,0 +1,85 @@ +--- +title: ID 选择器 +slug: Web/CSS/ID_selectors +tags: + - CSS + - Selectors + - 参考 + - 选择器 +translation_of: Web/CSS/ID_selectors +--- +
{{CSSRef}}
+ +

在一个HTML文档中,CSS ID 选择器会根据该元素的 ID 属性中的内容匹配元素,元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。

+ +
/* The element with id="demo" */
+#demo {
+  border: red 2px solid;
+}
+ +

语法

+ +
#id属性值 {样式声明 }
+ +

它与下面的{{Cssxref("Attribute selectors", "属性选择器")}}语句等价：

+ +
[id=id属性值] {样式声明 }
+ +

示例

+ +

CSS

+ +
span#identified {
+  background-color: DodgerBlue;
+}
+
+ +

HTML

+ +
  <span id="identified">Here's a span with some text.</span>
+  <span>Here's another.</span>
+
+ +

结果

+ +

{{EmbedLiveSample("Example", '100%', 50)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}}
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.id")}}

diff --git a/files/zh-cn/web/css/image-orientation/index.html b/files/zh-cn/web/css/image-orientation/index.html new file mode 100644 index 0000000000..42de520c23 --- /dev/null +++ b/files/zh-cn/web/css/image-orientation/index.html @@ -0,0 +1,89 @@ +--- +title: image-orientation +slug: Web/CSS/image-orientation +translation_of: Web/CSS/image-orientation +--- +
{{CSSRef}}
+ +
{{SeeCompatTable}}
+ +

概述

+ +

CSS 属性 image-orientation 用来修正某些图片的预设方向.

+ +
+

注意:

+ +
    +
  • 该属性不是用来对图片进行任意角度旋转的, 它是用来修正那些带有不正确的预设方向的图片的. 因此该属性值会被四舍五入到 90 度的整数倍.
    • +
  • Similarly this property is not intented to handle the layout -> portrait changing. As image-orientation affects only images, it won't work: the changes must happen at the layout-level
    • +
+
+ +

{{cssinfo}}

+ +

语法

+ +
语法形式: {{csssyntax("image-orientation")}}
+
+ +
image-orientation: 0deg
+image-orientation: 6.4deg     /* 非 90 度的整数倍, 所以会被四舍五入到 0 度 */
+image-orientation: -90deg     /* 相当于 270deg */
+image-orientation: from-image /* 使用图片的 EXIF 数据 */
+image-orientation: 90deg flip /* 旋转 90deg, 再水平翻转 */
+image-orientation: flip       /* 不旋转, 只进行水平翻转 */
+
+image-orientation: inherit
+
+ +

属性值

+ +
+
from-image
+
根据图片的 EXIF 数据来旋转图片, EXIF 中有一个控制图片旋转度的属性.
+
<angle>
+
图片旋转值 {{cssxref("<angle>")}} , 会被自动四舍五入到 90deg (0.25turn) 的整数倍.
+
flip
+
对图片进行水平翻转, 先进行第二个参数执行的旋转, 再进行此次翻转.
+
+ +

示例

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范名称规范状态备注
{{SpecName('CSS4 Images', '#image-orientation', 'image-orientation')}}{{Spec2('CSS4 Images')}}增加了对 from-image 和 flip 关键字的支持.
{{SpecName('CSS3 Images', '#image-orientation', 'image-orientation')}}{{Spec2('CSS3 Images')}} 
+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.properties.image-orientation")}}

+
+ +

相关链接

+ +
    +
  • 其它和图片相关的 CSS 属性: {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.
    • +
diff --git a/files/zh-cn/web/css/image-rendering/index.html b/files/zh-cn/web/css/image-rendering/index.html new file mode 100644 index 0000000000..dc09652427 --- /dev/null +++ b/files/zh-cn/web/css/image-rendering/index.html @@ -0,0 +1,143 @@ +--- +title: image-rendering +slug: Web/CSS/image-rendering +tags: + - CSS + - CSS图像 + - CSS属性 + - 图像 +translation_of: Web/CSS/image-rendering +--- +
{{CSSRef}}
+ +

CSS 属性 image-rendering 用于设置图像缩放算法。它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。

+ +

The {{Glossary("user agent")}} will scale an image when the page author specifies dimensions other than its natural size. Scaling may also occur due to user interaction (zooming). 举个例子，如果有一张尺寸为 100×100px 的图片，但作者有意将尺寸设置为 200×200px（或50×50px），然后，图片便会根据 image-rendering 指定的算法，缩小或放大到新尺寸。此属性对于未缩放的图像没有影响。

+ +
+

Note: The Canvas API can provide a fallback solution for crisp-edges through manual image data manipulation.

+
+ +

语法

+ +
/* 专有属性值 */
+image-rendering: auto;
+image-rendering: crisp-edges;
+image-rendering: pixelated;
+
+/* 全局属性值 */
+image-rendering: inherit;
+image-rendering: initial;
+image-rendering: unset;
+ +

属性值

+ +
+
auto
+
自 Gecko 1.9 （Firefox 3.0）起，Gecko 使用双线性（bilinear）算法进行重新采样（高质量）。
+
smooth {{Experimental_Inline}}
+
应使用能最大化图像客观观感的算法来缩放图像。特别地，会“平滑”颜色的缩放算法是可以接受的，例如双线性插值。这适用于照片等类型的图像。
+
high-quality {{Experimental_Inline}}
+
Identical to smooth, but with a preference for higher-quality scaling. If system resources are constrained, images with high-quality should be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree.
+
crisp-edges
+
必须使用可有效保留对比度和图像中的边缘的算法来对图像进行缩放，并且，该算法既不会平滑颜色，又不会在处理过程中为图像引入模糊。合适的算法包括最近邻居（nearest-neighbor）算法和其他非平滑缩放算法，比如 2×SaI 和 hqx-* 系列算法。此属性值适用于像素艺术作品，例如一些网页游戏中的图像。
+
pixelated
+
放大图像时, 使用最近邻居算法，因此，图像看着像是由大块像素组成的。缩小图像时，算法与 auto 相同。
+
+ +
+

注意：The values optimizeQuality and optimizeSpeed present in an early draft (and coming from its SVG counterpart) are defined as synonyms for the smooth and pixelated values respectively.

+
+ +

形式化语法

+ +
{{csssyntax}}
+ +

例子

+ + + + + +
.auto {
+  image-rendering: auto;
+}
+
+.pixelated {
+  -ms-interpolation-mode: nearest-neighbor;
+  image-rendering: pixelated;
+}
+
+.crisp-edges {
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+}
+
+ +

{{EmbedLiveSample('Examples')}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS3 Images", "#the-image-rendering", "image-rendering")}}{{Spec2("CSS3 Images")}}Initial definition.
+ +

{{cssinfo}}

+ +
+

注意：虽然在最初此属性与 SVG 的 image-rendering 属性定义相近, 但到现在，它们之间已有相当的差别。

+
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.image-rendering")}}

+ +

备注

+ +
+

译者注：这是来自旧版浏览器兼容性表格的备注，保留以便查阅。可另行参阅 Can I use。

+
+ +

Internet Explorer 7 和 8 支持非标准的 -ms-interpolation-mode 属性，有两个属性值：bicubic 和 nearest-neighbor，和大量差距：

+ +
    +
  • 只应用于 <img> 等元素带的图片
    • +
  • IE 7 上此属性只支持无透明度的图片
    • +
  • 不能继承
    • +
  • IE 7 默认值： nearest-neighbor (低质量)
    • +
  • IE 8 默认值： bicubic (高质量)
    • +
  • IE 9 不支持此非标准属性
    • +
+ +

WebKit 支持一个非标准属性: -webkit-optimize-contrast.

+ +

WebKit Nightly 支持，见 bug

+ +

Canvas 可以通过人工方式支持 crisp-edge/optimize-contrast 属性.

diff --git a/files/zh-cn/web/css/image/index.html b/files/zh-cn/web/css/image/index.html new file mode 100644 index 0000000000..c19fb0521e --- /dev/null +++ b/files/zh-cn/web/css/image/index.html @@ -0,0 +1,207 @@ +--- +title: +slug: Web/CSS/image +tags: + - CSS图像 + - CSS图像数据类型 + - CSS数据类型 +translation_of: Web/CSS/image +--- +

{{ CSSRef() }}

+ +

综述：

+ +

CSS的<image>数据类型描述的是2D图形。在CSS中有两种类型的图像：简单的静态图像，经常被一个在使用的URL引用，动态生成的图像，比如DOM树的部分元素样式渐变或者计算样式产生。

+ +

CSS可以处理以下情形中的不同类型图像：

+ +
    +
  • 具有固有尺寸（大小）的图像，即图像具有自己的原始尺寸（大小），比如一个jpeg格式的图像有他自己的固有尺寸（大小）；
    • +
  • 图像具有多个固定尺寸，可在一个文件中存在多个不同版本的尺寸，比如有些.ico格式的图像。在这种情况下，图像表现出来的固有尺寸将是这些尺寸较大的一个，也就是最接近外层包含它的容器纵横比的那个图像；
    • +
  • 没有固定大小但有固定纵横比的图像，像一些矢量图形，比如SVG格式的图像；
    • +
  • 没有固定大小也没有固定宽高比的图像，比如CSS渐变（图像）；
    • +
+ +

CSS确定一个图像对象实际尺寸的依据有三条：(1)图像的原始尺寸；(2)用CSS属性指定的宽和高，比如{{ cssxref("width") }}, {{ cssxref("height") }} or {{ cssxref("background-size") }}中，(3)图像对象默认大小，由图像使用用途的属性类型决定：

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
图像对象类型默认的图像对象尺寸
{{ cssxref("background-image") }}DOM元素的背景定位的范围尺寸（大小）
{{ cssxref("list-style-image") }} 字符的1em尺寸（大小）
{{ cssxref("border-image") }}DOM元素的边框图像范围尺寸（大小）
{{ cssxref("cursor") }}浏览器定义的光标尺寸匹配在使用操作系统上常规的光标尺寸
用 CSS {{ cssxref("content") }}属性，和CSS伪元素 {{ cssxref("::after") }} 和 {{ cssxref("::before") }}替换元素内容一个300px × 150px 矩形
+ +

图像对象的实际尺寸计算算法如下：

+ +
    +
  • 如果宽度和高度都被指定了，则使用这些值会作为图像对象实际尺寸；
    • +
  • 如果指定了宽度和高度中的一个，恰好这个值匹配上了图像固有宽高比中的一个值，则另一个会使用固有宽高比来确定，否则就使用图像的原始大小来确定没定义的那个值；
    • +
  • 如果宽度和高度都没有被指定，在不超过图像对象默认尺寸的前提下，将会根据图像的固有宽高比来计算图像对象的实际尺寸；如果图像没有固有宽高比，则会采用图像对象固有宽高比；如果图像对象也没有固有宽高比，则使用图像对象的默认大小（翻译可能会有误，求大神快来翻译）；
    • +
+ +

图像可以使用很多CSS属性，比如 {{ cssxref("background-image") }}, {{ cssxref("border-image") }}, {{ cssxref("content") }}, {{ cssxref("list-style-image") }} 和{{ cssxref("cursor") }}；

+ +
提示: 不是所有的浏览器都支持任何类型的图像的任何属性，详情查看浏览器兼容性了全面的条目列表
+ +

语法

+ +

一个<image>CSS数据类型可能表示成如下几种类型：

+ +
    +
  • 一个图像被引用为CSS {{cssxref("<url>")}}数据类型使用url()方法；
    • +
  • 一个CSS{{cssxref("<gradient>")}};
    • +
  • 页面的一个部分，定义在{{ cssxref("element", "element()") }}方法中；
    • +
+ +

示例

+ +

以下是有效的图像引用值：

+ +
url(test.jpg)                          url()方法, 只要test.jpg是图像文件
+linear-gradient(to bottom, blue, red)  一个 <gradient>标签
+element(#colonne3)                     页面的一部分, 使用了element()方法,
+                                       如果 colonne3 是存在于页面中的一个元素id即可
+
+ +

以下是无效的图像引用值：

+ +
cervin.jpg                             图像文件必须使用url()方法定义
+url(report.pdf)                        url()方法指向的文件链接必须是一个图像文件
+element(#fakeid)                       如果fakeid是一个不存在与页面的元素id
+
+ +

规格

+ + + + + + + + + + + + + + + + +
规格状态备注
{{ SpecName('CSS3 Images', '#image-notation', 'image()') }}{{ Spec2('CSS3 Images') }} +

在CSS3之前没有明确的定义出<image>数据类型，图像只能被定义在url()方法中。

+
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
<uri>{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}
<gradient>{{ compatVersionUnknown() }}
+ limited to {{ cssxref("background-image") }} & {{ cssxref("background") }}{{ property_prefix("-moz") }}		{{ compatVersionUnknown() }}{{ property_prefix("-webkit") }}IE 10{{ property_prefix("-ms") }}{{ compatVersionUnknown() }}{{ property_prefix("-o") }}{{ compatVersionUnknown() }}{{ property_prefix("-webkit") }}
element()4.0 (2.0) limited to {{ cssxref("background-image") }} & {{ cssxref("background") }}{{ property_prefix("-moz") }}{{ compatUnknown() }}{{ compatUnknown() }}{{ compatUnknown() }}{{ compatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
<uri>{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}{{ compatVersionUnknown() }}
<gradient>{{ compatVersionUnknown() }}
+ limited to {{ cssxref("background-image") }} & {{ cssxref("background") }}{{ property_prefix("-moz") }}		{{ compatUnknown() }}{{ compatUnknown() }}{{ compatUnknown() }}{{ compatUnknown() }}
element()4.0 (2.0) limited to {{ cssxref("background-image") }} & {{ cssxref("background") }}{{ property_prefix("-moz") }}{{ compatUnknown() }}{{ compatUnknown() }}{{ compatUnknown() }}{{ compatUnknown() }}
+
+ +

参阅：

+ +
    +
  • Using CSS gradients, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient","linear-gradient()")}}, {{cssxref("radial-gradient","radial-gradient()")}}, {{cssxref("repeating-linear-gradient","repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient","repeating-radial-gradient()")}}
    • +
  • {{cssxref("element","element()")}}
    • +
diff --git a/files/zh-cn/web/css/index.html b/files/zh-cn/web/css/index.html new file mode 100644 index 0000000000..39760c3966 --- /dev/null +++ b/files/zh-cn/web/css/index.html @@ -0,0 +1,109 @@ +--- +title: CSS（层叠样式表） +slug: Web/CSS +tags: + - CSS + - 参考 + - 层叠样式表 + - 布局 + - 样式 + - 设计 +translation_of: Web/CSS +--- +

{{CSSRef}}

+ +

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

+ +

CSS 是开放网络的核心语言之一，由 W3C 规范 实现跨浏览器的标准化。CSS节省了大量的工作。 样式可以通过定义保存在外部.css文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。

+ +
+
    +
  • CSS 介绍 + +

    如果你是 Web 开发的新手，请务必阅读我们的 CSS 基础文章以学习 CSS 的含义和用法。

    +
    • +
  • CSS 教程 +

    我们的 CSS 学习区包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。

    +
    • +
  • CSS 参考 +

    针对资深 Web 开发者的详细参考手册，描述了 CSS 的各个属性与概念。

    +
    • +
+ +
+
+
+

教程

+ +

我们的 CSS 学习区 以多模块、零基础为特色进行 CSS 的教学 —— 这也就意味着你不需要任何知识基础。

+ +
+
学习CSS 第一步
+
CSS（层叠样式表）用于设置网页的样式及布局——比如，可以更改内容的字体、颜色、大小以及间距，或是将其分列，或是添加动画及赋予内容其它装饰性的特征。本模块将通过阐述基本原理，展示语法示例，以及如何与HTML相联系三方面，为你日后精通CSS提供一个友好的开端。
+
CSS构建
+
本模块是学习CSS 第一步的延续，相信你已经熟悉了这门语言及它的语法，并拥有一些使用它的基本经验，是时候更进一步了。本模块着眼于层叠和继承、所有可用的选择器类型、单位、大小、背景、边框、调试等等。
+
+ 其目的在于先为你提供编写功能强大的CSS工具包，了解所有基础理论。之后再进行进一步的学习，诸如样式化文本和CSS布局
+
样式化文本
+
在学习了CSS语言基础知识的基础上，你需要关注的下一个重点是样式化文本——这是使用CSS时最常用的场景之一。在这一模块将学习文本样式设置的基础知识，包括设置字体、粗体、斜体、行、字符间距、阴影以及其他文本属性。我们通过在页面上应用自定义的字体以及样式化的列表、链接来完善本模块。
+
CSS 布局
+
到这里，我们已经了解了 CSS 基础：如何样式化文本，以及如何样式化和操作内置个人内容的盒模型。现在是时候研究“如何相对于可视区域将你的盒子彼此间放置于正确位置”了。我们到此已经覆盖了所有预备知识，因此现在能够深入学习 CSS 布局，研究不同的显示设置，包括浮动和定位在内的传统布局方法，以及像如弹性盒（flexbox）之类新近流行的布局工具。
+
解决常见的CSS相关问题
+
本模块提供了一些内容链接，这些内容很好的回答了在创建网页时使用CSS所遇到的常见问题。
+
+
+
+ +
+

参考

+ + + +

参考书

+ +

《CSS layout cookbook》一书的目的是将一些也许你将要在自己的网站中实现的、常用的布局模式的方法汇集在一起，并且还提供了代码使你可以在项目中作为基础来使用。这些方法突出表现了同一布局规范的不同使用方式，作为开发者你可以自由选择自己想要的方式来实现。

+ +

CSS 开发工具

+ + + +

自身的错误

+ +
    +
  • Firefox: {{bug(1323667)}}
    • +
+
+
+
+ +

相关链接

+ + diff --git a/files/zh-cn/web/css/inherit/index.html b/files/zh-cn/web/css/inherit/index.html new file mode 100644 index 0000000000..5bad2ead9c --- /dev/null +++ b/files/zh-cn/web/css/inherit/index.html @@ -0,0 +1,79 @@ +--- +title: inherit +slug: Web/CSS/inherit +tags: + - CSS + - CSS Value + - inherit +translation_of: Web/CSS/inherit +--- +
 
+ +

{{CSSRef}}

+ +

 inherit 关键字使得元素获取其父元素的计算值。它可以应用于任何CSS属性，包括CSS简写 {{cssxref("all")}}。

+ +

对于继承属性，inherit 关键字只是增强了属性的默认行为，只有在重载(overload)其它规则的时候被使用。对于非继承属性，inherit 这指定的行为通常没有多大意义，一般使用使用 {{cssxref("initial")}} 或 {{cssxref("unset")}} 作为替代。

+ +

继承始终来自文档树中的父元素，即使父元素不是包含块。

+ +

示例

+ +
/* 设置二级标题的颜色为绿色 */
+h2 { color: green; }
+
+/* ...but leave those in the sidebar alone so they use their parent's color */
+#sidebar h2 { color: inherit; }
+
+ +

在下面这个例子中，如果sidebar 中h2元素的div匹配下面的规则的话，颜色会变成蓝色。

+ +
div#current { color: blue; }
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Cascade', '#inherit', 'inherit') }}{{Spec2('CSS4 Cascade')}}No changes from Level 3.
{{ SpecName('CSS3 Values', "#common-keywords", "inherit") }}{{ Spec2('CSS3 Values') }}No significant change from {{ SpecName('CSS2.1') }}.
{{ SpecName('CSS2.1', "cascade.html#value-def-inherit", "inherit") }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.types.global_keywords.inherit")}}

+
+ +

See also

+ +
    +
  • Inheritance
    • +
  • Use {{cssxref("initial")}} to set a property to its initial value.
    • +
  • Use {{cssxref("unset")}} to set a property to its inherited value if it inherits, or to its initial value if not.
    • +
  • Use {{cssxref("revert")}} to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).
    • +
  • The {{cssxref("all")}} property lets you reset all properties to their initial, inherited, reverted, or unset state at once.
    • +
diff --git a/files/zh-cn/web/css/inheritance/index.html b/files/zh-cn/web/css/inheritance/index.html new file mode 100644 index 0000000000..9cfa528f96 --- /dev/null +++ b/files/zh-cn/web/css/inheritance/index.html @@ -0,0 +1,74 @@ +--- +title: 继承 +slug: Web/CSS/inheritance +tags: + - CSS + - 继承 +translation_of: Web/CSS/inheritance +--- +
{{cssref}}
+ +

在css中，每个CSS 属性定义的概述都指出了这个属性是默认继承的("Inherited: Yes") 还是默认不继承的("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。

+ +

继承属性

+ +

当元素的一个继承属性 （inherited property）没有指定值时，则取父元素的同属性的计算值 computed value。只有文档根元素取该属性的概述中给定的初始值（initial value）（这里的意思应该是在该属性本身的定义中的默认值）。

+ +

继承属性的一个典型例子就是 {{ Cssxref("color") }} 属性。给出以下样式规则：

+ +
p { color: green; }
+ +

若将其应用在下面这段 HTML 代码上…

+ +
<p>This paragraph has <em>emphasized text</em> in it.</p>
+ +

…文本 "emphasized text" 就会呈现为绿色，因为 em 元素继承了 p 元素 {{ Cssxref("color") }} 属性的值，而没有获取 color 属性的初始值（这个 color 值用于页面没有指定 color 时的根元素）。

+ +

非继承属性

+ +

当元素的一个非继承属性(在Mozilla code 里有时称之为reset property )没有指定值时，则取属性的初始值 initial value（该值在该属性的概述里被指定）。

+ +

非继承属性的一个典型例子就是 {{ Cssxref("border") }} 属性。给出以下样式规则：

+ +
 p { border: medium solid; }
+ +

若将其应用在下面这段 HTML 代码上…

+ +
  <p>This paragraph has <em>emphasized text</em> in it.</p>
+ +

…文本 "emphasized text" 就没有边框，因为 {{ Cssxref("border-style") }} 属性的初始值为none。

+ +

 {{ Cssxref("inherit") }} 关键字允许显式的声明继承性，它对继承和非继承属性都生效。

+ +

可以使用 {{cssxref("all")}} 简写属性一次控制所有属性的继承，该属性将其值应用于所有属性，例如:

+ +
font {
+  all: revert;
+  font-size: 200%;
+  font-weight: bold;
+}
+ +

这会将 {{cssxref("font")}} 属性的样式恢复为用户代理（浏览器）的默认值，除非存在用户样式表，在这种情况下使用该样式表。然后它将字体大小加倍并应用 {{cssxref("font-weight")}} 属性 为"bold"

+ +

注意

+ +

{{ Cssxref("inherit") }} 关键字允许显式的声明继承性，它对继承和非继承属性都生效。

+ +

可以使用 {{cssxref("all")}} 简写属性一次控制所有属性的继承，该属性将其值应用于所有属性，例如:

+ +
font {
+  all: revert;
+  font-size: 200%;
+  font-weight: bold;
+}
+ +

这会将 {{cssxref("font")}} 属性的样式恢复为用户代理（浏览器）的默认值，除非存在用户样式表，在这种情况下使用该样式表。然后它将字体大小加倍并应用 {{cssxref("font-weight")}} 属性 为"bold"

+ +

参见

+ +
    +
  • 控制继承：{{ cssxref("inherit") }}, {{cssxref("initial")}}, {{cssxref("unset")}}, and {{cssxref("revert")}}
    • +
  • CSS 层叠
    • +
  • 层叠和继承
    • +
  • {{ CSS_key_concepts() }}
    • +
diff --git a/files/zh-cn/web/css/initial/index.html b/files/zh-cn/web/css/initial/index.html new file mode 100644 index 0000000000..3b0bccee3e --- /dev/null +++ b/files/zh-cn/web/css/initial/index.html @@ -0,0 +1,78 @@ +--- +title: initial +slug: Web/CSS/initial +tags: + - CSS + - CSS Value + - Default state + - initial +translation_of: Web/CSS/initial +--- +
{{CSSRef}}
+ +

initial CSS关键字将属性的初始（或默认）值应用于元素。不应将初始值与浏览器样式表指定的值混淆。它可以应用于任何CSS属性。这包括CSS简写{{cssxref("all")}}，initial 可用于将所有CSS属性恢复到其初始状态。

+ +
+

注意：在继承的属性上，初始值可能是意外的。你应该考虑使用 {{cssxref("inherit")}}, {{cssxref("unset")}}，或{{cssxref("revert")}} 关键字代替。

+
+ +

示例

+ +

HTML

+ +
<p>
+  <span>This text is red.</span>
+  <em>This text is in the initial color (typically black).</em>
+  <span>This is red again.</span>
+</p>
+ +

CSS

+ +
p {
+  color: red;
+}
+
+em {
+  color: initial;
+}
+ +

{{EmbedLiveSample('示例')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Cascade', '#initial', 'initial') }}{{Spec2('CSS4 Cascade')}}No changes from Level 3.
{{ SpecName('CSS3 Cascade', '#initial', 'initial') }}{{Spec2('CSS3 Cascade')}}Initial definition.
+ +

浏览器兼容性

+ +
{{Compat("css.types.global_keywords.initial")}}
+ +

 

+ +

参见

+ +
    +
  • Use {{cssxref("unset")}} to set a property to its inherited value if it inherits, or to its initial value if not.
    • +
  • Use {{cssxref("revert")}} to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).
    • +
  • Use {{cssxref("inherit")}} to make an element's property the same as its parent.
    • +
  • The {{cssxref("all")}} property lets you reset all properties to their initial, inherited, reverted, or unset state at once.
    • +
diff --git a/files/zh-cn/web/css/initial_value/index.html b/files/zh-cn/web/css/initial_value/index.html new file mode 100644 index 0000000000..7b74d8ccc3 --- /dev/null +++ b/files/zh-cn/web/css/initial_value/index.html @@ -0,0 +1,51 @@ +--- +title: 初始值 +slug: Web/CSS/initial_value +tags: + - CSS + - Reference +translation_of: Web/CSS/initial_value +--- +
{{cssref}}
+ +

CSS属性的初始值是其默认值，如其定义表中所列。 初始值的使用取决于属性是否被继承：

+ +
    +
  • 对于继承属性，初始值只能被用于没有指定值的根元素上。
    • +
  • 对于非继承属性，初始值可以被用于任意没有指定值的元素上。
    • +
+ +
+

注意：你可以使用 initial 关键词明确指定初始值。

+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
CSS Cascade 4Formal definition.
{{SpecName("CSS2.1", "cascade.html#specified-value", "initial value")}}{{Spec2("CSS2.1")}}Implicit definition.
+ +

参见

+ +
    +
  • {{cssxref("initial")}}
    • +
  • {{CSS_key_concepts}}
    • +
diff --git a/files/zh-cn/web/css/inline-size/index.html b/files/zh-cn/web/css/inline-size/index.html new file mode 100644 index 0000000000..ca87a6528f --- /dev/null +++ b/files/zh-cn/web/css/inline-size/index.html @@ -0,0 +1,100 @@ +--- +title: inline-size +slug: Web/CSS/inline-size +translation_of: Web/CSS/inline-size +--- +
{{CSSRef}}
+ + + +

inline-size CSS 属性影响一个元素的{{cssxref("width")}} 或 {{cssxref("height")}}，以改变一个元素的盒模型的水平或垂直大小（是width还是height取决于该元素的{{cssxref("writing-mode")}}）。

+ +
{{EmbedInteractiveExample("pages/css/inline-size.html")}}
+ + + +

语法

+ +
/* <length> values */
+inline-size: 300px;
+inline-size: 25em;
+
+/* <percentage> values */
+inline-size: 75%;
+
+/* Keyword values */
+inline-size: max-content;
+inline-size: min-content;
+inline-size: fit-content(20em);
+inline-size: auto;
+
+/* Global values */
+inline-size: inherit;
+inline-size: initial;
+inline-size: unset;
+
+ + + +

如果元素的writing-mode是垂直方向的它会影响height，否则默认是影响width。

+ +

有一个与inline-size 属性有关的{{cssxref("block-size")}}，它定义了元素的其他尺寸。

+ +

{{cssinfo}}

+ +

值

+ +

inline-size属性的可选值与{{cssxref("width")}}和{{cssxref("height")}}的可选值一样。

+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<p class="exampleText">Example text</p>
+
+ +

CSS

+ +
.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  inline-size: 110px;
+}
+ +

{{EmbedLiveSample("Example")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Logical Properties", "#propdef-inline-size", "inline-size")}}{{Spec2("CSS Logical Properties")}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.inline-size")}}

+ +

参阅

+ +
    +
  • The mapped physical properties: {{cssxref("width")}} and {{cssxref("height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/zh-cn/web/css/inline_formatting_context/index.html b/files/zh-cn/web/css/inline_formatting_context/index.html new file mode 100644 index 0000000000..bff3b979d6 --- /dev/null +++ b/files/zh-cn/web/css/inline_formatting_context/index.html @@ -0,0 +1,58 @@ +--- +title: 行内格式化上下文（Inline formatting context） +slug: Web/CSS/Inline_formatting_context +translation_of: Web/CSS/Inline_formatting_context +--- +

这篇文章将解释什么是行内格式化上下文（Inline formatting context）

+ +

核心概念

+ +

行内格式化上下文是一个网页的渲染结果的一部分。其中，各行内框（inline boxes）一个接一个地排列，其排列顺序根据书写模式（writing-mode）的设置来决定：

+ +
    +
  • 对于水平书写模式，各个框从左边开始水平地排列
    • +
  • 对于垂直书写模式，各个框从顶部开始水平地排列
    • +
+ +

在下面给出的例子中，带黑色边框的两个({{HTMLElement("div")}})元素组成了一个块级格式化上下文（block formatting context），其中的每一个单词都参与一个行内格式化上下文中。水平书写模式下的各个框水平地排列，垂直书写模式下的各个框垂直地排列。

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/inline.html", '100%', 720)}}

+ +

各个框组成了一行，而该行位于一个称为“行框（line box）”的矩形区域之中。该行框的大小将足以包含该行中所有的行内框（inline boxes）；如果一行的空间不够，将在行内方向上新开一行。因此，一个段落实际上是一系列行框的集合，这些行框在块的方向上排列。

+ +

一个行内框（inline box）被分割到多行中时， margins, borders, 以及 padding 的设定均不会在断裂处生效。 下例中有一个 ({{HTMLElement("span")}}) 元素，它包裹了一系列单词，占据了两行。可以看见在断裂处，<span> 的 border 同样发生了断裂。

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/break.html", '100%', 720)}}

+ +

Margins, borders, 以及 padding 的设置，在行的方向上是生效的。在下例中，可以看见行内元素 <span> 的 margin， border 以及 padding 是被加上了的。

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/mbp.html", '100%', 920)}}

+ +
+

注意: 此处使用了 logical, flow-relative properties — {{cssxref("padding-inline-start")}} ，而不是 {{cssxref("padding-left")}} — so that they work in the inline dimension whether the text is horizontal or vertical. Read more about these properties in Logical Properties and Values.

+
+ +

在块的方向上对齐

+ +

行内框（Inline boxes）可使用{{cssxref("vertical-align")}}属性，以不同的方式在块的方向上进行对齐（因此在垂直书写模式下，vertical-align 中的“vertical”根本是名不副实——此时行内框将在水平方向上进行对齐）。 下例中， 字号较大的文本使得第一个句子的行框变大，因此 vertical-align 能让行内框（inline boxes）分布于上侧或下侧。例子里用的值是 top, 可以试试 middle, bottom, 或 baseline 这些值。

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/align.html", '100%', 920)}}

+ +

在行内方向上对齐

+ +

如果行内方向上还有额外空间，那么 {{cssxref("text-align")}} 可用于将各行内框（inline boxes）在行框（line box）内对齐。 可以试试把 text-align 的值改成 end 。

+ +

{{EmbedGHLiveSample("css-examples/inline-formatting/text-align.html", '100%', 920)}}

+ +

浮动造成的效果

+ +

在行内方向上，各行框（Line Boxes ）通常具有相同的尺寸，即在水平书写模式下，它们有同样的宽度；在垂直书写模式下，它们有同样的高度。但是，如果同一个块格式化上下文中存在一个 {{cssxref("float")}}，则这个浮动元素将导致包裹了它的各行框变短。

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

+ +

另见

+ + diff --git a/files/zh-cn/web/css/integer/index.html b/files/zh-cn/web/css/integer/index.html new file mode 100644 index 0000000000..51a43fdf3a --- /dev/null +++ b/files/zh-cn/web/css/integer/index.html @@ -0,0 +1,136 @@ +--- +title: 整型 +slug: Web/CSS/integer +tags: + - CSS + - CSS数据类型 + - Reference + - Web +translation_of: Web/CSS/integer +--- +
{{CSSRef}}
+ +

The <integer> CSS data type is a special type of {{cssxref("number")}} that represents a whole number, whether positive or negative. Integers can be used in numerous CSS properties, such as {{cssxref("column-count")}}, {{cssxref("counter-increment")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, and {{cssxref("z-index")}}.
+ The <integer> css数据类型是一种特殊的<number>类型，它表示一个整数，无论是正数还是负数。整数可以用于许多css属性，例如{{cssxref("column-count")}}, {{cssxref("counter-increment")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, and {{cssxref("z-index")}}.

+ +

语法

+ +

The <integer> data type consists of one or several decimal digits, 0 through 9 inclusive, optionally preceded by a single + or - sign. There is no unit associated with integers.
+ <integer>数据类型由一个或多个十进制数字组成，包括0到9，可以选择前面加一个+或-号。没有与整数关联的单位。

+ +
Note: There is no official range of valid <integer> values. Opera 12.1 supports values up to 215-1, IE up to 220-1, and other browsers even higher. During the CSS3 Values cycle there was a lot of discussion about setting a minimum range to support: the latest decision, in April 2012 during the LC phase, was [-227-1; 227-1], but other values like 224-1 and 230-1 were also proposed. However, the latest spec doesn't specify a range anymore.
+注意：没有有效的<integer>值的正式范围。Opera12.1支持高达215-1的值，IE高达220-1的值，其他浏览器支持更高的值。在CSS3值周期中，有很多关于设置最小支持范围的讨论：2012年4月在LC阶段的最新决定是[-227-1; 227-1],，但也提出了224-1 and 230等其他值。但是，最新的规范不再指定范围。
+ +

Interpolation

+ +

When animated, values of the <integer> data type are interpolated using discrete, whole steps. The calculation is done as if they were real, floating-point numbers; the discrete value is obtained using the floor function. The speed of the interpolation is determined by the timing function associated with the animation.
+ 设置动画时，<integer>数据类型的值将使用离散的完整步骤进行插值。计算过程就像是实数，浮点数一样；离散值是使用floor函数得到的。插值的速度由与动画相关联的定时函数确定。

+ +

示例

+ +

合法整型

+ +
12          Positive integer (without a leading + sign)
++123        Positive integer (with a leading + sign)
+-456        Negative integer
+0           Zero
++0          Zero, with a leading +
+-0          Zero, with a leading -
+
+ +

非法整型

+ +
12.0        This is a <number>, not an <integer>, though it represents an integer.
+12.         Decimal points are not allowed.
++---12      Only one leading +/- is allowed.
+ten         Letters are not allowed.
+_5          Special characters are not allowed.
+\35         Escaped Unicode characters are not allowed, even if they are an integer (here: 5).
+\4E94       Non-arabic numerals are not allowed, even when escaped (here: the Japanese 5, 五).
+3e4         Scientific notation is not allowed.
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Values', '#integers', '<integer>')}}{{Spec2('CSS3 Values')}}No significant change.
{{SpecName('CSS2.1', 'syndata.html#numbers', '<integer>')}}{{Spec2('CSS2.1')}}Explicit definition.
{{SpecName('CSS1', '', '<integer>')}}{{Spec2('CSS1')}}Implicit definition.
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
basic1.0{{CompatGeckoDesktop("1.0")}}3.0{{CompatVersionUnknown}}1.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

参考

+ +
    +
  • {{cssxref("<number>")}}
    • +
diff --git a/files/zh-cn/web/css/isolation/index.html b/files/zh-cn/web/css/isolation/index.html new file mode 100644 index 0000000000..ad3c297a5f --- /dev/null +++ b/files/zh-cn/web/css/isolation/index.html @@ -0,0 +1,156 @@ +--- +title: isolation +slug: Web/CSS/isolation +tags: + - CSS + - CSS参考 + - CSS属性 + - CSS混合 + - 布局 +translation_of: Web/CSS/isolation +--- +

{{CSSRef()}}

+ +

概述

+ +

isolation CSS属性定义该元素是否必须创建一个新的层叠上下文（{{glossary("stacking context")}}）。

+ +

该属性的主要作用是当和{{cssxref("background-blend-mode")}}属性一起使用时，可以只混合一个指定元素栈的背景：它允许使一组元素从它们后面的背景中独立出来，只混合这组元素的背景。

+ +

{{cssinfo}}

+ +

语法

+ +
Formal syntax:  {{csssyntax("isolation")}}
+ +
isolation: auto;
+isolation: isolate;
+
+isolation: initial;
+isolation: inherit;
+isolation: unset;
+
+ +

值

+ +
+
auto
+
该关键字定义只有在该元素的属性需要的时候才会创建一个新的元素栈环境。
+
isolate
+
该关键字定义一个新的元素栈环境会被创建。
+
+ +

示例

+ +
<div id="b" class="a">
+  <div id="d">
+    <div class="a c">auto</div>
+  </div>
+  <div id="e">
+    <div class="a c">isolate</div>
+  </div>
+</div>
+
+ +
.a {
+  background-color: rgb(0,255,0);
+}
+#b {
+  width: 200px;
+  height: 210px;
+}
+.c {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+  padding: 2px;
+  mix-blend-mode: difference;
+}
+#d {
+  isolation: auto;
+}
+#e {
+  isolation: isolate;
+}
+ +

{{ EmbedLiveSample('%E7%A4%BA%E4%BE%8B', "230", "230") }}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{ SpecName('Compositing', '#isolation', 'Isolation') }}{{ Spec2('Compositing') }}首次定义
+ +

浏览器兼容性

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support +

{{CompatChrome(41.0)}}

+ 		{{CompatGeckoDesktop('36')}}{{CompatNo()}}{{CompatUnknown()}}{{CompatUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support +

{{CompatChrome(41.0)}}

+ 		{{CompatGeckoMobile('36')}}[1]{{CompatNo()}}{{CompatUnknown()}}{{CompatUnknown()}}
+
+ +

参见

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}}
    • +
diff --git a/files/zh-cn/web/css/justify-content/index.html b/files/zh-cn/web/css/justify-content/index.html new file mode 100644 index 0000000000..d06a19bbe5 --- /dev/null +++ b/files/zh-cn/web/css/justify-content/index.html @@ -0,0 +1,359 @@ +--- +title: justify-content +slug: Web/CSS/justify-content +tags: + - CSS + - CSS 属性 + - CSS 弹性框 + - Reference +translation_of: Web/CSS/justify-content +--- +
{{CSSRef}}
+ +

CSS justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

+ +
/* Positional alignment */
+justify-content: center;     /* 居中排列 */
+justify-content: start;      /* Pack items from the start */
+justify-content: end;        /* Pack items from the end */
+justify-content: flex-start; /* 从行首起始位置开始排列 */
+justify-content: flex-end;   /* 从行尾位置开始排列 */
+justify-content: left;       /* Pack items from the left */
+justify-content: right;      /* Pack items from the right */
+
+/* Baseline alignment */
+justify-content: baseline;
+justify-content: first baseline;
+justify-content: last baseline;
+
+/* Distributed alignment */
+justify-content: space-between;  /* 均匀排列每个元素
+                                   首个元素放置于起点，末尾元素放置于终点 */
+justify-content: space-around;  /* 均匀排列每个元素
+                                   每个元素周围分配相同的空间 */
+justify-content: space-evenly;  /* 均匀排列每个元素
+                                   每个元素之间的间隔相等 */
+justify-content: stretch;       /* 均匀排列每个元素
+                                   'auto'-sized 的元素会被拉伸以适应容器的大小 */
+
+/* Overflow alignment */
+justify-content: safe center;
+justify-content: unsafe center;
+
+/* Global values */
+justify-content: inherit;
+justify-content: initial;
+justify-content: unset;
+ +

当 length 属性和自动外边距属性（margin: auto）生效之后，对齐已经完成了。也就是说，如果存在至少一个弹性元素，而且这个元素的 {{cssxref("flex-grow")}} 属性不等于 0，那么对齐方式不会生效，就像没有多余空间的情况。 

+ +
{{cssinfo}}
+ +
+ +

可以参考 使用 CSS 弹性框获取更多信息。

+ +

语法

+ +

值

+ +
+
start
+
从行首开始排列。每行第一个元素与行首对齐，同时所有后续的元素与前一个对齐。
+
+ +
+
flex-start
+
从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。
+
flex-end
+
从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。
+
center
+
伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
+
left
+
伸缩元素一个挨一个在对齐容器得左边缘，如果属性的轴与内联轴不平行，则left的行为类似于start。
+
right
+
元素以容器右边缘为基准，一个挨着一个对齐,如果属性轴与内联轴不平行，则right的行为类似于end。
+
baseline
+ first baseline
+ last baseline
+
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
+ The fallback alignment for first baseline is start, the one for last baseline is end.
+
space-between
+
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
+
space-around
+
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
+
space-evenly
+
flex项都沿着主轴均匀分布在指定的对齐容器中。相邻flex项之间的间距，主轴起始位置到第一个flex项的间距,，主轴结束位置到最后一个flex项的间距，都完全一样。
+
stretch
+
If the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by {{cssxref("max-height")}}/{{cssxref("max-width")}} (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.
+
safe
+
与对齐关键字一起使用，如果选定的关键字会导致元素溢出容器造成数据丢失，那么将会使用 start 代替它。
+
unsafe
+
Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.
+
+ +

语法格式

+ +
{{csssyntax}}
+
+ +

示例

+ +

CSS content

+ +
#container {
+  display: flex;
+  justify-content: space-between; /* Can be changed in the live sample */
+}
+
+#container > div {
+  width: 100px;
+  height: 100px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+
+ + + +

Result

+ +

{{EmbedLiveSample("Example", "100%", 140)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box Alignment', '#propdef-justify-content', 'justify-content')}}{{Spec2('CSS3 Box Alignment')}}Adds the [ first | last ]? baseline, self-start, self-end, start, end, left, right, unsafe | safe values.
{{SpecName('CSS3 Flexbox', '#propdef-justify-content', 'justify-content')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(21.0)}} {{property_prefix("-webkit")}}
+ {{CompatChrome(29.0)}}[3]		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatGeckoDesktop("18.0")}}[1]
+ {{CompatGeckoDesktop("20.0")}}[2]		1112.109
space-evenly{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("52.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
start, end{{CompatNo}}[4]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}[4]{{CompatUnknown}}
left, right{{CompatNo}}[4]{{CompatNo}}{{CompatGeckoDesktop("52.0")}}[5]{{CompatNo}}{{CompatNo}}[4]{{CompatUnknown}}
baseline{{CompatChrome("57.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatOpera("44.0")}}{{CompatUnknown}}
first baseline, last baseline{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("52.0")}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
stretch{{CompatChrome("57.0")}}{{CompatNo}}{{CompatGeckoDesktop("52.0")}}{{CompatNo}}{{CompatOpera("44.0")}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidAndroid WebviewEdgeIE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}[3]{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatNo}}12.10{{CompatUnknown}}{{CompatVersionUnknown}}[3]
space-evenly{{CompatGeckoMobile("52.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
start, end{{CompatNo}}[4]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}[4]{{CompatUnknown}}
left, right{{CompatNo}}[4]{{CompatNo}}{{CompatGeckoMobile("52.0")}}[5]{{CompatNo}}{{CompatUnknown}}[4]{{CompatUnknown}}
baseline{{CompatChrome("57.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatOpera("44.0")}}{{CompatUnknown}}
first baseline, last baseline{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("52.0")}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
stretch{{CompatChrome("57.0")}}{{CompatNo}}{{CompatGeckoMobile("52.0")}}{{CompatNo}}{{CompatOpera("44.0")}}{{CompatUnknown}}
+
+ +

[1] 直到Firefox 28，Firefox都只支持单行弹性框。用户需要修改about:config，将“layout.css.flexbox.enabled”设置为“true”来在Firefox 18和19应用弹性框。

+ +

[2] 比较旧的版本规范将绝对定位子项认为0 x 0 flex项。 后面的规范版本将它们从流程中取出并根据对齐和对齐属性设置它们的位置。 Chrome从Chrome 52开始的实施新行为。

+ +

参考

+ + diff --git a/files/zh-cn/web/css/justify-items/index.html b/files/zh-cn/web/css/justify-items/index.html new file mode 100644 index 0000000000..f633239a93 --- /dev/null +++ b/files/zh-cn/web/css/justify-items/index.html @@ -0,0 +1,164 @@ +--- +title: justify-items +slug: Web/CSS/justify-items +translation_of: Web/CSS/justify-items +--- +
{{CSSRef}}
+ +

CSS 的 justify-items 属性为所有盒中的项目定义了默认的 {{CSSxRef("justify-self")}} ， 可以使这些项目以默认方式沿适当轴线对齐到每个盒子。

+ +
{{EmbedInteractiveExample("pages/css/justify-items.html")}}
+ + + +

该属性的作用效果取决于我们使用的布局模式：

+ +
    +
  • 在块级布局中，会将其包含的项目在其行内轴上对齐；
    • +
  • 绝对定位的元素中，会将其包含的项目在其行内轴上对齐，同时考虑 top、left、bottom、right 的值；
    • +
  • 表格单元中，该属性被忽略（块级元素、绝对定位元素和表格布局中对齐的更多信息）；
    • +
  • 弹性盒子布局中，该属性被忽略（弹性盒子中对齐的更多信息）；
    • +
  • 栅格布局中，会将其栅格区域内的项目在其行内轴上对齐（栅格布局中对齐的更多信息）；
    • +
+ +

语法规则

+ +
/* Basic keywords */
+justify-items: auto;
+justify-items: normal;
+justify-items: stretch;
+
+/* Positional alignment */
+justify-items: center;     /* Pack items around the center */
+justify-items: start;      /* Pack items from the start */
+justify-items: end;        /* Pack items from the end */
+justify-items: flex-start; /* Pack flex items from the start */
+justify-items: flex-end;   /* Pack flex items from the end */
+justify-items: self-start;
+justify-items: self-end;
+justify-items: left;       /* Pack items from the left */
+justify-items: right;      /* Pack items from the right */
+
+/* Baseline alignment */
+justify-items: baseline;
+justify-items: first baseline;
+justify-items: last baseline;
+
+/* Overflow alignment (for positional alignment only) */
+justify-items: safe center;
+justify-items: unsafe center;
+
+/* Legacy alignment */
+justify-items: legacy right;
+justify-items: legacy left;
+justify-items: legacy center;
+
+/* Global values */
+justify-items: inherit;
+justify-items: initial;
+justify-items: unset;
+
+ +

此属性可以采用四种不同的形式之一：

+ +
    +
  • 关键词： 关键字 normal，auto，或 stretch 任选其一
    • +
  • 基线对齐：关键词 baseline ， 可选 first 或 last 之一为前缀
    • +
  • 位置对其：关键词 center，start，end，flex-start，flex-end，self-start，self-end，left 或 right 任选其一，可选 safe 或 unsafe 之一为前缀 
    • +
  • Legacy alignment: the legacy keyword, followed by one of left or right.
    • +
+ +

值

+ +
+
auto
+
使用的值是父元素的justify-items属性的值，除非该方框没有父元素，或者是绝对定位的，在这些情况下，auto 代表 normal。
+
normal
+
这个关键字的效果取决于我们所处的布局模式： +
    +
  • 在块级布局中，相当于是 start。
    • +
  • In absolutely-positioned layouts, the keyword behaved like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
    • +
  • In table cell layouts, this keyword has no meaning as this property is ignored.
    • +
  • In flexbox layouts, this keyword has no meaning as this property is ignored.
    • +
  • In grid layouts, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.
    • +
+
+
start
+
The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.
+
end
+
The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.
+
flex-start
+
For items that are not children of a flex container, this value is treated like start.
+
flex-end
+
For items that are not children of a flex container, this value is treated like end.
+
self-start
+
The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
+
self-end
+
The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
+
center
+
The items are packed flush to each other toward the center of the of the alignment container.
+
left
+
The items are packed flush to each other toward the left edge of the alignment container. If the property’s axis is not parallel with the inline axis, this value behaves like start.
+
right
+
The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property’s axis is not parallel with the inline axis, this value behaves like start.
+
baseline
+ first baseline
+ last baseline
+
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
+ The fallback alignment for first baseline is start, the one for last baseline is end.
+
stretch
+
If the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (or equivalent functionality), so that the combined size exactly fills the alignment container.
+
safe
+
If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start.
+
unsafe
+
Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.
+
legacy
+
Makes the value inherited by the box descendants. Note that if a descendant has a justify-self: auto value, the legacy keyword is not considered by the descend, only the left, right, or center value associated to it.
+
+ +

Formal syntax

+ +
{{CSSSyntax}}
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Box Alignment", "#propdef-justify-items", "justify-items")}}{{Spec2("CSS3 Box Alignment")}}Initial definition
+ +

{{CSSInfo}}

+ +

浏览器兼容性

+ + + +

Support in Flex layout

+ +

{{Compat("css.properties.justify-items.flex_context")}}

+ +

Support in Grid layout

+ +

{{Compat("css.properties.justify-items.grid_context")}}

+ +

另见

+ + diff --git a/files/zh-cn/web/css/justify-self/index.html b/files/zh-cn/web/css/justify-self/index.html new file mode 100644 index 0000000000..0fc7e658b5 --- /dev/null +++ b/files/zh-cn/web/css/justify-self/index.html @@ -0,0 +1,231 @@ +--- +title: justify-self +slug: Web/CSS/justify-self +tags: + - CSS + - CSS属性 + - CSS盒对齐 +translation_of: Web/CSS/justify-self +--- +
{{CSSRef}}
+ +

CSS justify-self 属性设置单个盒子在其布局容器适当轴中的对其方式。

+ +
{{EmbedInteractiveExample("pages/css/justify-self.html")}}
+ + + +

此属性的效果取决于我们所处的布局模式：

+ +
    +
  • 在块级布局中，它对齐一个项目在其包含块的内联轴上。
    • +
  • 对于绝对定位的元素，它对齐一个项目在其包含块的内联轴上，同时计算top，left，bottom与right的值。（原文：it aligns an item inside its containing block on the inline axis, accounting for the offset values of top, left, bottom, and right.）
    • +
  • 在表格布局中，这个属性被忽略（更多 关于块、绝对定位以及表格布局中的对齐方式）
    • +
  • 在弹性布局中，这个属性被忽略（更对 关于弹性布局中的对齐方式）
    • +
  • 在栅格布局中，它对齐一个元素到该元素所在的栅格区域的内联轴上。（更多 关于栅格布局中的对齐方式）
    • +
+ +

语法

+ +
/* 基础关键字 */
+justify-self: auto;
+justify-self: normal;
+justify-self: stretch;
+
+/* 位置对齐 */
+justify-self: center;     /* 在中间放置元素 */
+justify-self: start;      /* 在开始处放置元素 */
+justify-self: end;        /* 在结束处防止元素 */
+justify-self: flex-start; /* 与 'start' 等效。注意 justify-self 在 Flexbox 布局中被忽略。 */
+justify-self: flex-end;   /* 与 'end' 等效。注意 justify-self 在 Flexbox 布局中被忽略。 */
+justify-self: self-start;
+justify-self: self-end;
+justify-self: left;       /* 在左侧放置元素 */
+justify-self: right;      /* 在右侧放置元素 */
+
+/* 基线对齐 */
+justify-self: baseline;
+justify-self: first baseline;
+justify-self: last baseline;
+
+/* 溢出对齐 （只对位置对齐有效果）*/
+justify-self: safe center;
+justify-self: unsafe center;
+
+/* 全局关键字 */
+justify-self: inherit;
+justify-self: initial;
+justify-self: unset;
+
+ +

这个属性可以有三种不同的形式：

+ +
    +
  • 基本关键字： normal， auto，或者 stretch。
    • +
  • 基线对齐：baseline 关键字，加上可选的 first 或者 last。
    • +
  • 可定位对齐： +
      +
    • center， start， end， flex-start， flex-end， self-start， self-end， left，或者 right。
      • +
    • 加上可选的 safe 或者unsafe。
      • +
    +
    • +
+ +

Values

+ +
+
auto
+
该值使用其父级元素盒子的 justify-items 属性的值，除非它没有父级元素, 或者是绝对定位的，这些情况下，auto 代表了 normal。
+
normal
+
这个效果取决于我们所处的布局模式： +
    +
  • 在块级布局中，这个关键字是 start 的同义词。
    • +
  • 在绝对定位的布局中，在可置换绝对定位的盒子中，这个关键字表现的与 start 相似，在其他绝对定位的盒子中，其表现得与 stretch 相似。
    • +
  • 在表格布局中，由于这个属性被忽略所以这个关键字没有作用。
    • +
  • 在弹性布局中，由于这个属性被忽略所以这个关键字没有作用。
    • +
  • 在栅格布局中，这个关键字会导致类似于 stretch 的行为，除了具有高宽比或固有大小的盒子，它的行为类似于 start 。
    • +
+
+
start
+
项目被放置到适当的轴上，朝向对齐容器的起始边缘，彼此齐平。
+
end
+
项目被放置到适当的轴上，朝向对齐容器的末端边缘，彼此齐平。
+
flex-start
+
对于非弹性容器子元素的项目，这个值被视为 start 。
+
flex-end
+
对于非弹性容器子元素的项目，这个值被视为 end.
+
self-start
+
The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
+
self-end
+
The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
+
center
+
项目被放置在对齐容器的中心向彼此平齐。
+
left
+
项目在对齐容器的左边缘，并彼此对齐。如果属性的轴与内联轴不平行，则此值的行为类似于start 。
+
right
+
项目在对齐容器的右边缘，并彼此对齐。如果属性的轴与内联轴不平行，则此值的行为类似于 start 。
+
baseline
+ first baseline
+ last baseline
+
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
+ The fallback alignment for first baseline is start, the one for last baseline is end.
+
stretch
+
If the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (or equivalent functionality), so that the combined size exactly fills the alignment container.
+
safe
+
If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start.
+
unsafe
+
Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.
+
+ +

形式化定义

+ +

{{cssinfo}}

+ +

形式化语法

+ +
{{csssyntax}}
+ +

例子

+ +

简单演示

+ +

In the following example we have a simple 2 x 2 grid layout. Initially the grid container is given a justify-items value of stretch — the default — which causes the grid items to stretch across the entire width of their cells.

+ +

The second, third, and fourth grid items are then given different values of justify-self, to show how these override the justify-items value. These values cause the grid items to span only as wide as their content width, and align in different positions across their cells.

+ +

HTML

+ +
<article class="container">
+  <span>First child</span>
+  <span>Second child</span>
+  <span>Third child</span>
+  <span>Fourth child</span>
+</article>
+ +

CSS

+ +
html {
+  font-family: helvetica, arial, sans-serif;
+  letter-spacing: 1px;
+}
+
+article {
+  background-color: red;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-rows: 40px;
+  grid-gap: 10px;
+  width: 300px;
+  justify-items: stretch;
+}
+
+span:nth-child(2) {
+  justify-self: start;
+}
+
+span:nth-child(3) {
+justify-self: center;
+}
+
+span:nth-child(4) {
+justify-self: end;
+}
+
+article span {
+  background-color: black;
+  color: white;
+  margin: 1px;
+  text-align: center;
+}
+
+article, span {
+  padding: 10px;
+  border-radius: 7px;
+}
+
+article {
+  margin: 20px;
+}
+ +

结果

+ +

{{EmbedLiveSample('Simple_demonstration', '100%', 200)}}

+ +

标准

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Box Alignment", "#propdef-justify-self", "justify-self")}}{{Spec2("CSS3 Box Alignment")}}Initial definition
+ +

浏览器兼容性

+ + + +

弹性布局中的支持

+ +

{{Compat("css.properties.justify-self.flex_context")}}

+ +

栅格布局中的支持

+ +

{{Compat("css.properties.justify-self.grid_context")}}

+ +

参考

+ + diff --git a/files/zh-cn/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/zh-cn/web/css/layout_cookbook/breadcrumb_navigation/index.html new file mode 100644 index 0000000000..9d2b796e42 --- /dev/null +++ b/files/zh-cn/web/css/layout_cookbook/breadcrumb_navigation/index.html @@ -0,0 +1,50 @@ +--- +title: 面包屑导航 +slug: Web/CSS/Layout_cookbook/Breadcrumb_Navigation +translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation +--- +
{{CSSRef}}
+ +

面包屑导航通过提供返回起始页面的面包屑轨迹，帮助用户了解他们在网站中所处的位置。

+ +

Links displayed inline with separators

+ +

要求

+ +

这些项通常以内联方式显示，并带有分隔符，以指示各个页面之间的层次结构。

+ +

Recipe

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}

+ +
+

下载此节的示例

+
+ +

做出的选择

+ +

这种模式使用一个简单的 flex 布局摆布，展示了一行 CSS 如何为我们提供导航。分隔符是由 CSS 内容生成属性添加的，你也可以将其换成其他想要的分隔符（样式）。

+ +

无障碍访问问题

+ +

我使用了 aria-label 和 aria-current 属性来帮助用户理解这个导航的结构，以及当前页面在结构中的位置。 详情请参见相关链接。

+ +

浏览器兼容性

+ +

不同的布局方法，在各种浏览器上的支持情况也不尽相同。有关所使用属性的基本支持的详细信息，请参见下面的图表。

+ + + +

Flexbox

+ +

{{Compat("css.properties.flex")}}

+ +

另请参阅

+ + diff --git a/files/zh-cn/web/css/layout_cookbook/center_an_element/index.html b/files/zh-cn/web/css/layout_cookbook/center_an_element/index.html new file mode 100644 index 0000000000..bf6d5aa1da --- /dev/null +++ b/files/zh-cn/web/css/layout_cookbook/center_an_element/index.html @@ -0,0 +1,51 @@ +--- +title: 居中一个元素 +slug: Web/CSS/Layout_cookbook/Center_an_element +translation_of: Web/CSS/Layout_cookbook/Center_an_element +--- +
{{CSSRef}}
+ +

在这份指南中你将了解到把一个盒子居中放置在另一个之中的方法。在伸缩盒子模型(flexbox)出现之前，要做到同时垂直与水平居中是很困难的，而现在利用盒子对齐属性(Box Alignment)就很直截了当了。

+ +

an element centered inside a larger box

+ +

需求

+ +

把一个项目同时垂直与水平居中地放置在一个盒子中

+ +

指南

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}

+ +
+

下载这份示例

+
+ +

做出选择

+ +

要将一个盒子居中放置在另一个之中，我们需要让作为容器的盒子变成伸缩容器。再将 {{cssxref("align-items")}} 设置为 center 来实现块方向的轴(block axis)上的居中，并把 {{cssxref("justify-content")}} 设置为 center 来实现文字方向的轴(inline axis)上的居中。

+ +

将来我们可能不需要将父容器设置为伸缩容器就可以居中元素，因为此处使用的“盒子对齐”属性也被指定为适用于块布局。然而，当前在块布局上对盒子对齐属性的支持仍然是有限的，因此目前使用伸缩盒子来实现居中还是最可靠的方法。

+ +

浏览器兼容性

+ +

各种布局方法具有不同的浏览器支持。有关所使用属性的基本支持的详细信息，请参见下表

+ + + +

align-items

+ +

{{Compat("css.properties.align-items")}}

+ +

justify-content

+ +

{{Compat("css.properties.justify-content")}}

+ +

MDN上相关的资源

+ + diff --git a/files/zh-cn/web/css/layout_cookbook/column_layouts/index.html b/files/zh-cn/web/css/layout_cookbook/column_layouts/index.html new file mode 100644 index 0000000000..f402489865 --- /dev/null +++ b/files/zh-cn/web/css/layout_cookbook/column_layouts/index.html @@ -0,0 +1,140 @@ +--- +title: Column layouts +slug: Web/CSS/Layout_cookbook/Column_layouts +translation_of: Web/CSS/Layout_cookbook/Column_layouts +--- +
{{CSSRef}}
+ +
+ +
你可能经常需要创建一个包含几个栏目的布局，css提供了几个方法来实现它。使用Grid, Flexbox 或者 Multi-column layout 都取决于你想要实现什么目标，在这篇recipe中我们会探讨这些内容
+ +
+ +
three different styles of layouts which have two columns in the container.
+ +

Requirements

+ +

你也许会为你的栏目实现多种设计样式：

+ +
    +
  • 连续的内容线，分成报纸式的专栏
    • +
  • 被划分成几个高度相等的栏目的一行
    • +
  • 按行和列排列的多行列
    • +
+ +

The recipes

+ +

为了达到你的需要你需要选择不同的布局方式

+ +

A continuous thread of content — multi-column layout

+ +

If you create columns using multi-column layout your text will remain as a continuous stream filling each column in turn. The columns must all be the same size, and you are unable to target an individual column or the content of an individual column.

+ +

如果你使用多列布局来创建列，则文本会以连续流的形式依次填满每个列。这些列必须大小相同，并且你不能够针对单个列或者单个列的内容

+ +

You can control the gaps between columns with the {{cssxref("column-gap")}} property, and add a rule between columns using {{cssxref("column-rule")}}.

+ +

你可以使用{{cssxref("column-gap")}} 控制列之间的距离，并且使用{{cssxref("column-rule")}}.增加列之间的规则

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}

+ +
+

Download this example

+
+ +

在以下情况使用多列布局：

+ +
    +
  • 你想要你的文本看起来想报纸那种排版布局。
    • +
  • 您有一组要分成列的小项目。
    • +
  • 你不需要单独为指定的列写样式。
    • +
+ +

A single row of items with equal heights — flexbox

+ +

Flexbox can be used to break content into columns by setting {{cssxref("flex-direction")}} to row, however flexbox targets the elements inside the flex container and will place each direct child into a new column. This is a different behavior to what you saw with multicol.

+ +

Flexbox通过设置 row的{{cssxref("flex-direction")}} ，可以用于将内容分成列， 然而，flexbox的目标是flex容器内的元素，并将把每个直接的子元素放到一个新列中，这是与multicol不同的地方。

+ +

There is currently no way to add a rule between flex items, and browser support for the {{cssxref("column-gap")}} and {{cssxref("row-gap")}} properties is limited. Therefore to create gaps between items use a margin.

+ +

目前没有办法可以在flex的item中添加规则，而且浏览器对{{cssxref("column-gap")}} 和 {{cssxref("row-gap")}}的支持是有限的，因此使用margin属性来创建item之间的间距

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}

+ +
+

Download this example

+
+ +

Flexbox can also be used to create layouts where the flex items wrap onto new rows, by setting the {{cssxref("flex-wrap")}} property on the container to wrap. These new flex lines will distribute space along that line only — the items in the new line will not line up with items in the line above, as you'll see in the example below. This is why flexbox is described as one-dimensional. It is designed for controlling layout as a row or a column, but not both at the same time.

+ +

Flexbox还可以被用来创建 flex items 自动换行的布局，通过给 flex container 设置  {{cssxref("flex-wrap")}} 属性为wrap. 这些新的flex行只会沿该行分配空间——新行中的项不会与上面行中的项对齐,你可以在下面的例子中看到。这就是为什么flexbox被描述为一维。 他是为了将布局控制为行或列，但不是同时控制行和列。

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}

+ +
+

Download this example

+
+ +

Use flexbox:

+ +
    +
  • For single rows or columns of items. 设置一行或者一列中的items
    • +
  • When you want to do alignment on the cross axis after laying out your items. 当你想在横轴上对齐您的items
    • +
  • When you are happy for wrapped items to share out space along their line only and not line up with items in other lines.
    • +
+ +

Lining items up in rows and columns — grid layout

+ +

If what you want is a layout where items line up in rows and columns then you should choose CSS Grid Layout. Grid Layout works on the direct children of the grid container in a similar way to the manner in which flexbox works on the direct children of the flex container, however with CSS Grid you can line your items up in rows and columns — it is described as two-dimensional.

+ +

如果你想要items在行和列进行布局，你应该选择Grid Layout. Grid Layout 作用于 grid container 的 直接子元素类似于 flexbox。 但是你可以在行和列两方面来控制他（flex只能在行或者列）。

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}

+ +
+

Download this example

+
+ +

Use Grid:

+ +
    +
  • For multiple rows or columns of items. 
    • +
  • When you want to be able to align the items on the block and inline axes.
    • +
  • When you want items to line up in rows and columns.
    • +
+ +

Browser compatibility

+ +

The various layout methods have different browser support. See the charts below for details on basic support for the properties used.

+ + + +

column-width

+ +

{{Compat("css.properties.column-width")}}

+ +

column-rule

+ +

{{Compat("css.properties.column-rule")}}

+ +

flex

+ +

{{Compat("css.properties.flex")}}

+ +

flex-wrap

+ +

{{Compat("css.properties.flex-wrap")}}

+ +

grid-template-columns

+ +

{{Compat("css.properties.grid-template-columns")}}

+ +

Resources on MDN

+ + diff --git a/files/zh-cn/web/css/layout_cookbook/contribute_a_recipe/index.html b/files/zh-cn/web/css/layout_cookbook/contribute_a_recipe/index.html new file mode 100644 index 0000000000..37ceeddd92 --- /dev/null +++ b/files/zh-cn/web/css/layout_cookbook/contribute_a_recipe/index.html @@ -0,0 +1,91 @@ +--- +title: Contribute a recipe +slug: Web/CSS/Layout_cookbook/Contribute_a_recipe +translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe +--- +
{{CSSRef}}
+ +

如果您愿意为 Layout Cookbook 贡献示例文件，那么本页将通过阐释步骤指导您发布示例。

+ +

好的 recipe 是怎样的?

+ +

任何有用的 web 设计模式的最简版本。您 CSS 文件中的每一行代码都应该有助于演示该模式， 省去无用的部分就是为了能让示例显得完美。这种想法就是，某个人既能将这种模式应用在网站中，又可以保持自己的风格。

+ +

发布 recipe 的步骤

+ +

一份 recipe 包括以下内容：

+ +
    +
  1. 一个动态的示例，存储在 CSS Examples GitHub repo 之上。
    2. +
  2. 这份示例的可供下载版本，同样也存储在 CSS Examples repo 之上。
    3. +
  3. 该网站的某个页面在 CSS layout cookbook 上应详细说明： +
      +
    1. 要求
      2. +
    2. recipe
      3. +
    3. 做出的选择
      4. +
    4. 任何有用的反馈或供选择的方法
      5. +
    5. 任何无障碍访问问题
      6. +
    6. 浏览器兼容性
      7. +
    7. 其他资源
      8. +
    +
    4. +
+ +

1. 建立自己的模式

+ +

在将示例转换为 recipe 之前，先将您的模式创建成为一个简单的 HTML 页面。想想看您要展示的是什么，并使这个想法尽可能简单。避免使用特殊的 CSS 约定（例如 BEM），因为并非每个人都熟悉这些约定，反而会使他们将事情做得看起来要比预期中的更复杂。

+ +

确保 HTML 和 CSS 有效，并将其在一种以上的浏览器上进行测试。如果您使用的 CSS 属性并非广受支持，那也没关系！您可以在创建页面时包含浏览器支持信息。在某些情况下，创建示例的第二个版本可能会有帮助，其中包括回退支持。

+ +

2. 创建一个动态示例

+ +

The live examples that you can see on cookbook pages and elsewhere on MDN allow visitors to play with the code and change relevant parts without being overwhelmed with all of the code needed. You recipe will be demonstrated by way of one or more examples.

+ +

Fork the CSS Examples repo and then take a look in the css-cookbook folder. There is a cookbook-template.html file you can copy as a starting point. Save this in the css-cookbook directory with a name that makes sense for your pattern. The template is commented to help you add the various parts to the right place.

+ +

The important parts of this are as follows.

+ +

There is a stylesheet for styles for the editor panels, and some basic body styling, and a JavaScript file included for the editor functionality. Leave these files as they are.

+ +

There are two style blocks in the head. The first are for things that a visitor to the page does not need to change to play with the example. The second is for any of the items they might want to play with in the live example. We typically add all of our CSS from like example in the first block, then choose which sets of rules we need to move down to the second block. The rules in the second block should be those that are fundamental to the pattern, perhaps those where a user could make a change to a CSS value and see the pattern update.

+ +

You need to add the HTML for your component twice. First inside the section with a class of preview, then inside the textarea playable-html.

+ +

Your editable CSS, from the second block in the head, also needs to be copied into the playable-css section.

+ +

A simple worked example is center.html, which is embedded on the page Center an element. You can use this to see how to add the various bits correctly.

+ +

If you have forked the repo and therefore have our CSS and JavaScript files alongside your example, if you open up your live example in the browser you should see everything working exactly as it will when included in a page.

+ +

Useful tips

+ +
    +
  1. Do not indent the CSS and HTML inside the textareas; instead bump it up against the start of the lines. This will look better when it is rendered.
    2. +
  2. If you have any required images, pop them into the directory with the examples. Or you are welcome to use any already there.
    3. +
  3. You can adjust the height of the textareas by changing the height in the inline styles.
    4. +
+ +

3. 创建一份可供下载的版本

+ +

As the examples include all of our live example code, we want to offer visitors a simple example without all of that included. Make a copy of your live example with --download appended. For example, center.html, has a download version named center--download.html. This file will be similar to your initial example. It should be a basic version of your pattern as a single HTML page. It can be handy to include the body CSS rules that are in our included stylesheet, if you take a look at cookbook-template--download.html, these are included as a starting point.

+ +

4. 用您的示例发起 Pull 请求

+ +

Make a PR on the CSS Examples repo. This way we can help you with any changes to the example that may be needed before you create your page, plus the example will need to be live to be included some it makes sense to create it first. Include in your PR an explanation of the pattern and what you are demonstrating.

+ +

5. 创建您的页面

+ +

Once your example is merged you can create your page. You will need an MDN account to do so with page creation permissions, and you can then create the page as a subpage of the CSS Cookbook page. There is a template for Cookbook pages here.

+ +

The template explains what should be part of each section, and you can refer to other cookbook examples for more help. If you click to edit any of those pages then you will be able to see things such as the macros used to embed compat data, and live examples.

+ +

If you need general guidance on using the MDN wiki, see the help pages available here.

+ +

If you need to ask any questions, or want someone to take a look at your page then the MDN Discourse forum is a good place to do this, or chat with us on Matrix.

+ +

See also

+ + diff --git a/files/zh-cn/web/css/layout_cookbook/index.html b/files/zh-cn/web/css/layout_cookbook/index.html new file mode 100644 index 0000000000..f8c70e480b --- /dev/null +++ b/files/zh-cn/web/css/layout_cookbook/index.html @@ -0,0 +1,101 @@ +--- +title: CSS Layout cookbook +slug: Web/CSS/Layout_cookbook +tags: + - CSS + - Layout + - NeedsTranslation + - TopicStub + - cookbook + - recipes +translation_of: Web/CSS/Layout_cookbook +--- +
{{CSSRef}}
+ +
CSS layout cookbook 这本书旨在汇集常见的布局样式，这些布局你可能在自己的网站中会用到。这些布局样式不仅仅可以可以用来开始一个项目，而且提供了具体的使用方法，作为开发人员，你可以做出合适的选择。
+ +
+ +
+

Note: 如果你是首次接触CSS布局，你可以先看一下CSS layout learning module，书中的基础知识有利于你更好的使用本书中的布局样式。

+
+ +

布局样式

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecipeDescriptionLayout Methods
Media objects一个两栏的框，一边是图片，另一边是描述性文字，例如facebook上的帖子或推特CSS Grid, {{cssxref("float")}} fallback, {{cssxref("fit-content")}} sizing
Columns +

在什么时候选择multi-column layout,flexbox或者grid

+ 		CSS Grid, Multicol, Flexbox
Center an element +

如何水平或者垂直居中一个item

+ 		Flexbox, Box Alignment
Sticky footers +

创建一个页脚，当内容较短时，该页脚位于容器或视图的底部

+ 		CSS Grid, Flexbox
Split navigation +

一种导航模式，里面的一些links显示的区分于其他

+ 		Flexbox, {{cssxref("margin")}}
Breadcrumb navigation +

创建链接列表，允许访问者在页面层次结构中向上导航

+ 		Flexbox
List group with badges +

一个带有count计数的徽章的items列表

+ 		Flexbox, Box Alignment
Pagination链接到内容页面 (比如搜索结果).Flexbox, Box Alignment
Card卡片组件，显示在卡片网格中Grid Layout
Grid wrapperFor aligning grid content within a central wrapper, while also allowing items to break out.CSS Grid
+ +

Contribute a Recipe

+ +

As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. See this page for a template and guidelines for writing your own example.

diff --git a/files/zh-cn/web/css/layout_cookbook/split_navigation/index.html b/files/zh-cn/web/css/layout_cookbook/split_navigation/index.html new file mode 100644 index 0000000000..eb710301fa --- /dev/null +++ b/files/zh-cn/web/css/layout_cookbook/split_navigation/index.html @@ -0,0 +1,48 @@ +--- +title: 分块导航 +slug: Web/CSS/Layout_cookbook/Split_Navigation +translation_of: Web/CSS/Layout_cookbook/Split_Navigation +--- +
{{CSSRef}}
+ +

一种导航样式，其中一个或多个元素与其余导航项之间是分离的。

+ +

Items separated into two groups.

+ +

需求

+ +

一种常见的导航样式是将一个元素推离其他元素。我们可以使用伸缩盒子(Flexbox)实现这一点，而不需要将两组项目放入两个单独的伸缩容器(flex containers)中。

+ +

指南

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}

+ +
+

下载这份示例

+
+ +

做出选择

+ +

这一样式结合了自动外边距(auto margins)与伸缩盒子两种方法来把项目分离开。

+ +

自动外边距会吸收其应用方向上的所有可用空间。这就是利用自动外边距实现居中的工作原理—— 块的两侧都有一个试图占用所有空间的空白，从而将块推到了中间。

+ +

在这种情况下，左侧的自动边距会占用所有可用空间，并将项目推到右侧。您可以将类push应用到列表中的任何项目上。

+ +

浏览器兼容性

+ +

各种布局方法具有不同的浏览器支持。有关所使用属性的基本支持的详细信息，请参见下表。

+ + + +

Flexbox

+ +

{{Compat("css.properties.flex")}}

+ +

参见

+ + diff --git "a/files/zh-cn/web/css/layout_cookbook/\345\215\241\347\211\207/index.html" "b/files/zh-cn/web/css/layout_cookbook/\345\215\241\347\211\207/index.html" new file mode 100644 index 0000000000..260ef3ba54 --- /dev/null +++ "b/files/zh-cn/web/css/layout_cookbook/\345\215\241\347\211\207/index.html" @@ -0,0 +1,82 @@ +--- +title: 卡片 +slug: Web/CSS/Layout_cookbook/卡片 +translation_of: Web/CSS/Layout_cookbook/Card +--- +

{{CSSRef}}

+ +

这个模式是带有页脚选项的卡片组件列表。

+ +

+ +

Three card components in a row

+ +

要求

+ +

卡片组件可以包含各种内容，包括一个头部(heading)，图片，内容和一个页脚(footer)

+ +

每个卡片组件应有相同的高度，并且页脚应该在卡片组件的底部

+ +

当添加到卡片组中时，卡片上下应对齐。

+ +

使用指南

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}

+ +
+

Download this example

+
+ +

所选方案

+ +

卡片布局使用 CSS 网格布局(CSS Grid Layout) despite being a single dimensional layout, as it enables the use of content sizing for the grid tracks. When setting up the single column grid I use the following:

+ +
.card {
+  display: grid;
+  grid-template-rows: max-content 200px 1fr;
+}
+ +

The heading track is set to {{cssxref("max-content")}}, which prevents it from stretching. I have decided that I want my image to live within a track that is 200 pixels tall. I then set the next track — which is where the content lives — to 1fr. This means it will take up any additional space. 

+ +

If the track does have a footer it will be auto-sized, as rows created in the implicit grid are auto-sized by default. Therefore this will fit the content added to it.

+ +
+

Note: The various elements in separate cards do not align with each other, as each card is an independent grid. The proposed subgrid feature of Grid Level 2 would give a solution to this issue.

+
+ +

Useful fallbacks or alternative methods

+ +

Flexbox could be used to lay out the card, in which case you should make the content area grow, and other items not grow. This would be a reasonable way to lay out the card, although I have a slight preference for being able to control the tracks from the container rather than needing to add rules to the items.

+ +

For the overall layout you could use flexbox, however this will result in cards stretching over the final flex row where there are fewer than can fit in the rows above. Alternatively you could use CSS multi-col — this would cause the cards to lay out down the columns, which may or may not be a problem.

+ +

See the columns recipe for demonstrations of each of these layout methods.

+ +

Accessibility concerns

+ +

Depending on the content of your card there may be things you could, or should do to enhance accessibility. See Inclusive Components: Card by Heydon Pickering, for a very detailed explanation of these issues.

+ +

Browser compatibility

+ +

The various layout methods have different browser support. See the charts below for details on basic support for the properties used.

+ + + +

grid-template-columns

+ +

{{Compat("css.properties.grid-template-columns")}}

+ +

grid-template-rows

+ +

{{Compat("css.properties.grid-template-rows")}}

+ + + +

See also

+ +
    +
  • {{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("grid-gap")}}
    • +
  • Inclusive Components: Card
    • +
diff --git "a/files/zh-cn/web/css/layout_cookbook/\345\252\222\344\275\223\345\257\271\350\261\241/index.html" "b/files/zh-cn/web/css/layout_cookbook/\345\252\222\344\275\223\345\257\271\350\261\241/index.html" new file mode 100644 index 0000000000..382e4bacce --- /dev/null +++ "b/files/zh-cn/web/css/layout_cookbook/\345\252\222\344\275\223\345\257\271\350\261\241/index.html" @@ -0,0 +1,86 @@ +--- +title: '指南: 媒体对象' +slug: Web/CSS/Layout_cookbook/媒体对象 +tags: + - 媒体对象 + - 布局 + - 指南 + - 浮动 + - 网格 +translation_of: Web/CSS/Layout_cookbook/Media_objects +--- +
{{CSSRef}}
+ +

媒体对象是web上随处可见的一种模式。它由Nicole Sullivan命名，表示一种一侧是图片并且另一侧是描述性的文字的两列盒子，比如一篇facebook帖子或者tweet。

+ +

+ +

要求

+ +

媒体对象模式需要以下特性的一些或者全部：

+ +
    +
  • 在移动设备上被堆叠，在桌面设备上显示两列
    • +
  • 图片可以在左边，也可以在右边
    • +
  • 图片可以是小图，也可以是大图
    • +
  • 媒体对象可以被嵌套
    • +
  • 无论哪边更高，媒体对象应该清除内容
    • +
+ +

使用指南

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}

+ +
+

Download this example

+
+ +

做出选择

+ +

我选择使用Grid Layout实现媒体对象，因为它可以让我在我需要的时候控制两个维度的布局。这意味着当我们有一个页脚（footer）的时候，上面的内容很短，页脚可以被推到媒体对象的底部。

+ +

另一个使用网格布局（Grid Layout）的原因是为了可以使用{{cssxref("fit-content")}}图片的追踪（track）大小。通过使用 最大尺寸是200像素的fit-content ，当我们有一个小图片比如icon的时候，track仅仅得到和image的尺寸一样的大小（max-content 大小）。如果图片更大，track在200像素的时候停止增长，因为图片应用了{{cssxref("max-width ")}}为100%。同样，它会缩小以适应列内部的尺寸。

+ +

通过使用{{cssxref("grid-template-areas")}} 来实现布局，我可以看到CSS中的这个模式。我定义我的网格，其并且设置最大宽度（max-width）为500像素，因此在较小的设备上媒体对象会被堆叠起来。

+ +

模式的一个选项是翻转它将图片切换到另一边——这通过添加media-flip 类来实现，它定义了一个翻转的网格模板所以布局被镜像了。

+ +

当我们在另一个媒体对象之中嵌套一个媒体对象，我么你需要将它放到常规布局的第二个track中，当翻转时放到第一个track中

+ +

回退方案

+ +

对于这种模式有很多种可能的回退方案，取决于你希望支持的浏览器。一个比较号的方案是将图片浮动到左边，并且为盒子添加clearfix来确保它包含浮动元素。

+ +

{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}

+ +
+

Download this example

+
+ +

一旦浮动元素成为网格项，浮动将不再被应用到网格上，因此你不需要做任何特殊的事情来清楚浮动。

+ +

你需要做的事情是移除应用到这些items的任何边界，以及我们在一个网格上下文中不需要的任何宽度（在网格中我们有{{cssxref("gap")}}属性来控制它，并且track控制了尺寸）。

+ +

MDN上相关的资源

+ + + +

浏览器兼容性

+ +

.各种各样的布局方法有不同的浏览器支持。查看下面的图表得到属性的基本支持的细节。

+ +

这个页面中的兼容性表格由结构数据生成。如果你想对数据做贡献，请查看 https://github.com/mdn/browser-compat-data 并且给我们发送一个pull request。

+ +

grid-template-areas

+ +

{{Compat("css.properties.grid-template-areas")}}

+ +

float

+ +

{{Compat("css.properties.float")}}

diff --git a/files/zh-cn/web/css/layout_mode/index.html b/files/zh-cn/web/css/layout_mode/index.html new file mode 100644 index 0000000000..8bc72c3212 --- /dev/null +++ b/files/zh-cn/web/css/layout_mode/index.html @@ -0,0 +1,27 @@ +--- +title: 布局模式 +slug: Web/CSS/Layout_mode +tags: + - CSS +translation_of: Web/CSS/Layout_mode +--- +

 CSS 布局模式，有时简称为布局，是一种基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法。有以下几种形式：

+ +
    +
  • 块布局：用来布置文件。块布局包含以文档为中心的功能，例如 浮动元素或将其放置在多列上的功能。
    • +
  • 行内布局：用来布置文本。
    • +
  • 表格布局：用来布置表格。
    • +
  • 定位布局：用来对那些与其他元素无交互的定位元素进行布置 。
    • +
  • 弹性盒子布局：用来布置那些可以顺利调整大小的复杂页面。{{experimental_inline}}
    • +
  • 网格布局：用来布置那些与一个固定网格相关的元素。{{experimental_inline}}
    • +
+ +
+

注意: 并非所有 CSS 属性 适用于所有布局模式。大多数属性适用于一到两种布局模式，如果将属性设置在参与其他（原文another,指三者或三者以上。）布局模式的元素上则会不起作用。

+
+ +

也可以看看

+ +
    +
  • {{CSS_key_concepts}}
    • +
diff --git a/files/zh-cn/web/css/left/index.html b/files/zh-cn/web/css/left/index.html new file mode 100644 index 0000000000..376c0b8168 --- /dev/null +++ b/files/zh-cn/web/css/left/index.html @@ -0,0 +1,210 @@ +--- +title: left +slug: Web/CSS/left +tags: + - CSS + - CSS Positioning + - CSS Property + - Reference +translation_of: Web/CSS/left +--- +
{{CSSRef}}
+ +

CSS left属性定义了定位元素的左外边距边界与其包含块左边界之间的偏移，非定位元素设置此属性无效。

+ +
/* <length> values */
+left: 3px;
+left: 2.4em;
+
+/* <percentage>s of the width of the containing block */
+left: 10%;
+
+/* Keyword value */
+left: auto;
+
+/* Global values */
+left: inherit;
+left: initial;
+left: unset;
+
+ +

left的效果取决于元素的position属性：

+ +
    +
  • 当position设置为absolute或fixed时，left属性指定了定位元素左外边距边界与其包含块左边界之间的偏移。
    • +
  • 当position设置为relative时，left属性指定了元素的左边界离开其正常位置的偏移。
    • +
  • 当position设置为sticky时，如果元素在viewport里面，left属性的效果和position为relative等同；如果元素在viewport外面，left属性的效果和position为fixed等同。
    • +
  • 当position设置为static时，left属性无效。
    • +
+ +

当left和{{cssxref("right")}}​​​​​​同时指定时，元素的位置会被重复指定。当容器是从左到右时，left的值会被优先设定；当容器是从右到左时，right的值会被优先设定。

+ +

{{cssinfo}}

+ +

语法

+ +

值

+ +
+
{{cssxref("<length>")}}
+
可以是负的，正的 或者 null {{cssxref("<length>")}} 表示: +
    +
  • 对于绝对定位的元素，元素左外边距边界与其包含块左边界之间的偏移。
    • +
  • 对于相对定位定位的元素，元素的左边界离开其正常位置的偏移。
    • +
+
+
{{cssxref("<percentage>")}}
+
代表元素包含块的宽度的百分比 {{cssxref("<percentage>")}}。
+
auto
+
这个关键字表示: +
    +
  • 对于绝对定位元素，元素将忽略此属性而以{{ Cssxref("right") }}属性为准，如果此时设置width: auto，将基于内容需要的宽度设置宽度；如果right也为auto的话，元素的水平位置就是它假如作为静态(即static)元素时该在的位置。
    • +
  • 对于相对定位元素，元素相对正常位置的偏移量将基于{{ Cssxref("right") }}属性；如果right也为auto的话，元素将不会有偏移。
    • +
+
+
inherit
+
这个关键字表示该值与其父元素 (可能不是它的包含块) 的计算值相同。对这个计算值的处理将和它原本为 {{cssxref("<length>")}}， {{cssxref("<percentage>")}} 或 auto 一样。
+
+ +

常用语法

+ +
{{csssyntax}}
+ +

示例

+ +

CSS

+ +
#wrap {
+  width: 700px;
+  margin: 0 auto;
+  background: #5C5C5C;
+}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: pre-line;
+  word-wrap: break-word;
+}
+
+#example_1 {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  background-color: #D8F5FF;
+}
+
+#example_2 {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 0;
+  right: 0;
+  background-color: #C1FFDB;
+
+}
+#example_3 {
+  width: 600px;
+  height: 400px;
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background-color: #FFD7C2;
+}
+
+#example_4 {
+  width:200px;
+  height:200px;
+  position:absolute;
+  bottom:10px;
+  right:20px;
+  background-color:#FFC7E4;
+}
+ +

HTML

+ +
<div id="wrap">
+  <div id="example_1">
+    <pre>
+      position: absolute;
+      left: 20px;
+      top: 20px;
+    </pre>
+    <p>The only containing element for this div is the main window, so it positions itself in relation to it.</p>
+  </div>
+
+  <div id="example_2">
+    <pre>
+      position: relative;
+      top: 0;
+      right: 0;
+    </pre>
+    <p>Relative position in relation to its siblings.</p>
+  </div>
+
+  <div id="example_3">
+    <pre>
+      float: right;
+      position: relative;
+      top: 20px;
+      left: 20px;
+    </pre>
+    <p>Relative to its sibling div above, but removed from flow of content.</p>
+
+    <div id="example_4">
+      <pre>
+        position: absolute;
+        bottom: 10px;
+        right: 20px;
+      </pre>
+      <p>Absolute position inside of a parent with relative position</p>
+    </div>
+  </div>
+</div>
+ +

案例

+ +

{{EmbedLiveSample('示例',1200,650)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'left')}}{{Spec2('CSS3 Transitions')}}Defines left as animatable.
{{SpecName('CSS3 Positioning', '#propdef-left', 'left')}}{{Spec2('CSS3 Positioning')}}Adds behavior for sticky positioning.
{{SpecName('CSS2.1', 'visuren.html#propdef-left', 'left')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

浏览器兼容

+ + + +

{{Compat("css.properties.left")}}

+ +

参见

+ +
    +
  • {{cssxref("position")}}, {{cssxref("right")}}, {{cssxref("top")}}, {{cssxref("bottom")}}
    • +
diff --git a/files/zh-cn/web/css/length-percentage/index.html b/files/zh-cn/web/css/length-percentage/index.html new file mode 100644 index 0000000000..66dfda6845 --- /dev/null +++ b/files/zh-cn/web/css/length-percentage/index.html @@ -0,0 +1,52 @@ +--- +title: +slug: Web/CSS/length-percentage +translation_of: Web/CSS/length-percentage +--- +
{{CSSRef}}
+ +

The <length-percentage> CSS data type represents a value that can be either a {{Cssxref("length")}} or a {{Cssxref("percentage")}}.
+ The <length-percentage> CSS数据类型表示一个值，该值可以是<length>或<percentage>。

+ +

Syntax

+ +

Refer to the documentation for {{Cssxref("length")}} and {{Cssxref("percentage")}} for details of the individual syntaxes allowed by this type.

+ +

Use in calc()

+ +

Where a <length-percentage> is specified as an allowable type, this means that the percentage resolves to a length and therefore can be used in a {{cssxref("calc", "calc()")}} expression. Therefore, all of the following values are acceptable for {{cssxref("width")}}:

+ +
width: 200px;
+width: 20%;
+width: calc(100% - 200px);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Values', '#mixed-percentages', '<length-percentage>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#mixed-percentages', '<length-percentage>')}}{{Spec2('CSS3 Values')}}Defines <length-percentage>. Adds calc()
+ +

Browser compatibility

+ + + +

{{Compat("css.types.length-percentage")}}

diff --git a/files/zh-cn/web/css/length/index.html b/files/zh-cn/web/css/length/index.html new file mode 100644 index 0000000000..000b9dde4d --- /dev/null +++ b/files/zh-cn/web/css/length/index.html @@ -0,0 +1,270 @@ +--- +title: +slug: Web/CSS/length +tags: + - CSS + - Web + - 参考 + - 层叠样式表 + - 布局 + - 长度 +translation_of: Web/CSS/length +--- +
{{CSSRef}}
+ +

长度 <length> 是用于表示距离尺寸的 CSS 数据类型。许多 CSS 属性会用到长度，比如 {{Cssxref("width")}}、{{Cssxref("margin")}}、{{Cssxref("padding")}}、{{Cssxref("font-size")}}、{{Cssxref("border-width")}} 和 {{Cssxref("text-shadow")}}。

+ +
+

注意：虽然 {{cssxref("<percentage>")}} 值也是 CSS 维度，并且可以在接受 <length> 值的某些相同属性中使用，但它们本身不是 <length> 值。具体请参阅{{cssxref("<length-percentage>")}}。

+
+ +

语法

+ +

<length> 数据类型由一个 {{cssxref("<number>")}} 和一个长度单位构成。 与所有 CSS 维度一样，单位的字面值与数字之间没有空格。 数字为 0 时，长度单位是可选的。

+ +
+

有些属性支持使用负数的长度值, 而有些不支持

+
+ +

单位

+ +

相对长度单位

+ +

相对长度代表着以其它距离为单位的一种尺寸。这个单位可以是指定字符的大小，行高，或者是 {{glossary("viewport")}} 的大小。

+ +
字体相对长度
+ +

字体的相对长度指的是根据一个特定字符的大小或当前字符所在元素的父元素所定义的字符大小来定义长度值。

+ +
+

注意: 这些相对单位, 尤其是 em 和 rem, 经常被用于满足即使用户更改字体大小，也可以保持页面的垂直阅读节奏可拓展布局中

+
+ +
+
cap {{experimental_inline}}
+
表示元素字体 {{Cssxref("font")}} 的“上限高度”（cap height，大写字母的标称高度（nominal height））。
+
ch
+
+

这一单位代表元素所用字体 {{Cssxref("font")}} 中“0”这一字形的宽度（"0"，Unicode字符U+0030），更准确地说，是“0”这一字形的预测尺寸（advance measure）。

+ +

如果无法确定“ 0”字形的大小，则必须假定其宽为 0.5em，高为 1em。

+
+
em
+
相对长度单位，这个单位表示元素的 {{Cssxref("font-size")}} 的计算值。如果用在{{ Cssxref("font-size") }} 属性本身，它则表示元素继承的 font-size 值。
+
ex
+
这个单位表示元素{{Cssxref("font")}}的 x-height 。在含有“X”字母的字体中，它是该字体的小写字母的高度；对于很多字体来说，1ex ≈ 0.5em。
+
ic {{experimental_inline}}
+
等于在用于渲染的字体中找到的“水”（CJK 表意文字 "水"，U + 6C34）字形的使用预先测量（used advance measure）。
+
lh {{experimental_inline}}
+
等于使用它的元素的 {{Cssxref("line-height")}} 属性的计算值，转换为绝对长度。
+
rem
+
这个单位代表根元素（通常为{{HTMLElement("html")}} 元素）的 {{Cssxref("font-size")}} 大小。当用在根元素的 {{Cssxref("font-size")}} 上面时 ，它代表了它的初始值。
+
rlh {{experimental_inline}}
+
等于根元素行高 {{Cssxref("line-height")}} 的计算值。当用于设置根元素的行高 {{Cssxref("line-height")}} 或是字体大小 {{Cssxref("font-size")}} 时，该rlh指的是根元素行高 {{Cssxref("line-height")}} 或字体大小 {{Cssxref("font-size")}} 的初始值。
+
+ +
视口(Viewport)比例的长度
+ +

视口百分比长度定义相对于 {{glossary("viewport")}} 的大小的 <length> 值，即文档的可见部分。视口长度在 {{cssxref("@page")}} 声明块中无效。

+ +
+
vh
+
视口的初始包含块的高度的 1%。
+
vw
+
视口的初始包含块的宽度的 1%。
+
vi{{experimental_inline}}
+
等于初始包含块大小的 1%，在根元素的行内轴方向上。
+
vb{{experimental_inline}}
+
等于初始包含块大小的 1%，在根元素的区块轴方向上。
+
vmin
+
视口高度 vw 和宽度 vh 两者之间的最小值。
+
vmax
+
视口高度 vw 和宽度 vh 两者之间的最大值。
+
+ +

绝对长度单位

+ +

当输出介质的物理性质已知时，如用于打印布局，绝对长度单位代表一个物理度量单位。这是通过：将一个单元锚定到一个物理单元，并将其定义为相对于它的另一个，来实现的。对于低分辨率的设备（如屏幕），高分辨率设备（如打印机），该锚定是不同的。

+ +

对于低 dpi 设备，单位 px 表示物理参考像素;其他单位是相对于它定义的。因此，1 in 定义为 96px，等于 72pt。此定义的后果是，在此类设备上，以英寸（in）、厘米（cm）或 毫米（mm）表示的尺寸不需要与同名的物理单位的大小相匹配。
+
+ 对于高 dpi 设备，英寸（in）、厘米（cm）和毫米（mm）与物理设备相同。因此，px 单位是相对于它们定义的 （1/96 of 1 inch）。

+ +
+

注意：很多用户选择增加用户代理 {{glossary("user agent")}} 的字体大小以提高文本可读性。因为绝对长度是固定值, 无法根据用户的设置进行缩放, 因此会降低页面友好性，因此在设置字体大小 font-size 相关的长度值时，最好优先选择使用相对长度单位，比如 em 或 rem。

+ +

译者注：一些浏览器还支持设置最低字体大小。常见的最低字体大小限制为 9px 到 12px，

+
+ +
+
px
+
一像素（pixel）。对于普通的屏幕，通常是一个设备像素（点）。
+ 对于打印机和高分辨率屏幕，一个 CSS 像素往往占多个设备像素。一般来说，每英寸的像素的数量保持在 96 左右， 1px = 1in 的 96 分之一。
+
cm
+
一厘米。 1cm = 96px / 2.54。
+
mm
+
一毫米。 1mm = 1/10 * 1cm。
+
Q {{experimental_inline}}
+
四分之一毫米。1Q = 1/40 * 1cm。
+
in
+
一英寸。1in = 2.54cm = 96px。
+
pc
+
一十二点活字（pica），六分之一英寸。 1pc = 12pt = 1/6 * 1in。
+
pt
+
一磅（point），72 分之一英寸。1pt = 1/12 * 1pc = 1/72 * 1in。
+
mozmm {{non-standard_inline}}, 在 Firefox 59 中被移除
+
一个实验单位，无论显示器的尺寸或分辨率如何，都会尝试在一毫米处进行渲染。很少会用到，但可能在移动设备上特别有用。
+
+ +

插值

+ +

当包含动画效果时，动画中<length>的值是由计算出的值使用插值法得出的浮点实数。插值的速度由动画的定时函数决定。

+ +

示例

+ +

长度单位的比较

+ +

下面的示例为你提供了一个输入框，在框中输入一个<length>值（比如：300px, 50%, 30vw），按下Return，一个由你设置宽度的结果条将出现在下方。

+ +

这允许你对比不同长度单位的效果。

+ +

HTML

+ +
<div class="outer">
+  <div class="input-container">
+    <label>Enter width:</label>
+    <input type="text" id="length">
+  </div>
+  <div class="inner">
+
+  </div>
+</div>
+<div class="results">
+</div>
+ +

CSS

+ +
html {
+  font-family: sans-serif;
+  font-weight: bold;
+  box-sizing: border-box;
+}
+
+.outer {
+  width: 100%;
+  height: 50px;
+  background-color: #eee;
+  position: relative;
+}
+
+.inner {
+  height: 50px;
+  background-color: #999;
+  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
+              inset -3px -3px 5px rgba(0,0,0,0.5);
+}
+
+.result {
+  height: 20px;
+  background-color: #999;
+  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
+              inset -3px -3px 5px rgba(0,0,0,0.5);
+  background-color: orange;
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.result code {
+  position: absolute;
+  margin-left: 20px;
+}
+
+.results {
+  margin-top: 10px;
+}
+
+.input-container {
+  position: absolute;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 50px;
+}
+
+label {
+  margin: 0 10px 0 20px;
+}
+ +

JavaScript

+ +
const inputDiv = document.querySelector('.inner');
+const inputElem = document.querySelector('input');
+const resultsDiv = document.querySelector('.results');
+
+inputElem.addEventListener('change', () => {
+  inputDiv.style.width = inputElem.value;
+
+  const result = document.createElement('div');
+  result.className = 'result';
+  result.style.width = inputElem.value;
+  result.innerHTML = `<code>width: ${inputElem.value}</code>`;
+  resultsDiv.appendChild(result);
+
+  inputElem.value = '';
+  inputElem.focus();
+})
+ +

Result

+ +

{{EmbedLiveSample('Length_unit_comparison','100%', 700)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Values', '#lengths', '<length>')}}{{Spec2('CSS4 Values')}}Adds the vi, vb, ic, lh, and rlh units.
{{SpecName('CSS3 Values', '#lengths', '<length>')}}{{Spec2('CSS3 Values')}}Adds the ch, rem, vw, vh, vmin, vmax, and Q units.
{{SpecName('CSS2.1', 'syndata.html#length-units', '<length>')}}{{Spec2('CSS2.1')}}Explicit definition of the em, pt, pc, and px units.
{{SpecName('CSS1', '#length-units', '<length>')}}{{Spec2('CSS1')}}Initial definition. Implicit definition of the em, pt, pc, and px units.
+ +

浏览器兼容性

+ + + +

{{Compat("css.types.length")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/letter-spacing/index.html b/files/zh-cn/web/css/letter-spacing/index.html new file mode 100644 index 0000000000..9178182664 --- /dev/null +++ b/files/zh-cn/web/css/letter-spacing/index.html @@ -0,0 +1,139 @@ +--- +title: letter-spacing +slug: Web/CSS/letter-spacing +tags: + - CSS + - SVG + - 参考文档 +translation_of: Web/CSS/letter-spacing +--- +
{{CSSRef}}
+ +

CSS 的 letter-spacing 属性用于设置文本字符的间距表现。

+ +
{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}
+ + + +

语法

+ +
/* Keyword value */
+letter-spacing: normal;
+
+/* <length> values */
+letter-spacing: 0.3em;
+letter-spacing: 3px;
+letter-spacing: .3px;
+
+/* Global values */
+letter-spacing: inherit;
+letter-spacing: initial;
+letter-spacing: unset;
+
+ +

值

+ +
+
normal
+
此间距是按照当前字体的正常间距确定的。和 0 不同的是，{{glossary("user agent", "用户代理")}}根据此属性来确定文字的默认对齐方式。
+
{{cssxref("<length>")}}
+
指定文字间的间距以替代默认间距。可以是负值，但有可能会出现 implementation 限制。用户代理不会在此基础上进一步增加或缩减间距来对齐文字。
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<p class="normal">letter spacing</p>
+<p class="em-wide">letter spacing</p>
+<p class="em-wider">letter spacing</p>
+<p class="em-tight">letter spacing</p>
+<p class="px-wide">letter spacing</p>
+
+ +

CSS

+ +
.normal   { letter-spacing: normal; }
+.em-wide  { letter-spacing: 0.4em; }
+.em-wider { letter-spacing: 1em; }
+.em-tight { letter-spacing: -0.05em; }
+.px-wide  { letter-spacing: 6px; }
+
+ +

结果

+ +

{{ EmbedLiveSample('Examples', 440, 185) }}

+ +

可解决的问题

+ +

一个很大的正或负的 letter-spacing值会将应用这个样式的单词变为不可读的。给文本 letter-spacing 属性应用了一个很大的正值，字母之间的距离会很远，以至于文本中的单词将显示为一系列单独的，无有任何关联的字母。给文本 letter-spacing 属性应用了一个很大的负值，字母将会互相重叠到一个点，在这个点上单词可能无法识别了。

+ +

最佳的易辨认的字母间距（letter-spacing）必须根据具体情况来确定，因为不同的字体系列具有不同的字符宽度。没有任何一个值可以确保所有字体系列自动保持它们的可读性。

+ +

可访问性考量

+ +

A large positive or negative letter-spacing value will make the word(s) the styling is applied to unreadable. For text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. For text styled with a very large negative value, the letters will overlap each other to the point where the word(s) may be unrecognizable.

+ +

Legible letter-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}{{Spec2('CSS3 Text')}}没有变化
{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}{{Spec2('CSS3 Transitions')}}定义可动的间距
{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}{{Spec2('CSS2.1')}}没有变化
{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}{{Spec2('SVG1.1')}}初始化 SVG
{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}{{Spec2('CSS1')}}Initial specification
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.letter-spacing")}}

+ +

参见

+ +
    +
  • {{cssxref("font-kerning")}}
    • +
diff --git a/files/zh-cn/web/css/line-break/index.html b/files/zh-cn/web/css/line-break/index.html new file mode 100644 index 0000000000..2419b7a3f1 --- /dev/null +++ b/files/zh-cn/web/css/line-break/index.html @@ -0,0 +1,75 @@ +--- +title: line-break +slug: Web/CSS/line-break +tags: + - CSS + - CSS Text + - CSS 属性 + - Reference +translation_of: Web/CSS/line-break +--- +
{{CSSRef}}
+ +

设置 CSS 属性 line-break 可以用来处理如何断开（break lines）带有标点符号的中文、日文或韩文（CJK）文本的行。

+ +
/* Keyword values */
+line-break: auto;
+line-break: loose;
+line-break: normal;
+line-break: strict;
+line-break: anywhere;
+
+/* Global values */
+line-break: inherit;
+line-break: initial;
+line-break: unset;
+
+ +
{{cssinfo}}
+ +

语法

+ +

值

+ +
+
auto
+
使用默认的断行规则分解文本。
+
loose
+
使用尽可能松散（least restrictive）的断行规则分解文本。一般用于短行的情况，如报纸。
+
normal
+
使用最一般（common）的断行规则分解文本。
+
strict
+
使用最严格（stringent）的断行原则分解文本。
+
anywhere
+
+

在每个印刷字符单元（typographic character unit）的周围，都有一个自动换行（soft wrap）的机会，包括任何标点符号（punctuation character）或是保留的空白字符（preserved white spaces），或是单词之间。但忽略任何用于阻止换行的字符，即使是来自 GL、WJ 或 ZWJ 字符集的字符，或是由 word-break 属性强制的字符。不同的换行机会拥有相同的优先级。也不应用断字符（hyphenation，可能是 "-"）。

+

英文原文：There is a soft wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by characters with the GL, WJ, or ZWJ character class or mandated by the word-break property. The different wrapping opportunities must not be prioritized. Hyphenation is not applied.

+
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Text', '#line-break-property', 'line-break')}}{{Spec2('CSS3 Text')}}Initial definition
+ +

浏览器兼容性

+ +
{{Compat("css.properties.line-break")}}
diff --git a/files/zh-cn/web/css/line-height/index.html b/files/zh-cn/web/css/line-height/index.html new file mode 100644 index 0000000000..c951c61fc4 --- /dev/null +++ b/files/zh-cn/web/css/line-height/index.html @@ -0,0 +1,179 @@ +--- +title: line-height +slug: Web/CSS/line-height +tags: + - CSS + - 参考 +translation_of: Web/CSS/line-height +--- +
{{CSSRef}}
+ +

line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

+ +

{{EmbedInteractiveExample("pages/css/line-height.html")}}

+ + + +

语法

+ +
/* Keyword value */
+line-height: normal;
+
+/* Unitless values: use this number multiplied
+by the element's font size */
+line-height: 3.5;
+
+/* <length> values */
+line-height: 3em;
+
+/* <percentage> values */
+line-height: 34%;
+
+/* Global values */
+line-height: inherit;
+line-height: initial;
+line-height: unset;
+
+ +

line-height 属性被指定为以下任何一个：

+ + + +

取值

+ +
+
 
+
normal
+
取决于用户端。桌面浏览器（包括Firefox）使用默认值，约为1.2，这取决于元素的 font-family。
+
<数字>
+
该属性的应用值是这个无单位数字{{cssxref("<number>", "<数字>")}}乘以该元素的字体大小。计算值与指定值相同。大多数情况下，这是设置line-height的推荐方法，不会在继承时产生不确定的结果。
+
<长度>
+
指定{{cssxref("<length>", "<长度>")}}用于计算 line box 的高度。参考{{cssxref("<length>", "<长度>")}}了解可使用的单位。以 em 为单位的值可能会产生不确定的结果（见下面的例子）。
+
<百分比>
+
与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。百分比值可能会带来不确定的结果（见下面第二个例子）。
+
-moz-block-height {{non-standard_inline}}
+
将行高设置为当前块的内容区域高度。
+
+ +

形式化语法

+ +
{{csssyntax}}
+ +

示例

+ +

基本示例

+ +
/* 理论上，以下所有规则拥有相同的行高 */
+
+div { line-height: 1.2;   font-size: 10pt; }   /* 无单位数值 number/unitless */
+div { line-height: 1.2em; font-size: 10pt; }   /* 长度 length */
+div { line-height: 120%;  font-size: 10pt; }   /* 百分比 percentage */
+div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif; } /* font 简写属性 font shorthand */
+
+ +

为了简便，可以通过 {{cssxref("font")}} 简写来设置 line-height，但这要求在使用该简写属性时同时设置 font-family 属性。

+ +

推荐在设置 line-height 时使用无单位数值

+ +

这个示例说明了为什么给 line-height 赋值时使用 {{cssxref("<number>", "<数字>")}} 值比使用 {{cssxref("<length>","<长度>")}} 更好。我们会到用两个 {{HTMLElement("div")}} 元素。第一个 div 为绿色边框，使用无单位的 line-height值。第二个 div 带红色边框，使用 em 定义 line-height 的值。

+ +

CSS

+ +
.green {
+  line-height: 1.1;
+  border: solid limegreen;
+}
+
+.red {
+  line-height: 1.1em;
+  border: solid red;
+}
+
+h1 {
+  font-size: 30px;
+}
+
+.box {
+  width: 18em;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 15px;
+}
+
+ +

HTML

+ +
<div class="box green">
+ <h1>Avoid unexpected results by using unitless line-height.</h1>
+  length and percentage line-heights have poor inheritance behavior ...
+</div>
+
+<div class="box red">
+ <h1>Avoid unexpected results by using unitless line-height.</h1>
+  length and percentage line-heights have poor inheritance behavior ...
+</div>
+
+<!-- The first <h1> line-height is calculated from its own font-size   (30px × 1.1) = 33px  -->
+<!-- The second <h1> line-height results from the red div's font-size  (15px × 1.1) = 16.5px,  probably not what you want -->
+
+ +

结果

+ +

{{EmbedLiveSample('Prefer_unitless_numbers_for_line-height_values', 600, 200)}}

+ +

无障碍方面

+ +

主段落内容的 line-height 至少应为 1.5。 这将有助于改善低可视条件下的体验，也对认知阻碍者，如阅读困难者，有帮助。如果文字的大小要随页面的缩放而变化，请使用无单位的值，以确保行高也会等比例缩放。

+ +

W3C Understanding WCAG 2.1

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName('CSS3 Transitions', '#animatable-css', 'line-height')}}{{Spec2('CSS3 Transitions')}}将 line-height 定义为 animatable.
{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}{{Spec2('CSS2.1')}}无改动。
{{SpecName('CSS1', '#line-height', 'line-height')}}{{Spec2('CSS1')}}初始定义。
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.properties.line-height")}}

+
+ +

参见

+ +
    +
  • {{Cssxref("font")}}
    • +
  • {{Cssxref("font-size")}}
    • +
diff --git a/files/zh-cn/web/css/linear-gradient()/index.html b/files/zh-cn/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..c6ca27776d --- /dev/null +++ b/files/zh-cn/web/css/linear-gradient()/index.html @@ -0,0 +1,441 @@ +--- +title: linear-gradient +slug: Web/CSS/linear-gradient() +tags: + - Background + - CSS Backgrounds and Borders Module Level 3 + - CSS3 + - W3C + - gradient + - linear-gradient() +translation_of: Web/CSS/linear-gradient() +--- +

{{CSSRef}}

+ +

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于{{cssxref("<gradient>")}}数据类型，是一种特别的{{cssxref("<image>")}}数据类型。

+ +
/* 渐变轴为45度，从蓝色渐变到红色 */
+linear-gradient(45deg, blue, red);
+
+/* 从右下到左上、从蓝色渐变到红色 */
+linear-gradient(to left top, blue, red);
+
+/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
+linear-gradient(0deg, blue, green 40%, red);
+ +
{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}  
+ +

如同其他gradient函数一般，linear-gradient() 函数没有内在尺寸；即，它不具备固有的或首选的尺寸，也不具备首选的比率。该函数的具体尺寸将与其适用的元素尺寸匹配。

+ +
提示：利用{{cssxref("repeating-linear-gradient")}}函数可以实现线形重复渐变效果。
+ +
提示：由于<gradient>数据类型系<image>的子数据类型，<gradient>只能被用于<image>可以使用的地方。因此，linear-gradient() 并不适用于{{Cssxref("background-color")}}以及类似的使用 {{cssxref("<color>")}}数据类型的属性中。
+ +

线形渐变的构成

+ +

线性渐变由一个轴 (梯度线) 定义，其上的每个点具有两种或多种的颜色，且轴上的每个点都具有独立的颜色。为了构建出平滑的渐变，linear-gradient() 函数构建一系列垂直于渐变线的着色线，每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点

+ +

linear-gradient.png渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点，终点，以及两者之间的可选的中间点（中间点可以有多个）。

+ +

起始点是渐变线上代表起始颜色值的点。起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义。（垂直线跟渐变线在同一象限内）

+ +

同样的，终点是渐变线上代表最终颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的，然而从起始点的对称点来定义终点是更容易理解的一种方式，因为终点是起点关于容器的中心点的反射点。

+ +

关于起点和终点的稍微有些复杂的定义导致了一个有趣的性质，有时候被叫做不可思议的顶点效应：起点附近的点具有跟起点相同的颜色值，终点附近的点具有跟终点相同的颜色值。

+ +

不仅仅只有起点和终点的颜色值可以指定。通过提供额外的颜色中间点，Web开发者可以构建在起始颜色值和终点颜色值之间的自定义更强的过渡效果，另外还可以提供多种颜色值的渐变线。

+ +

当颜色中间点的位置被隐式定义，它被放置在位于它之前的点和位于它之后的点之间的中间位置处。利用{{cssxref("<length>")}}或者{{cssxref("<percentage>")}}数据类型可以显示定义一个位置。

+ +
linear-gradient(red, orange, yellow, green, blue);
+linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);看看
+
+ +

默认情况下，从一个颜色的终止点平滑的过渡到另一个颜色的终止点，颜色之间的中点是两个颜色颜色转换的中点。你可以将中点移动到这两个颜色之间的任意位置，方法是在两个颜色之间添加未标记的 %，以指示颜色的中转位置。下面的示例是从起始点到10%的位置标记红色，从90%到结束标记蓝色。在10%到90%之间，颜色从红色过渡到蓝色，然而过渡的中点是在30%的标记上，而不是在没有30%中转点的情况下会默认为50%。

+ +
linear-gradient(red 10%, 30%, blue 90%);
+ +

如果两个或多个颜色终止在同一位置，则在该位置声明的第一个颜色和最后一个颜色之间的过渡将是一条生硬线。

+ +

颜色终止列表中颜色的终止点应该是依次递增的。如果后面的颜色终止点小于前面颜色的终止点则后面的会被覆盖，从而创建一个硬转换。下面的变化是从红色到黄色在40%的位置，然后过渡从黄色到蓝色终止于65%的位置处。

+ +
linear-gradient(red 40%, yellow 30%, blue 65%);
+ +

允许颜色多个颜色终止位置。通过在CSS声明中包含两个位置，可以将一个颜色声明为两个相邻的颜色终止。以下三个梯度是相等的:

+ +
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
+linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
+linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
+ +

默认情况下，如果不带0%终止的颜色，则在该点声明的第一个颜色。类似地，最后一种颜色将持续到100%标记，或者如果在最后一个没有声明长度，则在100%标记处。

+ +

语法

+ +

值

+ +
+
<side-or-corner>
+
描述渐变线的起始点位置。它包含to和两个关键词：第一个指出水平位置left or right，第二个指出垂直位置top or bottom。关键词的先后顺序无影响，且都是可选的。
+ to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
+
<angle>
+
用角度值指定渐变的方向（或角度）。角度顺时针增加。 
+
<linear-color-stop>
+
由一个{{cssxref("<color>")}}值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的{{cssxref("<length>")}}）。CSS渐变的颜色渲染采取了与SVG相同的规则。
+
+ +
+
<color-hint>
+
+ +

颜色中转点是一个插值提示，它定义了在相邻颜色之间渐变如何进行。长度定义了在两种颜色之间的哪个点停止渐变颜色应该达到颜色过渡的中点。如果省略，颜色转换的中点是两个颜色停止之间的中点。 

+ +
+
+
提示：渲染颜色中间点的规则 color stops in CSS gradients与一致 SVG gradients。
+ +

正式语法

+ + 
linear-gradient(
+  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
+  \---------------------------------/ \----------------------------/
+    Definition of the gradient line        List of color stops
+
+where <side-or-corner> = [ left | right ] || [ top | bottom ]
+  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
+  and <linear-color-stop> = <color> [ <color-stop-length> ]?
+  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
+  and <color-hint> = [ <percentage> | <length> ]
+
+
+
+ +

语法历史

+ +

linear-gradient的语法由2008年实施的first Apple proposal发展而来。

+ +
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
+
+ +

在最初语法中，使用同样的语法实现线性渐变和径向渐变。但这两种渐变所需要的参数有所不同，导致了需要增加第一个参数来区分两种渐变。如果再增加渐变类型，这样的处理方式会变得更加复杂。比如锥形渐变，需要用到函数和不规范的CSS值。W3C并未收到相关草案。

+ +

一个替代语法在2009年由Mozilla提出并实现。这个语法需要两个CSS函数，一个用来做线性渐变，另一个用于径向渐变。然而，这个语法并没有被发布产品实现。有人提出了第三种语法，它将线性渐变的语法简化为：

+ +
-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
+ +

新的语法不需要to()、from()和color-stop()函数，所以这些函数被丢弃。而top/bottom与left/right的顺序也被标记为不重要，所以Mozilla移除了必需首先定义top/bottom的限制。

+ +

新的语法仍然有一个缺点：它只允许水平和垂直渐变。在多次变更解决了方向限制的问题之后，它被增加到CSS Images Values and Content Replacement Level 3 draft in 2011-02-17。

+ +
    +
  • 原生支持{{ cssxref("<angle>") }}允许任何方向的渐变
    • +
  • 定义magic corner算法，允许使用简便的方式定义端点的颜色，从而简化了开发者的工作
    • +
+ +

在预乘颜色空间里定义过渡色，从而可以防止在使用不同透明度颜色的情况下出现违和的灰色。在未舍弃原生语法的情况下，带前缀的版本被Webkit和Trident（IE）实现。

+ +
linear-gradient( [ [ {{cssxref("<angle>")}} | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
+ +

{{ cssxref("<angle>") }}属性的添加导致了一些混乱，它应当指向终点方向，但是这些关键字却通常指起始方向。在related W3C CSSWG thread可以查看一些讨论。在一项新的语法中，这个问题被修正。它仍然使用方向关键字，但是在关键字之前增加关键字 to 。这项语法被添加到CSS Images Values and Content Replacement Level 3 draft in 2011-09-08。

+ +
linear-gradient([ [ [ {{cssxref("<angle>")}} | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
+ +

以上应当是最终语法。

+ +

在带前缀的变体和不带前缀的提案之间仍然存在一项语义的分歧。最终Apple的提案显示，带前缀的语法都使用极坐标定义{{ cssxref("<angle>") }}参数，导致了0deg指向东方。为了与CSS的其他部分保持一致，标准将0deg指向北方。为了防止使用前缀版本属性的站点不至于崩溃，它们保持原始的角度定义（0deg指向东方）。在使用不带前缀版本的时候将会切换到正确的规格。在这种不兼容的情况下，Gecko给所有语法都加上前缀，不带前缀且没有to关键词的语法会被丢弃。

+ +

范例

+ +

例 45度渐变

+ +

可以为渐变轴某个位置指定某个颜色，这些位置可被称为“颜色中间点（color-stops）”。颜色会从一个颜色中间点平滑过渡到下一个。在渐变范围内，每个颜色都表现为一条垂直于渐变轴的直线。在下图中，渐变轴从左上角出发并且呈45度。渐变轴上定义了红色和蓝色两个颜色中间点。

+ +
<div style="width: 200px; height: 200px;"></div>
+ +
div {
+  background: linear-gradient(45deg, red, blue);
+}
+ +

{{EmbedLiveSample("45度渐变",120,120)}}

+ +

从60％的梯度线开始的渐变

+ +

有时候我们不希望一开始就出现渐变，可以从中间某个地方开始最好。为了实现这个效果，可以在你希望渐变梯度开始的地方，加上一个同样色值的颜色中间点。

+ +
<div style="width: 200px; height: 200px;"></div>
+ +
div {
+  background: linear-gradient(135deg, red, red 60%, blue);
+}
+ +

Result:

+ +

{{EmbedLiveSample("从60％的梯度线开始的渐变")}}

+ +

具有多个颜色停止的渐变

+ +

如果第一个颜色中间点没有 <length> 或 <percentage>属性,那么它默认为0%。如果最后一个颜色中间点没有 <length> 或者 <percentage>属性, 则默认为100%。如果一个既不是起始也不是终止的颜色中间点，没有被明确声明位置，那么这个颜色就会从前后两个颜色的中间位置开始。

+ +

颜色中间点必须按照顺序声明。给起始和终止的颜色中间值赋值后，如果一个颜色中间点的位置比任何一个颜色中间点的位置都要小，那它的位置会按照离它最近的一个颜色中间点来计算。

+ +
<div>A rainbow made from a gradient</div>
+ +
div {
+  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+}
+ +

Result:

+ +

{{EmbedLiveSample("具有多个颜色停止的渐变")}}

+ +

包含多个颜色中间点的渐变

+ +

如果第一个颜色中间点没有定义长度或百分比，它将包含缺省值0。如果最后一个颜色中间点没有定义长度或百分比，它将包含缺省值100%。如果中间的颜色中间点没定义长度或百分比，那么它将被设定为前后两站的平均值。

+ +

颜色中间点必须被按顺序定义。第一个和最后一个被分配为默认值之后，如果一个颜色中间点的位置比前一个小，那么将会被设定成与前一个相同的值。

+ +
使用渐变制作彩虹
+ +
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+
+ +

线性重复渐变

+ +

线性渐变目前不能实现重复渐变。默认情况下，渐变会撑满它被定义的元素。这项功能可以参考{{ Cssxref("repeating-linear-gradient") }}。

+ +

使用透明度

+ +
<div>线性与透明度</div>
+ +
div {
+  background: linear-gradient(to bottom right, red, rgba(0,0,0,0));
+}
+ +

Result:

+ +

{{EmbedLiveSample("使用透明度")}}

+ +

如果所有点和长度都使用固定单位（而不是相对于background-size的值指定的百分比或关键字），则渐变背景不受 {{Cssxref("background-size")}} 的影响。

+ +

跨浏览器实施渐变

+ +

这里包含了所有前缀的渐变设置。

+ +
.grad {
+  background-color: #F07575; /* 不支持渐变的浏览器回退方案 */
+  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
+  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Firefox (3.6 to 15) */
+  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持旧 Opera (11.1 to 12.0) */
+  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* 标准语法; 需要最新版本 */
+}
+
+ +

-moz-前缀的规则用于兼容Fx 3.6 to Fx 15的火狐浏览器。 -webkit-前缀的规则用于兼容在Android 4.3以前版本、iOS 6.1以前版本、Safari 6。当使用带前缀的规则时，不要加“to”关键字。

+ +
+

Notes：如果将<body>标签的background-image属性设置为线性渐变linear-gradient，除非您还设置文档根标签（例如<html>标签）的min-height属性，否则渐变不会填充浏览器屏幕到100％。

+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition
{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}Add Interpolation hints
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}}){{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("16")}}[2]		10.0 (534.16){{property_prefix("-webkit")}}[6]10.0[4]11.10{{property_prefix("-o")}}[1]5.1{{property_prefix("-webkit")}}[6]
On {{cssxref("border-radius")}}{{CompatGeckoDesktop("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On any other property that accepts {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Legacy webkit syntax{{non-standard_inline}}{{CompatNo}}3{{property_prefix("-webkit")}}[3]{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}[3]
Legacy 'from' syntax (without to){{non-standard_inline}}{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[5]10.0 (534.16){{property_prefix("-webkit")}}[3]1011.10{{property_prefix("-o")}}[5]5.1{{property_prefix("-webkit")}}[3]
Standard syntax (using the to keyword){{CompatGeckoDesktop("16")}}26.0 (537.27)1012.106.1
Interpolation hints (a percent without a color){{CompatGeckoDesktop("36")}}40{{CompatUnknown}}27{{CompatUnknown}}
Unitless 0 for <angle>{{CompatGeckoDesktop("46")}}{{property_prefix("-moz")}}[7]{{CompatVersionUnknown}}Edge 12{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}}){{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoMobile("16")}}[2]		16{{property_prefix("-webkit")}}
+ 26		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On {{cssxref("border-radius")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
On any other property that accepts {{cssxref("<image>")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Legacy webkit syntax{{non-standard_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Legacy 'from' syntax (without to){{non-standard_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Standard syntax (using the to keyword){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Interpolation hints (a percent without a color){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+ +

[1] Gecko, Opera & Webkit consider {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.

+ +

[2] Before Gecko 36.0 {{geckoRelease("36.0")}}, Gecko didn't apply gradients on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.

+ +

[3] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and an angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

+ +

[4] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

+ +

[5] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a 'from' position. The to syntax has been added in Firefox 10 and Opera 11.60.

+ +

In addition to the unprefixed support using the standard syntax, Gecko 44.0 {{geckoRelease("44.0")}} added support for a -webkit prefixed version of the function using the legacy 'from' syntax for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

+ +

[6] Opera & Webkit consider {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false. WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and an angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

+ +

[7] linear-gradient(0, pink, teal) equivalent to linear-gradient(0deg, pink, teal),See {{bug("1239153")}}.

+ +

了解更多

+ + diff --git a/files/zh-cn/web/css/list-style-image/index.html b/files/zh-cn/web/css/list-style-image/index.html new file mode 100644 index 0000000000..8d026ccf10 --- /dev/null +++ b/files/zh-cn/web/css/list-style-image/index.html @@ -0,0 +1,145 @@ +--- +title: list-style-image +slug: Web/CSS/list-style-image +tags: + - CSS列表 + - CSS属性 + - 参考 +translation_of: Web/CSS/list-style-image +--- +

{{ CSSRef}}

+ +

概要

+ +

 list-style-image 属性用来指定一个能用来作为列表元素标记的图片。

+ +

通常来说使用{{ cssxref("list-style") }}较为方便。

+ +

{{cssinfo}}

+ +

语法

+ +
/* Keyword values */
+list-style-image: none;
+
+/* <url> values */
+list-style-image: url('starsolid.gif');
+
+/* Global values */
+list-style-image: inherit;
+list-style-image: initial;
+list-style-image: unset;
+
+ +

值

+ +
+
<url>
+
用来作为标记的图片的地址。
+
none
+
说明没有图片被用作标记。如果这个值被设定，那么 {{ Cssxref("list-style-type") }} 中定义的值会被取代。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

举例

+ +

HTML

+ +
<ul>
+    <li>Item 1</li>
+    <li>Item 2</li>
+</ul>
+
+ +

CSS

+ +
ul {
+  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif")
+}
+ +

结果

+ +

{{ EmbedLiveSample('Examples') }}

+ +

说明

+ + + + + + + + + + + + + + + + + + + + + +
说明状态注释
{{ SpecName('CSS3 Lists', '#list-style-image', 'list-style-image') }}{{ Spec2('CSS3 Lists') }}Extends support to any {{cssxref("<image>")}} data type.
{{ SpecName('CSS2.1', 'generate.html#propdef-list-style-image', 'list-style-image') }}{{ Spec2('CSS2.1') }}Initial definition
+ +

浏览器支持

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
特征ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本支持1.0{{ CompatGeckoDesktop("1") }}4.07.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
特征AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基本支持1.0{{ CompatGeckoMobile("1") }}6.06.01.0
+
+ +

其他链接

+ +
    +
  • {{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-position") }}
    • +
diff --git a/files/zh-cn/web/css/list-style-position/index.html b/files/zh-cn/web/css/list-style-position/index.html new file mode 100644 index 0000000000..eb83b0b108 --- /dev/null +++ b/files/zh-cn/web/css/list-style-position/index.html @@ -0,0 +1,162 @@ +--- +title: list-style-position +slug: Web/CSS/list-style-position +translation_of: Web/CSS/list-style-position +--- +
{{CSSRef}}
+ +

 list-style-position 属性指定标记框在主体块框中的位置。

+ +

使用助记符{{cssxref("list-style")}}更方便。

+ +

{{cssinfo}}

+ +

语法

+ +
/* Keyword values */
+list-style-position: inside;
+list-style-position: outside;
+
+/* Global values */
+list-style-position: inherit;
+list-style-position: initial;
+list-style-position: unset;
+
+ +

数值

+ +
+
outside
+
标记盒在主块盒的外面。
+
inside
+
标记盒是主要块盒中的第一个行内盒，处于元素的内容流之后。
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

例子

+ +

HTML

+ +
<ul class="one"> List 1
+  <li>List Item 1-1</li>
+  <li>List Item 1-2</li>
+  <li>List Item 1-3</li>
+  <li>List Item 1-4</li>
+</ul>
+<ul class="two"> List 2
+  <li>List Item 2-1</li>
+  <li>List Item 2-2</li>
+  <li>List Item 2-3</li>
+  <li>List Item 2-4</li>
+</ul>
+<ul class="three"> List 3
+  <li>List Item 3-1</li>
+  <li>List Item 3-2</li>
+  <li>List Item 3-3</li>
+  <li>List Item 3-4</li>
+</ul>
+ +

CSS

+ +
.one {
+  list-style:square inside;
+}
+
+.two {
+  list-style-position: outside;
+  list-style-type: circle;
+}
+
+.three {
+  list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
+  list-style-position: inherit;
+}
+ +

Result

+ +

{{EmbedLiveSample("例子","200","420")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Lists', '#list-style-position-property', 'list-style-position')}}{{Spec2('CSS3 Lists')}}No change.
{{SpecName('CSS2.1', 'generate.html#propdef-list-style-position', 'list-style-position')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.01.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

N.B. There is variance among browsers regarding behaviour when a block element is placed first within a list element declared as list-style-position:inside. Chrome and Safari both place this element on the same line as the marker box, whereas Firefox, Internet Explorer and Opera place it on the next line. For more information on this, see this Mozilla Bug report and an example.

+ +

See also

+ +
    +
  • {{Cssxref("list-style")}}, {{Cssxref("list-style-type")}}, {{Cssxref("list-style-image")}}
    • +
diff --git a/files/zh-cn/web/css/list-style-type/index.html b/files/zh-cn/web/css/list-style-type/index.html new file mode 100644 index 0000000000..300b44c3ba --- /dev/null +++ b/files/zh-cn/web/css/list-style-type/index.html @@ -0,0 +1,558 @@ +--- +title: list-style-type +slug: Web/CSS/list-style-type +tags: + - CSS + - CSS Lists + - CSS 属性 + - Reference +translation_of: Web/CSS/list-style-type +--- +
{{CSSRef}}
+ +

 CSS 属性 list-style-type 可以设置列表元素的 marker（比如圆点、符号、或者自定义计数器样式）。

+ +
{{EmbedInteractiveExample("pages/css/list-style-type.html")}}
+ + + +

The color of the marker will be the same as the computed color of the element it applies to.

+ +

只有几个元素 ({{HTMLElement("li")}} 和 {{HTMLElement("summary")}}) 的默认值为 display: list-item。 但是， list-style-type 属性可以应用在任何 {{cssxref("display")}} 的值为 list-item 的元素上。此外，由于这个属性是可继承的，它可以设置在父元素上 (通常是 {{HTMLElement("ol")}} 或 {{HTMLElement("ul")}}) 以便应用于所有子元素({{HTMLElement("li")}})。

+ +

语法

+ +
/* Partial list of types */
+list-style-type: disc;
+list-style-type: circle;
+list-style-type: square;
+list-style-type: decimal;
+list-style-type: georgian;
+list-style-type: trad-chinese-informal;
+list-style-type: kannada;
+
+/* <string> value */
+list-style-type: '-';
+
+/* Identifier matching an @counter-style rule */
+list-style-type: custom-counter-style;
+
+/* Keyword value */
+list-style-type: none;
+
+/* Global values */
+list-style-type: inherit;
+list-style-type: initial;
+list-style-type: unset;
+
+ +

list-style-type 的属性值可以是以下任意一项:

+ + + +

取值

+ +
+
{{cssxref("custom-ident", "<custom-ident>")}}
+
A identifier matching the value of a {{cssxref("@counter-style")}} or one of the predefined styles:
+
+ +
+
{{cssxref("symbols()")}}
+
Defines an anonymous style of the list.
+
{{cssxref("<string>")}}
+
The specified string will be used as the item's marker.
+
+ +
+
none
+
不显示列表项的标记。
+
+ +

关键字的取值是下列之一：

+ +
+
disc
+
+
    +
  • 实心圆点 (默认值)
    • +
+
+
circle
+
+
    +
  • 空心圆点
    • +
+
+
square
+
+
    +
  • 实心方块
    • +
+
+
decimal
+
+
    +
  • 十进制阿拉伯数字
    • +
  • 从1开始
    • +
+
+
cjk-decimal {{experimental_inline}}
+
+
    +
  • 中日韩十进制数
    • +
  • 例如: 一, 二, 三, ..., 九八, 九九, 一〇〇
    • +
+
+
decimal-leading-zero
+
+
    +
  • Decimal numbers
    • +
  • Padded by initial zeros
    • +
  • E.g. 01, 02, 03, … 98, 99
    • +
+
+
lower-roman
+
+
    +
  • Lowercase roman numerals
    • +
  • E.g. i, ii, iii, iv, v…
    • +
+
+
upper-roman
+
+
    +
  • Uppercase roman numerals
    • +
  • E.g. I, II, III, IV, V…
    • +
+
+
lower-greek
+
+
    +
  • Lowercase classical Greek
    • +
  • alpha, beta, gamma…
    • +
  • E.g. α, β, γ…
    • +
+
+
lower-alpha
+
lower-latin
+
+
    +
  • Lowercase ASCII letters
    • +
  • E.g. a, b, c, … z
    • +
  • lower-latin is unsupported in IE7 and earlier
    • +
  • See {{anch("Browser compatibility")}} section.
    • +
+
+
upper-alpha
+
upper-latin
+
+
    +
  • Uppercase ASCII letters
    • +
  • E.g. A, B, C, … Z
    • +
  • upper-latin is unsupported in IE7 and earlier
    • +
+
+
armenian
+
+
    +
  • Traditional Armenian numbering
    • +
  • (ayb/ayp, ben/pen, gim/keem…
    • +
+
+
georgian
+
+
    +
  • Traditional Georgian numbering
    • +
  • E.g. an, ban, gan, … he, tan, in…
    • +
+
+
hebrew {{experimental_inline}}
+
+
    +
  • Traditional Hebrew numbering
    • +
+
+
ethiopic-numeric {{experimental_inline}}
+
+
    +
  • Example
    • +
+
+
hiragana {{experimental_inline}}
+
+
    +
  • a, i, u, e, o, ka, ki, …
    • +
  • (Japanese)
    • +
+
+
katakana {{experimental_inline}}
+
+
    +
  • A, I, U, E, O, KA, KI, …
    • +
  • (Japanese)
    • +
+
+
hiragana-iroha {{experimental_inline}}
+
+
    +
  • i, ro, ha, ni, ho, he, to, …
    • +
  • {{interwiki('wikipedia', 'Iroha')}} is the old japanese ordering of syllabs.
    • +
+
+
katakana-iroha {{experimental_inline}}
+
+
    +
  • I, RO, HA, NI, HO, HE, TO, …
    • +
  • {{interwiki('wikipedia', 'Iroha')}} is the old japanese ordering of syllabs.
    • +
+
+
japanese-informal {{experimental_inline}}
+
+
    +
  • Japanese informal numbering
    • +
+
+
japanese-formal {{experimental_inline}}
+
+
    +
  • Japanese formal numbering to be used in legal or financial document.
    • +
  • E.g., 壱萬壱阡壱百壱拾壱
    • +
  • The kanjis are designed so that they can't be modified to look like another correct one
    • +
+
+
korean-hangul-formal {{experimental_inline}}
+
+
    +
  • Korean hangul numbering.
    • +
  • E.g., 일만 일천일백일십일
    • +
+
+
korean-hanja-informal {{experimental_inline}}
+
+
    +
  • Korean hanja numbering.
    • +
  • E.g., 萬 一千百十一
    • +
+
+
korean-hanja-formal {{experimental_inline}}
+
+
    +
  • Formal Korean Han numberging.
    • +
  • E.g. 壹萬 壹仟壹百壹拾壹
    • +
+
+
simp-chinese-informal {{experimental_inline}}
+
+
    +
  • Simplified Chinese informal numberging.
    • +
  • E.g. 一万一千一百一十一
    • +
+
+
cjk-ideographic{{experimental_inline}}
+
+
    +
  • Identical to simp-chinese-informal
    • +
  • E.g. 一万一千一百一十一
    • +
+
+
simp-chinese-formal {{experimental_inline}}
+
+
    +
  • Simplified Chinese formal numberging.
    • +
  • E.g. 壹万壹仟壹佰壹拾壹
    • +
+
+
trad-chinese-informal {{experimental_inline}}
+
+
    +
  • Traditional Chinese informal numberging.
    • +
  • E.g. 一萬一千一百一十一
    • +
+
+
trad-chinese-formal {{experimental_inline}}
+
+
    +
  • Traditional Chinese formal numberging.
    • +
  • E.g. 壹萬壹仟壹佰壹拾壹
    • +
+
+
+ +

非标准扩展

+ +

Extended set of values provided by Mozilla (Firefox), Blink (Chrome and Opera) and WebKit (Safari) to support list types in other languages. See the compatibility table to check which browsers supports which extension.

+ +
+
arabic-indic
+
-moz-arabic-indic
+
+
    +
  • Example
    • +
+
+
bengali
+
-moz-bengali
+
+
    +
  • Example
    • +
+
+
cjk-earthly-branch
+
-moz-cjk-earthly-branch
+
+
    +
  • Example
    • +
+
+
cjk-heavenly-stem
+
-moz-cjk-heavenly-stem
+
+
    +
  • Example
    • +
+
+
devanagari
+
-moz-devanagari
+
+
    +
  • Example
    • +
+
+
-moz-ethiopic-halehame
+
+
    +
  • Example
    • +
+
+
-moz-ethiopic-halehame-am
+
+
    +
  • Example
    • +
+
+
ethiopic-halehame-ti-er
+
-moz-ethiopic-halehame-ti-er
+
+
    +
  • Example
    • +
+
+
ethiopic-halehame-ti-et
+
-moz-ethiopic-halehame-ti-et
+
+
    +
  • Example
    • +
+
+
gujarati
+
-moz-gujarati
+
+
    +
  • Example
    • +
+
+
gurmukhi
+
-moz-gurmukhi
+
+
    +
  • Example
    • +
+
+
hangul
+
-moz-hangul
+
+
    +
  • Example
    • +
  • Example
    • +
  • Example
    • +
+
+
hangul-consonant
+
-moz-hangul-consonant
+
+
    +
  • Example
    • +
  • Example
    • +
  • Example
    • +
+
+
kannada
+
-moz-kannada
+
+
    +
  • Example
    • +
+
+
khmer
+
-moz-khmer
+
+
    +
  • Example
    • +
+
+
lao
+
-moz-lao
+
+
    +
  • Example
    • +
+
+
malayalam
+
-moz-malayalam
+
+
    +
  • Example
    • +
+
+
myanmar
+
-moz-myanmar
+
+
    +
  • Example
    • +
+
+
oriya
+
-moz-oriya
+
+
    +
  • Example
    • +
+
+
persian
+
-moz-persian
+
+
    +
  • Example
    • +
+
+
-moz-tamil
+
+
    +
  • Example
    • +
+
+
telugu
+
-moz-telugu
+
+
    +
  • Example
    • +
+
+
thai
+
-moz-thai
+
+
    +
  • Example
    • +
+
+
urdu
+
-moz-urdu
+
+
    +
  • Example
    • +
+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

例子

+ +

CSS

+ +
ol.normal {
+  list-style-type: upper-alpha;
+}
+
+/* or use the shortcut "list-style": */
+ol.shortcut {
+  list-style: upper-alpha;
+}
+ +

HTML

+ +
<ol class="normal">List 1
+  <li>Hello</li>
+  <li>World</li>
+  <li>What's up?</li>
+</ol>
+
+<ol class="shortcut">List 2
+  <li>Looks</li>
+  <li>Like</li>
+  <li>The</li>
+  <li>Same</li>
+</ol>
+
+ +

Result

+ +

{{EmbedLiveSample("例子","200","300")}}

+ +

Accessibility concerns

+ +

The VoiceOver screen reader has an issue where unordered lists with a list-style-typevalue of none applied to them will not be announced as a list. To address this, add a zero-width space as pseudo content before each list item to ensure the list is announced properly. This ensures the design is unaffected by the bug fix and that list items are not improperly described.

+ +
ul {
+  list-style: none;
+}
+
+ul li::before {
+  content: "\200B";
+}
+ + + +

注释

+ +
    +
  • Some types require a suitable font installed to display as expected.
    • +
  • The cjk-ideographic is identical to trad-chinese-informal; it exists for legacy reasons.
    • +
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Lists', '#list-style-type', 'list-style-type')}}{{Spec2('CSS3 Lists')}}Adds support for identifiers used in @counter-style rules to keywords.
+ Adds hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha, japanese-formal, japanese-informal, simp-chinese-formal, trad-chinese-formal, simp-chinese-formal, trad-chinese-formal,korean-hangul-formal, korean-hanja-informal, korean-hanja-formal, cjk-decimal, ethiopic style types.
{{SpecName('CSS2.1', 'generate.html#propdef-list-style-type', 'list-style-type')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

浏览器兼容性

+ +
{{Compat("css.properties.list-style-type")}}
+ +

参见

+ +
    +
  • {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
    • +
diff --git a/files/zh-cn/web/css/list-style/index.html b/files/zh-cn/web/css/list-style/index.html new file mode 100644 index 0000000000..a65ff6621b --- /dev/null +++ b/files/zh-cn/web/css/list-style/index.html @@ -0,0 +1,143 @@ +--- +title: list-style +slug: Web/CSS/list-style +translation_of: Web/CSS/list-style +--- +
{{CSSRef}}
+ +
list-style CSS 属性是一个简写对属性集合，包括{{cssxref("list-style-type")}}, {{cssxref("list-style-image")}}, 和 {{cssxref("list-style-position")}}。
+ +

概要

+ +

CSS list-style 属性是设置{{cssxref("list-style-type")}}, {{cssxref("list-style-image")}} 和 {{cssxref("list-style-position")}}  的简写属性。

+ +

{{cssinfo}}

+ +

语法

+ +
Formal syntax: {{csssyntax("list-style")}}
+ +

值

+ +

以任何顺序接受一个，二个或者三个关键词

+ +
+
<'list-style-type'>
+
参看 {{cssxref("list-style-type")}}
+
<'list-style-image'>
+
参看 {{cssxref("list-style-image")}}
+
<'list-style-position'>
+
参看 {{cssxref("list-style-position")}}
+
+ +

示例

+ +

HTML

+ +
List 1
+<ul class="one">
+  <li>List Item1</li>
+  <li>List Item2</li>
+  <li>List Item3</li>
+</ul>
+List 2
+<ul class="two">
+  <li>List Item A</li>
+  <li>List Item B</li>
+  <li>List Item C</li>
+</ul>
+
+ +

CSS

+ +
.one {
+  list-style: circle;
+}
+
+.two {
+  list-style: square inside;
+}
+ +

Result

+ +

{{EmbedLiveSample('示例')}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('CSS3 Lists', '#list-style', 'list-style')}}{{Spec2('CSS3 Lists')}}没有改变
{{SpecName('CSS2.1', 'generate.html#propdef-list-style', 'list-style')}}{{Spec2('CSS2.1')}}初始定义
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}4.07.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
+ +

另参见

+ +
    +
  • {{Cssxref("list-style-type")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
    • +
diff --git a/files/zh-cn/web/css/margin-block-start/index.html b/files/zh-cn/web/css/margin-block-start/index.html new file mode 100644 index 0000000000..34afdf89f0 --- /dev/null +++ b/files/zh-cn/web/css/margin-block-start/index.html @@ -0,0 +1,95 @@ +--- +title: margin-block-start +slug: Web/CSS/margin-block-start +translation_of: Web/CSS/margin-block-start +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

margin-block-start CSS 属性定义了一个元素的逻辑块的开始边距, 是用来根据元素的书写模式，方向和文本方向进行实际边界的衡量。

+ +
/* <length> values */
+margin-block-start: 10px;  /* 绝对长度 */
+margin-block-start: 1em;   /* 文本的相对大小 */
+margin-block-start: 5%;    /* 相对于最近块容器的大小 */
+
+/* 关键字值 */
+margin-block-start: auto;
+
+/* 全局值 */
+margin-block-start: inherit;
+margin-block-start: initial;
+margin-block-start: unset
+
+ +

{{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, or {{cssxref("margin-left")}} 属性对应于 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, 和{{cssxref("text-orientation")}}属性定义的值.

+ +

它涉及到 {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}},和 {{cssxref("margin-inline-end")}}属性, 这些属性是用来定义其它元素的边界。

+ +

{{cssinfo}}

+ +

Syntax

+ +

Values

+ +

margin-block-start 属性有着和 {{cssxref("margin-left")}} 属性一样的值.

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

案例

+ +

HTML Content

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS Content

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-block-start: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Logical Properties", "#propdef-margin-block-start", "margin-block-start")}}{{Spec2("CSS Logical Properties")}}初始定义
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.margin-block-start")}}

+ +

同样推荐

+ +
    +
  • 标记的物理属性: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, and {{cssxref("margin-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/zh-cn/web/css/margin-block/index.html b/files/zh-cn/web/css/margin-block/index.html new file mode 100644 index 0000000000..696903ab8f --- /dev/null +++ b/files/zh-cn/web/css/margin-block/index.html @@ -0,0 +1,96 @@ +--- +title: margin-block +slug: Web/CSS/margin-block +translation_of: Web/CSS/margin-block +--- +

{{CSSRef}}{{SeeCompatTable}} 

+ +

margin-block这个CSS属性定义了一个元素的逻辑块开始和结束边距，根据元素的写入模式、 方向性和文本方向映射到物理边界。

+ +
/* 有长度的具体的值 */
+margin-block: 10px 20px;  /* 一个绝对的长度值 */
+margin-block: 1em 2em;   /* 相对于文本大小的值 */
+margin-block: 5% 2%;    /* 相对于最近的块容器宽度的值 */
+margin-block: 10px; /* 设置开始值和结束值 */
+
+/* 关键字 值 */
+margin-block: auto;
+
+/* 全局 值 */
+margin-block: inherit;
+margin-block: initial;
+margin-block: unset;
+
+ +

这些值对应的是{{CSSxRef("margin-top")}}和{{CSSxRef("margin-bottom")}}，或者 {{CSSxRef("margin-right")}}，和{{CSSxRef("margin-left")}}，这些属性取决于{{CSSxRef("writing-mode")}}，{{CSSxRef("direction")}}，和{{CSSxRef("text-orientation")}}。

+ +

这些值可以单独设置为{{CSSxRef("margin-block-start")}}和{{CSSxRef("margin-block-end")}}。inline direction属性是{{CSSxRef("margin-inline")}}，也可设置为{{CSSxRef("margin-inline-start")}}，和{{CSSxRef("margin-inline-end")}}。

+ +

语法

+ +

值

+ +

margin-block属性采用和{{CSSxRef("margin-left")}}属性相同的值。

+ +

正规语法

+ +
{{CSSSyntax}}
+ +

示例

+ +

HTML 部分

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS 部分

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  margin-block: 20px 40px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Logical Properties", "#propdef-margin-block", "margin-block")}}{{Spec2("CSS Logical Properties")}}Initial definition.
+ +

{{CSSInfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.margin-block")}}

+ +

请参考

+ +
    +
  • 所映射的物理特性： {{CSSxRef("margin-top")}}，{{CSSxRef("margin-right")}}，{{CSSxRef("margin-bottom")}}和{{CSSxRef("margin-left")}}
    • +
  • {{CSSxRef("writing-mode")}}，{{CSSxRef("direction")}}，{{CSSxRef("text-orientation")}}
    • +
diff --git a/files/zh-cn/web/css/margin-bottom/index.html b/files/zh-cn/web/css/margin-bottom/index.html new file mode 100644 index 0000000000..5705d9d2dc --- /dev/null +++ b/files/zh-cn/web/css/margin-bottom/index.html @@ -0,0 +1,187 @@ +--- +title: margin-bottom +slug: Web/CSS/margin-bottom +tags: + - CSS + - CSS属性 + - 参考 +translation_of: Web/CSS/margin-bottom +--- +
{{CSSRef}}
+ +

Summary

+ +

The effect of the CSS margin-bottom property on the element box

+ +

CSS的 margin-bottom 属性用于设置元素的底部外边距，允许设置负数值。一个正数值将让它相对于正常流与邻近块更远，而负数值将使得更近。

+ +

该属性对于不可替代(non-replaced 元素在规范中有概念，请自行搜索)的行级元素没有效果，比如： {{HTMLElement("tt")}} 或者 {{HTMLElement("span")}}.

+ +

{{cssinfo}}

+ +

语法

+ +
/* <length> values */
+margin-bottom: 10px;        /* 一个绝对的长度值 */
+margin-bottom: 1em;         /* A length relative to the text size */
+margin-bottom: 5%;          /* A margin relative to the nearest block container's width */
+
+/* Keyword values */
+margin-bottom: auto;
+
+/* Global values */
+margin-bottom: inherit;
+margin-bottom: initial;
+margin-bottom: unset;
+
+ +

值

+ +
+
<length>
+
定义了一个确定的宽度值，参见 {{cssxref("<length>")}} 以了解更多可能的值。
+
<percentage>
+
{{cssxref("<percentage>")}} 始终与包含该元素的容器宽度有关。
+
auto
+
由浏览器自己选择一个合适的值。参见 {{cssxref("margin")}}。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

样例

+ +

HTML

+ +
<div class="container">
+<div class="box0">Box 0</div>
+<div class="box1">Box 1</div>
+<div class="box2">Box one's negative margin pulls me up</div>
+</div>
+ +

CSS

+ +

用于设置 div 的 margin-bottom 和 height 的 CSS代码

+ +
.box0 {
+    margin-bottom:1em;
+    height:3em;
+}
+.box1 {
+    margin-bottom:-1.5em;
+    height:4em;
+}
+.box2 {
+    border:1px dashed black;
+    border-width:1px 0;
+    margin-bottom:2em;
+}
+
+
+ +

为了使 margin 产生的影响更明显，添加了一些 container 和 div 的样式定义

+ +
.container {
+    background-color:orange;
+    width:320px;
+    border:1px solid black;
+}
+div {
+    width:320px;
+    background-color:gold;
+}
+ +

{{ EmbedLiveSample('Example',350,200) }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS3 Box')}}无明显变化
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}{{Spec2('CSS3 Transitions')}}将 margin-bottom 定义为可动画化
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}{{Spec2('CSS2.1')}}移除了对内联元素的影响
{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS1')}}初始定义
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
auto value1.0{{CompatGeckoDesktop("1")}}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/zh-cn/web/css/margin-left/index.html b/files/zh-cn/web/css/margin-left/index.html new file mode 100644 index 0000000000..b854468cc6 --- /dev/null +++ b/files/zh-cn/web/css/margin-left/index.html @@ -0,0 +1,209 @@ +--- +title: margin-left +slug: Web/CSS/margin-left +translation_of: Web/CSS/margin-left +--- +
{{CSSRef()}}
+ +

Summary

+ +

Area on which CSS margin-left applymargin-left  属性 设置与元素相关联的盒子模型的左外边距。这个值可以为负值。

+ +

竖直排列相邻的两个盒子模型的外边距会重叠 margin collapsing。

+ +

在长度(width)被约束这种极少情况下，( 即当所有的宽度，左边界，边界，填充内容区域和边缘都被定义), 左边界会被忽略，如果被制定为auto值，会有相同的计算值。

+ +

{{cssinfo()}}

+ +

Syntax

+ +
/* <length> values */
+margin-left: 10px;  /* 绝对长度 */
+margin-left: 1em;   /* 相对于字号的长度 */
+margin-left: 5%;    /* 相对最近块元素的宽度 */
+
+/* Keyword values */
+margin-left: auto;
+
+/* Global values */
+margin-left: inherit;
+margin-left: initial;
+margin-left: unset;
+
+ +

Values

+ +
+
<length>
+
一个固定宽度 {{cssxref("<length>")}} 值 : 可以是一个绝对宽度, e.g. in px, 也可以是个相对宽度, e.g. in em, 或者相对视窗的大小, e.g. in vh.
+
<percentage>
+
百分比值 {{cssxref("<percentage>")}} 最近的块容器的宽度 width .
+
auto
+
auto关键词表示在当前布局模式下，浏览器根据接收的左边距自动计算出外边距。如果有几组margin-left和margin-right 设置为auto，那么最后计算的空间分布，会根据display，float，position属性，自动生成以下几种情况： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Value of {{cssxref("display")}}Value of {{cssxref("float")}}Value of {{cssxref("position")}}Computed value of autoComment
inline, inline-block, inline-tableanystatic or relative0Inline layout mode
block, inline, inline-block, block, table, inline-table, list-item, table-captionanystatic or relative0, 除非margin-left和   margin-right同时都设置为auto. 这样的话，元素就被设置为基于父元素居中。Block layout mode
block, inline, inline-block, block, table, inline-table, list-item, table-captionleft or rightstatic or relative0Block layout mode (floating element)
any table-*, except table-captionanyany0Internal table-* elements don't have margins, use {{ cssxref("border-spacing") }} instead
any, except flex, inline-flex, or table-*anyfixed or absolute0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the border area inside the available width, if fixed.Absolutely positioned layout mode
flex, inline-flexanyany +

在水平方向上有空余空间的情况下，空余的空间会被平均分给水平方向上写有margin-left:auto属性的元素的外边距

+ 		Flexbox layout mode
+
+
+ +

Formal syntax

+ +
{{csssyntax()}}
+ +

Examples

+ +
.content { margin-left:   5%; }
+.sidebox { margin-left: 10px; }
+.logo    { margin-left: -5px; }
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box', '#the-margin', 'margin-left')}}{{Spec2('CSS3 Box')}}No significant change from CSS 2.1.
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-left')}}{{Spec2('CSS3 Transitions')}}Defines margin-left as animatable.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}{{Spec2('CSS3 Flexbox')}}Defines the behavior of margin-left on flex items.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}{{Spec2('CSS2.1')}}Like in CSS1, but removes its effect on inline elements.
{{SpecName('CSS1', '#margin-left', 'margin-left')}}{{Spec2('CSS1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
auto value1.0{{CompatGeckoDesktop("1")}}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/zh-cn/web/css/margin-right/index.html b/files/zh-cn/web/css/margin-right/index.html new file mode 100644 index 0000000000..295e126588 --- /dev/null +++ b/files/zh-cn/web/css/margin-right/index.html @@ -0,0 +1,208 @@ +--- +title: margin-right +slug: Web/CSS/margin-right +tags: + - CSS + - CSS 属性 +translation_of: Web/CSS/margin-right +--- +

{{CSSRef}}

+ +

摘要

+ +

The effect of the CSS margin-right property on the element boxmargin-right  属性 设置与元素相关联的盒子模型的右外边距。这个值可以为负值。

+ +

竖直排列相邻的两个盒子模型的外边距会重叠，称为 margin collapsing.

+ +

{{cssinfo}}

+ +

语法

+ +
/* <length> values */
+margin-right: 20px;        /* An absolute length */
+margin-right: 1em;         /* A length relative to the text size */
+margin-right: 5%;          /* A margin relative to the nearest block container's width */
+
+/* Keyword values */
+margin-right: auto;
+
+/* Global values */
+margin-right: inherit;
+margin-right: initial;
+margin-right: unset;
+
+ +

值

+ +
+
<length>
+
一个固定宽度 {{cssxref("<length>")}}值: 可以是一个绝对宽度，e.g. in px, 也可以是一个相对宽度， e.g. in em, 或者相对视窗的大小，e.g. in vh.
+
<percentage>
+
以百分比为单位的margin值，计算时是相对于其最近的父级容器的宽度。
+
auto
+
auto关键词表示在当前布局模式下，浏览器根据接收的左边距自动计算出外边距。如果有几组margin-left和margin-right 设置为auto，那么最后计算的空间分布，会根据display，float，position属性，自动生成以下几种情况： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Value of {{cssxref("display")}}Value of {{cssxref("float")}}Value of {{cssxref("position")}}Computed value of autoComment
inline, inline-block, inline-tableanystatic or relative0Inline layout mode
block, inline, inline-block, block, table, inline-table, list-item, table-captionanystatic or relative0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the element inside its parent.Block layout mode
block, inline, inline-block, block, table, inline-table, list-item, table-captionleft or rightstatic or relative0Block layout mode (floating element)
any table-*, except table-captionanyany0Internal table-* elements don't have margins, use {{ cssxref("border-spacing") }} instead
any, except flex, inline-flex, or table-*anyfixed or absolute0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the border area inside the available width, if fixed.Absolutely positioned layout mode
flex, inline-flexanyany0, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal auto margins.Flexbox layout mode
+
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

实例

+ +
.content { margin-right: 5%; }
+.sidebox { margin-right: 10px; }
+.logo    { margin-right: -5px; }
+
+ +

说明

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#the-margin', 'margin-right') }}{{ Spec2('CSS3 Box') }}No significant change
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-right') }}{{ Spec2('CSS3 Transitions') }}Defines margin-right as animatable.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}{{ Spec2('CSS3 Flexbox') }}Defines the behavior of margin-right on flex items.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right') }}{{ Spec2('CSS2.1') }}Removes its effect on inline elements.
{{ SpecName('CSS1', '#margin-right', 'margin-right') }}{{ Spec2('CSS1') }}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1") }}3.03.51.0 (85)
auto value1.0{{ CompatGeckoDesktop("1") }}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1") }}6.06.01.0
+
diff --git a/files/zh-cn/web/css/margin-top/index.html b/files/zh-cn/web/css/margin-top/index.html new file mode 100644 index 0000000000..931872da2b --- /dev/null +++ b/files/zh-cn/web/css/margin-top/index.html @@ -0,0 +1,145 @@ +--- +title: margin-top +slug: Web/CSS/margin-top +translation_of: Web/CSS/margin-top +--- +
{{CSSRef}}
+ +

Summary

+ +

The effect of the CSS margin-top property on the element box margin-top 属性用来设置元素的顶部外边距，你也可以使用负值。

+ +

这个属性对于不可替换的inline元素没有效果,比如 {{HTMLElement("tt")}} 或者 {{HTMLElement("span")}}.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* <length> values */
+margin-top: 10px;        /* 绝对长度 */
+margin-top: 1em;         /*相对于字体大小 */
+margin-top: 5%;          /*相对于最相邻的父级元素块（block）的宽度*/
+
+/* Keyword values */
+margin-top: auto;
+
+/* Global values */
+margin-top: inherit;
+margin-top: initial;
+margin-top: unset;
+
+ +

Values

+ +
+
<length>
+
设置固定长度 参考{{cssxref("<length>")}} 来查看合适的值.
+
<percentage>
+
百分比值{{cssxref("<percentage>")}} 总是相对于 父元素块的宽度
+
auto
+
参考 {{cssxref("margin")}}.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

示例

+ +
.content { margin-top:   5%; }
+.sidebox { margin-top: 10px; }
+.logo    { margin-top: -5px; }
+#footer  { margin-top:  1em; }
+
+ +

说明

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box', '#the-margin', 'margin-top')}}{{Spec2('CSS3 Box')}}无改动
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-top')}}{{Spec2('CSS3 Transitions')}}定义 margin-top 为可动画的属性.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}{{Spec2('CSS2.1')}}去除了在inline元素的效果。
{{SpecName('CSS1', '#margin-top', 'margin-top')}}{{Spec2('CSS1')}}最初定义了该属性
+ +

浏览器兼容性

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
auto value1.0{{CompatGeckoDesktop("1")}}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/zh-cn/web/css/margin/index.html b/files/zh-cn/web/css/margin/index.html new file mode 100644 index 0000000000..937456b61d --- /dev/null +++ b/files/zh-cn/web/css/margin/index.html @@ -0,0 +1,176 @@ +--- +title: margin +slug: Web/CSS/margin +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin +--- +
{{CSSRef}}
+ +

margin 属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是 {{cssxref("margin-top")}}，{{cssxref("margin-right")}}，{{cssxref("margin-bottom")}}，和 {{cssxref("margin-left")}} 四个外边距属性设置的简写。

+ +
{{EmbedInteractiveExample("pages/css/margin.html")}}
+ + + +

上、下外边框的设置对不可替换内联元素，如 {{HTMLElement("span")}} 和 {{HTMLElement("code")}}，无效。

+ +
+

注意： 外边距控制的是元素外部空出的空间。相反，{{cssxref("padding")}} 操作元素内部空出的空间。

+
+ +

语法

+ +
/* 应用于所有边 */
+margin: 1em;
+margin: -3px;
+
+/* 上边下边 | 左边右边 */
+margin: 5% auto;
+
+/* 上边 | 左边右边 | 下边 */
+margin: 1em auto 2em;
+
+/* 上边 | 右边 | 下边 | 左边 */
+margin: 2px 1em 0 auto;
+
+/* 全局值 */
+margin: inherit;
+margin: initial;
+margin: unset;
+
+ +

margin 属性接受 1~4 个值。每个值可以是 {{cssxref("<length>")}}，{{cssxref("<percentage>")}}，或 auto。取值为负时元素会比原来更接近临近元素。

+ +
    +
  • 当只指定一个值时，该值会统一应用到全部四个边的外边距上。
    • +
  • 指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。
    • +
  • 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。
    • +
  • 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。
    • +
+ +

可取值

+ +
+
{{cssxref("length")}}
+
以固定值为外边距。
+
{{cssxref("percentage")}}
+
相对于包含块的宽度，以百分比值为外边距。
+
auto
+
让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。
+
+ +

语法格式

+ +
{{csssyntax}}
+ +

示例

+ +

简单的例子

+ +

HTML

+ +
<div class="center">此元素会被居中。</div>
+
+<div class="outside">此元素会显示在包含块之外。</div>
+ +

CSS

+ +
.center {
+  margin: auto;
+  background: lime;
+  width: 66%;
+}
+
+.outside {
+  margin: 3rem 0 0 -3rem;
+  background: cyan;
+  width: 66%;
+}
+ +

{{ EmbedLiveSample('简单的例子','100%',120) }}

+ +

更多的例子

+ +
margin: 5%;                 /* 所有边：5% 的外边距 */
+
+margin: 10px;               /* 所有边：10px 的外边距 */
+
+margin: 1.6em 20px;         /* 上边和下边：1.6em 的外边距 */
+                            /* 左边和右边：20px 的外边距  */
+
+margin: 10px 3% -1em;       /* 上边：     10px 的外边距 */
+                            /* 左边和右边：3% 的外边距   */
+                            /* 下边：     -1em 的外边距 */
+
+margin: 10px 3px 30px 5px;  /* 上边：10px 的外边距 */
+                            /* 右边：3px 的外边距  */
+                            /* 下边：30px 的外边距 */
+                            /* 左边：5px 的外边距  */
+
+margin: 2em auto;           /* 上边和下边：2em 的外边距 */
+                            /* 水平方向居中            */
+
+margin: auto;               /* 上边和下边：无外边距 */
+                            /* 水平方向居中        */
+
+ +

贴士

+ +

水平居中

+ +

在现代浏览器中实现水平居中，可以使用 {{cssxref("display")}}: flex; {{cssxref("justify-content")}}: center;。

+ +

不过，在 IE8-9 这样的不支持弹性盒布局的旧式浏览器中，上述代码并不会生效。此时要实现在父元素中居中，可使用 margin: 0 auto;。

+ +

外边距重叠

+ +

上下元素的下上外边距有时会重叠，实际空出的空间长度变为两外边距中的较长值。查看外边距重叠可找到更多信息。

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范阶段备注
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}没有明显变更。
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}削去内联元素上下方向的外边距的作用。
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}初始定义。
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.margin")}}

+ +

参阅

+ +
    +
  • CSS 基础框盒模型介绍
    • +
  • 外边距重叠
    • +
  • {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, and {{cssxref("margin-left")}}
    • +
  • 逻辑相关的属性：{{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}，和 {{cssxref("margin-inline-end")}} 与其简称 {{cssxref("margin-block")}} 和 {{cssxref("margin-inline")}}
    • +
diff --git a/files/zh-cn/web/css/mask-border-mode/index.html b/files/zh-cn/web/css/mask-border-mode/index.html new file mode 100644 index 0000000000..d23aa62491 --- /dev/null +++ b/files/zh-cn/web/css/mask-border-mode/index.html @@ -0,0 +1,58 @@ +--- +title: mask-border-mode +slug: Web/CSS/mask-border-mode +translation_of: Web/CSS/mask-border-mode +--- +
{{cssref}}{{SeeCompatTable}}
+ +

该CSS属性指定使用的混合模式面具边界。mask-border-mode

+ +

Syntax

+ +
/* Keyword values */
+mask-border-mode: luminance;
+mask-border-mode: alpha;
+
+/* Global values */
+mask-border-mode: inherit;
+mask-border-mode: initial;
+mask-border-mode: unset;
+
+ +

值

+ +
+
luminance
+
掩模边界图像的亮度值用作掩模值。
+
alpha
+
掩模边界图像的亮度值用作掩模值。
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

产品规格

+ + + + + + + + + + + + + + + + +
规格状态解释
{{SpecName("CSS Masks", "#propdef-mask-border-mode", "mask-border-mode")}}{{Spec2("CSS Masks")}}初步定义
+ +

{{cssinfo}}

+ +

Browser compatibilityEdit

+ +

TBD

diff --git a/files/zh-cn/web/css/mask-border-repeat/index.html b/files/zh-cn/web/css/mask-border-repeat/index.html new file mode 100644 index 0000000000..4a67d40648 --- /dev/null +++ b/files/zh-cn/web/css/mask-border-repeat/index.html @@ -0,0 +1,74 @@ +--- +title: mask-border-repeat +slug: Web/CSS/mask-border-repeat +translation_of: Web/CSS/mask-border-repeat +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

mask-border-repeat CSS 属性设置如何调整源图像的边缘区域以适应元素遮罩边框的尺寸。

+ +

语法

+ +
/* Keyword value */
+mask-border-repeat: stretch;
+mask-border-repeat: repeat;
+mask-border-repeat: round;
+mask-border-repeat: space;
+
+/* vertical | horizontal */
+mask-border-repeat: round stretch;
+
+/* Global values */
+mask-border-repeat: inherit;
+mask-border-repeat: initial;
+mask-border-repeat: unset;
+
+ +

可以从下面的列表中选择一个或两个值来指定 mask-border-repeat 属性。

+ +
    +
  • 指定一个值时，它会在四个边应用相同的行为。
    • +
  • 指定两个值时，第一个应用于顶部和底部，第二个应用于左侧和右侧。
    • +
+ +

Values

+ +
+
stretch
+
拉伸源图像的边缘区域以填充每个边界之间的间隙。
+
repeat
+
源图像的边缘区域被平铺（重复）以填充每个边界之间的间隙，可以裁剪平铺图形以达到合适的贴合效果。
+
round
+
源图像的边缘区域被平铺（重复）以填充每个边界之间的间隙，可以拉伸平铺图形以实现适当的贴合。
+
space
+
源图像的边缘区域被平铺（重复）以填充每个边框之间的间隙。平铺图形之间将分配额外的空间，以实现适当的贴合。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

规范

+ + + + + + + + + + + + + + + + +
规格状态解释
{{SpecName("CSS Masks", "#propdef-mask-border-repeat", "mask-border-repeat")}}{{Spec2("CSS Masks")}}初始偏差
+ +
{{cssinfo}}
+ +

浏览器兼容性

+ +

TBD

diff --git a/files/zh-cn/web/css/mask-border-slice/index.html b/files/zh-cn/web/css/mask-border-slice/index.html new file mode 100644 index 0000000000..f183bc1787 --- /dev/null +++ b/files/zh-cn/web/css/mask-border-slice/index.html @@ -0,0 +1,126 @@ +--- +title: mask-border-slice +slug: Web/CSS/mask-border-slice +translation_of: Web/CSS/mask-border-slice +--- +
{{CSSRef}}
+ +

的CSS属性除以{{cssxref("掩模边界源")}}成区域的图像集合。这些区域用于形成元素的遮罩边框的组成部分。mask-border-slice

+ +

句法

+ +
/* All sides */
+mask-border-slice: 30%;
+
+/* vertical | horizontal */
+mask-border-slice: 10% 30%;
+
+/* top | horizontal | bottom */
+mask-border-slice: 30 30% 45;
+
+/* top | right | bottom | left */
+mask-border-slice: 7 12 14 5;
+
+/* Using the `fill` keyword */
+mask-border-slice: 10% fill 7 12;
+
+/* Global values */
+mask-border-slice: inherit;
+mask-border-slice: initial;
+mask-border-slice: unset;
+
+ +

该mask-border-slice属性可使用一至四个指定<number-percentage>值来表示每个图像切片的位置。负值无效；大于其相应尺寸的值被钳制为100%。

+ +
    +
  • 当一个被指定的位置，它在从它们各自的两侧是相同的距离创建所有四片。
    • +
  • 当2点被指定的位置，所述第一值创建一个从测量的层的顶部和底部，所述第二创建从所测量的片左右。
    • +
  • 当指定了三个位置时，第一个值创建从顶部开始测量的切片，第二个值创建从左侧和右侧开始测量的切片，第三个值创建从底部开始测量的切片。
    • +
  • 当指定了四个位置时，它们创建从上，右，下和左按该顺序（顺时针）测量的切片。
    • +
+ +

fill如果使用了可选值，则可以将其放置在声明中的任何位置。

+ +

价值观

+ +
+
{{cssxref("<number>")}}
+
表示光栅图像的边缘偏移量（像素）和矢量图像的坐标。对于矢量图像，数字是相对于元素的大小，而不是源图像的大小，因此在这些情况下，通常最好使用百分比。
+
{{cssxref("<percentage>")}}
+
将边缘偏移量表示为源图像尺寸的百分比：水平偏移量的图像宽度，垂直偏移量的高度。
+
fill
+
保留中间图像区域。其宽度和高度的大小分别匹配顶部和左侧图像区域。
+
+ +

描述

+ +

切片过程总共创建了九个区域：四个角，四个边缘和一个中间区域。四个切片线，从其各自的侧面设置了给定的距离，以控制区域的大小。

+ +

由border-image或border-image-slice属性定义的九个区域

+ +

上图说明了每个区域的位置。

+ + + +

{{cssxref("mask-border-repeat")}}，{{cssxref("mask-border-width")}}和{{cssxref("mask-border-outset")}}属性决定了这些区域用于形成最终的蒙版边框。

+ +

正式定义

+ +

{{cssinfo}}

+ +

形式语法

+ +
{{csssyntax}}
+ +

例子

+ +

基本用法

+ +

该属性似乎在任何地方都不受支持。最终开始受支持时，它将用于定义从源图像获取的切片的大小，并用于创建边框蒙版。

+ +
mask-border-slice: 30 fill;
+ +

基于Chromium的浏览器支持此属性的过时版本mask-box-image-slice-带前缀：

+ +
-webkit-mask-box-image-slice: 30 fill;
+ +
+

注意：该mask-border页面提供了一个有效的示例（使用Chromium支持的过期前缀边框蒙版属性），因此您可以大致了解效果。

+
+ +
+

注意：如果希望元素的内容可见，则必须包含fill关键字。

+
+ +

技术指标

+ + + + + + + + + + + + + + + + +
规范状态评论
{{SpecName("CSS Masks","＃propdef-mask-border-slice","mask-border-slice")}}}{{Spec2("CSS Masks")}}初始定义
+ +

浏览器兼容性

+ +

待定

+ +

也可以看看

+ + diff --git a/files/zh-cn/web/css/mask-border-width/index.html b/files/zh-cn/web/css/mask-border-width/index.html new file mode 100644 index 0000000000..c161c7ac0e --- /dev/null +++ b/files/zh-cn/web/css/mask-border-width/index.html @@ -0,0 +1,86 @@ +--- +title: mask-border-width +slug: Web/CSS/mask-border-width +translation_of: Web/CSS/mask-border-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +
mask-border-width CSS 属性设置元素的 mask border的宽度
+ +

语法

+ +
/* Keyword value */
+mask-border-width: auto;
+
+/* <length> value */
+mask-border-width: 1rem;
+
+/* <percentage> value */
+mask-border-width: 25%;
+
+/* <number> value */
+mask-border-width: 3;
+
+/* vertical | horizontal */
+mask-border-width: 2em 3em;
+
+/* top | horizontal | bottom */
+mask-border-width: 5% 15% 10%;
+
+/* top | right | bottom | left */
+mask-border-width: 5% 2em 10% auto;
+
+/* Global values */
+mask-border-width: inherit;
+mask-border-width: initial;
+mask-border-width: unset;
+
+ +

可以使用从下面的值列表中选择的一个，两个，三个或四个值来指定mask-border-width属性。

+ +
    +
  • 指定一个值时，即对应四条边的宽度；
    • +
  • 指定两个值时，第一个值对应上下边框的宽度，第二个值对应左右边框的宽度；
    • +
  • 指定三个值时，第一个值对应上边框的宽度，第二个值对应左右边框的宽度，第三个值对应底部边框的宽度；
    • +
  • 指定四个值时，按顺时针方向，分别对应上，右，下，左边框的宽度。
    • +
+ +

值

+ +
+
<length-percentage>
+
mask边框宽度指定一个值或者百分比，设定百分比时，是相对于mask的长度和宽度。不能为负数。
+
<number>
+
mask边框宽度为元素border-width的倍数。不能为负数。
+
auto
+
使mask-border的宽度等于相应mask-border-slice的固有宽度或高度（以适用者为准），如果图像没有所需的固有尺寸，则使用相应的边框宽度。
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Masks", "#propdef-mask-border-width", "mask-border-width")}}{{Spec2("CSS Masks")}}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ +

待定

diff --git a/files/zh-cn/web/css/mask-border/index.html b/files/zh-cn/web/css/mask-border/index.html new file mode 100644 index 0000000000..ecd3d44814 --- /dev/null +++ b/files/zh-cn/web/css/mask-border/index.html @@ -0,0 +1,105 @@ +--- +title: mask-border +slug: Web/CSS/mask-border +translation_of: Web/CSS/mask-border +--- +
{{cssref}}{{SeeCompatTable}}
+ +

CSS 属性 mask-border 允许你创建一个紧贴元素边框边缘的mask.

+ +

该属性为以下属性的简写: {{cssxref("mask-border-source")}}, {{cssxref("mask-border-slice")}}, {{cssxref("mask-border-width")}}, {{cssxref("mask-border-outset")}}, {{cssxref("mask-border-repeat")}}, and {{cssxref("mask-border-mode")}}. 与其他简写的属性一样，任何一个漏写的子属性，将会被设置为他们的初始值.

+ +

语法

+ +
/* source | slice */
+mask-border: url('border-mask.png') 25;
+
+/* source | slice | repeat */
+mask-border: url('border-mask.png') 25 space;
+
+/* source | slice | width */
+mask-border: url('border-mask.png') 25 / 35px;
+
+/* source | slice | width | outset | repeat | mode */
+mask-border: url('border-mask.png') 25 / 35px / 12px space alpha;
+
+ +

Values

+ +
+
<'mask-border-source'>
+
该属性为源图像. 参见 {{cssxref("mask-border-source")}}.
+
<'mask-border-slice'>
+
将源图像切割后的区域的尺寸，最多可指定四个值. 参见 {{cssxref("mask-border-slice")}}.
+
<'mask-border-width'>
+
边框mask的宽度. 最多可指定四个值. 参见 {{cssxref("mask-border-width")}}.
+
<'mask-border-outset'>
+
边框mask距离元素外边界的距离. 最多可指定四个值. 参见 {{cssxref("mask-border-outset")}}.
+
<'mask-border-repeat'>
+
定义如何调整源图像的边缘区域以适应边框mask的尺寸. 最多可指定四个值. 参见 {{cssxref("mask-border-repeat")}}.
+
<'mask-border-mode'>
+
定义是否将源图片设置为明亮度mask，或者透明度mask. 参见 {{cssxref("mask-border-mode")}}.
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

范例

+ +

Bitmap

+ +

在此范例中，我们将使用钻石图案来给元素添加mask. mask的源文件是一个 ".png" 文件，大小为 90像素 * 90 像素，三颗钻石垂直和水平交叉；

+ +

+ +

HTML

+ +
<div id="bitmap">This element is surrounded by a bitmap-based mask border! Pretty neat, isn't it?</div>
+ +

CSS

+ +

为了适应一个钻石的大小，我们使用90/3 或者30，用于设置将图像切割至边角以及边缘区域的值，并设置repeat属性为 round ，该属性使得切片均匀贴合，例如：没有裁剪和空隙.

+ +
div {
+  width: 200px;
+  background-color: lavender;
+  border: 18px solid salmon;
+  padding: 10px;
+
+  mask-border:
+    url("https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png")  /* source */
+    30 /         /* slice */
+    36px 18px    /* width */
+    round;       /* repeat */
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Example")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Masks", "#propdef-mask-border", "mask-border")}}{{Spec2("CSS Masks")}}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性Edit

+ +

TBD

diff --git a/files/zh-cn/web/css/mask-image/index.html b/files/zh-cn/web/css/mask-image/index.html new file mode 100644 index 0000000000..cb3e1ce5d3 --- /dev/null +++ b/files/zh-cn/web/css/mask-image/index.html @@ -0,0 +1,183 @@ +--- +title: mask-image +slug: Web/CSS/mask-image +translation_of: Web/CSS/mask-image +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

概要

+ +

mask-image CSS属性用于设置元素上遮罩层的图像。

+ +

{{cssinfo}}

+ +

语法

+ +
/* Keyword value */
+mask-image: none;
+
+/* <mask-source> value */
+mask-image: url(masks.svg#mask1);
+
+/* <image< values */
+mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+mask-image: image(url(mask.png), skyblue);
+
+/* Multiple values */
+mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+
+/* Global values */
+mask-image: inherit;
+mask-image: initial;
+mask-image: unset;
+
+ +

Values

+ +
+
none
+
默认值，透明的黑色图像层，也就是没有遮罩层。
+
<mask-source>
+
<mask>或CSS图像的url
+
{{cssxref("<image>")}}
+
图片作为遮罩层
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

例子

+ +

CSS

+ +
#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+}
+
+ +

HTML

+ +
<div id="masked"></div>
+
+ +

{{EmbedLiveSample('例子', '100px', '100px')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Masks", "#the-mask-image", "mask-image")}}{{Spec2("CSS Masks")}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari (WebKit)
Basic support1.0{{property_prefix("-webkit")}}[1]{{CompatNo}}[2]{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}4.0{{property_prefix("-webkit")}}[3]
Multiple mask images1.0{{property_prefix("-webkit")}}{{CompatNo}}[2]{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}4.0{{property_prefix("-webkit")}}
SVG masks8.0{{CompatNo}}[2]{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{property_prefix("-webkit")}}[4]{{CompatNo}}[2]{{CompatUnknown}}{{CompatNo}}3.2{{property_prefix("-webkit")}}[5]
Multiple mask images{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatNo}}[2]{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
SVG masks{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatNo}}[2]{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+
+ +

[1] Implemented in version 8.0, Chrome initially only supported the -webkit prefixed versions of gradients as values. Later, support for the unprefixed versions was added.

+ +

[2] This feature is not implemented yet. It is only available in Nightly and Dev Edition. See {{bug("1251161")}}.

+ +

[3] Implemented in version 4.0, Safari initially only supported the -webkit prefixed versions of gradients as values.

+ +

[4] Android initially only supported the -webkit prefixed versions of gradients as values.

+ +

[5] iOS Safari initially only supported the -webkit prefixed versions of gradients as values.

diff --git a/files/zh-cn/web/css/mask-mode/index.html b/files/zh-cn/web/css/mask-mode/index.html new file mode 100644 index 0000000000..40530bfd98 --- /dev/null +++ b/files/zh-cn/web/css/mask-mode/index.html @@ -0,0 +1,114 @@ +--- +title: mask-mode +slug: Web/CSS/mask-mode +translation_of: Web/CSS/mask-mode +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

mask-modeCSS属性指示由{{cssxref("mask-image")}} 指向的遮罩被视为亮度或阿尔法遮罩。

+ +
/* 关取值的键字 */
+mask-mode: alpha;
+mask-mode: luminance;
+mask-mode: match-source;
+
+/* 多个类型的值 */
+mask-mode: alpha, match-source;
+
+/* 全局变量的值 */
+mask-mode: inherit;
+mask-mode: initial;
+mask-mode: unset;
+
+ +

{{cssinfo}}

+ +

语法

+ +

下面列出 mask-mode 的一个或多个关键字值，以逗号分隔。

+ +

Values

+ +
+
alpha
+
此关键字指示应使用掩码层图像的透明度（阿尔法通道）值作为掩码值。
+
luminance
+
此关键字指示掩膜层图像的亮度值应用作掩码值。
+
match-source
+
+

If the {{cssxref("mask-image")}} property is of type <mask-source>, the luminance values of the mask layer image should be used as the mask values.

+ +

If it is of type {{cssxref("<image>")}}, the alpha values of the mask layer image should be used as the mask values.

+ +

如果{{cssxref("mask-image")}}属性是<mask-source>类型，掩模层图像的亮度值会被作为掩模值。

+ +

如果它是类型{{cssxref("<image>")}}，掩码层图像的alpha值应用作掩码值。

+
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

CSS

+ +
#masked {
+  width: 227px;
+  height: 200px;
+  background: blue linear-gradient(red, blue);
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-mode: alpha; /* Can be changed in the live sample */
+}
+
+ + + +

结果

+ +

{{EmbedLiveSample("Example", 240, 240)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName("CSS Masks", "#the-mask-mode", "mask-mode")}}{{Spec2("CSS Masks")}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.mask-mode")}}

diff --git a/files/zh-cn/web/css/mask-repeat/index.html b/files/zh-cn/web/css/mask-repeat/index.html new file mode 100644 index 0000000000..f052ccc58d --- /dev/null +++ b/files/zh-cn/web/css/mask-repeat/index.html @@ -0,0 +1,186 @@ +--- +title: mask-repeat +slug: Web/CSS/mask-repeat +translation_of: Web/CSS/mask-repeat +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS 的 mask-repeat 属性定义了遮罩图片是否重复显示多个副本，以及如何重复。一个遮罩图片可以水平重复、垂直重复或双向重复，也可以不重复。

+ +
/* One-value syntax */
+mask-repeat: repeat-x;
+mask-repeat: repeat-y;
+mask-repeat: repeat;
+mask-repeat: space;
+mask-repeat: round;
+mask-repeat: no-repeat;
+
+/* Two-value syntax: horizontal | vertical */
+mask-repeat: repeat space;
+mask-repeat: repeat repeat;
+mask-repeat: round space;
+mask-repeat: no-repeat round;
+
+/* Multiple values */
+mask-repeat: space round, no-repeat;
+mask-repeat: round repeat, space, repeat-x;
+
+/* Global values */
+mask-repeat: inherit;
+mask-repeat: initial;
+mask-repeat: unset;
+
+ +

默认情况下，重复的图片会被剪切为图片的大小，但他们可以自行缩放适应（使用 round），或者从一端到另一端均匀分布（使用 space）。

+ +

{{cssinfo}}

+ +

语法

+ +

One or more <repeat-style> values, separated by commas.

+ +

取值

+ +
+
<repeat-style>
+
单值语法可将两个值简写为一个：
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
单值与之等效的双值
repeat-xrepeat no-repeat
repeat-yno-repeat repeat
repeatrepeat repeat
spacespace space
roundround round
no-repeatno-repeat no-repeat
+ 在双值语法中，第一个值代表了水平方向的行为，第二个值代表了垂直方向的行为。下面是每个选项的用法解释：
+
+ + + + + + + + + + + + + + + + + + + +
repeatThe image is repeated as much as needed to cover the whole mask painting area. The last image will be clipped if it doesn't fit.
spaceThe image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images. The {{cssxref("mask-position")}} property is ignored unless only one image can be displayed without clipping. The only case where clipping happens using space is when there isn't enough room to display one image.
roundAs the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original width of 260px, repeated three times, might stretch until each repetition is 300px wide, and then another image will be added. They will then compress to 225px.
no-repeatThe image is not repeated (and hence the mask painting area will not necessarily be entirely covered). The position of the non-repeated mask image is defined by the {{cssxref("mask-position")}} CSS property.
+
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

例子

+ +

单值

+ +

CSS

+ +
#masked {
+  width: 250px;
+  height: 250px;
+  background: blue linear-gradient(red, blue);
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  mask-repeat: repeat; /* 可在实时示例 live sample 中修改 */
+  margin-bottom: 10px;
+}
+
+ + + +

{{EmbedLiveSample("Single_value", "290px", "290px")}}

+ +

使用多个遮罩图片

+ +

You can specify a different <repeat-style> for each mask image, separated by commas:

+ +
.examplethree {
+  mask-image: url('mask1.png'), url('mask2.png');
+  mask-repeat: repeat-x, repeat-y;
+}
+
+ +

Each image is matched with the corresponding repeat style, from first specified to last.

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS Masks", "#the-mask-repeat", "mask-repeat")}}{{Spec2("CSS Masks")}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.mask-repeat")}}

diff --git a/files/zh-cn/web/css/mask/index.html b/files/zh-cn/web/css/mask/index.html new file mode 100644 index 0000000000..47d5048e34 --- /dev/null +++ b/files/zh-cn/web/css/mask/index.html @@ -0,0 +1,115 @@ +--- +title: mask +slug: Web/CSS/mask +translation_of: Web/CSS/mask +--- +
{{CSSRef}}
+ +

CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

+ +
/* Keyword values */
+mask: none;
+
+/* Image values */
+mask: url(mask.png);                       /* 使用位图来做遮罩 */
+mask: url(masks.svg#star);                 /* 使用 SVG 图形中的形状来做遮罩 */
+
+/* Combined values */
+mask: url(masks.svg#star) luminance;       /* Element within SVG graphic used as luminance mask */
+mask: url(masks.svg#star) 40px 20px;       /* 使用 SVG 图形中的形状来做遮罩并设定它的位置：离上边缘40px，离左边缘20px */
+mask: url(masks.svg#star) 0 0/50px 50px;   /* 使用 SVG 图形中的形状来做遮罩并设定它的位置和大小：长宽都是50px */
+mask: url(masks.svg#star) repeat-x;        /* Element within SVG graphic used as horizontally repeated mask */
+mask: url(masks.svg#star) stroke-box;      /* Element within SVG graphic used as mask extending to the box enclosed by the stroke */
+mask: url(masks.svg#star) exclude;         /* Element within SVG graphic used as mask and combined with background using non-overlapping parts */
+
+/* Global values */
+mask: inherit;
+mask: initial;
+mask: unset;
+
+ +
+

mask的简写会将 {{cssxref("mask-border")}} 设为初始值。使用 mask 的简写优于使用其他简写或者各自属性的设置来覆盖。这能保证 mask-border 也会重新设置为新的效果样式。

+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Values

+ +
+
<mask-reference>
+
设置遮罩图片的路径。详见 {{cssxref("mask-image")}}。
+
<masking-mode>
+
设置遮罩图片的模式。详见 {{cssxref("mask-mode")}}。
+
<position>
+
设置遮罩图片的位置。详见 {{cssxref("mask-position")}}。
+
<bg-size>
+
设置遮罩的大小。详见 {{cssxref("mask-size")}}。
+
<repeat-style>
+
设置遮罩图片的重复性。详见 {{cssxref("mask-repeat")}}。
+
<geometry-box>
+
如果只有一个 <geometry-box> 值被赋予，他将会设置 {{cssxref("mask-origin")}} 和 {{cssxref("mask-clip")}}。如果两个 <geometry-box> 值显示，第一个值代表 {{cssxref("mask-origin")}} 第二个值代表 {{cssxref("mask-clip")}}。
+
<geometry-box> | no-clip
+
设置区域，会被遮罩图片影响。详见 {{cssxref("mask-clip")}}。
+
<compositing-operator>
+
设置遮罩图层的组合操作。详见 {{cssxref("mask-composite")}}。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

例子

+ +
.target {
+  mask: url(#c1) luminance;
+}
+
+.anothertarget {
+  mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
+}
+
+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS Masks", "#the-mask", 'mask')}}{{Spec2("CSS Masks")}}Extends its usage to HTML elements.
+ Extends its syntax by making it a shorthand for the new mask-* properties defined in that specification.
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.mask")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/max()/index.html b/files/zh-cn/web/css/max()/index.html new file mode 100644 index 0000000000..35592e45fd --- /dev/null +++ b/files/zh-cn/web/css/max()/index.html @@ -0,0 +1,120 @@ +--- +title: max() +slug: Web/CSS/max() +translation_of: Web/CSS/max() +--- +
{{CSSRef}}
+ +

max() 这个CSS函数让你可以从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值 . max() 可以用于以下场合 {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, 或 {{CSSxRef("<integer>")}} 。

+ +
/* property: max(expression [, expression]) */
+width: max(10vw, 4em, 80px);
+
+ +

在上面这个例子中，宽度最小会是80px，除非视图宽度大于800px或者是一个em比20px宽。简单来说，最小宽度是80px。你也可以认为max()的值提供了一个属性最小可能的值。

+ +

语法

+ +

max() 方法接受一个或多个用逗号分隔的表达式作为他的参数，数值最大的表达式的值将会作为指定的属性的值。

+ +

表达式可以是数学运算 (可在 {{CSSxRef("calc", "calc()")}} 了解更多信息), 直接数值, 或者是其他表达式，例如attr()，这将会计算成一个合法的参数类型（例如 {{CSSxRef("<length>")}}），也可以是嵌套的  {{CSSxRef("min", "min()")}} 和 max() 函数.

+ +

你可以使用你的表达式中分别使用不同的单位。需要时，你也可以使用小括号来设定运算顺序。

+ +

备注

+ +
    +
  • Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.
    • +
  • It is permitted to nest min() and other max() functions as expression values. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself.
    • +
  • The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( * ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any <length> syntax value. 
    • +
  • Oftentimes you will want to combine min() and max() values, or use max() within a clamp() or calc() function.
    • +
+ +

Formal syntax

+ +
{{CSSSyntax}}
+ +

例子

+ +

使图片保持一个最小的尺寸

+ +

max() makes it easy to set a minimum width for an image. In this example, the CSS creates a logo that stretches half way across the window on larger devices, but does not not exceed 300px on wider devices, without the use of media queries:

+ +
.logo {
+  width: max(50vw, 300px);
+}
+
+ +
<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
+ +

{{EmbedLiveSample("Making_images_at_least_a_minimum_size", "100%", "60")}}

+ +

In this example, the logo will be at least 300px wide, but wider if the viewport grows above 600px, at which point it will grow as the viewport grows, always being 50% of the width of the viewport.

+ +

为字体设定一个最小字号

+ +

Another use case for CSS functions is allow a font size to grow while ensuring it is at least a mimum size, enabling responsive font sizes while ensuring legibility.

+ +

Let's look at some CSS:

+ +
h1 {
+  font-size: 2rem;
+}
+h1.responsive {
+  font-size: max(4vw, 2em, 2rem);
+}
+
+ +

The font-size will at minimum be 2rems, or twice the default size of font for the page. This ensure it is legible and ensures accessibility

+ +
<h1>This text is always legible, but doesn't change size</h1>
+<h1 class="responsive">This text is always legible, and is responsive, to a point</h1>
+
+ +

{{EmbedLiveSample("Setting_a_minimum_size_for_a_font", "100%", "300")}}

+ +

Think of the max() function as finding the minimum value allowed for a property.

+ +

无障碍

+ +

When max() is used for controlling text size, make sure the text is always large enough to read. A suggestion is to use the {{CSSxRef("min", "min()")}} function nested within a max() that has as its second value a relative length unit that is always large enough to read. For example:

+ +
small {
+  font-size: max(min(0.5vw, 0.5em), 1rem);
+}
+ +

This ensures a minimum size of 1rem, with a text size that scales if the page is zoomed.

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Values", "#calc-notation", "max()")}}{{Spec2("CSS4 Values")}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.types.max")}}

+ +

也可以看看

+ +
    +
  • {{CSSxRef("calc", "calc()")}}
    • +
  • {{CSSxRef("clamp", "clamp()")}}
    • +
  • {{CSSxRef("min", "min()")}}
    • +
  • CSS Values
    • +
diff --git a/files/zh-cn/web/css/max-height/index.html b/files/zh-cn/web/css/max-height/index.html new file mode 100644 index 0000000000..919ed11b3b --- /dev/null +++ b/files/zh-cn/web/css/max-height/index.html @@ -0,0 +1,117 @@ +--- +title: max-height +slug: Web/CSS/max-height +translation_of: Web/CSS/max-height +--- +
{{CSSRef}}
+ +

CSS属性 max-height 设置元素的最大高度。它防止{{cssxref("height")}}属性的使用值（used value） 大于 max-height 的指定值。

+ +
{{EmbedInteractiveExample("pages/css/max-height.html")}}
+ + + +

max-height 会覆盖{{cssxref("height")}}, 而{{cssxref("min-height")}} 会覆盖 max-height.

+ +

Syntax

+ +
/* <length> value */
+max-height: 3.5em;
+
+/* <percentage> value */
+max-height: 75%;
+
+/* Keyword values */
+max-height: none;
+max-height: max-content;
+max-height: min-content;
+max-height: fit-content(20em);
+
+/* Global values */
+max-height: inherit;
+max-height: initial;
+max-height: unset;
+
+ +

Values

+ +
+
{{cssxref("<length>")}}
+
Defines the max-height as an absolute value.
+
{{cssxref("<percentage>")}}
+
Defines the max-height as a percentage of the containing block's height.
+
auto
+
The browser will calculate and select a max-height for the specified element.
+
none
+
No limit on the size of the box.
+
max-content
+
The intrinsic preferred max-height.
+
min-content
+
The intrinsic minimum max-height.
+
fit-content({{cssxref("<length-percentage>")}})
+
Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)).
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
table { max-height: 75%; }
+
+form { max-height: none; }
+
+ +

Accessibility concerns

+ +

Ensure that elements set with a max-height are not truncated and/or do not obscure other content when the page is zoomed to increase text size.

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'max-height')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-height')}}{{Spec2('CSS3 Sizing')}}Adds the max-content, min-content, fit-content keywords.
{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height')}}{{ Spec2('CSS2.1') }}Initial definition.
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.max-height")}}

+ +

See also

+ +
    +
  • The box model, {{cssxref("box-sizing")}}
    • +
  • {{Cssxref("height")}}, {{Cssxref("min-height")}}
    • +
diff --git a/files/zh-cn/web/css/max-width/index.html b/files/zh-cn/web/css/max-width/index.html new file mode 100644 index 0000000000..10a4e12f17 --- /dev/null +++ b/files/zh-cn/web/css/max-width/index.html @@ -0,0 +1,214 @@ +--- +title: max-width +slug: Web/CSS/max-width +translation_of: Web/CSS/max-width +--- +

{{ CSSRef() }}

+ +

摘要

+ +

max-width 属性用来给元素设置最大宽度值. 定义了max-width的元素会在达到max-width值之后避免进一步按照width属性设置变大.

+ +

{{ Cssxref("max-width") }} 会覆盖{{cssxref("width")}}设置, 但 {{ Cssxref("min-width") }}设置会覆盖 {{ Cssxref("max-width") }}.

+ +

{{cssinfo}}

+ +

语法

+ +
/* <长度> 值 */
+max-width: 3.5em;
+
+/* <百分比> 值 */
+max-width: 75%;
+
+/* 关键字 */
+max-width: none;
+max-width: max-content;
+max-width: min-content;
+max-width: fit-content;
+max-width: fill-available;
+
+/* 全局设置 */
+max-width: inherit;
+max-width: initial;
+max-width: unset;
+
+ +

可选值

+ +
+
none
+
元素未设置最大值
+
<长度>
+
请参阅{{cssxref("<length>")}}所提及的长度单位.
+
<百分比>
+
以父级块级容器宽度的百分比{{cssxref("<percentage>")}}作为最大宽度.
+
max-content{{experimental_inline()}}
+
The intrinsic preferred width.
+
min-content{{experimental_inline()}}
+
The intrinsic minimum width.
+
fill-available{{experimental_inline()}}
+
The containing block width minus horizontal margin, border, and padding. Some browsers implement an ancient name for this keyword, available.
+
fit-content{{experimental_inline()}}
+
与max-content等价.
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

例子

+ +

在下面的例子里,id为"child"的<div>元素设置了width值, 使它的宽度与父元素"parent"相等(100%),但是max-width值限制了它最大宽度只能到150px.

+ +
+
<div id="parent">
+    <div id="child">
+        The Mozilla community produces a lot of great software.
+    </div>
+</div>
+
+ +
#parent { width: 300px; }
+
+#child  { background: gold;
+          width: 100%;
+          max-width: 150px;
+        }
+
+
+ +

{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}

+ +

fit-content 值可以用来给元素设置基于其内容大小的宽度:

+ +
+ + +
#parent { background: lightblue;
+          width: 300px; }
+
+#child  { background: gold;
+          width: 100%;
+          max-width: -moz-fit-content;
+          max-width: -webkit-fit-content;
+        }
+
+
+ +

{{EmbedLiveSample("fit-content-demo", 400, 100)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width') }}{{ Spec2('CSS3 Sizing') }}Adds the max-content, min-content, fit-content, and fill-available keywords.
+ Both CSS3 Box and CSS3 Writing Modes drafts defined at some point these keywords. These drafts are superseded by this spec.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}{{ Spec2('CSS3 Transitions') }}Defines max-width as animatable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1.0")}}7.04.02.0.2 (416),
+ buggy before
applies to <table> [1]{{ CompatNo() }}{{CompatVersionUnknown()}}{{ CompatNo() }}{{CompatVersionUnknown()}}{{ CompatNo() }}
max-content, min-content, fit-content, and fill-available {{ experimental_inline() }}{{ CompatNo() }} [3]{{CompatGeckoDesktop("1.9")}}{{property_prefix("-moz")}} [2]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }} [3]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] CSS 2.1 explicitly leaves the behavior of max-width with {{ HTMLElement("table") }} undefined. Therefore any behavior is CSS2.1-compliant; newer CSS specifications may define this behavior, so Web developers shouldn't rely on a specific one now.

+ +

[2] Gecko experimentally implements the definitions given in CSS3 Basic Box. This one defines available and not fill-available. Also the definition of fit-content is simpler than in CSS3 Sizing.

+ +

[3] WebKit implements an earlier proposal for setting the height to an intrinsic height: the keywords intrinsic, instead of max-content, and min-intrinsic, instead of min-content There is no equivalent for fill-available or fit-content.

+ +

参考链接

+ +
    +
  • {{ Cssxref("width") }}, {{ Cssxref("min-width") }}, {{ Cssxref("max-height") }}
    • +
  • The box model, {{ Cssxref("box-sizing") }}
    • +
diff --git a/files/zh-cn/web/css/min()/index.html b/files/zh-cn/web/css/min()/index.html new file mode 100644 index 0000000000..48914aeb84 --- /dev/null +++ b/files/zh-cn/web/css/min()/index.html @@ -0,0 +1,130 @@ +--- +title: min() +slug: Web/CSS/min() +translation_of: Web/CSS/min() +--- +

{{CSSRef}}

+ +

min() CSS 方法允许你从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值。min() 方法可以用于以下任何属性中 {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}},{{CSSxRef("<number>")}}, 或者 {{CSSxRef("<integer>")}}。

+ +
/* property: min(expression [, expression]) */
+width: min(1vw, 4em, 80px);
+ +

在上面的例子中，宽度最多是80px。如果视口的宽度小于800px，或者一个em的宽度小于20px，则会更窄。换句话说，最大宽度是80px，

+ +

语法

+ +

min() 方法拥有一个或多个逗号分隔符表达式作为参数，表达式的值中最小的值作为参数值。表达式可以是数学函数 (查看 {{CSSxRef("calc", "calc()")}} 了解更多), 字面量，或者其他表达式，比如 {{CSSxRef("attr", "attr()")}}, 可以求得有效值的的类型 (比如 {{CSSxRef("<length>")}})。如果你愿意，你甚至可以在表达式中给每个值一个不同的单位。并且在需要的地方只用圆括号改变计算优先级。

+ +

注意

+ +
    +
  • Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.max
    • +
  • It is permitted to nest max() and other min() functions as expression values. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself.
    • +
  • The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( * ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any <length> syntax value. You can use different units for each value in your expression. You may also use parentheses to establish computation order when needed.
    • +
  • Oftentimes you will want to comine min() and max() values, or use min() within a clamp() or calc() function.
    • +
  • You can provide more than two arguments, if you have multiple constraints to apply.
    • +
+ +

Formal syntax

+ +
{{CSSSyntax}}
+ +

Examples

+ +

Growing images to a maximum size

+ +

min() 让我们在设置图像的最大宽度时更简单。在下面这个例子中，在小型设备上宽度拉伸为window的一半，但在大型设备上，不超过300px，不使用媒体查询：

+ +
.logo {
+  width: min(50vw, 300px);
+}
+
+ +
<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
+ +

{{EmbedLiveSample("Growing_images_to_a_maximum_size", "100%", "60")}}

+ +

在这个例子中，除非视口比 600px 更窄，否则logo的宽会被设置为 300px，到时候，它会随着视口的缩小而缩小，而且总是视口宽度的50%。

+ +

给 label 和 input 设置最大值

+ +

CSS方法的另一个用途时设置响应式组件（form）的最大尺寸：让 label 和 input 的宽度随着组件的缩小而缩小。

+ +

看下面的样式：

+ +
input, label {
+  padding: 2px;
+  box-sizing: border-box;
+  display: inline-block;
+  width: min(40%, 400px);
+  background-color: pink;
+}
+
+form {
+  margin: 4px;
+  border: 1px solid black;
+  padding: 4px;
+}
+
+ +

这里，form 的 margin，border，padding 总是它父元素的宽度的100%。我们声明 input 和 label 的宽度比form的40%还小或者400px宽，只要取决于哪一个最小。换句话说，input 和 label 的最大宽度就是400px，最窄就是form的40%。因此看起来会显得很小。

+ +
<form>
+  <label>Type something:</label>
+  <input type="text">
+</form>
+
+ +

{{EmbedLiveSample("Setting_a_maximum_size_for_an_label_and_input", "100%", "80")}}

+ +

Think of the min() function as finding the maximum value allowed for a property.

+ +

无障碍问题

+ +

当min() 用于控制文本大小时，要保证文本足够大以便于阅读。建议把 min() 方法嵌入到 {{CSSxRef("max", "max()")}} 中， relative length unit 这样就可以便于阅读，比如：

+ +
small {
+  font-size: max(min(0.5vw, 0.5em), 1rem);
+}
+ +

这用于保证最小值是1rem，这样在页面缩放时文本也会缩放。

+ + + +

说明

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Values", "#calc-notation", "min()")}}{{Spec2("CSS4 Values")}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("css.types.min")}}

+ +

See also

+ +
    +
  • {{CSSxRef("calc", "calc()")}}
    • +
  • {{CSSxRef("clamp", "clamp()")}}
    • +
  • {{CSSxRef("max", "max()")}}
    • +
  • CSS Values
    • +
diff --git a/files/zh-cn/web/css/min-height/index.html b/files/zh-cn/web/css/min-height/index.html new file mode 100644 index 0000000000..29775ae7f5 --- /dev/null +++ b/files/zh-cn/web/css/min-height/index.html @@ -0,0 +1,111 @@ +--- +title: min-height +slug: Web/CSS/min-height +translation_of: Web/CSS/min-height +--- +
{{CSSRef}}
+ +

CSS 属性 min-height 能够设置元素的最小高度。这样能够防止 {{cssxref("height")}} 属性的应用值小于 min-height 的值。

+ +
{{EmbedInteractiveExample("pages/css/min-height.html")}}
+ + + +

当 min-height 大于 {{cssxref("max-height")}} 或 {{cssxref("height")}} 时，元素的高度会设置为 min-height 的值。

+ +

语法

+ +
/* <长度> 数值 */
+min-height: 3.5em;
+
+/* <百分比> 数值 */
+min-height: 10%;
+
+/* 关键词 */
+min-height: max-content;
+min-height: min-content;
+min-height: fit-content(20em);
+
+/* 全局数值 */
+min-height: inherit;
+min-height: initial;
+min-height: unset;
+
+ +

Values

+ +
+
{{cssxref("<length>")}}
+
定义 min-height 为一个绝对数值。
+
{{cssxref("<percentage>")}}
+
定义 min-height 为一个相对于父容器高度的百分数。
+
auto
+
浏览器将通过计算为指定元素选择一个 min-height 值。
+
none
+
不限制盒容器的尺寸。
+
max-content
+
The intrinsic preferred min-height.
+
min-content
+
The intrinsic minimum min-height.
+
fit-content({{cssxref("<length-percentage>")}})
+
Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)).
+
+ +

Formal definition

+ +

{{cssinfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

示例

+ +

Setting min-height

+ +
table { min-height: 75%; }
+
+form { min-height: 0; }
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'min-height')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height')}}{{Spec2('CSS3 Sizing')}}Adds the max-content, min-content, fit-content keywords.
{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.min-height")}}

+ +

相关链接

+ +
    +
  • The box model, {{cssxref("box-sizing")}}
    • +
  • {{cssxref("height")}}, {{cssxref("max-height")}}
    • +
diff --git a/files/zh-cn/web/css/min-width/index.html b/files/zh-cn/web/css/min-width/index.html new file mode 100644 index 0000000000..89e565f074 --- /dev/null +++ b/files/zh-cn/web/css/min-width/index.html @@ -0,0 +1,111 @@ +--- +title: min-width +slug: Web/CSS/min-width +translation_of: Web/CSS/min-width +--- +

{{ CSSRef() }}

+ +

概述

+ +

min-width 属性为给定元素设置最小宽度。它可以阻止 {{ Cssxref("width") }} 属性的应用值小于 min-width 的值。

+ +

min-width 的值会同时覆盖 {{ Cssxref("max-width") }} 和 {{ Cssxref("width") }}。

+ +

语法

+ +
形式语法： {{csssyntax("min-width")}}
+ +
/* <length> value */
+min-width: 3.5em
+
+/* <percentage> value */
+min-width: 10%
+
+/* Keyword values */
+min-width: max-content
+min-width: min-content
+min-width: fit-content
+min-width: fill-available
+
+/* Global values */
+min-width: inherit
+min-width: initial
+min-width: unset
+
+ +

值

+ +
+
<length>
+
固定的最小宽度。 查看 {{cssxref("<length>")}} 了解可用单位。负值会让该声明失效。
+
<percentage>
+
固定的最小宽度表现为包含块宽度的 {{cssxref("<percentage>")}} (百分比值)。负值会让该声明失效。
+
+ +

Keyword values

+ +
+
auto
+
用于弹性元素的默认最小宽度。相比其他布局中以0为默认值，auto能为弹性布局指明更合理的默认表现。
+
max-content {{ experimental_inline() }}
+
固有首选宽度。
+
min-content {{ experimental_inline() }}
+
固有最小宽度
+
fill-available{{ experimental_inline() }}
+
包含块的宽度减去水平 margin、border 和 padding。有些浏览器在实现时使用了该关键字的早期名字： available。
+
fit-content {{ experimental_inline() }}
+
等同于 min(max-content, max(min-content, fill-available).
+
+ +

示例

+ +
table { min-width: 75%; }
+
+form { min-width: 0; }
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width') }}{{ Spec2('CSS3 Sizing') }}增加 max-content， min-content， fit-content， 和 fill-available 关键字。
+ CSS3 Box 与 CSS3 Writing Modes 两份草案在某种程度上定义了这些关键字。本草案取代了这些草案。
{{ SpecName('CSS3 Flexbox', '#min-auto', 'min-width') }}{{ Spec2('CSS3 Flexbox') }}早期的修订规范 增加了 auto 关键字并将其作为初始值。然而 CSSWG 随后重置了这一变更。直至2013 年 3月 29日，最新的 编辑草案 没有对 min-width 属性做任何修改(也就是说 auto 值已经不被推荐)。
{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-width') }}{{ Spec2('CSS3 Transitions') }}定义 min-width 为动画属性。
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width') }}{{ Spec2('CSS2.1') }}初始定义。
+ +

浏览器兼容性

+ +

{{Compat("css.properties.min-width")}}

+ +
+ +

See also

+ +
    +
  • {{ Cssxref("width") }}, {{ Cssxref("max-width") }}, {{ Cssxref("min-height") }}
    • +
  • The box model, {{ Cssxref("box-sizing") }}
    • +
diff --git a/files/zh-cn/web/css/minmax()/index.html b/files/zh-cn/web/css/minmax()/index.html new file mode 100644 index 0000000000..12a51de21a --- /dev/null +++ b/files/zh-cn/web/css/minmax()/index.html @@ -0,0 +1,200 @@ +--- +title: minmax() +slug: Web/CSS/minmax() +tags: + - CSS + - CSS函数 + - CSS网格 + - Web + - 参考 + - 实验 + - 布局 +translation_of: Web/CSS/minmax() +--- +

CSS函数minmax()定义了一个长宽范围的闭区间， 它与CSS网格布局一起使用。

+ +
/* <inflexible-breadth>, <track-breadth> values */
+minmax(200px, 1fr)
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(100px, max-content)
+minmax(min-content, 400px)
+minmax(max-content, auto)
+minmax(auto, 300px)
+minmax(min-content, auto)
+
+/* <fixed-breadth>, <track-breadth> values */
+minmax(200px, 1fr)
+minmax(30%, 300px)
+minmax(400px, 50%)
+minmax(50%, min-content)
+minmax(300px, max-content)
+minmax(200px, auto)
+
+/* <inflexible-breadth>, <fixed-breadth> values */
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(min-content, 200px)
+minmax(max-content, 200px)
+minmax(auto, 300px)
+
+ +

语法

+ +

此函数包含两个参数，最小值 和 最大值.

+ +

每个参数分别是<length>、<percentage>、<flex>的一种，或者是max-content、min-content、或auto之一。

+ +

如果 最大值 < 最小值，则最大值被忽略并且minmax(最小值,最大值)被看成最小值。{{cssxref("flex_value","<flex>")}} 值作为最大值时设置网格轨道的弹性系数；作为最小值时无效。

+ +

取值

+ +
+
{{cssxref("<length>")}}
+
非负长度。
+
{{cssxref("<percentage>")}}
+
相对于列轨道中网格容器的内联大小的非负百分比，以及行轨道中网格容器的块长宽。 如果网格容器的长宽取决于其轴的长宽，则<percentage> 必须取值为auto。{{glossary("user agent")}} 可将轨道的内部长宽贡献调整为网格容器的长宽，并按将导致百分比达到的最小值来增加轨道的最终长宽。
+
{{cssxref("<flex>")}}
+
单位为fr的非负维度，指定轨道弹性布局的系数值。每个<flex>长度的轨道都以其系数值比例均分剩余空间。
+
max-content
+
表示网格的轨道长度自适应内容最大的那个单元格。
+
min-content
+
表示网格的轨道长度自适应内容最小的那个单元格。
+
auto
+
作为最大值时，等价于 max-content。作为最小值时，它表示轨道中单元格最小长宽 (由{{cssxref("min-width")}}/{{cssxref("min-height")}})的最大值。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+
+

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>
+    Item as wide as the content,<br/>
+    but at most 300 pixels.
+  </div>
+  <div>
+    Item with flexible width but a minimum of 200 pixels.
+  </div>
+  <div>
+    Inflexible item of 150 pixels width.
+  </div>
+</div>
+
+

Result

+ +

{{EmbedLiveSample("example", "100%", 200)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}{{Spec2("CSS Grid")}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.grid-template-columns.minmax")}}

+ +

参考

+ + + + diff --git a/files/zh-cn/web/css/mix-blend-mode/index.html b/files/zh-cn/web/css/mix-blend-mode/index.html new file mode 100644 index 0000000000..97c0590e1e --- /dev/null +++ b/files/zh-cn/web/css/mix-blend-mode/index.html @@ -0,0 +1,661 @@ +--- +title: mix-blend-mode +slug: Web/CSS/mix-blend-mode +translation_of: Web/CSS/mix-blend-mode +--- +

{{CSSRef()}}

+ +

mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

+ +
{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}
+ + + +

语法

+ +
mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+
+ +

值

+ +
+
{{cssxref("<blend-mode>")}}
+
表示应该应用的混合模式。
+
+ +

形式定义

+ +

{{cssinfo}}

+ +

形式语法

+ +
{{csssyntax}}
+ +

示例

+ +

不同mix-blend-mode值的效果

+ + + +
{{EmbedLiveSample("Effect_of_different_mix-blend-mode_values", "100%", 1600, "", "", "example-outcome-frame")}}
+ +

HTML中使用 mix-blend-mode

+ +

HTML

+ +
<div class="isolate">
+  <div class="circle circle-1"></div>
+  <div class="circle circle-2"></div>
+  <div class="circle circle-3"></div>
+</div>
+ +

CSS

+ +
.circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  mix-blend-mode: screen;
+  position: absolute;
+}
+
+.circle-1 {
+  background: red;
+}
+
+.circle-2 {
+  background: lightgreen;
+  left: 40px;
+}
+
+.circle-3 {
+  background: blue;
+  left: 20px;
+  top: 40px;
+}
+
+.isolate {
+  isolation: isolate; /* Without isolation, the background color will be taken into account */
+  position: relative;
+}
+ +

Result

+ +

{{EmbedLiveSample("Using_mix-blend-mode_with_HTML", "100%", "180")}}

+ +

SVG中使用 mix-blend-mode

+ +

SVG

+ +
<svg>
+  <g class="isolate">
+    <circle cx="40" cy="40" r="40" fill="red"/>
+    <circle cx="80" cy="40" r="40" fill="lightgreen"/>
+    <circle cx="60" cy="80" r="40" fill="blue"/>
+  </g>
+</svg>
+ +

CSS

+ +
circle { mix-blend-mode: screen; }
+.isolate { isolation: isolate; } /* Without isolation, the background color will be taken into account */
+
+ +

Result

+ +

{{EmbedLiveSample("Using_mix-blend-mode_with_SVG", "100%", "180")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}{{ Spec2('Compositing') }}Initial specification.
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.mix-blend-mode")}}

+ +

另见

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("background-blend-mode")}}
    • +
diff --git a/files/zh-cn/web/css/number/index.html b/files/zh-cn/web/css/number/index.html new file mode 100644 index 0000000000..ab51b9d680 --- /dev/null +++ b/files/zh-cn/web/css/number/index.html @@ -0,0 +1,132 @@ +--- +title: +slug: Web/CSS/number +tags: + - CSS数据类型 + - 布局 +translation_of: Web/CSS/number +--- +
{{CSSRef}}
+ +

语法

+ +

<数字> CSS 数据类型代表一个数字，可为整数或小数。它的语法扩展了{{cssxref("<integer>")}}的数据值。要表示一个小数则加上小数部分 -- “."后跟一或多为十进制数字--到任何{{cssxref("<integer>")}}数据值。像{{cssxref("<integer>")}}数据类型一样，<number>没有任何单位，并不是一个CSS尺寸。

+ +

插值

+ +

 <number> CSS数据类型的值可以被插值，用于动画。这种情况下，它们的插值是浮点实数。插值的速度取决于动画的 timing function。

+ +

示例

+ +

合法值示例：

+ +
12          A raw <integer> is also a <number>
+4.01        正非整 <数字>
+-456.8      负非整 <数字>
+0.0         零
++0.0        带正号的零
+-0.0        带负号的零(尽管奇怪，但合法)
+.60         点前的数字可以省略
+10e3        科学计数法
+-3.4e-2     科学计数法最复杂的情况
+
+ +

非法值示例:

+ +
12.         点后需有数字
++-12.2      只能有一个符号
+12.1.1      只能有一个点
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('CSS3 Values', '#numbers', '<number>')}}{{Spec2('CSS3 Values')}}与CSS Level 2 (Revision 1)没有明显变化
{{SpecName('CSS2.1', 'syndata.html#numbers', '<number>')}}{{Spec2('CSS2.1')}}Explicitly defined
{{SpecName('CSS1', '', '<number>')}}{{Spec2('CSS1')}}Implicitly defined
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
basic1.01.0 (1.0)<=5.0yes1.0 (85)
Scientific notation?2911??
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic supportyesyesyesyesyes
+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/object-fit/index.html b/files/zh-cn/web/css/object-fit/index.html new file mode 100644 index 0000000000..754a37dd05 --- /dev/null +++ b/files/zh-cn/web/css/object-fit/index.html @@ -0,0 +1,165 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +tags: + - CSS + - 图像 + - 图像大小 + - 图像缩放 +translation_of: Web/CSS/object-fit +--- +
{{CSSRef}}
+ +

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

+ +

您可以通过使用 {{cssxref("object-position")}} 属性来切换被替换元素的内容对象在元素框内的对齐方式。

+ +
{{EmbedInteractiveExample("pages/css/object-fit.html")}}
+ + + +

语法

+ +

object-fit 属性由下列的值中的单独一个关键字来指定。

+ +

取值

+ +
+
contain
+
被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。
+
cover
+
被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
+
fill
+
被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。
+
none
+
被替换的内容将保持其原有的尺寸。
+
scale-down
+
内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

例子

+ +

HTML

+ +
<div>
+  <h2>object-fit: fill</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>
+
+  <h2>object-fit: contain</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>
+
+  <h2>object-fit: cover</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>
+
+  <h2>object-fit: none</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>
+
+  <h2>object-fit: scale-down</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>
+
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/>
+
+</div>
+
+ +

CSS

+ +
h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+
+ +

结果

+ +

{{ EmbedLiveSample('Example', 500, 450) }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}} 
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.object-fit")}}

+ +

参见

+ +
    +
  • 其他与图像相关的CSS属性: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}。
    • +
  • {{cssxref("background-size")}}
    • +
diff --git a/files/zh-cn/web/css/object-position/index.html b/files/zh-cn/web/css/object-position/index.html new file mode 100644 index 0000000000..cb4f8d6bdf --- /dev/null +++ b/files/zh-cn/web/css/object-position/index.html @@ -0,0 +1,118 @@ +--- +title: object-position +slug: Web/CSS/object-position +tags: + - CSS + - CSS属性 + - object-position +translation_of: Web/CSS/object-position +--- +
{{CSSRef}}
+ +

CSS 属性 object-position 规定了可替换元素的内容，在这里我们称其为对象（即 object-position 中的 object），在其内容框中的位置。可替换元素的内容框中未被对象所覆盖的部分，则会显示该元素的背景（{{cssxref("background")}}）。

+ +

你还可以使用 {{cssxref("object-fit")}} 属性来改变可替换元素的对象的内在（原文：intrinsic）大小（即它看上去的大小）的调整方式，借助拉伸与缩放等使对象更好地适应元素的内容框。

+ +
{{EmbedInteractiveExample("pages/css/object-position.html")}}
+ + + +

语法

+ +
/* <position> values */
+object-position: center top;
+object-position: 100px 50px;
+
+/* Global values */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+
+ +

取值

+ +
+
{{cssxref("<position>")}}
+
使用 1 到 4 个值来定义该元素在它所处的二维平面中的定位。可以使用相对或绝对偏移。
+
+ +
+

注意：这些定位方式允许被替换元素的对象被定位到内容框外部。

+
+ +

正式语法

+ +
{{csssyntax}}
+ +

例子

+ +

HTML

+ +

Here we see HTML that includes two {{HTMLElement("img")}} elements, each displaying the MDN logo.

+ +

这里我们看到包含两个img元素的HTML，分别展示了MDN的logo

+ +
<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
+<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
+
+ +

CSS

+ +

CSS包括<img>元素本身的默认样式，以及两个图像各自的样式。

+ +
img {
+  width: 300px;
+  height: 250px;
+  border: 1px solid black;
+  background-color: silver;
+  margin-right: 1em;
+  object-fit: none;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 100% 10%;
+}
+
+ +

第一个图像的左边缘距元素框左边缘10个像素。第二个图像的右边缘与元素框的右边缘齐平，并位于元素框高度下方10％处。

+ +

输出

+ +

{{ EmbedLiveSample('Example', '100%','300px') }}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.object-position")}}

+ +

参见

+ +
    +
  • 其他与图像相关的 CSS 属性: {{cssxref("object-fit")}}，{{cssxref("image-orientation")}}，{{cssxref("image-rendering")}}，{{cssxref("image-resolution")}}。
    • +
diff --git a/files/zh-cn/web/css/opacity/index.html b/files/zh-cn/web/css/opacity/index.html new file mode 100644 index 0000000000..4723b4338c --- /dev/null +++ b/files/zh-cn/web/css/opacity/index.html @@ -0,0 +1,154 @@ +--- +title: opacity +slug: Web/CSS/opacity +translation_of: Web/CSS/opacity +--- +
{{CSSRef}}
+ +

概述

+ +

opacity属性指定了一个元素的不透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。

+ +

当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。

+ +

使用opacity属性，当属性值不为1时，会把元素放置在一个新的层叠上下文中。

+ +

{{cssinfo}}

+ +

语法

+ +
/* 完全不透明 */
+opacity: 1;
+opacity: 1.0;
+
+/* 半透明 */
+opacity: 0.6;
+
+/* 完全透明 */
+opacity: 0.0;
+opacity: 0;
+
+opacity: inherit;
+
+ +

属性值

+ +
+
<number>
+
 {{cssxref("<number>")}} 是一个0.0到1.0范围内的数字值,这个数值既包含也代表通道的透明度，也就是alpha通道的值。任何一个溢出这个取值区间的值，尽管有效，但会被解析为在取值范围内最靠近它的值。 + + + + + + + + + + + + + + + + + + + +
值释义
0元素完全透明 (即元素不可见).
任何一个位于0.0-1.0之间的 {{cssxref("<number>")}}元素半透明 (即元素后面的背景可见).
1元素完全不透明(即元素后面的背景不可见).
+
+
+ +

正式规则

+ +
{{csssyntax("opacity")}}
+ +

示例

+ +

基本示例

+ +
div { background-color: yellow; }
+.light {
+  opacity: 0.2; /* Barely see the text over the background */
+}
+.medium {
+  opacity: 0.5; /* See the text more clearly over the background */
+}
+.heavy {
+  opacity: 0.9; /* See the text very clearly over the background */
+}
+
+ +
<div class="light">You can barely see this.</div>
+<div class="medium">This is easier to see.</div>
+<div class="heavy">This is very easy to see.</div>
+
+ +
{{EmbedLiveSample('Basic_example', '640', '64')}}
+ +

:hover时opacity的不同

+ +
img.opacity {
+  opacity: 1;
+  filter: alpha(opacity=100); /* IE8 and lower */
+  zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */
+}
+
+img.opacity:hover {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  zoom: 1;
+}
+ +
<img src="//developer.mozilla.org/media/img/mdn-logo.png"
+     alt="MDN logo" width="128" height="146"
+     class="opacity">
+
+ +

{{EmbedLiveSample('Different_opacity_with_hover', '150', '175')}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}{{Spec2('CSS3 Transitions')}}定义动态透明度
{{SpecName('CSS3 Colors', '#propdef-opacity', 'opacity')}}{{Spec2('CSS3 Colors')}}初始定义
+ +

浏览器兼容性

+ +
{{Compat("css.properties.opacity", 2)}}
+ +
+ +
    +
  • 历史: 在 Mozilla 1.7 (Firefox 0.9)版本 之前，“-moz-opacity” 属性一直以一种非标准的方式在使用。在Firefox 0.9版本中 ，这种行为得到了改变，这个属性被重命名为opacity。从那以后，-moz-opacity属性仅作为opacity属性的别名而存在。
    • +
  • Gecko 1.9.1 (Firefox 3.5) 以后的版本不再支持 -moz-opacity属性 和 Javascript中的MozOpacity属性（Gecko13中删除），到目前为止，你应该使用opacity属性。
    • +
  • 在9.0版本之前，Internet Explore浏览器不支持opacity属性, 它宁愿使用私有滤镜代替。.
    • +
  • IE4 —IE9 支持下面的扩展形式： progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).
    • +
  • IE8引入了与“fliter滤镜”同义的"-ms-filter" 属性。在IE10中不再支持这两个属性。
    • +
  • 和“-moz-opacity” 属性相似, "-khtml-opacity"从2004年年初 (Safari 1.2发布)，已经不再受到支持。
    + Konqueror 从来不支持 -khtml-opacity 属性，从第四版开始，它一直自持opacity属性。
    • +
+ +

阅读更多

+ + diff --git a/files/zh-cn/web/css/order/index.html b/files/zh-cn/web/css/order/index.html new file mode 100644 index 0000000000..44f597ff11 --- /dev/null +++ b/files/zh-cn/web/css/order/index.html @@ -0,0 +1,164 @@ +--- +title: order +slug: Web/CSS/order +translation_of: Web/CSS/order +--- +
{{ CSSRef("CSS Flexible Boxes") }}
+ +

概述

+ +

CSS order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。

+ +
+

注意: order 仅仅对元素的视觉顺序 (visual order) 产生作用，并不会影响元素的逻辑或 tab 顺序。 order 不可以用于非视觉媒体，例如 speech。

+
+ +

{{cssinfo}}

+ +

参考 使用 CSS 弹性盒子 获取更多信息。

+ +

语法

+ +
/* Numerical value including negative numbers */
+order: 5;
+order: -5;
+
+/* Global values */
+order: inherit;
+order: initial;
+order: unset;
+
+ +

取值

+ +
+
<integer>
+
表示此可伸缩项目所在的次序组。
+
+ +

Formal syntax

+ +
{{csssyntax}}
+
+ +

例子

+ +

这里是一个基本的HTML代码片段:

+ +
<!DOCTYPE html>
+<header>…</header>
+<div id='main'>
+   <article>…</article>
+   <nav>…</nav>
+   <aside>…</aside>
+</div>
+<footer>…</footer>
+ +

下面的CSS代码会创建一个经典的双 sidebar 围绕一个中央内容块的布局。 Flexible Box 布局模块会自动地创建三个具有相同高度的内容块，也会使用所有可用的水平空间。

+ +
#main { display: flex; }
+#main > article { flex:1;         order: 2; }
+#main > nav     { width: 200px;   order: 1; }
+#main > aside   { width: 200px;   order: 3; }
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox', '#order-property', 'order') }}{{ Spec2('CSS3 Flexbox') }} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome(21.0) }}{{ property_prefix("-webkit") }}
+ 29		 +

{{ CompatGeckoDesktop("18.0") }} (behind a pref) [1][3]
+ {{CompatGeckoDesktop("20.0")}}
+ 28

+ 		+

10.0, but under the non-standard -ms-flex-order name {{ property_prefix("-ms") }}  [2]
+ 11

+ 		12.10 +

7 {{ property_prefix("-webkit") }}
+ 9

+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatGeckoMobile("18.0") }} (behind a pref) [1]
+ {{CompatGeckoMobile("20.0")}}		{{ CompatUnknown }}12.10 +

7 {{ property_prefix("-webkit") }}
+ 9

+ +

 

+
+
+ +

[1] 在 Firefox 18 和 19 中使用弹性布局，需要将 about:config 中 layout.css.flexbox.enabled 设置为 true。从 Firefox 28 起开始完整支持。

+ +

Firefox 中不正确地更改元素的 Tab 顺序. 查看 {{bug("812687")}}。

+ +

[2] In addition to the unprefixed support, Gecko 48.0 {{geckoRelease("48.0")}} added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

+ +

[3] 在 Internet Explorer 10 中，使用 display: -ms-flexbox 来声明弹性盒子。-ms-flex-order 属性是非标准实现。

+ +

参考

+ + diff --git a/files/zh-cn/web/css/outline-color/index.html b/files/zh-cn/web/css/outline-color/index.html new file mode 100644 index 0000000000..457caab022 --- /dev/null +++ b/files/zh-cn/web/css/outline-color/index.html @@ -0,0 +1,122 @@ +--- +title: outline-color +slug: Web/CSS/outline-color +translation_of: Web/CSS/outline-color +--- +
{{CSSRef}}
+ +

outline-color CSS属性 被用于设置一个元素轮廓的颜色.

+ +
{{EmbedInteractiveExample("pages/css/outline-color.html")}}
+ + + +

大多时候使用{{cssxref("outline")}}而不是 outline-style, outline-width 和 outline-color会更方便.

+ +

元素轮廓是绘制于元素周围的一条线，位于{{cssxref("border")}}的外围，使元素突出.不像border,轮廓在元素的frame外绘制并且可能与其他元素重叠.而border不会出现这种现象(除非故意).

+ +

语法

+ +
/* <color> values */
+outline-color: #f92525;
+outline-color: rgb(30,222,121);
+outline-color: blue;
+
+/* Keyword value */
+outline-color: invert;
+
+/* Global values */
+outline-color: inherit;
+outline-color: initial;
+outline-color: unset;
+
+ +

outline-color可用以下这些值.

+ +

Values

+ +
+
{{cssxref("<color>")}}
+
轮廓颜色,规则同 <color>.
+
invert
+
反色,用于确认轮廓的显示.注意不是所有浏览器都支持该属性,若不则该属性无效.
+
+ +

正规语法

+ +
{{csssyntax}}
+ +

例子

+ +

HTML

+ +
<p>My outline is blue, as you can see.</p>
+ +

CSS

+ +
p {
+  outline: 2px solid;      /* Set the outline width and style */
+  outline-color: #0000FF;  /* Make the outline blue */
+  margin: 5px;
+}
+ +

{{ EmbedLiveSample('Example') }}

+ +

Accessibility concerns

+ +

Custom focus styles commonly involve making adjustments to the {{cssxref("outline")}} property. If the color of the outline is adjusted, it is important to ensure that the contrast ratio between it and the background the outline is placed over is high enough that people experiencing low vision conditions will be able to perceive it.

+ +

Color contrast ratio is determined by comparing the luminosity of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}{{Spec2('CSS3 Basic UI')}}No change.
{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}}{{Spec2('CSS3 Transitions')}}Defines outline-color as animatable.
{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.properties.outline-color")}}

+
+ +

相关链接

+ +
    +
  • {{cssxref("<color>")}} 数据类型
    • +
  • 其他与颜色有关的属性: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, 和{{cssxref("column-rule-color")}}
    • +
  • Applying color to HTML elements using CSS
    • +
diff --git a/files/zh-cn/web/css/outline-offset/index.html b/files/zh-cn/web/css/outline-offset/index.html new file mode 100644 index 0000000000..b195c09a4e --- /dev/null +++ b/files/zh-cn/web/css/outline-offset/index.html @@ -0,0 +1,137 @@ +--- +title: outline-offset +slug: Web/CSS/outline-offset +tags: + - outline-offset +translation_of: Web/CSS/outline-offset +--- +
{{CSSRef}}
+ +

概要

+ +

outline-offset CSS 属性用于设置 {{ cssxref("outline") }} 与一个元素边缘或边框之间的间隙。

+ +

outline是元素的轮廓，悬浮在元素边框之上。元素和其轮廓之间是透明的。也就是说，它们之间的颜色会继承父元素的背景色。

+ +

{{cssinfo}}

+ +

The space will be transparent (the parent will determine the background).

+ +

Syntax

+ +
/* <length> values */
+outline-offset: 3px;
+outline-offset: 0.2em;
+
+/* Global values */
+outline-offset: inherit;
+outline-offset: initial;
+outline-offset: unset;
+
+ +

Values

+ +
+
<length>
+
元素和轮廓间的宽度. 详见 {{cssxref("<length>")}} . 负值将轮廓绘制在元素之内.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
p {
+  outline: dashed thin;
+  /* Move the outline 10px away from the border */
+  outline-offset: 10px;
+  border:1px solid black;
+}
+
+ +

Html

+ +
<p>outline: offset 10px. Border is solid and outline is dashed</p>
+ +

上面的代码将产生以下效果:

+ +

{{ EmbedLiveSample('Examples', '', '', '') }}

+ +

另一个例子:

+ +

outline: multiple offsets;

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transitions', '#animatable-css', 'outline-offset') }}{{ Spec2('CSS3 Transitions') }}Defines outline-offset as animatable.
{{ SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset') }}{{ Spec2('CSS3 Basic UI') }}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1.8")}}{{ CompatNo() }}9.51.2
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/zh-cn/web/css/outline-style/index.html b/files/zh-cn/web/css/outline-style/index.html new file mode 100644 index 0000000000..b72b7ca9d3 --- /dev/null +++ b/files/zh-cn/web/css/outline-style/index.html @@ -0,0 +1,272 @@ +--- +title: outline-style +slug: Web/CSS/outline-style +tags: + - outline-style +translation_of: Web/CSS/outline-style +--- +
{{CSSRef}}
+ +

概要

+ +

outline-style CSS 属性被用于设置一个元素轮廓的样式。

+ +

元素轮廓是绘制于元素周围的一条线，位于{{cssxref("border")}}的外围，使元素突出

+ +

大多时候使用{{cssxref("outline")}}而不是 outline-style, outline-width 和 outline-color会更方便.

+ +

{{cssinfo}}

+ +

语法

+ +
/* 关键字 值 */
+outline-style: auto;
+outline-style: none;
+outline-style: dotted;
+outline-style: dashed;
+outline-style: solid;
+outline-style: double;
+outline-style: groove;
+outline-style: ridge;
+outline-style: inset;
+outline-style: outset;
+
+/* 全局 值*/
+outline-style: inherit;
+outline-style: initial;
+outline-style: unset;
+
+ +

取值

+ +

<br-style> 可为以下这些值:

+ +
+
none
+
+
无轮廓 ({{Cssxref("outline-width")}} 为 0).
+
dotted
+
+
轮廓为一系列点.
+
dashed
+
+
轮廓为一系列短线.
+
solid
+
+
轮廓为实线.
+
double
+
+
轮廓为两根有空隙的线. {{Cssxref("outline-width")}} 为线与空间的总和.
+
groove
+
+
轮廓呈凹下状.
+
ridge
+
+
与 groove相反: 轮廓呈凸起状.
+
inset
+
+
轮廓呈嵌入状.
+
outset
+
+
与 inset相反: 轮廓呈突出状.
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例 1  dotted 和 dashed

+ +

HTML

+ +
<div>
+  <div class="dotted">
+    <p class="dashed">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.dotted {
+  outline-style: dotted; /* 于 "outline: dotted"等价 */
+}
+.dashed {
+  outline-style: dashed;
+}
+
+/* 让效果更清楚 */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_1_-_dotted_and_dashed') }}

+ +

示例 2 - solid 和 double

+ +

HTML

+ +
<div>
+  <div class="solid">
+    <p class="double">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.solid {
+  outline-style: solid;
+}
+.double {
+  outline-style: double;
+}
+
+/* 让效果更清楚 */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_2_-_solid_and_double') }}

+ +

示例 3 - groove 和 ridge

+ +

HTML

+ +
<div>
+  <div class="groove">
+    <p class="ridge">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.groove {
+  outline-style: groove;
+}
+.ridge {
+  outline-style: ridge;
+}
+
+/* 让效果更清楚 */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_3_-_groove_and_ridge') }}

+ +

示例 4 - inset 和 outset

+ +

HTML

+ +
<div>
+  <div class="inset">
+    <p class="outset">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.inset {
+  outline-style: inset;
+}
+.outset {
+  outline-style: outset;
+}
+
+/* 让效果更清楚 */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_4_-_inset_and_outset') }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Basic UI', '#outline-style', 'outline-style')}}{{Spec2('CSS3 Basic UI')}}Added auto value
{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}{{Spec2('CSS2.1')}}Initial definition
+ +

浏览器兼容性

+ +

{{Compat("css.properties.outline-style")}}

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}1.5 (1.8)[1]8.07.01.2 (125)
auto{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("46")}}10123.2
auto{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Gecko 1.8及以前 (Firefox 1.5) 该效果可用Mozilla CSS Extension 实现{{Cssxref("-moz-outline-style")}}.

diff --git a/files/zh-cn/web/css/outline-width/index.html b/files/zh-cn/web/css/outline-width/index.html new file mode 100644 index 0000000000..80e5b04b2e --- /dev/null +++ b/files/zh-cn/web/css/outline-width/index.html @@ -0,0 +1,133 @@ +--- +title: outline-width +slug: Web/CSS/outline-width +translation_of: Web/CSS/outline-width +--- +
{{CSSRef}}
+ +

CSS 属性 outline-width 用于设置一个元素的轮廓的厚度。元素轮廓是绘制于元素周围的一条线，位于 {{cssxref("border")}} 的外围。

+ +
{{EmbedInteractiveExample("pages/css/outline-width.html")}}
+ + + +

大多情况下用简写属性 {{cssxref("outline")}} 定义轮廓外观会更方便。

+ +

Syntax

+ +
/* Keyword values */
+outline-width: thin;
+outline-width: medium;
+outline-width: thick;
+
+/* <length> values */
+outline-width: 1px;
+outline-width: 0.1em;
+
+/* Global values */
+outline-width: inherit;
+
+ +

outline-width 的值可以是下面列表中的任一项。

+ +

Values

+ +
+
{{cssxref("<length>")}}
+
The width of the outline specified as a <length>.
+
thin
+
取决于用户代理。通常等同于桌面浏览器的 1px （包括 Firefox）。
+
medium
+
取决于用户代理。通常等同于桌面浏览器的 3px （包括 Firefox）。
+
thick
+
取决于用户代理。通常等同于桌面浏览器的 5px（包括 Firefox）。
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

HTML

+ +
<span id="thin">thin</span>
+<span id="medium">medium</span>
+<span id="thick">thick</span>
+<span id="twopixels">2px</span>
+<span id="oneex">1ex</span>
+<span id="em">1.2em</span>
+
+ +

CSS

+ +
span {
+  outline-style: solid;
+  display: inline-block;
+  margin: 20px;
+}
+
+#thin {
+  outline-width: thin;
+}
+
+#medium {
+  outline-width: medium;
+}
+
+#thick {
+  outline-width: thick;
+}
+
+#twopixels {
+  outline-width: 2px;
+}
+
+#oneex {
+  outline-width: 1ex;
+}
+
+#em {
+  outline-width: 1.2em;
+}
+
+
+ +

{{EmbedLiveSample('Examples', '100%', '80')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Basic UI', '#outline-width', 'outline-width')}}{{Spec2('CSS3 Basic UI')}}No change.
{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-width')}}{{Spec2('CSS3 Transitions')}}Defines outline-width as animatable.
{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.outline-width")}}

diff --git a/files/zh-cn/web/css/outline/index.html b/files/zh-cn/web/css/outline/index.html new file mode 100644 index 0000000000..64d1db06c4 --- /dev/null +++ b/files/zh-cn/web/css/outline/index.html @@ -0,0 +1,135 @@ +--- +title: outline +slug: Web/CSS/outline +tags: + - CSS + - CSS属性 + - CSS轮廓 + - 参考 + - 布局 + - 轮廓 +translation_of: Web/CSS/outline +--- +
{{CSSRef}}
+ +

CSS 的 outline 属性是在一条声明中设置多个轮廓属性的简写属性 ， 例如 {{cssxref("outline-style")}}, {{cssxref("outline-width")}} 和 {{cssxref("outline-color")}}。 

+ +

{{EmbedInteractiveExample("pages/css/outline.html")}}

+ +

与其他简写属性一样，忽略的子属性会被设为 初始值。

+ +

border 和 outline

+ +

border 和 outline 很类似，但有如下区别：

+ +
    +
  • outline不占据空间，绘制于元素内容周围。
    • +
  • 根据规范，outline通常是矩形，但也可以是非矩形的。
    • +
+ +

语法

+ +
/* 样式 */
+outline: solid;
+
+/* 颜色 | 样式 */
+outline: #f66 dashed;
+
+/* 样式 | 宽度 */
+outline: inset thick;
+
+/* 颜色 | 样式 | 宽度 */
+outline: green solid 3px;
+
+/* 全局值 */
+outline: inherit;
+outline: initial;
+outline: unset;
+ +

outline 属性可使用以下一个、两个或三个值来声明，且顺序不重要。

+ +
+

注意：对于很多元素来说，如果没有设置样式，轮廓是不可见的。因为样式（style）的默认值是 none。但 input 元素是例外，其样式默认值由浏览器决定。

+
+ +

取值

+ +
+
<'outline-color'>
+
设置轮廓的颜色。没有设置时默认值为 currentcolor。参见 {{cssxref("outline-color")}}。
+
<'outline-style'>
+
设置轮廓的样式。没有设置时默认值为 none。参见 {{cssxref("outline-style")}}。
+
<'outline-width'>
+
设置轮廓的宽度。没有设置时默认值为 medium。参见 {{cssxref("outline-width")}}。
+
+ +

形式语法

+ +
{{csssyntax("outline")}}
+ +

示例

+ +

HTML

+ +
<a href="#">This link has a special focus style.</a>
+
+ +

CSS

+ +
a {
+  border: 1px solid;
+  border-radius: 3px;
+  display: inline-block;
+  margin: 10px;
+  padding: 5px;
+}
+
+a:focus {
+  outline: 4px dotted #e73;
+  outline-offset: 4px;
+  background: #ffa;
+}
+
+ +

结果

+ +

可访问性考虑

+ +

将 outline 设置为 0 或 none 会移除浏览器的默认聚焦样式。如果一个元素可交互，这个元素必须有一个可见的聚焦提示。若移除了默认聚焦样式，记得提供一个显眼的聚焦样式。

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}{{Spec2('CSS3 Basic UI')}}No change.
{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ +

{{Compat("css.properties.outline")}}

diff --git a/files/zh-cn/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html b/files/zh-cn/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html new file mode 100644 index 0000000000..6a0f3b43f8 --- /dev/null +++ b/files/zh-cn/web/css/overflow-anchor/guide_to_scroll_anchoring/index.html @@ -0,0 +1,92 @@ +--- +title: Guide to scroll anchoring +slug: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring +translation_of: Web/CSS/overflow-anchor/Guide_to_scroll_anchoring +--- +
{{CSSRef}}
+ +

As a user of the web, you are probably familiar with the problem that scroll anchoring solves. You browse to a long page on a slow connection and begin to scroll to read the content; while you are busy reading, the part of the page you are looking at suddenly jumps. This has happened because large images or some other elements have just loaded further up in the content.

+ +

Scroll anchoring is a browser feature that aims to solve this problem of content jumping, which happens if content loads in after the user has already scrolled to a new part of the document.

+ +

How does it work?

+ +
+

Scroll anchoring adjusts the scroll position to compensate for the changes outside of the viewport. This means that the point in the document the user is looking at remains in the viewport, which may mean their scroll position actually changes in terms of how far they have moved through the document.

+
+ +

How do I turn on scroll anchoring?

+ +

You don't! The feature is enabled by default in supporting browsers. In most cases anchored scrolling is exactly what you want — content jumping is a poor experience for anyone.

+ +

What if I need to debug it?

+ +

If your page is not behaving well with scroll anchoring enabled, it is probably because some scroll event listener is not handling well the extra scrolling to compensate for the anchor node movement.

+ +

You can check whether disabling scroll anchoring fixes the issue in Firefox by changing layout.css.scroll-anchoring.enabled to false in about:config.

+ +

If it does, you can check what node is Firefox using as the anchor using the layout.css.scroll-anchoring.highlight switch. That will show a purple overlay on top of the anchor node.

+ +

If one node doesn't seem appropriate to be an anchor, you can exclude it using {{cssxref("overflow-anchor")}}, as described below.

+ +

What if I need to disable it?

+ +

The specification provides a new property, {{cssxref("overflow-anchor")}}, which can be used to disable scroll anchoring on all or part of the document. It's essentially a way to opt out of the new behavior.

+ +

The only possible values are auto or none:

+ +
    +
  • auto is the initial value; as long as the user has a supported browser the scroll anchoring behavior will happen, and they should see fewer content jumps.
    • +
  • none means that you have explicitly opted the document, or part of the document, out of scroll anchoring.
    • +
+ +

To opt out the entire document, you can set it on the {{htmlelement("body")}} element:

+ +
body {
+  overflow-anchor: none;
+}
+ +

To opt out a certain part of the document use overflow-anchor: none on its container element:

+ +
.container {
+  overflow-anchor: none;
+}
+ +
+

Note: The specification details that once scroll anchoring has been opted out of, you cannot opt back into it from a child element. For example, if you opt out for the entire document, you will not be able to set overflow-anchor: auto elsewhere in the document to turn it back on for a subsection.

+
+ +

Suppression triggers

+ +

The specification also details some suppression triggers, which will disable scroll anchoring in places where it might be problematic. If any of the triggers happen on the anchor node, or an ancestor of it, anchoring is suppressed.

+ +

These suppression triggers are changes to the computed value of any of the following properties:

+ +
    +
  • {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, or {{cssxref("bottom")}}
    • +
  • {{cssxref("margin")}} or {{cssxref("padding")}}
    • +
  • Any {{cssxref("width")}} or {{cssxref("height")}}-related properties
    • +
  • {{cssxref("transform")}}
    • +
+ +

Additionally, {{cssxref("position")}} changes anywhere inside the scrolling box also disable scroll anchoring.

+ +
+

In {{bug(1584285)}} the layout.css.scroll-anchoring.suppressions.enabled flag was added to Firefox Nightly in order to allow the disabling of these triggers.

+
+ +

Further reading

+ + + +

Browser compatibility

+ +

If you need to test whether scroll anchoring is available in a browser, use Feature Queries to test support for the overflow-anchor property.

+ + + +

{{Compat("css.properties.overflow-anchor")}}

diff --git a/files/zh-cn/web/css/overflow-anchor/index.html b/files/zh-cn/web/css/overflow-anchor/index.html new file mode 100644 index 0000000000..42150355bf --- /dev/null +++ b/files/zh-cn/web/css/overflow-anchor/index.html @@ -0,0 +1,87 @@ +--- +title: overflow-anchor +slug: Web/CSS/overflow-anchor +tags: + - CSS + - CSS Scroll Anchoring +translation_of: Web/CSS/overflow-anchor +--- +
{{CSSRef}}
+ +

overflow-anchor CSS 属性提供一种退出浏览器滚动锚定行为的方法，该行为会调整滚动位置以最大程度地减少内容偏移。

+ +

默认情况下，在任何支持滚动锚定行为的浏览器中都将其启用。因此，仅当您在文档或文档的一部分中遇到滚动锚定问题并且需要关闭行为时，才通常需要更改此属性的值。

+ +

语法

+ +
/* Keyword values */
+overflow-anchor: auto;
+overflow-anchor: none;
+
+/* Global values */
+overflow-anchor: inherit;
+overflow-anchor: initial;
+overflow-anchor: unset;
+
+ +

Values

+ +
+
auto
+
The element becomes a potential anchor when adjusting scroll position.
+
none
+
The element won't be selected as a potential anchor.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

范例

+ +

To prevent scroll anchoring in a document, use the overflow-anchor property.

+ +
body {
+  overflow-anchor: none;
+}
+
+ +
    +
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Scroll Anchoring', '#propdef-overflow-anchor', 'overflow-anchor')}}{{Spec2('CSS Scroll Anchoring')}}Initial definition.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.overflow-anchor")}}

+ +

See also

+ + + +
+
+
diff --git a/files/zh-cn/web/css/overflow-block/index.html b/files/zh-cn/web/css/overflow-block/index.html new file mode 100644 index 0000000000..2112e76e88 --- /dev/null +++ b/files/zh-cn/web/css/overflow-block/index.html @@ -0,0 +1,139 @@ +--- +title: overflow-block +slug: Web/CSS/overflow-block +translation_of: Web/CSS/overflow-block +--- +

{{CSSRef}}

+ +

The overflow-block CSS property sets what shows when content overflows the block start and block end edges of a box. This may be nothing, a scroll bar, or the overflow content.

+ +
+

The overflow-block property maps to {{Cssxref("overflow-y")}} or {{Cssxref("overflow-x")}} depending on the writing mode of the document.

+
+ +

Syntax

+ +
/* Keyword values */
+overflow-block: visible;
+overflow-block: hidden;
+overflow-block: scroll;
+overflow-block: auto;
+
+/* Global values */
+overflow-block: inherit;
+overflow-block: initial;
+overflow-block: unset;
+
+ +

The overflow-block property is specified as a single keyword chosen from the list of values below.

+ +

Values

+ +
+
visible
+
Content is not clipped and may be rendered outside the padding box's block start and block end edges.
+
hidden
+
Content is clipped if necessary to fit the block dimension in the padding box. No scrollbars are provided.
+
scroll
+
Content is clipped if necessary to fit in the block dimension in the padding box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content.
+
auto
+
Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows.
+
+ +

Formal definition

+ +

{{CSSInfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

HTML

+ +
<ul>
+  <li><code>overflow-block:hidden</code> — hides the text outside the box
+  <div id="div1">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-block:scroll</code> — always adds a scrollbar
+  <div id="div2">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-block:visible</code> — displays the text outside the box if needed
+  <div id="div3">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-block:auto</code> — on most browser, equivalent to <code>scroll</code>
+  <div id="div4">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+</ul>
+
+
+ +

CSS

+ +
#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-block: hidden; margin-bottom: 120px;}
+#div2 { overflow-block: scroll; margin-bottom: 120px;}
+#div3 { overflow-block: visible; margin-bottom: 120px;}
+#div4 { overflow-block: auto; margin-bottom: 120px;}
+
+ +

Result

+ +
+

{{EmbedLiveSample("Examples", "100%", "780")}}

+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block') }}{{ Spec2('CSS3 Overflow') }}
+ +
{{cssinfo}}
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.overflow-block")}}

+ +

See also

+ +
    +
  • Related CSS properties: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-inline")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}
    • +
  • CSS Logical Properties
    • +
  • Writing Modes
    • +
diff --git a/files/zh-cn/web/css/overflow-clip-box/index.html b/files/zh-cn/web/css/overflow-clip-box/index.html new file mode 100644 index 0000000000..fdef49313b --- /dev/null +++ b/files/zh-cn/web/css/overflow-clip-box/index.html @@ -0,0 +1,81 @@ +--- +title: overflow-clip-box +slug: Web/CSS/overflow-clip-box +translation_of: Mozilla/Gecko/Chrome/CSS/overflow-clip-box +--- +

Summary

+

 

+

Syntax

+
Formal syntax: {{csssyntax("overflow-clip-box")}}
+
overflow-clip-box: padding-box;
+overflow-clip-box: content-box;
+
+

Values

+

padding-box

+

content-box

+

Examples

+
 
+

Specifications

+ + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS2.1', 'visufx.html#overflow-clipping', 'Overflow and clipping')}}{{Spec2('CSS2.1')}} 
+

Browser compatibility

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari (WebKit)
Basic support{{ CompatGeckoDesktop("30.0") }}Bug{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+

 

diff --git a/files/zh-cn/web/css/overflow-x/index.html b/files/zh-cn/web/css/overflow-x/index.html new file mode 100644 index 0000000000..cae7d4fe1f --- /dev/null +++ b/files/zh-cn/web/css/overflow-x/index.html @@ -0,0 +1,74 @@ +--- +title: overflow-x +slug: Web/CSS/overflow-x +translation_of: Web/CSS/overflow-x +--- +

{{ CSSRef() }}

+ +

{{ SeeCompatTable() }}

+ +

概述

+ +

当一个块级元素的内容在水平方向发生溢出时，CSS属性overflow-x决定应该截断溢出内容，或者显示滚动条，或者直接显示溢出内容。

+ +

{{cssinfo}}

+ +

用法

+ +
合法值: {{csssyntax("overflow-x")}}
+
+ +
overflow-x: visible
+overflow-x: hidden
+overflow-x: scroll
+overflow-x: auto
+
+overflow-x: inherit
+
+ +

解释

+ +
+
visible
+
内容不会被截断，且可以显示在内容盒之外。
+
hidden
+
内容会被截断，且不会显示滚动条。
+
scroll
+
桌面浏览器总是显示滚动条，无论内容是否发生溢出。这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。而打印机可能会打印溢出的内容。
+
auto
+
取决于浏览器本身。当内容发生溢出时，桌面浏览器如Firefox会显示滚动条。
+
+ +

示例

+ +
[fixme]
+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注  
{{ SpecName('CSS3 Box', '#overflow-x', 'overflow-x') }}{{ Spec2('CSS3 Box') }}
+ +

浏览器支持

+ +

{{Compat("css.properties.overflow-x")}}

+ +

参见

+ +
    +
  • 相关CSS属性: {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("clip") }}, {{ Cssxref("display") }}
    • +
diff --git a/files/zh-cn/web/css/overflow-y/index.html b/files/zh-cn/web/css/overflow-y/index.html new file mode 100644 index 0000000000..0665e1a0ce --- /dev/null +++ b/files/zh-cn/web/css/overflow-y/index.html @@ -0,0 +1,202 @@ +--- +title: overflow-y +slug: Web/CSS/overflow-y +tags: + - 元素单一方向溢出 +translation_of: Web/CSS/overflow-y +--- +
{{CSSRef}}
+ +

概述

+ +

当一个块级元素（div元素、p元素之类的）的内容在垂直方向发生溢出时，

+ +

CSS属性overflow-y 决定如何处理溢出的内容。

+ +

隐藏溢出内容（hidden），或者显示滚动条（scroll），或者直接显示溢出内容（visible），或者让浏览器来处理（auto）。

+ +
{{cssinfo}}
+ +

Syntax[语法]

+ +
/* 在当前css选择器元素下, 元素内容在垂直方向上溢出时 */
+
+/* overflow-y 属性 可选值 */
+
+overflow-y: visible; /*内容可见*/
+overflow-y: hidden; /*内容隐藏*/
+overflow-y: scroll; /*总是显示滚动条*/
+overflow-y: auto; /*浏览器决定*/
+
+
+/* overflow-y 属性 全局可选值 */
+
+overflow-y: inherit; /*继承*/
+overflow-y: initial; /*默认值*/
+overflow-y: unset; /*未设置*/
+
+ +

Values[可选值]

+ +
+
visible
+
内容不会被截断，且可以显示在内容盒之外。
+
hidden
+
内容会被截断，且不会显示滚动条。
+
+ +
+
clip {{experimental_inline}}
+
像 hidden 一样，内容被剪切到元素的填充框中。 clip 和 hidden 的区别是 clip 还禁止所有滚动，包括程序性滚动（programmatic scrolling）。包含框不再是滚动容器，并且不会启动新的格式设置上下文。 如果要启动新的格式设置上下文，可以使用 {{cssxref("display", "display: flow-root", "#flow-root")}} 。
+
+ +
+
scroll
+
桌面浏览器总是显示滚动条，无论内容是否发生溢出。这可以避免滚动条的显示与消失所导致的元素尺寸不确定的问题。而打印机可能会打印溢出的内容。
+
auto
+
取决于浏览器本身。当内容发生溢出时，桌面浏览器如Firefox会显示滚动条。
+
+

Formal syntax[正式语法]

+ + 
{{csssyntax("overflow-y")}}
+
+
+
+ +

Example[示例]

+ +

HTML

+ +
<ul>
+  <li><code>overflow-y:scroll</code> — 总是显示滚动条
+  <div id="div1">
+   歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
+  </div>
+  </li>
+
+  <li><code>overflow-y:hidden</code> — 在盒子外隐藏溢出的内容
+  <div id="div2">
+  歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
+  </div>
+  </li>
+
+  <li><code>overflow-y:visible</code> — 在盒子外显示溢出的内容
+  <div id="div3">
+    歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
+    </div>
+  </li>
+
+  <li><code>overflow-y:auto</code> — 在大多数浏览器中, <code>auto</code> 效果等于 <code>scroll</code>
+  <div id="div4">
+    歌词是诗歌的一种，入乐的叫歌，不入乐的叫诗（或词）。入乐的歌在感情抒发、形象塑造上和诗没有任何区别，但在结构上、节奏上要受音乐的制约，在韵律上要照顾演唱的方便，在遣词炼字上要考虑听觉艺术的特点，因为它要入乐歌唱。歌词与诗的分别，主要是诗不一定要入乐（合乐），歌词是要合乐的。合乐成为歌曲。歌词一般是配合曲子旋律一同出现的，歌词是歌曲的本意所在。现代一般是配合音乐，便于哼唱的语句。
+    </div>
+  </li>
+
+</ul>
+
+
+ +

CSS

+ +
#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black; /*元素边框 1px宽 黑边*/
+  width:  280px;
+  height: 120px;
+}
+
+
+#div1 { overflow-y: scroll; margin-bottom: 12px; }
+
+#div2 { overflow-y: hidden; margin-bottom: 12px;  }
+
+#div3 { overflow-y: visible; margin-bottom: 150px;  }
+
+#div4 { overflow-y: auto; margin-bottom: 12px;  }
+
+
+ +

结果

+ +
{{EmbedLiveSample("Example", "100%", "760")}}
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Box', '#overflow-y', 'overflow-y')}}{{Spec2('CSS3 Box')}}
+ +

浏览器支持

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本支持1.0{{CompatGeckoDesktop("1.5")}}5.0 [*]9.53.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
特性AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本支持1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1.5")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[*] IE8 引入了属性-ms-overflow-y，作用与overflow-y相同。不要使用前缀-ms-。

+ +

参见

+ +
    +
  • 相关CSS属性: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}
    • +
diff --git a/files/zh-cn/web/css/overflow/index.html b/files/zh-cn/web/css/overflow/index.html new file mode 100644 index 0000000000..40edff75c2 --- /dev/null +++ b/files/zh-cn/web/css/overflow/index.html @@ -0,0 +1,236 @@ +--- +title: overflow +slug: Web/CSS/overflow +tags: + - CSS + - CSS Box Model + - CSS Property + - CSS_参考 + - Layout + - NeedsEditorialReview + - NeedsTechnicalReview + - NeedsUpdate + - overflow + - 'overflow: scroll;' +translation_of: Web/CSS/overflow +--- +

{{ CSSRef() }}

+ +

CSS属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。它是 {{cssxref("overflow-x")}} 和{{cssxref("overflow-y")}}的 简写属性 。

+ +
{{EmbedInteractiveExample("pages/css/overflow.html")}}
+ + + +

这个选项包含剪切，显示滚动条，或者显示 从容器溢出到周围区域的内容。

+ +

指定除visible(默认值)以外的值将创建一个新的 块级格式化上下文. 这在技术层面上是必须的——如果一个浮动元素和滚动条相交，它会在每个滚动步骤后强行重新包装内容，从而导致慢滚动体验。

+ +

为使 overflow 有效果，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap。

+ +
+

注意:  设置一个轴为visible（默认值），同时设置另一个轴为不同的值，会导致设置visible的轴的行为会变成auto。 

+
+ +
+

注意: 即使将overflow设置为hidden，也可以使用JavaScript {{domxref("Element.scrollTop")}} 属性来滚动HTML元素。

+
+ +

语法

+ +
/* 默认值。内容不会被修剪，会呈现在元素框之外 */
+overflow: visible;
+
+/* 内容会被修剪，并且其余内容不可见 */
+overflow: hidden;
+
+/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
+overflow: scroll;
+
+/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */
+overflow: auto;
+
+/* 规定从父元素继承overflow属性的值 */
+overflow: inherit;
+
+
+ +

 从下面列表中选出一个或两个关键字来指定overflow 属性。如果指定了两个关键字，第一个关键字应用于overflow-x，第二个关键字应用于overflow-y。否则，overflow-x和overflow-y都设置为相同的值。

+ +
+

注意: 在Firefox 63之前，这些值是反向的，第一个值应用于overflow-y，第二个值应用于overflow-x。Firefox 63更新了这个顺序，以匹配对规范的更改。此更改是为了匹配使用新逻辑属性overflow-block和overflow-inline时的顺序。

+
+ +
overflow-x: scroll;
+overflow-y: hidden;
+/* On Firefox 61 and 62, this is the same as */
+overflow: hidden scroll;
+/* But on Firefox 63 and later, it will be */
+overflow: scroll hidden;
+ +

值

+ +
+
visible
+
默认值。内容不会被修剪，可以呈现在元素框之外。
+
hidden
+
如果需要，内容将被剪裁以适合填充框。 不提供滚动条。
+
scroll
+
如果需要，内容将被剪裁以适合填充框。 浏览器显示滚动条，无论是否实际剪切了任何内容。 （这可以防止滚动条在内容更改时出现或消失。）打印机仍可能打印溢出的内容。
+
auto
+
取决于用户代理。 如果内容适合填充框内部，则它看起来与可见内容相同，但仍会建立新的块格式化上下文。 如果内容溢出，桌面浏览器会提供滚动条。
+
overlay {{experimental_inline}} {{deprecated_inline}}
+
行为与auto相同，但滚动条绘制在内容之上而不是占用空间。 仅在基于WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。
+
+ +

Mozilla 扩展

+ +
+
-moz-scrollbars-none {{ obsolete_inline() }}[1]
+
使用 overflow:hidden 代替.
+
-moz-scrollbars-horizontal {{ Deprecated_inline() }}[1]
+
推荐使用 {{ Cssxref("overflow-x") }} 和 {{ Cssxref("overflow-y") }} .
+
-moz-scrollbars-vertical {{ Deprecated_inline() }}[1]
+
推荐使用 {{ Cssxref("overflow-x") }} 和 {{ Cssxref("overflow-y") }} .
+
-moz-hidden-unscrollable {{ non-standard_inline() }}
+
主要用于内部和主题。禁用 方向键 和 鼠标滚轮 来滚动XML跟元素以及<HTML>和<body>元素。
+
[1] As of Firefox 63, this feature is behind a feature preference setting. In about:config, set layout.css.overflow.moz-scrollbars.enabled to true
+
+ +

形式语法

+ +
{{csssyntax}}
+ +

示例

+ +
p {
+     width: 12em;
+     height: 6em;
+     border: dotted;
+     overflow: visible; /* 内容不会被修剪 */
+}
+ +
+ +
+ +
+ +
+ +
+ +
+ +

visible (default)
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: hidden; /* 不显示滚动条 */  }
+ +
+ +

overflow: hidden
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
  p { overflow: scroll; /* 始终显示滚动条 */  }
+ +
+ +

overflow: scroll
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: auto; /* 必要时显示滚动条 */  }
+ +
+ +

overflow: auto
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{ SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow') }}{{ Spec2('CSS3 Overflow') }}
{{ SpecName('CSS3 Box', '#overflow1', 'overflow') }}{{ Spec2('CSS3 Box') }}无变更
{{ SpecName('CSS2.1', 'visufx.html#overflow', 'overflow') }}{{ Spec2('CSS2.1') }}初始规定
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{ CompatGeckoDesktop("1") }}[1]4.0[2]7.01.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("1") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 [1] Firefox 3.6 (Gecko 1.9.2)中,  overflow 属性被错误地应用到表组元素（<thead>,<tbody>,<tfoot>）中。这个错误在之后的版本中被修复。 

+ +

[2]Internet Explorer 4 － 6 会扩大一个带有overflow:visible 的元素以适应它的内容。此处 height/width 的作用相当于 min-height/min-width。

+ +

See also

+ +
    +
  • Related CSS properties: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}
    • +
diff --git a/files/zh-cn/web/css/overscroll-behavior-x/index.html b/files/zh-cn/web/css/overscroll-behavior-x/index.html new file mode 100644 index 0000000000..91364ff10d --- /dev/null +++ b/files/zh-cn/web/css/overscroll-behavior-x/index.html @@ -0,0 +1,100 @@ +--- +title: overscroll-behavior-x +slug: Web/CSS/overscroll-behavior-x +tags: + - overscroll-behavior-x + - 层叠式样式表 + - 层叠式样式表属性 + - 层叠式样式表盒子模型 + - 引用 + - 非标准 +translation_of: Web/CSS/overscroll-behavior-x +--- +
{{CSSRef}}
+ +

overscroll-behavior-x 这个CSS属性用来控制当滚动到区域的水平边界时的浏览器行为。

+ +
+

备注: 详细的解释请访问 {{cssxref("overscroll-behavior")}} 

+
+ +
/* Keyword values */
+overscroll-behavior: auto; /* default */
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* Global values */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+
+ +

{{cssinfo}}

+ +

语法

+ +

overscroll-behavior-x 属性可以选用下列值。

+ +

值

+ +
+
auto
+
默认的滚动溢出行为表现的和正常一样。
+
contain
+
默认的滚动溢出行为将被内部的元素观察到，(例如: “bounce”效果或者刷新)，但是相邻的区域不会产生连续滚动效果，例如: 在下面的元素不会被滚动。
+
none
+
相邻的滚动区域不会有连续滚动效果，并且默认的滚动溢出行为会被阻止。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

在这个简单的例子中(源代码), 有两个块级别的盒子, 一个在另一个的里面. 外部的盒子设置有一个大的 {{cssxref("width")}} 所以整个页面会水平滚动. 内部的盒子设置有一个小的宽度(和 {{cssxref("height")}}) 所以他位于观察点内合适的地方，但是他的内容被设置了一个大的 width, 所以它会水平的滚动.

+ +

默认情况下, 当内部的盒子被滚动达到边界的时候，整个页面将开始滚动，这个行为有可能不是我们期望的. 为了避便这个行为，你可以设置 overscroll-behavior-x: contain 在里面的盒子上:

+ +
main > div {
+  height: 300px;
+  width: 500px;
+  overflow: auto;
+  position: relative;
+  top: 100px;
+  left: 100px;
+  overscroll-behavior-x: contain;
+}
+ +

规格

+ + + + + + + + + + + + + + + + +
规格状态值注释
{{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-x', 'overscroll-behavior-x')}}{{Spec2('Overscroll Behavior')}} 
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.overscroll-behavior-x")}}

+ +

See also

+ + + +

 

diff --git a/files/zh-cn/web/css/overscroll-behavior-y/index.html b/files/zh-cn/web/css/overscroll-behavior-y/index.html new file mode 100644 index 0000000000..ad0061fd6c --- /dev/null +++ b/files/zh-cn/web/css/overscroll-behavior-y/index.html @@ -0,0 +1,85 @@ +--- +title: overscroll-behavior-y +slug: Web/CSS/overscroll-behavior-y +translation_of: Web/CSS/overscroll-behavior-y +--- +
{{CSSRef}}
+ +

overscroll-behavior-y 这个CSS属性用来控制当滚动到区域的垂直边界时的浏览器行为。

+ +
+

Note: 详细的解释请访问 {{cssxref("overscroll-behavior")}}。

+
+ +
/* Keyword values */
+overscroll-behavior: auto; /* default */
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* Global values */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+
+ +

{{cssinfo}}

+ +

语法

+ +

overscroll-behavior-y 属性可以选用下列值。

+ +

值

+ +
+
auto
+
默认的滚动溢出行为表现的和正常一样。 .
+
contain
+
默认的滚动溢出行为将被内部的元素观察到，(例如: “bounce”效果或者刷新)，但是相邻的区域不会产生连续滚动效果，例如: 在下面的元素不会被滚动。
+
none
+
相邻的滚动区域不会有连续滚动效果，并且默认的滚动溢出行为会被阻止。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +
.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+}
+ +

详细的解释请访问 {{cssxref("overscroll-behavior")}}。

+ +

规格

+ + + + + + + + + + + + + + + + +
规格状态值备注
{{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-y', 'overscroll-behavior-y')}}{{Spec2('Overscroll Behavior')}}
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.overscroll-behavior-y")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/overscroll-behavior/index.html b/files/zh-cn/web/css/overscroll-behavior/index.html new file mode 100644 index 0000000000..047444d023 --- /dev/null +++ b/files/zh-cn/web/css/overscroll-behavior/index.html @@ -0,0 +1,112 @@ +--- +title: overscroll-behavior +slug: Web/CSS/overscroll-behavior +translation_of: Web/CSS/overscroll-behavior +--- +
{{CSSRef}}
+ +

overscroll-behavior CSS 属性是 {{cssxref("overscroll-behavior-x")}} 和 {{cssxref("overscroll-behavior-y")}} 属性的合并写法, 让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。

+ +
/* 关键字的值 */
+overscroll-behavior: auto; /* 默认 */
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* 使用2个值 */
+overscroll-behavior: auto contain;
+
+/* Global values */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+
+ +

默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”。 

+ +

在某些情况下我们不想要这些表现，使用 overscroll-behavior 来去除不需要的滚动链，以及类似 QQ 一类的应用下拉刷新效果。

+ +

{{cssinfo}}

+ +

语法

+ +

overscroll-behavior 属性可以使用下面列表中的一或两个关键字指定。

+ +

使用两个关键字来指定 overscroll-behavior 分别在 x 和 y 轴的值。只用一个值的话，x 和 y 轴都被指定为该值。

+ +

值

+ +
+
auto
+
默认效果
+
contain
+
设置这个值后，默认的滚动边界行为不变（“触底”效果或者刷新），但是临近的滚动区域不会被滚动链影响到，比如对话框后方的页面不会滚动。
+
none
+
临近滚动区域不受到滚动链影响，而且默认的滚动到边界的表现也被阻止。
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

在我们 滚动行为示例 (也可以看该 源代码)我们展现一个虚构的联系人全页列表，和一个包含聊天窗口的对话框。

+ +

+ +

正常情况下在聊天窗口边界之前都可以使用滚动条，但是当滚动到边界之后，其后的联系人窗口也将开始滚动，这并不是我们满意的效果。可以在聊天窗口中使用 overscroll-behavior-y (overscroll-behavior 也可以) 就像如下：

+ +
.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+}
+ +

我们也希望移除标准的滚动至顶部或底部的滚动特效（例如Android上的Chrome当滚动超过顶部边界时会刷新页面），可以通过在 {{htmlelement("body")}} 元素设置 overscroll-behavior: none 来阻止这个行为：

+ +
body {
+  margin: 0;
+  overscroll-behavior: none;
+}
+ +

Specifications

+ +

在 CSSWG 发布自己的草案之前，该规范只能在它的 WICG Github Repository 中找到。

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}{{Spec2('Overscroll Behavior')}}
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.overscroll-behavior")}}

+ +

See also

+ + + + + + + +

+ +

diff --git a/files/zh-cn/web/css/padding-bottom/index.html b/files/zh-cn/web/css/padding-bottom/index.html new file mode 100644 index 0000000000..3046bcce32 --- /dev/null +++ b/files/zh-cn/web/css/padding-bottom/index.html @@ -0,0 +1,147 @@ +--- +title: padding-bottom +slug: Web/CSS/padding-bottom +tags: + - CSS + - CSS 内边距 + - CSS 属性 +translation_of: Web/CSS/padding-bottom +--- +
{{CSSRef}}
+ +

CSS属性 padding-bottom 是指一个元素在内边距区域（padding area）中下方的高度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种CSS缩写属性。

+ +

The effect of the CSS padding-bottom property on the element box

+ +
/* <length> values */
+padding-bottom: 0.5em;
+padding-bottom: 0;
+padding-bottom: 2cm;
+
+/* <percentage> value */
+padding-bottom: 10%;
+
+/* Global values */
+padding-bottom: inherit;
+padding-bottom: initial;
+padding-bottom: unset;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Values

+ +
+
{{cssxref("length")}}
+
当内边距（padding）大小是一个固定单位数值的时候，一定不能为负数。
+
 
+
{{cssxref("percentage")}}
+
当内边距（padding）是一个百分比的时候， 百分比是和本身包含的元素的宽度有关的，同样一定不能为负数。
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
.content { padding-bottom: 5%; }
+.sidebox { padding-bottom: 10px; }
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#the-padding', 'padding-bottom') }}{{ Spec2('CSS3 Box') }}No change from {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom') }}{{ Spec2('CSS3 Transitions') }}Defines padding-bottom as animatable.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}{{ Spec2('CSS2.1') }}No change from {{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}.
{{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}{{ Spec2('CSS1') }}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}1.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

See also

+ +
    +
  • CSS Box Model
    • +
  • The {{cssxref("padding")}} shorthand property can be used to set paddings on all four sides of an element with a single declaration: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, padding-bottom, and {{cssxref("padding-left")}}.
    • +
diff --git a/files/zh-cn/web/css/padding-inline-start/index.html b/files/zh-cn/web/css/padding-inline-start/index.html new file mode 100644 index 0000000000..a127a401cc --- /dev/null +++ b/files/zh-cn/web/css/padding-inline-start/index.html @@ -0,0 +1,142 @@ +--- +title: padding-inline-start +slug: Web/CSS/padding-inline-start +translation_of: Web/CSS/padding-inline-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

概要

+ +

The padding-inline-start CSS property defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. It corresponds to the {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, or {{cssxref("padding-left")}} property depending on the values defined for {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.

+ +

It relates to {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, and {{cssxref("padding-inline-end")}}, which define the other paddings of the element.

+ +

{{cssinfo}}

+ +

句法

+ +
/* <length> values */
+padding-inline-start: 10px;   /* An absolute length */
+padding-inline-start: 1em;    /* A length relative to the text size */
+
+/* <percentage> value */
+padding-inline-start: 5%;     /* A padding relative to the block container's width */
+
+/* Global values */
+padding-inline-start: inherit;
+padding-inline-start: initial;
+padding-inline-start: unset;
+
+ +

Values

+ +

The padding-inline-start property takes the same values as the {{cssxref("padding-left")}} property.

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

范例

+ +

HTML Content

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS Content

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-inline-start: 20px;
+  background-color: #C8C800;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName("CSS Logical Properties", "#propdef-padding-inline-start", "padding-inline-start")}}{{Spec2("CSS Logical Properties")}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}[2]{{CompatGeckoDesktop("41.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}[2]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile("41.0") }}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Available since Gecko 38, but behind the preference layout.css.vertical-text.enabled, then disabled by default. The preference has been removed in Gecko 51 and this property cannot be disabled since this version. From Firefox 3, Gecko supports the prefixed -moz-padding-start.

+ +

[2] From Chrome 2 and Safari 3, the similar prefixed -webkit-padding-start are supported.

+ +

也可以看看

+ +
    +
  • The mapped physical properties: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, and {{cssxref("padding-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/zh-cn/web/css/padding-left/index.html b/files/zh-cn/web/css/padding-left/index.html new file mode 100644 index 0000000000..ca761410c0 --- /dev/null +++ b/files/zh-cn/web/css/padding-left/index.html @@ -0,0 +1,104 @@ +--- +title: padding-left +slug: Web/CSS/padding-left +translation_of: Web/CSS/padding-left +--- +
{{CSSRef}}
+ +

CSS属性 padding-left 是指一个元素在内边距区域（padding area）中左边的宽度。内边距（padding）是指一个元素的内容和边框之间的区域。

+ +
{{EmbedInteractiveExample("pages/css/padding-left.html")}}
+ + + +

元素的“填充区域”是其内容和边框之间的空间。

+ +
+

贴士： {{cssxref("padding")}} 属性可用于通过一个声明在元素的四个边（上、下、左、右）上设置填充。

+
+ +

语法

+ +
/* 长度单位参数 */
+padding-left: 0.5em;
+padding-left: 0;
+padding-left: 2cm;
+
+/* 百分数参数 */
+padding-left: 10%;
+
+/* 全局参数 */
+padding-left: inherit;
+padding-left: initial;
+padding-left: unset;
+
+ +

padding left属性指定为从下表中选择的单个值。与外边距（margins）不同，可以接受的值不允许是负数。

+ +

参数

+ +
+
{{cssxref("<length>")}}
+
填充内边距的长度。它必须是非负的。
+
{{cssxref("<percentage>")}}
+
以与父级盒子的百分比表示的填充大小。它也必须是非负的。
+
+ +

标准定义

+ +

{{cssinfo}}

+ +

标准语法

+ +
{{csssyntax}}
+ +

样例

+ +

使用“px”单位和百分比设置 padding-left的样例

+ +
.content { padding-left: 5%; }
+.sidebox { padding-left: 10px; }
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范版本阶段备注
{{ SpecName('CSS3 Box', '#propdef-padding-left', 'padding-left') }}{{ Spec2('CSS3 Box') }}没有改变
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left') }}{{ Spec2('CSS2.1') }}没有改变
{{ Specname('CSS1', '#padding-left', 'padding-left') }}{{ Spec2('CSS1') }}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.padding-left")}}

+ +

另见

+ +
    +
  • Introduction to the CSS basic box model
    • +
  • {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} and the {{cssxref("padding")}} shorthand
    • +
  • The mapped logical properties: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, and {{cssxref("padding-inline-end")}} and the shorthands {{cssxref("padding-block")}} and {{cssxref("padding-inline")}}
    • +
diff --git a/files/zh-cn/web/css/padding-right/index.html b/files/zh-cn/web/css/padding-right/index.html new file mode 100644 index 0000000000..77b17279d0 --- /dev/null +++ b/files/zh-cn/web/css/padding-right/index.html @@ -0,0 +1,144 @@ +--- +title: padding-right +slug: Web/CSS/padding-right +tags: + - CSS + - CSS 内边距 + - CSS 属性 +translation_of: Web/CSS/padding-right +--- +
{{CSSRef}}
+ +

CSS属性 padding-right 是指一个元素在内边距区域（padding area）中右边的宽度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种CSS缩写属性。

+ +
/* <length> values */
+padding-right: 0.5em;
+padding-right: 0;
+padding-right: 2cm;
+
+/* <percentage> value */
+padding-right: 10%;
+
+/* Global values */
+padding-right: inherit;
+padding-right: initial;
+padding-right: unset;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Values

+ +
+
{{cssxref("length")}}
+
当内边距（padding）大小是一个固定单位数值的时候，一定不能为负数。
+
{{cssxref("percentage")}}
+
当内边距（padding）是一个百分比的时候， 百分比是和本身包含的元素的宽度有关的，同样一定不能为负数。
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
.content { padding-right: 5%; }
+.sidebox { padding-right: 10px; }
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#the-padding', 'padding-right') }}{{ Spec2('CSS3 Box') }}No change.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-right') }}{{ Spec2('CSS3 Transitions') }}Defines padding-right as animatable.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right') }}{{ Spec2('CSS2.1') }}No change.
{{ Specname('CSS1', '#padding-right', 'padding-right') }}{{ Spec2('CSS1') }}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}1.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

See also

+ +
    +
  • CSS Box Model
    • +
  • The {{cssxref("padding")}} shorthand property can be used to set paddings on all four sides of an element with a single declaration: {{cssxref("padding-top")}}, padding-right, {{cssxref("padding-bottom")}}, and {{cssxref("padding-left")}}.
    • +
diff --git a/files/zh-cn/web/css/padding-top/index.html b/files/zh-cn/web/css/padding-top/index.html new file mode 100644 index 0000000000..ad13e5ef19 --- /dev/null +++ b/files/zh-cn/web/css/padding-top/index.html @@ -0,0 +1,150 @@ +--- +title: padding-top +slug: Web/CSS/padding-top +tags: + - CSS + - CSS 内边距 + - CSS 属性 +translation_of: Web/CSS/padding-top +--- +
{{CSSRef}}
+ +

CSS属性 padding-top 是指一个元素在内边距区域（padding area）中上方的高度。内边距（padding）是指一个元素的内容和边框之间的区域。和外边距（margin）不同，内边距（padding）是不允许有负值的。内边距（padding）可以用四个值声明一个元素的四个方向的内边距（paddings），这是一种CSS缩写属性。

+ +

The effect of the CSS padding-top property on the element box

+ +
/* <length> values */
+padding-top: 0.5em;
+padding-top: 0;
+padding-top: 2cm;
+
+/* <percentage> value */
+padding-top: 10%;
+
+/* Global values */
+padding-top: inherit;
+padding-top: initial;
+padding-top: unset;
+
+ +

{{cssinfo}}

+ +

语法规则

+ +

取值

+ +
+
{{cssxref("length")}}
+
当内边距（padding）大小是一个固定单位数值的时候，一定不能为负数。
+
{{cssxref("percentage")}}
+
当内边距（padding）是一个百分比的时候， 百分比是和包含块（containing block）的宽度有关的，同样一定不能为负数。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

实例

+ +
.content { padding-top: 5%; }
+.sidebox { padding-top: 10px; }
+
+ +

详细说明

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#the-padding', 'padding-top') }}{{ Spec2('CSS3 Box') }}No change from {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-top') }}{{ Spec2('CSS3 Transitions') }}Defines padding-top as animatable.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}{{ Spec2('CSS2.1') }}No change from {{ Specname('CSS1', '#padding-top', 'padding-top') }}.
{{ Specname('CSS1', '#padding-top', 'padding-top') }}{{ Spec2('CSS1') }}Initial definition.
+ +

浏览器的兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}1.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 更多浏览

+ +
    +
  • CSS Box Model
    • +
  • The {{cssxref("padding")}} shorthand property can be used to set paddings on all four sides of an element with a single declaration: padding-top, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, and {{cssxref("padding-left")}}.
    • +
+ +

+ +

diff --git a/files/zh-cn/web/css/padding/index.html b/files/zh-cn/web/css/padding/index.html new file mode 100644 index 0000000000..2578e45113 --- /dev/null +++ b/files/zh-cn/web/css/padding/index.html @@ -0,0 +1,164 @@ +--- +title: padding +slug: Web/CSS/padding +translation_of: Web/CSS/padding +--- +
{{CSSRef}}
+ +

padding CSS 简写属性控制元素所有四条边的内边距区域。

+ +
{{EmbedInteractiveExample("pages/css/padding.html")}}
+ + + +

一个元素的内边距区域指的是其内容与其边框之间的空间。

+ +
+

注意：内边距控制的是元素内部空出的空间。相反，{{cssxref("margin")}} 操作元素 外部空出的空间。

+
+ +

属性构成

+ +

该属性是以下属性的简写：

+ + + +

语法

+ +
/* 应用于所有边 */
+padding: 1em;
+
+/* 上边下边 | 左边右边 */
+padding: 5% 10%;
+
+/* 上边 | 左边右边 | 下边 */
+padding: 1em 2em 2em;
+
+/* 上边 | 右边 | 下边 | 左边 */
+padding: 5px 1em 0 2em;
+
+/* 全局值 */
+padding: inherit;
+padding: initial;
+padding: unset;
+
+ +

padding 属性接受 1~4 个值。每个值可以是 {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}}。取值不能为负。

+ +
    +
  • 当只指定一个值时，该值会统一应用到全部四个边的内边距上。
    • +
  • 指定两个值时，第一个值会应用于上边和下边的内边距，第二个值应用于左边和右边。
    • +
  • 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的内边距。
    • +
  • 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的内边距。
    • +
+ +

取值

+ +
+
{{cssxref("length")}}
+
以固定值为内边距。
+
{{cssxref("percentage")}}
+
相对于包含块的宽度，以百分比值为内边距。
+
+ +

标准定义

+ +

{{cssinfo}}

+ +

语法格式

+ +
{{csssyntax}}
+ +

示例

+ +

以像素为单位设置内边距

+ +

HTML

+ +
<h4>此元素有合适的内边距。</h4>
+<h3>此元素的内边距很  大！</h3>
+
+ +

CSS

+ +
h4 {
+  background-color: lime;
+  padding: 20px 50px;
+}
+
+h3 {
+  background-color: cyan;
+  padding: 110px 50px 50px 110px;
+}
+
+ +

结果

+ +

{{EmbedLiveSample('以像素为单位设置内边距', '100%', 300)}}

+ +

以像素和百分数为单位设置内边距

+ +
padding: 5%;                /* 所有边：5% 的内边距 */
+
+padding: 10px;              /* 所有边：10px 的内边距 */
+
+padding: 10px 20px;         /* 上边和下边：10px 的内边距 */
+                            /* 左边和右边：20px 的内边距 */
+
+padding: 10px 3% 20px;      /* 上边：   10px 的内边距 */
+                            /* 左边和右边：3% 的内边距 */
+                            /* 下边：   20px 的内边距 */
+
+padding: 1em 3px 30px 5px;  /* 上边：1em  的内边距*/
+                            /* 右边：3px  的内边距*/
+                            /* 下边：30px 的内边距*/
+                            /* 左边：5px  的内边距*/
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范阶段备注
{{ SpecName('CSS3 Box', '#padding-shorthand', 'padding') }}{{ Spec2('CSS3 Box') }}没有变化。
{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }}{{ Spec2('CSS2.1') }}没有变化。
{{ Specname('CSS1', '#padding', 'padding') }}{{ Spec2('CSS1') }}初始定义。
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.padding")}}

+ +

参阅

+ +
    +
  • CSS 基础框盒模型介绍
    • +
  • {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}，和 {{cssxref("padding-left")}}。
    • +
  • 逻辑相关的属性：{{cssxref("padding-block-start")}}，{{cssxref("padding-block-end")}}，{{cssxref("padding-inline-start")}}，和 {{cssxref("padding-inline-end")}} 与其简称 {{cssxref("padding-block")}} 和 {{cssxref("padding-inline")}}
    • +
diff --git a/files/zh-cn/web/css/page-break-after/index.html b/files/zh-cn/web/css/page-break-after/index.html new file mode 100644 index 0000000000..2aa6605d92 --- /dev/null +++ b/files/zh-cn/web/css/page-break-after/index.html @@ -0,0 +1,199 @@ +--- +title: page-break-after +slug: Web/CSS/page-break-after +tags: + - page-break-after + - page-break-after & break-after +translation_of: Web/CSS/page-break-after +--- +
+ +
{{CSSRef}}
+ +

page-break-after CSS 属性调整当前元素之后的分页符。

+ +

此属性适用于生成一个盒子的块元素。它不适用于不会生成一个盒子的空 <div>。

+ + + +
/* Keyword values */
+page-break-after: auto;
+page-break-after: always;
+page-break-after: avoid;
+page-break-after: left;
+page-break-after: right;
+page-break-after: recto;
+page-break-after: verso;
+
+/* Global values */
+page-break-after: inherit;
+page-break-after: initial;
+page-break-after: unset;
+ + + +
+

Note: 这个属性正在被更通用的 {{ cssxref("break-after")}} 取代。这个新的属性也处理列和区域中断，并在语法上兼容 page-break-after。

+ +

在使用 page-break-after 之前，请检查是否可以使用 break-after 代替。 在将来， page-break-after 将只是它的一些值的别名。

+
+ + + + + +

语法

+ +
/* Keyword values */
+page-break-after: auto;
+page-break-after: always;
+page-break-after: avoid;
+page-break-after: left;
+page-break-after: right;
+page-break-after: recto;
+page-break-after: verso;
+
+/* Global values */
+page-break-after: inherit;
+page-break-after: initial;
+page-break-after: unset;
+
+ +

Values

+ +
+
auto
+
初始值。 自动分页符（既不强制也不禁止）。
+
always
+
始终在元素后强制分页。
+
avoid
+
避免在元素后出现分页符。
+
left
+
在元素之后足够的分页符，一直到一张空白的左页为止。
+
right
+
在元素之后足够的分页符，一直到一张空白的右页为止。
+
recto {{experimental_inline}}
+
If pages progress left-to-right, then this acts like right. If pages progress right-to-left, then this acts like left.
+
verso {{experimental_inline}}
+
If pages progress left-to-right, then this acts like left. If pages progress right-to-left, then this acts like right.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
/* move to a new page after footnotes */
+div.footnotes {
+  page-break-after:always;
+}
+
+ +

Specification

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Logical Properties', '#logical-page', 'recto and verso')}}{{Spec2('CSS Logical Properties')}}Adds the values recto and verso.
{{ SpecName('CSS3 Paged Media', '#page-break-after', 'page-break-after') }}{{ Spec2('CSS3 Paged Media') }}Extends the element that this property applies to table rows and table row groups.
{{ SpecName('CSS2.1', 'page.html#propdef-page-break-after', 'page-break-after') }}{{ Spec2('CSS2.1') }}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support (auto, always)1.0{{CompatVersionUnknown}}{{ CompatGeckoDesktop("1.0") }}4.07.01.2 (125)
avoid, left, right1.0{{CompatUnknown}}{{ CompatNo() }} ({{ bug("132035") }})4.07.01.2 (125)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("1.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
avoid, left, right{{ CompatUnknown() }}{{CompatUnknown}}{{ CompatNo() }} ({{ bug("132035") }}){{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

See also

+ + diff --git a/files/zh-cn/web/css/page-break-inside/index.html b/files/zh-cn/web/css/page-break-inside/index.html new file mode 100644 index 0000000000..08dbf235bb --- /dev/null +++ b/files/zh-cn/web/css/page-break-inside/index.html @@ -0,0 +1,132 @@ +--- +title: page-break-inside +slug: Web/CSS/page-break-inside +tags: + - page-break-inside +translation_of: Web/CSS/page-break-inside +--- +
{{CSSRef}}
+ +

page-break-inside CSS 属性调整当前元素内的分页符。

+ +
/* Keyword values */
+page-break-inside: auto;
+page-break-inside: avoid;
+
+/* Global values */
+page-break-inside: inherit;
+page-break-inside: initial;
+page-break-inside: unset;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Values

+ +
+
auto
+
Initial value. Automatic page breaks (neither forced nor forbidden).
+
avoid
+
Avoid page breaks inside the element.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
<div class="page">
+  <p>This is the first paragraph.</p>
+  <section class="list">
+    <span>A list</span>
+    <ol>
+      <li>one</li>
+<!--       <li>two</li> -->
+    </ol>
+  </section>
+  <ul>
+    <li>one</li>
+<!--     <li>two</li> -->
+  </ul>
+  <p>This is the second paragraph.</p>
+  <p>This is the third paragraph, it contains more text.</p>
+  <p>This is the fourth paragraph. It has a little bit more text than the third one.</p>
+</div>
+ +

CSS

+ +
.page {
+  background-color: #8cffa0;
+  height: 90px;
+  width: 200px;
+  columns: 1;
+  column-width: 100px;
+}
+
+.list, ol, ul, p {
+  break-inside: avoid;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+ol, ul, .list {
+  margin: 0.5em 0;
+  display: block;
+  background-color: orange;
+}
+
+p:first-child {
+  margin-top: 0;
+}
+ +

Result

+ +

{{EmbedLiveSample("Example", 400, 160)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Paged Media', '#page-break-inside', 'page-break-inside')}}{{Spec2('CSS3 Paged Media')}}Allows this property on more elements.
{{SpecName('CSS2.1', 'page.html#propdef-page-break-inside', 'page-break-inside')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

Browser compatibility

+ +

 

+ + + +

{{Compat("css.properties.page-break-inside")}}

+ +

 

+ +

See also

+ + diff --git a/files/zh-cn/web/css/paged_media/index.html b/files/zh-cn/web/css/paged_media/index.html new file mode 100644 index 0000000000..4b0dde3546 --- /dev/null +++ b/files/zh-cn/web/css/paged_media/index.html @@ -0,0 +1,21 @@ +--- +title: Paged media +slug: Web/CSS/Paged_Media +tags: + - CSS + - 参考 + - 打印 +translation_of: Web/CSS/Paged_Media +--- +
{{cssref}}
+ +

分页媒体（paged media）属性控制打印或能够将内容拆分成离散页面的任何其它媒体内容的呈现。它允许您以不同的方式设置分页符、控制可打印区域以及页面左右侧的样式，还能控制元素内部的分割符。受广泛支持的属性包括：

+ +
    +
  • {{ cssxref("page-break-before") }}
    • +
  • {{ cssxref("page-break-after") }}
    • +
  • {{ cssxref("page-break-inside") }}
    • +
  • {{ cssxref("orphans") }}
    • +
  • {{ cssxref("widows") }}
    • +
  • {{ cssxref("@page") }}
    • +
diff --git a/files/zh-cn/web/css/paint-order/index.html b/files/zh-cn/web/css/paint-order/index.html new file mode 100644 index 0000000000..4683868cb1 --- /dev/null +++ b/files/zh-cn/web/css/paint-order/index.html @@ -0,0 +1,99 @@ +--- +title: paint-order +slug: Web/CSS/paint-order +translation_of: Web/CSS/paint-order +--- +
{{CSSRef}}{{seecompattable}}
+ +

CSS  paint-order  属性可以让你控制文本区域和图形绘制的填充和绘制（和markers）的顺序

+ +

语法

+ +
/*默认 */
+paint-order: normal;
+
+/* 单一属性 */
+paint-order: stroke; /* 先描边, 然后填充,markers*/
+paint-order: markers; /* 先绘制markers, 然后填充，描边 */
+
+/* 多属性 */
+paint-order: stroke fill; /* 先描边，然后填充，然后markers */
+paint-order: markers stroke fill; /* 先 markers, 然后 stroke, 然后 fill */
+
+
+ +

如果没有指定值，默认顺序将是 fill, stroke, markers.

+ +

当只指定一个值的时候，这个值将会被首先渲染，然后剩下的两个值将会以默认顺序渲染，当只指定两个值的时候，这两个值会以指定的顺序渲染，接着渲染剩下的未指定的那个。

+ +
+

注意：在这个属性的值当中，markers 只有当在绘制SVG图形时引用了 marker-*属性（例如 marker-start）和 <marker> 元素才能进行控制。他们不适用于HTML文本，所以，这样的话，你只能决定  stroke 和 fill 的顺序。

+
+ +

属性值

+ +
+
normal
+
用正常的顺序渲染不同的元素
+
stroke,
+ fill,
+
markers
+
指定一部分或者全部这些属性的渲染顺序
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

使用示例

+ +

HTML

+ +
<p>Stroke in front</p>
+
+<p class="stroke-behind">Stroke behind</p>
+ +

CSS

+ +
p {
+  font-family: sans-serif;
+  font-size: 5rem;
+  font-weight: bold;
+  margin: 0;
+  -webkit-text-stroke: 5px red;
+}
+
+.stroke-behind {
+  paint-order: stroke fill;
+}
+ +

效果

+ +

{{EmbedLiveSample('Examples', '100%', 165)}}

+ +

说明

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'painting.html#PaintOrder', 'paint-order')}}{{Spec2('SVG2')}}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.paint-order")}}

diff --git a/files/zh-cn/web/css/percentage/index.html b/files/zh-cn/web/css/percentage/index.html new file mode 100644 index 0000000000..d3f1b1b086 --- /dev/null +++ b/files/zh-cn/web/css/percentage/index.html @@ -0,0 +1,86 @@ +--- +title: +slug: Web/CSS/percentage +tags: + - CSS + - CSS 数据单位 + - CSS 数据类型 +translation_of: Web/CSS/percentage +--- +
{{CSSRef}}
+ +

CSS 数据类型 <percentage> 表述一个百分比值。许多 CSS 属性 可以取百分比值，经常用以根据父对象来确定大小。百分比值由一个{{cssxref("<number>")}}具体数值后跟着%符号构成. 就像其它在css里的单位一样，在%和数值之间是不允许有空格的。

+ +

许多长度属性使用百分比，如 {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}。百分比也可以在 {{Cssxref("font-size")}} 看到，其中的文字大小是其父级元素的大小直接相关。

+ +
注意：只有计算值是可以继承的。所以，即使一个百分比值用于父属性，一个真正的值，比如具体像素宽度 {{cssxref("<length>")}} 的值，将访问继承的属性，而不是百分比的值。
+ +

语法

+ +

百分比值由一个{{cssxref("<number>")}}具体数值后跟着%符号构成。在数值前可加上+号或者-号，但对所有属性来说其负值都是无效的。和所有的CSS度量值一样，在%符号和数值之间不允许有空格。

+ +

插值动画

+ +

使用 <percentage> 的值可以插值为动画。在这种情况下，它们被内插为实数或浮点数。插值的速度取决于与动画相关联的 timing function。

+ +

例子

+ +

作为 width 与 margin-left 的值的单位

+ +
<div style="background-color:#0000FF;">
+  <div style="width:50%;margin-left:20%;background-color:#00FF00;">Width: 50%, Left margin: 20%</div>
+  <div style="width:30%;margin-left:60%;background-color:#FF0000;">Width: 30%, Left margin: 60%</div>
+</div>
+
+ +

以上HTML将输出：

+ +

{{EmbedLiveSample('Width_and_margin-left', '600', 140)}}

+ +

作为 font-size 的值的单位

+ +
<div style="font-size:18px;">
+  Full size text (18px)
+  <span style="font-size:50%;">50%</span>
+  <span style="font-size:200%;">200%</span>
+</div>
+
+ +

以上HTML将输出：

+ +

{{EmbedLiveSample('Font-size', 'auto', 160)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Values', '#percentages', '<percentage>')}}{{Spec2('CSS3 Values')}}No significant change from CSS Level 2 (Revision 1).
{{SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>')}}{{Spec2('CSS2.1')}}No change from CSS Level 1.
{{SpecName('CSS1', '#percentage-units', '<percentage>')}}{{Spec2('CSS1')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.types.percentage")}}

diff --git a/files/zh-cn/web/css/perspective-origin/index.html b/files/zh-cn/web/css/perspective-origin/index.html new file mode 100644 index 0000000000..14843dc64d --- /dev/null +++ b/files/zh-cn/web/css/perspective-origin/index.html @@ -0,0 +1,382 @@ +--- +title: perspective-origin +slug: Web/CSS/perspective-origin +translation_of: Web/CSS/perspective-origin +--- +
{{CSSRef}}
+ +

CSS 属性 perspective-origin 指定了观察者的位置，用作 {{cssxref("perspective")}} 属性的消失点。

+ +
{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}
+ + + +

语法

+ +
/* One-value syntax */
+perspective-origin: x-position;
+
+/* Two-value syntax */
+perspective-origin: x-position y-position;
+
+/* When both x-position and y-position are keywords,
+   the following is also valid */
+perspective-origin: y-position x-position;
+
+/* Global values */
+perspective-origin: inherit;
+perspective-origin: initial;
+perspective-origin: unset;
+
+ +

值

+ +
+
x-position
+
指定消失点的横坐标，其值有以下形式： +
    +
  • {{cssxref("<length-percentage>")}} 长度值或相对于元素宽度的百分比值，可为负值。
    • +
  • left, 关键字，0值的简记。
    • +
  • center, 关键字，50%的简记。
    • +
  • right, 关键字，100%的简记。
    • +
+
+
y-position
+
指定消失点的纵坐标，其值有以下形式： +
    +
  • {{cssxref("<length-percentage>")}} 长度值或相对于元素高度的百分比值，可为负值。
    • +
  • top, 关键字，0值的简记。
    • +
  • center, 关键字，50%的简记。
    • +
  • bottom, 关键字，100%的简记。
    • +
+
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

举例

+ +

修改 perspective origin

+ +

这个例子展示了带有常用 perspective-origin 值的立方体。

+ +

结果

+ +

{{EmbedLiveSample('Changing_the_perspective_origin', '100%', 700)}}

+ +

HTML

+ +
<table>
+  <tbody>
+    <tr>
+      <th>
+        <code>perspective-origin: top left;</code>
+      </th>
+      <th>
+        <code>perspective-origin: top;</code>
+      </th>
+      <th>
+        <code>perspective-origin: top right;</code>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube potl">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube potm">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube potr">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th>
+        <code>perspective-origin: left;</code>
+      </th>
+      <th>
+        <code>perspective-origin: 50% 50%;</code>
+      </th>
+      <th>
+        <code>perspective-origin: right;</code>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube poml">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube pomm">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube pomr">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th>
+        <code>perspective-origin: bottom left;</code>
+      </th>
+      <th>
+        <code>perspective-origin: bottom;</code>
+      </th>
+      <th>
+        <code>perspective-origin: bottom right;</code>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube pobl">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube pobm">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube pobr">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+ +

CSS

+ +
/* Shorthand classes for perspective-origin values */
+.potl {
+  perspective-origin: top left;
+  -webkit-perspective-origin: top left;
+}
+
+.potm {
+  perspective-origin: top;
+  -webkit-perspective-origin: top;
+}
+
+.potr {
+  perspective-origin: top right;
+  -webkit-perspective-origin: top right;
+}
+
+.poml {
+  perspective-origin: left;
+  -webkit-perspective-origin: left;
+}
+
+.pomm {
+  perspective-origin: 50% 50%;
+  -webkit-perspective-origin: 50% 50%;
+}
+
+.pomr {
+  perspective-origin: right;
+  -webkit-perspective-origin: right;
+}
+
+.pobl {
+  perspective-origin: bottom left;
+  -webkit-perspective-origin: bottom left;
+}
+
+.pobm {
+  perspective-origin: bottom;
+  -webkit-perspective-origin: bottom;
+}
+
+.pobr {
+  perspective-origin: bottom right;
+  -webkit-perspective-origin: bottom right;
+}
+
+/* Define the container div, the cube div, and a generic face */
+.container {
+  width: 100px;
+  height: 100px;
+  margin: 24px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  backface-visibility: visible;
+  perspective: 300px;
+  transform-style: preserve-3d;
+  -webkit-backface-visibility: visible;
+  -webkit-perspective: 300px;
+  -webkit-transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* Define each face based on direction */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+  -webkit-transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+  -webkit-transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+  -webkit-transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+  -webkit-transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+  -webkit-transform: rotateX(90deg) translateZ(50px)
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+  -webkit-transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Make the table a little nicer */
+th, p, td {
+  background-color: #EEEEEE;
+  padding: 10px;
+  font-family: sans-serif;
+  text-align: left;
+}
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}{{Spec2('CSS Transforms 2')}}Initial definition.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.properties.perspective-origin")}}

+
+ +

相关连接

+ + diff --git a/files/zh-cn/web/css/perspective/index.html b/files/zh-cn/web/css/perspective/index.html new file mode 100644 index 0000000000..9a34e9d980 --- /dev/null +++ b/files/zh-cn/web/css/perspective/index.html @@ -0,0 +1,253 @@ +--- +title: perspective +slug: Web/CSS/perspective +translation_of: Web/CSS/perspective +--- +
{{CSSRef}}
+ +

CSS 属性 perspective指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。 z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。

+ +
{{EmbedInteractiveExample("pages/css/perspective.html")}}
+ + + +

三维元素在观察者后面的部分不会绘制出来，即 z 轴坐标值大于 perspective 属性值的部分。

+ +

默认情况下，消失点位于元素的中心，但是可以通过设置 {{cssxref("perspective-origin")}} 属性来改变其位置。

+ +

当该属性值不为 0 和 none 时，会创建新的 层叠上下文。在这种情况下，容器内元素的层叠关系像是使用了 position: fixed 一样。

+ +

语法

+ +
/* Keyword value */
+perspective: none;
+
+/* <length> values */
+perspective: 20px;
+perspective: 3.5em;
+
+/* Global values */
+perspective: inherit;
+perspective: initial;
+perspective: unset;
+
+ +

值

+ +
+
none
+
没有应用 perspective 样式时的默认值.
+
<length>
+
{{cssxref("<length>")}} 指定观察者距离 z=0 平面的距离，为元素及其内容应用透视变换。当值为0或负值时，无透视变换。
+
+ +

标准语法

+ +
{{csssyntax}}
+ +

举例

+ +

设置视角

+ +

此示例显示了一个立方体，其 perspective 设置为不同的值。立方体的收缩由 {{ cssxref("perspective") }} 属性定义。它的值越小，视角越深。

+ +

Result

+ +

{{EmbedLiveSample('设置视角', 660, 700)}}

+ +

HTML

+ +

下面的 HTML 创建了同一个立方体的四个副本，perspective 设置为不同的值。

+ +
<table>
+  <tbody>
+    <tr>
+      <th><code>perspective: 250px;</code>
+      </th>
+      <th><code>perspective: 350px;</code>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube pers250">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube pers350">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>perspective: 500px;</code>
+      </th>
+      <th><code>perspective: 650px;</code>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube pers500">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube pers650">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+ +

CSS

+ +

CSS 建立了不同透视距离的 class，还包括容器盒、立方体本身以及它的每个面的 class。

+ +
/* Shorthand classes for different perspective values */
+.pers250 {
+  perspective: 250px;
+}
+
+.pers350 {
+  perspective: 350px;
+}
+
+.pers500 {
+  perspective: 500px;
+}
+
+.pers650 {
+  perspective: 650px;
+}
+
+/* Define the container div, the cube div, and a generic face */
+.container {
+  width: 200px;
+  height: 200px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  backface-visibility: visible;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* Define each face based on direction */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Make the table a little nicer */
+th, p, td {
+  background-color: #EEEEEE;
+  padding: 10px;
+  font-family: sans-serif;
+  text-align: left;
+}
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{Specname('CSS Transforms 2', '#propdef-perspective', 'perspective')}}{{Spec2('CSS Transforms 2')}}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.perspective")}}

+ +

相关连接

+ + diff --git a/files/zh-cn/web/css/place-content/index.html b/files/zh-cn/web/css/place-content/index.html new file mode 100644 index 0000000000..fbee4af97b --- /dev/null +++ b/files/zh-cn/web/css/place-content/index.html @@ -0,0 +1,245 @@ +--- +title: place-content +slug: Web/CSS/place-content +translation_of: Web/CSS/place-content +--- +
{{CSSRef}}
+ +

 place-content 属性是{{CSSxRef("align-content")}} 和 {{CSSxRef("justify-content")}}的简写. 使用这两个属性的值可以用于任何的布局情况。

+ +
{{EmbedInteractiveExample("pages/css/place-content.html")}}
+ + + +

语法

+ +
/* Positional alignment */
+/* align-content does not take left and right values */
+place-content: center start;
+place-content: start center;
+place-content: end left;
+place-content: flex-start center;
+place-content: flex-end center;
+
+/* Baseline alignment */
+/* justify-content does not take baseline values */
+place-content: baseline center;
+place-content: first baseline space-evenly;
+place-content: last baseline right;
+
+/* Distributed alignment */
+place-content: space-between space-evenly;
+place-content: space-around space-evenly;
+place-content: space-evenly stretch;
+place-content: stretch space-evenly;
+
+/* Global values */
+place-content: inherit;
+place-content: initial;
+place-content: unset;
+ +

第一个值为 {{CSSxRef("align-content")}} 属性, 第二个值为 {{CSSxRef("justify-content")}} .

+ +
+

非常重要:如果没有设置第二个值, 那么第二个的值与第一个相等, 此前提是第一个值对两个属性都是有效的。如果设置的这个值对两个属性都无效，那么整个设置的值就是无效的。

+
+ +

参考值

+ +
+
start
+
所有的子元素堆叠在父元素上合适的轴线上的起点对齐。
+
end
+
所有的子元素堆叠在父元素上合适的轴线上的终点对齐
+
flex-start
+
所有的子元素堆叠在父元素的主轴或交叉轴上起点对齐，主要取决于flex-direction的设置。
+ 仅适用于flex布局的子元素.。如果父元素没有设置为flex，flex-start将被视为start
+
flex-end
+
所有的子元素堆叠在父元素的主轴或交叉轴上终点对齐，主要取决于flex-direction的设置。
+ 仅适用于flex布局的子元素.。如果父元素没有设置为flex，flex-end将被视为end
+
center
+
所有的子元素堆叠在父元素的中间对齐
+
left
+
The items are packed flush to each other toward the left edge of the alignment container. If the property’s axis is not parallel with the inline axis, this value behaves like start.
+
right
+
The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property’s axis is not parallel with the inline axis, this value behaves like start.
+
space-between
+
The items are evenly distributed within the alignment container. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
+
baseline
+ first baseline
+ last baseline
+
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
+ The fallback alignment for first baseline is start, the one for last baseline is end.
+
space-around
+
The items are evenly distributed within the alignment container. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.
+
space-evenly
+
The items are evenly distributed within the alignment container. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
+
stretch
+
If the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} (or equivalent functionality), so that the combined size exactly fills the alignment container
+
+ +

Formal syntax

+ +
{{CSSSyntax}}
+ +

举例

+ +

CSS

+ +
#container {
+  display: flex;
+  height:240px;
+  width: 240px;
+  flex-wrap: wrap;
+  background-color: #8c8c8c;
+  writing-mode: horizontal-tb; /* Can be changed in the live sample */
+  direction: ltr; /* Can be changed in the live sample */
+  place-content: flex-end center; /* Can be changed in the live sample */
+}
+
+div > div {
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  background-color: #a0c8ff;
+}
+
+.small {
+  font-size: 12px;
+  height: 40px;
+}
+
+.large {
+  font-size: 14px;
+  height: 50px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div class="small">Lorem</div>
+  <div class="small">Lorem<br/>ipsum</div>
+  <div class="large">Lorem</div>
+  <div class="large">Lorem<br/>impsum</div>
+  <div class="large"></div>
+  <div class="large"></div>
+</div>
+
+ + + +

Result

+ +

{{EmbedLiveSample("Example", "370", "300")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Box Alignment", "#propdef-place-content", "place content")}}{{Spec2("CSS3 Box Alignment")}}Initial definition
+ +

{{CSSInfo}}

+ +

Browser compatibility

+ + + +
{{Compat("css.properties.place-content")}}
+ +

Support in Flex layout

+ +
{{Compat("css.properties.place-content.flex_context")}}
+ +

Support in Grid layout

+ +
{{Compat("css.properties.place-content.grid_context")}}
+ +

See also

+ + diff --git a/files/zh-cn/web/css/place-items/index.html b/files/zh-cn/web/css/place-items/index.html new file mode 100644 index 0000000000..914901a09c --- /dev/null +++ b/files/zh-cn/web/css/place-items/index.html @@ -0,0 +1,281 @@ +--- +title: place-items +slug: Web/CSS/place-items +translation_of: Web/CSS/place-items +--- +
{{CSSRef}}
+ + + +

CSS 中的 place-items 是一个简写属性 ，它允许你在相关的布局（如 Grid 或 Flexbox）中可以同时沿着块级和内联方向对齐元素 (例如：{{CSSxRef("align-items")}} 和 {{CSSxRef("justify-items")}} 属性) 。如果未提供第二个值，则第一个值作为第二个值的默认值。

+ +
{{EmbedInteractiveExample("pages/css/place-items.html")}}
+ + + +

构成属性

+ +

该属性是以下两个 CSS 属性的简写：

+ + + +

语法

+ +
/* Keyword values */
+place-items: auto center;
+place-items: normal start;
+
+/* Positional alignment */
+place-items: center normal;
+place-items: start auto;
+place-items: end normal;
+place-items: self-start auto;
+place-items: self-end normal;
+place-items: flex-start auto;
+place-items: flex-end normal;
+place-items: left auto;
+place-items: right normal;
+
+/* Baseline alignment */
+place-items: baseline normal;
+place-items: first baseline auto;
+place-items: last baseline normal;
+place-items: stretch auto;
+
+/* Global values */
+place-items: inherit;
+place-items: initial;
+place-items: unset;
+
+ +

值

+ +
+
auto
+
auto 实际的值继承父自元素的 justify-items 值，除非该元素没有父元素或是用了绝对定位。在这些示例中，auto 表示 normal 。
+
normal
+
normal 的效果取决于我们使用哪种布局方式： +
    +
  • 在块级布局中，normal 和 start 一样。
    • +
  • 在绝对定位布局中，关键字在被替换的绝对定位元素上的行为类似于 start，在所有其他绝对定位的元素上表现类似 stretch。
    • +
  • 在表格单元格布局中，此关键字没有意义，因为该属性被忽略。
    • +
  • 在 flexbox 布局中，此关键字没有意义，因为该属性被忽略。
    • +
  • 在 grid 布局中，此关键字和 stretch 的行为相似，但是具有宽高比和固有尺寸的元素行为和 start 相似。
    • +
+
+
start
+
在适当的轴线上，元素块沿着对齐容器的起始边缘对齐。
+
end
+
在适当的轴线上，元素块沿着对齐容器的结束边缘对齐。
+
flex-start
+
对齐方式取决于 flex 容器的的开始方向。（水平和垂直两个方向）
+ 这只对 flex 布局元素生效，对于不是 flex 容器的子元素，它被视为 start 。
+
flex-end
+
对齐方式取决于 flex 容器的的结束方向。（水平和垂直两个方向）
+ 这只对 flex 布局元素生效，对于不是 flex 容器的子元素，它被视为 end 。
+
self-start
+
沿着轴线的头部对齐。
+
self-end
+
沿着轴线的尾部对齐。
+
center
+
沿着对齐容器的中心对齐。
+
left
+
沿着对齐容器的左侧对齐，如果属性的轴不与内联轴平行，则该值的行为和 start 类似。
+
right
+
沿着对齐容器的右侧对齐，如果属性的轴不与内联轴平行，则该值的行为和 start 类似。
+
baseline
+ first baseline
+ last baseline
+
指定参与第一个或最后一个基线对齐：元素的第一个或最后一个基线集的对齐基线与基线共享组中所有框共享的第一个或最后一个基线集中相应的基线对齐。
+
first baseline 的回退对齐方式为 start ，last baseline 则为 end。
+
stretch
+
如果子项加起来的尺寸小于对齐容器的尺寸，则任何未尺寸为 auto 的项将增加同等的大小（不是按比例），但也会受到 {{CSSxRef("max-height")}}/{{CSSxRef("max-width")}} （或等同的功能）的限制，因此所有项刚好能填满对齐容器。
+
+ +

形式定义

+ +

{{cssinfo}}

+ +

形式语法

+ +
{{csssyntax}}
+ +

示例

+ +

在弹性容器中排列元素

+ + + +

CSS

+ +
#container {
+  height:200px;
+  width: 240px;
+  place-items: center; /* You can change this value by selecting another option in the list */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+ +

结果

+ +

{{EmbedLiveSample("Placing_items_in_a_flex_container", 260, 290)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Box Alignment", "#place-items-property", "place-items")}}{{Spec2("CSS3 Box Alignment")}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.place-items")}}

+ +

See also

+ + diff --git a/files/zh-cn/web/css/pointer-events/index.html b/files/zh-cn/web/css/pointer-events/index.html new file mode 100644 index 0000000000..a838498364 --- /dev/null +++ b/files/zh-cn/web/css/pointer-events/index.html @@ -0,0 +1,148 @@ +--- +title: pointer-events +slug: Web/CSS/pointer-events +tags: + - CSS + - CSS Property + - SVG +translation_of: Web/CSS/pointer-events +--- +
{{CSSRef}}
+ +

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。

+ +
/* Keyword values */
+pointer-events: auto;
+pointer-events: none;
+pointer-events: visiblePainted; /* SVG only */
+pointer-events: visibleFill;    /* SVG only */
+pointer-events: visibleStroke;  /* SVG only */
+pointer-events: visible;        /* SVG only */
+pointer-events: painted;        /* SVG only */
+pointer-events: fill;           /* SVG only */
+pointer-events: stroke;         /* SVG only */
+pointer-events: all;            /* SVG only */
+
+/* Global values */
+pointer-events: inherit;
+pointer-events: initial;
+pointer-events: unset;
+ +

当此属性未指定时，visiblePainted值的相同特征适用于 SVG（可缩放矢量图形） 内容。

+ +

除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

+ +

{{cssinfo}}

+ +

语法

+ +

pointer-events属性被指定为从下面的值列表中选择的一个关键字。

+ +

值

+ +
+
auto
+
与pointer-events属性未指定时的表现效果相同，对于SVG内容，该值与visiblePainted效果相同
+
none
+
元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
+
visiblePainted
+
+
只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标：
+ +
+ +
    +
  • visibility属性值为visible，且鼠标指针在元素内部，且fill属性指定了none之外的值
    • +
  • visibility属性值为visible，鼠标指针在元素边界上，且stroke属性指定了none之外的值
    • +
+
+
visibleFill
+
只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素内部时,元素才会成为鼠标事件的目标，fill属性的值不影响事件处理。
+
visibleStroke
+
只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素边界时,元素才会成为鼠标事件的目标，stroke属性的值不影响事件处理。
+
visible
+
只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标，fill和stroke属性的值不影响事件处理。
+
painted
+
+
只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标：
+ +
+ +
    +
  • 鼠标指针在元素内部，且fill属性指定了none之外的值
    • +
  • 鼠标指针在元素边界上，且stroke属性指定了none之外的值
    • +
+ +
visibility属性的值不影响事件处理。
+
+
fill
+
只适用于SVG。只有鼠标指针在元素内部时,元素才会成为鼠标事件的目标，fill和visibility属性的值不影响事件处理。
+
stroke
+
只适用于SVG。只有鼠标指针在元素边界上时,元素才会成为鼠标事件的目标，stroke和visibility属性的值不影响事件处理。
+
all
+
只适用于SVG。只有鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标，fill、stroke和visibility属性的值不影响事件处理。
+
+ +

示例

+ +

示例 1

+ +
/* Example 1: Makes all the img non-reactive to any mouse events such as dragging, hovering, clicking etc */
+img {
+  pointer-events: none;
+}
+ +

示例 2

+ +

点击链接 http://example.com 时，不会跳转

+ +
<ul>
+<li><a href="https://developer.mozilla.org/">MDN</a></li>
+<li><a href="http://example.com">example.com</a></li>
+</ul>
+ +
a[href="http://example.com"] {
+  pointer-events: none;
+}
+ +
{{EmbedLiveSample('Example_2', "500", "100")}}
+ +

提示

+ +

使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永远不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然，位于父元素但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（鼠标活动将会穿过父元素而指向位于其下面的元素）。

+ +

我们希望为HTML提供更为精细的控制（而不仅仅是auto和none），以控制元素哪一部分何时会捕获鼠标事件。如果你有独特的想法，请添加至wiki页面的Use Cases部分，以帮助我们如何针对HTML扩展pointer-events。

+ +

该属性也可用来提高滚动时的帧频。的确，当滚动时，鼠标悬停在某些元素上，则触发其上的hover效果，然而这些影响通常不被用户注意，并多半导致滚动出现问题。对body元素应用pointer-events：none，禁用了包括hover在内的鼠标事件，从而提高滚动性能。

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}{{Spec2('SVG1.1')}}
+ +

Its extension to HTML elements, though present in early drafts of CSS Basic User Interface Module Level 3, has been pushed to its level 4.

+ +

浏览器兼容

+ +

{{Compat("css.properties.pointer-events")}}

+ +

相关链接

+ + diff --git a/files/zh-cn/web/css/position/index.html b/files/zh-cn/web/css/position/index.html new file mode 100644 index 0000000000..285f7c038b --- /dev/null +++ b/files/zh-cn/web/css/position/index.html @@ -0,0 +1,297 @@ +--- +title: position +slug: Web/CSS/position +tags: + - CSS + - CSS Positioning +translation_of: Web/CSS/position +--- +
{{CSSRef}}
+ +

CSS position属性用于指定一个元素在文档中的定位方式。{{Cssxref("top")}}，{{Cssxref("right")}}，{{Cssxref("bottom")}} 和 {{Cssxref("left")}} 属性则决定了该元素的最终位置。

+ +
{{EmbedInteractiveExample("pages/css/position.html")}}
+ + + +

定位类型

+ +
    +
  • 定位元素（positioned element）是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素（换句话说，除static以外的任何东西）。
    • +
  • 相对定位元素（relatively positioned element）是计算后位置属性为 relative 的元素。
    • +
  • 绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 fixed 的元素。
    • +
  • 粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。
    • +
+ +

大多数情况下，{{Cssxref("height")}}和{{Cssxref("width")}} 被设定为auto的绝对定位元素，按其内容大小调整尺寸。但是，被绝对定位的元素可以通过指定{{Cssxref("top")}}和{{Cssxref("bottom")}} ，保留{{Cssxref("height")}}未指定（即auto），来填充可用的垂直空间。它们同样可以通过指定{{Cssxref("left")}} 和 {{Cssxref("right")}}并将{{Cssxref("width")}} 指定为auto来填充可用的水平空间。

+ +

除了刚刚描述的情况（绝对定位元素填充可用空间）：

+ +
    +
  • 如果 top 和 bottom 都被指定（严格来说，这里指定的值不能为 auto ），top 优先。
    • +
  • 如果指定了 left 和 right ，当 {{Cssxref("direction")}}设置为 ltr（水平书写的中文、英语）时 left 优先， 当{{Cssxref("direction")}}设置为 rtl（阿拉伯语、希伯来语、波斯语由右向左书写）时 right 优先。
    • +
+ +

语法

+ +

position 属性被指定为从下面的值列表中选择的单个关键字。

+ +

取值

+ +
+
static
+
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
+
relative
+
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
+
absolute
+
元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
+
fixed
+
元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。
+
+ +
+
sticky
+
元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
+
该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为（详情见Github issue on W3C CSSWG）。
+
+ +

常见语法

+ +
{{csssyntax}}
+
+ +

示例

+ +

相对定位

+ +

相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。下面的例子中，注意未应用定位的其它元素是按照 "Two" 在正常位置的情况下进行布局的。

+ +

 HTML 内容

+ +
<div class="box" id="one">One</div>
+<div class="box" id="two">Two</div>
+<div class="box" id="three">Three</div>
+<div class="box" id="four">Four</div>
+ +

CSS

+ +
.box {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#two {
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}
+
+ +

{{ EmbedLiveSample('Relative_positioning', '600px', '200px') }}

+ +

绝对定位

+ +

相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间。绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）。例子不严谨，待修正下面的示例中，"Three" 元素不存在应用了定位的祖先元素，因此该元素相对于紧邻的祖先（iframe 中的 <body> 元素）绝对定位。

+ +

HTML 内容

+ +
<div class="box" id="one">One</div>
+<div class="box" id="two">Two</div>
+<div class="box" id="three">Three</div>
+<div class="box" id="four">Four</div>
+ +

CSS

+ +
.box {
+   display: inline-block;
+   background: red;
+   width: 100px;
+   height: 100px;
+   float: left;
+   margin: 20px;
+   color: white;
+}
+
+#three {
+   position: absolute;
+   top: 20px;
+   left: 20px;
+}
+
+ +

{{ EmbedLiveSample('Absolute_positioning', '', '', '', 'Web/CSS/position') }}

+ +

固定定位

+ +

固定定位与绝对定位相似，但元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。在下面的示例中，"One" 元素定位在离页面顶部 80px，离页面左侧 20px 的位置。

+ +

HTML 内容

+ +
<div class="outer">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  </p>
+  <div class="box" id="one">One</div>
+</div>
+
+ +

CSS 内容

+ +
.box {
+  background: red;
+  width: 100px;
+  height: 100px;
+  margin: 20px;
+  color: white;
+}
+#one {
+  position: fixed;
+  top: 80px;
+  left: 10px;
+}
+.outer {
+  width: 500px;
+  height: 300px;
+  overflow: scroll;
+  padding-left: 150px;
+}
+
+ +

当浏览页面顶部时，定位元素处于左上角。在滚动后，它相对于 viewport 视口仍处于同一位置。

+ +

{{ EmbedLiveSample('Fixed_positioning', '', '', '', 'Web/CSS/position') }}

+ +

粘性定位

+ +

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：

+ +
#one { position: sticky; top: 10px; }
+ +

在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。

+ +

粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。

+ +

须指定 {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}} 或 {{Cssxref("left")}} 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

+ +

HTML 内容

+ +
<div>
+  <dl>
+    <dt>A</dt>
+    <dd>Andrew W.K.</dd>
+    <dd>Apparat</dd>
+    <dd>Arcade Fire</dd>
+    <dd>At The Drive-In</dd>
+    <dd>Aziz Ansari</dd>
+  </dl>
+  <dl>
+    <dt>C</dt>
+    <dd>Chromeo</dd>
+    <dd>Common</dd>
+    <dd>Converge</dd>
+    <dd>Crystal Castles</dd>
+    <dd>Cursive</dd>
+  </dl>
+  <dl>
+    <dt>E</dt>
+    <dd>Explosions In The Sky</dd>
+  </dl>
+  <dl>
+    <dt>T</dt>
+    <dd>Ted Leo & The Pharmacists</dd>
+    <dd>T-Pain</dd>
+    <dd>Thrice</dd>
+    <dd>TV On The Radio</dd>
+    <dd>Two Gallants</dd>
+  </dl>
+</div>
+
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+
+dl {
+  margin: 0;
+  padding: 24px 0 0 0;
+}
+
+dt {
+  background: #B8C1C8;
+  border-bottom: 1px solid #989EA4;
+  border-top: 1px solid #717D85;
+  color: #FFF;
+  font: bold 18px/21px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 2px 0 0 12px;
+  position: -webkit-sticky;
+  position: sticky;
+  top: -1px;
+}
+
+dd {
+  font: bold 20px/45px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0 0 0 12px;
+  white-space: nowrap;
+}
+
+dd + dd {
+  border-top: 1px solid #CCC
+}
+
+ +

{{ EmbedLiveSample('Sticky_positioning', '', '', '', 'Web/CSS/position') }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS3 Positioning','#position-property','position')}}{{Spec2('CSS3 Positioning')}}Adds sticky property value.
+ +

{{cssinfo}}

+ +

浏览器兼容

+ + + +

{{Compat("css.properties.position")}}

diff --git a/files/zh-cn/web/css/position_value/index.html b/files/zh-cn/web/css/position_value/index.html new file mode 100644 index 0000000000..d96912be34 --- /dev/null +++ b/files/zh-cn/web/css/position_value/index.html @@ -0,0 +1,164 @@ +--- +title: +slug: Web/CSS/position_value +translation_of: Web/CSS/position_value +--- +

{{ CSSRef() }}

+ +

概要

+ +

<position> CSS  数据类型表示用于设置相对于框的位置的2D空间中的坐标。

+ +

特定坐标可以由具有特定偏移的两个关键字给出。关键字表示元素框的一条边或两条边之间的中心线：左，右，上，下或中心 (其表示左边缘和右边缘之间的中心，或者顶部边缘或底部边缘之间的中心，这取决于上下文).

+ +
+

 A keyword represents one edge of the element's box or the center line between two edges: left, right, top, bottom or center (which represents either the center between the left and right edges, or the center between the top or bottom edges, depending on the context).

+
+ +

{{ experimental_inline() }}一个偏移量可以是一个相对值用以表示 {{cssxref("<percentage>")}} （百分比），或是一个绝对的 {{cssxref("<length>")}} （长度）值。正值是向右或向下的偏移，看适用于哪一个。负值则是在另外方向上的偏移。

+ +

 <position> 值表述的最终位置并不需要位于元素的盒子中。

+ +

如果仅指定单个偏移量，它将指定x轴坐标。当只有单个偏移量或关键字被指定时，对于另个轴的值将被假定为“center”。

+ +

补间

+ +

横坐标值和纵坐标值都独立进行补间。而由于两者（补间）速度都由同一 {{cssxref("<timing-function>")}} （函数）定义，点将沿一条直线移动。

+ +

取值

+ +
/* 1-value syntax */
+keyword                  /* The corresponding edge, the other direction is corresponding to center, the middle of the edge */
+<length> or <percentage> /* The position on the x-axis, 50% for the y-axis */
+
+/* 2-value syntax */
+keyword keyword          /* A keyword for each direction, the order is irrelevant */
+keyword value            /* The value is the offset for the edge defined by the keyword */
+
+ +

正式语法

+ +
[ [ left | center | right | top | bottom | <percentage> | <length> ] |
+                  [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] |
+                  [ center | [ left | right ] [ <percentage> | <length> ]? ] &&
+                  [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
+                ]
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{ SpecName('CSS3 Values', '#position', '<position>') }}{{ Spec2('CSS3 Values') }}Relists links to both definition, with the requirement to be coherent: if {{ SpecName('CSS3 Backgrounds', '', '') }} is supported, its definition of <position> must be used too.
{{ SpecName('CSS3 Backgrounds', '#ltpositiongt', '<position>') }}{{ Spec2('CSS3 Backgrounds') }}Defines <position> explicitly and extends it to support offsets from any edge. {{ experimental_inline() }}
{{ SpecName('CSS2.1', 'colors.html#background-properties', '<position>') }}{{ Spec2('CSS2.1') }}Allows combination of a keyword with a {{cssxref("<length>")}}, or {{cssxref("<percentage>")}} value.
{{ SpecName('CSS1', '#background-position', '<position>') }}{{ Spec2('CSS1') }}Defines <position> anonymously as the value of {{ cssxref("background-position") }}.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{ CompatGeckoDesktop("1") }}4.03.51.0 (85)
Combination of a keyword and a {{cssxref("<length>")}}, or {{cssxref("<percentage>")}}1.0{{ CompatGeckoDesktop("1") }}4.03.51.0 (85)
Four-value syntax (support for offset from any edge) {{ experimental_inline() }}{{ CompatNo() }} {{ webkitbug("37514") }}{{ CompatGeckoDesktop("13.0") }}{{ CompatNo() }}10.5{{ CompatNo() }} {{ webkitbug("37514") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
特性AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Combination of a keyword and a {{cssxref("<length>")}}, or {{cssxref("<percentage>")}}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Four-value syntax (support for offset from any edge) {{ experimental_inline() }}{{ CompatNo() }}{{ CompatGeckoMobile("13.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatNo() }}
+
+ +

 

diff --git a/files/zh-cn/web/css/privacy_and_the__colon_visited_selector/index.html b/files/zh-cn/web/css/privacy_and_the__colon_visited_selector/index.html new file mode 100644 index 0000000000..83bbd78166 --- /dev/null +++ b/files/zh-cn/web/css/privacy_and_the__colon_visited_selector/index.html @@ -0,0 +1,74 @@ +--- +title: '隐私与:visited选择器' +slug: 'Web/CSS/Privacy_and_the_:visited_selector' +tags: + - CSS + - 伪类 + - 安全 + - 教程 + - 选择器 +translation_of: 'Web/CSS/Privacy_and_the_:visited_selector' +--- +
{{cssref}}
+ +

在大概2010年时，CSS 选择器 {{ cssxref(":visited") }} 被网站用来检测用户的浏览记录，并找出用户都访问过哪些网站。这些可以通过 {{domxref("window.getComputedStyle")}} 和其他技术实现。这个过程可以很迅速的执行，不仅能够判断用户是否曾经访问过这个页面，还能借此猜测出大量的用户身份信息。

+ +

为了解决这个问题，{{ Gecko("2") }} 实现了一项隐私方面的更新，限制网站可以从访问过的链接中获得的信息。其他的浏览器也已经做了相同的改变。

+ +

善意的谎言

+ + +

为了保护用户隐私，火狐和其他浏览器会在特定情况下向网站应用撒谎：

+ +
    +
  • window.getComputedStyle 方法和其他类似的功能（例如 {{ domxref("element.querySelector") }}）将总是将所有链接都看待为“未访问过”的。
    • +
  • 使用形如 :visited + span 的兄弟选择器时，指定的元素（本例中的 span）总是会按照链接未访问过显示。
    • +
  • 在一些特殊的情况下，例如链接元素嵌套，且选中的元素不是检查历史记录的链接元素。对应元素同样会按照链接未访问过渲染。
    • +
+ +

对已访问链接样式的限制

+ +

你仍然可以给已访问链接设置视觉样式，但是对可用样式作出了限制。只有下列的属性才能被应用到已访问链接：

+ +
    +
  • {{ cssxref("color") }}
    • +
  • {{ cssxref("background-color") }}
    • +
  • {{ cssxref("border-color") }} (and its sub-properties)
    • +
  • {{ cssxref("outline-color") }}
    • +
  • fill 和 stroke 属性的颜色部分
    • +
+ +

此外，即便是上述样式，你也不能给访问过和未访问过设置不同的透明度。你不能使用rgba()、hsla()或是 transparent 关键词。

+ +

这是一个使用被限样式的例子：

+ +
:link {
+   outline: 1px dotted blue;
+   background-color: white;
+   /* background-color 的默认值为 'transparent'。
+      你必须指定一个不同值，否则无法应用对 :visited 的修改 */
+}
+
+:visited {
+   outline-color: orange;     /* 已访问链接的轮廓为橘色 */
+   color: yellow;             /* 已访问链接的文本为黄色 */
+   background-color: green;   /* 已访问链接的背景为绿色 */
+}
+
+ +

对WEB开发者的影响

+ +

总体来说，这不会显著地影响到WEB开发者。但在一些特殊情况下，网站需要做些修改：

+ +
    +
  • 使用背景图片来区分链接是否被访问过的样式不再起作用，因为只有颜色才能被作用到已访问链接上。
    • +
  • 不能通过 :visited 选择器指定了透明或不透明的颜色。
    • +
+ +

更多

+ + diff --git a/files/zh-cn/web/css/pseudo-classes/index.html b/files/zh-cn/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..2f76adbd08 --- /dev/null +++ b/files/zh-cn/web/css/pseudo-classes/index.html @@ -0,0 +1,173 @@ +--- +title: 伪类 +slug: Web/CSS/Pseudo-classes +tags: + - CSS + - CSS 参考 + - 进阶 + - 选择器 +translation_of: Web/CSS/Pseudo-classes +--- +
{{CSSRef}}
+ +

CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，{{ cssxref(":hover") }} 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

+ +
/* 所有用户指针悬停的按钮 */
+button:hover {
+  color: blue;
+}
+
+ +

伪类连同伪元素一起，他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式，而且还允许你根据诸如像导航历史这样的外部因素来应用样式（例如 {{ cssxref(":visited") }}），同样的，可以根据内容的状态（例如在一些表单元素上的 {{ cssxref(":checked") }}），或者鼠标的位置（例如 {{ cssxref(":hover") }} 让你知道是否鼠标在一个元素上悬浮）来应用样式。

+ +
+

注意： 与伪类相反，{{cssxref("pseudo-elements")}} 可被用于为一个元素的 特定部分 应用样式。

+
+ +

语法

+ +
selector:pseudo-class {
+  property: value;
+}
+ +

类似于普通的类，你可以在一个选择器中同时一起写多个伪类。

+ +

标准伪类索引

+ +
+
    +
  • {{CSSxRef(":active")}}
    • +
  • {{CSSxRef(":any-link")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":blank")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":checked")}}
    • +
  • {{CSSxRef(":current")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":default")}}
    • +
  • {{CSSxRef(":defined")}}
    • +
  • {{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":disabled")}}
    • +
  • {{CSSxRef(":drop")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":empty")}}
    • +
  • {{CSSxRef(":enabled")}}
    • +
  • {{CSSxRef(":first")}}
    • +
  • {{CSSxRef(":first-child")}}
    • +
  • {{CSSxRef(":first-of-type")}}
    • +
  • {{CSSxRef(":fullscreen")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":future")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":focus")}}
    • +
  • {{CSSxRef(":focus-visible")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":focus-within")}}
    • +
  • {{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":host")}}
    • +
  • {{CSSxRef(":host()")}}
    • +
  • {{CSSxRef(":host-context()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":hover")}}
    • +
  • {{CSSxRef(":indeterminate")}}
    • +
  • {{CSSxRef(":in-range")}}
    • +
  • {{CSSxRef(":invalid")}}
    • +
  • {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":lang", ":lang()")}}
    • +
  • {{CSSxRef(":last-child")}}
    • +
  • {{CSSxRef(":last-of-type")}}
    • +
  • {{CSSxRef(":left")}}
    • +
  • {{CSSxRef(":link")}}
    • +
  • {{CSSxRef(":local-link")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":not", ":not()")}}
    • +
  • {{CSSxRef(":nth-child", ":nth-child()")}}
    • +
  • {{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":nth-last-child", ":nth-last-child()")}}
    • +
  • {{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}
    • +
  • {{CSSxRef(":nth-of-type", ":nth-of-type()")}}
    • +
  • {{CSSxRef(":only-child")}}
    • +
  • {{CSSxRef(":only-of-type")}}
    • +
  • {{CSSxRef(":optional")}}
    • +
  • {{CSSxRef(":out-of-range")}}
    • +
  • {{CSSxRef(":past")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":read-only")}}
    • +
  • {{CSSxRef(":read-write")}}
    • +
  • {{CSSxRef(":required")}}
    • +
  • {{CSSxRef(":right")}}
    • +
  • {{CSSxRef(":root")}}
    • +
  • {{CSSxRef(":scope")}}
    • +
  • {{CSSxRef(":target")}}
    • +
  • {{CSSxRef(":target-within")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":user-invalid")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":valid")}}
    • +
  • {{CSSxRef(":visited")}}
    • +
  • {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}
    • +
+
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Defined :fullscreen.
{{SpecName("HTML WHATWG", "#pseudo-classes")}}{{Spec2("HTML WHATWG")}}Defines when particular selectors match HTML elements.
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}Defined :any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() and :where().
+ Changed :empty to behave like {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.
+ No significant change for other pseudo-classes defined in {{SpecName("CSS3 Selectors")}} and {{SpecName("HTML5 W3C")}} (though semantic meaning not taken over).
{{SpecName("HTML5 W3C")}}{{Spec2("HTML5 W3C")}}Copies the relevant section from the canonical (WHATWG) HTML spec.
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}}Defined :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only and :read-write, but without the associated semantic meaning.
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}Defined :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty and :not().
+ Defined the syntax of :enabled, :disabled, :checked, and :indeterminate, but without the associated semantic meaning.
+ No significant change for pseudo-classes defined in {{SpecName('CSS2.1')}}.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}Defined :lang(), :first-child, :hover, and :focus.
+ No significant change for pseudo-classes defined in {{SpecName('CSS1')}}.
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Defined :link, :visited and :active, but without the associated semantic meaning.
+
+ +

参见

+ +
    +
  • {{ cssxref("pseudo-elements") }}
    • +
diff --git a/files/zh-cn/web/css/pseudo-elements/index.html b/files/zh-cn/web/css/pseudo-elements/index.html new file mode 100644 index 0000000000..e235d65495 --- /dev/null +++ b/files/zh-cn/web/css/pseudo-elements/index.html @@ -0,0 +1,102 @@ +--- +title: 伪元素 +slug: Web/CSS/Pseudo-elements +tags: + - CSS + - 伪元素 + - 选择器 +translation_of: Web/CSS/Pseudo-elements +--- +
{{ CSSRef() }}
+ +

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。下例中的 {{CSSxRef("::first-line")}} 伪元素可改变段落首行文字的样式。

+ +
/* 每一个 <p> 元素的第一行。 */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}
+ +
+

注意：与伪元素比较，{{cssxref("pseudo-classes")}} 能够根据状态改变元素样式。

+
+ +

 

+ +

语法

+ +
selector::pseudo-element {
+  property: value;
+}
+ +
+

一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

+ +

注意：按照规范，应该使用双冒号（::）而不是单个冒号（:），以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

+
+ +

标准伪元素索引

+ +
+
    +
  • {{CSSxRef("::after", "::after (:after)")}}
    • +
  • {{CSSxRef("::backdrop")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::before", "::before (:before)")}}
    • +
  • {{CSSxRef("::cue", "::cue (:cue)")}}
    • +
  • {{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}
    • +
  • {{CSSxRef("::first-line", "::first-line (:first-line)")}}
    • +
  • {{CSSxRef("::grammar-error")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::marker")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::placeholder")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::selection")}}
    • +
  • {{CSSxRef("::slotted", "::slotted()")}}
    • +
  • {{CSSxRef("::spelling-error")}} {{Experimental_Inline}}
    • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BrowserLowest VersionSupport of
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
+ +

参见

+ + diff --git a/files/zh-cn/web/css/quotes/index.html b/files/zh-cn/web/css/quotes/index.html new file mode 100644 index 0000000000..41d4290b70 --- /dev/null +++ b/files/zh-cn/web/css/quotes/index.html @@ -0,0 +1,144 @@ +--- +title: quotes +slug: Web/CSS/quotes +translation_of: Web/CSS/quotes +--- +
{{CSSRef}}
+ +
quotes CSS 属性用于设置引号的样式。
+ +
+ +
{{EmbedInteractiveExample("pages/css/quotes.html")}}
+ + + +

语法

+ +
/* Keyword value */
+quotes: none;
+
+/* <string> values */
+quotes: "«" "»";           /* Set open-quote and close-quote to the French quotation marks */
+quotes: "«" "»" "‹" "›";   /* Set two levels of quotation marks */
+
+/* Global values */
+quotes: inherit;
+quotes: initial;
+quotes: unset;
+
+ +

值

+ +
+
none
+
 {{cssxref("content")}} 属性的值 open-quote 和 close-quote 将不会展示引号.
+
auto
+
用适当的引号，基于在所选元素上设置的任何语言值（例如，通过 {{htmlattrxref("lang")}} 属性）。
+
[<string> <string>]+
+
一组或者多组 {{cssxref("<string>")}} 的值对应 open-quote and close-quote. 第一对表示引号的外层，第二对表示第一个嵌套层，下一对表示第三层，依此类推。
+
+ +

语法格式

+ +
{{csssyntax}}
+ +

示例

+ +

基本用法

+ +

HTML

+ +
<q>To be or not to be. That's the question!</q>
+
+ +

CSS

+ +
q {
+  quotes: '"' '"' "'" "'";
+}
+q::before {
+  content: open-quote;
+}
+q:after {
+  content: close-quote;
+}
+ +

结果

+ +

{{EmbedLiveSample('Basic_quote_marks', "100%", 60)}}

+ +

自动选择引号

+ +

HTML

+ +
<div lang="fr">
+  <q>Ceci est une citation française.</q>
+<div>
+<hr>
+<div lang="ru">
+  <q>Это русская цитата</q>
+<div>
+<hr>
+<div lang="de">
+  <q>Dies ist ein deutsches Zitat</q>
+<div>
+<hr>
+<div lang="en">
+  <q>This is an English quote.</q>
+<div>
+ +

CSS

+ +
/*q {
+  quotes: auto;
+}*/
+ +

结果

+ +

{{EmbedLiveSample('Auto_quotes', "100%", 200)}}

+ +

备注

+ +
    +
  • 对于大多数浏览器，引号的默认值始终为auto（Firefox 70+），否则浏览器具有此默认行为（Chromiums，Safari，Edge），因此上面的示例可以在不显式设置的情况下工作。
    • +
  • 从Firefox 3.5开始，可以使用 -moz-initial读取quotes属性的初始值，这在Firefox的早期版本中是不可能的。
    • +
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Content", "#quotes", "quotes")}}{{Spec2("CSS3 Content")}}
{{ SpecName('CSS2.1', 'generate.html#quotes', 'quotes') }}{{ Spec2('CSS2.1') }}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.quotes")}}

+ +

参考

+ +
    +
  • {{ Cssxref("content") }}
    • +
diff --git a/files/zh-cn/web/css/radial-gradient()/index.html b/files/zh-cn/web/css/radial-gradient()/index.html new file mode 100644 index 0000000000..124043bf7b --- /dev/null +++ b/files/zh-cn/web/css/radial-gradient()/index.html @@ -0,0 +1,191 @@ +--- +title: radial-gradient() +slug: Web/CSS/radial-gradient() +tags: + - CSS + - CSS Function + - Reference + - Web + - gradient +translation_of: Web/CSS/radial-gradient() +--- +

{{CSSRef}}

+ +

 radial-gradient() CSS函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。这个方法得到的是一个CSS{{cssxref("<gradient>")}}数据类型的对象，其是 {{cssxref("<image>")}} 的一种。

+ +

{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}

+ +

与其它渐变相同，径向渐变是一个不固定尺寸的图像，即，它没有首选的大小，也没有首选的比例。具体大小将由它所应用的元素的大小决定。

+ +

如要创建重复的径向渐变来填充容器，请使用CSS的{{ Cssxref("repeating-radial-gradient") }} 方法。

+ +

因为 <gradient> 属于 <image> 类型，所以它可以用于任何适用于 <image> 的地方。正是因为这样，radial-gradient() 不能用于 {{Cssxref("background-color")}} 和其他属性比如 {{cssxref("<color>")}} 数据类型。

+ +

radial gradient 的组成

+ +

径向渐变(Radial gradients)由其中心点、边缘形状轮廓、两个或多个色值结束点（color stops）定义而成。  

+ +

为了创建平滑的渐变，径向渐变函数绘制了一系列从中心点放射到边缘形状（甚至可能超出范围）的同心轮廓。边缘形状可以是圆形（circle）或椭圆形（ellipse）。

+ +

色彩结束点位于虚拟渐变射线（Virtual gradient ray）上，该渐变射线从中心点水平向右延伸。 基于百分比的色彩结束位置是相对于边缘形状和此渐变射线之间的交点（代表100％）。 每个形状都是一种单色，并由其相交的渐变射线上的颜色确定。

+ +

语法

+ +
/* A gradient at the center of its container,
+   starting red, changing to blue, and finishing green */
+radial-gradient(circle at center, red 0, blue, green 100%)
+ +

值

+ +
+
{{cssxref("<position>")}}
+
{{ cssxref("<position>") }}与{{ Cssxref("background-position") }}或者{{ Cssxref("transform-origin") }}类似。如缺省，默认为中心点。
+
<shape>
+
渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。
+
<size>
+
渐变的尺寸大小。包含的值见下表{{ anch("尺寸常数表") }}。
+
<color-stop>
+
表示某个确定位置的固定色值，包含一个{{cssxref("<color>")}}值加上可选的位置值（相对虚拟渐变射线的{{cssxref("<percentage>")}}或者{{cssxref("<length>")}}长度值）。 百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。
+
<extent-keyword>
+
关键字用于描述边缘轮廓的具体位置。以下为关键字常量：
+
+ + + + + + + + + + + + + + + + + + + + + + + +
常量描述
closest-side渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
closest-corner渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
farthest-side与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
farthest-corner渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
+ +
+

注意：该函数的早期实现还包含其他关键字（ cover 和 contain），分别相当于标准关键字 farthest-corner 和 closest-side 。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。

+
+
+
<linear-color-stop>
+
A color-stop's {{cssxref("<color>")}} value, followed by an one or two optional stop positions (either a {{cssxref("<percentage>")}} or a {{cssxref("<length>")}} along the gradient's axis). A percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray. Including two stop positions is equivalent to declaring two color stops with the same color at the two positions.
+
<color-hint>
+
Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.
+
+

Formal syntax

+ + 
radial-gradient(
+  [ [ circle || <length> ]                         [ at <position> ]? , |
+    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
+    [ [ circle | ellipse ] || <extent-keyword> ] [at <position> ]? , |
+    at <position> ,
+  ]?
+  <color-stop-list> [ , <color-stop-list> ]+
+)
+where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
+   and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
+   and <linear-color-stop> = <color> [ <color-stop-length> ]?
+   and <color-stop-length> = [ <percentage> | <length> ]{1,2}
+   and <color-hint> = [ <percentage> | <length> ]
+
+ +
+

Note that negative <length>'s are not allowed, however browsers had implemented negative lengths which are now being removed. See the Firefox site compat note.

+
+
+
+ +

示例

+ +

Simple gradient

+ + + +
.radial-gradient {
+  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
+}
+ +

{{EmbedLiveSample('Simple_gradient', 120, 120)}}

+ +

Non-centered gradient

+ + + +
.radial-gradient {
+  background-image: radial-gradient(farthest-corner at 40px 40px,
+      #f35 0%, #43e 100%);
+}
+ +

{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}

+ +
+

Note: Please see Using CSS gradients for more examples.

+
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

浏览器兼容性

+ + + +
{{Compat("css.types.image.gradient.radial-gradient")}}
+ +

Quantum CSS notes

+ +

Gecko used to have a long-standing bug whereby radial gradients like radial-gradient(circle gold,red) would work, even though they shouldn't because of the missing comma between circle and gold. Also, {{cssxref("calc")}} expressions were rejected — causing the value to be invalid — when used as the radius component of a radial-gradient() function ({{bug(1376019)}}). Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, released in Firefox 57) fixed these bugs.

+ +

另见

+ +
    +
  • Using CSS gradients
    • +
  • Other gradient functions: {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("_image","image()")}}
    • +
  • {{cssxref("element()")}}
    • +
  • {{cssxref("image-set","image-set()")}}
    • +
  • {{cssxref("cross-fade")}}
    • +
diff --git a/files/zh-cn/web/css/ratio/index.html b/files/zh-cn/web/css/ratio/index.html new file mode 100644 index 0000000000..9768a888f7 --- /dev/null +++ b/files/zh-cn/web/css/ratio/index.html @@ -0,0 +1,89 @@ +--- +title: +slug: Web/CSS/ratio +translation_of: Web/CSS/ratio +--- +
{{CSSRef}}
+ +

       <ratio> CSS数据类型，用于描述媒体查询中的宽高比，表示两个无单位值之间的比例。

+ +

句法

+ +

       在Media Queries Level 3中，<ratio>数据类型包括一个正数的<integer>值，后跟一个正斜杠（'/'，Unicode U + 002F SOLIDUS）和第二个正数的<integer>值。斜杠前后的空格是可选的。第一个数字代表宽度，第二个数字代表高度。

+ +

       在Media Queries Level 4中，<ratio>数据类型包括一个正数的<number>值，后跟一个正斜杠（'/'，Unicode U + 002F SOLIDUS）和第二个正数的<number>值。此外，允许使用单个<number>作为值。

+ +

例子

+ +

在媒体查询中使用

+ +
@media screen和(min-aspect-ratio：16/9){...}
+ +

常见的宽高比

+ +

( (

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
比用法
Ratio4_3.png4/3在20传统电视制式格式。
Ratio16_9.png16/9现代"宽屏”电视格式。
Ratio1_1.85.png185/100= 91/50
+ (不允许非整数除数和除数)		自20世纪60年代以来最常见的电影格式。
Ratio1_2.39.png239/100
+ (不允许使用非整数红利和除数)		"宽屏”,变形电影格式。
+ +

产品规格

+ + + + + + + + + + + + + + + + +
规范状态评论
{{SpecName('CSS3 Media Queries','＃value','<ratio>')}}{{Spec2('CSS3 Media Queries')}}初步定义。
+ +

浏览器兼容性

+ + + +

{{COMPAT("css.types.ratio")}}

+ +

也可以看看

+ + diff --git a/files/zh-cn/web/css/reference/index.html b/files/zh-cn/web/css/reference/index.html new file mode 100644 index 0000000000..7ee94296cf --- /dev/null +++ b/files/zh-cn/web/css/reference/index.html @@ -0,0 +1,199 @@ +--- +title: CSS 参考 +slug: Web/CSS/Reference +tags: + - CSS + - Reference + - 'l10n:priority' + - 参考 + - 总览 +translation_of: Web/CSS/Reference +--- +
{{CSSRef}}
+ +

使用此CSS 参考页面以浏览按 字母索引 的所有标准 CSS 属性、伪类、伪元素、数据类型、以及@ 规则。你也可以浏览 按类型排列的 CSS 选择器 列表和 CSS 关键概念 列表。还有一份简短的 DOM-CSS / CSSOM 参考。

+ +

基本规则语法

+ +

样式规则语法

+ +
style-rule ::=
+    selectors-list {
+      properties-list
+    }
+ +
... 其中
+
+ +
selectors-list ::=
+    selector[:pseudo-class] [::pseudo-element]
+    [, selectors-list]
+
+properties-list ::=
+    [property : value] [; properties-list]
+
+ +

参阅后面的 selector、pseudo-element、pseudo-class 列表。每个指定值的语法取决于为每个指定属性定义的数据类型。

+ +

样式规则示例

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

有关 CSS 选择器语法的初学者介绍，请参阅此教程。注意，规则定义中的任何 CSS 语法错误都将使整个规则无效。无效的规则将被浏览器忽略。注意CSS定义完全是基于文本(ASCII)的 , 而 DOM-CSS / CSSOM (规则管理系统) 是基于对象的。

+ +

@规则语法

+ +

由于@规则间的结构变化很大，请参阅@规则以找到你所想要的特定规则语法。

+ +

关键字索引

+ +
+

注意：此索引中的属性名称不包括与CSS标准名称不同的 JavaScript 名称。

+
+ +
{{CSS_Ref}}
+ +

选择器

+ +

基本选择器

+ + + +

分组选择器

+ +
+
选择器列表 A, B
+
指定同时选择A 和 B元素。这是一种选择多个匹配元素的分组方法。
+
+ +

组合选择器

+ +

组合选择器是在两个或多个简单选择器之间建立关系的选择器，例如“ A是B的子代”或“ A与B相邻”。

+ + + +

       指定A和B选择的元素具有相同的父元素，并且B选择的元素在水平方向上紧随A选择的元素。

+ + + +

        指定由A和B选择的元素共享相同的父元素，并指定A选择的元素在B选择的元素之前（但不一定紧接在B之前）。

+ + + +

          指定B选择的元素是A选择的元素的直接子元素。

+ + + +

          指定B选择的元素是A选择的元素的后代，但不一定是直接子代。

+ +

伪类

+ +
+
    + +
+
+ +

伪元素

+ +
+
    + +
+
+ +
+

另见：一份完整的选择器标准 3 选择器列表。

+
+ +

概念

+ +

语法和语义

+ + + +

值

+ + + +

布局

+ + + +

DOM-CSS / CSSOM

+ +

主要对象类型

+ +
    +
  • {{DOMxRef("DocumentOrShadowRoot.styleSheets")}}
    • +
  • {{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}
    • +
  • cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}} （选择器 & 样式）
    • +
  • cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}
    • +
  • {{DOMxRef("HTMLElement.style")}}
    • +
  • HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}（仅样式）
    • +
  • {{DOMxRef("Element.className")}}
    • +
  • {{DOMxRef("Element.classList")}}
    • +
+ +

重要方法

+ +
    +
  • {{domxref("CSSStyleSheet.insertRule()")}}
    • +
  • {{domxref("CSSStyleSheet.deleteRule()")}}
    • +
+ +

相关链接

+ + diff --git a/files/zh-cn/web/css/repeat()/index.html b/files/zh-cn/web/css/repeat()/index.html new file mode 100644 index 0000000000..e47a350e45 --- /dev/null +++ b/files/zh-cn/web/css/repeat()/index.html @@ -0,0 +1,143 @@ +--- +title: repeat() +slug: Web/CSS/repeat() +tags: + - CSS Grid + - Layout + - Repeat +translation_of: Web/CSS/repeat() +--- +
{{cssref}}
+ +

CSS repeat() 函数表示轨道列表的重复片段，允许以更紧凑的形式写入大量显示重复模式的列或行。

+ +

该函数可以用于 CSS Grid 属性中 {{cssxref("grid-template-columns")}} 和 {{cssxref("grid-template-rows")}}.

+ +
/* <track-repeat> values */
+repeat(4, 1fr)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] 1fr [col-end])
+repeat(4, [col-start] min-content [col-end])
+repeat(4, [col-start] max-content [col-end])
+repeat(4, [col-start] auto [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
+repeat(4, [col-start] min-content [col-middle] max-content [col-end])
+
+/* <auto-repeat> values */
+repeat(auto-fill, 250px)
+repeat(auto-fit, 250px)
+repeat(auto-fill, [col-start] 250px [col-end])
+repeat(auto-fit, [col-start] 250px [col-end])
+repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
+repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])
+
+/* <fixed-repeat> values */
+repeat(4, 250px)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
+
+ +

语法

+ +

取值

+ +
+
{{cssxref("<length>")}}
+
正整数长度。
+
{{cssxref("<percentage>")}}
+
相对于列网格轨道中网格容器的行内大小以及行网格轨道中网格容器的块大小的非负百分比。如果网格容器的大小取决于它的轨道大小，那么 <percentage> 必须被视为 auto. 用户代理（user-agent）可以将轨道的固有大小贡献调整为网格容器的大小，将轨道的最终大小增加到可以遵守该百分比的最小数量。
+
{{cssxref("<flex>")}}
+
带有 fr 单位的非负尺寸指定轨道的弹性系数。任何被 <flex> 指定大小的轨道会根据其弹性系数按比例分配剩余空间。
+
max-content
+
代表占据网格轨道的网格项目所分配的最大内容区域的最大值。
+
min-content
+
代表占据网格轨道的网格项目所分配的最小内容区域的最小值。
+
auto
+
作为最大值，等同于 max-content。作为最小值，它代表占据网格轨道的网格项目的最小尺寸的最大值 （如同{{cssxref("min-width")}}/{{cssxref("min-height")}}所指定的)）。
+
auto-fill
+
如果网格容器在相关轴上具有确定的大小或最大大小，则重复次数是最大可能的正整数，不会导致网格溢出其网格容器。如果定义了，将每个轨道视为其最大轨道尺寸大小函数 ( grid-template-rows 或 grid-template-columns用于定义的每个独立值。 否则，作为最小轨道尺寸函数，将网格间隙加入计算. 如果重复次数过多，那么重复值是 1 。否则，如果网格容器在相关轴上具有确定的最小尺寸，重复次数是满足该最低要求的可能的最小正整数。 否则，指定的轨道列表仅重复一次。
+
auto-fit
+
+

行为与 auto-fill 相同，除了放置网格项目后，所有空的重复轨道都将折叠。空轨道是指没有流入网格或跨越网格的网格项目。（如果所有轨道都为空，则可能导致所有轨道被折叠。）

+ +

折叠的轨道被视为具有单个固定轨道大小函数为 0px，两侧的槽都折叠了。

+ +

为了找到自动重复的轨道数，用户代理将轨道大小限制为用户代理指定的值（例如 1px），以避免被零除。

+
+
+ +

例子

+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: repeat(2, 50px 1fr) 100px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>
+    This item is 50 pixels wide.
+  </div>
+  <div>
+    Item with flexible width.
+  </div>
+  <div>
+    This item is 50 pixels wide.
+  </div>
+  <div>
+    Item with flexible width.
+  </div>
+  <div>
+    Inflexible item of 100 pixels width.
+  </div>
+</div>
+ +

结果

+ +

{{EmbedLiveSample("Example", "100%", 200)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}{{Spec2("CSS Grid")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.grid-template-columns.repeat")}}

diff --git a/files/zh-cn/web/css/repeating-linear-gradient()/index.html b/files/zh-cn/web/css/repeating-linear-gradient()/index.html new file mode 100644 index 0000000000..1fe6e76b86 --- /dev/null +++ b/files/zh-cn/web/css/repeating-linear-gradient()/index.html @@ -0,0 +1,296 @@ +--- +title: repeating-linear-gradient +slug: Web/CSS/repeating-linear-gradient() +translation_of: Web/CSS/repeating-linear-gradient() +--- +
{{CSSRef}}
+ +

CSS函数 repeating-linear-gradient() 创建一个由重复线性渐变组成的{{cssxref("<image>")}}， 这是一个类似 {{cssxref("linear-gradient")}} 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器. 这个函数的结果是一个{{cssxref("<gradient>")}} 数据类型的对象, 这是一个特殊的{{cssxref("<image>")}}类型。

+ +
/* 一个倾斜45度的重复线性渐变,
+   从蓝色开始渐变到红色 */
+repeating-linear-gradient(45deg, blue, red);
+
+/* 一个从右下角到左上角的重复线性渐变,
+   从蓝色开始渐变到红色 */
+repeating-linear-gradient(to left top, blue, red);
+
+/* 一个由下至上的重复线性渐变,
+   从蓝色开始，40%后变绿，
+   最后渐变到红色 */
+repeating-linear-gradient(0deg, blue, green 40%, red);
+
+ +

 

+ +

每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。

+ +

与其他渐变一样，线形重复渐变没有提供 固定的尺寸；即, 它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。

+ +
+

提示： 因为 <gradient> 属于<image> 数据类型，所以只能在可以使用 <image>的地方使用它们。因此repeating-linear-gradient() 不适用于{{Cssxref("background-color")}}以及使用 {{cssxref("<color>")}} 数据类型的地方。

+
+ +

语法

+ +

值

+ +
+
<side-or-corner>
+
描述渐变线的起始点位置。它包含两个关键词：第一个指出垂直位置left or right，第二个指出水平位置top or bottom。关键词的先后顺序无影响，且都是可选的。
+

+ to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
+
{{cssxref("<angle>")}}
+
用角度值指定渐变的方向（或角度）。角度顺时针增加。 
+
<color-stop>
+
由一个{{cssxref("<color>")}}值组成，并且跟随着一个可选的终点位置（可以是一个{{cssxref("<percentage>")}}或者是沿着渐变轴的{{cssxref("<length>")}}）。CSS渐变的颜色渲染采取了与SVG相同的规则。
+
+
+

提示：渲染颜色中间点的规则CSS渐变中的色标 与SVG渐变一致.

+
+
+
+ +

形式语法

+ +
repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
+                            \---------------------------------/ \----------------------------/
+                              渐变轴的定义                                色标列表
+
+where <side-or-corner> = [left | right] || [top | bottom]
+   and <color-stop>     = <color> [ <percentage> | <length> ]?
+
+ +

示例

+ +
+
#grad1 {
+  background-image: repeating-linear-gradient(180deg,
+      rgb(26,198,204),
+      rgb(26,198,204) 7%,
+      rgb(100,100,100) 10%);
+}
+
+#grad2 {
+  background-image: repeating-linear-gradient(-45deg,
+      transparent,
+      transparent 25px,
+      rgba(255,255,255,1) 25px,
+      rgba(255,255,255,1) 50px);
+}
+
+ +
<ol>
+  <li>Repeating horizontal bars
+    <div id="grad1"></div>
+  </li>
+  <li>Zebra stripes
+    <div id="grad2"></div>
+  </li>
+</ol>
+
+ + + +

{{EmbedLiveSample('Example_hidden', '300px', '300px', '')}}

+ +

规格

+ + + + + + + + + + + + + + + + +
规格状态备注
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}}){{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[3]
+ {{CompatGeckoDesktop("16")}}[5]		10.0 (534.16){{property_prefix("-webkit")}} [2][3]10.0 [1]11.10{{property_prefix("-o")}} [3]5.1{{property_prefix("-webkit")}}[2][3]
On {{cssxref("border-radius")}}{{CompatGeckoDesktop("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On any other property that accept {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Legacy webkit syntax{{non-standard_inline}}{{CompatNo}}3{{property_prefix("-webkit")}} [2]{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}[2]
Legacy from syntax (without to){{non-standard_inline}}{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[4]
+ Removed in {{CompatGeckoDesktop("16")}}[7]		10.0 (534.16){{property_prefix("-webkit")}} [2]10.011.10{{property_prefix("-o")}}[4]5.1{{property_prefix("-webkit")}}[2]
to syntax{{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}[4]
+ {{CompatGeckoDesktop("16")}}		26.010.011.60{{property_prefix("-o")}}[4]
+ Presto 2.12 will remove the prefix.		{{CompatNo}}
Interpolation hints/gradient midpoints (a percent without a color){{CompatGeckoDesktop("36")}}40{{CompatUnknown}}27{{CompatVersionUnknown}}[6]
Unitless 0 for <angle>{{CompatGeckoDesktop("46")}}{{property_prefix("-webkit")}}[8]
+ {{CompatNo}}[9]		{{CompatVersionUnknown}}Edge 12{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}[3]
+ {{CompatGeckoMobile("16")}}[5]		 +

16{{property_prefix("-webkit")}}
+ 26

+ 		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}[6]
+
+ +

[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

+ +

[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

+ +

[3] Gecko, Opera & Webkit considers {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.

+ +

[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:

+ +
-moz-repeating-linear-gradient(to top left, blue, red);
+ +

is the same as:

+ +
-moz-repeating-linear-gradient(bottom right, blue, red);
+ +

The legacy syntax, without to, is planned to go away when the prefix is removed.

+ +

[5] Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency.

+ +

[6] {{webkitbug(1074056)}}.

+ +

[7] In addition to the unprefixed support using the standard syntax, Gecko 44.0 {{geckoRelease("44.0")}} added support for a -webkit prefixed version of the function using the legacy 'from' syntax for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

+ +

[8] In -webkit-linear-gradient function (handled below), Gecko accept unitless 0 for angles, to match webkit/blink,See {{bug("1239153")}}.

+ +

[9] See {{bug("1363292")}}.

+ +

了解更多

+ +
    +
  • 使用CSS渐变
    • +
  • 其他渐变方法: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-radial-gradient")}}
    • +
diff --git a/files/zh-cn/web/css/repeating-radial-gradient()/index.html b/files/zh-cn/web/css/repeating-radial-gradient()/index.html new file mode 100644 index 0000000000..822bab8e6d --- /dev/null +++ b/files/zh-cn/web/css/repeating-radial-gradient()/index.html @@ -0,0 +1,264 @@ +--- +title: repeating-radial-gradient() +slug: Web/CSS/repeating-radial-gradient() +translation_of: Web/CSS/repeating-radial-gradient() +--- +
{{CSSRef}}
+ +

CSS函数repeating-radial-gradient() 创建一个从原点辐射的重复渐变组成的{{cssxref("<image>")}} 。它类似于{{cssxref("radial-gradient")}} 并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。函数的结果是  {{cssxref("<gradient>")}} 数据类型的对象， 是一种特殊的{{cssxref("<image>")}}类型。

+ +
/* 一个从容器中心点开始的重复渐变,
+   从红色开始，渐变到蓝色，再渐变到绿色 */
+repeating-radial-gradient(circle at center, red 0, blue, green 30px);
+
+ +

每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。

+ +

与其他渐变一样，线形重复渐变没有提供固定的尺寸； 即, 它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。

+ +
+

提示： 因为 <gradient> 属于<image> 数据类型，所以只能在可以使用 <image>的地方使用它们。因此repeating-linear-gradient() 不适用于{{Cssxref("background-color")}} 以及使用{{cssxref("<color>")}} 数据类型的地方。

+
+ +

语法

+ +

值

+ +
+
{{cssxref("<position>")}}
+
position与 {{cssxref("background-position")}} 或者 {{cssxref("transform-origin")}}类似。默认值为 center.
+
{{cssxref("<angle>")}}
+
渐变轴的角度。角度顺时针增加，默认值为0deg。
+
{{cssxref("<shape>")}}
+
渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。默认值为椭圆形，即 ellipse。
+
<extent-keyword>
+
关键字用于描述边缘轮廓的具体位置。以下为关键字常量：
+
+ + + + + + + + + + + + + + + + + + + + + + + +
KeywordDescription
closest-side渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
closest-corner渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
farthest-side与 closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
farthest-corner渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
+ +
+

提示: 早期的草案中还包含其他关键字(cover and contain) ，分别相当于标准关键字 farthest-corner 和 closest-side,。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。

+
+
+
<color-stop>
+
表示某个确定位置的固定色值，包含一个<color>值加上可选的位置值（相对虚拟渐变射线的<percentage>或者<length>长度值）。 百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。
+
+ +

形式语法

+ +
repeating-radial-gradient(
+       [[ circle  || <length> ]                     [at <position>]? , |
+        [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , |
+        [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |
+                                                     at <position>   ,    <color-stop> [ , <color-stop> ]+ )
+        \---------------------------------------------------------------/\--------------------------------/
+                  定义轮廓、尺寸和结束形状的位置                                    色标列表
+
+where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
+  and <color-stop> = <color> [ <percentage> | <length> ]?
+ +

示例

+ +

径向渐变沿着一条轴线进行渲染。在每个轴线的端点处可以指定一个半径。可以想象为创建了两个“圆”，每个圆的中心位置用点指定，大小由半径值指定。渐变从内圆的圆周向外延伸到外圆的圆周。

+ +

黑白相间的渐变

+ + + + + +

{{EmbedLiveSample('Black_and_white_gradient', '300px', '120px', '')}}

+ +
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+ +

Farthest-corner渐变

+ + + + + +

{{EmbedLiveSample('Farthest-corner', '300px', '120px', '')}}

+ +
background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
+ +

规格

+ + + + + + + + + + + + + + + + +
规格状态备注
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})10 {{property_prefix("-webkit")}}{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16")}}[1]		1012 {{property_prefix("-o")}}
+ 12.5		5.1 {{property_prefix("-webkit")}}
On {{cssxref("border-image")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On any other property that accept {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Interpolation hints (a percent without a color)40{{CompatGeckoDesktop("36")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})4.4{{CompatGeckoMobile("46")}}1012.17.1
On {{cssxref("border-image")}}{{CompatGeckoMobile("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On any other property that accept {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency. Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.

+ +

In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a -webkit prefixed version of the function for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

+ +

参阅：

+ +
    +
  • 使用渐变
    • +
  • 其他渐变方法: {{cssxref("radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}
    • +
diff --git a/files/zh-cn/web/css/replaced_element/index.html b/files/zh-cn/web/css/replaced_element/index.html new file mode 100644 index 0000000000..e8909dcccf --- /dev/null +++ b/files/zh-cn/web/css/replaced_element/index.html @@ -0,0 +1,64 @@ +--- +title: 可替换元素 +slug: Web/CSS/Replaced_element +tags: + - CSS + - 参考 +translation_of: Web/CSS/Replaced_element +--- +
{{CSSRef()}}
+ +

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。

+ +

简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 {{HTMLElement("iframe")}} 元素，可能具有自己的样式表，但它们不会继承父文档的样式。

+ +

CSS 能对可替换元素产生的唯一影响在于，部分属性支持控制元素内容在其框中的位置或定位方式。有关详细信息，请参阅本文下面的{{anch("控制内容框中的对象位置")}}。

+ +

可替换元素

+ +

典型的可替换元素有：

+ +
    +
  • {{HTMLElement("iframe")}}
    • +
  • {{HTMLElement("video")}}
    • +
  • {{HTMLElement("embed")}}
    • +
  • {{HTMLElement("img")}}
    • +
+ +

有些元素仅在特定情况下被作为可替换元素处理，例如：

+ +
    +
  • {{HTMLElement("option")}}
    • +
  • {{HTMLElement("audio")}}
    • +
  • {{HTMLElement("canvas")}}
    • +
  • {{HTMLElement("object")}}
    • +
  • {{HTMLElement("applet")}}
    • +
+ +

HTML 规范也说了 {{HTMLElement("input")}} 元素可替换，因为 "image" 类型的 {{HTMLElement("input")}} 元素就像{{HTMLElement("img")}}一样被替换。但是其他形式的控制元素，包括其他类型的 {{HTMLElement("input")}} 元素，被明确地列为非可替换元素（non-replaced elements）。该规范用术语小挂件（Widgets）来描述它们默认的限定平台的渲染行为。

+ +

用 CSS {{cssxref("content")}} 属性插入的对象是匿名的可替换元素。它们并不存在于 HTML 标记中，因此是“匿名的”。

+ +

CSS 与可替换元素

+ +

CSS 在某些情况下会对可替换元素做一些特殊处理，比如计算外边距（{{cssxref("margin")}}）和一些 auto 的具体值。

+ +

需要注意的是，一部分（并非全部）可替换元素，其本身具有的尺寸和基线（baseline）会被一些 CSS 属性用到，加入计算之中，例如 {{cssxref("vertical-align")}}。只有可替换元素才能具有这种自带值。

+ +

控制内容框中的对象位置

+ +

某些CSS属性可用于指定 可替换元素中包含的内容对象 在该元素的盒区域内的位置或定位方式。这些属性的具体定义可以在 {{SpecName("CSS3 Images")}} 和 {{SpecName("CSS4 Images")}} 规范中找到：

+ +
+
{{cssxref("object-fit")}}
+
指定可替换元素的内容对象在元素盒区域中的填充方式。（有些类似于 {{cssxref("background-size")}} ）
+
{{cssxref("object-position")}}
+
指定可替换元素的内容对象在元素盒区域中的位置。（类似于 {{cssxref("background-position")}} ）
+
+ +

参见

+ +
    +
  • 可替换元素的 HTML 规范
    • +
  • {{CSS_key_concepts()}}
    • +
diff --git a/files/zh-cn/web/css/resize/index.html b/files/zh-cn/web/css/resize/index.html new file mode 100644 index 0000000000..095c57ec78 --- /dev/null +++ b/files/zh-cn/web/css/resize/index.html @@ -0,0 +1,210 @@ +--- +title: resize +slug: Web/CSS/resize +tags: + - resize + - 调整大小 +translation_of: Web/CSS/resize +--- +
{{CSSRef}}
+ +

概述

+ +

 resize CSS 属性允许你控制一个元素的可调整大小性。

+ +

{{cssinfo}}

+ +

语法

+ +
/* Keyword values */
+resize: none;
+resize: both;
+resize: horizontal;
+resize: vertical;
+resize: block;
+resize: inline;
+
+/* Global values */
+resize: inherit;
+resize: initial;
+resize: unset;
+
+ +

取值

+ +
+
none
+
元素不能被用户缩放。
+
both
+
允许用户在水平和垂直方向上调整元素的大小。
+
horizontal
+
允许用户在水平方向上调整元素的大小。
+
vertical
+
允许用户在垂直方向上调整元素的大小。
+
block {{experimental_inline}}
+
Depending on the {{cssxref("writing-mode")}} and {{cssxref("direction")}} value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in block direction.
+
inline {{experimental_inline}}
+
Depending on the {{cssxref("writing-mode")}} and {{cssxref("direction")}} value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in inline direction.
+
+ +
Note: 如果一个block元素的 {{cssxref("overflow")}} 属性被设置成了visible，那么resize属性对该元素无效。
+ +

标准语法

+ +
{{csssyntax}}
+ +

例子

+ +

Disabling resizability of textareas

+ +

CSS

+ +

{{HTMLElement("textarea")}} 元素在{{gecko("2.0")}} (Firefox 4)中默认是可以进行缩放的. 你可以通过下面的CSS代码来重写这种行为：

+ +
textarea.example {
+  resize: none; /* disables resizability */
+}
+
+ +

HTML

+ +
<textarea class="example">Type some text here.</textarea>
+ +

Result

+ +

{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}}

+ +

Using resize with arbitrary elements

+ +

You can use the resize property to make any element resizable. In the example below, a resizable {{HTMLElement("div")}} box contains a resizable paragraph ({{HTMLElement("p")}} element):

+ +

CSS

+ +
.resizable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}
+
+ +

HTML

+ +
<div class="resizable">
+  <p class="resizable">
+    This paragraph is resizable, because the CSS resize property is set to 'both' on this
+    element.
+  </p>
+</div>
+
+ +

Result

+ +

{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Logical Properties', '#resize', 'resize')}}{{Spec2('CSS Logical Properties')}}Adds the values block and inline.
{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}{{Spec2('CSS3 Basic UI')}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support (on {{HTMLElement("textarea")}})1.0{{CompatGeckoDesktop("2.0")}}{{property_prefix("-moz")}}{{CompatNo}}12.13.0 (522)
On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is visible)4.0{{CompatGeckoDesktop("5.0")}}[1]{{CompatNo}}154.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support (on {{HTMLElement("textarea")}}){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is visible){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] resize doesn't have any effect on {{HTMLElement("iframe")}} (cf. {{bug(680823)}})

+ +

See also

+ +
    +
  • {{HTMLElement("textarea")}}
    • +
diff --git a/files/zh-cn/web/css/resolution/index.html b/files/zh-cn/web/css/resolution/index.html new file mode 100644 index 0000000000..c388088a35 --- /dev/null +++ b/files/zh-cn/web/css/resolution/index.html @@ -0,0 +1,98 @@ +--- +title: +slug: Web/CSS/resolution +tags: + - CSS + - 参考系 + - 布局 +translation_of: Web/CSS/resolution +--- +
{{CSSRef}}
+ +
分辨率：用于描述媒体查询中的分辨率的<resolution> CSS数据类型表示输出设备的像素密度。
+ +

在屏幕上，单位与CSS英寸，厘米或像素有关，而与物理值无关。

+ +

Syntax

+ +

<resolution>数据类型由严格为正{{cssxref("<number>")}}组成，后跟下面列出的单位之一。与所有CSS维度一样，单位字面值与数字之间没有空格。

+ +

单位

+ +
+
dpi
+
表示每英寸的点数。屏幕通常每英寸包含72或96个点，但打印文档的dpi通常要大得多。 1英寸是2.54厘米，1dpi≈0.39dpcm。
+
dpcm
+
每厘米上的点数。1英寸是2.54厘米, 1dpcm ≈ 2.54dpi.
+
dppx
+
表示每个px的点数。 由于CSS px的固定比率为1:96，因此1dppx相当于96dpi。 which corresponds to the default resolution of images displayed in CSS as defined by {{cssxref("image-resolution")}}.
+
x
+
 dppx 的别名
+
+ +
+

Note: Although the number 0 is always the same regardless of unit, the unit may not be omitted. In other words, 0 is invalid and does not represent 0dpi, 0dpcm, or 0dppx.

+
+ +

Examples

+ +

Use in a media query

+ +
@media print and (min-resolution: 300dpi) { ... }
+ +

Valid resolutions

+ +
96dpi
+50.82dpcm
+3dppx
+
+ +

Invalid resolutions

+ +
72 dpi     Spaces are not allowed between the number and the unit.
+ten dpi    The number must use digits only.
+0          The unit is required.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Values', '#resolution', '<resolution>')}}{{Spec2('CSS4 Values')}}Adds the x unit.
{{SpecName('CSS3 Values', '#resolution', '<resolution>')}}{{Spec2('CSS3 Values')}}Adds the dppx unit.
{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}{{Spec2('CSS3 Media Queries')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("css.types.resolution")}}

+
+ +

See also

+ + diff --git a/files/zh-cn/web/css/resolved_value/index.html b/files/zh-cn/web/css/resolved_value/index.html new file mode 100644 index 0000000000..7a1a6c3b40 --- /dev/null +++ b/files/zh-cn/web/css/resolved_value/index.html @@ -0,0 +1,35 @@ +--- +title: 解析值 +slug: Web/CSS/resolved_value +translation_of: Web/CSS/resolved_value +--- +
{{cssref}}
+ +

CSS 属性的解析值（resolved value ）是 {{domxref("Window.getComputedStyle", "getComputedStyle()")}}返回的值。 对于大多数属性，它是计算值{{cssxref("computed_value", "computed value") }}，但对于一些旧属性（包括宽度和高度），它是使用值{{cssxref("used_value", "used value")}}。 有关详细信息，请参阅下面的规范链接。

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSSOM", "#resolved-values", "resolved value")}}{{Spec2("CSSOM")}}Initial definition
+ +

参考

+ +
    +
  • CSS Reference
    • +
  • {{CSS_key_concepts}}
    • +
  • {{domxref("window.getComputedStyle")}}
    • +
diff --git a/files/zh-cn/web/css/right/index.html b/files/zh-cn/web/css/right/index.html new file mode 100644 index 0000000000..79559cebac --- /dev/null +++ b/files/zh-cn/web/css/right/index.html @@ -0,0 +1,131 @@ +--- +title: right +slug: Web/CSS/right +translation_of: Web/CSS/right +--- +
{{CSSRef}}
+ +

right样式属性定义了定位元素的右外边距边界与其包含块右边界之间的偏移，非定位元素设置此属性无效。

+ +
/* <length> values */
+right: 3px;
+right: 2.4em;
+
+/* <percentage>s of the width of the containing block */
+right: 10%;
+
+/* Keyword value */
+right: auto;
+
+/* Global values */
+right: inherit;
+right: initial;
+right: unset;
+
+ +

right的效果取决于元素的position属性：

+ +
    +
  • 当position设置为absolute或fixed时，right属性指定了定位元素右外边距边界与其包含块右边界之间的偏移。
    • +
  • 当position设置为relative时，right属性指定了元素的右边界离开其正常位置的偏移。
    • +
  • 当position设置为sticky时，如果元素在viewport里面，right属性的效果和position为relative等同；如果元素在viewport外面，right属性的效果和position为fixed等同。
    • +
  • 当position设置为static时，right属性无效。
    • +
+ +

当{{cssxref("left")}}​​​​​​和right同时指定时，元素的位置会被重复指定。当容器是从左到右时，left的值会被优先设定；当容器是从右到左时，right的值会被优先设定。

+ +

{{cssinfo}}

+ +

语法

+ +

取值

+ +
+
{{cssxref("<length>")}}
+
可以是负的，正的 或者 null {{cssxref("<length>")}} 表示: +
    +
  • 对于绝对定位的元素，元素右外边距边界与其包含块右边界之间的偏移。
    • +
  • 对于相对定位定位的元素，元素的右边界离开其正常位置的偏移。
    • +
+
+
{{cssxref("<percentage>")}}
+
代表元素包含块的宽度的百分比 {{cssxref("<percentage>")}}。
+
auto
+
这个关键字表示: +
    +
  • 对于绝对定位元素，元素将忽略此属性而以{{ Cssxref("left") }}属性为准，如果此时设置width: auto，将基于内容需要的宽度设置宽度；如果left也为auto的话，元素的水平位置就是它假如作为静态(即static)元素时该在的位置。
    • +
  • 对于相对定位元素，元素相对正常位置的偏移量将基于{{ Cssxref("left") }}属性；如果left也为 auto的话，元素将不会有偏移。
    • +
+
+
inherit
+
这个关键字表示该值与其父元素 (可能不是它的包含块) 的计算值相同。对这个计算值的处理将和它原本为 {{cssxref("<length>")}}， {{cssxref("<percentage>")}} 或 auto 一样。
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

示例

+ +
#example_3 {
+  width: 100px;
+  height: 100px;
+  background-color: #FFC7E4;
+  position: relative;
+  top: 20px;
+  left: 20px;
+}
+
+#example_4 {
+  width: 100px;
+  height: 100px;
+  background-color: #FFD7C2;
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+}
+ +
<div id="example_3">Example 3</div>
+<div id="example_4">Example 4</div>
+
+ +

{{ EmbedLiveSample('Examples', 500, 220) }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}{{Spec2('CSS3 Transitions')}}Defines rightas animatable.
{{SpecName('CSS3 Positioning', '#propdef-right', 'right')}}{{Spec2('CSS3 Positioning')}}Adds behavior for sticky positioning.
{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.right")}}

+ +
 
diff --git a/files/zh-cn/web/css/rotate/index.html b/files/zh-cn/web/css/rotate/index.html new file mode 100644 index 0000000000..6173e189c9 --- /dev/null +++ b/files/zh-cn/web/css/rotate/index.html @@ -0,0 +1,116 @@ +--- +title: rotate +slug: Web/CSS/rotate +translation_of: Web/CSS/rotate +--- +
{{CSSRef}}{{seecompattable}}{{draft}}
+ +

rotate属性允许你单独设置transform的旋转属性。这种映射方式可以让我们更方便的设置我们想要的效果，并且避免了简写形式需要记忆属性顺序的不方便之处。

+ +

语法

+ +
/* Keyword values */
+scale: none;
+
+/* Angle value */
+rotate: 90deg;
+rotate: 0.25turn;
+rotate: 1.57rad;
+
+/* x, y, or z axis name plus angle */
+rotate: x 90deg;
+rotate: y 0.25turn;
+rotate: z 1.57rad;
+
+/* Vector plus angle value */
+rotate: 1 1 1 90deg;
+ +

值

+ +
+
角度值
+
An {{cssxref("<angle>")}} specifying the angle to rotate the affected element through, around the Z axis. Equivalent to a rotate() (2D rotation) function.
+
x, y 或者 z 轴名称加上角度值
+
The name of the axis you want to rotate the affected element around ("x", "y", or "z"), plus an {{cssxref("<angle>")}} specifying the angle to rotate the element through. Equivalent to a rotateX()/rotateY()/rotateZ() (3D rotation) function.
+
向量加上角度值
+
Three {{cssxref("<number>")}}s representing an origin-centered vector that defines a line around which you want to rotate the element, plus an {{cssxref("<angle>")}} specifying the angle to rotate the element through. Equivalent to a rotate3d() (3D rotation) function.
+
none
+
指定不应用旋转
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<div>
+  <p class="rotate">Rotation</p>
+</div>
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+div {
+  width: 150px;
+  margin: 0 auto;
+}
+
+p {
+  padding: 10px 5px;
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 150px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.rotate {
+  transition: rotate 1s;
+}
+
+div:hover .rotate {
+  rotate: 1 -0.5 1 180deg;
+}
+ +

Result

+ +

{{EmbedLiveSample('Examples')}}

+ + + +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}{{Spec2('CSS Transforms 2')}}Initial definition.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.rotate")}}

diff --git a/files/zh-cn/web/css/row-gap/index.html b/files/zh-cn/web/css/row-gap/index.html new file mode 100644 index 0000000000..2749f187da --- /dev/null +++ b/files/zh-cn/web/css/row-gap/index.html @@ -0,0 +1,153 @@ +--- +title: row-gap (grid-row-gap) +slug: Web/CSS/row-gap +translation_of: Web/CSS/row-gap +--- +
{{CSSRef}}
+ +

 row-gap 该 CSS 属性用来设置行元素之间的间隙({{glossary("gutters","gutter")}}) 大小。

+ +
{{EmbedInteractiveExample("pages/css/grid-row-gap.html")}}
+ + + +
+

CSS Grid Layout 起初是用 grid-row-gap 属性来定义的，目前逐渐被 row-gap 替代。但是，为了兼容那些不支持 row-gap 属性的浏览器，你需要像上面的例子一样使用带有前缀的属性。

+
+ +

语法

+ +
/* <length> values */
+row-gap: 20px;
+row-gap: 1em;
+row-gap: 3vmin;
+row-gap: 0.5cm;
+
+/* <percentage> value */
+row-gap: 10%;
+
+/* Global values */
+row-gap: inherit;
+row-gap: initial;
+row-gap: unset;
+
+ +

值

+ +
+
<length-percentage>
+
表示行之间的间隔宽度。 {{cssxref("<percentage>")}} 表示相对栅格容器的百分比。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

Flex布局

+ +

{{SeeCompatTable}}

+ +

HTML

+ +
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+ +

CSS

+ +
#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  row-gap: 20px;
+}
+
+#flexbox > div {
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+
+}
+
+ +

结果

+ +

{{EmbedLiveSample('Flex布局', "auto", "120px")}}

+ +

Grid布局

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(3, 1fr);
+  row-gap: 20px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

结果

+ +

{{EmbedLiveSample('Grid布局', 'auto', 120)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS3 Box Alignment", "#propdef-row-gap", "row-gap")}}{{Spec2("CSS3 Box Alignment")}}初始定义
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

在Flex布局中的兼容性

+ +

{{Compat("css.properties.row-gap.flex_context")}}

+ +

在网格布局中的兼容性

+ +

{{Compat("css.properties.row-gap.grid_context")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/scale/index.html b/files/zh-cn/web/css/scale/index.html new file mode 100644 index 0000000000..e77add2f27 --- /dev/null +++ b/files/zh-cn/web/css/scale/index.html @@ -0,0 +1,117 @@ +--- +title: scale +slug: Web/CSS/scale +tags: + - CSS + - transform +translation_of: Web/CSS/scale +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS属性 scale 允许你可以分别且独立地指定CSS属性 {{CSSxRef("transform")}} 缩放的比例。这更好地映射到典型的UI（用户界面）用法中，并免去了在指定变换值时必须记住变换函数的精确顺序的麻烦。

+ +

语法

+ +
/* 关键值 */
+scale: none;
+
+/* 单个值 */
+/* 设定比1大的数值使该元素变大 */
+scale: 2;
+/* 设定比1小的数值使该元素缩小 */
+scale: 0.5;
+
+/* 两个值 */
+scale: 2 0.5;
+
+/* 三个值 */
+scale: 2 0.5 2;
+ +

取值

+ +
+
单一数值
+
单一的数值即指定了一个缩放系数，同时作用于X轴和Y轴让该元素进行缩放，相当于指定了单个值的scale()(2D缩放)函数。
+
两个长度/百分比值
+
两个数值即分别指定了2D比例的X轴和Y轴的缩放系数，相当于指定了两个值的scale()（2D缩放）函数。
+
三个长度/百分比值
+
三个数值即分别指定了3D比例的X轴、Y轴和Z轴的缩放系数. 相当于一个scale3d()函数。
+
none
+
指定不进行缩放。
+
+ +

标准语法

+ +
{{CSSSyntax}}
+ +

示例

+ +

HTML

+ +
<div>
+  <p class="scale">Scaling</p>
+</div>
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+}
+
+div {
+  width: 150px;
+  margin: 0 auto;
+}
+
+p {
+  padding: 10px 5px;
+  border: 3px solid black;
+  border-radius: 20px;
+  width: 150px;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.scale {
+  transition: scale 1s;
+}
+
+div:hover .scale {
+  scale: 2 0.7;
+}
+
+ +

结果

+ +

{{EmbedLiveSample("Examples")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS Transforms 2", "#individual-transforms", "individual transforms")}}{{Spec2("CSS Transforms 2")}}Initial definition.
+ +

{{CSSInfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.scale")}}

diff --git a/files/zh-cn/web/css/scaling_of_svg_backgrounds/index.html b/files/zh-cn/web/css/scaling_of_svg_backgrounds/index.html new file mode 100644 index 0000000000..44ae63b403 --- /dev/null +++ b/files/zh-cn/web/css/scaling_of_svg_backgrounds/index.html @@ -0,0 +1,326 @@ +--- +title: SVG 背景缩放 +slug: Web/CSS/Scaling_of_SVG_backgrounds +translation_of: Web/CSS/Scaling_of_SVG_backgrounds +--- +
{{cssref}}
+ +
SVG 相比其他格式为我们提供了更多的灵活性，与此同时当我们把它用作背景图形 {{ cssxref("background-image") }} 时有更多需要我们注意的东西，尤其是在我们使用 {{ cssxref("background-size") }} 属性时。本文描述了在使用这些属性时如何处理 SVG 图像的缩放。
+ +

规则概要

+ +

大部分计算方式可以用这四条规则来概括。这些规则基本上涵盖了大部分情况除了个别边缘问题。

+ +
    +
  1. 当 {{ cssxref("background-size") }} 指定了固定的尺寸 （百分比或者其他单位），会按照固定的尺寸来。
    2. +
  2. 当图片自身存在固有的比例（宽高比恒定，诸如 16:9、4:3、2.39:1、1:1 等等)，渲染出的尺寸使用这个比例。
    3. +
  3. 当图像指定了尺寸，并且这个尺寸没有被修改，则使用指定的尺寸。
    4. +
  4. 当不是上述情况时，则图像将呈现与背景区域相同的大小。
    5. +
+ +

总体来说，上列尺寸计算规则关心的是一个图像有无定义的尺寸和比例，与图片格式没有关系。具有固定尺寸的 SVG 图像依然被视为大小相同的光栅图像。

+ +

源图片示例

+ +

在深入研究使用{{ cssxref("background-size") }}并不同类型图片的影响并且得到结果之前，我们先来看看不同尺寸和大小的图像示例。

+ +

在每个例子中，图像被渲染在 150x150 的容器内，并且在下方提供了 SVG 文件资源

+ +

无尺寸无比例

+ +

下面这个图片既没有尺寸也没有比例。这种情况不会关心它的尺寸也不关心它的长宽比例。无论你的屏幕尺寸和长宽比如何，这都是一个很好的渐变桌面背景。

+ +

no-dimensions-or-ratio.png

+ +

SVG图片源码

+ +

指定一个维度的尺寸，但无固定比例

+ +

这个图片指定了 100px 的宽但是没有高度也没有固定的比例。我们可以说这是一个可以在一条街道上无线延伸的壁纸。

+ +

100px-wide-no-height-or-ratio.png

+ +

SVG图片源码

+ +

指定一个维度的尺寸，有固定比例

+ +

这个图片指定了 100px 的高但没有宽。 同时指定了一个 3:4 的比例，除非是故意放大到不成比例的尺寸（也就是说，通过显式指定宽度和高度到不是这个比例）

+ +

100px-height-3x4-ratio.png

+ +

SVG图片源码

+ +

无宽高，有固定比例

+ +

这个图片既没有指定高度也没有指定宽度。它指定的是 1:1 的固定比例。就像软件的图标一样。它总是保持正方形，而且可以用于任何尺寸，例如  32x32，128x128，和 512x512。

+ +

no-dimensions-1x1-ratio.png

+ +

SVG图片源码

+ +

缩放示例

+ +

现在让我们来看看这些图片在各种缩放情景下怎么展现。以下例子都是宽 300 高 200 像素的矩形。此外， {{ cssxref("background-repeat") }} 都设为了 no-repeat ，以便看得出来缩放的情况。

+ +
注意: 以下截屏只表达 符合预期的 渲染效果。目前不是所有的浏览器都能正确的渲染这些代码。
+ +

两个维度都指定尺寸

+ +

如果你使用 {{ cssxref("background-size") }} 指定了两条边的长度， those lengths are always used, per rule 1 above. In other words, the image will always get stretched to the dimensions you specify, regardless of whether or not the source image has specified its dimensions and/or aspect ratio.

+ +

Source: No dimensions or intrinsic ratio

+ +

Given this CSS:

+ +
background: url(no-dimensions-or-ratio.svg);
+background-size: 125px 175px;
+
+ +

The rendered output would look like this:

+ +

fixed-no-dimensions-or-ratio.png

+ +

Source: One specified dimension, no intrinsic ratio

+ +

Given this CSS:

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: 250px 150px;
+
+ +

The rendered output would look like this:

+ +

fixed-100px-wide-no-height-or-ratio.png

+ +

Source: One specified dimension with intrinsic ratio

+ +

Given this CSS:

+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: 275px 125px;
+
+ +

The rendered output would look like this:

+ +

fixed-100px-height-3x4-ratio.png

+ +

Source: No specified width or height with intrinsic ratio

+ +

Given this CSS:

+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: 250px 100px;
+
+ +

The rendered output would look like this:

+ +

fixed-no-dimensions-1x1-ratio.png

+ +

使用 contain 或者 cover

+ +

当 {{ cssxref("background-size") }} 指定为 cover 时，图片能多小就多小，只要依然能覆盖整个背景区域。而指定为 contain 则会使得图片能多大就多大，只要不被背景裁切就好。

+ +

For an image with an intrinsic ratio, exactly one size matches the cover/fit criteria alone. But if there is no intrinsic ratio specified, cover/fit isn't sufficient, so the large/small constraints choose the resulting size.

+ +

Source: No dimensions or intrinsic ratio

+ +

If an image doesn't specify either dimensions or an intrinsic ratio, neither rule 2 nor rule 3 apply, so rule 4 takes over: the background image is rendered covering the entire background area. This satisfies the largest-or-smallest constraint.

+ +
background: url(no-dimensions-or-ratio.svg);
+background-size: contain;
+
+ +

The rendered output looks like this:

+ +

no-dimensions-or-ratio-contain.png

+ +

Source: One specified dimension, no intrinsic ratio

+ +

Similarly, if the image has one dimension specified but no intrinsic ratio, rule 4 applies, and the image is scaled to cover the entire background area.

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: contain;
+
+ +

The rendered output looks like this:

+ +

100px-wide-no-height-or-ratio-contain.png

+ +

Source: One specified dimension with intrinsic ratio

+ +

Things change when you specify an intrinsic ratio. In this case, rule 1 isn't relevant, so rule 2 is applied: we try to preserve any intrinsic ratio (while respecting contain or cover). For example, preserving a 3:4 intrinsic aspect ratio for a 300x200 box with contain means drawing a 150x200 background.

+ +
contain case
+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: contain;
+
+ +

The rendered output looks like this:

+ +

100px-height-3x4-ratio-contain.png

+ +

Notice how the entire image is rendered, fitting as best as possible into the box without clipping any of it away.

+ +
cover case
+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: cover;
+
+ +

The rendered output looks like this:

+ +

100px-height-3x4-ratio-cover.png

+ +

Here, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.

+ +

Source: No dimensions with intrinsic ratio

+ +

When using an image with no intrinsic dimensions but an intrinsic ratio, things work similarly.

+ +
contain case
+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: contain;
+
+ +

The rendered output looks like this:

+ +

no-dimensions-1x1-ratio-contain.png

+ +

Notice that the image is sized to fit the smallest dimension while preserving the 1:1 aspect ratio.

+ +
cover case
+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: cover;
+
+ +

The rendered output looks like this:

+ +

no-dimensions-1x1-ratio-cover.png

+ +

Here, the image is sized so that it fills the largest dimension. The 1:1 aspect ratio has been preserved, although with this source image, that can be difficult to see.

+ +

Automatic sizing using "auto" for both dimensions

+ +

If {{ cssxref("background-size") }} is set to auto or auto auto, rule 2 says that rendering must preserve any intrinsic ratio that's provided.

+ +

Source: No dimensions or intrinsic ratio

+ +

When no intrinsic ratio or dimensions are specified by the source image, rule 4 takes effect, and the image is rendered to fill the background area.

+ +
background: url(no-dimensions-or-ratio.svg);
+background-size: auto auto;
+
+ +

The rendered output looks like this:

+ +

auto-no-dimensions-or-ratio.png

+ +

Source: One dimension and no intrinsic ratio

+ +

If no intrinsic ratio is specified, but at least one dimension is specified, rule 3 takes effect, and we render the image obeying those dimensions.

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: auto auto;
+
+ +

The rendered output looks like this:

+ +

auto-100px-wide-no-height-or-ratio.png

+ +

Note here that the width, which is specified in the source SVG at 100 pixels, is obeyed, while the height fills the background area since it's not specified (either explicitly or by an intrinsic ratio).

+ +

Source: One dimension and an intrinsic ratio

+ +

If we have an intrinsic ratio with a fixed dimension, that fixes both dimensions in place. Knowing one dimension and a ratio is, as has been mentioned already, the same as specifying both dimensions explicitly.

+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: auto auto;
+
+ +

The rendered output looks like this:

+ +

auto-100px-height-3x4-ratio.png

+ +

Since this image has an explicit 100 pixel height, the 3:4 ratio explicitly sets its width at 75 pixels, so that's how it's rendered in the auto case.

+ +

Source: No fixed dimensions with intrinsic ratio

+ +

When an intrinsic ratio is specified, but no dimensions, rule 4 is applied -- except that rule 2 also applies. The image is therefore rendered just like for the contain case.

+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: auto auto;
+
+ +

The rendered output looks like this:

+ +

auto-no-dimensions-1x1-ratio.png

+ +

Using "auto" and one specific length

+ +

Given rule 1, specified dimensions are always used, so we need to use our rules only to determine the second dimension.

+ +

Source: No dimensions or intrinsic ratio

+ +

If the image has no dimensions or intrinsic ratio, rule 4 applies, and we use the background area's dimension to determine the value for the auto dimension.

+ +
background: url(no-dimensions-or-ratio.svg);
+background-size: auto 150px;
+
+ +

1auto-no-dimensions-or-ratio.png

+ +

Here, the width is determined using the background area's width per rule 4, while the height is the 140px specified in the CSS.

+ +

Source: One specified dimension with no intrinsic ratio

+ +

If the image has one specified dimension but no intrinsic ratio, that specified dimension is used per rule 3 if that dimension is set to auto in the CSS.

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: 200px auto;
+
+ +

100px-wide-no-height-or-ratio-length-auto.png

+ +

Here, the 200px specified in the CSS overrides the 100px width specified in the SVG, per rule 1. Since there's no intrinsic ratio or height provided, auto selects the height of the background area as the height for the rendered image.

+ +
background: url(100px-wide-no-height-or-ratio.svg);
+background-size: auto 125px;
+
+ +

100px-wide-no-height-or-ratio-auto-length.png

+ +

In this case, the width is specified as auto in the CSS, so the 100px width specified in the SVG is selected, per rule 3. The height is set at 125px in the CSS, so that is selected per rule 1.

+ +

Source: One specified dimension with intrinsic ratio

+ +

When a dimension is specified, rule 1 applies that dimension from the SVG to the rendered background unless specifically overridden by the CSS. When an intrinsic ratio is also specified, that's used to determine the other dimension.

+ +
background: url(100px-height-3x4-ratio.svg);
+background-size: 150px auto;
+
+ +

1auto-100px-height-3x4-ratio.png

+ +

In this case, we've overridden the height of the image in the CSS to be 150px, so rule 1 is applied. The intrinsic 3:4 aspect ratio then determines the width for the auto case.

+ +

Source: No specified dimensions with intrinsic ratio

+ +

If no dimensions are specified in the SVG, the specified dimension in the CSS is applied, then the intrinsic ratio is used to select the other dimension, per rule 2.

+ +
background: url(no-dimensions-1x1-ratio.svg);
+background-size: 150px auto;
+
+ +

1auto-no-dimensions-1x1-ratio.png

+ +

The width is set by the CSS to 150px. The auto value for the height is computed using that width and the 1:1 aspect ratio to be 150px as well, resulting in the image above.

+ +

See also

+ + diff --git a/files/zh-cn/web/css/scroll-behavior/index.html b/files/zh-cn/web/css/scroll-behavior/index.html new file mode 100644 index 0000000000..896ef6d6a0 --- /dev/null +++ b/files/zh-cn/web/css/scroll-behavior/index.html @@ -0,0 +1,123 @@ +--- +title: scroll-behavior +slug: Web/CSS/scroll-behavior +tags: + - CSS + - CSS 属性 + - 参考 +translation_of: Web/CSS/scroll-behavior +--- +
{{ CSSRef }}
+ +

当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS 属性 scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。

+ +

{{cssinfo}}

+ + +
{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}
+ + + +

用户代理可以忽略此属性。

+ +

语法

+ +
/* Keyword values */
+scroll-behavior: auto;
+scroll-behavior: smooth;
+
+/* Global values */
+scroll-behavior: inherit;
+scroll-behavior: initial;
+scroll-behavior: unset;
+
+ +

值

+ +
+
auto
+
滚动框立即滚动。
+
smooth
+
滚动框通过一个用户代理预定义的时长、使用预定义的时间函数，来实现平稳的滚动，用户代理应遵循其平台的约定，如果有的话。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

例子

+ +

HTML

+ +
<nav>
+  <a href="#page-1">1</a>
+  <a href="#page-2">2</a>
+  <a href="#page-3">3</a>
+</nav>
+<scroll-container>
+  <scroll-page id="page-1">1</scroll-page>
+  <scroll-page id="page-2">2</scroll-page>
+  <scroll-page id="page-3">3</scroll-page>
+</scroll-container>
+ +

CSS

+ +
a {
+  display: inline-block;
+  width: 50px;
+  text-decoration: none;
+}
+nav, scroll-container {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+}
+nav {
+  width: 339px;
+  padding: 5px;
+  border: 1px solid black;
+}
+scroll-container {
+  display: block;
+  width: 350px;
+  height: 200px;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+scroll-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 5em;
+}
+
+ +

输出

+ +

{{ EmbedLiveSample('Example', "100%", 250) }}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}{{Spec2('CSSOM View')}}Initial specification
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.scroll-behavior")}}

diff --git a/files/zh-cn/web/css/scroll-margin-top/index.html b/files/zh-cn/web/css/scroll-margin-top/index.html new file mode 100644 index 0000000000..499f5f0a41 --- /dev/null +++ b/files/zh-cn/web/css/scroll-margin-top/index.html @@ -0,0 +1,71 @@ +--- +title: scroll-margin-top +slug: Web/CSS/scroll-margin-top +tags: + - CSS + - CSS Property + - Reference + - Web + - scorll-margin + - scroll-margin-top +translation_of: Web/CSS/scroll-margin-top +--- +
{{CSSRef}}
+ +

scroll-margin-top 属性定义了滚动捕捉区域的顶边距，用于在捕捉视口上捕捉该盒子。滚动捕捉区域是由变换后的边框决定的，找到它的矩形边界框（在滚动容器的坐标空间轴中轴对齐），然后添加指定的起始点。

+ +
{{EmbedInteractiveExample("pages/css/scroll-margin-top.html")}}
+ + + +

语法

+ +
/* <length> values */
+scroll-margin-top: 10px;
+scroll-margin-top: 1em;
+
+/* Global values */
+scroll-margin-top: inherit;
+scroll-margin-top: initial;
+scroll-margin-top: unset;
+
+ +

值

+ +
+
<length>
+
滚动容器顶部边缘的起点
+
+ +

标准定义

+ +

{{cssinfo}}

+ +

标准语法

+ +
{{csssyntax}}
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin-top", "scroll-margin-top")}}{{Spec2("CSS Scroll Snap Points")}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.scroll-margin-top")}}

diff --git a/files/zh-cn/web/css/scroll-margin/index.html b/files/zh-cn/web/css/scroll-margin/index.html new file mode 100644 index 0000000000..cfe4143ea2 --- /dev/null +++ b/files/zh-cn/web/css/scroll-margin/index.html @@ -0,0 +1,64 @@ +--- +title: scroll-margin +slug: Web/CSS/scroll-margin +translation_of: Web/CSS/scroll-margin +--- +
{{CSSRef}}
+ +

scroll-margin 属性是修改一系列 scroll-margin 手写特性的快捷方式, 它分配值的方式与 margin 属性为各个 margin-* 手写特性分配值的方式非常类似。

+ +
{{EmbedInteractiveExample("pages/css/scroll-margin.html")}}
+ + + +

scroll-margin 属性的值代表用于将盒元素拖拽到显示区域的拖拽滚动区域的起点。拖拽滚动区域由是由转换后边框大小的盒元素决定的，它会找到盒元素的矩形边界（在滚动的容器的坐标空间轴上），并添加指定的起点。

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* <length> values */
+scroll-margin: 10px;
+scroll-margin: 1em .5em 1em 1em;
+
+/* Global values */
+scroll-margin: inherit;
+scroll-margin: initial;
+scroll-margin: unset;
+
+ +

Values

+ +
+
{{cssxref("<length>")}}
+
从滚动容器的相应边缘开始。
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-margin", "scroll-margin")}}{{Spec2("CSS Scroll Snap Points")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.scroll-margin")}}

diff --git a/files/zh-cn/web/css/scroll-snap-coordinate/index.html b/files/zh-cn/web/css/scroll-snap-coordinate/index.html new file mode 100644 index 0000000000..76f9ff8666 --- /dev/null +++ b/files/zh-cn/web/css/scroll-snap-coordinate/index.html @@ -0,0 +1,201 @@ +--- +title: scroll-snap-coordinate +slug: Web/CSS/scroll-snap-coordinate +tags: + - CSS + - css snap +translation_of: Web/CSS/scroll-snap-coordinate +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

摘要

+ +

scroll-snap-coordinate CSS属性结合元素的最近的祖先元素滚动容器的{{cssxref("scroll-snap-destination")}} 定义的轴，定义了元素中x和y坐标偏移的位置。

+ +

如果元素已经变型，snap坐标也以相同的方式进行变型，为了使元素的snap点向元素一样被显示。

+ +
{{cssinfo}}
+ +

语法

+ +
/* 关键值 */
+scroll-snap-coordinate: none;
+
+/* <位置>值 */
+scroll-snap-coordinate: 50px 50px;                   /* 单坐标 */
+scroll-snap-coordinate: 100px 100px, 100px bottom;   /* 多坐标 */
+
+/* 全局值 */
+scroll-snap-coordinate: inherit;
+scroll-snap-coordinate: initial;
+scroll-snap-coordinate: unset;
+
+ +

赋值

+ +
+
none
+
定义元素不提供一个snap点。
+
<position>
+
定义从元素核模型边框边缘开始偏移的snap坐标。每一对值中，第一个值给定了snap坐标的x坐标，第二个值为它的y坐标。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML内容

+ +
<div id="container">
+  <div>
+    <p>At coordinate (0, 0)</p>
+    <div class="scrollContainer coordinate0">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>At coordinate (25, 0)</p>
+    <div class="scrollContainer coordinate25">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>At coordinate (50, 0)</p>
+    <div class="scrollContainer coordinate50">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+</div>
+
+ +

CSS内容

+ +
#container {
+  display: flex;
+}
+
+#container > div:nth-child(-n+2) {
+  margin-right: 20px;
+}
+
+.scrollContainer {
+  width: 100px;
+  overflow: auto;
+  white-space: nowrap;
+  scroll-snap-type: mandatory;
+  font-size: 0;
+}
+
+.scrollContainer > div {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  line-height: 100px;
+  text-align: center;
+  font-size: 50px;
+}
+
+.coordinate0 > div {
+  scroll-snap-coordinate: 0 0;
+}
+
+.coordinate25 > div {
+  scroll-snap-coordinate: 25px 0;
+}
+
+.coordinate50 > div {
+  scroll-snap-coordinate: 50px 0;
+}
+
+.scrollContainer > div:nth-child(even) {
+  background-color: #87ea87;
+}
+
+.scrollContainer > div:nth-child(odd) {
+  background-color: #87ccea;
+}
+ +

{{EmbedLiveSample("Example", "100%", "170")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范名称状态评论
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-coordinate", "scroll-snap-coordinate")}}{{Spec2("CSS Scroll Snap Points")}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
支持度{{CompatUnknown}}{{CompatGeckoDesktop("39.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
特性AndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
支持度{{CompatNo}}{{CompatGeckoMobile("39.0") }}[1]{{CompatGeckoMobile("39.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] 在Firefox移动版上，从内核Gecko 39开始可用，但是低于 layout.css.vertical-text.enabled优先级，默认不可用。

diff --git a/files/zh-cn/web/css/scroll-snap-destination/index.html b/files/zh-cn/web/css/scroll-snap-destination/index.html new file mode 100644 index 0000000000..8e33857321 --- /dev/null +++ b/files/zh-cn/web/css/scroll-snap-destination/index.html @@ -0,0 +1,192 @@ +--- +title: scroll-snap-destination +slug: Web/CSS/scroll-snap-destination +translation_of: Web/CSS/scroll-snap-destination +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

摘要

+ +

scroll-snap-destination CSS属性定义滚动容器的可视化{{Glossary("viewport")}} 中元素snap点的x和y坐标位置。

+ +

{{cssinfo}}

+ +

语法

+ +
/* <位置>值 */
+scroll-snap-destination: 400px 600px;
+
+/* 全局值 */
+scroll-snap-destination: inherit;
+scroll-snap-destination: initial;
+scroll-snap-destination: unset;
+
+ +

取值

+ +
+
<position>
+
定义从滚动容器的可视视图边缘开始偏移的snap坐标。第一个值给定了snap坐标的x坐标，第二个值为它的y坐标。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML内容

+ +
<div id="container">
+  <div>
+    <p>At coordinate (0, 0)</p>
+    <div class="scrollContainer destination0">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>At coordinate (25, 0)</p>
+    <div class="scrollContainer destination25">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+
+  <div>
+    <p>At coordinate (50, 0)</p>
+    <div class="scrollContainer destination50">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+    </div>
+  </div>
+</div>
+
+ +

CSS内容

+ +
#container {
+  display: flex;
+}
+
+#container > div:nth-child(-n+2) {
+  margin-right: 20px;
+}
+
+.scrollContainer {
+  width: 100px;
+  overflow: auto;
+  white-space: nowrap;
+  scroll-snap-points-x: repeat(100%);
+  scroll-snap-type: mandatory;
+  scroll-snap-destination: 20px 0;
+  font-size: 0;
+}
+
+.destination0 {
+  scroll-snap-destination: 0 0;
+}
+
+.destination25 {
+  scroll-snap-destination: 25px 0;
+}
+
+.destination50 {
+  scroll-snap-destination: 50px 0;
+}
+
+.scrollContainer > div {
+  width: 100px;
+  height: 100px;
+  display: inline-block;
+  line-height: 100px;
+  text-align: center;
+  font-size: 50px;
+}
+
+.scrollContainer > div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.scrollContainer > div:nth-child(odd) {
+  background-color: #87CCEA;
+}
+ +

{{EmbedLiveSample("Example", "100%", "170")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范名称状态评论
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-destination", "scroll-snap-destination")}}{{Spec2("CSS Scroll Snap Points")}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
支持度{{CompatUnknown}}{{CompatGeckoDesktop("39.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
特性AndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
支持度{{CompatNo}}{{CompatGeckoMobile("39.0") }}[1]{{CompatGeckoMobile("39.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] 在Firefox移动版上，从内核Gecko 39开始可用，但是低于 layout.css.vertical-text.enabled优先级，默认不可用。

diff --git a/files/zh-cn/web/css/scroll-snap-points-x/index.html b/files/zh-cn/web/css/scroll-snap-points-x/index.html new file mode 100644 index 0000000000..29ed5bd8b8 --- /dev/null +++ b/files/zh-cn/web/css/scroll-snap-points-x/index.html @@ -0,0 +1,140 @@ +--- +title: scroll-snap-points-x +slug: Web/CSS/scroll-snap-points-x +tags: + - CSS + - css snap +translation_of: Web/CSS/scroll-snap-points-x +--- +
{{CSSRef}}{{SeeCompatTable}}{{deprecated_header}}
+ +

摘要

+ +

scroll-snap-points-x CSS属性定义滚动容器中内容的snap点的水平位置。

+ +

{{cssinfo}}

+ +

语法

+ +
/* 关键值 */
+scroll-snap-points-x: none;
+
+/* 重复的snap点 */
+scroll-snap-points-x: repeat(400px);
+
+/* 全局值 */
+scroll-snap-points-x: inherit;
+scroll-snap-points-x: initial;
+scroll-snap-points-x: unset;
+
+ +

取值

+ +
+
none
+
滚动容器没有定义任何snap点。Elements within the scroll container may still define snap points of behalf of the scroll container.（i don't understand this statement）
+
repeat(<长度>)
+
定义snap点的一个间隔，从容器相关的边缘开始。仅允许正数长度。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML内容

+ +
<div id="container">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</div>
+ +

CSS内容

+ +
#container {
+  width: 200px;
+  overflow: auto;
+  white-space: nowrap;
+  scroll-snap-points-x: repeat(100%);
+  scroll-snap-type: mandatory;
+  font-size: 0;
+}
+
+#container > div {
+  width: 200px;
+  height: 200px;
+  display: inline-block;
+  line-height: 200px;
+  text-align: center;
+  font-size: 100px;
+}
+
+#container > div:nth-child(even) {
+  background-color: #87ea87;
+}
+
+#container > div:nth-child(odd) {
+  background-color: #87ccea;
+}
+ +

{{EmbedLiveSample("Example", 220, 220)}}

+ +

规范

+ +

此属性曾定义在early draft of CSS Scroll Snap Points Module中，但是后来在in favor of element-based snapping规范中被移除。

+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
支持度{{CompatUnknown}}{{CompatGeckoDesktop("39.0")}}{{CompatNo}}{{CompatNo}}9{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
特性AndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
支持度{{CompatNo}}{{CompatGeckoMobile("39.0")}}[1]{{CompatGeckoMobile("39.0")}}{{CompatNo}}{{CompatNo}}9{{property_prefix("-webkit")}}
+
+ +

[1] 在Firefox移动版上，从内核Gecko 39开始可用，但是低于 layout.css.vertical-text.enabled优先级，默认不可用。

diff --git a/files/zh-cn/web/css/scroll-snap-points-y/index.html b/files/zh-cn/web/css/scroll-snap-points-y/index.html new file mode 100644 index 0000000000..5e2aa4f4de --- /dev/null +++ b/files/zh-cn/web/css/scroll-snap-points-y/index.html @@ -0,0 +1,141 @@ +--- +title: scroll-snap-points-y +slug: Web/CSS/scroll-snap-points-y +tags: + - CSS + - css snap +translation_of: Web/CSS/scroll-snap-points-y +--- +
{{CSSRef}}{{SeeCompatTable}}{{deprecated_header}}
+ +

摘要

+ +

scroll-snap-points-y CSS属性定义滚动容器中内容的snap点的垂直位置。

+ +

{{cssinfo}}

+ +

语法

+ +
/* 关键值 */
+scroll-snap-points-y: none;
+
+/* 重复的snap点 */
+scroll-snap-points-y: repeat(400px);
+
+/* 全局值 */
+scroll-snap-points-y: inherit;
+scroll-snap-points-y: initial;
+scroll-snap-points-y: unset;
+
+ +

Values

+ +
+
none
+
滚动容器没有定义任何snap点。Elements within the scroll container may still define snap points of behalf of the scroll container.（i don't understand this statement）
+
repeat(<长度>)
+
定义snap点的一个间隔，从容器相关的边缘开始。仅允许正数长度。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML内容

+ +
<div id="container">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</div>
+ +

CSS内容

+ +
#container {
+  height: 200px;
+  width: 220px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scroll-snap-points-y: repeat(200px);
+  scroll-snap-type: mandatory;
+  font-size: 0;
+}
+
+#container > div {
+  width: 200px;
+  height: 200px;
+  display: inline-block;
+  line-height: 200px;
+  text-align: center;
+  font-size: 100px;
+}
+
+#container > div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+#container > div:nth-child(odd) {
+  background-color: #87CCEA;
+}
+ +

{{EmbedLiveSample("Example", 220, 220)}}

+ +

规范

+ +

此属性曾定义在early draft of CSS Scroll Snap Points Module中，但是后来在in favor of element-based snapping规范中被移出。

+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
支持度{{CompatNo}}{{CompatGeckoDesktop("39.0")}}{{CompatNo}}{{CompatNo}}9{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
特性AndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
支持度{{CompatNo}}{{CompatGeckoMobile("39.0") }}[1]{{CompatGeckoMobile("39.0") }}{{CompatNo}}{{CompatNo}}9{{property_prefix("-webkit")}}
+
+ +

[1] 在Firefox移动版上，从内核Gecko 39开始可用，但是低于 layout.css.vertical-text.enabled优先级，默认不可用。

diff --git a/files/zh-cn/web/css/scroll-snap-type/index.html b/files/zh-cn/web/css/scroll-snap-type/index.html new file mode 100644 index 0000000000..786d07e4e7 --- /dev/null +++ b/files/zh-cn/web/css/scroll-snap-type/index.html @@ -0,0 +1,243 @@ +--- +title: scroll-snap-type +slug: Web/CSS/scroll-snap-type +tags: + - CSS + - css snap +translation_of: Web/CSS/scroll-snap-type +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

摘要

+ +

scroll-snap-type CSS 属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行。

+ +

{{EmbedInteractiveExample("pages/css/scroll-snap-type.html")}}

+ +

此属性不能用来指定任何精确的动画或者物理运动效果来执行临时点，而是交给用户代理来处理。

+ +
/* 关键值 */
+scroll-snap-type: none;
+scroll-snap-type: x;
+scroll-snap-type: y;
+scroll-snap-type: block;
+scroll-snap-type: inline;
+scroll-snap-type: both;
+
+/* 可选 mandatory | proximity*/
+scroll-snap-type: x mandatory;
+scroll-snap-type: y proximity;
+scroll-snap-type: both mandatory;
+
+/* etc */
+
+/* 全局值 */
+scroll-snap-type: inherit;
+scroll-snap-type: initial;
+scroll-snap-type: unset;
+ +
{{cssinfo}}
+ +

语法

+ +

取值

+ +
+
none
+
当这个滚动容器的可视的 {{Glossary("viewport")}} 是滚动的，它必须忽略临时点。
+
x
+
滚动容器只捕捉其水平轴上的捕捉位置。
+
y
+
滚动容器只捕捉其垂直轴上的捕捉位置。
+
block
+
滚动容器仅捕捉到其块轴上的捕捉位置。
+
inline
+
滚动容器仅捕捉到其内联轴上的捕捉位置。
+
both
+
滚动容器会独立捕捉到其两个轴上的位置（可能会捕捉到每个轴上的不同元素）
+
mandatory
+
如果它当前没有被滚动，这个滚动容器的可视视图将静止在临时点上。意思是当滚动动作结束，如果可能，它会临时在那个点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。
+
proximity
+
如果它当前没有被滚动，这个滚动容器的可视视图将基于基于用户代理滚动的参数去到临时点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

HTML内容

+ +
<div class="holster">
+<div class="container x mandatory-scroll-snapping" dir="ltr">
+  <div>X Mand. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="ltr">
+  <div>X Prox. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="ltr">
+  <div>Y Mand. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="ltr">
+  <div>Y Prox. LTR</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x mandatory-scroll-snapping" dir="rtl">
+  <div>X Mand. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container x proximity-scroll-snapping" dir="rtl">
+  <div>X Prox. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y mandatory-scroll-snapping" dir="rtl">
+  <div>Y Mand. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+
+<div class="container y proximity-scroll-snapping" dir="rtl">
+  <div>Y Prox. RTL</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+  <div>5</div>
+</div>
+</div>
+ +

CSS内容

+ +
/* setup */
+html, body, .holster {
+  height: 100%;
+}
+.holster {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: column nowrap;
+  font-family: monospace;
+}
+
+.container {
+  display: flex;
+  overflow: auto;
+  outline: 1px dashed lightgray;
+  flex: none;
+}
+
+.container.x {
+  width: 100%;
+  height: 128px;
+  flex-flow: row nowrap;
+}
+
+.container.y {
+  width: 256px;
+  height: 256px;
+  flex-flow: column nowrap;
+}
+/* scroll-snap */
+.x.mandatory-scroll-snapping {
+  scroll-snap-type: x mandatory;
+}
+
+.y.mandatory-scroll-snapping {
+  scroll-snap-type: y mandatory;
+}
+
+.x.proximity-scroll-snapping {
+  scroll-snap-type: x proximity;
+}
+
+.y.proximity-scroll-snapping {
+  scroll-snap-type: y proximity;
+}
+
+.container > div {
+  text-align: center;
+  scroll-snap-align: center;
+  flex: none;
+}
+
+.x.container > div {
+  line-height: 128px;
+  font-size: 64px;
+  width: 100%;
+  height: 128px;
+}
+
+.y.container > div {
+  line-height: 256px;
+  font-size: 128px;
+  width: 256px;
+  height: 100%;
+}
+/* appearance fixes */
+.y.container > div:first-child {
+  line-height: 1.3;
+  font-size: 64px;
+}
+/* coloration */
+.container > div:nth-child(even) {
+  background-color: #87EA87;
+}
+
+.container > div:nth-child(odd) {
+  background-color: #87CCEA;
+}
+ +

{{EmbedLiveSample("Example", "100%", "260")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范名称状态评论
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-type", "scroll-snap-type")}}{{Spec2("CSS Scroll Snap Points")}}Initial definition
+ +

浏览器兼容性

+ +

{{Compat("css.properties.scroll-snap-type")}}

diff --git a/files/zh-cn/web/css/scrollbar-color/index.html b/files/zh-cn/web/css/scrollbar-color/index.html new file mode 100644 index 0000000000..7105af33fd --- /dev/null +++ b/files/zh-cn/web/css/scrollbar-color/index.html @@ -0,0 +1,115 @@ +--- +title: scrollbar-color +slug: Web/CSS/scrollbar-color +translation_of: Web/CSS/scrollbar-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

scrollbar-color该CSS属性设置滚动条轨道和拇指的颜色

+ +

track（轨道）是指滚动条，其一般是固定的而不管滚动位置的背景。

+ +

thumb（拇指）是指滚动条通常漂浮在轨道的顶部上的移动部分。

+ +

{{CSSInfo}}

+ +

句法

+ +
/* Keyword values */
+scrollbar-color: auto;
+scrollbar-color: dark;
+scrollbar-color: light;
+
+/* <color> values */
+scrollbar-color: rebeccapurple green;   /* Two valid colors.
+The first applies to the thumb of the scrollbar, the second to the track. */
+
+/* Global values */
+scrollbar-color: inherit;
+scrollbar-color: initial;
+scrollbar-color: unset;
+
+ +

值

+ +
+
<scrollbar-color>
+
定义滚动条的颜色。 + + + + + + + + + + + + + + + + + + + +
auto在没有任何其他相关滚动条颜色属性的情况下，滚动条的轨道部分默认平台渲染。
dark显示黑色滚动条，可以是平台提供的滚动条的深色变体，也可以是带深色的自定义滚动条。
light显示一个轻量滚动条，可以是平台提供的滚动条的轻微变体，也可以是带有浅色的自定义滚动条。
<color> <color>将第一种颜色应用于滚动条拇指，第二种颜色应用于滚动条轨道。
+ +
+

注意: 用户代理必须将scrollbar-color根元素上设置的任何值应用于视口。

+
+
+
+ +

形式语法

+ +
{{CSSSyntax}}
+ +

例子

+ +

CSS

+ +
.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-color: rebeccapurple green;
+}
+ +

HTML

+ +
<div class="scroller">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</div>
+ +

结果

+ +
{{EmbedLiveSample("Example")}}
+ +

可访问性问题

+ +

使用scrollbar-color具有特定颜色值的属性时，作者应确保指定的颜色在它们之间具有足够的对比度。对于关键字值，UA应确保其使用的颜色具有足够的对比度。参见WCAG 2.0的技术：G183：使用3：1的对比度。

+ +

规范

+ + + + + + + + + + + + + + + + +
规格状态评论
{{SpecName("CSS Scrollbars", "#scrollbar-color", "scrollbar-color")}}{{Spec2("CSS Scrollbars")}}Initial definition.
+ +

浏览器兼容性

+ + + +
{{Compat("css.properties.scrollbar-color")}}
diff --git a/files/zh-cn/web/css/scrollbar-width/index.html b/files/zh-cn/web/css/scrollbar-width/index.html new file mode 100644 index 0000000000..e40be4ef7c --- /dev/null +++ b/files/zh-cn/web/css/scrollbar-width/index.html @@ -0,0 +1,110 @@ +--- +title: scrollbar-width +slug: Web/CSS/scrollbar-width +translation_of: Web/CSS/scrollbar-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

 scrollbar-width 属性允许开发者设置滚动条出现时的厚度

+ +

{{EmbedInteractiveExample("pages/css/scrollbar-width.html")}}

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Keyword values */
+scrollbar-width: auto;
+scrollbar-width: thin;
+scrollbar-width: none;
+
+/* Global values */
+scrollbar-width: inherit;
+scrollbar-width: initial;
+scrollbar-width: unset;
+
+ +

Values

+ +
+
<scrollbar-width>
+
将滚动条的宽度定义为数值宽度或者预定义宽度，当被定义为预定义宽度时，则必须为下列值之一： + + + + + + + + + + + + + + + +
auto系统默认的滚动条宽度
thin系统提供的瘦滚动条宽度，或者比默认滚动条宽度更窄的宽度
none不显示滚动条，但是该元素依然可以滚动
+ +

注意：scrollbar-width的长度值有可能从规范中删除，scrollbar-width属性本身也是如此。 (Issue 1958)

+ +
+

Note: User Agents must apply any scrollbar-width value set on the root element to the viewport.

+
+
+
+ +

Formal syntax

+ +
{{CSSSyntax}}
+ +

Example

+ +

CSS

+ +
.scroller {
+  width: 300px;
+  height: 100px;
+  overflow-y: scroll;
+  scrollbar-width: thin;
+}
+ +

HTML

+ +
<div class="scroller">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</div>
+ +

Result

+ +

{{EmbedLiveSample("Example")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Scrollbars", "#scrollbar-width", "scrollbar-width")}}{{Spec2("CSS Scrollbars")}}Initial Definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.scrollbar-width")}}

+ +

See also

+ +
    +
  • {{CSSxRef("-ms-overflow-style")}}
    • +
  • {{CSSxRef("::-webkit-scrollbar")}}
    • +
diff --git a/files/zh-cn/web/css/selector_list/index.html b/files/zh-cn/web/css/selector_list/index.html new file mode 100644 index 0000000000..f60ba2da12 --- /dev/null +++ b/files/zh-cn/web/css/selector_list/index.html @@ -0,0 +1,101 @@ +--- +title: 选择器列表 +slug: Web/CSS/Selector_list +tags: + - CSS + - 层叠样式表 + - 选择器 +translation_of: Web/CSS/Selector_list +--- +
{{CSSRef}}
+ +

CSS 选择器列表（,），常被称为并集选择器或并集组合器，选择所有能被列表中的任意一个选择器选中的节点。

+ +
/* 选择所有 <span> 和 <div> 元素 */
+span, div {
+  border: red 2px solid;
+}
+ +

为了使样式表更简洁，可以使用逗号分隔的列表来对选择器进行分组。

+ +

语法

+ +
element, element, element { style properties }
+ +

例子

+ +

单行分组

+ +

在一行之中使用逗号为选择器分组。

+ +
h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
+
+ +

多行分组

+ +

使用逗号对多行选择器进行分组。

+ +
#main,
+.content,
+article {
+  font-size: 1.1em;
+}
+
+ +

选择器列表无效化

+ +

使用选择器列表的一个缺点是，以下两段 CSS 代码并不不等价：

+ +
h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }
+ +
h1, h2:maybe-unsupported, h3 { font-family: sans-serif }
+ +

这是因为，在选择器列表中如果有一个选择器不被支持，那么整条规则都会失效。

+ +

解决这个问题的一个方法是使用 {{CSSxRef(":is", ":is()")}} 选择器，它会忽视它的参数列表中失效的选择器，但是由于 {{CSSxRef(":is", ":is()")}}  会影响优先级的计算方式，这么做的代价是，其中的所有选择器都会拥有相同的优先级。

+ +
h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }
+ +
:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS4 Selectors", "#grouping", "Selector Lists")}}{{Spec2("CSS4 Selectors")}} +

重命名为“选择器列表”（"selector list"）

+
{{SpecName('CSS1', '#grouping', 'grouping')}}{{Spec2('CSS1')}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.selectors.list")}}

+ +

参见

+ +
    +
  • {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} 和 {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} 伪类，它们能避免选择器列表无效化的遗留设计错误。
    • +
diff --git a/files/zh-cn/web/css/shape-image-threshold/index.html b/files/zh-cn/web/css/shape-image-threshold/index.html new file mode 100644 index 0000000000..135715233f --- /dev/null +++ b/files/zh-cn/web/css/shape-image-threshold/index.html @@ -0,0 +1,123 @@ +--- +title: shape-image-threshold +slug: Web/CSS/shape-image-threshold +tags: + - CSS + - CSS Shapes + - Float Area + - Opacity + - Reference + - shape-image-threshold +translation_of: Web/CSS/shape-image-threshold +--- +
{{CSSRef}}
+ +

CSS 属性 shape-image-threshold 通过设定一个alpha通道的界限值来提取{{cssxref("shape-outside")}} 值为图像的形状。

+ +
{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}
+ + + +

所有alpha值比这个界限值大的像素都会被当做形状的一部分，以此确定形状的边界。举个例子，界限值为0.5时，形状会包含所有不透明度超过50%的像素。

+ +
/* <number> value */
+shape-image-threshold: 0.7;
+
+/* Global values */
+shape-image-threshold: inherit;
+shape-image-threshold: initial;
+shape-image-threshold: unset;
+
+ +

{{cssinfo}}

+ +

语法

+ +

值

+ +
+
{{cssxref("<alpha-value>")}}
+
设定界限值以从图像中提取形状。形状由所有alpha值比界限值大的像素定义。在0.0（完全透明）到1.0（完全不透明）之外的值会被重置（译者：如，小于0.0的值会被重置成0.0）。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

范例

+ +

这个例子创建了一个{{HTMLElement("div")}}块，其背景是一个渐变图像。shape-outside也定义了一个渐变图像，以此创建一个CSS形状，渐变图像中不透明度至少为20%（即alpha值大于0.2）的像素都是形状的一部分。

+ +

HTML

+ +
<div id="gradient-shape"></div>
+
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi
+  voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint
+  facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat
+  adipisci, libero quae nihil porro debitis laboriosam inventore animi
+  impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque
+  a mollitia dicta repudiandae illum exercitationem aliquam repellendus
+  ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto
+  nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit
+  accusamus iusto dolore, at provident eius alias maxime pariatur non
+  deleniti ipsum sequi rem eveniet laboriosam magni expedita?
+</p>
+ +

CSS

+ +
#gradient-shape {
+  width: 150px;
+  height: 150px;
+  float: left;
+  background-image: linear-gradient(30deg, black, transparent 80%,
+      transparent);
+  shape-outside: linear-gradient(30deg, black, transparent 80%,
+      transparent);
+  shape-image-threshold: 0.2;
+}
+ +

在这里，形状由{{cssxref("background-image")}}创建，使用渐变而非图像文件。我们在{{cssxref("shape-outside")}}属性中使用相同的渐变图像创建形状，以此构建浮动区域。

+ +

随后值为0.2的shape-image-threshold属性规定渐变中不透明度超过20%的像素才参与构成形状。

+ +

Result

+ +

+

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Shapes', '#shape-image-threshold-property', 'shape-image-threshold')}}{{Spec2('CSS Shapes')}}Initial definition
+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.properties.shape-image-threshold")}}

+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/shape-margin/index.html b/files/zh-cn/web/css/shape-margin/index.html new file mode 100644 index 0000000000..3b3ea4ef4d --- /dev/null +++ b/files/zh-cn/web/css/shape-margin/index.html @@ -0,0 +1,121 @@ +--- +title: shape-margin +slug: Web/CSS/shape-margin +tags: + - CSS + - CSS Property + - CSS Shapes + - Reference + - float + - margin + - shape-margin +translation_of: Web/CSS/shape-margin +--- +
{{CSSRef}}
+ +

CSS 属性 shape-margin 用于设定由{{cssxref("shape-outside")}}创建的CSS形状的外边距。

+ +
{{EmbedInteractiveExample("pages/css/shape-margin.html")}}
+ + + +

这个外边距可以让你调整（浮动元素的）形状边缘与环绕内容之间的距离。

+ +

语法

+ +
/* <length> values */
+shape-margin: 10px;
+shape-margin: 20mm;
+
+/* <percentage> value */
+shape-margin: 60%;
+
+/* Global values */
+shape-margin: inherit;
+shape-margin: initial;
+shape-margin: unset;
+
+ +

值

+ +
+
<length-percentage>
+
使用{{cssxref("<length>")}}值，或者相对于元素容纳块的{{cssxref("<percentage>")}}值来设定形状的外边距。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

范例

+ +

HTML

+ +
<section>
+<div class="shape"></div>
+We are not quite sure of any one thing in biology; our knowledge of geology
+is relatively very slight, and the economic laws of society are
+uncertain to every one except some individual who attempts to set them
+forth; but before the world was fashioned the square on the hypotenuse
+was equal to the sum of the squares on the other two sides of a right
+triangle, and it will be so after this world is dead; and the inhabitant
+of Mars, if he exists, probably knows its truth as we know it.</section>
+ +

CSS

+ +
section {
+  max-width: 400px;
+}
+
+.shape {
+  float: left;
+  width: 150px;
+  height: 150px;
+  background-color: maroon;
+  clip-path: polygon(0 0, 150px 150px, 0 150px);
+  shape-outside: polygon(0 0, 150px 150px, 0 150px);
+  shape-margin: 20px;
+}
+ +

Result

+ +

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Shapes', '#shape-margin-property', 'shape-margin')}}{{Spec2('CSS Shapes')}}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ +
+ + +

{{Compat("css.properties.shape-margin")}}

+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/shape-outside/index.html b/files/zh-cn/web/css/shape-outside/index.html new file mode 100644 index 0000000000..57dc0676ac --- /dev/null +++ b/files/zh-cn/web/css/shape-outside/index.html @@ -0,0 +1,184 @@ +--- +title: shape-outside +slug: Web/CSS/shape-outside +tags: + - CSS + - CSS Shapes +translation_of: Web/CSS/shape-outside +--- +
{{CSSRef}}
+ +
shape-outside的CSS 属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。 默认情况下，内联内容包围其边距框; shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。
+ +
{{EmbedInteractiveExample("pages/css/shape-outside.html")}}
+ +

 

+ +

语法

+ +
/* 关键字值 */
+shape-outside: none;
+shape-outside: margin-box;
+shape-outside: content-box;
+shape-outside: border-box;
+shape-outside: padding-box;
+
+/* 函数值 */
+shape-outside: circle();
+shape-outside: ellipse();
+shape-outside: inset(10px 10px 10px 10px);
+shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
+
+/* <url> 值 */
+shape-outside: url(image.png);
+
+/* 渐变值 */
+shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
+
+/* 全局值 */
+shape-outside: initial;
+shape-outside: inherit;
+shape-outside: unset;
+
+ +

shape-outside 属性指定使用下面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形状。

+ +

值

+ +
+
none
+
该浮动区域不产生影响，行内元素以默认的方式包裹着该元素的margin box。
+
<shape-box>
+
根据浮动元素的边缘（通过 CSS box model 来定义）形状计算出浮动的区域。可能是 margin-box, border-box, padding-box, 或者 content-box。这个形状包括了由 {{cssxref("border-radius")}} 属性制造出来的弧度（与 {{cssxref("background-clip")}} 的表现类似）。
+
+
+
margin-box
+
定义一个由外边距的外边缘封闭形成的形状。这个形状的角的半径由相应的{{cssxref("border-radius")}} 和{{cssxref("margin")}} 的值决定。如果 border-radius / margin 的比率大于等于 1 , 那么这个 margin box 的角的弧度就是 border-radius + margin ；如果比率小于 1，那么这个 margin box 的角的弧度就是 border-radius + (margin * (1 + (ratio-1)^3)) 。
+
border-box
+
+

定义一个由边界的外边缘封闭形成的形状。 这个形状遵循正常的边界外部圆角的形成规则。

+
+
padding-box
+
+

定义一个由内边距的外边缘封闭形成的形状。这个形状遵循正常的边界内部圆角的形成规则。

+
+
content-box
+
+

定义一个由内容区域的外边缘封闭形成的形状（译者：表述的不太好，就是被padding包裹的区域，在chrome控制台中的盒子模型图中的蓝色区域。）。每一个角的弧度取 0 或 border-radius - border-width - padding 中的较大值。

+
+
+
+
{{cssxref("<basic-shape>")}}
+
基于 inset()， circle()， ellipse()， 或者 polygon()其中一个创造出来的形状计算出浮动区域。如果同时存在 <shape-box> ，那么会为 <basic-shape> 方法定义一个参考盒，这个参考盒默认为 margin-box 。
+
{{cssxref("<image>")}}
+
提取并且计算指定 {{cssxref("<image>")}} 的alpha通道得出浮动区域（译者：即根据图片的非透明区域进行包裹）。就跟通过 {{cssxref("shape-image-threshold")}}来定义一样。
+
+
Note: {{glossary("User agent", "用户代理")}} 必须使用由HTML5规范定义的CORS-enabled fetch方法来处理 shape-outside 的值中的所有URL。当捕获的时候，用户代理必须使用“匿名”模式来设置层叠样式表的URL的 referrer source 和设置所在文档的URL的 origin 。如果这导致出现没有有效的备份图像这样的网络错误， 产生的影响就跟指定了值 none 一样。
+
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

插值

+ +

当在两个  <basic-shape> 之间产生动画时，将会应用以下规则。shape 里的值将会被当成一个简单列表插入。插入列表的值的类型可能是 {{cssxref("<length>")}}，{{cssxref("<percentage>")}}，或 {{cssxref("calc")}}。如果列表的值不是以上的几种类型，但是都相同的话（如在两个列表的相同位置找到了 nonzero ），那些值会插入到列表中。

+ +
    +
  • 两个形状必须使用同样的参考盒。
    • +
  • 如果两个形状都是 ellipse() 或 circle()类型，并且它们的 radii 都没有使用 closest-side 或 farthest-side 关键字，则将两个形状对应值之间的值插入到 shape 方法中。
    • +
  • 如果两个形状的类型都是 inset()，则将两个形状对应值之间的值插入到 shape 方法中。
    • +
  • 如果两个形状都是 polygon()， 两个多边形之间有相同的定点数量并且 <fill-rule> 相同，则将两个形状对应值之间的值插入到 shape 方法中。
    • +
  • 其余所有情况都不会发生插入。
    • +
+ +

示例

+ +

HTML

+ +
<div class="main">
+  <div class="left"></div>
+  <div class="right"></div>
+  <p>
+    Sometimes a web page's text content appears to be
+    funneling your attention towards a spot on the page
+    to drive you to follow a particular link. Sometimes
+    you don't notice.
+  </p>
+</div>
+ +

CSS

+ +
.main {
+  width: 500px;
+}
+
+.left,
+.right {
+  width: 40%;
+  height: 12ex;
+  background-color: lightgray;
+}
+
+.left {
+  -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
+  shape-outside: polygon(0 0, 100% 100%, 0 100%);
+  float: left;
+  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
+  clip-path: polygon(0 0, 100% 100%, 0 100%);
+}
+
+.right {
+  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
+  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
+  float: right;
+  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
+  clip-path: polygon(100% 0, 100% 100%, 0 100%);
+}
+
+p {
+  text-align: center;
+}
+ +

Result

+ +

{{EmbedLiveSample('示例', 520, 130)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Shapes', '#shape-outside-property', 'shape-outside')}}{{Spec2('CSS Shapes')}}Initial definition.
+ +

浏览器兼容性

+ +
{{Compat("css.properties.shape-outside")}}
+ +

 

+ +

参见

+ + diff --git a/files/zh-cn/web/css/shorthand_properties/index.html b/files/zh-cn/web/css/shorthand_properties/index.html new file mode 100644 index 0000000000..63af2be2be --- /dev/null +++ b/files/zh-cn/web/css/shorthand_properties/index.html @@ -0,0 +1,159 @@ +--- +title: CSS 的简写属性 +slug: Web/CSS/Shorthand_properties +tags: + - CSS + - Guide + - Web +translation_of: Web/CSS/Shorthand_properties +--- +
{{cssref}}
+ +

简写属性是可以让你同时设置好几个 CSS 属性值的 CSS 属性。使用简写属性，Web 开发人员可以编写更简洁、更具可读性的样式表，节省时间和精力。

+ +

CSS 规范定义简写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起。比如 CSS 的 {{cssxref("background")}} 属性就是一个简写属性，它可以定义 {{cssxref("background-color")}}、{{cssxref("background-image")}}、{{cssxref("background-repeat")}} 和 {{cssxref("background-position")}} 的值。类似地，最常见的字体相关的属性可以使用 {{cssxref("font")}} 的简写，盒子（box）各方向的外边距（margin） 可以使用 {{cssxref("margin")}} 这个简写。

+ +

棘手的边界情况

+ +

虽然它们使用起来非常方便，但在使用时，仍需牢记一些边界情况：

+ +
    +
  1. 没有指定的值会被设置为它的初始值。这听起来似乎本来就很合理的样子，但这确实意味着，它将会覆盖之前设置的值。因此： + 
    background-color: red;
+background: url(images/bg.gif) no-repeat top right;
+
    + 以上样式不会将 background 的 color 值设置为 red，而是 {{cssxref("background-color")}} 的默认值 transparent，因为第二条规则优先。
    2. +
  2. 关键词 inherit 只可以应用于单独属性（individual properties），如果应用于一个简写属性（shorthand property），则必须整体应用，而能对简写属性值的每一个部分单独应用。由于单独属性的漏掉的值会被它们的初始值（initial value）替代，因此不可能允许单个属性通过省略继承的 。这意味着让一个属性的值使用继承值的唯一方法就是使用值是 inherit 的普通属性（longhand property）。
    3. +
  3. 简写属性不试图强制它们替代属性的值的特定顺序。这适用于当这些属性使用不同类型的值时，因为这个时候顺序并不重要。但当几个属性可以设置相同值的时候，就没那么简单了。处理这些情况分以下几种类型： +
      +
    1. 处理和盒子（box）边界（edge）相关的属性时，比如 {{cssxref("border-style")}}、{{cssxref("margin")}} 或者 {{cssxref("padding")}}， 始终使用一致的1个到4个值的语法表示这些边界： + + + + + + + + + + + + + + + + + + + +
      border1.png1个值的语法：border-width: 1em — 这一个值表示所有的边框宽度
      border2.png2个值的语法：border-width: 1em 2em — 第一个值表示垂直方向的，即 top 和 bottom；第二个值表示水平方向的，即 left 和 right
      border3.png3个值的语法：border-width: 1em 2em 3em — 第一个值表示 top；第二个值表示水平方向的，即 left 和 right； 第三个值表示 bottom
      border4.png +

      4个值的语法：border-width: 1em 2em 3em 4em — 这四个值分别表示 top、right、bottom、left，总是按此顺序，即从 top 开始的顺时针顺序（Top-Right-Bottom-Left 首字母与英文单词 trouble 的顺序一致：TRBL）

      +
      +
      2. +
    2. 同样，在处理和盒子的角相关的属性时，比如 {{cssxref("border-radius")}}，也始终使用一致的 1个到4个值的语法表示： + + + + + + + + + + + + + + + + + + + +
      corner1.png1个值的语法：border-radius: 1em — 这一个值表示所有的表框角度的半径
      corner2.png2个值的语法：border-radius: 1em 2em — 第一个值表示 top-left 和 bottom-right 方向的角；第二个值表示 top-right 和 bottom-left 方向的角
      corner3.png3个值的语法：border-radius: 1em 2em 3em — 第一个值表示 top-left 方向的角 ，第二个值表示top-right 和 bottom-left 方向的角，第三个值表示 bottom-right 方向的角
      corner4.png +

      4个值的语法：border-radius: 1em 2em 3em 4em — 这四个值分别表示top-left、 top-right、 bottom-right 、bottom-left 方向的角。总是按此顺序，即从top-left开始的顺时针顺序

      +
      +
      3. +
    +
    4. +
+ +

Background 属性

+ +

background 有以下属性：

+ +
background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: top right;
+ +

可以简写成一行声明：

+ +
background: #000 url(images/bg.gif) no-repeat top right;
+ +

简写的形式实际上等价于以上普通属性再加上 background-attachment: scroll  以及 CSS3 中的一些附加属性。

+ +

Font 属性

+ +

下面的声明：

+ +
font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;
+ +

可以简写成下面的：

+ +
font: italic bold .8em/1.2 Arial, sans-serif;
+ +

这个简写声明实际上等价于以上普通属性再加上 font-variant: normal 和 font-size-adjust: none (CSS2.0 / CSS3)，font-stretch: normal (CSS3)。

+ +

Border 属性

+ +

对于 border 来说，宽度、颜色和类型是可以被简写到一个声明里的。比如：

+ +
border-width: 1px;
+border-style: solid;
+border-color: #000;
+ +

可以简写成：

+ +
border: 1px solid #000;
+ +

Margin 和 Padding 属性

+ +

margin 和 padding 值的简写版本类似。下面的 CSS 声明：

+ +
margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;
+ +

和下面的声明是一样的（注意，值是从 top 顺时针开始的：top、right、bottom、接着是 left）

+ +
margin: 10px 5px 10px 5px;
+ +

Margin 对于多个值有以下的简写规则：

+ +
    +
  • 当只有一个值声明时，该值会用于所有四个值。
    • +
  • 当只有两个值声明时，第一个值用于上边距和下边距，第二个值用于左边距和右边距。
    • +
  • 当有三个值声明时，第一个值用于上边距，第二个值用于左边距和右边距，第三个值用于下边距。
    • +
  • 当有四个值声明时，其会按顺序用于上、右、下、左边距（按顺时针）。
    • +
+ +

通用简写属性

+ +

CSS 提供了一个通用的简写属性 {{cssxref("all")}}，它可以应用于文档里所有的属性。它的目的是改变属性的继承模型：

+ +

{{page("/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance", "Controlling_inheritance")}}

+ +

查看 Cascade and inheritance or Introducing the CSS Cascade 了解更多关于继承的信息。

+ +

另请参阅

+ +
    +
  • CSS Reference
    • +
  • Shorthand properties: {{cssxref("background")}}, {{cssxref("font")}}, {{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}, {{cssxref("border-width")}}, {{cssxref("border-color")}}, {{cssxref("border-style")}}, {{cssxref("transition")}}, {{cssxref("transform")}}, {{cssxref("padding")}}, {{cssxref("list-style")}}, {{cssxref("border-radius")}}.
    • +
diff --git a/files/zh-cn/web/css/specificity/index.html b/files/zh-cn/web/css/specificity/index.html new file mode 100644 index 0000000000..61d41391f9 --- /dev/null +++ b/files/zh-cn/web/css/specificity/index.html @@ -0,0 +1,355 @@ +--- +title: 优先级 +slug: Web/CSS/Specificity +tags: + - CSS + - Example + - Guide + - Reference + - Web + - 参考 + - 指南 + - 选择器 +translation_of: Web/CSS/Specificity +--- +
{{CSSRef}}
+ +

浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

+ +

优先级是如何计算的？

+ +

优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。

+ +

而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。

+ +

当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

+ +
注意: 文档树中元素的接近度（Proximity of elements）对优先级没有影响。
+ +

选择器类型

+ +

下面列表中，选择器类型的优先级是递增的：

+ +
    +
  1. 类型选择器（例如，h1）和伪元素（例如，::before）
    2. +
  2. 类选择器 (例如，.example)，属性选择器（例如，[type="radio"]）和伪类（例如，:hover）
    3. +
  3. ID 选择器（例如，#example）。
    4. +
+ +

通配选择符（universal selector）（{{CSSxRef("Universal_selectors", "*")}}）关系选择符（combinators）（{{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("General_sibling_combinator", "~")}}, ' ', {{CSSxRef("Column_combinator", "||")}}）和 否定伪类（negation pseudo-class）（{{CSSxRef(":not", ":not()")}}）对优先级没有影响。（但是，在 :not() 内部声明的选择器会影响优先级）。

+ +

您可以访问 "Specificity" in "Cascade and inheritance"  或者 https://specifishity.com 来了解更多关于优先级的详细信息。

+ +

给元素添加的内联样式 (例如，style="font-weight:bold") 总会覆盖外部样式表的任何样式 ，因此可看作是具有最高的优先级。

+ +

!important 例外规则

+ +

当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。虽然，从技术上讲，!important 与优先级无关，但它与最终的结果直接相关。使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

+ +

一些经验法则：

+ +
    +
  • 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
    • +
  • 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
    • +
  • 永远不要在你的插件中使用 !important
    • +
  • 永远不要在全站范围的 CSS 代码中使用 !important
    • +
+ +
    +
  • +

    与其使用 !important，你可以：

    +
    • +
+ +
    +
  1. 更好地利用 CSS 级联属性
    2. +
  2. 使用更具体的规则。在您选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。 + 
    <div id="test">
+  <span>Text</span>
+</div>
    + + 
    div#test span { color: green; }
+div span { color: blue; }
+span { color: red; }
    + +

    无论 c​ss 语句的顺序是什么样的，文本都会是绿色的（green），因为这一条规则是最有针对性、优先级最高的。（同理，无论语句顺序怎样，蓝色 blue 的规则都会覆盖红色 red 的规则）

    +
    3. +
  3. 对于（2）的一种特殊情况，当您无其他要指定的内容时，请复制简单的选择器以增加特异性。 + 
    #myId#myId span { color: yellow; }
+.myClass.myClass span { color: orange; }
    +
    4. +
+ +

什么的情况下可以使用 !important：

+ +
A) 覆盖内联样式
+ +

你的网站上有一个设定了全站样式的 CSS 文件，同时你（或是你同事）写了一些很差的内联样式。

+ +

全局的CSS文件会在全局范围内设置网站的外观，而直接在各个元素上定义的内联样式可能会覆盖您的全局CSS文件。 内联样式和!important都被认为是非常不好的做法，但是有时你可以在CSS文件里用!important去覆盖内联样式。

+ +

在这种情况下，你就可以在你全局的 CSS 文件中写一些 !important 的样式来覆盖掉那些直接写在元素上的行内样式。

+ +
<div class="foo" style="color: red;">What color am I?</div>
+
+ +
.foo[style*="color: red"] {
+  color: firebrick !important;
+}
+
+ +

许多JavaScript框架和库都添加了内联样式。 有时候可以用!important与优先级高的选择器一起使用，以重写覆盖这些内联样式。

+ +
B) 覆盖优先级高的选择器
+ +
#someElement p {
+  color: blue;
+}
+
+p.awesome {
+  color: red;
+}
+ +

在外层有 #someElement 的情况下，你怎样能使 awesome 的段落变成红色呢？这种情况下，如果不使用 !important ，第一条规则永远比第二条的优先级更高

+ +

怎样覆盖 !important

+ +

A)很简单，只需再添加一条 带 !important 的CSS规则，再给这个给选择器更高的优先级（添加一个标签，ID或类）；或是添加一样选择器，把它的位置放在原有声明的后面（总之，最后定义一条规则比胜）。

+ +

一些拥有更高优先级的例子：

+ +
   table td { height: 50px !important; }
+.myTable td { height: 50px !important; }
+#myTable td { height: 50px !important; }
+
+ +

B)或者使用相同的选择器，但是置于已有的样式之后：

+ +
td { height: 50px !important; }
+ +

C)或干脆改写原来的规则，以避免使用 !important。

+ +
[id="someElement"] p {
+  color: blue;
+}
+
+p.awesome {
+  color: red;
+}
+ +

将id作为属性选择器的一部分而不是id选择器，将使其具有与类相同的特异性。 上面的两个选择器现在具有相同的权重。 在优先级相同情况下，后面定义的CSS样式会被应用。

+ +

若想了解更多信息，请参考：

+ + + +

:is() 和 :not() 例外规则

+ +

The matches-any pseudo-class {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} and the negation pseudo-class {{CSSxRef(":not", ":not()")}} are not considered a pseudo-class in the specificity calculation. But selectors placed into the pseudo-class count as normal selectors when determining the count of selector types.

+ +

:not 否定伪类在优先级计算中不会被看作是伪类。事实上，在计算选择器数量时还是会把其中的选择器当做普通选择器进行计数。

+ +
+

有如下 CSS 样式声明:

+ +
div.outer p {
+  color: orange;
+}
+
+div:not(.outer) p {
+  color: blueviolet;
+}
+
+ +

将其应用于以下的 HTML 时：

+ +
<div class="outer">
+  <p>This is in the outer div.</p>
+  <div class="inner">
+    <p>This text is in the inner div.</p>
+  </div>
+</div>
+
+ +

会在屏幕上出现以下结果：

+ +

{{EmbedLiveSample("The_not_exception-example")}}

+
+ +

:where() 例外规则 {{Experimental_Inline}}

+ +

{{SeeCompatTable}}

+ +

The specificity-adjustment pseudo-class {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} always has its specificity replaced with zero.

+ +

有如下 CSS 样式声明:

+ +
div:where(.outer) p {
+  color: orange;
+}
+
+div p {
+  color: blueviolet;
+}
+
+ + + +

将其应用于以下的 HTML 时：

+ + + +
<div class="outer">
+  <p>This is in the outer div.</p>
+  <div class="inner">
+    <p>This text is in the inner div.</p>
+  </div>
+</div>
+
+ +

会在屏幕上出现以下结果：

+ +

{{EmbedLiveSample("The_where_exception")}}

+ +

基于形式的优先级（Form-based specificity）

+ +

优先级是基于选择器的形式进行计算的。在下面的例子中，尽管选择器*[id="foo"] 选择了一个ID，但是它还是作为一个属性选择器来计算自身的优先级。

+ +

有如下样式声明：

+ +
*#foo {
+  color: green;
+}
+
+*[id="foo"] {
+  color: purple;
+}
+
+ +

将其应用在下面的HTML中：

+ +
<p id="foo">I am a sample text.</p>
+
+ +

最终会出现下面的效果：

+ +

{{EmbedLiveSample("基于形式的优先级（Form-based_specificity）")}}

+ +

虽然匹配了相同的元素，但是 ID 选择器拥有更高的优先级。所以第一条样式声明生效。

+ +

无视DOM树中的距离

+ +

有如下样式声明：

+ +
body h1 {
+  color: green;
+}
+
+html h1 {
+  color: purple;
+}
+
+ +

当它应用在下面的 HTML 时：

+ +
<html>
+  <body>
+    <h1>Here is a title!</h1>
+  </body>
+</html>
+
+ +

浏览器会将它渲染成：

+ +

{{EmbedLiveSample("无视DOM树中的距离")}}

+ +

直接添加样式 vs. 继承样式

+ +

为目标元素直接添加样式，永远比继承样式的优先级高，无视优先级的遗传规则。

+ +
#parent {
+  color: green;
+}
+
+h1 {
+  color: purple;
+}
+ +

当它应用在下面的HTML时：

+ +
<html>
+  <body id="parent">
+    <h1>Here is a title!</h1>
+  </body>
+</html>
+ +

浏览器会将它渲染成：

+ +

{{EmbedLiveSample("直接给目标元素添加样式和目标元素继承样式对比")}}

+ +

因为 h1 选择器明确的定位到了元素，但绿色选择器的仅仅继承自其父级。

+ +

规范

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS4 Selectors", "#specificity-rules", "Calculating a selector's specificity")}}{{Spec2("CSS4 Selectors")}}Add the specificity adjustment selector {{CSSxRef(":where", ":where()")}}.
{{SpecName("CSS3 Selectors", "#specificity", "Calculating a selector's specificity")}}{{Spec2("CSS3 Selectors")}}添加伪元素 pseudo-elements.
{{SpecName("CSS2.1", "cascade.html#specificity", "Calculating a selector's specificity")}}{{Spec2("CSS2.1")}}添加伪类 pseudo-classes.
{{SpecName("CSS1", "#cascading-order", "Cascading order")}}{{Spec2("CSS1")}}初始化定义.
+
+ +

参见

+ + diff --git a/files/zh-cn/web/css/specified_value/index.html b/files/zh-cn/web/css/specified_value/index.html new file mode 100644 index 0000000000..9829324398 --- /dev/null +++ b/files/zh-cn/web/css/specified_value/index.html @@ -0,0 +1,22 @@ +--- +title: 指定值 +slug: Web/CSS/specified_value +translation_of: Web/CSS/specified_value +--- +

{{ CSSRef() }}

+ +

概述

+ +

CSS属性的 指定值 (specified value)会通过下面3种途径取得：

+ +
    +
  1. 在当前文档的样式表中给这个属性赋的值，会被优先使用。例如：把 {{ cssxref("color") }} 属性的值设为green ，那么对应元素内的文字就会变成绿色。
    2. +
  2. 如果在当前文档的样式表中没有给这个属性赋值，那么它会尝试从父元素那继承一个值。例如：在一个 {{ HTMLElement("div") }}  内部放置一个段落 ({{ HTMLElement("p") }})，这个 {{ HTMLElement("div") }} 的 {{ cssxref("font") }} 属性值为 "Arial"，而 {{ HTMLElement("p") }} 的 {{ cssxref("font") }} 属性没有被赋值，那么它的字体就会继承为 Arial
    3. +
  3. 如果上面的两种途径都不可行，则把CSS规范中针对这个元素的这个属性的初始值作为指定值
    4. +
+ +

相关规范

+ + diff --git a/files/zh-cn/web/css/string/index.html b/files/zh-cn/web/css/string/index.html new file mode 100644 index 0000000000..01a13db60b --- /dev/null +++ b/files/zh-cn/web/css/string/index.html @@ -0,0 +1,142 @@ +--- +title: +slug: Web/CSS/string +translation_of: Web/CSS/string +--- +
{{CSSRef}}
+ +
在CSS中，<string> 是用来表示一串字符的数据类型，它被用在众多CSS属性中，例如{{cssxref("content")}}、{{cssxref("font-family")}}、和{{cssxref("quotes")}}。
+ +

使用规则

+ +

<string> 数据类型是由包含在英文双引号（"）或英文单引号（'）中的任意数量的Unicode字符组成。

+ +

大多数字符都可以写成字面量的形式，并且所有字符都可以写成以反斜线（\）开头的十六进制Unicode码点的形式。比如说：\22表示一个双引号，\27表示一个单引号，\A9表示版权声明符号（©）。

+ +

需要注意的是，在使用某些特殊字符时需要在前面加上反斜线来转义，包括但不限于在双引号字符串中使用双引号字符，在单引号字符串中使用单引号字符，以及反斜线字符，比如\\表示一个反斜线字符。

+ +

当你想换行的时候，必须使用像\A或者\00000A这样的换行符。不过在你的代码中，可以通过在每行末尾增加一个反斜线（\）的方式来创建一个多行的字符串。

+ +
+

注意: CSS<string>中不能使用像&nbsp;或者&#8212;这样的实体。

+
+ +

例子

+ +
/* Simple strings */
+"This string is demarkated by double quotes."
+'This string is demarkated by single quotes.'
+
+/* Character escaping */
+"This is a string with \" an escaped double quote."
+"This string also has \22 an escaped double quote."
+'This is a string with \' an escaped single quote.'
+'This string also has \27 an escaped single quote.'
+"This is a string with \\ an escaped backslash."
+
+/* New line in a string */
+"This string has a \Aline break in it."
+
+/* String spanning two lines of code (these two strings will have identical output) */
+"A really long \
+awesome string"
+"A really long awesome string"
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Values', '#strings', '<string>')}}{{Spec2('CSS3 Values')}}No significant change from CSS Level 2 (Revision 1).
{{SpecName('CSS2.1', 'syndata.html#strings', '<string>')}}{{Spec2('CSS2.1')}}Explicit definition; allows 6-digit Unicode escaped characters.
{{SpecName('CSS1', '', '<string>')}}{{Spec2('CSS1')}}Implicit definition; allows 4-digit Unicode escaped characters.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.01.0 (1.0){{CompatVersionUnknown}}{{compatVersionUnknown}}1.0 (85)
\xx1.01.0 (1.0)6.0{{compatVersionUnknown}}1.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{compatVersionUnknown}}{{compatVersionUnknown}}{{compatVersionUnknown}}{{compatVersionUnknown}}{{compatVersionUnknown}}{{compatVersionUnknown}}
\xx{{compatVersionUnknown}}{{compatVersionUnknown}}{{compatVersionUnknown}}{{compatVersionUnknown}}{{compatVersionUnknown}}{{compatVersionUnknown}}
+
diff --git a/files/zh-cn/web/css/syntax/index.html b/files/zh-cn/web/css/syntax/index.html new file mode 100644 index 0000000000..aa20590451 --- /dev/null +++ b/files/zh-cn/web/css/syntax/index.html @@ -0,0 +1,81 @@ +--- +title: 语法 +slug: Web/CSS/Syntax +tags: + - CSS + - Web + - 初学者 + - 教程 + - 语法 +translation_of: Web/CSS/Syntax +--- +
{{cssref}}
+ +

层叠样式表（ Cascading Stylesheet ，简称CSS ）， 其基本目标是让浏览器以指定的特性去绘制页面元素，比如颜色，定位，装饰。CSS的语法反映了这个目标，由下面两个部分构建：

+ +
    +
  • 属性（ property）是一个标识符，用可读的名称来表示其特性。
    • +
  • 值（value）则描述了浏览器引擎如何处理该特性。每个属性都包含一个有效值的集合，它有正式的语法和语义定义，被浏览器引擎实现。 
    • +
+ +

CSS 声明

+ +

CSS的核心功能是将CSS属性设定为特定的值。一个属性与值的键值对被称为”声明“（declaration） 。CSS引擎会计算页面上每个元素都有哪些声明，并且会根据结果绘制元素，排布样式。
+
+ 在 CSS 中，无论是属性名还是属性值都是对大小写不敏感的。属性与值之间以英文冒号 ':' （U+003A COLON）隔开。属性与值前面、后面与两者之间的空白不是必需的，会被自动忽略。

+ +

css syntax - declaration.png

+ +

目前CSS中有 100 多个属性 ， 并且几乎有无限多个不同的值。并非所有的属性与值的配对都是被允许的， 每个属性都定义了它的合法值。如果值对给定的属性而言非法时，声明就会被视为无效的，整个声明就会被CSS引擎忽略。

+ +

CSS 声明块

+ +

声明会按照块的形式被组合。声明块（declaration block）以英文左大括号('{' U+007B LEFT CURLY BRACKET)开始，以英文右大括号 '}' (U+007D RIGHT CURLY BRACKET)结束。块有时会嵌套，所以开始与结束大括号必须要匹配。

+ +

css syntax - block.png

+ +

声明块里面的声明之间使用英文分号（';'  U+003B SEMICOLON）隔开。声明块可能为空，也就是包含空的声明。声明之间的空格会被忽略，声明块里最后一个声明可以不用分号，不过建议加上，以方便扩展声明块。

+ +

css syntax - declarations block.png

+ +
声明块的内容—开始与结束大括号之间的声明，可以放在HTML style 特性里。
+ +

CSS 规则

+ +

如果样式表只能为每个页面元素添加一个声明，那就没有真正发挥出它的价值。其真正的目标是为文档不同部分添加不同的声明。
+
+ 为此，CSS可以在声明块前面放置选择器（selector)，选择器用来选择页面多个元素的条件。一对选择器与声明块称为规则集（ruleset)，常简称为规则（rule)。

+ +

css syntax - ruleset.png

+ +

一个元素可能被多个选择器选中，因此会有多个规则，有可能以不同的值去设置同一属性。CSS标准会规定哪个优先级最高并生效, 称之为 层叠（cascade) 算法。

+ +

有一点需要注意的是，尽管用一组选择器来定义的单个规则集，比用多个单一选择器来定义的多个规则集更加简洁，但这却不适用于规则集的有效性。
+
+ 这会导致一个重要的后果：如果其中的一个选择器是无效的，如使用了一个未知的伪元素或伪类，会导致整个选择器都会无效，同时对应的规则都会被忽略。

+ +

CSS 语句

+ +

规则是样式表的主体，通常样式表会包括大量的规则列表。但有时候网页的作者也希望在样式表中包括其他的一些信息，比如字符集，导入其它的外部样式表，字体等，这些需要专门的语句表示。

+ +

语句以非空格的字符开头，以第一个反花括号或分号结束。

+ +

css syntax - statements Venn diag.png

+ +

语句类型：

+ +
    +
  • 规则。如上，将一组CSS声明与用选择器定义的条件相关联。
    • +
  • at规则（at-rules）。以@ (U+0040 COMMERCIAL AT) 开始，随后是标识符，一直到以分号或右大括号结束。每个at规则由其标识符定义，可能有它自己的语法。at规则涵盖了meta信息（比如 @charset  @import)，条件信息（比如@media  @document), 描述信息（比如@font-face)。
    • +
+ +

不是上面类型的语句则是非法的，被忽略。
+
+ 条件规则组（conditional group rules）是特殊的at规则，可以嵌套语句。它里面的语句只有在特定条件下才生效。
+ CSS1 与 CSS2.1 下， 条件规则组里面只能用规则。CSS3 下还可以用一些但不是全部的at规则，见CSS Conditionals Level 3。

+ +

其它

+ +
    +
  • {{ CSS_key_concepts()}}
    • +
diff --git a/files/zh-cn/web/css/tab-size/index.html b/files/zh-cn/web/css/tab-size/index.html new file mode 100644 index 0000000000..ee314a6438 --- /dev/null +++ b/files/zh-cn/web/css/tab-size/index.html @@ -0,0 +1,117 @@ +--- +title: tab-size +slug: Web/CSS/tab-size +tags: + - CSS + - 参考 +translation_of: Web/CSS/tab-size +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS 属性 tab-size 用于自定义制表符 (U+0009) 的宽度。

+ +
/* <integer> values */
+tab-size: 4;
+tab-size: 0;
+
+/* <length> values */
+tab-size: 10px;
+tab-size: 2em;
+
+/* Global values */
+tab-size: inherit;
+tab-size: initial;
+tab-size: unset;
+
+ +

{{CSSInfo}}

+ +

语法

+ +

值

+ +
+
{{CSSxRef("<integer>")}}
+
制表符对应的空格数。必须为非负值。
+
{{CSSxRef("<length>")}}
+
制表符的宽度。必须为非负值。
+
+ +

正式语法

+ +
{{CSSSyntax}}
+ +

示例

+ +
pre {
+  tab-size: 4; /* 将制表符宽度设为 4 个空格 */
+}
+
+ +
pre {
+  tab-size: 0; /* 移除缩进效果 */
+}
+
+ +
pre {
+  tab-size: 2; /* 将制表符宽度设为 2 个空格 */
+}
+
+ +

在线演示

+ +

本示例比较了默认制表符宽度和自定义制表符宽度。注意 {{cssxref("white-space")}} 被设置为 pre 以防止制表符收起。

+ +

HTML

+ +
<p>no tab</p>
+<p>&#0009;default tab size of 8 spaces</p>
+<p class="custom">&#0009;custom tab  size of 3 spaces</p>
+<p>&nbsp;&nbsp;&nbsp;3 spaces, equivalent to the custom tab size</p>
+
+ +

CSS

+ +
p {
+  white-space: pre;
+}
+
+.custom {
+  -moz-tab-size: 3;
+  tab-size: 3;
+}
+ +

结果

+ +

{{EmbedLiveSample('Live_sample')}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Text', '#tab-size-property', 'tab-size')}}{{Spec2('CSS3 Text')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.tab-size")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/table-layout/index.html b/files/zh-cn/web/css/table-layout/index.html new file mode 100644 index 0000000000..a6b0b99c0a --- /dev/null +++ b/files/zh-cn/web/css/table-layout/index.html @@ -0,0 +1,117 @@ +--- +title: table-layout +slug: Web/CSS/table-layout +tags: + - CSS + - table-layout + - 单元格 + - 表格 +translation_of: Web/CSS/table-layout +--- +
{{CSSRef}}
+ +
+ +

table-layout CSS属性定义了用于布局表格单元格，行和列的算法。

+ +
/* Keyword values */
+table-layout: auto;
+table-layout: fixed;
+
+/* Global values */
+table-layout: inherit;
+table-layout: initial;
+table-layout: unset;
+ +

{{cssinfo}}

+ +

语法

+ +
/* Keyword values */
+table-layout: auto;
+table-layout: fixed;
+
+/* Global values */
+table-layout: inherit;
+table-layout: initial;
+table-layout: unset;
+
+ +

值

+ +
+
{{Cssxref("auto")}}
+
大多数浏览器采用自动表格布局算法对表格布局。表格及单元格的宽度取决于其包含的内容。
+
fixed
+
表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。
+
+ 使用 “fixed” 布局方式时，整个表格可以在其首行被下载后就被解析和渲染。这样对于 “automatic” 自动布局方式来说可以加速渲染，但是其后的单元格内容并不会自适应当前列宽。任何一个包含溢出内容的单元格可以使用 {{Cssxref("overflow")}}  属性控制是否允许内容溢出。
+
+ +

正式语法

+ +
{{csssyntax}}
+
+ +

示例

+ +

本示例使用了fixed的表格布局，结合{{cssxref("width")}}属性来限制表格的宽。{{cssxref("text-overflow")}} 属性用于文字过长时显示省略号。

+ +

如果表格的布局是auto，即使指定了表格的width，表格仍然会自适应内容自动撑开。

+ +

HTML

+ +
<table>
+ <tr><td>Ed</td><td>Wood</td></tr>
+ <tr><td>Albert</td><td>Schweitzer</td></tr>
+ <tr><td>Jane</td><td>Fonda</td></tr>
+ <tr><td>William</td><td>Shakespeare</td></tr>
+</table>
+
+ +

CSS

+ +
table {
+ table-layout: fixed;
+ width: 120px;
+ border: 1px solid red;
+}
+
+td {
+ border: 1px solid blue;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+ +

结果

+ +

{{EmbedLiveSample('示例')}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS2.1', 'tables.html#width-layout', 'table-layout')}}{{Spec2('CSS2.1')}}Initial definition
+ +

浏览器兼容性

+ +
+

{{Compat("css.properties.table-layout")}}

+
+ +
diff --git a/files/zh-cn/web/css/text-align-last/index.html b/files/zh-cn/web/css/text-align-last/index.html new file mode 100644 index 0000000000..df3731f947 --- /dev/null +++ b/files/zh-cn/web/css/text-align-last/index.html @@ -0,0 +1,113 @@ +--- +title: text-align-last +slug: Web/CSS/text-align-last +tags: + - CSS文字 + - 布局 +translation_of: Web/CSS/text-align-last +--- +
{{CSSRef}}
+ +
+ +

CSS 属性 text-align-last  描述的是一段文本中最后一行在被强制换行之前的对齐规则。

+ +
/* Keyword values */
+text-align-last: auto;
+text-align-last: start;
+text-align-last: end;
+text-align-last: left;
+text-align-last: right;
+text-align-last: center;
+text-align-last: justify;
+
+/* Global values */
+text-align-last: inherit;
+text-align-last: initial;
+text-align-last: unset;
+
+ +
{{cssinfo}}
+ +

语法

+ +

属性值

+ +
+
auto
+
每一行的对齐规则由 {{cssxref("text-align")}} 的值来确定，当 {{cssxref("text-align")}} 的值是 justify，text-align-last 的表现和设置了 start 的表现是一样的，即如果文本的展示方向是从左到右，则最后一行左侧对齐与内容盒子。
+
+

译者注：
+ 经测试，当 {{cssxref("text-align")}} 的值为 right，并且 text-align-last 设置为 auto 时，文本最后一行的对齐方式相当于 text-align-last 被设置为 right 时的效果。即 text-align-last 设置为 auto 后的表现跟 {{cssxref("text-align")}} 的设置有关。

+
+
start
+
与 {{cssxref("direction")}} 的设置有关。
+ 如果文本展示方向是从左到右，起点在左侧，则是左对齐；
+ 如果文本展示方向是从右到左，起点在右侧，则是右对齐。
+ 如果没有设置 {{cssxref("direction")}} ，则按照浏览器文本的默认显示方向来确定。
+
end
+
与 {{cssxref("direction")}} 的设置有关。
+ 如果文本展示方向是从左到右，末尾在右侧，则是右对齐；
+ 如果文本展示方向是从右到左，末尾在左侧，则是左对齐。
+ 如果没有设置 {{cssxref("direction")}} ，则按照浏览器文本的默认显示方向来确定。
+
left
+
最后一行文字与内容盒子的左侧对齐
+
right
+
最后一行文字与内容盒子的右侧对齐
+
center
+
最后一行文字与内容盒子居中对齐
+
justify
+
最后一行文字的开头与内容盒子的左侧对齐，末尾与右侧对齐。
+
+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ + + +
p {
+  font-size: 1.4em;
+  text-align: justify;
+  -moz-text-align-last: center;
+  text-align-last: center;
+}
+ +

{{EmbedLiveSample('Example','100%')}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Text', '#text-align-last', 'text-align-last')}}{{Spec2('CSS3 Text')}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.text-align-last")}}

+ +

参见

+ +
    +
  • {{cssxref("text-align")}}
    • +
  • {{cssxref("direction")}}
    • +
diff --git a/files/zh-cn/web/css/text-align/index.html b/files/zh-cn/web/css/text-align/index.html new file mode 100644 index 0000000000..4ddd3c5614 --- /dev/null +++ b/files/zh-cn/web/css/text-align/index.html @@ -0,0 +1,492 @@ +--- +title: text-align +slug: Web/CSS/text-align +tags: + - CSS文字 + - 参考 + - 属性 + - 布局 +translation_of: Web/CSS/text-align +--- +
{{CSSRef}}
+ +

text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

+ +
/* Keyword values */
+text-align: left;
+text-align: right;
+text-align: center;
+text-align: justify;
+text-align: justify-all;
+text-align: start;
+text-align: end;
+text-align: match-parent;
+
+/* Block alignment values (Non-standard syntax) */
+text-align: -moz-center;
+text-align: -webkit-center;
+
+/* Global values */
+text-align: inherit;
+text-align: initial;
+text-align: unset;
+ +

+ + + +

{{EmbedLiveSample("text-align", "100%", 350, "", "", "example-outcome-frame")}}

+ +

{{cssinfo}}

+ +

语法

+ +

text-align属性指定为从以下值列表中选择的单个关键字。

+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +

Values

+ +
+
start {{experimental_inline}}
+
如果内容方向是左至右，则等于left，反之则为right。
+
end {{experimental_inline}}
+
如果内容方向是左至右，则等于right，反之则为left。
+
left
+
行内内容向左侧边对齐。
+
right
+
行内内容向右侧边对齐。
+
center
+
行内内容居中。
+
<string> {{experimental_inline}}
+
第一个出现的该（单字符）字符串被用来对齐。跟随的关键字定义对齐的方向。例如，可用于让数字值根据小数点对齐。
+
justify
+
文字向两侧对齐，对最后一行无效。
+
justify-all
+
和justify一致，但是强制使最后一行两端对齐。
+
match-parent {{experimental_inline}}
+
和inherit类似，区别在于start和end的值根据父元素的{{cssxref("direction")}}确定，并被替换为恰当的left或right。
+
+ +

指示语法

+ +
{{csssyntax("text-align")}}
+ +

示例

+ +

查看在线演示

+ +

Live Examples

+ +
div { text-align: center; border:solid; } + +

p { background:gold; width:22em; }

+some more inline content...
+ +
div { text-align: center; border:solid; } + +

p { background:gold; width:22em; margin: 1em auto; }

+some more inline content...
+ +
div { text-align:-moz-center; text-align:-webkit-center; border:solid; } + +

p { background:gold; width:22em; }

+some more inline content...
+ +

备注

+ +

居中一个块元素且不居中它的行内内容的标准兼容的方法是将它的左、右margin设为auto, 例如：

+ +

margin:auto; 或margin:0 auto; 或margin-left:auto; margin-right:auto;

+ +

示例

+ +

Left alignment

+ +

HTML

+ +
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>
+ +

CSS

+ +
.example {
+  text-align: left;
+  border: solid;
+}
+ +

Result

+ +

{{EmbedLiveSample("Left_alignment","100%","100%")}}

+ +

Centered text

+ +

HTML

+ +
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>
+ +

CSS

+ +
.example {
+  text-align: center;
+  border: solid;
+}
+ +

Result

+ +

{{EmbedLiveSample("Centered_text","100%","100%")}}

+ +

Justify

+ +

HTML

+ +
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>
+ +

CSS

+ +
.example {
+  text-align: justify;
+  border: solid;
+}
+ +

Result

+ +

{{EmbedLiveSample("Justify","100%","100%")}}

+ +

Notes

+ +

The standard-compatible way to center a block itself without centering its inline content is setting the left and right {{cssxref("margin")}} to auto, e.g.:

+ +
.something {
+  margin: auto;
+}
+ +
.something {
+  margin: 0 auto;
+}
+ +
.something {
+  margin-left: auto;
+  margin-right: auto;
+}
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Text', '#text-align', 'visibility')}}{{Spec2('CSS3 Text')}}添加了start和end关键字 keyword. Changed the unnamed initial value to start (which it was). Added the {{cssxref("<string>")}} value, the match-parent value and the start end double value.
{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}{{Spec2('CSS2.1')}}无改变
{{SpecName('CSS1', '#text-align', 'text-align')}}{{Spec2('CSS1')}}首次定义
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (left, right, center and justify)1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}3.03.51.0 (85)
Block alignment values {{non-standard_inline}}1.0{{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}[1]{{CompatNo}}{{CompatNo}}1.0 (85){{property_prefix("-khtml")}}
+ 1.3 (312){{property_prefix("-webkit")}} [1]
start {{experimental_inline}}1.0{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatNo}}{{CompatVersionUnknown}}3.1 (525)
end {{experimental_inline}}1.0{{CompatUnknown}}{{CompatGeckoDesktop("1.9.2")}}{{CompatNo}}{{CompatVersionUnknown}}3.1 (525)
match-parent{{experimental_inline}}16{{CompatUnknown}}{{CompatGeckoDesktop("40")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Block alignment values {{non-standard_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
start {{experimental_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
end {{experimental_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
match-parent{{experimental_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
true(non-standard syntax){{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
+ +

[1] Both WebKit and Gecko supports a prefixed version of left, center, and right, that applies not only to inline content but also to block elements. This is used to implement the legacy {{htmlattrxref("align", "td")}} attributes on some table-related element. Do not use these on production Web sites.

+ +

参见

+ +
    +
  • {{Cssxref("margin","margin:auto")}}, {{Cssxref("margin-left","margin-left:auto")}}, {{Cssxref("vertical-align")}}
    • +
diff --git a/files/zh-cn/web/css/text-decoration-color/index.html b/files/zh-cn/web/css/text-decoration-color/index.html new file mode 100644 index 0000000000..d104d9ace0 --- /dev/null +++ b/files/zh-cn/web/css/text-decoration-color/index.html @@ -0,0 +1,113 @@ +--- +title: text-decoration-color +slug: Web/CSS/text-decoration-color +tags: + - CSS + - CSS 属性 + - CSS 文本 + - 参考 + - 文本样式 + - 颜色 +translation_of: Web/CSS/text-decoration-color +--- +
{{ CSSRef }}
+ +

CSS 属性 text-decoration-color 用于设置文本修饰线的颜色，文本修饰线是通过 {{ cssxref("text-decoration-line") }} 属性指定的。

+ +

修饰线包括下划线、上划线、删除线和波浪线，波浪线的典型用途是标明内容拼写错误（仅举例）。被指定的颜色会作用到该属性值有效范围内的所有修饰线上。

+ +
{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}
+ + + +

CSS 没有直接的机制为每种线型指定唯一的颜色，不过可以通过嵌套元素的方法来实现这种效果：用 {{cssxref("text-decoration-line")}} 属性为每个元素应用一种线型，再用 text-decoration-color 指定线的颜色。

+ +

语法

+ +
/* <color> values */
+text-decoration-color: currentColor;
+text-decoration-color: red;
+text-decoration-color: #00ff00;
+text-decoration-color: rgba(255, 128, 128, 0.5);
+text-decoration-color: transparent;
+
+/* Global values */
+text-decoration-color: inherit;
+text-decoration-color: initial;
+text-decoration-color: unset;
+
+ +

值

+ +
+
{{cssxref("<color>")}}
+
修饰文本的线的颜色。
+
+ +

格式化语法

+ +
{{csssyntax}}
+ +

示例

+ +
<p>This paragraph has <s>some erroneous text</s>
+    inside it that I want to call attention to.</p>
+ +
p {
+  text-decoration-line: underline;
+  text-decoration-color: cyan;
+}
+
+s {
+  text-decoration-line: line-through;
+  text-decoration-color: red;
+  text-decoration-style: wavy;
+}
+ +

{{EmbedLiveSample('Examples')}}

+ +

Accessibility concerns

+ +

It is important to ensure that the contrast ratio between the color of the text, the background the text is placed over, and the text decoration line is high enough that people experiencing low vision conditions will be able to read the content of the page. Color contrast ratio is determined by comparing the luminosity of the text and background color values.

+ +

Color alone should not be used to convey meaning. For example, change of text and text-decoration-color alone is not enouch to indicate a link has focus.

+ + + +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{ SpecName('CSS3 Text Decoration', '#text-decoration-color-property', 'text-decoration-color') }}{{ Spec2('CSS3 Text Decoration') }}初次定义。{{cssxref("text-decoration")}} 属性成为定义多个相关属性的简写形式。
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.text-decoration-color")}}

+ +

另请参阅

+ +
    +
  • 当要设置多个线修饰属性时，用 {{cssxref("text-decoration")}} 简写属性会比分别写多个属性更方便。
    • +
  • {{cssxref("<color>")}} 数据类型
    • +
  • 其他与颜色相关的属性：{{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, 和 {{cssxref("column-rule-color")}}
    • +
  • 使用 CSS 为 HTML 设置颜色
    • +
diff --git a/files/zh-cn/web/css/text-decoration-line/index.html b/files/zh-cn/web/css/text-decoration-line/index.html new file mode 100644 index 0000000000..7b8e74abf6 --- /dev/null +++ b/files/zh-cn/web/css/text-decoration-line/index.html @@ -0,0 +1,109 @@ +--- +title: text-decoration-line +slug: Web/CSS/text-decoration-line +tags: + - CSS + - CSS 属性 + - CSS 文本修饰 + - 参考 +translation_of: Web/CSS/text-decoration-line +--- +
{{CSSRef}}
+ +

CSS 属性 text-decoration-line 用于设置元素中的文本的修饰类型。当要设置多个线修饰属性时，用 {{cssxref("text-decoration")}} 简写属性会比分别写多个属性更方便。

+ +
/* Keyword values */
+text-decoration-line: none;
+text-decoration-line: underline;
+text-decoration-line: overline;
+text-decoration-line: line-through;
+text-decoration-line: blink;
+text-decoration-line: underline overline;               /* Two decoration lines */
+text-decoration-line: overline underline line-through;  /* Multiple decoration lines */
+
+/* Global values */
+text-decoration-line: inherit;
+text-decoration-line: initial;
+text-decoration-line: unset;
+
+ +

{{cssinfo}}

+ +

语法

+ +

值

+ +

text-decoration-line 属性可以设置为 none, 或者一个及多个用空格分隔的下列值。

+ +
+
none
+
表示没有文本修饰效果。
+
underline
+
在文本的下方有一条修饰线。
+
overline
+
在文本的上方有一条修饰线。
+
line-through
+
有一条贯穿文本中间的修饰线。
+
blink {{deprecated_inline}}
+
文本闪烁（文本交替处于显示与隐藏状态）。客户代理都一致没有实现文本闪烁效果。考虑到为了支持使用 CSS 动画，该值也不宜使用。
+
+ +

格式化语法

+ +
{{csssyntax}}
+ +

示例

+ +
+
<p class="wavy">Here's some text with wavy red underline!</p>
+<p class="both">This text has lines both above and below it.</p>
+ +
.wavy {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+}
+
+.both {
+  text-decoration-line: underline overline;
+}
+ +

{{ EmbedLiveSample('Examples', '', '', '') }}

+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Text Decoration', '#text-decoration-line', 'text-decoration-line')}}{{Spec2('CSS3 Text Decoration')}} +

初次定义。{{cssxref("text-decoration")}} 属性同时变成了定义多个相关属性的简写形式。

+
+ +

浏览器兼容性

+ +

 

+ + + +

{{Compat("css.properties.text-decoration-line")}}

+ +

 

+ +

另请参阅

+ +
    +
  • 当要设置多个线修饰属性时，用 {{cssxref("text-decoration")}} 简写属性会比分别写多个属性更方便。
    • +
diff --git a/files/zh-cn/web/css/text-decoration-skip/index.html b/files/zh-cn/web/css/text-decoration-skip/index.html new file mode 100644 index 0000000000..72fcfb490c --- /dev/null +++ b/files/zh-cn/web/css/text-decoration-skip/index.html @@ -0,0 +1,102 @@ +--- +title: text-decoration-skip +slug: Web/CSS/text-decoration-skip +translation_of: Web/CSS/text-decoration-skip +--- +
{{CSSRef}}
+ +

CSS text-decoration-skip 属性定义了元素哪些部分的内容需要被文本修饰所跳过。它可以控制所有该元素或该元素的祖先所绘制的文本修饰线。

+ +
/* 关键字 */
+text-decoration-skip: none;
+text-decoration-skip: objects;
+text-decoration-skip: spaces;
+text-decoration-skip: edges;
+text-decoration-skip: box-decoration;
+
+/* 使用多个关键字 */
+text-decoration-skip: objects spaces;
+text-decoration-skip: leading-spaces trailing-spaces;
+text-decoration-skip: objects edges box-decoration;
+
+/* 全局值 */
+text-decoration-skip: inherit;
+text-decoration-skip: initial;
+text-decoration-skip: unset;
+
+ +
+

注意: ink 值被移动至 {{cssxref("text-decoration-skip-ink")}} 属性。

+
+ +

{{cssinfo}}

+ +

语法

+ +

取值

+ +
+
none
+
没有任何内容被跳过。因此，文本修饰会为所有文本内容和行内元素进行绘制。
+
objects
+
拥有完整盒模型的原子行内元素会被跳过，例如图片和行内块元素。
+
spaces
+
所有的空格会被跳过，包括：所有的 Unicode 空白字符 和所有的分词符，以及任意相邻的 {{cssxref("letter-spacing")}} 或 {{cssxref("word-spacing")}}。
+
leading-spaces
+
除了只跳过开始的空格外，与 spaces 相同。
+
trailing-spaces
+
除了只跳过结尾的空格外，与 spaces 相同。
+
edges
+
文本修饰的开始与结束会比原有的装饰范围向内收缩（例如半个线宽）。这样，相邻的元素的下划线就可以分开。（这对于中文很重要，因为在中文中，下划线也是一种形式的标点符号。）
+
An example of "text-decoration-skip: edges;".
+
box-decoration
+
文本修饰会跳过盒模型的内边距、边框、外边距。这只会影响到祖先元素定义的修饰；修饰的盒不会渲染本身的盒修饰。
+
+ +

语法格式

+ +
{{csssyntax}}
+ +

示例

+ +

HTML

+ +
<p><em>Hey,</em> <em>grab a cup of coffee!</em></p>
+ +

CSS

+ +
p {
+  margin: 0;
+  font-size: 3em;
+  text-decoration: underline;
+  text-decoration-skip: edges;
+}
+ +

结果

+ +

{{EmbedLiveSample("Example", "100%", 60)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Text Decoration", "#text-decoration-skip-property", "text-decoration-skip")}}{{Spec2("CSS4 Text Decoration")}}首次定义
+ +

Browser Compatibility

+ + + +

{{Compat("css.properties.text-decoration-skip")}}

diff --git a/files/zh-cn/web/css/text-decoration-style/index.html b/files/zh-cn/web/css/text-decoration-style/index.html new file mode 100644 index 0000000000..33d3cce79b --- /dev/null +++ b/files/zh-cn/web/css/text-decoration-style/index.html @@ -0,0 +1,120 @@ +--- +title: text-decoration-style +slug: Web/CSS/text-decoration-style +tags: + - CSS + - CSS Property + - CSS Text Decoration + - Layout + - Reference +translation_of: Web/CSS/text-decoration-style +--- +
{{CSSRef}}
+ +

CSS 属性 text-decoration-style 用于设置由 {{ cssxref("text-decoration-line") }} 设定的线的样式。线的样式会应用到所有被 text-decoration-line 设定的线，不能为其中的每条线设置不同的样式。当要设置多个线修饰属性时，用 {{cssxref("text-decoration")}} 简写属性会比分别写多个属性更方便。

+ +
{{EmbedInteractiveExample("pages/css/text-decoration-style.html")}}
+ + + +

如果设定的修饰效果具有特定的语义，例如删除线的意味着某些文本被删除了，开发者最好使用有语义的 HTML 标签来表达，比如 {{ HTMLElement("del") }} 或 {{ HTMLElement("s") }} 标签，因为浏览器有时可能会屏蔽某些样式，但语义化的标签则不会出现这样的问题。

+ +

当一次使用多个 line-decoration 属性时，使用 {{cssxref("text-decoration")}} 简写属性会更方便。

+ +

语法

+ +
/* Keyword values */
+text-decoration-style: solid;
+text-decoration-style: double;
+text-decoration-style: dotted;
+text-decoration-style: dashed;
+text-decoration-style: wavy;
+
+/* Global values */
+text-decoration-style: inherit;
+text-decoration-style: initial;
+text-decoration-style: unset;
+
+ +

值

+ +
+
solid
+
画一条实线。
+
double
+
画一条双实线。
+
dotted
+
画一条点划线。
+
dashed
+
画一条虚线。
+
wavy
+
画一条波浪线。
+
-moz-none{{ non-standard_inline }}
+
不画线。亦可用 {{ cssxref("text-decoration-line") }}: none 替代。
+
+ +

格式化语法

+ +
{{csssyntax}}
+ +

示例

+ +
+ + +
.wavy {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+}
+
+ +
<p class="wavy">This text has a wavy red line beneath it.</p>
+
+ +

{{ EmbedLiveSample('Examples', '', '', '') }}

+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{ SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style') }}{{ Spec2('CSS3 Text Decoration') }}初次定义。{{cssxref("text-decoration")}} 属性同时变成了定义多个相关属性的简写形式。
+ +

浏览器兼容性

+ +

 

+ + + +

{{Compat("css.properties.text-decoration-style")}}

+ +

 

+ +

另请参阅

+ +
    +
  • 当要设置多个线修饰属性时，用 {{cssxref("text-decoration")}} 简写属性会比分别写多个属性更方便
    • +
+ +

 

diff --git a/files/zh-cn/web/css/text-decoration/index.html b/files/zh-cn/web/css/text-decoration/index.html new file mode 100644 index 0000000000..5bad8be5df --- /dev/null +++ b/files/zh-cn/web/css/text-decoration/index.html @@ -0,0 +1,133 @@ +--- +title: text-decoration +slug: Web/CSS/text-decoration +tags: + - 文本修饰 +translation_of: Web/CSS/text-decoration +--- +
{{ CSSRef() }}
+ +

简介

+ +

{{EmbedInteractiveExample("pages/css/text-decoration.html")}}

+ +

text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线  或 闪烁）它是 {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}}, 和新出现的 {{cssxref("text-decoration-thickness")}} 属性的缩写。

+ +

文本修饰属性会延伸到子元素。这意味着如果祖先元素指定了文本修饰属性，子元素则不能将其删除。例如，在如下标记中 <p>This text has <em>some emphasized words</em> in it.</p>，应用样式p { text-decoration: underline } 会对整个段落添加下划线，此时再添加样式 em { text-decoration: none } 则不会引起任何改变，整个段落仍然有下划线修饰。然而，新加样式 em { text-decoration: overline } 则会在<em>标记的文字上再添加上这种overline样式。

+ +

语法

+ +

text-decoration属性是一种简写属性，并且可以使用普通属性三个值中的任何一个。普通属性如下：{{cssxref("text-decoration-line")}}，{{cssxref("text-decoration-color")}}和{{cssxref("text-decoration-style")}}

+ +

值

+ +
+
{{cssxref("text-decoration-line")}}
+
文本修饰的位置, 如下划线underline，删除线line-through
+
{{cssxref("text-decoration-color")}}
+
文本修饰的颜色
+
{{cssxref("text-decoration-style")}}
+
文本修饰的样式, 如波浪线wavy实线solid虚线dashed
+
{{cssxref("text-decoration-thickness")}}
+
文本修饰线的粗细
+
+ +

语法形式

+ +
{{csssyntax("text-decoration")}}
+
+ +

示例

+ +
<p class="under">This text has a line underneath it.</p>
+<p class="over">This text has a line over it.</p>
+<p class="line">This text has a line going through it.</p>
+<p>This <a class="plain" href="#">link will not be underlined</a>,
+    as links generally are by default. Be careful when removing
+    the text decoration on anchors since users often depend on
+    the underline to denote hyperlinks.</p>
+<p class="underover">This text has lines above <em>and</em> below it.</p>
+<p class="blink">This text might blink for you,
+    depending on the browser you use.</p>
+ +
.under {
+  text-decoration: underline red;
+}
+
+.over {
+  text-decoration: wavy overline lime;
+}
+
+.line {
+  text-decoration: line-through;
+}
+
+.plain {
+  text-decoration: none;
+}
+
+.underover {
+  text-decoration: dashed underline overline;
+}
+
+.blink {
+  text-decoration: blink;
+}
+
+ +

结果

+ +

{{EmbedLiveSample('示例','auto','280')}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态值注解
{{SpecName('CSS4 Text Decoration')}}{{Spec2('CSS4 Text Decoration')}}增加了 {{cssxref("text-decoration-thickness")}}; 注意这个属性还不是正式的，还没有明确。
{{ SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration') }}{{ Spec2('CSS3 Text Decoration') }}转换为简写属性。支持{{ cssxref('text-decoration-style') }}值
{{ SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration') }}{{ Spec2('CSS2.1') }}没有显著变化
{{ SpecName('CSS1', '#text-decoration', 'text-decoration') }}{{ Spec2('CSS1') }} +

最初的规范

+
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.text-decoration")}}

+ +

参见

+ +
    +
  • The individual text-decoration properties are {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, and {{cssxref("text-decoration-style")}}.
    • +
  • The {{cssxref("list-style")}} attribute controls the appearance of items in HTML {{HTMLElement("ol")}} and {{HTMLElement("ul")}} lists.
    • +
diff --git a/files/zh-cn/web/css/text-indent/index.html b/files/zh-cn/web/css/text-indent/index.html new file mode 100644 index 0000000000..75314be041 --- /dev/null +++ b/files/zh-cn/web/css/text-indent/index.html @@ -0,0 +1,116 @@ +--- +title: text-indent +slug: Web/CSS/text-indent +translation_of: Web/CSS/text-indent +--- +
{{CSSRef}}
+ +

text-indent 属性能定义一个块元素首行文本内容之前的缩进量。

+ +
{{EmbedInteractiveExample("pages/css/text-indent.html")}}
+ +

Syntax

+ +
/* <length> 长度值 */
+text-indent: 3mm;
+text-indent: 40px;
+
+/* <percentage>百分比值取决于其包含块（containing block）的宽度*/
+text-indent: 15%;
+
+/* 关键字 */
+text-indent: 5em each-line;
+text-indent: 5em hanging;
+text-indent: 5em hanging each-line;
+
+/* 全局值 */
+text-indent: inherit;
+text-indent: initial;
+text-indent: unset;
+ +

Values

+ +
+
<length>
+
使用固定的<length>值来指定文本的缩进。允许使用负值。查阅可能的 {{cssxref("<length>")}} 单位。
+
<percentage>
+
使用包含块宽度的百分比作为缩进.
+
each-line {{experimental_inline}}
+
文本缩进会影响第一行，以及使用<br>强制断行后的第一行。
+
hanging {{experimental_inline}}
+
该值会对所有的行进行反转缩进：除了第一行之外的所有的行都会被缩进，看起来就像第一行设置了一个负的缩进值。
+
+ +

正式语法

+ +
+
+ 
{{csssyntax}}
+
+
+
+ +

例子

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+ +

CSS

+ +
p {
+  text-indent: 5em;
+  background: powderblue;
+}
+
+ +

结果

+ +

{{EmbedLiveSample('例子')}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Text', '#text-indent', 'text-indent')}}{{Spec2('CSS3 Text')}}Added the hanging and each-line keywords
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}{{Spec2('CSS3 Transitions')}}Lists text-indent as animatable.
{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}{{Spec2('CSS2.1')}}The behavior with display: inline-block and anonymous block boxes have been explicitly defined.
{{SpecName('CSS1', '#text-indent', 'text-indent')}}{{Spec2('CSS1')}}
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.text-indent")}}

+ +
diff --git a/files/zh-cn/web/css/text-justify/index.html b/files/zh-cn/web/css/text-justify/index.html new file mode 100644 index 0000000000..db387c6f37 --- /dev/null +++ b/files/zh-cn/web/css/text-justify/index.html @@ -0,0 +1,174 @@ +--- +title: text-justify +slug: Web/CSS/text-justify +tags: + - CSS文字 + - 布局 + - 排版 +translation_of: Web/CSS/text-justify +--- +
{{CSSRef}}
+ +
+ +

CSS属性 text-justify 定义的是当文本的 {{cssxref("text-align")}} 属性被设置为 :justify 时的齐行方法。

+ +
text-justify: none;
+text-justify: auto;
+text-justify: inter-word;
+text-justify: inter-character;
+text-justify: distribute; /* 已被废除，不提倡使用 */
+
+ +

{{cssinfo}}

+ +

语法

+ +

text-justify 属性的值只能取下面列表中的单个关键词值。

+ +

值

+ +
+
none
+
表示关闭掉齐行的设置。表现的效果和没有设置 {{cssxref("text-align")}} 一样，当你因为某种原因需要在已经设置了 {{cssxref("text-align")}} 的元素上禁用齐行效果的时候，这个属性值很有用。
+
译者注：经过测试，在谷歌（v 58.0.3029.110）下的表现与在火狐下的表现是不一样的，火狐下使用 none 属性时，的确可以禁用掉齐行设置，但是谷歌下还是没有设置 none 属性时的效果。
+
auto
+
默认值，浏览器根据显示的效果和质量来确定符合当前状态的最佳对齐方式，当然这种对齐方式将是最适合某种语言文字的排版（例如：英语，中文，日语，韩语等）。如果没有对 text-justify 进行设置的话，则是默认使用这样子的对齐规则。
+
inter-word
+
通过在文本中的单词之间添加空间来实现行对齐（这将会改变 {{cssxref("word-spacing")}} 的值），比如英语或韩语就是最适合使用这个属性来用空格分隔单词的语言。
+
inter-character
+
The text is justified by adding space between characters (effectively varying {{cssxref("letter-spacing")}}), which is most appropriate for languages like Japanese.
+
通过在文本中的字符之间添加空间来实现行对齐（这将会改变 {{cssxref("letter-spacing")}} 的值），比如日语就是最适合使用这个属性的语言。
+
distribute {{deprecated_inline}}
+
显示效果与设置了 inter-word 一致，不提倡使用这个属性，现在这个属性或许还能有效果，但那完全是为了向后兼容而被保留着。
+
+ +

语法

+ +
{{csssyntax}}
+ +

示例

+ + + +
p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  width: 95%;
+  margin: 10px auto;
+  text-align: justify;
+}
+
+.none {
+  text-justify: none;
+}
+
+.auto {
+  text-justify: auto;
+}
+
+.dist {
+  text-justify: distribute;
+}
+
+.word {
+  text-justify: inter-word;
+}
+
+.char {
+  text-justify: inter-character;
+}
+ +

{{EmbedLiveSample("示例","100%",400)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}}{{Spec2('CSS3 Text')}}
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}[2]14[1]{{CompatGeckoDesktop("55.0")}}11[1]{{CompatNo}}[2]{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}[2]{{CompatNo}}[2]14[1]{{CompatGeckoMobile("55.0")}}11[1]{{CompatNo}}[2]{{CompatNo}}
+
+ +

[1] 不支持标准属性值 inter-character 或 none 。但是支持过时的属性值 distribute和废弃属性值 distribute-all-lines、distribute-center-last、inter-cluster、inter-ideograph，以及 newspaper。

+ +

[2] 参照了默认的规范，属性值 inter-word 和 distribute 在“实验平台特性”的旗帜下被保留了下来，尽管 distribulte 已经不被提倡使用了。

+ +

参见

+ +
    +
  • {{cssxref("text-align")}}
    • +
diff --git a/files/zh-cn/web/css/text-orientation/index.html b/files/zh-cn/web/css/text-orientation/index.html new file mode 100644 index 0000000000..34decf78f3 --- /dev/null +++ b/files/zh-cn/web/css/text-orientation/index.html @@ -0,0 +1,108 @@ +--- +title: text-orientation +slug: Web/CSS/text-orientation +tags: + - CSS + - 书写方式 + - 书写模式 + - 文字方向 +translation_of: Web/CSS/text-orientation +--- +
{{CSSRef}}
+ +

text-orientation CSS 属性设定行中字符的方向。但它仅影响纵向模式（当 {{cssxref("writing-mode")}} 的值不是horizontal-tb）下的文本。此属性在控制使用竖排文字的语言的显示上很有作用，也可以用来构建垂直的表格头。

+ +
{{EmbedInteractiveExample("pages/css/text-orientation.html")}}
+ + + +

语法

+ +
/* Keyword values */
+text-orientation: mixed;
+text-orientation: upright;
+text-orientation: sideways-right;
+text-orientation: sideways;
+text-orientation: use-glyph-orientation;
+
+/* Global values */
+text-orientation: inherit;
+text-orientation: initial;
+text-orientation: unset;
+
+ +

text-orientation 应当被设置为上述关键字之一。

+ +

值

+ +
+
mixed
+
默认值。顺时针旋转水平书写的字符90°，将垂直书写的文字自然布局。
+
upright
+
将水平书写的字符自然布局（直排），包括垂直书写的文字（as well as the glyphs for vertical scripts）。注意这个关键字会导致所有字符被视为从左到右，也就是 {{cssxref("direction")}} 被强制设为 ltr。
+
sideways
+
所有字符被布局为与水平方式一样，但是整行文本被顺时针旋转90°。
+
sideways-right
+
处于兼容目的，sideways 的别名。
+
use-glyph-orientation
+
对于SVG元素，这个关键字导致使用已弃用的SVG属性。 glyph-orientation-vertical 和 glyph-orientation-horizontal。
+
+ +

形式化定义

+ +

{{CSSInfo}}

+ +

形式化语法

+ +
{{csssyntax}}
+ +

例子

+ +

HTML

+ +
<p>Lorem ipsum dolet semper quisquam.</p>
+ +

CSS

+ +
p {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+}
+ +

结果

+ +

{{EmbedLiveSample('例子')}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Writing Modes', '#text-orientation', 'text-orientation')}}{{Spec2('CSS3 Writing Modes')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.text-orientation")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/css/text-overflow/index.html b/files/zh-cn/web/css/text-overflow/index.html new file mode 100644 index 0000000000..d92f8d3766 --- /dev/null +++ b/files/zh-cn/web/css/text-overflow/index.html @@ -0,0 +1,444 @@ +--- +title: text-overflow +slug: Web/CSS/text-overflow +tags: + - CSS + - CSS 属性 + - text-overflow +translation_of: Web/CSS/text-overflow +--- +

{{ CSSRef() }}

+ +

text-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号（'...'，U + 2026 HORIZONTAL ELLIPSIS）或显示一个自定义字符串。

+ + + +

text-overflow.png

+ +

一般在容器的极限处进行截断。如果想在裁剪处显示空白符，可以使用 ('').

+ +

这个属性只对那些在块级元素溢出的内容有效，但是必须要与块级元素内联(inline)方向一致（举个反例：内容在盒子的下方溢出。此时就不会生效）。文本可能在以下情况下溢出：当其因为某种原因而无法换行(例子：设置了"white-space:nowrap")，或者一个单词因为太长而不能合理地被安置(fit)。

+ +

这个属性并不会强制“溢出”事件的发生，因此为了能让"text-overflow"能够生效，程序员们必须要在元素上添加几个额外的属性，比如"将{{cssxref("overflow")}} 设置为hidden"。

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Overflow behavior at line end
+   Right end if ltr, left end if rtl */
+text-overflow: clip;
+text-overflow: ellipsis;
+text-overflow: "…";
+text-overflow: fade;
+text-overflow: fade(10px);
+text-overflow: fade(5%);
+
+/* Overflow behavior at left end | at right end
+   Directionality has no influence */
+text-overflow: clip ellipsis;
+text-overflow: "…" "…";
+text-overflow: fade clip;
+text-overflow: fade(10px) fade(10px);
+text-overflow: fade(5%) fade(5%);
+
+/* Global values */
+text-overflow: inherit;
+text-overflow: initial;
+text-overflow: unset;
+ +

值

+ +
+
clip
+
此为默认值。这个关键字的意思是"在内容区域的极限处截断文本"，因此在字符的中间可能会发生截断。如果你的目标浏览器支持 text-overflow: ''，为了能在两个字符过渡处截断，你可以使用一个空字符串值 ('') 作为 text-overflow 属性的值。
+
ellipsis
+
这个关键字的意思是“用一个省略号 ('…', U+2026 HORIZONTAL ELLIPSIS)来表示被截断的文本”。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小到连省略号都容纳不下，那么这个省略号也会被截断。
+
<string> {{ experimental_inline() }}
+
{{cssxref("<string>")}}用来表示被截断的文本。字符串内容将被添加在内容区域中，所以会减少显示出的文本。如果空间太小到连省略号都容纳不下，那么这个字符串也会被截断。
+
+ +

Formal syntax

+ +
{{csssyntax("text-overflow")}}
+ +

示例

+ +

CSS content

+ +
p {
+  width: 200px;
+  border: 1px solid;
+  padding: 2px 5px;
+
+  /* BOTH of the following are required for text-overflow */
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.overflow-visible {
+  white-space: initial;
+}
+
+.overflow-clip {
+  text-overflow: clip;
+}
+
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.overflow-string {
+  /* Not supported in most browsers,
+     see the 'Browser compatibility' section below */
+  text-overflow: " [..]";
+}
+ +

HTML content

+ +
<p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
+<p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
+<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
+<p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+ +

Result

+ +

{{EmbedLiveSample('Examples', 300, 220, '', 'Web/CSS/text-overflow')}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CSS valuedirection: ltrdirection: rtl
Expected ResultLive resultExpected ResultLive result
visible overflow1234567890 +

1234567890

+ 		0987654321 +

1234567890

+
text-overflow: clipt-o_clip.png +

123456

+ 		t-o_clip_rtl.png +

1234567890

+
text-overflow: ''12345 +

123456

+ 		54321 +

1234567890

+
text-overflow: ellipsis1234… +

1234567890

+ 		…4321 +

1234567890

+
text-overflow: '.'1234. +

1234567890

+ 		.4321 +

1234567890

+
text-overflow: clip clip123456 +

1234567890

+ 		654321 +

1234567890

+
text-overflow: clip ellipsis1234… +

1234567890

+ 		6543… +

1234567890

+
text-overflow: clip '.'1234. +

1234567890

+ 		6543. +

1234567890

+
text-overflow: ellipsis clip…3456 +

1234567890

+ 		…4321 +

1234567890

+
text-overflow: ellipsis ellipsis…34… +

1234567890

+ 		…43… +

1234567890

+
text-overflow: ellipsis '.'…34. +

1234567890

+ 		…43. +

1234567890

+
text-overflow: ',' clip,3456 +

1234567890

+ 		,4321 +

1234567890

+
text-overflow: ',' ellipsis,34… +

1234567890

+ 		,43… +

1234567890

+
text-overflow: ',' '.',34. +

1234567890

+ 		,53. +

1234567890

+
+ +

说明

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 UI', '#text-overflow', 'text-overflow')}}{{Spec2('CSS4 UI')}}Added the values <string> and fadeand the fade() function
{{SpecName('CSS3 UI', '#text-overflow', 'text-overflow')}}{{Spec2('CSS3 UI')}}Initial definition
+ +

此接口的较早版本曾经被纳入候选名单。 但由于需要对某些尚未列出的风险点进行删除工作，因此该规范已降级到“工作草案”。所以说浏览器无前缀地实现此属性，但其却不在CR状态。

+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0 (312.3){{CompatVersionUnknown}}{{CompatGeckoDesktop("7.0")}}[1]6.0[2]9{{property_prefix("-o")}}[3]
+ 11.0		1.3 (312.3)
Two-value syntax {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("9.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
String value {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("9.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
fade{{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
fade(){{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("7.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Two-value syntax {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("9.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
String value {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("9.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
fade{{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
fade(){{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+ +

[1] 从 Gecko 10.0 {{geckoRelease("10.0")}} 起，修正了text-overflow属性在行内溢出的块级元素两端都溢出的显示效果，早前的版本如果仅仅使用一个属性(比如说text-overflow:ellipsis;)，可能会导致块级元素文本两端都会变为省略号，而不是仅仅期望的仅仅在文本末尾显示省略号。

+ +

[2] IE 8 提供了带有浏览器前缀的版本， -ms-text-overflow，和text-overflow作用相同。但是并不推荐这样使用。

+ +

[3] Opera 9 和 10 要求带有浏览器前缀 -o-text-overflow。

+ +

另见

+ +
    +
  • Related CSS properties: {{cssxref("overflow")}}, {{cssxref("white-space")}}
    • +
+ +

(69.2017.4.4,多多包涵)

diff --git a/files/zh-cn/web/css/text-rendering/index.html b/files/zh-cn/web/css/text-rendering/index.html new file mode 100644 index 0000000000..1b48fa93f9 --- /dev/null +++ b/files/zh-cn/web/css/text-rendering/index.html @@ -0,0 +1,211 @@ +--- +title: 文本渲染 +slug: Web/CSS/text-rendering +tags: + - CSS + - SVG + - zh-CN +translation_of: Web/CSS/text-rendering +--- +

{{ CSSRef() }}

+ +

概述

+ +

text-rendering CSS 属性定义浏览器渲染引擎如何渲染字体。浏览器会在速度、清晰度、几何精度之间进行权衡。

+ +
+

该属性是 SVG 的属性而不是标准的 CSS 属性。但是 Gecko（Firefox） 和 Webkit（Chrome、Safari） 内核的浏览器允许该属性在 Windows、Mac OS 和 Linux 操作系统中应用于 HTML 和 XML 内容。 

+
+ +

一个视觉上很明显的效果是，optimizeLegibility 属性值会在某些字体（比如，微软的 Calibri，Candara，Constantia 和 Corbel 或者 DejaVu 系列字体）小于20px 时把有些相邻字符连接起来（ligatures，比如，ff、fi、fl 等，效果见下面的 LiveExample) 。

+ +

{{cssinfo}}

+ +

语法

+ +
/* Keyword values */
+text-rendering: auto;
+text-rendering: optimizeSpeed;
+text-rendering: optimizeLegibility;
+text-rendering: geometricPrecision;
+
+/* Global values */
+text-rendering: inherit;
+text-rendering: initial;
+text-rendering: unset;
+
+ +

值

+ +
+
auto
+
浏览器依照某些根据去推测在绘制文本时，何时该优化速度，易读性或者几何精度。对于该值在不同浏览器中解释的差异，请看兼容性表。
+
optimizeSpeed
+
浏览器在绘制文本时将着重考虑渲染速度，而不是易读性和几何精度. 它会使字间距和连字无效。
+
optimizeLegibility
+
浏览器在绘制文本时将着重考虑易读性，而不是渲染速度和几何精度.它会使字间距和连字有效。该属性值在移动设备上会造成比较明显的性能问题，详细查看 text-rendering。
+
geometricPrecision
+
+

浏览器在绘制文本时将着重考虑几何精度， 而不是渲染速度和易读性。字体的某些方面—比如字间距—不再线性缩放，所以该值可以使使用某些字体的文本看起来不错。

+ +

对于 SVG，当文本缩放时，浏览器会计算文本最终大小（取决于特定的字体大小和相应的缩放比例）并且从操作平台的字体系统中请求一个符合该计算值的字体大小。但如果你请求一个字体大小，比如 9 并且 140% 的缩放，这个最终的字体大小为 12.6，字体系统中明显不存在，所以浏览器会向下取整到 12。这导致文本缩放是阶梯式的。

+ +

但这个 geometricPrecision 特性——当被渲染引擎完全支持时——会使文本缩放是流畅的。对于大比例的缩放，你可能看到并不太漂亮的文本渲染，但这个字体大小是你期望的，而不是被 Windows 或 Linux 系统四舍五入或向下取整的字体大小。

+ +

提示: WebKit 准确地的实现了这个值, 但是 Gecko 把这个值按照 optimizeLegibility 处理。

+
+
+ +

示例

+ +
/* make sure all fonts in the HTML document display in all its glory,
+   but avoid inadequate ligatures in class foo elements */
+
+body  { text-rendering: optimizeLegibility; }
+.foo  { text-rendering: optimizeSpeed; }
+ +

Live Example

+ +
+

没有在 Chrome 中看出例子中的区别来，可以移步看看这篇文章 text-rendering。

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CSS codeKerningLigatures
font: 19.9px 'DejaVu Serif',Constantia;LYoWATff fi fl ffl
font: 20px 'DejaVu Serif',Constantia;LYoWATff fi fl ffl
font: 3em 'DejaVu Serif',Constantia;
+ text-rendering: optimizeSpeed;		LYoWATff fi fl ffl
font: 3em 'Dejavu Serif',Constantia;
+ text-rendering: optimizeLegibility;		LYoWATff fi fl ffl
+ +

Gecko 注释

+ +

auto 选项的 20px 字体大小的阈值可以被 browser.display.auto_quality_min_font_size 值改变.

+ +

optimizeSpeed 选项在 Gecko 2.0 {{ geckoRelease("2.0") }} 上已经没有效果了，因为标准的文字渲染代码已经非常快，而且目前还没有更快的渲染方法。详见 {{ bug(595688) }} .

+ +

说明文档

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering') }}{{ Spec2('SVG1.1') }} 
+ +
+

该属性是 SVG 的属性而不是标准的 CSS 属性。但是 Gecko（Firefox） 和 Webkit（Chrome、Safari） 内核的浏览器允许该属性在 Windows、Mac OS 和 Linux 操作系统中应用于 HTML 和 XML 内容。 

+
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support for Windows and Linux +

4.0 but the implementation known bugs on Windows and Linux which can break font substitition, small-caps, letter-spacing or cause text to overlap

+ 		3.0 (1.9){{ CompatNo() }}{{ CompatNo() }}5.0 (532.5)
Basic support for other operating systems{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
autoChrome treats this as optimizeSpeed.
+ Work is continuing on{{ Webkitbug("41363") }}		If the font size is 20 px or higher, Gecko browsers use optimizeLegibility; for smaller text, they use optimizeSpeed.{{ CompatNo() }}{{ CompatNo() }}Safari treats this as optimizeSpeed.
+ Work is continuing on{{ Webkitbug("41363") }}
geometricPrecision13 supports true geometric precision, without rounding up or down to the nearest supported font size in the operating system.
+ Introduced in WebKit 535.1   {{ Webkitbug("60317") }}		Gecko treats the value the same as optimizeLegibility. {{ CompatNo() }} {{ CompatNo() }} 
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/zh-cn/web/css/text-shadow/index.html b/files/zh-cn/web/css/text-shadow/index.html new file mode 100644 index 0000000000..3d0ce10c68 --- /dev/null +++ b/files/zh-cn/web/css/text-shadow/index.html @@ -0,0 +1,160 @@ +--- +title: text-shadow +slug: Web/CSS/text-shadow +tags: + - CSS + - CSS Styles + - CSS Text Decoration +translation_of: Web/CSS/text-shadow +--- +
{{CSSRef}}
+ +

text-shadow为文字添加阴影。可以为文字与  {{ cssxref("text-decoration","text-decorations") }}  添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。

+ +

{{EmbedInteractiveExample("pages/css/text-shadow.html")}}

+ +

语法

+ +
/* offset-x | offset-y | blur-radius | color */
+text-shadow: 1px 1px 2px black;
+
+/* color | offset-x | offset-y | blur-radius */
+text-shadow: #fc0 1px 0 10px;
+
+/* offset-x | offset-y | color */
+text-shadow: 5px 5px #558abb;
+
+/* color | offset-x | offset-y */
+text-shadow: white 2px 5px;
+
+/* offset-x | offset-y
+/* Use defaults for color and blur-radius */
+text-shadow: 5px 10px;
+
+/* Global values */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+ +

当阴影大于一个时要用逗号区别开阴影之间的参数

+ +

每个阴影都有两到三个<length>参数 ， 以及一个与阴影颜色相关的<color>参数 。 前两个<length>参数，是以“文字中心”为原点的坐标轴，分别为x轴 <offset-x> 和y轴 <offset-y> 的值； 如果有第三个<length>参数，则第三个数值为形成阴影效果的半径的数值 <blur-radius> 。

+ +

当所给的阴影大于一个时，阴影应用的顺序为从前到后, 第一个指定的阴影在顶部.

+ +

这个属性同时适用于{{cssxref("::first-line")}} 以及 {{cssxref("::first-letter")}} 伪元素.

+ +

取值

+ +
+
{{cssxref("<color>")}}
+
可选。可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）自行选择的颜色。 {{ note("如果想确保跨浏览器的一致性，请明确地指定一种颜色") }}
+
<offset-x> <offset-y>
+
必选。这些长度值指定阴影相对文字的偏移量。<offset-x> 指定水平偏移量，若是负值则阴影位于文字左边。 <offset-y> 指定垂直偏移量，若是负值则阴影位于文字上面。如果两者均为0，则阴影位于文字正后方（如果设置了<blur-radius> 则会产生模糊效果)。
+ 可用单位请查看 {{ cssxref("<length>") }}。
+
<blur-radius>
+
可选。这是 {{ cssxref("<length>") }} 值。如果没有指定，则默认为0。值越大，模糊半径越大，阴影也就越大越淡（wider and lighter）。
+
+ +

形式化语法

+ +
{{csssyntax("text-shadow")}}
+ +

例子

+ +

简单的阴影

+ +
+
.red-text-shadow {
+   text-shadow: red 0 -2px;
+}
+ +
+ +
+ +
+ +
<p class="red-text-shadow">
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
+   inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+</p>
+ +
+ +
+ +
+ +
+
+ +

{{EmbedLiveSample('Simple_shadow', '689px', '90px')}}

+ +

多重阴影

+ +
+
.white-with-blue-shadow {
+   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+   color: white;
+   font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
+}
+
+ +
<p class="white-with-blue-shadow">
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+</p>
+
+ +
+
+ +

{{EmbedLiveSample('Multiple_shadows', '689px', '180px')}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}{{Spec2('CSS3 Transitions')}}Specifies text-shadow as animatable.
{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}{{Spec2('CSS3 Text Decoration')}}The CSS property text-shadow was improperly defined in CSS2 and dropped in CSS2 (Level 1). The CSS Text Module Level 3 spec refined the syntax. Later it was moved to CSS Text Decoration Module Level 3.
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ +

{{Compat("css.properties.text-shadow")}}

+ +

参见

+ + + +

+ +

+ +

+ +

diff --git a/files/zh-cn/web/css/text-size-adjust/index.html b/files/zh-cn/web/css/text-size-adjust/index.html new file mode 100644 index 0000000000..c910ead2db --- /dev/null +++ b/files/zh-cn/web/css/text-size-adjust/index.html @@ -0,0 +1,100 @@ +--- +title: text-size-adjust +slug: Web/CSS/text-size-adjust +tags: + - CSS + - 参考 + - 移动平台 +translation_of: Web/CSS/text-size-adjust +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

 text-size-adjust CSS 控制将一些手机或平板设备上使用的文本溢出算法（text inflation algorithm）。其他类型的设备上的浏览器会忽略此属性。

+ +
/* 专有属性值 */
+text-size-adjust: none;
+text-size-adjust: auto;
+
+/* <percentage> 值 */
+text-size-adjust: 80%;
+
+/* 全局属性值 */
+text-size-adjust: inherit;
+text-size-adjust: initial;
+text-size-adjust: unset;
+
+ +

因为许多网站还没有适配屏幕较小的设备，移动设备的浏览器和桌面浏览器在渲染网页时可能会有不同。他们不是以设备屏幕宽度布局网页，而是用比屏幕宽一些的 {{glossary("viewport", "视窗")}} 去布局网页，通常是 800 到 1000 像素。为了将视窗上的布局映射到原始设备屏幕上，手机浏览器要么只渲染整个页面的一部分，要么将视窗缩放至原始屏幕大小。

+ +

因为缩放适配小屏幕而导致文字会变得很小，许多手机浏览器会使用文本溢出算法放大文本，改善可读性。当一个包含文本的元素使用了 100% 的屏幕宽度，该算法会增加文本大小，但是不会修改布局。text-size-adjust 这个属性允许开发者去除或者修改浏览器的这种行为，比如，当网页已经适配了小屏幕之后，就不需要这么做了。

+ +
注意: + +
    +
  • 这个属性并不是标准。 你必须为每个你想要应用的浏览器加上属性前缀。
    • +
  • 不同浏览器，这个属性有不同的行为和语法。更多的信息，请查看下面的浏览器兼容性部分。
    • +
  • 这个属性只在一些智能手机和平板电脑上使用。桌面浏览器和一些平板电脑浏览器并没有一些溢出算法。
    • +
  • 如果 -webkit-text-size-adjust 显式设置为 none, 老的基于桌面的 WebKit 和平板电脑浏览器，像 Chrome≤26 或者 Safari≤5, 不会忽略这个属性, 反而会阻止用户在 web 界面放大或缩小。#
    • +
  • 不是所有的浏览器都支持这个属性使用百分比值(例如 Webkit 和 Trident , 但是 Gecko不支持). 检查下面浏览器兼容的部分查看更多的信息。
    • +
+
+ +

{{cssinfo}}

+ +

语法

+ +

text-size-adjust 属性的值为 none, auto，或 <percentage>

+ +

属性值

+ +
+
none
+
禁用浏览器的文本溢出算法。
+
auto
+
启用浏览器的文本溢出算法。该值一般用于取消先前使用 CSS 设置的 none。
+
<percentage> +
启用浏览器的文本溢出算法，并使用用一个百分数来确定文本放大程度。
+
+ +

形式化语法

+ +
{{csssyntax}}
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("CSS Text Size Adjust", "#adjustment-control", "text-size-adjust")}}{{Spec2("CSS Text Size Adjust")}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.text-size-adjust")}}

+ +

[1] There is a bug in older WebKit-based desktop browsers. If -webkit-text-size-adjust is explicitly set to none, older Webkit-based desktop browsers, instead of ignoring the property, will prevent the user from zooming in or out of the web page. See Bug 56543 (affected Safari≤5 & Chrome≤26), Bug 163359, and Bug 84186.

+ +

[2] In addition to the -moz- prefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a -webkit- prefixed version of the property for web compatibility reasons behind the layout.css.prefixes.webkit flag, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

+ +

[3] If the viewport is set using {{HTMLElement("meta")}} element, the value of the CSS text-size-adjust property is ignored. See detailed implementation hints on MSDN.

+ +

参见

+ + diff --git a/files/zh-cn/web/css/text-transform/index.html b/files/zh-cn/web/css/text-transform/index.html new file mode 100644 index 0000000000..dbf4a988bd --- /dev/null +++ b/files/zh-cn/web/css/text-transform/index.html @@ -0,0 +1,434 @@ +--- +title: text-transform +slug: Web/CSS/text-transform +tags: + - CSS3 + - text-transform + - uppercase +translation_of: Web/CSS/text-transform +--- +

{{CSSRef}}

+ +

概要

+ +

text-transform CSS属性指定如何将元素的文本大写。它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。

+ +

text-transform属性考虑特定于语言的案例映射规则，如：

+ +
    +
  • +

    in Turkic languages, like Turkish (tr), Azerbaijani (az), Crimean Tatar (crh), Volga Tatar (tt), and Bashkir (ba), there are two kinds of i, with and without the dot, and two case pairings: i/İ and ı/I.

    +
    • +
  • +

    In German (de), the ß becomes SS in uppercase.

    +
    • +
  • +

    In Dutch (nl), the ij digraph becomes IJ, even with text-transform: capitalize, which only put the first letter of a word in uppercase.

    +
    • +
  • +

    In Greek (el), vowels lose their accent when the whole word is in uppercase (ά/Α), except for the disjunctive eta (ή/Ή). Also, diphthongs with an accent on the first vowel lose the accent and gain a diaeresis on the second vowel (άι/ΑΪ).

    +
    • +
  • +

    In Greek (el), the lowercase sigma character has two forms: σ and ς. ς is used only when sigma terminates a word. When applying text-transform: lowercase to an uppercase sigma (Σ), the browser needs to choose the right lowercase form based on context.

    +
    • +
+ +

在其他一些其他特定的情况下，映射规则不被任何浏览器考虑在内：

+ +
    +
  • in Gaelic (ga), a prefix letter remains in lowercase when the base initial is capitalised, so in this example the h- should not be capitalized: text-transform: uppercase will change Meud na h-aplacaid to MEUD NA H-APLACAID which violates the locale orthographic rules, as it ought to be MEUD NA h-APLACAID.
    • +
+ +

语言由 lang HTML属性或 xml:lang  XML属性定义。

+ +

对于这些特定情况的支持因浏览器而异，因此请检查浏览器兼容性表。 

+ +

{{cssinfo}}

+ +

句法

+ +
/* Keyword values */
+text-transform: capitalize;
+text-transform: uppercase;
+text-transform: lowercase;
+text-transform: none;
+text-transform: full-width;
+
+/* Global values */
+text-transform: inherit;
+text-transform: initial;
+text-transform: unset;
+ +

值

+ +
+
capitalize
+
+

这个关键字强制每个单词的首字母转换为大写。其他的字符保留不变（它们写在元素里的文本保留原始大小写）。字母是Unicode字符集或者数字里定义的字符 {{experimental_inline}}；因此单词开头的任何标点符号或者特殊符号将会被忽略。

+ +

Authors should not expect capitalize to follow language-specific titlecasing conventions (such as skipping articles in English).

+
+
uppercase
+
这个关键字强制所有字符被转换为大写。
+
lowercase
+
这个关键字强制所有字符被转换为小写。
+
none
+
这个关键字阻止所有字符的大小写被转换。
+
full-width {{experimental_inline}}
+
这个关键字强制字符 — 主要是表意字符和拉丁文字 — 书写进一个方形里，并允许它们按照一般的东亚文字（比如中文或日文）对齐。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

例子

+ +

none

+ +
<p>Initial String <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p>
+<p>text-transform: none <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> </p>
+ +
span {
+  text-transform: none;
+}
+strong { float: right; }
+ +

This demonstrates no text transformation.

+ +

{{ EmbedLiveSample('none', '100%', '100px') }}

+ +

首字母大写capitalize (普通)

+ +
<p>Initial String <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p> <p>text-transform: capitalize <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> </p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

This demonstrates text capitalization.

+ +

{{ EmbedLiveSample('capitalize_(General)', '100%', '100px') }}

+ +

首字母大写 (标点)

+ +
<p>Initial String <strong>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</strong> </p> <p>text-transform: capitalize <strong><span>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</span></strong> </p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

This demostrates how initial punctuations of a word are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.

+ +

{{ EmbedLiveSample('capitalize_(Punctuation)', '100%', '100px') }}

+ +

首字母大写(符号)

+ +
<p>Initial String <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong> </p> <p>text-transform: capitalize <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong></p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

This demonstrates how initial symbols are ignored. The keyword target the first letter, that is the first Unicode character part of the Letter or Number general category.

+ +

{{ EmbedLiveSample('capitalize_(Symbols)', '100%', '100px') }}

+ +

首字母大写 (荷兰ij有向图)

+ +
<p>Initial String <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong> </p> <p>text-transform: capitalize <strong><span lang="nl">The Dutch word: "ijsland" starts with a digraph.</span></strong> </p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

This demonstrates how the Dutch ij digraph must be handled like one single letter.

+ +

{{ EmbedLiveSample('capitalize_(Dutch_ij_digraph)', '100%', '100px') }}

+ +

大写字母uppercase  (普通)

+ +
<p>Initial String <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p> <p>text-transform: uppercase <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> </p>
+ +
span {
+  text-transform: uppercase;
+}
+strong { float: right; }
+ +

This demonstrates transforming the text to uppercase.

+ +

{{ EmbedLiveSample('uppercase_(General)', '100%', '100px') }}

+ +

大写字母(希腊元音)

+ +
<p>Initial String <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong> </p><p>text-transform: uppercase <strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong> </p>
+ +
span {
+  text-transform: uppercase;
+}
+strong { float: right; }
+ +

This demonstrates how Greek vowels except disjunctive eta should have no accent, and the accent on the first vowel of a vowel pair becomes a diaeresis on the second vowel.

+ +

{{ EmbedLiveSample('uppercase_(Greek_Vowels)', '100%', '100px') }}

+ +

小写字母lowercase (普通)

+ +
<p>Initial String <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p> <p>text-transform: lowercase <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> </p>
+ +
span {
+  text-transform: lowercase;
+}
+strong { float: right; }
+ +

This demonstrates transforming the text to lowercase.

+ +

{{ EmbedLiveSample('lowercase_(General)', '100%', '100px') }}

+ +

小写字母 (希腊语Σ)

+ +
<p>Initial String <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong> </p> <p>text-transform: lowercase <strong><span>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span></strong> </p>
+ +
span {
+  text-transform: lowercase;
+}
+strong { float: right; }
+ +

This demonstrates how the Greek character sigma (Σ) is transformed into the regular lowercase sigma (σ) or the word-final variant (ς), according the context.

+ +

{{ EmbedLiveSample('lowercase_(Greek_Σ)', '100%', '100px') }}

+ +

全宽度full-width (普通)

+ +
<p>Initial String <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong> </p> <p>text-transform: full-width <strong><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span></strong> </p>
+ +
span {
+  text-transform: full-width;
+}
+strong { width: 100%; float: right; }
+ +

Some characters exists in two formats, normal width and a full-width, with different Unicode code points. The full-width version is used to mix them smoothly with Asian ideographic characters.

+ +

{{ EmbedLiveSample('full-width_(General)', '100%', '175px') }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS4 Text')}}From {{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}, adds the full-size-kanakeyword and allows the full-width keyword to be used together with another keyword.
{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS3 Text')}}From {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, extends letters to any Unicode character in the Number or Letter general category.  Modifies the behavior of capitalize to apply to the first letter of the word, ignoring initial punctuations or symbols. Adds the full-widthkeyword to mix smoothly ideographic characters and alphabetical characters.
{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}{{Spec2('CSS2.1')}}From {{SpecName('CSS1', '#text-transform', 'text-transform')}}, extends letters to non-latin bi-cameral scripts
{{SpecName('CSS1', '#text-transform', 'text-transform')}}{{Spec2('CSS1')}}Initial definition
+ +

 

+ +

浏览器兼容性 

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}4.07.01.0
capitalize(CSS3 version){{CompatUnknown}}[1]{{CompatGeckoDesktop("14")}}[1]{{CompatUnknown}}[1]{{CompatUnknown}}[1]{{CompatUnknown}}[1]
full-size-kana{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
full-width{{CompatNo}}{{CompatGeckoDesktop("19")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
ß → SS{{CompatUnknown}}{{CompatGeckoDesktop("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
i → İ and ı→ I{{CompatNo}}{{CompatGeckoDesktop("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
Dutch IJdigraph{{CompatNo}}{{CompatGeckoDesktop("14")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Greek accented letters30{{CompatGeckoDesktop("15")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Σ → σ or word-final ς30{{CompatGeckoDesktop("14")}}{{CompatNo}}{{CompatNo}}6.0
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
capitalize(CSS3 version){{CompatUnknown}}[1]{{CompatGeckoMobile("14")}}[1]{{CompatUnknown}}[1]{{CompatUnknown}}[1]{{CompatUnknown}}[1]
full-size-kana{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
full-width{{CompatNo}}{{CompatGeckoMobile("19")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
ß → SS{{CompatUnknown}}{{CompatGeckoMobile("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
i → İ and ı→ I{{CompatNo}}{{CompatGeckoMobile("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
Dutch IJdigraph{{CompatNo}}{{CompatGeckoMobile("14")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Greek accented letters{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Σ → σ or word-final ς{{CompatNo}}{{CompatGeckoMobile("14")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+ +

[1] The capitalize keyword was under-specified in CSS 1 and CSS 2.1. There were differences between browsers in the way the first letter was calculated (Firefox considered - and _ as letters, but not the others. Both Webkit and Gecko incorrectly considered letter-based symbols like ⓐ to be real letters. Internet Explorer 9 was the closest to the CSS 2 definition, but with some weird cases). By precisely defining the correct behavior, CSS Text Level 3 cleans this mess up. The capitalize line in the browser compatibility table contains the version the different engines started to support this now precisely defined behavior.

+ +

 

+ +

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////

+ +

 

diff --git a/files/zh-cn/web/css/text-underline-position/index.html b/files/zh-cn/web/css/text-underline-position/index.html new file mode 100644 index 0000000000..6e85187f64 --- /dev/null +++ b/files/zh-cn/web/css/text-underline-position/index.html @@ -0,0 +1,93 @@ +--- +title: text-underline-position +slug: Web/CSS/text-underline-position +translation_of: Web/CSS/text-underline-position +--- +

{{CSSRef}}

+ +
当 {{cssxref("text-decoration")}}属性的值设置为 underline 之后，可以用 text-underline-position 属性为其设置下划线的位置。
+ +
 
+ +
/* 只设置一个属性值 */
+text-underline-position: auto;
+text-underline-position: under;
+text-underline-position: left;
+text-underline-position: right;
+
+/* 设置多个属性值 */
+text-underline-position: under left;
+text-underline-position: right under;
+
+/* 全局属性值 */
+text-underline-position: inherit;
+text-underline-position: initial;
+text-underline-position: unset;
+
+ +

{{cssinfo}}

+ +

语法

+ +

属性值

+ +
+
auto
+
{{glossary("user agent", "用户代理")}} 会根据自己的算法来确认下划线是放在字母基线上还是 放在字母基线下方。
+
under
+
强制下划线的位置为字母基线的下方，在这个位置，下划线不会穿过任何字母，这样能确保数学方程式或者化学式的下标不会被下划线阻挡。
+
left
+
在垂直排版模式下，使下划线的位置在文字的左侧，在水平排版模式下，和 under 相同。
+
right
+
在垂直排版模式下，使下划线的位置在文字的右侧，在水平排版模式下，和 under 相同。
+
auto-pos {{non-standard_inline}}
+
auto的同义词 ，应使用 auto。
+
above {{non-standard_inline}}
+
强制下划线放置于文本上面。当使用东亚文字时，此效果和使用 auto 相同。
+
below {{non-standard_inline}}
+
强制下划线放置于文本下面。当使用字母文字的时候，此效果和使用 auto 相同。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

由于 text-underline-position 属性可以继承，且无法用 {{cssxref("text-decoration")}} 简写属性重置，所以应当在全局级别设置其值。比如，under 值对一篇包括大量使用下标的数学或者化学公式的文档是非常有用的。

+ +
:root {
+  text-underline-position: under;
+}
+ +

规范

+ + + + + + + + + + + + + + + + +
说明状态说明
{{SpecName('CSS3 Text Decoration', '#text-underline-position-property', 'text-underline-position')}}{{Spec2('CSS3 Text Decoration')}}初始定义
+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.text-underline-position")}}

+ +

参阅

+ +
    +
  • {{cssxref("text-decoration")}} 属性是大多数作为设置 text-decoration 属性的简写形式，包括 {{cssxref("text-decoration-line")}}， {{cssxref("text-decoration-color")}}， 和{{cssxref("text-decoration-style")}}。但是，text-decoration 不会设置 text-underline-position。
    • +
  • Microsoft non-standard values documentation
    • +
diff --git a/files/zh-cn/web/css/time-percentage/index.html b/files/zh-cn/web/css/time-percentage/index.html new file mode 100644 index 0000000000..f7150ed6e3 --- /dev/null +++ b/files/zh-cn/web/css/time-percentage/index.html @@ -0,0 +1,50 @@ +--- +title: +slug: Web/CSS/time-percentage +tags: + - 值 + - 单位 + - 层叠样式表 +translation_of: Web/CSS/time-percentage +--- +
{{CSSRef}}
+ +

CSS数据类型<time-percentage> 的值可以表示为时间或百分比。

+ +

Syntax

+ +

有关此类型允许的各个语法的详细信息，请参阅{{Cssxref("time")}}和{{Cssxref("percentage")}}的文档。

+ +

Use in calc()

+ +

如果将<time percentage>指定为允许的类型，这意味着该百分比解析为时间，因此可以在{{Cssxref("calc()")}}表达式中使用。

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Values', '#mixed-percentages', '<time-percentage>')}}{{Spec2('CSS4 Values')}} 
{{SpecName('CSS3 Values', '#mixed-percentages', '<time-percentage>')}}{{Spec2('CSS3 Values')}}Defines <time-percentage>. Adds calc()
+ +

Browser compatibility

+ + + +

{{Compat("css.types.time-percentage")}}

diff --git a/files/zh-cn/web/css/time/index.html b/files/zh-cn/web/css/time/index.html new file mode 100644 index 0000000000..0ad7f580bc --- /dev/null +++ b/files/zh-cn/web/css/time/index.html @@ -0,0 +1,87 @@ +--- +title: