Table of contents
- foreword
- CSS Knowledge Points
- 1. Selector
- 2. Three major features of CSS
- 3. Display mode
- 4. Solve the problem of high collapse
- 5. float
- 6. BFC
- 7. Positioning
- 8. Show and hide elements
- 9. Application of vertical-align attribute
- 10. Overflow text ellipsis
- CSS3 Knowledge Points
- 11. New selector
- 12. CSS3 box model border-box
- 13. calc()
- 14. Transition
- mobile terminal
- 1. Viewport
- 2.meta
- 3. Physical pixel & physical pixel ratio
- 4. Mobile terminal development plan
- 5. Layout method
foreword
This article is some work on css review that the author did before looking for a job. It records my review of css related knowledge.
CSS Knowledge Points
1. Selector
| Selector | effect | usage |
|---|---|---|
| descendant selector | select descendant elements | .nav a |
| child selector | choose a son | .nav>p |
| union selector | Select some elements with the same style | .nav, header |
| Link pseudo-class selector | Select a different status link | a{} and a:hover are more important |
| :focus selector | Get the cursor's form | input:focus |
2. Three major features of CSS
Three major characteristics
Cascading: The same selector sets the same style, and one style will overwrite the other, effectively solving the problem of style conflicts (proximity principle).
Inheritance: Inheritance of styles, child tags will inherit some styles of parent tags.
Priority: When an element specifies multiple selectors, priority will be generated. It also has a lot to do with weight:
| Selector | Weights |
|---|---|
| inherit,* | 0 |
| element selector | 0,0,0,1 |
| class selector, pseudo-class selector | 0,0,1,0 |
| id selector | 0,1,0,0 |
| inline style | 1,0,0,0 |
| !important | Unprecedented |
It should be noted that no matter how high the weight of the parent element is, the weight of the child element is 0.
calculate weight
Composite selectors will have weight stacking. Never carry.
The weight of ul li is 0001 + 0001 = 0002
The weight of li is 0001, so the color specified by ul li is executed.
Note that a:hover 0,0,1,1
3. Display mode
Display Mode: How the element is displayed.
| display mode | typical example | features |
|---|---|---|
| block element | h、p、div、ul、li | Exclusive line, height controllable, default width is 100% of the parent element, internal or block-level elements can be released |
| inline element | a、strong、b、em、i、del、span | Adjacent inline elements are in one line, and multiple inline elements are displayed in one line. The direct setting of width and height is invalid. The default width is the content width. The interior can only accommodate text or other inline elements. |
| inline-block element | img、input、td | There are multiple lines, the default width is its own width, and the width and height are controllable |
display mode conversion
行内->块 display: block;
块->行内 display: inline；
转化为行内块 display: inline-block;
4. Solve the problem of high collapse
What is high collapse?
Please see the following code demonstration:
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
}
.son {
margin-top: 50px;
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
Effect demonstration:
the parent element and the child element fall together. Cause: Collapsed margins.
Solution 1: Give the parent element a border:
border: 1px solid transparent;
Solution 2: Give the parent element a padding (this kind of simple calculation is required if it is to restore the design draft):
padding: 1px;
Solution 3: Add overflow: hidden to the parent element. Hide overflow.
5. float
Introduction to floating
Create a floating box, float left or right in the floating box.
Features:
Breaking away from the standard flow, no longer retaining the original position;
displayed in one line and aligned to the top;
has the property of an inline block element.
Constraint floating:
first use the standard flow to arrange up and down, and then use floating to arrange the left and right positions of the child elements.
Attention should be paid to floating:
1. Match with the standard flow parent box;
2. One float and all floats. A floating box will only affect the standard flow behind the floating box, not the standard flow in front of it.
Why Clear Float - Solving Height Collapse
Reason: The content of the parent box is uncertain, and it is inconvenient to give a height. I hope the child box will open the parent box. (also known as high collapse)
Problems to be solved: Floating elements do not take up space and are off-label.
Solution: Clear the float.
Clear floating essence: Clear the influence caused by floating elements. If the parent box itself has a height, there is no need to clear the float;After clearing the float, the parent will automatically detect the height based on the floated box. It will not affect the standard flow.
The strategy for clearing floating is: close floating. Only affects inside the parent box, does not affect other boxes outside the parent box.
clear float
选择器{clear: 属性值;}
The attribute value can be left, right, and both; generally clear: both is used.
Additional tags (W3C recommended practice)
The extra tag method will add an empty at the end of the floatblock level elementslabel, for example:
<div style="clear: both"></div>
or other labels etc.
<style>
.clear {
clear: both;
}
</style>
<div class="box">
<div>1</div>
<div>2</div>
<div class="clear">3</div>
</div>
Add overflow to father
The overflow is hidden, and the overflow part cannot be displayed.
<style>
.box {
overflow: hidden;
}
</style>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Pseudo-element method
Add a pseudo-element to the parent element.
<style>
.clearfix:after {
content: "",
display: block;
height: 0;
clear: box;
visibility: hidden;
}
//兼容性，IE6，7专有
.clearfix {
*zoom: 1;
}
</style>
<div class="box clearfix">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Advantages: It does not occupy memory, and the structure is clearer.Structure matters most.
double pseudo element
It is also added to the parent element. Insert a pseudo-element before and after the parent element:
<style>
.clearfix:before .clearfix:after {
content: "",
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
6. BFC
BFC - Block Formatting Context The definition of block-level formatting context BFC is introduced in the official document: a BFC area contains all sub-elements that create the context element, but does not include the interior of sub-elements that create a new BFC Elements, BFC is an independent rendering area. BFC can be regarded as an attribute of an element. An element with this attribute will isolate its child elements from the world and will not affect other external elements.
I have also encountered BFC in the previous written test. The above-mentioned clearing of floating and solving the collapse of outer margins are actually related to it. The meaning of BFC is:Independent regions do not affect each other.
Therefore, when we encounter clearing floating and solving margin collapse, we actually make the area where they are located be the BFC area.
So here comes the important question, how to turn an area into a BFC area?
1、根元素
2、float属性不为none
3、position为absolute或fixed
4、 display为inline-block, table-cell, table-caption, flex, inline-flex
5、 overflow不为visible
7. Positioning
The principle of son and father
The meaning of child relative to father is that if the child is positioned absolutely, the parent should use relative positioning.
The absolute positioning of the child will not occupy the position, but if the parent does not set relative positioning, the child will use the browser as the parent box for absolute positioning, so it is necessary to give the parent a relative positioning.
8. Show and hide elements
display 显示隐藏
visbility 显示隐藏
overflow 溢出隐藏
display
none: hidden object (no longer occupies the original position);
block: converted to a block-level element/display element.
visibility
inherit: Inherit the visibility of the previous parent object;
visible: the object is visible;
== hidden==: the object is hidden; (continue to occupy the original position)
collapse: hide the row or column of the table.
overflow
Show or hide overflowing elements.
hidden: do not display overflow content;
scroll: display scroll bar (both overflow and overflow);
auto: add scroll bar when needed, and come as needed.
9. Application of vertical-align attribute
Used to set the vertical alignment of pictures or forms and text.
vertical-align: baseline | top | middle | bootom
baseline: default. The element is placed on the baseline of the parent element;
top: align the top of the element with the top of the tallest element in the row;
middle: place the element in the middle of the parent element;
bottom: align the top of the element with the top of the lowest element in the row.
Application: cancel the bottom gap of the picture.
10. Overflow text ellipsis
Single-line text overflows ellipsis:
//文本强制一行内显示
white-space: nowrap
//超出部分隐藏
overflow: hidden
//文字用省略号代替超出部分
text-overflow: ellipsis;
CSS3 Knowledge Points
11. New selector
attribute selector
//利用属性选择器，选择某个大类中具有value属性的元素
input[value]{
}
//还可以根据属性值来看
input[type=text]{
}
//以icon开头
div[class^=icon]{
}
//以data结尾
div[class$=data]{
}
Class selectors, pseudo-class selectors, and attribute selectors all have a weight of 10.
Struct pseudo-class selector
//第一个子元素
div:nth:first-child{
}
//最后一个子元素
div:nth:last-child{
}
//任意元素，n从1开始
div:nth-child(n){
}
12. CSS3 box model border-box
box-sizing has two attribute values:
content-box: the box size is width + padding + border
border-box: the box size is the actual size of the box width
13. calc()
Function: Calculate the width of the box
width: calc(100% - 80px)
Can be calculated by +, -, *, /.
14. Transition
Transitions are one of the disruptive features in CSS3. We can transition elements from one style to another without using Flash or JS.
Often used with :hover.
grammar:
transition: 要过渡的属性 花费时间 运动曲线 从什么时候开始
Attributes to be transitioned: attributes to be changed, if you want to change all attributes, just write all;
Time spent: the unit is seconds, and the unit must be written;
Motion curve: the default is ease;
When to start: the unit is s, you can set the delay trigger time.
mobile terminal
1. Viewport
The browser displays the page'sscreen area.
There are three viewports: layout viewport, visual viewport, ideal viewport.
Ideal viewport: Manually write meta viewport tags to inform browser operations. The viewport of our layout will be as wide as the device is charged.
2.meta
Attributes and explanations of the meta viewport tag:
| Attributes | explain |
|---|---|
| width | Set the width of the viewport, you can set the special value of device-width |
| initial-scale | Initial zoom ratio, a number greater than 0 |
| maximum-scale | The maximum zoom ratio, a number greater than 0 |
| minimum-scale | The minimum zoom ratio, a number greater than 0 |
| user-scalable | Whether the user can zoom, yes or no (1 or 0) |
Standard viewport settings:
eta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maxmum-scale=1.0,minmum-scale=1.0">
3. Physical pixel & physical pixel ratio
Physical pixels refer to the smallest particles that can be displayed on the screen, which is also what we call resolution, which is physically real.
In the PC side page, 1px is equal to 1 physical pixel, but the mobile side is different.
For example, iphone8, the physical pixel is 750, 1px development pixel = 2 physical pixels.
4. Mobile terminal development plan
There are two types, one is to make a mobile page separately; the other is a responsive page.
Making mobile pages separately is similar to JD.com, which has its own set of PC terminals and its own mobile pages; responsive pages can adjust the page layout according to the screen width, so as to achieve the effect of mobile terminals.
It is currently the mainstream to make mobile pages separately, and you can use fluid layout (percentage), flex elastic layout, less+rem+media query layout, and mixed layout;
Responsive pages are compatible with mobile terminals, using media queries and bootstrap.
5. Layout method
percentage layout
It should be noted here that in percentage layout, the content cannot be stretched infinitely, so in order to protect the box within a reasonable range, set the maximum width to the minimum width.
The attributes that can be used are max-width and min-width.
flex layout
1. Main shaft and side shaft,flex-direction must be written：
flex-direction: 属性值
row： 主轴x轴，默认从左到右（默认）
row-reverse： x轴，从右到左
column： 主轴为y轴，从上到下
column-reserve： y轴，从下到上
2. Arrangement of main axis and side axis elements:
Spindle:
justify-content: 属性值
Side shaft:
align-itmems: 属性值
Attributes:
flex-start： 从左到右排列
flex-end：从尾部开始排列
center：在主轴居中对齐
space-around：平分剩余空间
space-between：先平分两边，再平分剩余空间
3. Set whether the child element wraps:
//不换行
flex-wrap: nowrap;
//换行
flex-wrap: wrap;
4. Flex attribute value:
In flex, sub-items occupy fractions, and the remaining space can be allocated. flex can be followed by a number or a percentage. Used heavily for layout and adaptation.
The value of flex can also be a percentage. For example, there are ten boxes in total, and they should be arranged in two rows of five. But if I set flex equal to 1, the ten boxes are compressed and lined up. Then you only need to set the flex of each box to 20% to achieve the line break effect.
rem adaptation layout
rem: A unit. Similar to em, em is the font size of the parent element.
The difference is that rem's benchmark is based on htmlfont size. For example, the root element (html) sets font-sie to 12px, and the non-root element sets width: 2rem, then converted to px is 24px.
Advantages: overall control, change the element size of the page according to modifying the text size in the html.
media query
Use @media queries,Different styles can be defined for different media types；
@media mediatype and|not|only (media feature){}
@media：以media开头
mediatype：媒体类型，all（所有设备）、print（打印机或者打印预览）、screen（电脑屏幕）
and not only：关键字，and（一个或多个媒体特性连在一起）、not（排除某个媒体类型）、only（指定某个特殊的媒体类型）
media feature：媒体特性，必须有小括号包含，width（区域宽度）、min-width（最小宽度）、max-width（最大宽度）。
Media queries can also dynamically import resources:
<!-- 当我们屏幕大于等于640以上，div一行显示两个，当屏幕小于640，让div一行显示一个 -->
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
less
Disadvantages of css: non-programming language, there are no concepts such as variables, functions, and SCOPE (scope).
Less is a CSS extension language and also a CSS preprocessor.
Common CSS preprocessors: Sass, Less, Stylus.
grammar:
@变量名：值；
Less compilation: You can compile and generate css files according to the less files, so that html can be used. Plugin required: Easy Less.
Less nesting: It should be noted that the pseudo-class selector, &:hover;
Less operation: +, -, *, /.
Some rules related to operation:
1.运算符左右两侧必须敲一个空格隔开；
2.两个数参与运算，如果只有一个数有单位，则最后的结果以这个单位为准；
3.