CSS
HTML+CSS+JavaScript
结构+表现+交互
HTML+CSS英文教程,有时间看看。https://www.cntofu.com/book/61/learning/html-css.md
- 什么是CSS
- CSS 怎么用(快速入门)
- CSS选择器(重点+难点)
- 美化网页(文字、阴影、超链接、列表、渐变)
- 盒子模型
- 浮动
- 定位
- 网页动画(特效效果)
1. CSS简介
1.1 CSS 是什么?
- CSS 指的是层叠样式表(级联样式表*) (*Cascading Style Sheets)
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
- CSS 节省了大量工作。它可以同时控制多张网页的布局
- 外部样式表存储在 CSS 文件中
- CSS: 表现(美化网页)
- 字体、颜色、边距、边框、高度、宽度、背景图片、网页定位、网页浮动
HTML 从未打算包含用于格式化网页的标签!
创建 HTML 的目的是描述网页的内容,例如:
<h1>这是一个标题。</h1>
<p>这是一个段落。</p>
将 之类的标签和 color 属性添加到 HTML 3.2 规范后,Web 开发人员的噩梦开始了。大型网站的开发将字体和颜色信息添加到每个页面中,这演变为一个漫长而昂贵的过程。
为了解决这个问题,万维网联盟(W3C)创建了 CSS。
CSS 从 HTML 页面中删除了样式格式!
1.2 CSS 发展史
CSS 1.0
CSS 2.0 DIV(块)+CSS, 提出了HTML与CSS分离的思想,网页变得简单,SEO
CSS 2.1 浮动+定位
CSS 3.0 圆角、阴影、动画…浏览器兼容性~
1.3 CSS 快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 规范:在html的head里可以在<style >块里编写css代码,称为内部CSS
语法:选择器{
声明1;
声明2;
。。。;
声明n;
声明(由属性和值组成);
每一个声明最好用分号结尾
不同的声明之间用分号间隔开
}
-->
<style>
h1{
background-color: green;
color: red;
}
</style>
</head>
<body>
<h1>这是一个一级标题,背景颜色为绿,颜色为红。</h1>
</body>
</html>
一般建议使用这种方式:
CSS优势:
- 内容和表现分离
- 网页结构表现统一,可以实现复用
- 样式十分的丰富
- 建议使用外部.CSS文件
- 利用SEO,容易被搜索引擎收录!
- Vue
1.4 CSS的3种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
内部样式
*/
h1 {
color: blueviolet;
background-color: blue;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级:就近原则-->
<!-- 行内样式,在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color: aqua;background-color: blueviolet">这是一个一级标题</h1>
</body>
</html>
/*
外部样式
*/
h1{
color: blue;
background-color: blueviolet;
}
扩展:外部样式的两种导入方式:
-
链接式:
<!--外部样式--> <link rel="stylesheet" href="css/style.css">
-
导入式:@import 是CSS 2.1 特有的
<style> /* 外部样式,导入式 */ @import url(css/style.css); </style>
2. 选择器
作用:选择页面上的某一个或者某一类元素
2.1 基本选择器
-
标签选择器 :选择一类标签 格式:标签{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器,会选择这个页面上所有带有这个标签 的元素*/ h1{ color: rgba(255, 31, 46, 0.78); background-color: #00ffdd; border-radius:25px ; } p{ font-size: 30px; } </style> </head> <body> <h1>我在学习</h1> <h1>我在学习个锤子</h1> <p>那只是错觉而已</p> </body> </html>
-
类选择器 class:选择所有class属性一致的标签,跨标签。 格式:.类名{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 类选择器的格式 .class的名称{} 好处,可以多个标签归类,是同一个class,可以复用 */ .first{ border-radius: 30px; background-color: blueviolet; color: red; text-align: center; } .second{ color: green; } </style> </head> <body> <h1 class="first">标题1</h1> <h1 class="second">标题2</h1> <h1>标题3</h1> <h1>标题4</h1> <h1>标题5</h1> <p class="first">为了验证标签归类</p> </body> </html>
-
id选择器 全局唯一 格式:#id名称{}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* id选择器格式,#id选择器名称{} id:必须保证全局唯一 */ #first{ border-radius: 30px; background-color: blueviolet; color: red; text-align: center; } #second{ color: green; } #third{ background-color: gold; } /* 验证就近原则 */ /* id选择器>class选择器>标签选择器 */ .title{ color:green; } h1{ color: red; } </style> </head> <body> <h1 id="first" class="title">标题1</h1> <h1 id="second">标题2</h1> <h1>标题3</h1> <h1>标题4</h1> <h1>标题5</h1>id <p id="third">id不可复用</p> </body> </html>
优先级:id>class>标签
2.2 层次选择器
-
后代选择器 在某个元素的后面 爷爷 爸爸 你
/* 后代选择器 */ body p{ background-color: yellow; }
-
子选择器 一代,儿子
/* 子选择器 */ body>p{ background-color: red; }
-
相邻兄弟选择器 同辈
/* 相邻兄弟选择器,只有一个,向下执行 */ .bro+p{ background-color: gold; }
-
通用选择器
/* 通用兄弟选择器,当前选中元素的向下的所有兄弟选择器 */ .bro~p{ background-color: brown; }
2.3 结构伪类选择器
伪类: 条件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 避免使用 class id 选择器 ,使ul的*/
/*ul的第一个子元素*/
ul li:first-child{
background-color: red;
}
/*ul的最后一个子元素*/
ul li:last-child{
background-color: blue;
}
/*选中p1,定位到父元素,选择当前的第一个元素
选择当前p元素的父级元素,选中父级元素的第一个子元素nth-child(1),必须是当前元素才生效
*/
h1:nth-child(1){
background-color: #00ffdd;
}
h1{
color: red;
}
p:nth-child(2){
background-color: greenyellow;
}
/*选中父元素下p元素的第二个类型*/
p:nth-of-type(2){
background-color: blue;
}
li:nth-child(2){
color: red;
}
a:hover{
background-color: red;
}
</style>
</head>
<body>
<a href="">假装这个是连接</a>
<h1>标题</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>无序列表:
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
2.4 属性选择器(常用)
id+class结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
float:浮动
*/
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
background-color: lightblue;
border-radius: 20px;
text-align: center;
color: red;
text-decoration: none;/*去掉下划线*/
margin: 10px;/*外边距*/
font:bold 20px/50px Arial;/*font属性*/
}
/* 属性名 or 属性名 = 属性值(正则)
= 绝对等于
*= 包含这个值
^= 以其值开头
$= 以其值结尾
存在id属性的元素 a[]{]
*/
a[id]{
background-color: red;
color: yellow;
}
/*id=fist的元素*/
a[id=first]{
background-color: brown;
}
/*class有link的元素*/
a[class *= link]{
background-color: green;
}
/*
选中href中以http开头的元素
*/
a[href^=http]{
background-color: purple;
}
a[href$=pdf]{
background-color: orange;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://baidu.com" class="link item first " id="first">1</a>
<a href="" class="link item active" target="_blank" title="test2">2</a>
<a href="images/123.html"class="link item ">3</a>
<a href="images/123.png"class="link item ">4</a>
<a href="images/123.jpg"class="link item ">5</a>
<a href="abc"class="link item ">6</a>
<a href="/abc.pdf"class="link item ">7</a>
<a href="/a.pdf"class="link item ">8</a>
<a href="abc.doc"class="link item ">9</a>
<a href="abcd.doc"class="link item last "id="last">10</a>
</p>
</body>
</html>
= 绝对等于
*= 包含这个值
^= 以其值开头
$= 以其值结尾
3. 美化网页
3.1 为什么美化网页
- 有效的传递页面信息
- 美化网页,页面漂亮,才能吸引用户。
- 凸显页面的主题
- 提高用户的体验
-
span 标签:重点突出的字,使用span标签套起来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #title1{ font-size: 50px; } </style> </head> <body> 欢迎学习<span id ="title1">Java</span>! </body> </html>
3.2 字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- font-family 字体
font-size:字体大小
font-weight:粗细
-->
<style>
body{
font-family: "Times New Roman",楷体;
color: blue;
}
h1{
font-size: 50PX;
}
.p1{
font-weight: bolder;
}
/* 字体风格 */
.P2{
font:oblique bolder 16px "楷体";
}
</style>
</head>
<body>
<div>
<h1> 虹猫蓝兔 </h1>
<p class="p1"> 虹猫蓝兔》是由湖南宏梦卡通传播有限公司于2006年推出的一部长篇武侠动画连续剧系列,也是中国首部武侠动画电视连续剧。 </p>
<h2> 虹猫 </h2>
<p CLASS="P2">
性别:男
年龄:18
亲人:白猫
星座:狮子座
优点:活泼开朗,非常有责任心,乐于助人,善于解决各种难题。
缺点:在别人眼里有点傲慢和个人英雄主义。
剑名:长虹剑、白孤剑
剑招:长虹贯日、日照九州、火舞旋风、佛光普照、飞龙在天、神龙九变、灵蛇出洞、一招三式
其他招式:火舞旋风一至十三式
</p>
<p>
Waiting for you I'm waiting for you
Waiting for you come here to my dream
</p>
</div>
</body>
</html>
3.3 文本样式
- 颜色 color
- 对齐方式 text-align
- 首行缩进 text-indent
- 行高 line-height
- 装饰 text-decoration
- 文本图片水平对齐:vertical-align:middle;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 颜色 RGB 名字,HSL RGBA
text-align: center;
text-indent: 2em; 段落首行缩进
height: 200px;
line-height: 200px;行高和块的高度一致,就可以上下居中
text-decoration:?????????
-->
<style>
h1{
color:red;
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background-color: greenyellow;
height: 50px;
line-height: 50px;
}
/*下划线*/
.pp1{
text-decoration-color: darkorchid;
text-decoration-skip: box-decoration;
text-decoration-style: initial;
text-decoration-line: underline;
}
/*中划线*/
.pp2{
text-decoration-color: greenyellow;
text-decoration-line: line-through;
}
/*上划线*/
.pp3{
text-decoration-color: firebrick;
text-decoration-line:overline;
}
/*a标签去下划线*/
a{
text-decoration: none;
}
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="image/jg.png" alt="">
<span>这是三只松鼠吗?</span>
</p>
<p class="pp1">测试下划线</p>
<p class="pp2">测试下划线</p>
<p class="pp3">测试下划线</p>
<a href="">123</a>
<h1> 虹猫蓝兔 </h1>
<p class="p1"> 虹猫蓝兔》是由湖南宏梦卡通传播有限公司于2006年推出的一部长篇武侠动画连续剧系列,也是中国首部武侠动画电视连续剧。 </p>
<h2> 虹猫 </h2>
<p CLASS="P2">
性别:男
年龄:18
亲人:白猫
星座:狮子座
优点:活泼开朗,非常有责任心,乐于助人,善于解决各种难题。
缺点:在别人眼里有点傲慢和个人英雄主义。
剑名:长虹剑、白孤剑
剑招:长虹贯日、日照九州、火舞旋风、佛光普照、飞龙在天、神龙九变、灵蛇出洞、一招三式
其他招式:火舞旋风一至十三式
</p>
<p class="p3">
Waiting for you I'm waiting for you
Waiting for you come here to my dream
</p>
</body>
</html>
3.4 阴影
/*text-shadow
阴影颜色,水平偏移,垂直偏移,阴影半径*/
.price{
text-shadow: firebrick 10px 0px 10px;
}
3.5 超链接伪类
正常情况只有:a:hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*默认的颜色*/
a{
text-decoration: none;
color: #000000;
}
/*未访问的连接*/
a:link{
color: blueviolet;
}
/*已经访问的颜色*/
a:visited{
color: yellow;
}
/*鼠标悬浮的颜色(记住)*/
a:hover{
color: firebrick;
font-size: 50px;
}
/*鼠标按住未释放的颜色*/
a:active{
color: green;
}
/*text-shadow
阴影颜色,水平偏移,垂直偏移,阴影半径*/
.price{
text-shadow: firebrick 10px 0px 10px;
}
</style>
</head>
<body>
<a href="#">
<img src="image/java.png" alt="">
</a>
<p>
<a href="#">码出高效,Java开发手册 </a>
</p>
<p>
<a href="">作者,孤尽老师</a>
</p>
<p class="price">
¥99
</p>
</body>
</html>
3.6 列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰箱包</a> <a href="#">音像</a> <a href="#">等待</a></li>
<li><a href="#">纸尿裤</a> <a href="#">奶粉</a> <a href="#">湿巾</a></li>
<li><a href="#">饼干</a> <a href="#">牛奶</a> <a href="#">坚果</a></li>
<li><a href="#">电饭煲</a> <a href="#">电磁炉</a> <a href="#">电风扇</a></li>
</ul>
</div>
</body>
</html>
#nav{
width: 300px;
background: darkgray;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background:red;
}
/*ul li*/
/*ul{*/
/* background: darkgray;*/
/*}*/
ul li{
/*行高*/
height: 30px;
/*list-style
none没有无序列表前的圆点,或者有序列表前的数字
circle 空心圆
decimal:数字
square*/
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
3.7 背景
背景颜色
背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>{
<style>
div{
width: 1000px;
height: 800px;
border: 1px solid red;
/*默认是全部平铺 repeat*/
background-image: url("image/jg.png");
}
.div1{
background-repeat:repeat-x;
}
.div2{
background-repeat:repeat-y;
}
.div3{
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
#nav{
width: 300px;
background: darkgray;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
/* 颜色 图片 图片位置 平铺方式*/
background:red url("../images/TD.jpg") 290px 5px no-repeat;
}
/*ul li*/
/*ul{*/
/* background: darkgray;*/
/*}*/
ul li{
/*行高*/
height: 30px;
/*list-style
none没有无序列表前的圆点,或者有序列表前的数字
circle 空心圆
decimal:数字
square*/
list-style: none;
text-indent: 1em;
background-image: url("../images/TR.png");
background-repeat: no-repeat;
/*可在网页自动调节*/
background-position: 248px 5px;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
3.8 渐变
(2条消息) CSS3渐变属性_葉無聞-CSDN博客_css渐变属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #FFFFFF;
background-image: linear-gradient(115deg,#FF34FF 0%,#5687FF 50%, #FF0000 100%);
}
</style>
</head>
<body>
</body>
</html>
4.盒子模型
4.1 什么是盒子
margin:外边距
padding:内边距
border:边框
4.2 边框
粗细
样式
颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*初始化内外边距,一般情况会有一个默认的初始化边距*/
/*body{*/
/* margin: 0px;*/
/* padding: 0px;*/
/* text-decoration: none;*/
/*}*/
/*border:粗细、样式、颜色*/
h2{
background: rgba(62,59,228,0.98);
font-size: 16px;
color: white;
/*默认初始状态有一个非0的外边距*/
margin: 0px;
}
#box{
width: 300px;
height: 200px;
border:1px solid red;
padding: 10px;
}
form{
background: #297980;
}
#box div:nth-of-type(1) input{
border:3px solid black;
}
#box div:nth-of-type(2) input{
border:3px dashed #88FF77;
}
#box div:nth-of-type(3) input{
border:3px dotted yellow;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户:</span>
<input type="text" name="" placeholder="用户名">
</div>
<div>
<span>密码:</span>
<input type="password" name="" placeholder="密码">
</div>
<div>
<span>邮箱:</span>
<input type="email" name="" placeholder="邮箱">
</div>
</form>
</div>
</body>
</html>
4.3 内外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外边距的妙用,居中元素
margin: 0px auto;
-->
<style>
h2{
background: rgba(62,59,228,0.98);
font-size: 16px;
color: white;
/*默认初始状态有一个非0的外边距
margin 一个值 上下左右外边距均相同。
两个值,第一个值为上下边距,第二个值为左右边距
三个值 上 左右 下
四个值 上 右 下 左*/
margin: 0px;
}
#box{
width: 300px;
height: 200px;
border:1px solid red;
padding: 10px;
margin: 0px auto;
}
form{
background: #297980;
}
input{
border:3px dotted #FFFF77;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户:</span>
<input type="text" name="" placeholder="用户名"/>
</div>
<div>
<span>密码:</span>
<input type="password" name="" placeholder="密码"/>
</div>
<div>
<span>邮箱:</span>
<input type="email" name="" placeholder="邮箱"/>
</div>
</form>
</div>
</body>
</html>
</body>
</html>
盒子大小的计算方式:margin+border+padding+内容宽度
4.4 圆角边框
四个角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid yellow;
/*左上,右上,右下,左下 顺时针方向*/
/*圆圈 圆角半径 = 1/2的(宽度+边框) */
border-radius: 100px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
-
半圆
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 50px; border: 10px solid yellow; border-radius: 60px 60px 0px 0px; } </style> </head> <body> <div></div> </body> </html>
-
扇形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px; border: 10px solid yellow; border-radius: 120px 0px 0px 0px; } </style> </head> <body> <div></div> </body> </html>
-
圆形头像
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ /*图片大小为 300 × 300*/ border-radius: 150px; } </style> </head> <body> <img src="images/tx.png" alt="头像"/> </body> </html>
4.5 阴影
- 边框阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
/*语法box-shadow: h-shadow v-shadow blur spread color inset;水平 竖直允许负值,
后四个可选,分别为模糊距离,阴影尺寸,阴影颜色,内部inset/外部outset(默认)阴影*/
box-shadow:10px 10px 100px yellow ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
-
图片元素的居中
margin :0 auto 上下边距为0,左右自动,但有时候只设置div可能无法使其居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
/* margin: 0 auto;居中前提 块元素 有固定的宽度*/
margin: 0 auto;
border-radius: 150px;
box-shadow:10px 10px 50px yellow ;
}
</style>
</head>
<body>
<div style="width: 1000px ;height: 500px;display: block;text-align: center">
<img src="images/tx.png" alt="">
</div>
</body>
</html>
5.浮动
5.1 标准文档流
块级元素:独占一行
h1-h6,p,div,列表........
行内元素:不独占一行
span,a,img,strong.........
行内元素可以被包含在块级元素中,反之不行。
5.2 display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*block 块级元素
inline 行内元素
inline-block 是块级元素,但可以内联,在一行
none 此元素不会被显示*/
div{
width: 100px;
height: 100px;
border: 1px dashed red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px dashed green;
display: inline-block;
}
</style>
</head>
<body>
<div>块级元素</div>
<span>行内元素</span>
</body>
</html>
这个也是一种实现行内元素排列的方式,但是我们很多情况都是用float
5.3 float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css "type="text/css"/>
</head>
<body>
<div class="father">
<div class="layer01"><img src="images/tam1.png" alt=""></div>
<div class="layer02"><img src="images/tx.png" alt=""></div>
<div class="layer03"><img src="images/wonder.png" alt=""></div>
<div class="layer04">
浮动的盒子既可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或者另一个浮动的盒子为止
</div>
</div>
</body>
</html>
div{
margin: 10px;
padding: 5px;
}
.father{
border: 1px solid red;
}
.layer01{
border: 1px solid blue;
display: inline-block;
float: left;
}
.layer02{
border: 1px solid blue;
display: inline-block;
float: left;
}
.layer03{
border: 1px solid blue;
display: inline-block;
float: left;
}
.layer04{
border: 1px solid blue;
font-size: 14px;
line-height:20px;
display: inline-block;
float: left;
clear: both;
}
5.4 父级边框塌陷问题
clear 属性定义了元素的哪边上不允许出现浮动元素
right 不允许右侧有浮动元素
left 不允许左侧有浮动元素
both 左侧和右侧均不允许出现浮动元素:
none 默认值。允许浮动元素出现在两侧。
-
解决方法
-
增加父级元素的高度
.father{ border: 1px solid red; height: 800px;}
-
增加一个空的div
<div class="father"> <div class="layer01"><img src="images/tam1.png" alt=""></div> <div class="layer02"><img src="images/tx.png" alt=""></div> <div class="layer03"><img src="images/wonder.png" alt=""></div> <div class="layer04"> 浮动的盒子既可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或者另一个浮动的盒子为止 </div> <div class="clear"></div></div>
.clear{ margin: 0px; padding: 0px; clear: both;}
-
overflow
/*在父级属性中增加一个 overflow属性*/ .father{ border: 1px solid red; overflow: hidden; }
-
父类添加一个伪类:after
.father:after{ content: ''; display: block; clear: both; }
小结
-
增加父级元素的高度
简单,元素假设有了固定的高度,就会被限制
-
浮动元素后增加一个空的div
简单,代码中尽量避免空的div
-
overflow
简单,下拉的一些场景尽量避免使用
-
父类添加一个伪类:after(推荐使用)
写法稍微复杂一点,但是没有副作用,推荐使用!
-
5.5 对比
-
display
方向不可以控制
-
float
浮动起来会脱离标准文档流,所以要解决父级边框塌陷的问题
6.定位
6.1 相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 相对定位
相对于自己原来位置的偏移
-->
<style>
div{
margin: 10px;
padding: 5px;
font-size: 14px;
line-height: 25px;
}
#father{
border: 2px solid black;
padding: 0px;
}
#first{
border: 1px dashed #08ff20;
background: #ffac0e;
position: relative;
top:-20px;
left: 10px;
}
#second{
border: 1px dashed #ff3852;
background: #e930ff;
}
#third{
border: 1px dashed #1e30ff;
background: #ff1a71;
position: relative;
right: 20px;
bottom: -10px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
position:relative
生成相对定位的元素,相对于其正常位置进行定位。因此,“left:20” 会向元素的 LEFT 位置添加 20 像素。
相对定位处在标准文档流中,原来的位置会被保留。
- 练习方块定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#father{
width: 300px;
height: 300px;
border: 2px solid red;
margin: 5px;
padding: 10px;
}
a{
background: hotpink;
text-decoration: none;
font-size: 28px;
display: inline-block;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
a:hover{
background: #1e30ff;
width: 100px;
height: 100px;
}
#first{
}
#second{
position: relative;
left:200px;
top:-100px;
}
#third{
position: relative;
left:100px;
top:-100px;
}
#fourth{
position: relative;
top:-100px;
}
#fifth{
position: relative;
left:200px;
top:-200px;
}
</style>
</head>
<body>
<div id="father">
<div id="first" class="item">
<a href="" >链接1</a>
</div >
<div id="second" class="item">
<a href="" >链接2</a>
</div>
<div id="third" class="item">
<a href="" >链接3</a>
</div>
<div id="fourth" class="item">
<a href="" >链接4</a>
</div>
<div id="fifth" class="item">
<a href="" >链接5</a>
</div>
</div>
</body>
</html>
6.2 绝对定位
position: absolute; 的元素相对于最近的定位祖先元素进行定位(而不是相对于视口定位,如 fixed)。
然而,如果绝对定位的元素没有祖先,它将使用文档主体(body),并随页面滚动一起移动。
定位:基于XXX定位,上下左右
-
没有父级元素定位的前提下,相对于浏览器定位
-
假设父级元素存在定位,通常会相对与父级元素进行偏移
-
在父级元素范围内偏移(当父级元素存在定位时,不能超出父级范围)
谷歌浏览器好像会超出范围???????????????????????
相对于父级或浏览器的位置,进行指定的偏移,绝对定位不在标准文档流中,原来的位置不会被保留。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 14px;
line-height: 25px;
}
#father{
border: 2px solid black;
padding: 0px;
position: relative;
}
#first{
border: 1px dashed #08ff20;
background: #ffac0e;
}
#second{
border: 1px dashed #ff3852;
background: #e930ff;
position: absolute;
right:30px;
}
#third{
border: 1px dashed #1e30ff;
background: #ff1a71;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
6.3 固定定位
position: fixed; 的元素是相对于视口定位的,这意味着即使滚动页面,它也始终位于同一位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 10000px;
}
div:nth-of-type(1){
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0px;
bottom: 0px;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
background: yellow;
/*固定定位fixed*/
position: fixed;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div>DIV1</div>
<div>DIV2</div>
</body>
</html>
6.4 z-index
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
**注意:**元素可拥有负的 z-index 属性值。
该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="images/tam1.png" alt=""></li>
<li class="tipText">国庆节快乐!</li>
<li class="tipBg"></li>
<li>时间:2221-10-07 </li>
<li>地点:火星表面</li>
</ul>
</div>
</body>
</html>
#content{
width: 310px;
margin: 0px;
padding: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid #000;
}
ul,li{
margin: 0px;
padding: 0px;
list-style: none;
}
#content ul{
position: relative;
}
.tipBg,.tipText{
width: 300px;
height: 35px;
position: absolute;
top:420px
}
.tipText{
color:#FFFFFF;
z-index:2/*层级从0到无限大*/
}
.tipBg{
background: black;
opacity: 50%;
filter: alpha(opacity=50);
}
7 动画
CSS动画
js动画
等等