Application of adaptive width
1. Attribute: width
2. Attribute value: px/%
3. Characteristics of adaptive width
- HTML, BODY means browser, the default is a block-level element, and the width is 100%
- when the block-level element is not set When the width is set to 100%, the width will fill the full screen (banner effect)
- The child is a block-level element, and when the width is not set, it will be equal to the width of the parent
- Width is not inherited, it is just a layout specification for block-level elements That's all
- [Important] When a block-level element is out of the document flow, the width is determined by the content => set the floating and positioning box must remember to increase the width and height! ! !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100%;
height: 62px;
background: #232323;
}
p{
height: 30px;
background: pink;
float: left;
}
</style>
</head>
<body>
<div>
<p>logo</p>
</div>
</body>
</html>Renderings:
Highly adaptive application
1. Attribute: height
2. Attribute value: px/%
3. Highly adaptive features
- the default height of the browser is 0, html, body{height:100%}
- set the element height to 0, The height of the box will not be displayed, adding text will exceed the scope of the container and will not expand the box
- Set the height of the element to auto or when it is not written, it can be adaptive (height adaptive)
- A common situation where the height is set to 100
- html, body{height:100%} The browser's default width and height are set to 100% full screen
- img{width:100%;height:100%} The percentage is a relative unit, calculated relative to the parent element
4. Requirements : There are three boxes
- the first box has a width of 100% and a height of 100px
- the second box
- maintains a minimum height when there is no content in the box
- when there is more content in the box, the height of the box can be expanded to accommodate
- The width of the third box is 100%, and the height is 100px
5. The concept of the minimum height: min-height
- The first function: height: value can have a fixed height
- The second function: height: auto can do the same adaptive
6. The compatibility problem of the minimum height (browser history)
- the first browser Netscape (Netscape Navigator NN)
- the second browser war IE9 (and later)
- the minimum height cannot be used in lower versions
- Solve the low version attribute parsing: _ attribute: The attribute value indicates that it can only be parsed in the low version
- height has two functions in the low version browser and the effect of the minimum height is the same
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 300px;
/* height: 0; */
background: pink
}
</style>
</head>
<body>
<div>
文本 <br>
文本
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;padding: 0;
}
.box1{
height: 100px;
background: pink
}
.box3{
height: 100px;
background: skyblue
}
.box2{
min-height: 300px;/* 高版本 */
_height: 300px; /* 低版本 */
background: yellowgreen
}
/* 公司的新闻列表 */
</style>
</head>
<body>
<div class="box1">第一个盒子</div>
<div class="box2">
<p>000000001</p>
<p>000000002</p>
<p>000000003</p>
<p>000000004</p>
<p>000000005</p>
<p>000000006</p>
<p>000000007</p>
<p>000000008</p>
<p>000000009</p>
<p>000000010</p>
<p>000000011</p>
<p>000000012</p>
<p>000000013</p>
<p>000000014</p>
<p>000000015</p>
<p>000000016</p>
<p>000000017</p>
<p>000000018</p>
</div>
<div class="box3">第三个盒子</div>
</body>
</html>
The extension of the maximum and minimum values
Maximum value
- maximum width max-width:1920px Constrains the user's screen adaptation Maximum value
- maximum height max-height Judging that the page turning function can be realized when the user's comments reach a certain height
Minimum value
- minimum width min-width The constraint box will not Drop down
- minimum height min-height adaptive
focus: minimum width and maximum width (responsive layout - media query)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../../03-reset.css">
<style>
#header{
height: 100px;
background: pink;
/* 最小宽度 屏幕变化的时候最小值是? */
min-width: 800px
}
.box1{
width: 300px;
height: 100px;
background: green;
float: left;
}
.box2{
width: 500px;
height: 100px;
background: blue;
float: right;
}
</style>
</head>
<body>
<div id="header">
<div class="box1">logo</div>
<div class="box2">导航</div>
</div>
</body>
</html>
Height collapse/height collapse
1. Cause: The parent does not set the height, and the child element is out of the document flow
2. Solutions (more than 10 kinds)
1. Solution: Add overflow:hidden to the parent element
- Principle: Set overflow :hidden triggers BFC, there is a layout rule in BFC: floating elements will also participate in height calculation
2. Solution: add any label (div) below the last child element and set the style clear:both
- Explanation: clear clears floating left/ right/both
- Principle: Clear all floats reserved above - Advantages and disadvantages : Advantages are more
convenient, disadvantages add useless labels, code
redundancy fix::after{ content:''; display:block; width:100%; height:0; clear:both; overflow:hidden; visibility:hidden ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../../03-reset.css">
<style>
.box{
width: 1000px;
/* height: 500px; */
border: 10px solid #000;
margin: 100px auto;
}
.box1{
width: 300px;
height: 300px;
background: skyblue;
float: left;
margin: 10px
}
.box2{
width: 300px;
height: 300px;
background: yellowgreen;
float: left;
margin: 10px
}
.box3{
width: 300px;
height: 300px;
background: purple;
float: left;
margin: 10px
}
/* 不成文的规定 */
/* .clear-fix{
clear: both
} */
/* .clear-fix::after{
content:'';
display:block;
width:100%;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
} */
</style>
</head>
<body>
<div class="box clear-fix"><!-- BFC区域 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
Universal Purge Explained
1: Pseudo-object selector/pseudo-element selector (pseudo-class selector for distinction)
1. Selector::after{content:''} means to add content after xx, it must be used together with content, and it is not required to write Any content
2. The selector::before{content:''} means to add content before xx, it must be used together with content, and you don't need to write any content
Two: Several usages of hiding
1.display:none deletes the display and structure of elements
2.visibility:hidden deletes the display mode but the position still exists
Three: What is the difference between pseudo-objects and pseudo-classes?
1. The difference in writing: In css2, pseudo-classes and pseudo-objects are both a colon, and in css3, two colons are required to distinguish the prescribed pseudo-objects
2. In terms of function Difference: Pseudo-class change is the state of the element, pseudo-object can not only change the state of the element but also add structure (virtual)
