◆ Be able to recognize the priority formula of
different selectors Form ◆ Be able to calculate the actual size of the box ◆ Be able to understand the phenomenon of margin collapse and know how to solve the box collapse problem
1. Three characteristics of CSS
Goal: To be able to recognize the priority formulas of different selectors, to be able to calculate CSS weights and to analyze and resolve CSS conflicts.
Learning Path:
- inheritance
- cascading
- priority
3.1 Introduction to Priority
➢ Features: Different selectors have different priorities, and the selector style with higher priority will override the style of the lower priority selector.
➢ Priority formula:
• Inherit < wildcard selector < tag selector < class selector < id selector < Inline style < !important
➢ Note:
- !important is written after the attribute value and before the semicolon!
- !important cannot increase the priority of inheritance, as long as the inheritance has the lowest priority!
- It is not recommended to use !important in actual development.
It is not recommended to use !important in actual development.
!important cannot improve the priority of inheritance. As long as the priority of inheritance is the lowest,
!important cannot improve the priority of inheritance. As long as the priority of inheritance is the lowest, inheritance<wildcard<tag<class<id< Inline <!important
inheritance<wildcard<tag<class<id<inline style<!important
summary
➢ What is the priority comparison formula?
• Inherit < wildcard selector < tag selector < class selector < id selector < inline style < !important
➢ Can !important increase the priority of inheritance?
• No
! important cannot promote the priority of
inheritance inheritance<wildcard<tag<class<id<inline style<!important
! important cannot elevate the priority of inheritance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
color: orange;
}
.box {
color: blue;
}
div {
color: green !important;
}
body {
color: red;
}
/* !important不要给继承的添加, 自己有样式无法继承父级样式 */
</style>
</head>
<body>
<!-- 意义: 当一个标签使用了多个选择器, 样式冲突的时候, 到底谁生效 -->
<div class="box" id="box" style="color: pink;">测试优先级</div>
</body>
</html>
! important Don't add to inheritance, you can't inherit the parent's style if you have a style. When a tag uses multiple selectors, the style conflicts.
3.2 Weighted overlay calculation
➢ Scenario: If it is a composite selector, at this time, it is necessary to use the weight overlapping calculation method to determine which selector with the highest priority will take effect
. ➢ Weight overlapping calculation formula: (there is no carry between each level) In
-line, id selector, class selector, tag selector
inline, id selector, class selector, tag selector
➢ Comparison rules:
- First compare the first-level numbers, if the comparison comes out, all the subsequent ones are ignored.
- If the first-level numbers are the same, compare the second-level numbers at this time. If they are compared, the subsequent ones will not be seen.
- ……
- If all the numbers are the same in the end, it means that the priority is the same, and it is more cascading (whoever writes it below, who has the final say!) ➢ Note: If !important is not inherited, it has the highest weight and the first in the world!
Inline, id, label, class
Inline, id label, class
If all numbers are the same in the end, indicating the same priority, then it is more cascading (whoever writes it below has the final say)
➢ Note: If !important is not inherited, then The highest weight, the first in the world!
! important If it is not considered as inheritance, it has the highest weight and the first in the world
3.3 Summary
➢ What is the formula for compound selector weight overlay calculation?
(Extended) Weighted Superposition Calculation Case
➢ Steps to solve the weight calculation problem:
- First judge whether the selector can directly select the label, if not directly select → it is inheritance, the priority is the lowest → pass directly
- Determine who has the highest weight through the weight calculation formula
➢ Note:
• In actual development, the selection of tags needs to be precise, try to avoid the situation where multiple selectors select a tag at the same time, don't be hard on yourself
First determine whether the selector can directly select the label. If it cannot be directly selected, it is inheritance, and the priority is the lowest. Pass directly
through the weight calculation formula to determine who has the highest weight.
(Extended) Error-checking process (if the style can't come out, learn to find errors through debugging tools)
Find the corresponding element in elements
and whether there is a selector set by yourself in styles. If not, the selector is usually written wrong. If the selector is there, but the style does not come out, strikethrough, the style is commented, covered, and small triangle: There is no semicolon after the attribute value, Chinese punctuation appears, the attribute name or attribute value word is misspelled
Second, the basic use of PxCook
Goal: To be able to use the PxCook tool to measure the size and color of the design drawing, to be able to obtain data directly from the psd file, and to obtain the data directly from the psd file
Learning
path:
- Open blueprint
- Common shortcut keys
- Get data directly from psd file
1. Basic use of PxCook
- Open the design drawing through the software
① Open the software ② Drag and drop into the design drawing ③ Create a new project - Common shortcut keys
- Enlarge the design: ctrl + +
- Zoom out of the design: ctrl + -
- Mobile design: press and hold the space, drag the mouse
- Common tool
- size
- suck color
- Get data directly from psd file
- Switch to the development interface and click to get data directly
3. Box model
Goal: Be able to understand the composition of the box model, and be able to master the setting method of the box model border, padding, and margin.
Learning path:
- Introduction to the Box Model
- The width and height of the content area
- border ( border )
- padding
- Margin (margin)
1.1 Introduction to the Box Model
- box concept
- Each label on the page can be regarded as a "box", which is more convenient for layout through the perspective of the box
- When the browser renders (displays) a web page, it regards the elements in the web page as rectangular areas, which we also call boxes vividly.
- Box Model
➢ CSS stipulates that each box is composed of: content area, padding area, border area, and margin area
. This is the box model. - Memory: can associate with the box in reality
Each label on the page can be regarded as a box, which is more convenient to layout through the box perspective, the content area content padding area, the border area border area margin area margin
1.2 Summary
➢ How many parts does the box model consist of? What are they?
- Content area: content
- Border area: border
- Padding area: padding
- Margin area: margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
width:200px;
height:200px;
background-color:pinik;
2.1 Width and height of content
➢ Function: The default setting of the width and height properties is the size of the content area of the box
➢ Properties: width / height
➢ Common values: number+px
width/height: number+ppx;
the default setting of the width and height properties is the content area of the box size
2.2 Summary
➢ What properties can be used to set the size of the content area of the box model?
- width: width
- height: height
Set the box model content area size by width and height width,height
3.1 border - a single property
Function: Set the border thickness, border style, border color effect
➢ Single attribute:
solid, realized, dashed dotted line, dotted dotted line
3.2 Border - Consecutive Form
10px solid red;10px solid red;
Property name: border
➢ Property value: Consecutive writing of a single value, separated by spaces
• For example: border : 10px solid red;
➢ Shortcut key: bd + tab
10px solid red; 10px slod red; 10px solid red;
3.3 Border - one-way setting
➢ Scenario: only set a border for a certain direction of the box
➢ Attribute name: border - noun of orientation
➢ Attribute value: the value of continuous writing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* border: 粗细 线条样式 颜色 -- 不分先后顺序 */
/* solid : 实线 */
/* border: 1px solid #000; */
/* dashed: 虚线 */
/* border: 5px dashed #000; */
/* dotted : 点线 */
/* border: 5px dotted #000; */
border-left: 5px dotted #000;
border-right: 5px dotted #000;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<div>内容</div>
</body>
</html>
border: thickness, line style, color, thickness, first adjust style, color;
border: support larger box size border support larger box size, box size = width/height++ border line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/* border 撑大盒子尺寸 */
/* 盒子尺寸 = width / height + 边框线 */
/* 如果400 * 400 尺寸 */
width: 380px;
height: 380px;
background-color: green;
border: 10px solid #000;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html>
summary
➢ Set a 20 pixel, solid line, blue border around the box. How should the properties be set?
• border: 20px solid blue; ➢ Set a top border of 10px, a dotted line, and a yellow border for the box. How should the properties be set?
• border-top: 10px dashed yellow;
20px solud blue;
10px dashed yellow;
3.4 The primary calculation formula of the actual size of the box
➢ Requirements: The box size is 400*400, the background is green, and the border is 10px solid line black. How to do it?
• Note: ① Setting width and height is the width and height of the content! ② Setting the border will make the box bigger!
➢ The primary calculation formula of the actual size of the box:
• Box width = left border + content width + right border
• Box height = upper border + content height + lower border
➢ Solution: How to meet the requirements when the box is enlarged by the border?
• Solution: Calculate the extra size, manually subtract from the content (manual subtraction) and
set the border will make the box bigger
(Case) Small case for box border
➢ Requirements: According to the design drawing, measure the data through PxCook, and complete the consistent effect in the webpage through the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 280px;
height: 280px;
background-color: #ffc0cb;
border: 10px solid #00f;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
(Case) Sina Navigation Case
➢ Requirement: According to the design drawing, measure the data through PxCook, and complete the consistent effect in the webpage through the code
➢ Layout order:
- From outside to inside, from top to bottom
➢ The style of each box: - Width Height
- Auxiliary background color
- Parts of the box model: border, padding, margin
- Other styles: color, font-, text-, ...
Width and height, auxiliary background color, part of the box model border, padding, margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
/* 后代: box里面的a */
.box a {
width: 80px;
height: 40px;
/* 推荐先加上: 清楚的看到文字在什么位置 */
/* background-color: #edeef0; */
display: inline-block;
text-align: center;
line-height: 40px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.box a:hover {
background-color: #edeef0;
color: #ff8400;
}
</style>
<!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
</head>
<body>
<div class="box">
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
</div>
<p>
<a href="#"></a>
</p>
</body>
</html>
4.1 padding - value
➢ Function: Set the distance between the border and the content area
➢ Attribute name: padding
➢ Common values:
10px on the top, 20px on the left and right, 30px on the bottom;
➢ Memory rule: start the assignment from the top, and then assign the value clockwise. , look on the opposite side! !