[Articles] a simplified version of CSS
(1) CSS box model
CSS box model
Topic: Talk about your understanding of the CSS box model
1) Basic Concepts: Standard Model Model + IE
And differences between standard model 2 model IE)
Calculate different width and height
3) How to set up two models CSS
4) JS how to get set box model corresponding to the width and height?
JS how to write in order to get the width and height corresponding box model it?
5) Examples of questions (overlap margin The model interpreter cartridge)
6) BFC (overlap margin solutions) or IFC
Detailed Interpretation:
1) Basic Concepts: Standard Model Model + IE
And differences between standard model 2 model IE)
The width of the standard model of content refers to the width, and does not include padding border.
IE is the aspect model calculation of padding and border. If 200px width, then for the IE model, its 200px comprising padding and border.
3) How to set CSS these two models?
box-sizing: content-box;
4) JS how to get set box model corresponding to the width and height?
dom.style.width/height
dom.currentStyle.width / height (this property is only supported IE)
window.getComputedStyle (dom) .width / height (This attribute all browsers support)
dom.getBoundingClientRect (). width / height (calculated absolute position)
5) Examples of questions (overlap margin The model interpreter cartridge)
6) BFC (overlap margin solutions) or IFC
6-1) The basic concept of BFC
Block-level formatting context
6-2) BFC principle
Margins in the vertical direction of the overlap occurs BFC
BFC regions do not overlap with the floating region cleared
When calculating the height of the BFC, the float will be involved in the calculation.
BFC does not overlap with the float
BFC sub-elements even float will also participate height calculation
6-3) How to create BFC
overflow: hidden;
The value of the float is not none
position value is not static
display a table
6-4) BFC usage scenarios
* What is the BFC
BFC (Block Formatting Context) format context, the Web page CSS box model rendering mode, layout, means a separate rendering area or is an isolated separate containers.
Conditions for forming the BFC *
* Float, float value other than none of
* Positioned elements, position (absolute, fixed)
Inline-block * display the value of one of them, table-cell, table-caption
In addition to visible * overflow value (hidden, auto, scroll)
* BFC features
* Inside Box one after placed in a vertical direction.
* Distance in the vertical direction is determined by margin
* Bfc region does not overlap with the float element area.
* Bfc when calculating the height of the floating elements are also involved in the calculation
* Bfc is a separate container on the page, inside the container does not affect child elements outside elements.
(2) the interview summary articles] [css - css selectors, and priority
Priority (priority):! Important> inline style> #id> .class> tag> *> inheritance> default.
When the weight of the heavy phase while the selector, it will apply the principle of proximity.
Weight calculation:
-----------------------------------------------------
Source: MDN web docs
Different kinds of CSS selectors:
The selector can be divided into the following categories:
- Simple selector (Simple selectors): by element type, class, or id matches one or more elements.
- attribute selector (Attribute selectors): matching one or more elements by attribute / attribute value.
- pseudo-classes (Pseudo-classes): one or more elements in the matching state is determined, such as by hovering the mouse pointer element, or the currently selected or not selected the checkbox,
Or the element is a first child node in the DOM tree a parent node.
- pseudo elements (Pseudo-elements): Match is one or more elements related to the position determined, for example, the first word of each segment, or an element generated before the content.
- a combiner (Combinators): where not only the selection itself, as well as in an efficient manner very specific method of selecting a combination of two or more choices for.
For example, paragraphs immediate child nodes you can select only divs, or directly behind the paragraph headings of.
- Multi Selector (Multiple selectors): These are not separate selector; this idea is a comma-separated multiple selectors in a CSS rule below,
It applied to a set of statements selected by the selectors of all these elements.
-----------------------------------------------------
Attribute Selector:
(1) presence and the value (Presence and value) attribute selector
These attempts to match the exact properties of the selected attribute values:
- [attr]: This selector selects the attributes attr containing all the elements, regardless of what the value of attr.
- [attr = val]: The selector selects only all the elements is assigned attributes attr val.
- [attr ~ = val]: The selector selects only the elements having attributes attr, val value and require space-separated list of values to be included in the value of attr one.
Let's look at a specific example, the following is its HTML code:
My Recipe Ingredients: <i lang = "fr-FR"> Poulet basquaise </ i>
<ul>
<li data-quantity="1kg" data-vegetable>Tomatoes</li>
<li data-quantity="3" data-vegetable>Onions</li>
<li data-quantity="3" data-vegetable>Garlic</li>
<li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
<li data-quantity="2kg" data-meat>Chicken</li>
<li data-quantity="optional 150g" data-meat>Bacon bits</li>
<li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
<li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>
And a simple style sheet:
/ * All elements having a "data-vegetable" attribute to be applied to the green color of text * /
[data-vegetable] {
color: green;
}
/ * All have a "data-vegetable" attribute and attribute value exactly as "liquid" element will be applied golden background color * /
[data-vegetable = "liquid"] {
background-color: goldenrod;
}
/ * All have a "data-vegetable" attribute and attribute value contains "spicy" elements,
Even further attribute of the element comprises other attribute values, text color will be red * /
[data-vegetable~="spicy"] {
color: red;
}
The results are as follows:
(2) sub-string value (Substring value) attribute selector
This situation attribute selectors also called "pseudo-regular Selector" because they provide the flexibility to match the regular expression similar way (but please note that these selectors are not really regular expressions):
- [attr | = val]: attr selection value or attribute value is val elements at the beginning Val- (note that here, "-" is not an error, which is used to process the language code).
- [attr ^ = val]: attr attribute selection value to begin with val (val comprise) elements.
- [attr $ = val]: selecting values of attributes attr end with Val (including val) elements.
- [attr * = val]: Select the element values included in attributes attr substring of val (a substring of a string is part of it, for example, "cat" is the string "caterpillar" substring) .
Let's continue our previous example, and add the following CSS rules:
/ * * Usage language selection of classic /
[lang |= "fr"] {
font-weight: bold;
}
/ * All elements having a "data-vegetable" attribute contains the value "not spicy", have changed back to green * /
[data-vegetable*="not spicy"] {
color: green;
}
/ * Having a "data-quantity" attribute values of all elements which end in "kg" of the * /
[data-quantity$="kg"] {
font-weight: bold;
}
/ * Having an attribute "data-quantity" of all elements which begins with "optional" in * /
[data-quantity^="optional"] {
opacity: 0.5;
}
-----------------------------------------------------
Pseudo-class (Pseudo-class)
A CSS pseudo-classes (Pseudo-class) is a colon (:) as a prefix is added to the end of the keyword's a choice, when you want the style to the specified element was only presented in a particular state,
You can go behind the selector element coupled with the corresponding pseudo-classes (pseudo-class). You may want to render an element in another style in a certain state, such as when the mouse hovers above elements,
Or when a check box is checked or disabled, or when an element is the first child of its parent element in the DOM tree when.
:active :indeterminate :only-of-type
:any :in-range :optional
:checked :invalid :out-of-range
:default :lang() :read-only
:dir() :last-child :read-write
:disabled :last-of-type :required
:empty :left :right
:enabled :link :root
:first :not() :scope
:first-child :nth-child() :target
:first-of-type :nth-last-child() :valid
:fullscreen :nth-last-of-type() :visited
:focus :nth-of-type()
:hover :only-child
A pseudo-class (Pseudo-class) Examples:
<a href="#" target="_blank">百度一下</a>
Some styles:
/ * These styles will be applied to our links under any circumstances * /
a {
color: blue;
font-weight: bold;
}
/ * We want to be visited and unvisited links links look the same * /
a:visited {
color: blue;
}
/ * When the cursor hovers over a link, or lock the keyboard to activate the link, we make the link appear highlighted * /
a:hover, a:active, a:focus {
color: darkred;
text-decoration: none;
}
-----------------------------------------------------
Combiner and selector group
While the first use of a selector can be useful, but in some cases it may be inefficient. CSS selectors become more value you begin using a combination of fine-grained them when choosing. Mutual relationships between elements based, CSS offers several ways to select the elements. The following table shows a connector using (arbitrarily selected, and B represents A front hereinbefore described) these relationships: