基础认知
网页组成
- 文字 图片 音频 视频 超链接等元素组成
web标准
- html:结构
- css:表现
- javaScript:行为
html骨架
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体,
以后所有的标签 内容都放到body标签里面.
</body>
</html>
html:网页的主体
head:网页的头部
title:网页的标题
body:网页的主体
vscode基本使用
vscode-icons:文件主题
Chinese:汉化包
open in browser:浏览器的打开方式
Live Server:保存自动刷新网页
vscode快速生成结构骨架
1.1 新建一个以.html结尾的文件
1.2 !+tab键就可以生成(!号必须是英文状态才可以 )(!+enter)(html:5)
快捷键:
1.保存文件：ctrl + s
2.快速复制一整行：ctrl + c
3.快速粘贴一整行：ctrl + v
4.快速删除（剪切）一整行：ctrl + x
html语法规范
html注释
解释说明的作用,给程序员或者其它同事看.
快捷键:ctrl+/
标签分类
双边标签
<p>内容</p>
单边标签
<br>
<hr>
标签关系
父子关系(嵌套关系)
兄弟关系(并列关系)
排版标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
特点: 双边标签 独占一行 文字加粗变大 h1-h6依次递减
段落标签
<p>一段文字</p>
特点:
双边标签
独占一行
段落直接有间隙
会根据浏览器窗口大小自动换行显示
换行标签
<br>
单边标签
强制换行
水平线标签
<hr>
单边标签
显示一条分割线
文本格式化标签
加粗:
<b>加粗</b>
<strong>加粗</strong>
下划线:
<u>下划线</u>
<ins>下划线</ins>
倾斜:
<i>倾斜</i>
<em>倾斜</em>
删除线:
<s>删除线</s>
<del>删除线</del>
重点掌握 strong em
推荐大家在实际开发中使用单词较长的标签,语义更加强烈.
媒体标签
图像标签
<img src="图片地址/图片路径">
属性:
src:图片的路径(必写属性)
alt:替换文本
title:提示文本 鼠标悬停时显示文本信息
width:设置图片宽度
height:设置图片高度
boder:设置边框
文件路径
文件路径
绝对路径:以计算机盘符开始.
<img src="D:\web79\day01\05-素材\baby.jpg" alt="">
<!-- 网址路径 一定要以https://或者以http://才可以出来 -->
<img src="http://www.itheima.com/images/logo.png" alt="">
相对路径:从当前文件开始出发找目标文件的过程,简单理解相对于HTML页面的位置.
同级目录
方法一:目标文件名称
方法二:./目标文件名称(推荐使用vscode提示)
<img src="./dog.gif" alt="">
下级目录
方法一: 目标文件夹/目标文件名称
方法二: ./目标文件夹/目标文件名称(vscode提示)
<img src="./img/cat.gif" alt="">
上级目录
../
<img src="../baby.jpg" alt="">
音频标签
<audio src="./music.mp3" controls autoplay loop></audio>
常见属性:
src:音频路径
controls:显示播放控件
autoplay:自动播放
loop:循环播放
音频标签支持3种格式,推荐使用mp3
视频标签
<video src="./video.mp4" controls autoplay loop muted width="300"></video>
常见属性:
src:视频的路径
controls:显示播放控件
autoplay:自动播放,但是谷歌需要muted属性才可以实现自动播放
loop:循环播放
width:设置宽度
height:设置高度
视频标签支持3种格式,推荐使用mp4
超链接标签
<a href="链接的地址">跳转的文本</a>
属性:
href:链接跳转地址,必写属性.
target:设置窗口打开方式
取值:
_self:默认值,当前窗口打开页面
_blank:新的窗口打开,保留原始窗口.
示例代码
<a href="https://www.jd.com/">外部链接</a>
<a href="./02-视频标签.html">内部链接</a>
<a href="链接地址"><img src="图片路径">网页元素链接</a>
下载链接 文件的后缀名必须以.exe .zip .rar等后缀名结尾
<a href="./02.zip">下载链接</a>
<a href="#">空链接</a>
列表标签
列表应用场景
在网页中展示关联性的内容, 例如:新闻列表. 排行榜 网站首页底部导航
三种,无序列表,有序列表,自定义列表
### 无序列表
应用场景: 新闻列表 网页的导航 网页的侧边栏
<ul>
<li>列表的每一项内容</li>
<li>列表的每一项内容</li>
<li>列表的每一项内容</li>
.....
</ul>
无序列表有默认的小圆点后期css处理
ul里面只能包含li标签
li标签里面可以包含任意内容(元素)
有序列表
<ol>
<li>列表的每一项内容</li>
<li>列表的每一项内容</li>
<li>列表的每一项内容</li>
.....
</ol>
有序列表有默认的序号,后期css处理
ol里面只能包含li标签
li标签里面可以包含任意内容(元素)
自定义列表
应用场景:网页的底部导航(网页尾部)
<dl>
<dt>列表主题</dt>
<dd>列表主题的每一项内容</dd>
<dd>列表主题的每一项内容</dd>
....
</dl>
dd前面会有默认的缩进效果 后续css处理
dl标签里面只允许包含dt/dd标签
dt/dd标签里面可以嵌套任意内容(标签)
dt/dd是兄弟关系
表格标签
表格基本标签
<table>
<tr>
<td></td>
<td></td>
<td></td>
....
</tr>
....
</table>
示例代码:
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>孙以龙</td>
<td>人妖</td>
<td>18</td>
</tr>
<tr>
<td>金波</td>
<td>女</td>
<td>19</td>
</tr>
<tr>
<td>德华</td>
<td>男</td>
<td>16</td>
</tr>
</table>
嵌套关系:
table>tr>td
表格属性
表格属性(table 属性):
border:设置边框
width:设置宽度
height:设置高度
align:对齐方式(取值:left(左对齐)|center(居中对齐)|right(右对齐))
rules:细线表格 属性是all(后续使用css修饰)
tr属性:
align:对齐方式(取值:left(左对齐)|center(居中对齐)|right(右对齐))
bgcolor:背景颜色
示例代码:
<table border="1" width="600" height="200" align="center" rules="all">
<tr align="center" bgcolor="red" height="50">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr align="center" bgcolor="green">
<td>孙悟空</td>
<td>人妖</td>
<td>18</td>
</tr>
<tr align="center" bgcolor="pink">
<td>猪八戒</td>
<td>女</td>
<td>19</td>
</tr>
<tr align="center" bgcolor="yellow">
<td>沙僧</td>
<td>男</td>
<td>16</td>
</tr>
</table>
表格标题+表头单元格标签
<caption>表格标题</caption>
默认居中加粗显示,位于表格的第一行,td替换th即可.
<th>表头单元格标签</th>
示例代码:
<table border="1" width="600" height="200" align="center" rules="all">
<caption>
<h2>学生信息表</h2>
</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr align=" center">
<td>孙悟空</td>
<td>人妖</td>
<td>18</td>
</tr>
<tr align="center">
<td>猪八戒</td>
<td>女</td>
<td>19</td>
</tr>
<tr align="center">
<td>沙僧</td>
<td>男</td>
<td>16</td>
</tr>
</table>
表格结构标签
表格头部:
<thead></thead>
表格主体:
<tbody></tbody>
表格尾部:
<tfoot></tfoot>
示例代码:
<table border="1" width="600" height="200" align="center" rules="all">
<caption>
<h2>学生信息表</h2>
</caption>
<!-- 表格头部 -->
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
<!-- 表格身体 -->
<tbody>
<tr>
<td>孙悟空</td>
<td>人妖</td>
<td>18</td>
</tr>
<tr>
<td>猪八戒</td>
<td>女</td>
<td>19</td>
</tr>
<tr>
<td>沙僧</td>
<td>男</td>
<td>16</td>
</tr>
</tbody>
<!-- 表格的底部 -->
<tfoot>
<tr>
<td>总结</td>
<td>悟空真厉害</td>
<td悟空真厉害td>
</tr>
</tfoot>
</table>
表格合并
跨行合并(垂直合并)
rowspan
跨列合并(水平合并)
colspan
合并步骤:
1. 明确合并方式(跨行/跨列)
2. 通过左上原则，确定保留谁删除谁
• 上下合并→只保留最上的，删除其他单元格
• 左右合并→只保留最左的，删除其他单元格
3. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
• `rowspan`：跨行合并→垂直方向合并
• `colspan`：跨列合并→水平方向合并
删除的单元格个数= 合并的个数-1
示例代码
<table border="1" width="800" height="200" rules="all" align="center">
<tr>
<td></td>
<td></td>
<!-- 跨行合并 -->
<td rowspan="3"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<!-- <td></td> -->
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<!-- <td></td> -->
<td></td>
</tr>
<tr>
<td></td>
<!-- 跨列合并 -->
<td colspan="3"></td>
<!-- <td></td>
<td></td> -->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
表单标签
input系列
文本框
<input type="text" placeholder="">
密码框
<input type="password" placeholder="">
单选框
<input type="radio" checked name="sex">男
<input type="radio" checked name="sex">女
多选框
<input type="checkbox" checked >
文件上传
multiple:多文件上传
<input type="file" multiple>
提交按钮
<input type="submit" value="提交">
重置按钮
<input type="reset" value="重置" >
普通按钮
<input type="button"value="普通按钮">
搜索框
<input type="search">
图像提交按钮
<input type="image" src="./img/btn.png" alt="">
placeholder:占位符
单选框设置相同的name属性值才可以实现多选一效果
checked 默认被选中
<input type="text" name="取名字" value="显示内容">
button系列
<button type="submit">提交按钮</button><br>
<button type="reset">重置按钮</button><br>
<button type="button">普通按钮</button><br>
select下拉系列
select:下拉菜单整体
option:下拉菜单的每一项
selected:默认选中下拉菜单的某一项
示例代码:
所在城市:
<select>
<option>请选择城市</option>
<option selected>上海</option>
<option>北京</option>
<option>深圳</option>
<option>广州</option>
<option>武汉</option>
</select>
文本域
<textarea placeholder="请您留言"></textarea>
label标签
作用：提高用户体验
使用方法①：
使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
<label for="nan">男</label>
<input type="radio" name="sex" id="nan">
<label for="nv">女</label>
<input type="radio" name="sex" id="nv">
使用方法②：
直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可
<label>文本框:<input type="text"></label>
语义化标签
无语义化标签
<div>独占一行</div>
<span>一行显示多个</span>
有语义化标签
html5新增标签,IE9以上浏览器支持,后续移动端布局经常使用.
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>网页文章</article>
小结
实际项目用地比较多多的标签
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<p>段落标签</p>
<em>倾斜</em>
<strong>加粗</strong>
<img src="图像路径" alt="替换文本" title="提示文本">
<a href="链接路径" target=_self>超级链接</a>
<a href="链接路径" target=_blank>超级链接</a>
<!--无序列表-->
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
....
</ul>
<!--自定义列表-->
<dl>
<dt>自定义列表主题</dt>
<dd>自定义列表每一项</dd>
<dd>自定义列表每一项</dd>
<dd>自定义列表每一项</dd>
....
</dl>
<!--表格基本语法-->
<table>
<tr>
<td></td>
<td></td>
<td></td>
...
</tr>
...
<tr>
<td></td>
<td></td>
<td></td>
...
</tr>
...
</table>
<!--表单标签-->
文本框
<input type="text" placeholder="">
密码框
<input type="password" placeholder="">
单选按钮(单选按钮需要设置相同的name属性值,才可以实现单选效果)
<input type="radio">
多选框
<input type="checkbox">
搜索框
<input type="search" placeholder="">
普通按钮
<button type="button">普通按钮</button>
无语义化标签
<div>独占一行</div>
<span>一行显示多个,装不下会自动折行</span>
css基础
css体验
css作用:
美化网页,布局页面
选择器{
css属性
}
选择器 {
属性: 值;
属性: 值;
...
}
注意事项:
CSS 标点符号都是英文状态下的
每一个样式键值对写完之后，使用;进行结束
属性名和属性值之间使用:分隔.
css引入方式
内嵌式
作用于当前页面,后续小项目可以使用.
外链式
作用于多个页面,后续大项目使用
需要使用link标签引入外部的css文件
行内式
作用于当前标签,不建议使用.后续配合js.
基础选择器
标签选择器 类选择器 id选择器 通配符选择器
标签选择器
标签名{
属性:属性值;
属性:属性值;
...
}
例如 div{color:red;}
类选择器
.类名{
属性:属性值;
属性:属性值;
...
/*
一个标签可以有多个类名 但是多个类名之间用空格隔开
一个类名可以多次调用(一个类名可以作用在多个标签身上)
*/
}
例如 .box{color:pink;}
id选择器
#id名{
属性:属性值;
属性:属性值;
...
}
例如 #box{color:green;}
通配符选择器
*{
属性:属性值;
属性:属性值;
...
/*后续使用通配符清除内外边距*/
}
字体属性
字体大小
font-size:20px;
字体粗细
font-weight:400(normal)|700(bold)
字体样式
font-style:normal|italic
字体系列
font-family:字体系列1,字体系列2..;
字体连写
font:style weight size family
font:italic 700 60px 宋体;
字体连写不能随意颠倒顺序,必须遵循;
字体连写必须保留size和family 这2个属性.
文本缩进
段落文本首行缩进
text-indent:2em;
文本对齐方式
text-align:left|center|right;
文本水平居中总结
如果想要 文本 span标签 a标签 img标签 input标签水平居中 对齐,给以上元素的父元素设置text-align即可.
文本装饰属性
下划线
text-decoration: underline;
无装饰线
text-decoration: none;
实际开发应用
取消a标签默认的下划线
a{
text-decoration: none;
}
行高
行高:设置行间距
line-height:50px;
单行文本垂直居中
行高等于当前盒子的高度
font:style weight size/line-height family
font:italic 700 30px/40px 微软雅黑
行高与字体连写注意覆盖问题.
/* 当前font-size的倍数 */
line-height: 2;
扩展颜色取值
关键词:
background-color: pink;
rgb:
background-color:rgb(255, 255, 255)
rgba:
background-color: rgba(0, 0, 0, .5);
十六进制
background-color: #ff6700
选择器进阶
后代选择器 子代选择器 并集选择器 交集选择器 伪类选择器
后代选择器
选择器1 选择器2{
属性:属性值;
...
}
后代选择器可以选中子孙后代
选择器与选择器之间用空格隔开
示例:
.box a{color:red;}
子代选择器
选择器1> 选择器2{
属性:属性值;
...
}
子代选择器只能选中亲儿子
选择器与选择器之间用大于号隔开
示例:
.box>strong{color:pink;}
并集选择器
选择器1, 选择器2{
属性:属性值;
...
}
选择器与选择器之间用逗号隔开;
并集选择器每组选择器之间一行写;
最后一个选择器的后面不要加逗号;
并集选择器可以是任意基础选择器和复合选择器的结合
后续把相同的样式进行书写在一起,减少代码的耦合性.
示例
div,
p,
span,
.box p{color:pink;}
交集选择器
选择器1选择器2{
属性:属性值;
...
}
交集选择器可以理解为既又的原则
选择器与选择器之间不需要任何符号,紧挨着一起.
交集选择器如果有标签,必须把标签写在最前面
示例
div.box{
color:green;
}
伪类选择器
选择器:hover{
属性:属性值;
...
}
鼠标经过时候的样式
a:hover{}
div:hover{}
.box:hover{}
:的前面和后面不能有空格
背景属性
背景颜色 背景图片 背景是否平铺 背景位置
背景颜色
background-color: pink;
背景图片
background-image: url(./img/icon.png);
背景是否平铺
background-repeat: repeat|no-repeat|repeat-x|repeat-y;
背景位置
background-position: x y;
背景位置取值:
方位名词:
水平位置:left|center|right
垂直位置:top|center|bottom
background-position:center center；
数字+px:
background-position:10px 20px；
方位名词+数字(px):background-position:left 30px；
背景简写:background:color image repeat position
元素显示模式
根据标签不同的特点，我们可以把标签分成不同的种类。主要分为： 块级元素、行内元素、行内块元素
块级元素
块元素特点:
1 独占一行
2 宽度默认是父元素的宽度,高度由内容撑开.
3 可以设置宽高
代表性的标签 div h系列 p li
行内元素
行内元素特点
1 一行可以显示多个,如果一行装不下自动折行(换行显示)
2 宽度和高度默认由内容撑开
3 设置宽高无效
代表性的标签 a span em strong
行内块元素
行内块元素特点
1 一行显示多个
2 可以设置宽高
代表性标签 input button
元素显示模式转换
转换为块级元素
display: block;
转换为行内块元素
display: inline-block;
转换为行内元素
display: inline
盒子模型
css三大特性
继承性：特性:子元素可以继承父元素的某些特性(某些样式 子承父业)控制文字的属性都可以被继承,不是控制文字的属性不能被继承。
常见继承的属性如下显示:
color: red;
font-style: italic;
font-weight: 700;
font-size: 30px;
font-family: 宋体;
text-indent: 2em;
text-align: center;
line-height: 300px;
继承的特殊情况:
如果浏览器有默认的样式,此时继承依然存在,但是会优先执行浏览器的默认样式
a标签的颜色属性可以被继承,但是被浏览器默认的样式给覆盖.
h系列标签的字体大小被继承,但是被浏览器默认的样式覆盖
高度不能被继承,但是宽度有类似继承的效果
层叠性
相同选择器才会有层叠性
层叠性遵循原则:就近原则.
样式冲突---则层叠(覆盖)
样式不冲突--则叠加(共同作用在一个标签上)
当样式冲突. 只有选择器优先级相同,才会通过层叠性判断.
优先级
不同选择器会有不同的优先级, 优先级高的样式会覆盖优先级低的样式.
判断公式:
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
下面方便大家理解,但是不是很规则.
0 < 0 < 1 < 10 < 100 < 1000 < 无穷大
!important不能提高继承的优先级 只要是继承 优先级最低.
各个选择器的权重:
标签选择器 0 0 0 1 简单记忆 1
类选择器 0 0 1 0 简单记忆10
id选择器 0 1 0 0 简单记忆100
行内样式 1 0 0 0 简单记忆1000
!important如果不是继承,权重最高 天下第一
复合选择器权重会叠加： div p 后代选择器： 0001 + 0001 = 0002
不会有进位的情况，比如 0,0,0, 10
优先级相同,会执行层叠性,写在最后面的会生效.
去除列表标签样式
list-style:none;
盒子模型
盒子模型的组成:内容(content) 内边距(padding) 外边距(margin) 边框(border)
边框(border)
边框属性：边框粗细 边框样式 边框颜色
边框简写：boder:solid 1px red;无顺序要求
边框单方向设置：
上边框
border-top:solid 1px red;
下边框
border-bottom:solid 1px red;
左边框
border-left:solid 1px red;
右边框
border-right:solid 1px red;
盒子实际大小初级计算公式
盒子宽度=左边框+内容的宽度+右边框
盒子高度=上边框+内容的高度+下边框
border可以撑大盒子
如何解决:
1 手动内减
2 测量盒子的时候可以从边框的里面进行量取(不测量边框)
3 自动内减(box-sizing: border-box;)
.box {
width: 400px;
height: 400px;
/* width: 380px;
height: 380px; */
background-color: green;
border: 10px solid #000;
/* css3盒子模型可以解决边框撑大盒子问题(自动内减) */
box-sizing: border-box;
}
内边距(padding)
内容区域到边框的距离
上 右 下 左
padding:10px;
上下 左右
padding:20px 30px;
上 左右 下
padding:20px 30px 40px;
上 右 下 左
padding:20px 30px 40px 50px;
单方向设置
padding-top:30px;
padding-bottom:40px;
padding-left:50px;
padding-right:60px;
盒子终极计算公式
盒子的宽度=左右边框+左右内边距+左右内容
盒子的高度=上下边框+上下内边距+上下内容
边框与padding不会撑大盒子特殊情况
当子元素不给宽度的时候, 子元素默认宽度就是父元素的宽度(父元素的100%)
此时给左右的边框和左右的内边距不会撑大盒子.
css3盒子模型
边框和内边距都会撑大盒子
解决办法
1 .手动内减
2.自动内减(*box-sizing*: border-box;)
外边距(margin)
盒子到盒子之间的距离
上 右 下 左
margin:10px;
上下 左右
margin:20px 30px;
上 左右 下
margin:20px 30px 40px;
上 右 下 左
margin:20px 30px 40px 50px;
单方向设置
margin-top:30px;
margin-bottom:40px;
margin-left:50px;
margin-right:60px;
margin正常现象
水平布局的盒子,左右的 margin值互不影响
最终的距离为margin左右的和
<div class="box1"></div><div class="box2"></div>
* {
margin: 0;
padding: 0;
}
div {
display: inline-block;
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
margin-right: 20px;
}
.box2 {
background-color: green;
margin-left: 30px;
}
margin合并现象
垂直布局的块级元素 上下 margin会合并.
最终的距离为margin的最大值
解决办法:
开发避免就可以,只设置一个盒子的上下外边距即可.
<div class="box1"></div>
<div class="box2"></div>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
}
.box1 {
background-color: green;
/* margin-bottom: 30px; */
}
.box2 {
background-color: pink;
margin-top: 40px;
}
margin塌陷现象
互相嵌套块级元素, 如果给子元素设置margin-top会作用在父元素身上,这种现象就叫嵌套块级元素塌陷
解决办法:
1 给父元素设置 padding-top或 border-top
2 给父元素设置 overflow: hidden;
3 把子元素转换为行内块 display: inline-block;
4 浮动 绝对定位 相对定位的 盒子不会有嵌套块级元素外边距塌陷现象
<div class="father">
<div class="son"></div>
</div>
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background-color: pink;
/* padding-top: 1px; */
/* border-top: 1px solid transparent; */
/* overflow: hidden; */
}
.son {
display: inline-block;
/* float: left; */
margin-top: 20px;
width: 200px;
height: 200px;
background-color: purple;
}
行内元素设置内外边距 无效
水平布局设置 padding和margin 有效
垂直布局设置 padding和margin 无效
如果要垂直布局padding和margin生效解决办法
转换为块或行内块
padding和margin 以后如何选择
父子关系 :padding
兄弟关系: margin
结构伪类选择器
根据HTML结构选择标签,减少对类名的依赖.
结构伪类选择器的权重是0010.
<ul>
<li>我是li里的第1个孩子</li>
<li>我是li里的第2个孩子</li>
<li>我是li里的第3个孩子</li>
<li>我是li里的第4个孩子</li>
<li>我是li里的第5个孩子</li>
<li>我是li里的第6个孩子</li>
<li>我是li里的第7个孩子</li>
<li>我是li里的第8个孩子</li>
<li>我是li里的第9个孩子</li>
<li>我是li里的第10个孩子</li>
</ul>
/* 匹配父元素里面的第一个孩子 */
ul li:first-child {
background-color: red;
}
/* 匹配父元素里面的最后一个孩子 */
ul li:last-child {
background-color: skyblue;
}
/* 匹配父元素里面的某一个孩子 */
ul li:nth-child(6){
background-color: purple;
}
/* 匹配父元素里面倒数第几个孩子 */
ul li:nth-last-child(3){
background-color: pink;
}
nth-child(n)
1、 n 可以是**数字**， 数字是几，就选择第几个孩子。
ul li:nth-child(6) { } 选择第6个孩子
2、 n 还可以是 **关键字** 比如 odd even
/* 选中偶数的孩子 */
ul li:nth-child(even) {
background-color: pink;
}
/* 选中奇数的孩子 */
ul li:nth-child(odd) {
background-color: skyblue;
}
3、 n 还可以是 公式。
- n 是从 0开始 012345...
- 2n 是 偶数
- 2n + 1 是 奇数
- 5n 5的倍数
- n+5 从第五个开始 包含第五个 一直到最后.
- -n+5 选中前5个 包含第五个
/*2n */
ol li:nth-child(2n) {
background-color: tomato;
}
/*2n+1 */
ol li:nth-child(2n+1){
background-color: violet;
}
/*5n */
ol li:nth-child(5n){
background-color: yellowgreen;
}
/* n+5 从第五个开始 包含第五个 一直到最后.*/
ol li:nth-child(n+5) {
background-color: yellowgreen;
}
/*-n+5 选中前5个 包含第五个*/
ol li:nth-child(-n+5) {
background-color: yellowgreen;
}
伪元素
伪元素就是利用css来创建标签.伪元素创建出来的标签属于行内元素.
在父元素内容的最前面添加一个伪元素
E::before{
content: '';
}
在父元素内容的最后面添加一个伪元素
E::after{
content: '';
}
使用伪元素插入必须要指定content属性
标准流
一个完整的网页布局,只有标准流是不能满足需求,打破常规布局,让多个块级元素水平一行显示并且没有间隙.
网页布局: 标准流 + 浮动+ 定位 标准流布局规则：
块级元素:
从上往下 垂直布局 独占一行
行内 /行内块元素:
从左往右 水平布局 一行转不下自动换行
浮动
浮动的作用
早期的作用:图文环绕
现在的作用:布局页面,让垂直布局的盒子变成水平布局
浮动的特点
1. 浮动元素会脱离标准流(简称脱标),不占位置,被后面的标准流占有.
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
}
.box2 {
/* 右浮动 */
float: right;
background-color: red;
}
.box3 {
background-color: green;
}
2. 浮动的元素比标准流高半个级别,可以覆盖标准流的元素.
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
}
.box2 {
/* 左浮动 */
float: left;
background-color: red;
}
.box3 {
padding: 40px;
background-color: green;
}
3.浮动找浮动(同方向浮动) ，下一个浮动元素会在上一个浮动元素后面左右浮动
* {
margin: 0;
padding: 0;
}
div {
float: left;
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
}
.box2 {
background-color: red;
}
.box3 {
background-color: green;
}
4.浮动的元素会受到上面元素边界的影响
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
}
.box2 {
/* 右浮动 */
float: right;
background-color: red;
}
.box3 {
background-color: green;
}
5.浮动的元素有特殊效果(浮动元素具有行内块元素特性并且顶部对齐.)
一行可以显示多个,可以设置宽高
块级元素浮动之后不设置宽高,默认由内容撑开
行内元素浮动之后设置宽高有效
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span>设置宽高有效</span>
<p>块级元素浮动之后不设置宽高默认由内容撑开</p>
* {
margin: 0;
padding: 0;
}
div {
float: left;
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
}
.box2 {
background-color: red;
}
.box3 {
background-color: green;
}
span {
float: left;
width: 200px;
height: 200px;
background-color: purple;
}
p {
width: 200px;
height: 200px;
float: left;
background-color: yellow;
}
浮动注意事项
浮动注意事项:
1 浮动的盒子搭配标准流的父元素一起使用.(标准流:垂直布局 ;浮动:水平布局)
2 浮动的时候,当父元素装不下浮动的子元素,此时子元素会换行显示.
3 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
子浮父不浮 兄弟一起浮
