First, the box model
Box model
margin: used to adjust (the distance between the tag and the tag) the distance between the box and the box
border: thickness of the packaging box (frame)
padding: the distance (the distance between the text and the frame) between the inner box and the object
content : size of the object (the text)
①margin margins
.c {
margin-Top : 10px ;
margin-right : 20px ;
margin-bottom : 30px ;
margin-left : 40px ;
}
shorthand:
.c { margin : 10px 20px 30px 40px ; } order: right lower left
.c { margin : 10px 20px ;} 10: bottom, 20: left
common center:
.c { margin : 0 Auto ;}
②padding the packed
.c {
padding-Top : 5px ;
padding-right : 10px ;
padding-bottom : 15px ;
padding-left : 20px ;
}
shorthand:
.c { padding : 5px 10px 15px 20px ;} order: right lower left
Additional useful shorthand way of padding:
a, for the four sides;
providing two, one for the first - next, the second for left - right;
if provided three, for the first, second for left - right, for the third;
providing four parameter values will be on - Right - lower - left order to act on the four sides;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
.c1 {
width: 100px;
height: 100px;
border: 3px solid black;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
.c2 {
width: 20px;
height: 20px;
border: 3px solid green;
margin: 10px 20px 30px 40px;
}
.c3 {
width: 200px;
height: 200px;
border: 3px solid yellow;
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2">div</div>
<div class="c3">div</div>
</body>
</html>
Second, floating
1, floating
Float:
in CSS, any element can float.
As long as the page layout will be used in a floating
two features on float: the
floating box to the left or right until its outer edge across the border include box or another floating box so far.
Since the general flow of the document is not in the floating box, so the ordinary flow of documents in the block box behave like a floating box does not exist.
Are three values
left: left-floating
right: Floating right
none: default value, do not float
following case floating a left, a right float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {margin: 0;}
.c1 {
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
float: left;
}
.c2 {
width: 50px;
height: 50px;
background-color: green;
display: inline-block;
float: right;
}
</style>
</head>
<body>
<div>
<div class="c1"></div>
<div class="c2"></div>
</div>
</body>
</html>
2, floating page layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {margin: 0;}
.c1 {
width: 20%;
height: 500px;
background-color: red;
float: left;
}
.c2 {
width: 80%;
height: 500px;
background-color: green;
float: right;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
3, floating impact and solutions
Effect brought by the floating ①:
from the document flow, resulting in collapse of the parent tag
②clear: specify which element prevents the other side of the floating elements
left floating element on the left side is not allowed
right not allowed to float on the right
both sides were about not allowed to float
.c4 { Clear : left ;}
predetermined left of the label can not be floating element
③ address the effects of floating bring: pseudo-element clearance method clearfix: after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c3 {border: 3px solid black;}
.c1 {
width: 50px;
height: 50px;
background-color: red;
float: left;
}
.c2 {
width: 50px;
height: 50px;
background-color: green;
float: left;
}
/*伪元素清除法*/
.clearfix:after {
content: '';
clear: both;
display: block;
}
</style>
</head>
<body>
<div class="c3 clearfix">
<div class="c1"></div>
<div class="c2"></div>
</div>
</body>
</html>
influences:
clearfix: after Clear
Third, the overflow
overflow overflow attributes:
hidden content will be trimmed, and the remaining content is not visible.
scroll content will be trimmed, but the browser will display the scroll bar to view the rest of the content.
If the content is auto trim, the browser will display the scroll bar to view the rest of the content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 50px;
height: 50px;
border: 3px solid red;
overflow: scroll;
}
</style>
</head>
<body>
<div>abcdefghijklmnopqrstuvwxyz</div>
</body>
</html>
Fourth, round head
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {background-color: yellow;}
.c1 {
width: 100px;
height: 100px;
border: 5px solid white;
border-radius: 50%; /*圆形*/
overflow: hidden; * /Extra hidden/ *
}
img {width: 100%} /*100%填充*/
</style>
</head>
<body>
<div class="c1">
<img src="1.png" alt="">
</div>
</body>
</html>
Fifth, positioning
position: Positioning
static: no positioning, default value
relative relative positioning: relative to the label itself to its original position
absolute absolute positioning: relative to the already positioned over the parent label (millet cart)
Fixed Fixed positioning: relative to the browser window is fixed at a a position (back to top)
whether from the document flow:
from the document flow:
floating
absolute positioning
fixed positioning
without departing from the document flow:
relative positioning
1, the relative positioning of
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {margin: 0;}
.c1 {
width: 100px;
height: 100px;
background-color: red;
top: 100px;
left: 100px;
position: relative;} # Positioned opposite
.c2 {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
2, absolute positioning
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 100px;
height: 50px;
background-color: red;
position: relative;
}
.c2 {
width: 400px;
height: 200px;
background-color: yellow;
position: absolute;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<div class="c1">购物车
<div class="c2">空的</div>
</div>
</body>
</html>
3, fixed positioning
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 80px;
height: 80px;
border: 3px solid red;
position: fixed;
right: 20px;
bottom: 20px;
}
.c2 {height: 1000px;}
Kc3{
width: 80px;
height: 80px;
background-color: black;
}
.c4 {
width: 80px;
height: 80px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="c3"></div>
<div class="c1">固定不动</div>
<div class="c4"></div>
<div class="c2"></div>
</body>
</html>
六、模态框
z-index:
设置对象的层叠顺序
z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index
不管相对定位，绝对定位，固定定位，都可以使用z-index
浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0
如果大家都没有z-index值，或者z-index值一样，
那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c2 {
background-color: rgba(128,128,128,0.4);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
}
.c3 {
width: 200px;
height: 50px;
background-color: white;
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
margin-top: -25px; /*在整个框居中，为top的一半*/
margin-left: -100px; /*在整个框居中，为left的一半*/
}
</style>
</head>
<body>
<div class="c1">科技科技科技兴国</div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
七、透明度参数区别
rgba(128,128,128,0.3)
针对背景颜色的透明度
opacity:0.3
针对文本的透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 200px;
height: 50px;
background-color: rgba(128,128,128,0.3);
}
.c2 {opacity: 0.3;}
</style>
</head>
<body>
<div class="c1">abcdefg</div>
<div class="c2">ABCDEFG</div>
</body>
</html>
