Table of contents
1. The three major features of CSS—priority
2. Weight superposition calculation
1. Introduction to the box model
3.1 border - a single attribute
3.2 border (border) - continuous writing attribute
4.2 Padding - set value in one direction
4.3 Calculation method of box size
4.4 The method of automatic internal reduction of the box model
5.2 Margin - set value in one direction
5.3 Application of single direction setting of margin
5.4 Clear the default inner and outer margins
5.5.1 Margin folding phenomenon – ① Merge phenomenon
5.5.2 Margin folding phenomenon – ② Collapse phenomenon
5.5.3 Invalid margin and padding of inline elements
1. The three major features of CSS—priority
1. Introduction of priorities
➢ Feature: Different selectors have different priorities, the selector style with high priority will override the selector style with low priority
➢ Priority formula: • Inheritance< wildcard selector< tag selector< class selector< id selector< inline style< !important ➢
important point:
1. !important is written after the attribute value and before the semicolon!
2. !important cannot increase the priority of inheritance, as long as the priority of inheritance is the lowest!
3. It is not recommended to use !important in actual development.
<!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>
/* 优先级:继承<通配符<标签<class<id<行内样式<!important */
body{
color: red;
}
div{
color: green!important;
}
.box{
color: blue;
}
#box{
color: orange;
}
/* !important,可以将样式提升到最高优先级,就是不要用在继承属性上 */
</style>
</head>
<body>
<div class="box" id="box" style="color: pink;">优先级测试</div>
</body>
</html>2. Weight superposition calculation
➢ Scene:
If it is a compound selector , it is necessary to use the weight superposition calculation method to determine which selector has the highest priority and will take effect
➢ Weight superposition calculation formula: (There is no carry between each level)
➢ Comparison rules:
1. First compare the first-level numbers, if the comparison comes out, ignore all subsequent numbers
2. If the first-level numbers are the same, then compare the second-level numbers at this time. If the comparison is found, all subsequent numbers will be ignored
3. If all the numbers are the same in the end, indicating the same priority, then compare the cascade (whoever writes below has the final say!)
➢ Points to note: If !important is not inherited, it has the highest weight, number one in the world!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* #one {
color: red;
}
.son {
color: blue;
}
p {
color: green;
} */
/* (行内, id, 类, 标签) */
/* (0, 1, 0, 1) */
div #one {
color: orange;
}
/* (0, 0, 2, 0) */
.father .son {
color: skyblue;
}
/* 0, 0, 1, 1 */
.father p {
color: purple;
}
/* 0, 0, 0, 2 */
div p {
color: pink;
}
</style>
</head>
<body>
<div class="father">
<p class="son" id="one">我是一个标签</p>
</div>
</body>
</html>Key points for weight calculation:
1. First judge whether the selector can directly select the label , if not directly select → is inheritance, the lowest priority → pass directly
2. Use the weight calculation formula to determine who has the highest weight
➢ Notes:
• 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 make things difficult for yourself
Extension: Chrome Error Process
2. Box model
1. Introduction to the box model
1. The concept of the box
(1) Each label in the page can be regarded as a "box", and it is more convenient to layout through the perspective of the box
(2) 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.
2. Box model ➢ CSS stipulates that each box is composed of: content area (content), inner margin area (padding), border area (border), and outer margin area (margin) . This is the box model
3. Memory: can associate with the packing box in reality
The computer is the content, the bubble is the border
2. Content width and height
➢ Role: Use the width and height attributes to set the default setting to the size of the box content area
➢ Attribute: width / height ➢ Common value: number+px
3.1 border - a single attribute
Function: set the border thickness, border style, border color effect
Single property:
| effect | attribute name | attribute value |
| border thickness | border-width | number+px |
| border style | border-style | Realize solid, dotted line dashed, dotted line dotted |
| border color | border-color | color value |
3.2 border (border) - continuous writing attribute
➢ Attribute name: border
➢ Attribute value: a continuous writing of a single value, separated by spaces
• For example: border : 10px solid red; ➢ Shortcut key: bd + tab
In most cases, the border attribute is written consecutively.
Shortcut key: bd+tab
Only set a border for a certain direction of the box
border - positional noun
<!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: 300px;
height: 300px;
background-color: pink;
/* 实线 solid */
/* border: 1px solid #000; */
/* 虚线dushed */
/* border: 1px dashed #000; */
/* 点线 dotted */
/* border: 1px dotted #000; */
/* 只要某一个方向的线：border_方向 */
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div>内容</div>
</body>
</html>summary
➢ Set a 20-pixel, solid line, and blue border around the box. How should the properties be set?
• border：20px solid blue；
➢ Set the box with a top border of 10 pixels, a dotted line, and a yellow border. How should the properties be set?
• border-top：10px dashed yellow；
4.1 Padding - value
➢ Function: set the distance between the border and the content area
➢ Attribute name: padding
➢ Common values:
| value | example | meaning |
| a value | padding：10px | Set the top, right, bottom, and left to 10px |
| two values | padding：10px 20px | The top and bottom are set to 10px, and the left and right are set to 20px |
| three values | padding：10px 20px 30px | 10px above, 20px left and right, 30px below |
| four values | padding：10px 20px 30px 40px | Up 10, right 20, down 30, left 40 ( when there are four attributes, the order is up right down left, clockwise ) |
Memory rule: start assigning values from the top, then assign values clockwise, if you set the assigned value, look at the opposite side! !
<!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: 300px;
height: 300px;
background-color: pink;
/* 设置四个方向的内边距 */
padding: 50px;
/* pdding属性可以当做复合属性使用 分别表示各个方向的内边距属性 padding最多取四个值 */
/* padding:四个值, 上 右 下 左 */
padding: 10px 20px 30px 40px;
/* padding:三个值 上 左右 下 */
padding: 10px 20px 30px;
/* 俩值 上下 左右 */
padding: 10px 20px;
/* 方向规则 顺时针旋转 遇到没有值的跟对面一样 */
}
</style>
</head>
<body>
<div>
文字
</div>
</body>
</html>4.2 Padding - set value in one direction
➢ Scene: only set the inner margin for a certain direction of the box
➢ Attribute name: padding - orientation noun
➢ Attribute value: number + px
4.3 Calculation method of box size
➢ Requirements:
The size of the box is 300*300, the background is pink, the border is 10px solid black, and the inner margin is 20px up, down, left, and right. How to complete it?
• important point:
① Set width and height to be the width and height of the content!
② Setting the border will support the big box
③ Setting padding will support the big box
➢ The ultimate calculation formula for the actual size of the box:
• Box width = left border + left padding + content width + right padding + right border (border)
• Box height = top border + top padding + content width + bottom padding + bottom border (border)
➢ Solution: How to meet the demand when the box is expanded by border and padding?
• Calculate the excess size yourself and manually subtract it from the content (manual inner subtraction)
4.4 The method of automatic internal reduction of the box model
That is to say, no matter how padding and border are set, the box size is always the width and height attributes you set
➢ Requirements: The size of the box is 300*300, the background is pink, the border is 10px solid black, and the inner margins are 20px up, down, left, and right. How to complete it?
• When setting border or padding to the box, the box will be stretched, if you don't want the box to be stretched?
➢ Solution
① : Manual internal subtraction • Operation: Calculate the excess size by yourself, and manually subtract it from the content
• Disadvantage: The amount of calculation in the project is too large, which is very troublesome ➢ Solution
② : Automatic internal reduction Operation: Set the property box-sizing : border-box for the box; that’s it (equivalent to a CSS3 box model)
• Pros: The browser automatically calculates the excess size and subtracts it from the content
<!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: 100px;
height: 100px;
background-color: pink;
border: 10px solid #000;
padding: 20px;
/* 变成CSS3的盒子模型，好处：加了border和padding属性依然保留原理大小，不需要再手动加减 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
文字
</div>
</body>
</html>5.1 Margin - value
➢ Function: set the distance between the box and the box outside the frame
➢ Attribute name: margin
➢ Common values: same as padding, top right bottom left, clockwise
Memory rule: start assigning values from the top, then assign values clockwise, if you set the assigned value, look at the opposite side! !
5.2 Margin - set value in one direction
➢ Scene: only set the outer margin separately for a certain direction of the box
➢ Attribute name: margin - position noun
➢ Attribute value: number + px
5.3 Application of single direction setting of margin
5.4 Clear the default inner and outer margins
➢ Scene:
The browser will set the default margin and padding for some tags by default, but generally you need to clear the default margin and padding of these tags before the project starts, and then set it yourself
• For example: the body tag has margin by default: 8px
• For example: p tag has upper and lower margin by default • For example: ul tag has upper and lower margin and padding-left by default • ...
➢ Solution:
<!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>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div>
<p>ppp</p>
<p>ppp</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>5.5 Margin issues
5.5.1 Margin folding phenomenon – ① Merge phenomenon
➢ Scene:
For block-level elements in a vertical layout , the upper and lower margins will be merged ➢ Result: the final distance between the two is the maximum value of the margin
In layman's terms, two vertical block-level elements, one with margin-bottom and one with margin-top, each with 50,
The distance between the two boxes is not 100px, but 50, this is the problem of merging
➢ Solution:
Just avoid it • Just set margin for one of the boxes
Note: The value of the middle size depends on which box has a larger margin setting.
<!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: 100px;
height: 100px;
background-color: pink;
}
.one{
margin-bottom: 60px;
}
.two{
margin-top: 50px;
}
</style>
</head>
<body>
<!-- 垂直布局的块级元素,上下的margin会进行合并，且谁的margin的之大，外边距显示该值-->
<div class="one">
111
</div>
<div class="two">222</div>
</body>
</html>5.5.2 Margin folding phenomenon – ② Collapse phenomenon
➢ Scenario: nested block-level elements, the margin-top of the child element will act on the parent element
➢ Result: cause the parent element to move down together
➢ Solution:
1. Set border-top or padding-top for the parent element (margin-top separating parent and child elements)
2. Set overflow to the parent element: hidden
3. Convert to an inline-block element
4. Set float
<!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>
.father{
width: 300px;
height: 300px;
background-color: pink;
}
.son{
width: 100px;
height: 100px;
background-color: gray;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
</body>
</html>5.5.3 Invalid margin and padding of inline elements
➢ Scenario: When setting margin and padding for inline elements
➢ Result: 1. Valid in the horizontal margin and padding layout! 2. It is invalid in the vertical margin and padding layout! (because it is an inline element)
If you want to change the vertical position of the label in the row, just set the row height
<!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>
span{
margin: 100px;
/* 若想改变行内标签垂直方向的位置 设置行高line-height即可 */
line-height: 100px;
}
</style>
</head>
<body>
<!-- 行内元素 如果想要通过margin和padding改变标签位置，垂直方向的位置无法生效 -->
<!-- 即 margin-top和bottom不生效 padding-top和bottom不生效 -->
<span>span</span>
</body>
</html>