1
盒模型
3)
为了防止出现问题 我们在保存的时候 习惯需要注意一下
4)
顺便加一点 常见的行级元素和块级元素
行级
元素: span a i em sub sup
块级
元素: div ul p h1-h6 table
我们再复习一下 margin
常规情况 不能起中文名字
7)
html 加载顺序
2
定位
1)
2)
常规情况下
absolute 不保留原来的位置 在子容器使用
relative 保留原来的位置 在父容器使用
这样做了之后, 子容器 会以父容器的左上角为原点进行定位
这个地方显得异常的重要
3)
针对上面这个 我们举个例子说明一下这个问题
实现居中 且 随着窗口拖动 也一起变化
<html>
<head>
<title>浮动</title>
<meta charset="utf-8" />
<style type="text/css">
.wrap {
width: 600px;
height: 100px;
margin: 0 auto;
background: darkgrey;
position: relative;
}
.ad_1 {
width: 50px;
height: 40px;
background: darkorange;
position: absolute;
}
.ad_2 {
width: 50px;
height: 40px;
background: red;
position: absolute;
top: 0;
left: 550px
}
</style>
</head>
<body>
<div class="wrap">
<div class="ad_1">广告1</div>
<div class="ad_2">广告2</div>
</div>
</body>
</html>
实现的效果是这样的
4)
5)css加载顺序
1、行间就是直接把css 通过style 写在 标签上
<div style="background-color: royalblue;"></div>
行间是这样写的 但是一般不会这样写
2、内联 就是在head 里面写 style
<style type="text/css">
div {
background-color: seagreen;
}
</style>
3、外联 就是通过link 引入外部的css
<link rel="stylesheet" type="text/css" href="test.css">
注意这个东西的写法
举个例子说明一下这个情况
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<!-- 这个地方叫外联 优先级最低 但是利于结构样式相分离 -->
<link rel="stylesheet" type="text/css" href="test.css">
<!-- 这个内联 优先级 排第二 -->
<style type="text/css">
div {
background-color: seagreen;
}
</style>
</head>
<body>
<!-- 这个地方直接写叫行间 优先级最高 -->
<div style="background-color: royalblue;"></div>
</body>
</html>
<script>
</script>
举个例子说明一下
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<!-- 这个地方叫外联 优先级最低 但是利于结构样式相分离 -->
<!-- 这个内联 优先级 排第二 -->
<style type="text/css">
.dy_1 {
width: 200px;
height: 200px;
background-color: salmon;
border: 10px solid darkblue !important;
border: 10px solid rebeccapurple;
}
.mc {
background: rebeccapurple;
background: seagreen;
}
</style>
</head>
<body>
<!-- 这个地方直接写叫行间 优先级最高 -->
<div class="dy_1 mc"></div>
</body>
</html>
<script>
</script>
页面效果 自己想一下哈
3
很形象很直观的例子
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<style type="text/css">
/* 设置a标签的样式 */
a {
font-size: 33px;
}
/* a标签本身的颜色 */
a:link {
color: red;
}
/* 鼠标移动到a标签时的颜色 */
a:hover {
color: #000
}
/* 鼠标按住在a标签上的时候 */
a:active {
color: yellow;
}
/* 鼠标点击或者说访问后的情况 */
a:visited {
color: teal;
}
</style>
</head>
<body>
<!-- 这个地方直接写叫行间 优先级最高 -->
<a href="#">我是fhj</a>
</body>
</html>
<script>
</script>
咱们举个例子说明一下情况
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<style type="text/css">
/* 写外部div的样式 */
#div_id {
width: 100px;
height: 80px;
background: #666;
position: relative;
}
/* 写内部label的眼样式 */
#div_id label {
width: 200px;
height: 100px;
background: green;
position: absolute;
top: 0;
left: 100px;
/* 变成手型 */
cursor: pointer;
}
/* 鼠标放上去之后 div 怎么变化 */
#div_id:hover {
background: hotpink;
cursor: pointer;
}
/* 鼠标放上去后 label的变化 */
#div_id label:hover {
background: indigo;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div id="div_id">
<label></label>
</div>
</body>
</html>
<script>
</script>
效果也是异常的明显 手型工具需要注意 cursor:pointer