目录
一 网页基础
html ：网页结构，显示网页元素。
css ：层叠样式表，美化html。
css规则组成 ：选择器和数条声明。
css样式书写格式：标签名 {
属性：属性值 ;
}
1 代码风格
1 样式格式书写
1 紧凑格式：书写在一行。
2 展开格式，常用。
2 样式大小写
常用小写
3 空格规范
1 属性值，冒号前保留空格。
2 选择器，标签，大括号前保留空格。
2 选择器
选择器：用来选择标签.。
1 分类
基础选择器：由单个选择器组成。
复合选择器：多个选择器组成。
3 复合选择器
1 标签选择器
用标签名作为选择器。
优点：可为同类型标签快速统一设置。
缺点：不能差异化设置。
标签名 {
属性：属性值 ；
}
2 类选择器
可单独选择一个或某几个标签。可差异化选择不同的标签。
在标签上起上类属性，以 .类属性值 作为选择器名。
注意：
标签名不能命名
不能使用纯数字，中文命名
可以使用下划线
见名知意
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.boxsize {
width: 100px;
height: 100px;
}
.red {
background: red;
}
.green {
background: green;
}
</style>
</head>
<body>
<!--一个标签可有多个类名 但空格隔开
使用场景 可抽离多个标签的共同代码
优点：代码简洁-->
<div class="red boxsize">
</div>
<div class="green boxsize">
</div>
<div class="red boxsize">
</div>
</body>
</html>同个标签可有多个类名，但每个用空格隔开。
3 id选择器
同类选择器 标签处加id属性，以 #id名 做选择器名 。
适用于页面唯一性的元素上。
注意：
只能用id调用一次，再调用无法实现。
4 通配符选择器
* {
... ;
}
表示选中页面所有标签。
5 区别
前两种常用
4 字体样式
1 font-family 字体样式
多个字体逗号隔开
词组形式的字体名用引号包括
尽量使用默认字体
同个标签的样式可以共存多个字体，但从左往右优先采用。
2 font-size字体大小
定义字体系列，大小（px,适合给一个确定值，因为不同浏览器字体默认值会不一样），粗细，样式。
3 font-weight 字体粗细
h5 {
font-size: 20px;
font-weight: bold;
/*此种等于加粗效果，数字不加单位*/
/*font-width: 400;*/
/*400变细==normal 700变粗==bold*/
}4 font-style
.two {
font-family: "microsoft yahei", Arial;
/*italic 斜体 其中normal为默认值，不倾斜*/
font-style: italic;
}5 复合属性
复合属性有优先顺序，注意从左往右，每个属性空格隔开。且其中font-size 和font-family 必须存在。
5 文本属性
1 颜色
常用十六进制表示颜色
2 对齐
.duiqi{
/*使文字右对齐 left/center/right*/
text-align: right;
}3 装饰文本
给文本添加下划线，上划线，删除线。
.zhuangshi {
/*下划线*/
text-decoration: underline;
/*上划线*/
/*text-decoration: overline;*/
/*删除线*/
/*text-decoration: line-through;*/
/*其中none属性取消链接的默认下划线*/
}4 缩进
常用于首行缩进。
.suojin{
/*数字确定缩进距离 负数会截断对应距离文字*/
text-indent: 10px;
/*缩进2个文字*/
/*text-indent: 2em;*/
}5 行间距
控制行高距离。
.hangjianju {
/*行间距*/
line-height: 100px;
}6 css引入方式
分类：
1 内嵌式
可控制整个页面
2 行内式
适用于修改简单样式的元素
style处是双引号
只能控制单个标签
3 链入式
可控制多个页面
7 综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
.bujiacu {
/*给标题样式设置不加粗*/
font-weight: 400;
text-align: center;
}
h6 {
/*设置居中对齐*/
text-align: center;
color: gray;
}
.chaolianjie {
/*设置超链接没有默认的下划线*/
text-decoration: none;
}
.wenbenkuang {
width: 300px;
}
.suojin {
/*设置首行缩进2个字符*/
text-indent: 2em;
}
.jiacu {
/*设置粗体样式*/
font-weight: bold;
}
body {
/*设置字体*/
font-family: "microsoft yahei";
}
</style>
</head>
<body>
<h3 class="bujiacu">我是标题，但我不默认加粗。</h3>
<h6>我是默认加粗的标题，并且是灰色。
<a href="p3.html" class="chaolianjie">我是超链接,但我不默认加下划线。</a>
<input type="text" placeholder="请输入查询条件(我有指定长度噢 300px)" class="wenbenkuang">
<input type="button" value="搜索">
<!-- 按钮的其他写法-->
<!-- <button> 我是按钮</button>-->
</h6>
<p class="suojin">我是第一段，我默认右对齐，但我首行缩进了。（我和第二段的缩进距离一样）</p>
<p class="jiacu">我是加粗文字，我默认右对齐。</p>
<p class="suojin">我是第二段，我默认右对齐，但我首行缩进了。（我和第一段的缩进距离一样）</p>
<p style="text-align: center">我是图片，我不能直接设置对齐方式，要通过父级标签设置。 <img src="down.png" title="我是居中对齐的图片"></p>
</body>
</html>8 Chrome调试工具
https://www.bilibili.com/video/BV1pE411q7FU?p=91&spm_id_from=pageDriver
二 进阶
1 Emmet 语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快速生成</title>
<style>
/*快速生成样式语法*/
.div {
/*首字母加数值*/
/*w20px*/
width: 20px;
}
</style>
</head>
<body>
<!--快速生成结构语法-->
<!--div tab-->
<div></div>
<!--div*3 tab-->
<div></div>
<div></div>
<div></div>
<!--ul>li*3 tab-->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!--ul+ol tab-->
<ul></ul>
<ol></ol>
<!--.nav tab 或 #nav-->
<div class="nav"></div>
<!--p.div tab-->
<p class="div"></p>
<!--.demo$*3 tab-->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<!--.div{ haha }*3 tab-->
<div class="div"> haha</div>
<div class="div"> haha</div>
<div class="div"> haha</div>
<!--.div{$}*3 tab-->
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
</body>
</html>2 css的复合选择器
复合选择器可以更准确，更高效的选择目标标签
复合选择器由多个基础选择器通过不同方式组成
1 后代选择器
2 子选择器
3 并集选择器
4 链接伪类选择器
5 ：focus选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复杂选择器</title>
<style>
/*一 后代选择器，又叫包含选择器。
空格隔开
选择器名可以多级标签 但标签级别是包含关系
缺点:被选择的标签可能不唯一，这时需要命名加以区分*/
ol li {
color: red;
}
/*二 子代选择器 只能选儿子级的选择器
大于号隔开*/
ul > li {
color: green;
}
/*三 并集选择器 可选择多组标签，并定义为相同的样式，用于集体声明
逗号隔开
任何选择器都可作为并集选择器
常竖着写 最后一个不加逗号*/
div,
p,
.pig li {
color: pink;
}
/*四 伪类选择器 用于向某些选择器添加特殊效果
:后加标签名
分为链接伪类，结构伪类等*/
/*1 未访问的链接 a:link
选中未访问过的链接 并进行修改*/
a:link {
color: hotpink;
}
/*2 已访问链接 a:visited*/
/*选中已访问过的链接 并进行修改*/
a:visited {
color: green;
}
/*3 a:hover 选中鼠标滑过的链接 并进行修改*/
a:hover {
font-size: 100px;
}
/*4 a:active 选中正在按下还未抬起的链接 并进行修改*/
a:active {
color: orange;
}
/*伪类选择器顺序不能乱LVHA*/
/*五 :focus伪类选择器 */
/*用于选取获得焦点的表单元素，常用input标签获取，主要使用在表单标签*/
/*当表单元素获取焦点时，进行修改*/
input:focus {
/*文本框背景颜色*/
background: hotpink;
/*文本框内文字颜色*/
color: wheat;
}
</style>
</head>
<body>
<!--ol>li{我是ul的li}*3-->
<ol>
<li>我是ol的li</li>
<li>我是ol的li</li>
<li>我是ol的li</li>
</ol>
<!--ul>li{我是ul的li}*3-->
<ul>
<li>我是ul的li</li>
<li>我是ul的li</li>
<li>我是ul的li</li>
</ul>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
<a href="https://www.bilibili.com/">我是bili</a>
<a href="https://www.baidu.com">我是baidu</a>
<input type="text" placeholder="点我变粉色">
</body>
</html>3 css的元素显示模式
1 是什么
元素以什么样的方式进行显示
2 元素显示模式分类
html总分为块元素和行元素。
1 块元素
1 独占一行
2 宽高，内外边距可修改
3 宽度默认为父级宽度的100%
4 是一个容器，里面可存放行内或块级元素
注意：文字类的标签内不能使用块级元素
2 行内元素
1 一行可显示多个
2 宽高直接设置无效
3 默认宽度是内容本身的宽度
4 只能存放文本或其他行内元素
注意：链接内不能放链接，链接内可存放块级元素，但链接转换一下块级模式最安全
3 行内块元素
1 一行可有多个行内块元素，但之间有间隔，比如图片，表单，单元格。
2 可以设置宽高
3 默认宽度是本身内容宽度
3 模式之间的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的显示转换</title>
<style>
.p3 {
width: 100px;
height: 100px;
/*行内元素转换为块级元素*/
display: block;
/*块级元素转换为行内元素
此时不能被直接设置宽高，原先的宽高失效。*/
/*display: inline;*/
/*转换为行内块*/
/*display: inline-block;*/
}
</style>
</head>
<body>
<a class="p3" href="https://www.bilibili.com">转换块级元素</a>此时我被独起一行，因为我之前的行级元素被块级转换了。
</body>
</html>4 截图工具 snipaste
5 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米侧边栏</title>
<style>
div {
background: darkgrey;
width: 150px;
}
a {
/*行级元素转为块级元素*/
display: block;
/*设置连接为白色*/
color: white;
/*设置连接没有下划线*/
text-decoration: none;
/*设置首行缩进2个字符*/
text-indent: 2em;
height: 50px;
/*使文字行高等于盒子高度即可实现文字垂直居中*/
line-height: 50px;
}
a:hover {
background: orange;
}
</style>
</head>
<body>
<div>
<a href="https://www.bilibili.com">手机 电话卡</a>
<a href="https://www.bilibili.com">v电视 盒子</a>
<a href="https://www.bilibili.com">笔记本 平板</a>
<a href="https://www.bilibili.com">出行 穿戴</a>
<a href="https://www.bilibili.com">智能 路由器</a>
<a href="https://www.bilibili.com">健康 儿童</a>
<a href="https://www.bilibili.com">耳机 音响</a>
</div>
</body>
</html>
三 css的背景
1 背景颜色 有透明值
background-color: transparent;2 背景图片
background-image: url("down.png");3 背景平铺
/*背景平铺 不平铺 顺x轴/y轴平铺*/
background-repeat: repeat;4 背景图片的位置
背景图片在背景中的位置
/*背景图片的方位式设置位置
当只有一个方式值时，第二个参数默认居中*/
background-position: center center;
/*精确式设置位置 x轴 y轴
指定一个数值时，另一个y轴居中*/
background-position: 20px 40px;
/*两种方式可以混合 但第一个值是x坐标，第二个是y坐标，两者空格隔开 比如center40px*/5 背景固定
6 背景属性复合写法（实际中常用）
属性值之间空格隔开。
7 背景颜色透明度
8 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style>
p {
/*变行内块级元素*/
display: inline-block;
background-image: url("img/message1Grey.png");
background-repeat: no-repeat;
width: 128px;
height: 120px;
/*设置行高等于图片高度来实现文字垂直居中效果*/
line-height: 120px;
text-align: center;
font-size: 20px;
}
/*伪类选择器*/
.img1:hover {
background-image: url("img/message1Pink.png");
color: #ea519e;
}
.img2:hover {
background-image: url("img/message1Yellow.png");
color: #f4ea2a;
}
.img3:hover {
background-image: url("img/message1Green.png");
color: #0e932e;
}
.img4:hover {
background-image: url("img/message1Blue.png");
color: #1296db;
}
</style>
</head>
<body>
<p class="img1">五彩导航</p>
<p class="img2">五彩导航</p>
<p class="img3">五彩导航</p>
<p class="img4">五彩导航</p>
</body>
</html> 
四 css的三大特性
1 层叠性
原则：样式冲突时，被下面的样式覆盖。
不冲突则不会覆盖。
2 继承性
子标签继承父标签的某些样式。
3 优先级
同个标签的选择器相同,执行层叠行
同个标签的选择器不同，根据选择器权重执行
选择器权重：（直接选中的标签）!important>行内式>id式>类/伪类选择器>标签选择器>继承的/*选择器
权重叠加：复杂选择器中可相加内含选择器的等级 并可与其他选择器等级相比较。
五 盒子模型
1 页面布局三大核心：
盒子模型，浮动，定位。
2 网页布局过程：
1 准备好网页元素(基本是盒子)
2 设置盒子样式（常用css）
3 盒子内添加内容
3 盒子组成:
边框（border） 组成：粗细，样式，颜色
复合写法：三者没有顺序
内边距（padding）：边框与内容的距离
外边距（margin）：盒子与盒子 的距离
4 关于margin是否影响盒子本身尺寸问题
注意：已经确定尺寸的盒子加内外边距会影响盒子大小 （内外边距会加在盒子内容的外围）
盒子本身没有指定宽高属性,此时padding不会影响
指定宽度的即便是100%加padding也会变得更大(会自动加滚动条来实现更大的效果)
所以:加了padding不用加宽度了,因为原来宽度会变大。
5 实现盒子水平居中
在盒子有宽高的情况下设置为margin: auto可实现水平居中
可将div内包含的行内块级元素（内含浮动元素不起作用）或图片看作文字,设置text-align: center可实现盒子居中。
是浮动元素是有时不能起作用，关系到浏览器的级别问题。
6 外边距合并问题
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
情况1：相邻块元素垂直外边距的合并（取大的值)
解决方法：两个盒子垂直时，只给一个盒子添加上下margin值
情况2：嵌套块元素垂直外边距的坍塌
解决方法：
解法1 ：给父元素定义边框可解决父元素塌陷问题 /*border: black solid 1px;*/
解法2 ：overflow:hidden;
解法3 ：在父元素里定义内边距 padding: 1px;
情况3 ：水平相邻块元素同时拥有相同margin问题
解决方法：
7 清除内外边距
*{
margin: 0px;
padding: 0px;
/*无序列表前的圆点也清除了*/
/*行内块尽量清除左右边距，设置的上下边距不起效果
行内块和块级元素随意*/
}行内块只清除左右边距，设置的上下边距不起效果
行内块和块级元素随意
8 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快报模块</title>
<style>
.divAll {
display: inline-block;
border: 1px black solid;
}
.divFirst {
display: block;
border-bottom: 1px black dotted;
height: 30px;
line-height: 30px;
font-size: 17px;
text-indent: 10px;
/*margin-left: 10px;这个盒子定义了边框，若设置边距，边框则会随之移动*/
}
.divSecond {
display: block;
text-indent: 20px;
}
/*这里可使每个p获得焦点，
若.divSecond:hover则使这个盒子获得焦点，并不能实现每个p都拥有焦点*/
p:hover {
/*设置拥有下划线*/
text-decoration: underline;
}
/*ul {*/
/* margin: 0px;*/
/* padding-left: 0px;*/
/* !*去掉小圆点*!*/
/* list-style: none;*/
/* text-indent: 20px;*/
/*}*/
</style>
</head>
<body>
<div class="divAll">
<div class="divFirst">品优购快报</div>
<div class="divSecond">
<p>【特惠】爆款耳机5折秒！</p>
<p>【特惠】母亲节，健康好礼低至5折！</p>
<p>【特惠】9.9元洗100张照片！</p>
<p>【特惠】长虹只能空调立省1000！</p>
<!--此处p效果li也可实现,
但是li和p的行高不一样，仅设置两者行高不能解决问题-->
<!-- <ul>-->
<!-- <li>【dfa】</li>-->
<!-- <li>【dfas】</li>-->
<!-- </ul>-->
</div>
</div>
</body>
</html>
9 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style>
/*已经确定尺寸的盒子加内外边距会影响盒子大小 （内外边距会加在盒子内容的外围）*/
/*盒子本身没有指定宽高属性,此时padding不会影响盒子大小*/
/*指定宽度的即便是100%加padding也会变得更大(会自动加滚动条来实现更大的效果)*/
/*所以:加了padding不用加宽度了,因为原来宽度会变大。*/
p {
/*转为行内块元素*/
display: inline-block;
height: 25px;
font-size: 13px;
line-height: 25px;
padding: 10px;
}
/*可将div内包含的行内块级元素或图片看作文字,设置文字居中可实现盒子居中*/
div {
text-align: center;
}
.right1 {
margin-left: 200px;
}
/*伪类选择器
行内块（所有p标签）实现获取焦点的效果*/
p:hover {
background-color: #edeef0;
color: #ff8500;
border: none;
}
/*写在下面以此使此标签拥有独立效果*/
.right1:hover {
background-color: transparent;
}
</style>
</head>
<body>
<div>
<p class="left1">设为首页</p>
<p>手机新浪</p>
<p>移动客户端<img src="img/downOrange.png">
<!-- <ul>-->
<!-- <li>新浪微博</li>-->
<!-- <li>新浪新闻</li>-->
<!-- <li>新浪财经</li>-->
<!-- <li>新浪体育</li>-->
<!-- <li>新浪升学帮</li>-->
<!-- <li>新浪港股通</li>-->
<!-- <li>新浪博客</li>-->
<!-- <li>天气通</li>-->
<!-- </ul>-->
</p>
<p class="right1">您好，</p>
<p>我的账户<img src="img/downOrange.png"></p>
<p>微博<img src="img/downOrange.png"></p>
<p>博客<img src="img/downOrange.png"></p>
<p>邮箱<img src="img/downOrange.png"></p>
<p>网页导航</p>
</div>
</body>
</html> 
10 圆角边框
11 盒子阴影
div:hover {
/*水平阴影（可负值) 垂直阴影（可负值） 模糊距离 阴影尺寸 阴影颜色 内外阴影（外部
不写此属性，但内部必须写inset）
前两属性必须写
阴影不占空间尺寸，不影响其他盒子排列*/
box-shadow: 10px 10px 10px 10px #cdd0cf inset;
}12 文字阴影
p:hover {
/*水平阴影（可负值) 垂直阴影（可负值） 模糊距离 阴影颜色*/
text-shadow: 10px 10px 10px #a6aeb2;
}六 浮动
1 浮动排列特性
传统的网页布局方式为标准流。
浮动盒子脱离标准流。
1 标准流（普通流/文档流）布局：
按标签默认规定的方式排列。
2 浮动
1 作用：更好的实现块级元素的横向排列。
2 含义：创建一个浮动框，可在（任何级别元素都可加浮动）另一个浮动框边缘外水平移动。
3 特性：
1 浮动元素会脱离标准流（中所占的位置），不再保留原先的位置
2 浮动元素会一行内显示并且元素顶部对齐
3 浮动元素会具有行内块元素的特性
4 浮动元素父级元素一行内无法显示时会自动换行显示
3 浮动布局注意点：
1 浮动与标准流父盒子搭配
父元素用标准流排列上下位置
子元素用浮动排列左右位置
2 一个元素是浮动， 理论上兄弟元素也浮动。
3 浮动盒子会影响后面标准流的盒子，不影响前面的标准流盒子。
4 里面有浮动盒子的父盒子，父盒子常无法给确定的高度值，父盒子没有高度则其之下的标准流盒子会上走叠在浮动盒子的下面。（所以要清除浮动）
2 为什么要清除浮动
1 清除浮动元素造成的影响
2 父盒子有确定高度则不用清除浮动
3 清除浮动后，父盒子就能根据浮动子盒子自动检测高度，下面的标准流盒子就不会被影响。
3 清除浮动的方式
本质：清除受浮动子元素的标准流父元素造成的影响
策略：闭合浮动，只让浮动元素在标准流父盒子内部活动
1 额外标签法（隔墙法），w3c推荐
含义：在末浮动子元素后加同级的额外空标签，清除浮动样式。
优点：简单方便
缺点：添加的标签无意义，结构化较差。
注意：这个空标签必须是块级元素。
<div class="p0 clearfix">
<div></div>
<div></div>
<!-- <div class="last" style="clear:both;"></div>-->
</div>
2 父级加overflow
/*方法1：加了此属性会自动检测浮动子元素高度，不能用定位属性连用
若不加：浮动元素高于父高则会溢出，溢宽会自动换行*/
/*overflow: auto;*/优点：简洁
缺点：溢出的浮动盒子不会自动换行，会截断。
3 父级加after伪元素
/*父级加after伪元素*/
/*.clearfix::after {*/
/* content: "";*/
/* clear: both;*/
/* display: table;*/
/*}*/4 父级添加双伪元素
/*方法3 ：双伪元素清除浮动*/
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}4 常见图片格式优缺点
七 定位
1 含义
让盒子自由在某个盒子内部移动位置或固定在屏幕中某个位置，且能压住其他盒子。
2 与浮动的区别
浮动可让多个块级盒子在一行内没有缝隙排列显示，常s用于横向排列盒子。
3 组成
定位=定位模式（指定一个元素在文档中的定位方式）+边偏移（决定该元素最终位置）
4 分类
1 静态定位 static
2 相对定位（重要）relative
相对于自身原来的位置进行移动。
特点：
1 相对于自身原来位置移动
2 原来位置继续占有（不脱标），后面盒子无法因此移动。
3 绝对定位（重要） absolute
相对于祖先元素进行移动。
特点：
1 没有父盒子或父元素没有定位属性，则以浏览器为父盒子
2 如果父盒子有定位属性（相对，绝对，固定定位），则以最近一级有定位祖先元素为参考点移动位置（对于父级没有定位属性但父级的上级有定位属性）。
3 绝对定位不再占有原本位置（脱标），后面盒子会占有盒子原有位置。（轮播图采用此定位方式）
3.1 绝对定位盒子的居中算法
.divcenter {
position: absolute;
/*版心一半*/
left: 50%;
top: 50%;
width: 100px;
margin-top: 80px;
/*再左移盒子一半宽度使其达到居中效果*/
margin-left: -25px;
}4 固定定位（重要） fixed
固定于浏览器可视区域。常用于浏览器页面滚动时元素的位置不会改变。
特点：
1 以浏览器可视窗口（可随浏览器进行缩放）为参照点进行移动。
2 与父元素/版心无任何关系。（与浏览器内的任何元素都无关系）
3 不随滚动条滚动。
4 固定定位不占有本身位置（脱标），其他元素可占有它的位置。
5 相当于一种特殊的绝对定位。
4.1如何把元素固定定位在版心位置（重要）
position: fixed;
/*浏览器的50%*/
left: 50%;
/*版心的一半为紧贴版心边缘*/
margin-left: 555px;
bottom: 5%;4.2 固定定位与绝对定位的特殊性
脱标（浮动元素，绝对/固定定位元素）的元素不会出发外边距合并问题。
绝对/固定定位盒子会完全压住标准流盒子（不论内的文字或图片）。
浮动定位盒子会完全压住标准流盒子但不压住标准流盒子内的文字或图片。（因为浮动最初用来做文字环绕效果）
5 粘性定位 sticky
相对定位与固定定位的混合，适用于在某一段空间里是固定的，但超越时则随之移动。
特点：
1 以浏览器的可是窗口为参照点移动元素。（固定定位特点）
2 占有原本的位置。（相对定位特点）
3 必须添加上下左右其中一个方位名词才有效。
4 兼容性差，ie不支持。
.div0{
/*使用条件：*/
/*父元素不能overflow:hidden或者overflow:auto属性。*/
/*必须指定top、bottom、left、right4个值之一，否则只会处于相对定位*/
/*父元素的高度不能低于sticky元素的高度*/
/*sticky元素仅在其父元素内生效*/
/*position: fixed;*/
/*top: 0px;*/
position: sticky;
top:0px;
font-size: 14px;
color: #ee763c;
font-weight: 700;
}注意：其中的边偏移
5 子绝父相
子绝对父相对，以便于把子固定在父盒子上且能压住。
6 定位元素叠放次序 z-index
7 网页布局总结
1 标准库流/浮动/定位使用场景
标准流：用于盒子上下/左右排列，垂直的块级盒子用标准流布局。
浮动：用于多个块级盒子水平显示。
定位：用于元素再某个盒子内随意移动，且能压住父盒子。
8 元素的显示与隐藏
1 display属性
用于设置一个元素如何显示。
none：隐藏对象但不消失（不再占有原本位置）
block：显示元素（也可转换为块级元素）
1.1 案例--遮罩层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遮罩层</title>
<style>
.dA {
position: relative;
}
.d1 {
background-image: url("img/htmlPic.png");
width: 600px;
height: 400px;
background-size: cover;
}
.d2 {
/*隐藏元素*/
display: none;
width: 600px;
height: 400px;
position: absolute;
top: 0px;
background: rgba(0, 0, 0, 0.5) url(img/dots.png) no-repeat center;
}
/*当鼠标经过这个盒子，就把d2显示出来*/
.dA:hover .d2 {
/*显示元素*/
display: block;
}
</style>
</head>
<body>
<div class="dA">
<div class="d1"></div>
<!-- 遮罩层-->
<div class="d2"></div>
</div>
</body>
</html>2 visibility属性
visible：元素可视
hidden：元素隐藏（仍占有原本位置）
3 overflow属性
让一个元素超出盒子的部分在页面中隐藏或超越盒 子显示出来
3.1 属性的使用案例
div {
display: inline-block;
height: 200px;
width: 200px;
background-color: white;
border: 2px solid orange;
}
.div1 {
overflow: visible;
}
.div2 {
overflow: hidden;
}
.div3 {
overflow: scroll;
}
.div4 {
overflow: auto;
}3.2 成果图
八 小橘猫案例
1 html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学成网</title>
<link rel="stylesheet" href="cssthere/AnliXueC.css">
</head>
<body>
<div class="div0">橘猫为你加油</div>
<!--总网页-->
<div class="divAll">
<!--导航栏部分
导航栏常用li+a的写法-->
<div class="div1">
<!-- 导航栏左-->
<div class="firstL">
<div><img src="img/logoOrangeCat.png" title="橘猫网"></div>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">学习计划</a></li>
</ul>
</div>
<!-- 导航栏右-->
<div class="firstR">
<li><a href="#">个人中心</a></li>
<!-- 导航栏右内的带有按钮的input元素-->
<div>
<input type="text " placeholder="请输入课程关键字"></a>
<button style="border: none;float:right;">
<img src="img/searchOrange.png">
</button>
</div>
</div>
</div>
<!--课程部分-->
<div class="div2">
<!-- 内含的侧边栏
常用li+a式的写法-->
<div class="secondIn">
<ul>
<!-- 特殊字符可用单独标签以便方便单独进行设置-->
<li class="secondIn1"><a href="#">前端开发<span>></span></a></li>
<li class="secondIn2"><a href="#">后端开发<span>></span></a></li>
<li><a href="#">移动开发<span>></span></a></li>
<li><a href="#">人工智能<span>></span></a></li>
<li><a href="#">商业预测<span>></span></a></li>
<li><a href="#">云计算/大数据<span>></span></a></li>
<li><a href="#">运维/测试<span>></span></a></li>
<li><a href="#">UI设计<span>></span></a></li>
<li><a href="#">产品<span>></span></a></li>
</ul>
</div>
<div class="secondCenter">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="secondBoth">
<ul>
<li class="turnR">></li>
<li class="turnL"><</li>
</ul>
</div>
</div>
<!-- 精品推荐-->
<div class="div3">
<ul>
<li>精品推荐</li>
<li><a href="#">JavaWeb</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">Spark</a></li>
<li><a href="#">MySql</a></li>
</ul>
</div>
<!-- 课程推荐-->
<div class="div4">
<p>优质课程</p>
<ul class="fourthIn">
<li>
<a href="https://www.bilibili.com/video/BV14J4114768">
<img style="width: 260px" src="img/cssPic.png">
<p>黑马前端pink老师前端零基础入门教程</p>
</a>
<p>
<a href="#">pink老师牛🐂老师<br/>
<em style="font-style: normal">来自于11112222的评价</em>
</a>
</p>
<p class="hott">HOT</p>
</li>
<li>
<a href="https://www.bilibili.com/video/BV1HE411e7vY">
<img style="width: 260px" src="img/vuePic.png">
<p>黑马前端VUE经典课程</p>
</a>
<p class="fourthInIn">
<a href="#">pink老师牛🐂老师<br/>
<em style="font-style: normal">来自于11112222的评价</em>
</a>
</p>
</li>
<li>
<a href="https://www.bilibili.com/video/BV18U4y1J7UP">
<img style="width: 260px" src="img/vue2.0Pic.png">
<p>黑马前端2021年全套VUE2.0+VUE3.0</p>
</a>
<p class="fourthInIn">
<a href="#">pink老师牛🐂老师<br/>
<em style="font-style: normal">来自于11112222的评价</em>
</a>
</p>
</li>
</ul>
</div>
<!-- 脚部-->
<div class="div5">
<ul>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于前端</a></li>
<li class="fifithR">更新时间:2021年8月30日</a></li>
</ul>
</div>
<div class="div6">
<img src="img/logoOrangeCat.png">
<p>呼唤<br/>小橘猫</p>
</div>
<div class="div7">
<img src="img/downOrange.png">
<p>回到顶部</p>
</div>
</div>
</body>
</html>2 css部分
.divAll {
background-color: #f4f5f7;
width: 1100px;
margin: auto;
overflow: hidden;
font-size: 16px;
}
a {
text-decoration: none;
color: black;
}
li {
margin: 0px;
padding: 0px;
list-style: none;
}
.div2,
.div2ZheXhaoCeng,
.div3,
.div4,
.div5 {
width: 900px;
margin: auto;
border-radius: 8px;
}
.div0 {
/*绝对使用条件：*/
/*父元素不能overflow:hidden或者overflow:auto属性。*/
/*必须指定top、bottom、left、right4个值之一，否则只会处于相对定位*/
/*父元素的高度不能低于sticky元素的高度*/
/*sticky元素仅在其父元素内生效*/
/*position: fixed;*/
/*top: 0px;*/
position: sticky;
top: 0px;
font-size: 14px;
color: #ee763c;
font-weight: 700;
}
.div1 {
width: 1100px;
height: 50px;
margin: 0px 0px 10px 0px;
}
.firstL div {
/*布局定位属性 ？级元素 定位 浮动 clear overflow visibility*/
display: inline-block;
float: left;
/*自身属性 宽高，边距 边框 背景色*/
height: 50px;
/*文本属性 颜色 字号 text-decoration 对齐 vertical-align white-space word-break-wrap: ;*/
line-height: 50px;
}
.firstL img {
/*自身属性*/
height: 50px;
margin-left: 20px;
}
.firstL li {
/*盒子不给宽高，用文字撑开*/
/*布局定位属性*/
display: inline-block;
float: left;
/*自身属性*/
margin: 0px 0px 0px 20px;
line-height: 50px;
}
.firstR li {
/*布局定位属性*/
display: inline-block;
float: right;
/*自身属性*/
margin-right: 30px;
height: 50px;
line-height: 50px;
}
.firstR div {
/*两个行内块元素加上浮动就不会有默认的间隔*/
display: inline-block;
float: right;
border: 1px solid #ee763c;
line-height: 20px;
height: 20px;
margin: 15px 20px 0px 0px;
}
.firstR img {
float: left;
height: 18px;
}
.firstR input {
padding-left: 5px;
border: none;
}
.div2 {
height: 450px;
/*background-color: #1296db;*/
/*注意图片目录*/
background-image: url("../img/htmlPic.png");
background-size: cover;
/*此属性可让背景图片自适应父盒子大小
auto:背景图片将保持100%(原尺寸)的大小显示，不进行任何缩放。
溢出部分被隐藏,当图片过小时，图片会自动平铺。
这种属性通常用来做重复性的背景或者做半透明图片背景。
cover：图片将被缩放至恰好能覆盖div，且图片被隐藏的部分最少，
适用于大图背景中。
contain：图片在父盒子里缩放至最大可完全展示尺寸，
若未填满父盒子则自动平铺*/
}
.secondIn {
width: 130px;
height: 450px;
}
.secondIn li {
/* ?这里的默认左外边距*/
display: inline-block;
height: 40px;
width: 130px;
line-height: 40px;
margin-left: -40px;
padding: 10px 10px 0px 20px;
background-color: rgba(206, 214, 215, 0.5);
/*去掉圆点*/
/*list-style: none;*/
border-radius: 4px;
}
.secondIn ul li a span {
float: right;
}
.secondCenter ul {
position: absolute;
/*版心一半*/
left: 50%;
top: 50%;
width: 100px;
margin-top: 110px;
/*再左移盒子一半宽度使其达到居中效果*/
margin-left: 15px;
background-color: #f4f5f7;
border-radius: 10px;
}
.secondCenter li {
float: left;
display: inline-block;
width: 10px;
height: 10px;
margin: 3px 10px 3px 0px;
background-color: #c1c5c4;
border-radius: 10px;
}
.turnL,
.turnR {
position: absolute;
top: 325px;
left: 50%;
width: 20px;
height: 20px;
text-align: center;
line-height: 15px;
font-size: 20px;
background-color: #f4f5f7;
border-radius: 20px;
font-weight: 700;
}
.turnL {
margin-left: -280px;
}
.turnR {
margin-left: 430px;
}
.div3 li {
display: inline-block;
/*用内边距加文字撑开盒子*/
padding: 10px 50px 10px 50px;
margin: 20px 10px 0px 0px;
background-color: rgb(250, 189, 123);
border-radius: 5px;
/*水平阴影（可负值) 垂直阴影（可负值） 模糊距离 阴影尺寸 阴影颜色 内外阴影（外部不写此属性，但内部必须写inset）
前两属性必须写 阴影不占空间尺寸，不影响其他盒子排列*/
box-shadow: 0px 3px 3px 3px rgba(193, 197, 196, 0.5);
}
.div4 {
/*让浮动子元素撑开盒子*/
overflow: hidden;
}
.div4 p {
margin-top: 40px;
}
.div4 .fourthIn li {
display: inline-block;
float: left;
position: relative;
margin: 20px 20px 20px 0px;
border-radius: 8px;
background-color: white;
border: 1px solid #c1c5c4;
/*不加粗*/
font-weight: 400;
}
.fourthIn p {
padding-left: 20px;
margin: 15px 10px 15px 0px;
font-size: 13px;
}
.fourthIn a {
color: black;
text-decoration: none;
}
.fourthIn p a {
font-size: 10px;
color: #c1c5c4;
}
.fourthIn li .hott {
/*加绝对定位 脱标*/
position: absolute;
background-color: #ffffff;
padding: 1px 5px 1px 5px;
border: 2px solid #ee763c;
/*清除上级盒子设置边距*/
margin: 0px 0px 0px 0px;
font-weight: 700;
color: #ee763c;
top: -5px;
right: -5px;
}
.div5 {
margin-top: 20px;
border-top: 1px solid #ee763c;
}
.div5 ul li {
display: inline-block;
float: left;
padding: 5px 10px 5px 10px;
margin: 10px 20px 20px 0px;
font-size: 10px;
border-radius: 2px;
}
.div5 ul .fifithR {
display: inline-block;
float: right;
}
/*浮动效果*/
.div1 a:hover {
color: #ee763c;
/*水平阴影（可负值) 垂直阴影（可负值） 模糊距离 阴影颜色*/
text-shadow: 10px 10px 10px #c1c5c4;
}
.div1 input:focus {
color: #ee763c;
}
.secondIn li:hover {
background-color: rgba(193, 197, 196, 0.5);
}
.secondCenter li:hover {
background-color: #ee763c;
}
.secondBoth li:hover {
color: #ee763c;
}
/*子代选择器 只选择子级标签*/
.div3 li:hover {
font-size: 18px;
}
.div4 > p:hover {
color: #ee763c;
/*水平阴影（可负值) 垂直阴影（可负值） 模糊距离 阴影颜色*/
text-shadow: 10px 10px 10px #c1c5c4;
}
.fourthIn li:hover {
box-shadow: 3px 3px 5px 3px #c1c5c4;
}
.div5 ul li:hover,
.div5 ul a:hover {
color: #ee763c;
text-shadow: 10px 10px 10px #c1c5c4;
}
.div6 {
position: fixed;
padding: 5px 10px 5px 10px;
font-size: 14px;
top: 20px;
right: 20px;
color: #ee763c;
text-align: center;
}
.div6 img {
background-color: white;
margin-bottom: -20px;
width: 30px;
}
.div7 {
position: fixed;
/*浏览器的50%*/
left: 50%;
/*版心的一半为紧贴版心边缘*/
margin-left: 555px;
bottom: 5%;
font-size: 14px;
}
.div7 img {
width: 30px;
transform: rotate(180deg);
margin: 0px 0px -20px 10px;
}
3 成品图
4 过程注意
1 绝对定位使用条件
/*绝对使用条件：*/
/*父元素不能overflow:hidden或者overflow:auto属性。*/
/*必须指定top、bottom、left、right4个值之一，否则只会处于相对定位*/
/*父元素的高度不能低于sticky元素的高度*/
/*sticky元素仅在其父元素内生效*/
2 属性书写优先级
3 background-size
background-size: cover;
此属性可让背景图片自适应父盒子大小
auto:背景图片将保持100%(原尺寸)的大小显示，不进行任何缩放。 溢出部分被隐藏,当图片过小时，图片会自动平铺。 这种属性通常用来做重复性的背景或者做半透明图片背景。
cover：图片将被缩放至恰好能覆盖div，且图片被隐藏的部分最少， 适用于大图背景中。
contain：图片在父盒子里缩放至最大可完全展示尺寸， 若未填满父盒子则自动平铺
4 盒子/文字阴影
/*水平阴影（可负值) 垂直阴影（可负值） 模糊距离 阴影尺寸 阴影颜色 内外阴影（外部不写此属性，但内部必须写inset） 前两属性必须写 阴影不占空间尺寸，不影响其他盒子排列*/ box-shadow: 0px 3px 3px 3px rgba(193, 197, 196, 0.5);
/*水平阴影（可负值) 垂直阴影（可负值） 模糊距离 阴影颜色*/ text-shadow: 10px 10px 10px #c1c5c4;
534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
