Recommended learning methods
Problem learning method : Studying with problems is conducive to concentration and clear purpose. This is not only a requirement for deliberate learning, but also a necessary condition for discovering learning. Psychologists divide attention into two types: unintentional attention and intentional attention. Intentional attention requires a conscious purpose in advance, and when necessary, it requires will and effort to actively pay attention to certain things. It shows the subjectivity and enthusiasm of people's psychological activities. The problem-based learning method emphasizes deliberate attention to information about solving problems, so that learning has a clear direction, thereby improving learning efficiency.
After introducing the problem-learning method, we will enter our topic today. Next, I will introduce some of the underlying knowledge and weird phenomena of CSS, so as to let everyone have a deeper understanding of CSS.
One.css size
1. Preferred minimum width-to achieve complex graphics effects
In css, the weight of pictures and text is much greater than that of layout, so when width:0, the displayed width is the "preferred minimum width". The minimum width of Chinese is the width of each Chinese character. Western characters depend on consecutive English character units.
Therefore, we can implement some complex graphics based on this feature, as follows:
When the mouse passes over, it becomes the following:
code show as below:
.minW{
display: inline-block;
width: 0
}
.minW::before {
content: "love 你 love";
color: transparent;
outline: 2px solid #cd0000;
}
.minW:hover::before{
content: "你 love 我";
color: transparent;
outline: 2px solid #cd0000;
}
We will find that when the container width is set to 0, a shape based on the text space appears due to the influence of the preferred width.
2.2. The principle of the strange phenomenon when the width of the child element is set to 100%
The width of the parent element = the width of the image + the width of the text content.
Browser rendering principle: first download the document content, load the head style resources, and then render the dom content in the order from top to bottom and from outside to inside. The reason for the phenomenon in this example is: when rendering to the parent element, the width: 100% of the child element is not rendered, and the width is the width of the image plus the text content; when the text is rendered to the child element, the width of the parent element It has been fixed. At this time, width:100% is the fixed width of the parent element, and the width is not enough to overflow.
.box{
display: inline-block;
white-space: nowrap;
}
.text{
display: inline-block;
width: 100%;
}
Theoretically, the width of the parent element should be the sum of the width of the child elements, but the phenomenon shown in the figure above appears. The reason lies in the order of browser rendering: from the outside to the inside, which is very important.
3. How to make elements support height:100% effect
Knowledge point: The width and height percentage of absolute positioning is based on padding-box, while the width and height percentage of non-absolute positioning is based on content-box
Methods as below:
* 1.设置显示的高度值
* 2.使用绝对定位
4. The expansion and collapse animation of any height element (max-height/min-height)
1.The initial size of min-height/min-width is auto, and the initial size of max-height/max-width is none
2. The priority of min-height/min-width is higher than max-width/max-height
To achieve the expansion and collapse animation as shown in the figure above, you can use max-height/min-height:
.nav > .sub-nav{
max-height: 0;
overflow: hidden;
transition: max-height .6s cubic-bezier(.17,.67,.76,1.41)
}
.nav:hover > .sub-nav{
max-height: 400px;
}
2. In-depth exploration of inline elements
Common inline elements are: the element inline box model with display set to inline, inline-block, inline-table:
Content area: it can be understood as the background color area of the text selection (emphasis)
Inline box: inline label or plain text
Line box: a line composed of inline boxes, each line is a line box
Containing boxes: ghosts of boxes consisting of line box boxes. Blank nodes: In the HTML5 document declaration, the parsing and rendering of inline elements behave as if there is a blank node in front of each line box box. As shown in the following case:
3. Deep understanding of content
1. In the web, many replacement elements have a default size (excluding borders) of 300*150 without clear size settings, such as video, iframe, canvas, etc., a few are 0, such as img, and forms The replacement size of the element is related to the browser itself.
2. For the img element, if there is a css size, the final size is determined by the css size (css size> html size> inherent size)
3. When the src attribute of the picture is default, the picture will not have any request, which is the most efficient way to achieve. The following shows the picture placeholder code that uses this method (for the firefox browser, the default img of src is a Ordinary inline elements, the width and height settings are invalid):
img { visibility: hidden; }
img[src] { visibility: visible; }
content content generation technology
1. Realize line break
::after{
content: '\A';
white-space: pre;
}
2. Realize the loading animation
.dot{
display: inline-block;
width: 8em;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
.dot::after{
display: block;
margin-left: 5.2em;
content: '...\A..\A.';
white-space: pre-wrap;
animation: dot 3s infinite step-start both;
}
@keyframes dot{
33% { transform: translateY(-3em);}
66% { transform: translateY(-2em);}
99% { transform: translateY(-1em);}
}
3. Attribute value content generation
<div class="icon" data-tip="江小白"></div>
/* 可以使用原生属性和自定义属性 */
.icon::after{
content: attr(data-tip);
}
4. Counter attribute --- pure css to achieve technical effect
.box1{
counter-reset: count1;
}
.xigua:checked::before{
content: counter(count1);
counter-increment: count1;
position: absolute;
color: transparent;
}
.box1::after{
content: counter(count1);
}
</style>
<div class="counter">
<div class="box1">
<div>西瓜<input class="xigua" type="checkbox" /></div>
<div>香蕉<input class="xigua" type="checkbox" /></div>
<div>萝卜<input class="xigua" type="checkbox" /></div>
</div>
</div>
Four.Padding in-depth study
1. For elements whose box model is set to box-sizing: border-box, if the padding is large enough, the width will be invalid:
width: 200px;
padding-left: 120px;
padding-right: 120px;
box-sizing: border-box;
2. For inline elements, padding has an impact on both the visual layer and the layout layer. If the parent element is set to overflow: auto, the vertical padding of the inline child element may cause the parent element to appear scroll bars, otherwise if the parent element is not set Overflow will only overlap in the vertical direction and will not affect the layout:
/* 父元素设置 */
.pd-2-1{
overflow: auto;
}
.pd-2-1 > span{
padding-top: 1em;
padding-bottom: 1em;
}
3. Practical application of padding (you can think about the specific implementation)
1.增加链接或按钮的点击区域的大小
2.利用内联元素的padding实现高度可控的分割线
3.用内联元素实现瞄点定位距离
4. Use the padding percentage value to achieve the effect of scaling the image in proportion:
.pd-3{
padding: 10% 50%;
position: relative;
}
.pd-3 img{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
** Note: The vertical padding of inline elements will make ghost blank nodes appear. At this time, consider setting font-size:0
5.Padding and graphics drawing
/* 菜单 */
.icon-menu{
display: inline-block;
width: 120px;
height: 10px;
padding: 35px 0;
border-bottom: 10px solid;
border-top: 10px solid;
background-clip: content-box;
background-color: currentColor;
}
/* 双层圆点 */
.icon-dot{
display: inline-block;
width: 60px;
height: 60px;
padding: 10px;
border-radius: 50%;
border: 10px solid;
background-clip: content-box;
background-color: currentColor;
}
Five. Margin in-depth study
1. Use: nth-type-of(3n) to remove the tail margin of the child element
.mg-item:nth-of-type(3n){
margin-right: 0;
}
Note: If the container can be scrolled, the padding-bottom value will be ignored under IE and firefox, but chrome will not. At this time, the bottom of the scroll container can be left blank through margin-bottom
The essential difference is: chrome triggers the scroll bar display when the child element exceeds the parent element content box size, while IE and Firefox browsers trigger the scroll bar display when the padding box size is exceeded
2. Margin merger conditions
Block-level elements, but not floating and absolutely positioned elements
Only appear in the vertical direction under the default document flow
Three scenarios of margin merging
Adjacent siblings
Parent and first/last child element
* 解决方案： 父级设置为块级格式化上下文元素
父元素设置border-top/bottom值
父元素设置padding-top/bottom值
父元素设置高度
Empty block-level element margin merge
3. Calculation rules for margin consolidation
"Positive and positive take the larger value", "Add positive and negative values", "Negative and negative most negative value"
4. Deep understanding of margin:auto
If one side is fixed and one side is auto, then auto is the remaining space
If both sides are auto, the remaining space is divided equally
Prerequisite for triggering margin:auto calculation: when width or height is a fixed value, the element has automatic filling characteristics
/* 1 */
margin-right: 20px;
margin-left: auto;
/* 2 */
margin-right:auto;
margin-left: auto;
4. Absolutely positioned elements use margin:auto to achieve horizontal and vertical centering (compatible to ie8+)
.father{
position: relative;
}
.child-2{
position: absolute;
left: 0; bottom: 0; right: 0; top: 0;
width: 40px;
height: 20px;
margin: auto;
}
*** Analysis of invalid margin:
The vertical margin of a non-replaced element whose display calculated value is inline is invalid
For inline replacement elements, vertical margins are effective, and there is no margin merging problem, so margin merging will never happen
The inline feature causes the margin to fail: there is a picture in a container, and the picture is set to margin-top. As the negative value of margin-top becomes larger and larger, the picture will no longer shift upward when it reaches a specific negative value.
6. The letter x and the baseline in css
The bottom edge of the baseline letter x
x-height refers to the height of the letter x
ex: ex refers to the height of the lowercase letter x, which is a relative unit
vertical-align: middle refers to the height of the baseline 1/2 x-height
内联元素设置对齐方式时，是基于最前面的内联元素的基线，然后根据自己的vertical-align来调整对齐的
7. BFC-block-level formatting context
Performance: The internal layout changes of the elements will not affect the external elements. So there will be no margin merging, which can be used to clear the effect of floating.
Conditions for triggering BFC:
Root element
The value of float is not none
The value of overflow is auto,scroll,hidden
The value of display is table-cell, inline-block
The value of position is not static or relative
If the element has BFC characteristics, there is no need to clear:both to clear the float
Display: table-cell characteristics: no matter how large the width is set, it will not exceed the width of the table container
Overflow cutting boundary: border box: An element with overflow: hidden has both padding and border set, and when the child element exceeds the container width and height settings, the cutting boundary is the inner edge of the border box instead of the inner edge of the padding box
On the PC side, the default scroll bars are all from, the scroll height of the PC side can be obtained with document.documentElement.scrollTop, and on the mobile side with document.body.scrollTop
The width of the scroll bar on the PC side is about 17px
Ways to prevent the page scroll bar from shaking:
html{
/* ie8 */
overflow-y: scroll;
}
:root{
overflow-y: auto;
overflow-x: hidden;
}
:root body{
position: absolute;
}
body{
width: 100vw;
overflow: hidden;
}
9. The CSS method of displaying ellipsis when multi-line text overflows:
.ell-rows-2{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
8. Relative difficulty analysis
The relative positioning displacement is relative to itself. If the value of left/top/right/bottom is a percentage unit, the calculated size is based on the parent element
If the opposite attributes of left/right or top/bottom appear at the same time, only the attributes in one direction will take effect. The priority is related to the order of the document flow. The default document flow is from top to bottom and from left to right, so top Priority is higher than bottom, left priority is higher than right
Relative minimization principle
Try not to use relative, you can use non-dependent absolute positioning to solve some problems
If you must use relative, relative must be minimized (minimum included area)-in order to avoid problems such as hierarchical coverage
Cascading context
The default z-index of the positioning element: auto; At this time, like ordinary elements, once the z-index is set to any value, a stacking context is created, the order is:
Cascading context <negative z-index <block <float <inline <z-index: auto <positive z-index
Cascading context of new css3 attributes:
1.flex
2.opacity不为1
3.transform不为none
4.mix-blend-mode不为normal
5.filter不为none
6.isolation是isolate
7.will-change为上面2-6的任意一个
8.元素-webkit-overflow-scrolling设为touch
The negative value of z-index is below the block, practical application:
1. 可访问性隐藏
2. ie8下的多背景隐藏
Well, there is still a lot of knowledge about CSS, and some problems are difficult to solve through appearances. At this time, what makes you stand out is your deeper understanding of the underlying code.