20220710 第二组 刘世琦 学习笔记
区块属性：
div块级元素：可以自动换行可以给宽和高
改变显示样式display：inline;
span行级元素：不会自动换行，没有宽和高，宽度由内容决定
变成块级display：block;
display：none;不显示，隐藏，源代码检查元素还在
visibility：hidden；元素隐藏，用gs时源代码检查元素也没有
visibility：visible；显示
display：inline-block;内联块（行级块）：
可以设置宽和高，但是还是行级，不能换行
盒子模型：
右键—检查
最里层：真实的盒子
padding：内边距 块里的东西距div的上边距和左边距
border：边框线
margin：外边距，块距上一个元素的位置
box-sizing:border-box;
保证盒子大小，加上所有东西之后还是多大
box-sizing:content-box;
保证最里层的盒子大小不改变，其他加的东西另算
定位：
alt+上下键，可以将本行往上移动
position：absolute；绝对定位
/* 定位：
absolute：绝对定位
left：100px
top：100px
当前的文档流可以理解为脱离了文档流，飘起来不占有空间位置，然后后来者居上，参照物是已经定位的父级元素，没有父级元素就相对于页面
relative：相对定位
参照物是已经定位的父级元素
占有原有位置，不会飘起来，父相对子绝对
static：文档流（默认）
fixed：浮动，相当于定住了
滚动条：滑动时他一直存在且不动
body{
height: 2000px;
}
溢出：
图片超出边框线
overflow：hidden；超出部分隐藏
overflow：scroll；超出部分以滚动条的形式显示
overflow：visible；超出部分默认显示
overflow：audo；超出部分隐系统自动选择方式
浮动：多用于ul和li（居中：line-height：**px；）
两个块默认换行，所以显示时一上一下
让两个div在一行：
1、display：inline-block;内联块（行级块）：
变成行级块，取消换行功能
2、不改变样式，
float: left;左浮动
当ul和div重叠时需要清除浮动
style=“clear：both；”
一般用ul和li做导航栏
今日收获
由于昨天的学习中存在着疑问，但是今天老师对其进行了实现，是我的问题得以解决！
横向导航栏，鼠标碰到可变为小手，且改变颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
list-style: none;
height: 30px;
width: 100px;
float: left;
background: red;
line-height: 15px;
margin-left: 20px;
/* 鼠标样式 */
cursor: pointer;
}
li:hover {
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>诗词列表</li>
<li>歌曲列表</li>
<li>影视列表</li>
<li>加入我们</li>
</ul>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通