目录
CSS
CSS(Cascading Style Sheet)：级联样式表，也是一种标记语言，没有逻辑，只有起作用和不起作用之分，主要是完成页面的样式（长什么样）和布局（标签的位置）
CSS三种引入方式
- 行间式：写在标签的style属性样式中
- 优点：书写直接，优先级最高
- 缺点：可读性差，没有复用性
- 内联式：写在head标签中的style样式中
- 优点：可读性强，有复用性
- 缺点：但是不能被其他HTML页面使用
- 外联式：写在外部css文件中，在HTML文件中通过link标签引入css文件
- 优点：可读性强，有复用性，适合团队开发（文件级别的复用性）
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css三种引入方式</title>
<!-- 内联式 -->
<!--在head标签中的style标签内-->
<style>
h2 {
color: red;
font-size: 100px;
text-align: center;
}
</style>
<!-- 外联式 -->
<!-- 在外部css文件中，在html文件中通过link标签引入css文件 -->
<link rel="stylesheet" href="css/样式引入.css" />
</head>
<body>
<!-- 行间式 -->
<!-- 直接书写在标签style属性中 -->
<h1 style="color: red; font-size: 100px; text-align: center;">css的引入 </h1>
<h1>h1标签</h1>
<h2>h2标签</h2>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h4>h4标签</h4>
</body>
</html>
外部css文件
# css/样式引入.css
h3 {
color: green;
}
h4 {
font-size: 25px;
text-align: center;
}
三种css引入的优先级
- 行间式优先级最高
- 内联式和外联式优先级一样，由于html属于解释性语言，写在下面的会把上面的样式覆盖掉
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的引入</title>
</head>
<body>
<h3>h3标签</h3>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h4 style="font-size: 100px">h4标签</h4>
</body>
<style>
h4 {
color: #ff7800;
font-size: 20px;
}
</style>
<link rel="stylesheet" href="css/样式引入.css">
</html>
CSS基础选择器
- 统配选择器
- 标签选择器
- 类选择器
- id选择器
优先级：!important > 行间式 > id选择器 > 类选择器 > 标签选择器 > 统配选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css基础选择器</title>
<style>
/*优先级：可以从作用范围来判断 - 作用范围越精确，优先级越高 */
/*1、统配选择器*/
* {
color: pink;
font-size: 12px;
}
/*2、标签选择器*/
h1 {
font-size: 20px;
}
/*3、类选择器*/
.h {
font-size: 30px!important;
}
.h2 {
font-size: 40px;
}
.h.h2 {
font-size: 50px;
}
/*4、id选择器*/
#hhh {
font-size: 100px;
}
</style>
</head>
<body>
<h1 class="h">1标题</h1>
<h2 id="hhh" class="h h2" style="font-size: 12px">2标题</h2>
</body>
</html>
CSS高级选择器
- 后代（子代）选择器
- 兄弟（相邻）选择器
- 群组选择器
- 交叉选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高级选择器</title>
<style>
.h2 {
color: red;
}
/*1、后代(子代)选择器*/
/*后代：空格连接 子代：>连接*/
/*body > .h2 控制一个 | body .h2 控制两个*/
body > .h2 {
font-size: 40px;
}
/*2、兄弟(相邻)标签：只能上兄弟修饰下兄弟*/
/*兄弟：~连接 相邻：+连接*/
/*.h3 + .h4 控制一个 | .h3 ~ .h4 控制两个*/
.h3 + .h4 {
color: pink;
}
/*3、群组选择器：控制多个选择器*/
.h2, body h3, h4 {
text-align: center;
}
/*4、选择器的优先级：权重 - 个数*/
/*权值：不同级别没有可比性、同一级别比个数、选择器类型不影响优先级、优先级一致看顺序
*：1
标签：10
class(伪类)：100
id：1000
!important：10000
*/
#h6 {
color: black;
}
.d1 div h6 {
color: pink;
}
.d2 h6 {
color: brown;
}
body h6 {
color: cyan;
}
div > h6 {
color: orange;
}
h6 {
font-size: 100px;
text-align: center;
color: red;
}
</style>
<style>
/*5、交叉选择器*/
h6#h6.h.hh {
color: chartreuse;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">
<h6 id="h6" class="h hh">css高级选择器优先级</h6>
</div>
</div>
<h3 class="h3">第1个h3</h3>
<h4 class="h4">第1个h4</h4>
<h4 class="h4">第2个h4</h4>
<h3 class="h3">第1个h3</h3>
<div>
<h4 class="h4">第1个h4</h4>
<h4 class="h4">第2个h4</h4>
</div>
<h2 class="h2">h2标签</h2>
<div>
<h2 class="h2">div下的h2</h2>
</div>
<p>p标签的内容不水平居中</p>
</body>
</html>
伪类与属性选择器
-
伪类选择器
-
伪类选择器优先级和类选择器相同
-
选择器:nth-child()：先确定位置，再筛选选择器，在同一结构下都是相同选择器时使用
-
选择器:nth-of-type：先确定选择器，在确定位置，在同一结构下不全是相同选择器时使用
-
-
属性选择器
- 属性选择器优先级和类选择器相同
- [属性名]查找所有有该属性的标签
- [属性名=属性值]精确查找
- [属性名^=值]以某某值开头
- [属性名*=值]包含某某值(模糊查询)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
.p {
background-color: orange;
}
/*先确定位置，再筛选选择器*/
p:nth-child(3) {
background-color: red;
}
/*先确定选择器，在匹配位置*/
p:nth-of-type(3) {
background-color: brown;
}
p.p3 {
background-color: cyan;
}
</style>
<style>
.h4 {
color: orange;
}
[class='h4'] {
color: brown;
}
[owen*='owen'] {
color: pink;
}
[owen^='o'] {
color: blueviolet;
}
</style>
</head>
<body>
<h4 class="h4" owen="oooowennnnn">owen</h4>
<h4 class="h4" owen="zero">zero</h4>
<div>
<p class="p">第1个p</p>
<p class="p">第2个p</p>
<p class="p p3">第3个p</p>
<p class="p">第4个p</p>
<p class="p">第5个p</p>
</div>
<div>
<div>
<h3>h3标签</h3>
<p class="p">第1个p</p>
<p class="p">第2个p</p>
<p class="p">第3个p</p>
<p class="p">第4个p</p>
<p class="p">第5个p</p>
</div>
</div>
</body>
</html>
a标签的四大伪类
a标签的四种状态，可以有不同的样式
- a:link ：标签未被访问过
- a:hover ：标签被悬浮，就是鼠标放上去的时候
- a:active ：标签被激活，就是鼠标点击但未打开链接
- a:visited ：标签被访问过，打开链接了
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a标签的四大伪类</title>
<style>
/*一、a的四大伪类*/
a {
font-size: 30px;
}
/*1、标签没有被访问过*/
a:link {
color: orange;
}
/*2、标签被悬浮*/
a:hover {
/*鼠标样式*/
/*wait row-resize none text pointer default*/
cursor: pointer;
}
/*3、标签被激活*/
a:active {
color: pink;
cursor: wait;
}
/*4、标签已被访问过*/
a:visited {
color: brown;
}
</style>
<style>
/*二、reset操作*/
/*在开发中往往用不到四种伪类，且要清除掉系统的默认样式*/
/*就可以如下对a标签进行样式设置：清除系统默认样式 - reset操作*/
a {
color: black;
text-decoration: none;
}
</style>
<style>
/*三、普通标签的伪类运用*/
.btn {
80px;
height: 45px;
background-color: orange;
}
/*字体*/
.btn {
font: bold 20px/45px 'STSong';
text-align: center;
}
/*边界圆角*/
.btn {
border-radius: 5px;
}
/*不允许文本操作*/
body {
user-select: none;
}
/*伪类*/
.btn:hover {
cursor: pointer;
background-color: orangered;
}
.btn:active {
background-color: brown;
}
</style>
</head>
<body>
<div class="btn">按钮</div>
<a href="https://www.baidu.com">前往百度</a>
</body>
</html>
字体样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本属性</title>
<style>
.box {
300px;
height: 300px;
background-color: orangered;
}
.box {
/*大小*/
font-size: 30px;
/*颜色*/
color: blue;
/*字族*/
font-family: "STSong", "新宋体", "Arial";
/*字重: lighter | normal | bold | 100 ~ 900*/
font-weight: 500;
/*字体样式: normal | italic | oblique */
font-style: oblique;
}
.box {
/*文本划线: underline | line-through | overline | none*/
text-decoration: none;
/*文本水平位置: left center right*/
text-align: center;
/*行高*/
line-height: 300px;
/*文本垂直对齐方式: baseline top bottom*/
vertical-align: top;
}
.box {
/*整体设置*/
font: bold 20px/300px '黑体', 'Arial';
color: darkcyan;
text-align: left;
/*首行缩进*/
text-indent: 20px;
/*字间距*/
letter-spacing: 10px;
/*词间距*/
word-spacing: 5px;
}
</style>
</head>
<body>
<div class="box">
文本ABC ab
</div>
</body>
</html>
边界圆角
border-radius属性，默认从左上角开始，顺时针编号，当不足的时候，就和对角相同，如果要进行横纵分离，用/分开，先横后纵
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边界圆角</title>
<style>
.box {
300px;
height: 300px;
background-color: orangered;
}
.box {
/*固定值 | 百分比*/
/*border-radius: 10%;*/
/*左上为第一个角，顺时针编号*/
/*border-radius: 10px 20px 30px 40px;*/
/*不足找对角*/
/*border-radius: 10px 50px 100px;*/
/*border-radius: 10px 50px;*/
/*横纵分离,先横后纵*/
/*border-radius: 50px / 50%;*/
/*border-radius: 50px 100px / 50%;*/
border-radius: 60%;
}
</style>
<style>
.b {
300px;
height: 150px;
background-color: orangered;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="b"></div>
</body>
</html>
背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片</title>
<style>
.box {
300px;
height: 300px;
background-color: orangered;
}
.box {
/*显示比屏幕大的图片：缩放尺寸*/
/*background-image: url("img/kj.gif");*/
/*尽量只设置宽，高等比缩放，不失真*/
/*background-size: 300px 300px;*/
}
.box {
/*显示比屏幕小的图片：处理平铺与位置*/
background-image: url("img/lss.jpg");
/*平铺: repeat-x repeat-y repeat no-repeat*/
background-repeat: no-repeat;
/*位置*/
/*1.只设置x轴，y轴默认center*/
/*2.x轴：left center right 具体像素 百分百*/
/*2.y轴：top center bottom 具体像素 百分百*/
background-position: center center;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
显示方式
display属性
- block：自带换行，支持设置宽高，所有有宽高、参与位置布局的都是block
- inline：不自带换行，也不支持设置宽高，宽高只能通过文本撑开，一行显示不下会自动换行(保留数据的整体性)
- inline-block：支持设置宽高，不带换行，当一行显示不下时，以标签为整体进行换行，一般不去主动设置该显示方式，系统的两个img、input都设置为了单标签(不会嵌套任何东西)，如果要用inline-block参与布局，为了标签布局不受内容影响，设置vertical-align对齐属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示方式</title>
<style>
.box {
500px;
height: 100px;
background-color: orangered;
}
</style>
<style>
a {
500px;
height: 100px;
display: block;
background-color: pink;
}
owen {
100px;
height: 100px;
display: inline-block;
background-color: cyan;
font-size: 30px;
/*文本垂直对齐方式: baseline top bottom*/
vertical-align: top;
}
owen:nth-of-type(2) {
font-size: 20px;
}
img {
100px;
height: 100px;
background-color: tan;
}
input {
100px;
height: 100px;
background-color: tan;
vertical-align: top;
}
</style>
</head>
<body>
<a href="5.边界圆角.html" class="box"></a>
<div>div1</div>
<div>div2</div>
<a href="">a1</a>
<a href="">a2</a>
<owen>html/css</owen>
<owen>javascript</owen>
<owen></owen>
<owen></owen>
<owen></owen>
<img src="img/lss.jpg" alt="">
<input type="text">
<div></div>
</body>
</html>
两种布局方式
盒模型布局
盒模型组成：margin + border + padding + content
-
每部分都有自己的独立区域
-
content是宽x高，作为内容或子标签的显示区域
-
padding是内边距，没有自身颜色，完成内容的内移(保证显示区域大小不变，可以响应减小content)
-
border是边框，有宽度、样式、颜色，自身透明(transparent)时，是可以透出背景颜色的
-
margin是外边距，控制盒子的显示位置，left、top控制自身，right、bottom影响兄弟
- 注意：margin的偏移依据当前所在位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型布局</title>
<style>
body {
margin: 0;
padding: 100px 0 0 200px;
}
div {
100px;
height: 100px;
background-color: red;
}
owen {
/*margin: 10px;*/
margin-top: 50px;
margin-left: 10px;
/*margin-right: 10px;*/
/*margin-bottom: 100px;*/
}
owen {
/*border-color: black;*/
/*border- 3px;*/
/*none solid dashed dotted*/
/*border-style: solid;*/
border: red dashed 10px;
}
owen {
/*padding: 上右下左，不足找对边*/
/*padding: 10px 20px 30px;*/
padding: 10px;
}
owen {
display: block;
/* 100px;*/
80px;
/*height: 100px;*/
height: 80px;
background-color: orange;
}
</style>
</head>
<body>
<!--
盒模型：
概念：广义上页面中所有的标签都称之为盒子，狭义上布局的盒子指的是display:block
-->
<owen>123</owen>
<div></div>
</body>
</html>
浮动布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动布局</title>
<style>
.wrap {
border: 10px solid yellow;
300px;
/*父级在宽度不固定时高度不能设置死*/
/*height: 300px;*/
}
/*清浮动：父级清浮动，就是在自己宽度是否确定下，都能保证父级的高度刚刚好包裹子集*/
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
100px;
height: 100px;
background-color: orange;
border-radius: 50%;
font: 20px/100px 'Arial';
color: blue;
text-align: center;
}
.box {
float: left;
}
.b {
500px;
height: 100px;
background-color: red;
}
/*浮动布局：
1.子集浮动参照父级宽度
2.子集浮动不再撑开父级高度
3.父级高度需要自己处理，否则会影响兄弟布局，采用清浮动处理
*/
</style>
<style>
h1:before {
content: '123';
}
/*当控制的控制自身完成所有布局（包含所有子集布局），再执行该时间点*/
h1:after {
content: '000';
}
</style>
</head>
<body>
<h1>内容</h1>
<!--.wrap>.box{$}*9-->
<div class="wrap">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
<div class="b"></div>
</body>
</html>
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两种布局总结</title>
<style>
body, h1 {
margin: 0;
}
</style>
<style>
.header {
1210px;
height: 100px;
background-color: orange;
/*自动获取留白区域*/
/*margin-left: auto;*/
/*margin-right: auto;*/
margin: 0 auto;
}
.header:after {
content: '';
display: block;
clear: both;
}
.header a {
display: block;
500px;
height: 100px;
background-color: red;
float: left;
}
.header form {
/*background-color: pink;*/
float: right;
/*父子级顶端产生距离，建议使用padding*/
padding-top: 30px;
}
.header input {
/*margin-right: 20px;*/
220px;
height: 30px;
border: none;
font-size: 17px;
vertical-align: top;
}
.header button {
32px;
height: 32px;
border: none;
background-color: red;
outline: none;
color: white;
margin-right: 30px;
vertical-align: top;
}
</style>
</head>
<body>
<!--盒模型:margin、padding协调操作，能用padding尽量用padding，再考虑用margin-->
<!--浮动:需要左右排列的block采用浮动布局，且父级一定要清浮动-->
<div class="header">
<h1>
<a href=""></a>
</h1>
<form method="get" action="https://www.baidu.com/s">
<input type="text" name="wd">
<button type="submit">Go</button>
</form>
</div>
</body>
</html>
显示与隐藏
- 通过display属性，可以做到盒子的显示与隐藏，当设置为none的时候，盒子在页面中不进行占位，不可以做成动画
- 通过opacity属性，设置页面透明度，0~1之间，当设为0的时候，则是消失，但是会在页面中占位，可以做成动画
- 通过改变盒子的宽高进行，当宽和高都设为0的时候，就是隐藏的状态，此时不会再页面中占位，可以做成动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>显示与隐藏</title>
<style>
body {
margin: 0;
}
div {
200px;
height: 200px;
background-color: orange;
font: 30px/200px 'Arial';
color: red;
text-align: center;
margin: 0 auto;
border-radius: 50%;
}
</style>
<style>
/*display
值为none时，盒子会被隐藏，且不在页面中占位
*/
.box2 {
display: none;
transition: 1s;
}
.box1:hover ~ .box2 {
display: block;
}
.box2:hover {
display: block;
}
</style>
<style>
/*opacity
值为0~1，控制盒子的透明度，但是消失后，在页面中占位
*/
.box4 {
/*背景颜色不能操作文本*/
/*background-color: rgba(0,0,0,0);*/
opacity: 0;
/*过度效果*/
transition: 1s;
}
.box3:hover ~ .box4 {
opacity: 1;
}
.box4:hover {
opacity: 1;
}
</style>
<style>
.box6 {
0;
height: 0;
/*超出content以外的内容如何处理：hidden隐藏*/
overflow: hidden;
transition: 1s 0s ease;
/*过渡的属性个数可以自定义*/
/*transition-property: width, background-color, height;*/
transition-property: all;
}
.box5:hover ~ .box6 {
200px;
height: 200px;
background-color: pink;
}
.box6:hover {
200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
<div class="box8">8</div>
</body>
</html>
盒子阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子阴影</title>
<style>
.box {
200px;
height: 200px;
background-color: orange;
margin: 200px auto;
/*opacity: 0;*/
transition: .3s;
}
.box {
/*x轴偏移 y轴偏移 虚化程度 阴影宽度 阴影颜色*/
/*box-shadow: -300px 0 10px 0 red, 300px 0 10px 0 blue;*/
}
.box:hover {
margin-top: 195px;
box-shadow: 0 5px 10px 0 #333;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
三种定位方式
固定定位
-
定位属性值：fixed
-
在页面中不再占位(浮起来了)
-
一旦定位后，定位的布局方位 top、bottom、left、right都能参与布局
-
固定定位的参考系是页面窗口(不是页面中的哪一点，而是四边参照四边)
-
左右同时存在，取左；同理上下取上
绝对定位
-
定位属性值：absolute
-
在页面中不再占位(浮起来了)，就无法继承父级的宽度(必须自己自定义宽度)
-
一旦定位后，定位的布局方位 top、bottom、left、right都能参与布局
-
绝对定位的参考系是最近的定位父级(不是父级中的哪一点，而是四边参照四边)
-
左右同时存在，取左；同理上下取上
-
当父级定位了，子级参照父级定位，又可以重新获取父级宽度(也可以在计算中拿到父级高度)
相对定位
-
定位属性值：relative
-
在页面中依旧占位，完全保留之前的所有布局
-
一旦定位后，定位的布局方位 top、bottom、left、right都能参与布局
-
相对定位的参考系是自身原有位置(当前位置)(不是自身中的哪一点，而是四边参照四边)
-
左右同时存在，取左；同理上下取上，布局移动后，也不影响自身原有位置(兄弟布局也不会变化）
作用：辅助于子级的绝对定位布局，一般不用于自身布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三种定位方式</title>
<style>
html, body {
min- 1000px;
}
body {
margin: 0;
height: 5000px;
}
.box {
260px;
height: 420px;
background-color: orange;
}
/*固定定位*/
.box {
position: fixed;
/*left: 10px;*/
right: 10px;
/*bottom: 50%;*/
top: calc(50% - 210px);
}
/*响应式布局*/
/*@media (min- 1000px) {*/
/*.box {*/
/*position: fixed;*/
/*!*left: 10px;*!*/
/*right: 10px;*/
/*bottom: 10px;*/
/*top: 10px;*/
/*}*/
/*}*/
</style>
<style>
.sup {
180px;
height: 260px;
background-color: orange;
margin: 100px auto;
}
.sub {
50px;
height: 80px;
background-color: red;
}
/*绝对定位*/
.sub {
position: absolute;
left: calc(50% - 25px);
right: 0;
bottom: 0;
top: calc(50% - 40px);
}
/*需求：
1）父级需要定位 - 辅助自己绝对定位，作为自己绝对定位的参考系
2）父级定位了，但是不能影响自身原有布局 - 虽然定位，但是不浮起来
结论：相对定位 => 父相子绝
*/
.sup {
/*父级相对定位的目的：1）不影响自身布局 2）辅助自己绝对定位布局*/
position: relative;
}
/*body {*/
/* 1000px;*/
/*height: 600px;*/
/*position: fixed;*/
/*}*/
/*.sup {*/
/*position: fixed;*/
/*}*/
</style>
<style>
.box1 {
300px;
height: 300px;
background-color: orange;
margin: 0 auto;
}
.h1 {
margin: 0;
}
/*相对定位*/
.box1 {
position: relative;
/*left: -10px;*/
bottom: 20px;
top: 400px;
}
</style>
</head>
<body>
<div class="box"></div>
<h1>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</h1>
<h1>h1h1h1</h1>
<h1>h1h1h1</h1>
<h1>h1h1h1</h1>
<div class="sup">
<div class="sub"></div>
<h3>hhhhhhhhhhhh</h3>
</div>
<h1 class='h1'>
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</h1>
<div class="box1"></div>
<h1 class='h1'>
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</h1>
</body>
</html>
小米悬浮商品案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位案例</title>
<style>
body {
margin: 0;
background-color: tomato;
}
.box {
234px;
height: 300px;
background-color: white;
margin: 100px auto 0;
/*父相子绝*/
position: relative;
}
.title {
64px;
height: 20px;
background-color: #e53935;
font-size: 12px;
color: white;
text-align: center;
/*绝对定位*/
position: absolute;
top: 0;
left: calc(50% - 32px);
/*默认消失，有数据就 show 显示*/
display: none;
}
.show {
display: block;
}
/*大家都定位浮起来，很容易出现层次重叠 z-index绝对显示层次*/
/*z-index: 值为大于等于1的正整数，不需要有序*/
.title {
z-index: 666;
}
.img {
z-index: 10;
}
.img {
position: absolute;
top: 35px;
left: calc(50% - 75px);
}
.img img {
150px;
/*高会等比缩放*/
}
.logo {
position: absolute;
bottom: 70px;
font-size: 15px;
text-align: center;
inherit;
}
.price {
text-align: center;
position: absolute;
inherit;
bottom: 30px;
font-size: 14px;
}
.price span:first-child {
color: #ff6700;
}
.price span:last-child {
text-decoration: line-through;
color: #aaa;
}
.bottom {
inherit;
height: 0;
background-color: yellow;
z-index: 888;
transition: .2s;
/*将超出内容隐藏*/
overflow: hidden;
position: absolute;
bottom: 0;
}
.box:hover .bottom {
height: 80px;
}
.box {
transition: .2s;
}
.box:hover {
box-shadow: 0 5px 10px 0 #ccc;
margin-top: 95px;
}
</style>
</head>
<body>
<div class="box">
<div class="title show">减 100 元</div>
<!--外层完成位置布局，内存完成内容展示-->
<div class="img">
<img src="img/001.jpg" alt="">
</div>
<h3 class="logo">小米电视4A 32寸</h3>
<p class="price">
<span>699元</span>
<span>799元</span>
</p>
<div class="bottom">
<h5>嘻嘻嘿嘿哈哈-呵呵！！！</h5>
<p>来自<a href="">Owen</a>的评论</p>
</div>
</div>
</body>
</html>
overflow属性
1）默认子级(内容)超出父级显示区域，不会做任何处理(正常显示)
2）overflow: hidden; - 隐藏超出的内容
3）overflow: scroll; - 以滚动方式显示内容(一定会预留滚动条的占位)
4）overflow: auto; - 有超出内容才以滚动方式显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow属性</title>
<style>
.box {
200px;
height: 300px;
background-color: pink;
}
.box {
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。所有对象的默认值是 visible ，除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。对于 table 来说，假如 table-layout 属性设置为 fixed ，则 td 对象支持带有默认值为 hidden 的 overflow 属性。如果设为 scroll 或者 auto ，那么超出 td 尺寸的内容将被剪切。如果设为 visible ，将导致额外的文本溢出到右边或左边（视 direction 属性设置而定）的单元格。自IE5开始，此属性在MAC平台上可用。自IE6开始，当你使用 !DOCTYPE 声明指定了 standards-compliant 模式，此属性可以应用于 html 对象。对应的脚本特性为 overflow 。
</div>
</body>
</html>
轮播图菜单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局案例</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.scroll-view {
1226px;
height: 460px;
background-color: orange;
margin: 50px auto 0;
position: relative;
}
.scroll-menu {
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
234px;
padding: 20px 0;
}
.scroll-menu a {
display: block;
/*height: 42px;*/
line-height: 42px;
color: white;
/*padding-left: 30px;*/
text-indent: 30px;
}
.scroll-menu a span {
/*参考的不是a，是ul*/
position: absolute;
right: 20px;
}
.scroll-menu a:hover {
background-color: red;
}
.scroll-menu-blank {
calc(1226px - 234px);
height: 460px;
background-color: red;
/*参考的是ul*/
position: absolute;
top: 0;
left: 234px;
display: none;
}
.scroll-menu li:hover ~ .scroll-menu-blank {
display: block;
}
.scroll-menu-blank:hover {
display: block;
}
</style>
</head>
<body>
<div class="scroll-view">
<!--轮播图-->
<div class="scroll-scroll"></div>
<!--菜单栏-->
<ul class="scroll-menu">
<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="">
手机电话卡
<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>
<div class="scroll-menu-blank">
</div>
</ul>
</div>
</body>
</html>