This time I will show you how to use attribute value inheritance in CSS, and what are the precautions for using attribute value inheritance in CSS. The following is a practical case, let's take a look.
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 be inherited: 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 used only 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; }
// 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's very important. When the width of the hidden navigation bar is not fixed, or the width is larger than the parent element, you can generally only reset the width of the child element at this time)
If you go astray, go back; if you go in a hurry, Just take it slow. Stop and think about it from time to time, take a look, think about it, and then keep walking. I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
The above is the detailed content of How to use attribute value inheritance 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
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
