HEML+CSS超详细基础知识

一些快捷键

ctrl+/ 是注释

ctrl+d 是选中多个相同字

ctrl+s保存

alt+Z自动换行

alt+shift选中多行

HTML认知

基础认知

html初尝试

HTML页面结构介绍

初次尝试

开始动手写一个网页

先新建一个文件，记得后缀要命名成html

然后shift+！，就会自动生成一个框架，在这里面写代码就行

结果呈现

标签总介绍

标题标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 用到了ctrl+d --><h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6>
</body>
</html>

段落标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例:阿卡贝拉(意大利:Acappella)即无伴奏合唱。阿卡贝拉《千与千寻》</p><p>“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例:有一种悲价(翻唱)-《A Kind of Sorrow》</p></body>
</html>

换行标签

水平线标签

文本格式化标签（文字加粗等）

上图中，左边和右边的代码实现的功能是一样的，但可以根据语境来选择用哪一个。

如果比较重要的可以用右边的代码，即单词。

图片标签

下面我插入了一个火影忍者的动图。

"./"代表当前文件所在的目录。在这个例子中，"./Ninja.gif"指的是当前HTML文件所在目录下的"Ninja.gif"文件。（这边不加也行）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- alt是替换文本，当图片加载失败时会出现 --><!-- 可以同时设置width和height，但只设置其中一个会自动等比例匹配，所以一般只写一个就行 --><img src="./Ninja.gif" alt="这是佐助和鸣人" title="火影忍者" width="400">
</body>
</html>

路径介绍

./ 是当前文件夹

../是上一层文件夹

为什么相对路径比绝对路径更常用呢？

因为假如你写了一个网页，其中的某张图片是绝对路径。那么别人的电脑打开这个网页的时候，图片可能就没有了，因为你自己电脑上的绝对路径和别人电脑上的绝对路径是不一样的。

所以，绝对路径的使用场景就非常受限了。

同级目录的用法在上面用过，就不再赘述了

目标文件在下级。假设当前文件夹是a，包含目标文件的文件夹为b，那我们就要先进入b，然后再访问目标文件。

所以呢，访问当前文件夹是用“./”，那么访问其他文件夹就是 "文件夹名/"

../是返回上一级

音频标签

<body><!-- 如果不加controls就没法播放，因为没有控制器 --><audio src="./孔泽瀚 - 游戏音乐试听【飞机大战】.mp3" controls autoplay loop></audio>
</body>

视频标签

<body><video src="./WeChat_20231107150857.mp4" controls autoplay muted loop></video>
</body>

链接标签

<body><!-- 写上一个a，再回车 --><!-- href:网址 --><a href="https://blog.csdn.net/clmm_?spm=1010.2135.3001.5343" target="_blank">我的csdn</a><br><!-- 默认是self --><a href="./09-视频标签.html">视频标签</a><br><!-- 在开发初期的时候，不知道链接将会跳到哪里去，所以先写一个空链接 --><a href="#" target="_blank">空链接</a>
</body>

案例-招聘

<body><h1>腾讯科技高级web前端开发岗位</h1><hr><h2>职位描述</h2><p>负责重点项目的前端技术方案和架构的研发和维护工作;</p><h2>岗位要求</h2><p>5年以上前端开发经验，精通html5/css3/javascript等 web开发技术:熟悉bootstrap，vue，angularjs，reactjs等框架，熟练掌握一种以上，代码风格严谨，能高保真还原设计稿，能兼容各种浏览器，对web前端的性能优化以及web常见漏洞自一定的解和相关践:具备良好的分析解决问题能力，能独立承担任务，有开发进度把控力;责任心强，思路路洁晰，抗压能力好，旦备良好的对外沟通和团队协作能力</p><h2>工作地址</h2><p>上海市-徐汇区-腾云大厦</p><img src="./images/案例-上海地图.png" alt="">
</body>

案例-跳转

打网址回车后，看到的页面是首页，我们叫它index

以后做项目的时候，要把用到的东西都放在同一个文件。

包括素材和html文件

<body><h1>今日搜索热词</h1><hr><h2>1.火影忍者</h2><p>《火影忍者》是一部由日本漫画家岸本齐史创作的漫画作品，也被改编成了动画、电影、小说等形式。故事主要围绕着年轻的忍者奈良鸣人以及他的同伴们，在追求成为忍者村“火之国木叶隐村”的领袖——火影的过程中，经历了各种挑战、成长与友情。这部作品融合了忍者、战斗、友情、成长等元素，深受全球观众的喜爱。</p><a href="./Ninja.html" target="_blank">鸣人佐助打斗图</a><h2>2.人</h2><p>这是一个人</p><a href="./LinJin.html" target="_blank">一个人</a></body>

HTML基础

列表标签

无序列表

补充：去掉列表符号（就是前面的圆点）

有序列表

自定义列表

dd有自动缩进的效果，那我们要怎么美化呢？这个要在css学

表格标签

表格标题和表头单元格标签

<body><table border="2" width = 500 height = 300><caption><strong>学生成绩单</strong></caption><tr><th>姓名</th><th>成绩</th><th>评语</th></tr><tr><td>小哥哥</td><td>100分</td><td>真不错</td></tr><tr><td>小姐姐</td><td>100分</td><td>666啊</td></tr></table>
</body>

合并单元格

<body><table border="2" width = 500 height = 300><caption><strong>学生成绩单</strong></caption><tr><th>姓名</th><th>成绩</th><th>评语</th></tr><tr><td>小哥哥</td><td rowspan="2">100分</td><td>真不错</td></tr><tr><td>小姐姐</td><!-- <td>100分</td> --><td>666啊</td></tr></table>
</body>

跨列合并同理

input标签

<body>文本框:<input type="text"><br><br><!-- 书写的内容会以“点”的形式表示 -->密码框:<input type="password" name="" id=""><br><br>单选框:<input type="radio" name="" id=""><br><br>多选框:<input type="checkbox" name="" id=""><br><br>上传文件:<input type="file" name="" id="">
</body>

文本框

单选框

name有分组功能

<body><!-- checked是默认选中 -->性别：男<input type="radio" name="gender" checked>女<input type="radio" name="gender">
</body>

文件选择

input按钮

<body><form action="">昵称：<input type="text" name="" id=""><br><br>密码：<input type="password" name="" id=""><br><br><!-- 可以用value来指定按钮的名字 --><input type="submit" value="注册"><input type="reset" value="重置"><input type="button" value="普通按钮"></form>
</body>

button按钮

这个用的比较多

<body><button type="submit">提交</button><button type="reset">重置</button><button type="button">啥也没有</button>
</body>

select下拉菜单标签

<body><select name="" id=""><option value="">北京</option><option value="" selected>上海</option><option value="">广州</option><option value="">深圳</option></select>
</body>

textarea文本域标签

实际开发中，是用css来设置长宽，所以这里只要记住textarea是文本域就行了

<body><textarea name="" id="" cols="20" rows="30"></textarea>
</body>

label标签

两种方法都用到了。这样点“男”和“女”照样也可以选中

<body>性别：<input type="radio" name="sex" id="man"> <label for="man">男</label><label><input type="radio" name="sex" id="">女</label>
</body>

语义标签--div和span标签

后期使用 JavaScript 和 CSS为这两个标签添加功能。这两个标签本身并没有特定的功能，它们通常用于组织和样式化 HTML 内容。

<body><div>1</div><div>2</div><span>3</span><span>4</span>
</body>

字符实体

只要记住空格的 &nbsp 就行了，其他不用记。

为什么要写字符实体呢？

看下面代码，明明打了很多个空格，显示结果却只有一个空格

这是因为，网页只认识一个空格

因此，要达到多个空格的效果就要用上字符实体

<body>这是一个&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;字符
</body>

综合案例-学生信息表

<body><table border="2" width = 600 height = 500><caption><strong>优秀学生信息表格</strong></caption><tr><th>年级</th><th>姓名</th><th>学号</th><th>班级</th></tr><tr><td rowspan="2">高三</td><td>张三</td><td>110</td><td>三年二班</td></tr><tr><td>赵四</td><td>120</td><td>三年三班</td></tr><tr><td>评语</td><td colspan="3">你们都很优秀</td></tr></table>
</body>

综合案例-表单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action=""><h1>青春不常在，抓紧谈恋爱</h1><hr>昵称：<input type="text" placeholder="请输入昵称"><br><br>性别：<input type="radio" name="gender" id="">男<input type="radio" name="gender">女<br><br>所在城市：<select name="" id=""><option value="">北京</option><option value="">上海</option><option value="">广州</option><option value="">深圳</option></select><br><br>婚姻状况：<input type="radio" name="marry_state" id="">未婚<input type="radio" name="marry_state" id="">已婚<input type="radio" name="marry_state" id="">保密<br><br>喜欢的类型：<input type="checkbox" name="target_type" id="">御姐<input type="checkbox" name="target_type" id="">萝莉<input type="checkbox" name="target_type" id="">性感<input type="checkbox" name="target_type" id="">小家碧玉<br><br>个人介绍：<textarea name="" id=""></textarea><h3>我承诺</h3><ul><li>真诚寻找另一半</li><li>绿色上网，不违反法律法规</li><li>不约pao</li></ul><input type="checkbox" name="" id="">我同意所有条款<br><br><button type="submit" >免费注册</button><button type="reset">重置</button></form>
</body>
</html>

CSS基础

CSS介绍

这里用到了标签选择器。后文会详细讲到。

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{/* 设置颜色 */color: aqua;/* 字体变大 */font-size: 50px;/* 背景颜色 */background-color: bisque;width: 300px;height: 300px;}</style>
</head>

CSS引入方式

内嵌式：

上面已有，不再赘述

外联式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./My_CSS.css">
</head>
<body><p>这是一个标签</p>
</body>
</html>

行内式：

<body><div style="color: blue; font-size: 30px;">div标签</div>
</body>

基础选择器

标签选择器

标签选择器在上面已经使用过了

标签选择器有一个很大的弊端，那就是会把所有相同标签的全部加上效果。

例如写了

div{

/* 设置颜色 */

color: aqua;

/* 字体变大 */

font-size: 50px;

/* 背景颜色 */

background-color: bisque;

width: 300px;

height: 300px;

}

那么所有div标签都会有这个效果。这个功能有好有坏，灵活性不够。

类选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.red{color: red;}.size{font-size: 80px;}</style>
</head>
<body><div>111</div><div class="red">222</div><!-- 一个标签可以使用多个类名，用空格隔开即可 --><div class="red size">333</div></body>
</html>

id选择器

id选择器是与js配合使用的。css不会用到。

通配符选择器

我将其戏称为众生平等选择器（）

因为这个选择器会对所有标签都加上效果。

例如下图的代码，就是将所有标签的字都变成黄色。

字体和文本样式

字体粗细

字体样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.n{font-style: normal;}.i{font-style: italic;}</style>
</head>
<body><div class="n">111</div><div class="i">222</div></body>
</html>

字体系列

<style>div{/* 这样写的目的 *//* 如果用户没有安装微软，就按黑体显示文字 *//* 如果电脑也没有安装黑体，那就按照任意一直非衬线字体系列显示 */font-family: 微软雅黑,黑体,sans-serif;}</style>

字体font相关属性的连写

<style>div{font: italic 100 60px 宋体;}</style>

<style>div{font: italic 100 60px 宋体;font-style: normal;//覆盖了上一行的倾斜效果}</style>

文本缩进

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{text-indent: 2em;}</style>
</head>
<body><div>发生肯德基那儿缴纳罚金你的咖啡胶囊卡恩九年地方的房价虐精啊发到你姐夫vi十分艰难打工呢欧神诺的发表吉尼斯额你大佛不弄啥都i哦</div></body>

文本水平对齐方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1{text-align: center;}/* 因为图片是在body里 */body{text-align: center;}</style>
</head>
<body><h1>火影忍者</h1><img src="./Ninja.gif" alt="">
</body>
</html>

文本修饰

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{text-decoration: underline;}a{text-decoration: none;/* 去除下划线 */}</style>
</head>
<body><div>div</div><a href="#">这是一个超链接</a>
</body>
</html>

行高设置

<style>div{line-height: 3;}
</style>

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{font:italic 20px/3 宋体;}</style>
</head>

拓展

需要做区分的是：

margin是让标签居中

而text-align是让内容居中（包括文本，图片等）

综合案例-新闻

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 800px;height: 600px;/* background-color: rgb(248, 247, 246); */margin: 0 auto;}a{text-decoration: none;}p{text-indent: 2em;}.center{text-align: center;}.color1{color: #808080;}.color2{color: #87ceed;font-weight: 200;}</style>
</head>
<body><div><h1 class="center">《自然》评选改变科学的10个计算机代码项目</h1><span class="color1 center">2077年01月28日14:58 </span><span class="color2 center">新浪科技 </span><a href="#">收藏本文</a><hr><p>2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。</p><p>这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·菜维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。</p><p>如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》(Nature)杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。</p></div>
</body>
</html>

选择器进阶

后代选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div p{color: red;}</style>
</head>
<body><p>这是一个p</p><div><p>这是div里的p</p></div>
</body>
</html>

子代选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div > p{color: red;}</style>
</head>
<body><div><p>这是div里的p</p><span><p>这是div里div的p</p></span></div>
</body>
</html>

并集选择器

差不多就是一种连写吧

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div,span,h1{color: red;}</style>
</head>
<body><div>1</div><span>2</span><h1>3</h1><h2>4</h2>
</body>
</html>

交集选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div.box{color: red;}</style>
</head>
<body><!-- 使带有box类div标签变红 --><div class="box">1</div><div>2</div><span class="box">3</span></body>
</html>

hover伪类选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a:hover{color: red;background-color: aqua;}div:hover{color: darkorange;}</style>
</head>
<body><a href="#">超链接</a><div>div</div></body>
</html>

emmet语法

背景相关

是标签里的背景

背景颜色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 400px;height: 300px;/* 红，绿，蓝，透明度 */background-color: rgba(0,0,0,0.5);}</style>
</head>
<body><div>div</div>
</body>
</html>

背景图片

背景平铺

背景位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 800px;height: 600px;/* 红，绿，蓝，透明度 */background-color: rgba(0,0,0,0.5);background-image: url(./永带妹.gif);background-repeat: no-repeat;background-position: center top;}</style>
</head>
<body><div></div>
</body>
</html>

背景相关属性连写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 800px;height: 600px;/* 红，绿，蓝，透明度 */background: rgba(0,0,0,0.5) url(./永带妹.gif) no-repeat 50px 100px;/* 不像font连写有固定顺序，background没有固定顺序 *//* 可以按照需求省略，但是位置如果是数值，不要颠倒顺序（水平，垂直） */}</style>
</head>
<body><div></div>
</body>
</html>

拓展：img和背景图片的区别

在开发中，重要的图片用img，不重要的图片用div标签+图片。这是约定俗成的。

元素显示模式

块级元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 200px;background-color: aqua;}</style>
</head>
<body><div>1</div><div>2</div>
</body>
</html>

行内元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span{width: 300px;height: 200px;background-color: aqua;}</style>
</head>
<body><span>1</span><span>2</span>
</body>
</html>

可以看到就算加了宽高也没什么用

行内块元素

总结：

块元素：独占一行，可以设置宽高

行内元素：一行可以显示多个，不可以设置宽高

行内块元素：一行可以显示多个，可以设置宽高

元素显示模式转换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 200px;background-color: aqua;display: inline-block;}</style>
</head>
<body><div>1</div><div>2</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span{width: 300px;height: 200px;background-color: aqua;display: block;}</style>
</head>
<body><span>1</span><span>2</span>
</body>
</html>

继承性

技巧：能控制字的都能继承，否则不能

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{color: red;}</style>
</head>
<body><!-- 因为span标签的父级是div，会继承字体 --><div>这是1<span>这是2</span></div></body>
</html>

可以看到超链接的颜色没有变。

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{color: red;}</style>
</head>
<body><!-- 因为span标签的父级是div，会继承字体 --><div><a href="#">超链接</a></div></body>

层叠性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{color: red;color: blue;/* 蓝色就覆盖了红色 */}.box{font-size: 100px;}</style>
</head>
<body><!-- 因为span标签的父级是div，会继承字体 --><div class="box">666</div></body>
</html>

综合案例1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 注意a是行内元素，如果想设置宽高需要转化成行内块 */a{color: aliceblue;text-decoration: none;background-color: red;width: 100px;height: 50px;text-align: center;line-height: 50px;display: inline-block;}a:hover{background-color: orange;}</style>
</head>
<body><a href="#">导航1</a><a href="#">导航2</a><a href="#">导航3</a><a href="#">导航4</a><a href="#">导航5</a>
</body>
</html>

鼠标悬停的时候时橘色

综合案例2

优先级介绍

不必特意去记，只要记住，谁更精确，谁的优先级更高

盒子模型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 200px;background-color: blue;/* 盒子边框线 */border: 1px solid black;/* 内边距：出现在内容与盒子之间 */padding: 20px;/* 外边距：出现在两个盒子之间，是在盒子外面 */margin: 50px;}</style>
</head>
<body><div>盒子1</div><div>盒子2</div></body>
</html>

打开调试就可以看到具体的盒子结构了

边框（border）使用

border: 线条粗细样式颜色

不分先后顺序

border-left: 5px solid black;

盒子大小计算

盒子尺寸 = width / height + 边框粗细*2

因此对于以上需求，代码如下

因为上下各有10px的黑边框，这就有20px了，因此为了使整个盒子为400，标签大小就设置成380px

案例：新浪导航

技巧：从外到内:先宽高背景色，放内容，调节内容的位置;控制文字细节

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{height: 40;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;}.box a{width: 80px;height: 40px;/* background-color: #edeef0; *//* 虽然这里用不到，但建议先加上，因为可以看到文字的位置 *//* div是块级元素，要设置宽高，转换成行内块元素 */display: inline-block;text-align: center;line-height: 40px;text-decoration: none;color: #4c4c4c;}.box a:hover{background-color: #edeef0;color: #ff8400;}</style>
</head>
<body><div class="box"><a href="#">新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航</a></div>
</body>
</html>

内边距（padding）

内边距优化新浪导航案例

如上图出现的问题，如果字多了，就会自动换行，因为超链接的宽度被固定死了

因此我们可以不设置宽度，并且用内边距来保持美观

盒子模型自动内减

box-sizing: border-box;

外边距（margin）

使用方法和内边距一样

清除默认内外边距

版心居中

版心：网页的有效内容

版心居中：

margin: 0 auto;

案例：新闻导航

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}.news{width: 500px;height: 400px;margin: 50px auto;padding: 42px 30px 0;border: 1px solid #ccc;}.news h2{font-size: 30px;border-bottom: 1px solid #ccc;/* 行高是一倍，就是字号的大小 */line-height: 1;padding-bottom: 9px;}.news ul{list-style: none;}.news li{height: 50px;border-bottom: 1px dashed #ccc;padding-left: 28px;line-height: 50px;}.news a{text-decoration: none;color: #666;font-size: 18px;}</style>
</head>
<body><div class="news"><h2>最新文章/New Articles</h2><ul><li><a href="#">北京招聘网页设计，平面设计，php</a></li><li><a href="#">北京招聘网页设计，平面设计，php</a></li><li><a href="#">北京招聘网页设计，平面设计，php</a></li><li><a href="#">北京招聘网页设计，平面设计，php</a></li><li><a href="#">北京招聘网页设计，平面设计，php</a></li></ul></div>
</body>
</html>

一些需要注意的问题

1合并现象

如下，可以看到重合了。

2塌陷现象

当前是这样

我们想变成这样

我们会想到给子元素加上margin:50px，然而效果却不对。

可以看到整块都往下移动了，这就是“塌陷现象”，解决办法在上面了

加上overflow:hidden 后

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.test1{width: 300px;height: 300px;background-color: red;overflow: hidden;}.test2{width: 100px;height: 100px;background-color: blue;margin: 50px;}</style>
</head>
<body><div class="test1"><div class="test2">666</div></div></body>
</html>

3

CSS浮动

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>li:first-child{color: antiquewhite;}li:last-child{color: aqua;}li:nth-child(2){color: red;}li:nth-last-child(2){color: blue;}</style>
</head>
<body><ul><li>这是第1个</li><li>这是第2个</li><li>这是第3个</li><li>这是第4个</li><li>这是第5个</li><li>这是第6个</li><li>这是第7个</li><li>这是第8个</li></ul>
</body>
</html>

也可以批量选择。公式如下

伪元素

还有一个需要注意的点是，content的内容记得加单引号

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father{width: 300px;height: 300px;background-color: pink;}.father::before{content: '我';color: red;}.father::after{content: '写代码';color: blue;}</style>
</head>
<body><div class="father">爱</div>
</body>
</html>

如果想变成上下的话也可以，设置成块元素即可。

浮动

体验行内块问题

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one{width: 100px;height: 100px;background-color: red;display: inline-block;}.two{width: 100px;height: 100px;background-color: blue;display: inline-block;}</style>
</head>
<body><div class="one">one</div><div class="two">two</div>
</body>
</html>

发现两个标签中间有空隙，而我们并没有写任何空格。

这是因为浏览器解析行内块或行内标签的时候，如果标签换行书写，会产生空隙。

如果这样写就能避免了

但显然这并不是个好办法，因此我们要学习浮动

浮动的简单使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one{width: 100px;height: 100px;background-color: red;float: left;}.two{width: 100px;height: 100px;background-color: blue;float: left;}</style>
</head>
<body><div class="one">one</div><div class="two">two</div>
</body>
</html>

浮动的特点

总结：浮动元素会脱离标准流，在标准流中不占位置，且比标准流级别高，可以覆盖标准流的元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one{width: 100px;height: 100px;background-color: red;float: left;}.two{width: 200px;height: 200px;background-color: blue;/* float: left; */}.three{width: 300px;height: 300px;background-color: rgb(15, 247, 65);/* float: left; */}</style>
</head>
<body><div class="one">one</div><div class="two">two</div><div class="three">three</div>
</body>
</html>

清除浮动的应用

此处只是简单地设置margin来消除影响

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0%;padding: 0%;}.box{width: 1226px;height: 614px;margin: 0 auto;}.left{background-color: purple;width: 234px;height: 614px;float: left;}.right{float: right;width: 978px;height: 614px;}.right li{width: 234px;height: 300px;background-color: #87ceed;margin-right: 14px;margin-bottom: 14px;float: left;}.right li:nth-child(4n){margin-right: 0;}ul{list-style: none;}</style>
</head>
<body><div class="box"><div class="left"></div><div class="right"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div></body>
</html>

注意！

比较坑的地方是这里，冒号前面别加空格，否则不生效的

清除浮动的方法

如果出现以下问题该怎么解决

引出问题

我们想实现以下界面，代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.box{width: 300px;height: 100px;background-color: pink;margin: 0 auto;}.left{width: 100px;height: 100px;background-color: blue;float: left;}.right{width: 100px;height: 100px;background-color: rgb(5, 245, 69);float: right;}.bot{height: 200px;background-color: red;}</style>
</head>
<body><div class="box"><div class="left"></div><div class="right"></div></div><div class="bot"></div></body>
</html>

那当我们把父级设置的宽高去掉，就会变成这样。

因为父级没有大小，浮动元素又不占标准流，下面的div就会“上来”。

以下提出了几种解决办法

直接设置父元素高度

既然去掉父元素的宽高会出现问题，那么加上就好了嘛。

但这缺陷还是挺大的，不推荐

额外标签法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.box{background-color: pink;margin: 0 auto;}.left{width: 100px;height: 100px;background-color: blue;float: left;}.right{width: 100px;height: 100px;background-color: rgb(5, 245, 69);float: right;}.bot{height: 200px;background-color: red;}.cleanfix{clear: both;}</style>
</head>
<body><div class="box"><div class="left"></div><div class="right"></div><div class="cleanfix"></div></div><div class="bot"></div></body>
</html>

单伪元素清除法

直接在父元素加上这个clearfix类就行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.box{background-color: pink;margin: 0 auto;}.left{width: 100px;height: 100px;background-color: blue;float: left;}.right{width: 100px;height: 100px;background-color: rgb(5, 245, 69);float: right;}.bot{height: 200px;background-color: red;}.clearfix::after{content: '';display: block;clear: both;}</style>
</head>
<body><div class="box clearfix"><div class="left"></div><div class="right"></div></div><div class="bot"></div></body>
</html>