css learning 2

@ is a selector for CSS. It has many application scenarios. The most common usage scenario is to refer to other CSS files. It starts with @import. For example, if you want to apply style.css in main.css, then Just use @import style.css directly. In addition, there is another usage scenario for media selection, which starts with @media to represent styles under different media conditions, when you want to do responsive page layout, for example, when the width of the browser is less than 1000px, The background of the web page becomes black, you can use the following method: @media screen and (max-width: 1000px) { body {background;black}} When you want to print the web page to a printer, you can use @media print method to define.

positon has 4 properties: static relative absolute fixed, the default is static, that is, static positioning. The positions are allocated in the order in which the elements appear in (x)html, and static is not affected by top right left bottom. When the parent layer a When the position of sublayer b is set to relative (relative positioning), when the position of sublayer b is set to (absolute positioning), the offset of b is positioned relative to the parent layer a. For example, the offset of top: 10px will make the top of b and a There is a distance of 10px from the top of the . But if a is not set relative and b is set to absolute, the positioning of b is relative to the browser. At this time, top: 10px will make b appear 10px above the browser. Try it yourself It's the clearest.

role="navigation" in html
Use the role attribute to tell assistive devices (such as screen readers) the role played by this element, which belongs to WAI-ARIA. For example, a clicked button is role="button"; it will make this element clickable; it is essentially to enhance semantics, When the existing HTML tags cannot fully express the semantics, they can be explained with the help of roles. Usually this situation occurs on some custom components (such as a tree component, there is no tree tag in html), which can enhance the accessibility, usability and interactivity of the component.

Position is used to set the positioning type of the element, there are four types: absolute (absolute positioning), relative (relative positioning), static (static positioning, default value), and fixed (fixed positioning). static: default.

The float property defines in which direction the element floats.