Chrome工具
- f12
- ctrl+shift+l
- 检查
Chrome结构布局
- 1号为html结构
- 2号为css样式
- 3号为行数
Chrome调试数据
- 上箭头 数值增大
- 下箭头 数据变小
css常见的错误
- css单词书写错误
- css无显示
- html 结构不匹配(重要)
- 中文的冒号
- 少写花括号
子元素的宽度允许大于父元素
在某些情况下 子元素的宽度可以大于父元素的宽度
ul的宽度大于版心的宽度 且不受影响
侧边广告栏问题
如何让一个侧边栏靠近版心对齐呢,使用固定定位,走浏览器视口的一半,再走版心的一半+自身的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侧边广告栏对齐版心的方法</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 1200px;
height: 1000px;
background-color: pink;
margin: 200px auto;
}
.aside {
position: fixed;
top: 50px;
left: 50%;
margin-left: -1000px;
width: 400px;
height: 400px;
background-color: purple;
}
</style>
</head>
<body>
<div class="container"></div>
<div class="aside"></div>
</body>
</html>