Selector
Category <br>Simple selectors: id selector, class selector, tag selector,
Combined selectors: descendant selector (space), child selector (>), sibling selector (+), common selector (~)
Pseudo-class (:hover)
Pseudo-elements (::before, ::firt-child, ::not())
attribute selector
ps. Brother selector (+) and general selector (~): "+" refers to "own" adjacent siblings, "~" applies to all siblings
priority
!important up to 1000 points inline
id selector 100 Category selector, attribute selector, pseudo-class 10-point label selector, combination selector, pseudo-element 1-point priority is calculated by accumulation, the higher the value, the higher the priority.
<!-- 优先级 -->
<style>
p {
color: red;
}
.p {
color: grey;
}
div > p {
color: green;
}
</style>
<div>
<p class="p">1111</p>
</div>
<p class="p">222</p> <!-- 兄弟选择器与通用选择器 -->
<style>
div~p {
color: red;
}
div+p {
color: green;
}
</style>
<body>
<div>111</div>
<p>1</p>
<p>2</p>
<p>3</p>
</body>IFC/BFC
IFC
English full inline formatting context, inline formatting context.
Features:
- Arrange from left to right
- The height is determined by the line height
line-height, that is, calculated by inline-level box, but with IFC with multiple inline-level boxes, the typesetting is determined by vertical-align. - When the length is too large, it will automatically wrap, and a line is an inline-level box (ie, line-level box model).
ps. related settings for newline
Indicate how to break a sentence: word-break: break-all direct line break | break-word According to the word, encounter a space break | keep-all does not break a line | normal The default browser behavior indicates whether to break a sentence: word-wrap: break-word | normal
Mark the space segment: white-space: normal Browser default behavior | pre-wrap is the same as html editing line break | nowrap does not wrap | pre-line removes spaces and keeps line breaks | pre is the same as<pre>
BFC
English block formatting context, block-level formatting context.
Features:
- A BFC occupies one line and is arranged vertically, forming a block-level box (ie, block-level box model)
- BFC Internal Isolation
- Under the same BFC, they influence each other, and margin overlap occurs.
- The ways to trigger BFC are: float, set overflow, set margin, absolute positioning, fixed positioning, display: flex
box model
Standard Mode: <!DOCTYPE > is set, id html version Weird Mode: Not set <!DOCTYPE >
Box model: The structure box model calculation method of content, padding, border, and margin can be calculated by setting the calculation method in css3 box-sizing: border-box | content-box;, among which content-box is the calculation of content to represent the length and width, border -box is to calculate content + padding + border together into the length and width, similar to the weird mode of IE6.
other
margin double margin
It is mainly reflected in two aspects:
- The parent and child margins overlap, that is, the child cannot pull the margin from the parent element
- sibling margins overlap
Parent and child clear margins overlap:
- Add non-overflow: visible; to the parent container, such as overflow: scroll | hidden;
- Add padding or border to the parent container
- parent container float
- The parent container sets position: absolute;
- The parent container sets display: flex
Brother clear margin overlap:
- set float
- Parent setting display: flex
The principle is that by declaring it as BFC, it is laid out according to the BFC rules.
margin collapse
The parent element uses float.
z-index
border/bacground < z-index<0 < block-level < float < inline-level < z-index:0 < z-index>0
flex
What layouts can you do with flex? (To be added)
@media
To be added
transform
Have those functions? (To be added)
common layout
Vertically Centered, Horizontally Centered
html
<div class="father">
<div class="child"></div>
</div>css
// 绝对定位
.father {
width: 500px;
height: 500px;
}
.child {
width: 50px;
height: 50px;
}
// 绝对定位
// flex
// transform:
// margin: 0 auto;Left fixed, right adapted
To be added
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。