CSS authoritative guide: Basic review + missing detection, css authoritative guide

CSS authoritative guide: Basic review + missing detection, css authoritative guide

A few days ago, I was asked a few questions about CSS. Is it true? Contact with CSS started from the first year of the Year. It may take three and a half years. I always feel familiar with css. However, it is still caused by a few questions "... then I just got started with a new company, and there were not too many things. So I picked up the CSS authoritative guide and conducted "basic learning" + "check for missing Vacancies ", this article mainly summarizes several knowledge points that I think are the value of CSS (this article is only within the scope of this book, if you want to talk about all CSS styles, then the beast chooses to slowly seek help ~).

Selector

The difference between the nested selection of class selectors and the multi-class selector is described here.

Basic Method of class selector:

.your-class{/*...*/}

Nested selection method of class selector:

.first-class .second-class{/*...*/}

Multi-class selector Syntax:

.first-class.second-class{/*...*/}

Selection of primary child elements:

.first-class > .second-class{/*...*/}

The differences between them are as follows:

<style>    .first-style.second-style{ color: blueviolet}    .first-style .third-style{ font-style: italic}    .first-style > .fourth-style{ font-weight: bold}</style>    <div class="first-style second-style">HELLO</div><div class="first-style third-style">hello</div><div class="first-style"><div class="second-style">HELLO</div></div><div class="first-style"><div class="third-style">hello</div></div><div class="first-style"><div><div class="third-style">Hello World</div></div></div><div class="first-style"><div class="fourth-style">Hello World</div></div><div class="first-style"><div><div class="fourth-style">Hello World</div></div></div>

Conclusion:

· Nested selection of class selector: select all child elements containing the second-style class under the first-style class (no matter how many levels of child elements)

· When selecting a level-1 child element, the first-level child element under first-style contains elements of the second-style class.

· Select a multi-class selector and select elements that contain both the first-style and second-style classes.

Style priority

The style priority is determined by the component of the selector. The priority value is expressed as four parts, for example, 0.0.0.0.

Note:: The priority of the first part is greater than the priority of the latter part. Ignore the size between their values. For example, 0.0.1.0 is greater than 0.0.0.12, and so on.

The specific priority of the selector is as follows:

· Add 0.1.0.0 to the attribute values of each ID in the selector;

· Add 0.0.1.0 to the attribute values, attribute selection, or pseudo classes of each class specified in the selector;

· Add 0.0.0.1 to each element and pseudo element in the selector;

· The selection of delimiter and wildcard has no contribution to the priority.

Use code to describe the priority:

Div {color: black}/* 0.0.0.1 */div p {color: black}/* 0.0.0.2 */. my-div {color: black}/* 0.0.1.0 */div. my-div {color: black}/* 0.0.1.1 */. my-div. my-p {color: black}/* 0.0.2.0 */. my-div p. my-p {color: black}/* 0.0.2.1 */div. my-div p. my-p {color: black}/* 0.0.2.2 *//*... and so on */# div-id {color: black}/* 0.1.0.0 *//*... continue and so on */

Some people will notice that the first part of 0.0.0.0 is never used. How is it used?

In general, the first 0 is reserved for the inline style declaration, which is more special than other declarations.
For example:

<div style="/*...*/"></div> <!--1.0.0.0 - ->

This section also contains "! Important "Problem

"! Important "is placed after the style Declaration, that is, before the semicolon. And it does not have a special priority value. What should we do first? See the following code:

<style>　　.impt{color: black !important}</style><div class="impt" style="color:red">hello world</div>

Conclusion:
"! The importance of the important statement exceeds all other statements.

CSS normal streams and elements

Normal stream

This refers to the text layout of traditional HTML documents that we are familiar with, from left to right and from top to bottom. The only way to make an element not in a normal stream is to make it a floating/locating element.

Non-replacement element

If the element content is included in the document, it is called a non-replacement element. For example: <p> </p>

Replacement element

An element used as a placeholder for other content. For example: and <input/>

Block-level elements

In a normal stream, a "line feed" is generated before or after the box. By declaring "display: block", the element can generate a block-level box.

Line Element

These elements do not generate "line delimiters" before or after the block-level elements. "display: inline" allows the elements to generate a line box.

Margin

1. Vertical outer margin merge

Vertical adjacent outer margins are merged. The smaller of the two margins will be merged by the larger one (you can also think of it as "overlapping ").

For more information, see the following example:

<style>    .first-div{ margin-bottom:50px;}    .second-div{ margin-top:20px;}</style><div class="first-div">this is div-1</div><div class="second-div">this is div-2</div>

2. margin style Sequence

.your-class{ margin:<top> <right> <bottom> <left> }

The sequence can be recorded as follows: a clockwise circle starts from.

Abbreviation rules:

· If the left margin value is missing, the right margin value is used.

· If the value of the bottom margin is missing, use the value of the top margin.

· If the value of the right margin is missing, use the value of the top margin.

Abbreviation code:

.first-margin{ margin: 50px;} /* 50px 50px 50px 50px */.second-margin{ margin: 50px 20px ;} /* 50px 20px 50px 20px */.third-margin{ margin: 50px 30px 10px;} /* 50px 30px 10px 30px */

3. Effect of Applying margin to row Elements

When margin is applied to a row element, it has an effect on the horizontal plane and has no effect on the vertical plane.

Result code:

<style>　　.mar-strong{ margin:20px 0}</style><div><strong class="mar-strong">hello world</strong> 

Since the relationship between the margin and the element in the row is mentioned here, let's take a look at the relationship between the padding and the element in the row.

When padding is applied to an element in the row, it has an effect on the horizontal plane and has no effect on the vertical plane (if the background is not set ).

Example:

<style>　　.mar-strong{ padding:20px 0px; background: red}</style><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<strong class="mar-strong">hello world</strong>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

In the preceding example, we can remove padding or background to check the layout impact. Please handle the relationship between the three with caution.

Background-attachment

This attribute is mentioned here.

Background: scroll | fixed | inherit

Initial Value: scroll

Code for viewing results:

<style>　　.div-bg{ width: 100%; height: 3000px;}　　.bg-attachment{ background-image: url(img/1.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center}</style><div class="div-bg bg-attachment"></div>

As shown in the preceding example, the background image always follows the scroll center when scrolling the page.

Float and clear

Element floating

· CSS allows all elements to float

· The margin around the floating element is not merged.

<style>    .div-float{float: left;margin: 50px}</style><div class="div-float">HELLO WORLD</div><div  class="div-float">hello world</div>

· A floating element will generate a block-level box, no matter what the element is.

<style>    .span{ margin: 50px}    .span-float{ float: left;}    </style><span class="span span-float">HELLO WORLD</span><span class="span span-float">hello world</span>

Clear floating

The clear float can be completed by the clear attribute.

Clear: left | right | both | none | inherit

Initial Value: none

Here we mainly describe left, right, and both. Clear floating elements on the left (do not let you float on the left), floating elements on the right (do not let you float on the right), and floating elements on both sides (do not allow floating elements on both sides ).

<style>    .div-mar{ width: 100px;padding: 50px}    .div-red{ background: red}    .div-yellow{ background: yellow}    .div-float-left{ float: left}    .div-float-right{ float: right}    .div-clear-both{ clear: both}    .div-clear-left{ clear: left}    .div-clear-right{ clear: right}</style><div class="div-mar div-red div-float-left">HELLO WORLD</div><div class="div-mar div-yellow div-float-left div-clear-right">Hello World</div>

The above [class * = "div-red"] elements can be moved between the left and right, and then the [class * = "div-yellow"] elements can be used to clear the floating.

Element Positioning

You can use the position attribute to locate an element.

Positon: static | relative | absolute | fixed | inherit

Initial Value: static

Static (static/normal location)

Generate element boxes normally.

Relative)

The element is offset to a certain distance, and the element remains in the shape before its unposition.

Absolute (absolute positioning)

The element is completely deleted from the document stream and located relative to its contained block.

Fixed (fixed positioning)

The element box is similar to absolute, but its contained block is the window itself.

When the element relative/absolute/fixed is located, an inclusion block is created for its child element.

What is a contained block?

In HTML, the root element is an html element.

· The inclusion block of the "root element" is created by the user agent.

· For a non-root element, if its position value is relative or static, the contained block consists of the content boundary of the nearest block-level box, table cell, or block ancestor box in the row.

· For a non-root element, if its position value is absolute, the inclusion block is set to the nearest position value rather than the static ancestor element.

Difference between "visibility: hidden" and "display: none"

When the visibility of an element is set to hidden, the element is invisible, but the element still affects the layout of the document (the element still exists, but cannot be seen ).

When we set an element display to none, the element is not displayed and deleted from the document stream (the element does not exist and can be used for rendering optimization ).

Content

Insert content or attribute values using the content attribute.

<style>    .div-content:before{ content: "[ "attr(value)" ] "}    .div-content:after{content:" hello world"}</style><div class="div-content" value="H">ello World</div>

Attached is a question that suddenly occurred during writing.

When the sub-elements in different elements use z-index, is it not affected by the relationship between the parent (ancestor) elements?

<style>    .div-out{width: 400px; height: 200px; background: black;border-bottom: 1px solid white; position: relative;}    .div-index-1{ width: 200px; height: 100px; background: red; position: absolute; bottom: -50px; z-index: 1}    .div-index-2{ width: 200px; height: 100px; background: yellow; position: absolute; top: -50px; left: 20px; z-index: 1}</style>        <div class="div-out">    <div class="div-index-1"></div>    </div>    <div class="div-out">    <div class="div-index-2"></div></div>

Conclusion:Not affected.

Newbie articles. If you have any questions, please share them with us ~~~ I think this article is okay. Just give me a thumbs up and give me encouragement ~