阅读目录
摘要
- 盒子模型
- 浮动
- 清除
- 溢出
- 定位
- 模态框
- rgba 与 opacity透明区别
一、CCS盒子模型
- margin:标签与标签之间的距离,主要用于控制标签周围间的间隔,从视觉上达到相互分开的目的。
- padding:标签内内容与标签边框之间的距离。
- border:边框的意思,每个标签都会有一个区域,这个区域边缘就是标签的边框。
- content:盒子的内容,也就是每个标签的内容,显示文本和图像。
- 具体使用过程:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
</head>
<style>
body {
margin: 0;
}
.c1 {
border: black 1px solid;
width: 100px;
height: 100px;
margin-left: 50px;
margin-top: 25px;
background-color: tomato;
}
.c2 {
border: black 1px solid;
width: 100px;
height: 100px;
margin-top: 25px;
margin-left: 50px;
background-color: blue;
}
.c3 {
border: black 1px solid;
width: 50px;
height: 50px;
margin-left: 20px;
margin-top: 20px;
background-color: greenyellow;
}
</style>
<body>
<div class="c1">
<div class="c3"></div>
</div>
<div class="c2"></div>
</body>
</html>
标签与标签之间的margin是相对的,它的上下左右有时候只能有2处可以确定,另外2边由于没有参照不会有间隔,所以使用时候一般不会全部上下左右都写上。要表示那一边就写上那一边。
- padding;使用方法与margin相同,相比margin有些不同:
div {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
}
可以简写:padding: 10px 20px 30px 40px
顺序:上右下左
padding的常用简写方式有:
提供一个,用于四边;
提供两个,第一个用于上-下,第二个用于左-右;
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下;
提供四个参数值,将按上-右-下-左的顺序作用于四边;
需要注意:有一些标签自带一个或者多个属性对应值,比如p标签在创建的时候就初始自带margin-top:16px和margin-bottom:16px,ul标签自带margin-left:40px
二、浮动(只要涉及到页面布局,都会用到浮动):
- 顾名思义,就是让标签浮动起来,任何标签都能浮动,浮动后的标签会变成一个块级框。
- 浮动规律:
1:浮动框可以向左向右移动,知道它的外边缘碰到包含框或另一个浮动的边框为止。
2:浮动框不在文档流中,所以它已经脱离文档流,也就是说,浮动下面的文档流式无视浮动框的位置的。 - 浮动的三种方式:
float: left; /*以左边缘为参考浮动*/
float: right; /*以右边缘为参考浮动*/
float: none; /*默认值,不浮动*/
--------------------------------------------------------------------
注:如果你对python感兴趣,我这有个学习Python基地,里面有很多学习资料,感兴趣的+Q群:895817687
--------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.c1 {
width: 80px;
height: 300px;
background-color: red;
float: left;
}
.c2 {
width: 80px;
height: 300px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
浮动的时候,如果是2个div占用一行,可以将宽度width用百分比的形式设置,填充一整行。
<style>
.c1 {
width: 20%;
height: 300px;
background-color: red;
float: left;
}
.c2 {
width: 80%;
height: 300px;
background-color: blue;
float: left;
}
</style>
三、清除 clear属性规定标签的那一侧不允许其他浮动标签
-
注意:clear属性只会对自身起作用,不会影响其他标签。
-
清除浮动:浮动虽然好用,但是也有缺点(会导致父标签塌陷问题,可以用清除属性来解决)
-
清除浮动副作用的三种方法:
1:固定高度
2:伪元素清除(使用较多)
3:overflow : hidden -
伪元素清除法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>影响</title>
</head>
<style>
body {
margin: 0;
}
.clearfix:after {
content: '';
clear: both;
display: block;
}
.c1 {
border: 4px black solid;
}
.c2 {
width: 100px;
height: 100px;
float: left;
background-color: aquamarine;
}
.c3 {
width: 100px;
height: 100px;
float: left;
background-color: green;
}
.c4 {
background-color: red