1 html
2 CSS
举个例子说明一下 为啥叫层叠样式 ?
组合层叠式的设计
<html>
<head>
<title>复习</title>
<meta charset="utf-8">
<style type="text/css">
.dy_1 {
color: red;
}
.dy_2 {
font-size: 33px;
}
.dy_3 {
width: 100px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<h1 class="dy_1 dy_2">皮皮虾</h1>
<div class="dy_1 dy_2">随便大一些</div>
<div class="dy_1 dy_2 dy_3">大大大</div>
</body>
</html>
3
盒模型
举个例子说明一下这个问题
<html>
<head>
<title>复习</title>
<meta charset="utf-8">
<style type="text/css">
.px {
width: 200px;
height: 300px;
background-color: #ddd;
border: 1px solid red;
background-image: url('');
background-repeat: no-repeat;
background-position: 10px 20px;
padding: 40px;
margin: 50px;
}
</style>
</head>
<body>
<div class="px">test</div>
<div class="px">test</div>
</body>
</html>
页面展示效果
4
浮动
我们举个浮动的例子说明一下这个问题
1)
float: none;
也就是不进行浮动 不操作,加不加没什么两样
<html>
<head>
<title>浮动</title>
<meta charset="utf-8">
<style type="text/css">
div {
width: 100px;
height: 30px;
background: red;
margin: 20px;
color: hotpink;
text-align: center;
float: none;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
</body>
</html>
展示一下页面效果
2)
左浮动 float: left;
float: left;
页面展示效果
3)
右浮动 float : right
float: right;
页面展示是这样的
4)
我们需要注意页面加载的顺序或者说文档流的顺序 从上往下
先执行 div 1 再执行 div 2
即使是在浮动的时候也是一样的
5)
如果 某一个元素浮动了 其他的元素会顶替它的位置 有点类似于排队和站队
5
浮动 再来一讲
1
第一个应用 文字环绕
<html>
<head>
<title>浮动</title>
<meta charset="utf-8">
<style type="text/css">
div {
width: 300px;
height: 300px;
background: #eee;
}
img {
width: 80%;
}
</style>
</head>
<body>
<div><img src="img/temp_2.png">大大大大方方反反复复,
如果 某一个元素浮动了 `其他的元素会顶替它的位置 有点类似于排队和站队`</div>
</body>
</html>
我们实现的效果是 文字围绕着 图片进行环绕了
2)
清除浮动
清除浮动 常用三个 clear : left / right / both ;
需要注意一个事情 要对应 使用的是左浮动 应该用clear : left 清除
可以对单一元素清除浮动
情况稍微变得复杂一点
我们举个例子说明一些这个情况
1
不加浮动是这样的
<html>
<head>
<title>浮动</title>
<meta charset="utf-8" />
<style type="text/css">
.wrap {
width: 400px;
background: gold;
}
.wrap img {
width: 80%;
margin: 20px;
}
/* .fl {
float: left;
} */
</style>
</head>
<body>
<div class="wrap">
<img class="fl" src="img/temp_2.png" />
</div>
</body>
</html>
页面效果
2
加了浮动之后 变成了这样
这样操作一下 使得重新可见
为什么呢?
简单来讲 清除浮动的操作,会使得 回到普通流,重新获取img的高度
确定了clear 的高度 也就 确定了wrap 的高度
3
利用伪类 清除浮动 :after
我们举例子说明一下这个问题
<html>
<head>
<title>浮动</title>
<meta charset="utf-8" />
<style type="text/css">
.wrap {
width: 400px;
background: gold;
}
.wrap img {
width: 80%;
margin: 20px;
}
.fl {
float: left;
}
.cle:after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="wrap cle">
<img class="fl" src="img/temp_2.png" />
</div>
</body>
</html>
这样就可以清除 浮动
再次总结一下 清除浮动的方法
1、clear:both /left /right
2、利用伪类 cle:after {content:""; display:block; clear:both;}
4
下一个事情
行级元素 加宽高没有效果 但是加了float: left/right 就可以
<html>
<head>
<title>浮动</title>
<meta charset="utf-8" />
<style type="text/css">
a {
width: 100px;
height: 200px;
color: black;
float: left;
background-color: cyan;
margin: 10px;
}
.hid_1 {
visibility: hidden;
}
.hid_2 {
display: none;
}
</style>
</head>
<body>
<a class="hid_1">111</a>
<a class="hid_2">222</a>
<a>333</a>
</body>
</html>