ReasonJun

In CSS, the position property is used to specify the positioning behavior of an element within its containing parent or the entire document. It determines how an element is placed and positioned in the layout of a web page. The position property accepts several values, each defining a different positioning behavior. Here are the commonly used values: static (default): This is the default positio..

display In CSS, the display property is used to control how an element is rendered and displayed in the web page layout. It determines the type of box used for an element and how it interacts with other elements. The display property accepts various values, each affecting the layout and behavior of the element. Here are some commonly used values: In CSS, the display property is used to control h..

border In CSS, the border property is used to define the border around an element. It allows you to specify the width, style, and color of the border. The border property can be shorthand or separate properties for border-width, border-style, and border-color. Here's the syntax for the border property with shorthand notation: border: ; For example, you can set a 2-pixel solid red border with the..

css unit px : pixels % : relative percentage em : font size of the element Default HTML font size = 16px html { font-size: 16px; } width: 10em = 160 px rem : font size of root element vw : percentage of viewport width vh : percentage of viewport vertical width width, height horizontal/vertical width of the element - auto: browser calculates the width - Specify in units such as px, em, vw, etc. m..

selector priority In CSS, selector priority determines which styles will be applied to an element when multiple conflicting styles are defined. CSS selectors have different levels of specificity, and the more specific a selector is, the higher its priority. Understanding selector priority is important to ensure that the intended styles are applied correctly. The following factors contribute to s..

Pseudo-Classes hover // Select while the mouse cursor is over the selector element .box { width: 100px; height: 100px; background-color: orange; transition: 1s; } .box:hover { width: 300px; background-color: royalblue; } active // Select while clicking the mouse on the selector element a:active { color: red; } focus // Select when the selector element is focused input:focus { background-color: o..

declaration method built-in way inline method Link method ⇒ Parallel method import method @import url("./box.css"); css selector basic // Universal Selector * { color: red; } // Type Selector li { color: red; } // Class Selector .orange { color: red; } // ID Selector #orange { color: red; } complex // Basic Combinator span.orange{ color: red; } // Child Combinator ul > .orange { color: red; } //..

img => The web page may not load the image immediately, but only when the user triggers an event to view the image. => The browser shows the optimized picture according to the status of the web page the user is viewing (considering size, sharpness, etc.). picture or "(min-width: 800px)" or "(min-width: 500px)" "(min-height)" or media="(orientation: portrait) and (min-width: 800px)" ⇒ You can dec..

BEM (Block Element Modifier) is a popular naming convention and methodology for organizing and structuring CSS classes in web development. It provides a systematic approach for naming and styling HTML elements to enhance code maintainability and reusability. The BEM methodology follows a specific naming convention that consists of three parts: Block, Element, and Modifier. Block: A block represe..

Viewport - `width=device-width`: Apply the same width as the width of each device - `initial-scale=1.0`: Set the initial screen scale (magnification degree) of the screen - `user-scalable=no`: Set whether the user can expand (`yes`)/reduce (`no`) the device screen - `maximum-scale=1`: The maximum value that the user can scale the screen to - `minimum-scale=1`: the minimum value that the user can..