This article mainly introduces the inheritance of attribute values in CSS, introduces whether attributes can be inherited and cannot be inherited, and also analyzes the limitations of inheritance and whether it can be canceled, etc. You can check the detailed explanation below for specific operation steps. If you are interested Friends can refer to it, I hope it can help everyone.
Inheritance: HTML elements can inherit some css attributes from their parent elements, even if the current element does not define this attribute.
1.css attributes that can and cannot be inherited
Non-inheritable: display, margin, border, padding, background, height, min-height, max- height, width, min-width, max-width, overflow, position, left, right, top, bottom, z-index, float, clear, table-layout, vertical-align, page-break-after, page-bread- before and unicode-bidi. All elements can inherit: visibility and cursor. Inline elements can inherit: letter-spacing, word-spacing, white-space, line-height, color, font, font-family, font-size, font-style, font-variant, font-weight, text -decoration, text-transform, direction. Terminal block elements can inherit: text-indent and text-align. List elements can inherit: list-style, list-style-type, list-style-position, list-style-image. Table elements can inherit: border-collapse.
2. Value inheritance
Inheritance is also based on the document tree. Certain attributes of elements in the document tree can be inherited by their child elements. Each CSS properties define whether it can be inherited. To set some default style attributes of the document, you can set this attribute at the root of the document tree. If this attribute can be inherited, its descendant elements will inherit this attribute, such as color, font-size and other attributes.
3. "inherit (inherit)" value
Each attribute can specify the value "inherit", that is: for a given element, this attribute and its The calculated value of the relative attribute of the parent element takes the same value. Inherited values are usually only used as fallback values, which can be enhanced by explicitly specifying "inherit", for example:
##4. Limitations of inheritance
Although inheritance reduces the trouble of repeated definitions, some properties cannot be inherited, such as border, margin, padding (filler) and background, etc.
This setting makes sense. For example, if a border is set for a
, if this attribute is also inherited, then all elements within this
will have borders, which will undoubtedly produce A dazzling result. Likewise, properties that affect element position, such as margin and padding, are not inherited.
At the same time, the browser's default style also affects the inheritance results. For example:
# Body {font-siZe: 12px;}
# & LT; H2 & GT;
// H2 Chinese text will be Title 2 style text instead of 12px size text. This is because the browser’s default style sets the CSS rule of
.
At the same time, some older versions of browsers may not support inheritance very well. For example, some browsers will lose all inherited attributes when encountering
5. Can it be canceled?
Once the css attribute is inherited, it cannot be canceled and the style can only be redefined.
6. Case
Parent element position:relative Child element: position:absolute The width of the parent element is fixed, and the child element will inherit the width of the parent element (for secondary navigation It is very important. When the width of the hidden navigation bar is not fixed, or the width is larger than the parent element, the width of the child element can generally only be reset at this time)
Related recommendations:
Introduction to attribute value inheritance in css
javascript Obtaining specific CSS attribute values_Experience exchange
Detailed explanation of CSS attribute value usage
The above is the detailed content of Comprehensive summary of attribute value inheritance knowledge in css. For more information, please follow other related articles on the PHP Chinese website!
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
To change the CSS list style, first use list-style-type to change the bullet or numbering style. 1. Use list-style-type to set the bullet of ul to disc, circle or square, and the number of ol is decimal, lower-alpha, upper-alpha, lower-roman or upper-roman. 2. Remove the tag completely with list-style:none. 3. Use list-style-image:url('bullet.png') to replace it with a custom image. 4. Use list-style-position:in
Use a div with border to quickly create vertical lines, and define styles and heights by setting border-left and height; 2. Use ::before or ::after pseudo-elements to add vertical lines without additional HTML tags, suitable for decorative separation; 3. In Flexbox layout, by setting the width and background color of the divider class, adaptive vertical dividers between elastic containers can be achieved; 4. In CSSGrid, insert vertical lines as independent columns (such as autowidth columns) into grid layout, which is suitable for responsive design; the most appropriate method should be selected according to the specific layout needs to ensure that the structure is simple and easy to maintain.
Use CSS to create dotted borders, just set the border attribute to dotted. For example, "border:3pxdotted#000" can add a 3-pixel-wide black dot border to the element. By adjusting the border-width, the size of the point can be changed. The wider borders produce larger points. You can set dotted borders for a certain side, such as "border-top:2pxdottedred". Dotted borders are suitable for block-level elements such as div and input. They are often used in focus states or editable areas to improve accessibility. Pay attention to color contrast. At the same time, different from dashed's short-line style, dotted presents a circular dot shape. This feature is widely used in all mainstream browsers.
It is feasible to create a responsive automatic carousel slider with pure CSS, just combine HTML structure, Flexbox layout, and CSS animation. 2. First build a semantic HTML container containing multiple recommendation terms, each .item contains reference content and author information. 3. Use the parent container to set display:flex, width:300% (three slides) and apply overflow:hidden to achieve horizontal arrangement. 4. Use @keyframes to define a translateX transformation from 0% to -100%, and combine animation: scroll15slinearinfinite to achieve seamless automatic scrolling. 5. Add media
Using CSS to create a split screen layout can be implemented through Flexbox. First, set the container to display:flex and set the height to 100vh. Use flex:1 to divide the space evenly. The horizontal layout is only possible by default. Vertical layout needs to be set flex-direction:column. In conjunction with media query @media(max-width:768px) can achieve the mobile stacking responsive effect. If you need to fix the sidebar, set a fixed width for it. The main content area uses flex:1 to adapt to the remaining space. At the same time, it is recommended to use box-sizing:border-box globally to avoid padding affecting the layout, and ultimately achieve a simple and responsive split screen design.
:nth-child() is used to select and style the elements according to the position of the elements in the same level, and is often used to create alternating styles or specific modes; 1. Use the even and odd keywords to achieve interlaced color changes, such as li:nth-child(even) to set the background of even items to light gray; 2. Use the an b formula to accurately control the selection rules, such as 3n 1 to select items 1, 4, 7, etc.; 3. Special modes such as -n 3 to select the first 3 child elements; 4. Note that nth-child counts from 1 and calculates all elements of the same level. If you need to count only by the same element, use nth-of-type().
Web Front-end
