CSS3
文章目录
- 01 CSS的简单介绍
-
- 1.1 什么是css
- 1.2 发展史
- 1.3 快速入门
- 1.4 css的三种导入方式
- 02 选择器
-
- 2.1 基本选择器
- 2.2 层次选择器
- 2.3 结构伪类选择器
- 2.4 属性选择器
- 03 美化网页元素
-
- 3.1 为什么要美化？
- 3.2 字体样式
- 3.3 文本样式
- 3.4 阴影
- 3.5 超链接伪类
- 3.6 列表
- 3.7 背景
- 3.8 渐变
- 04 盒子模型
-
- 4.1 什么是盒子模型
- 4.2 边框
- 4.3 内外边距
- 4.4 圆角边框
- 4.5 阴影
- 05 浮动
-
- 5.1 标准文档流
- 5.2 display
- 5.3 float
- 5.4 父级边框塌陷
- 5.5 对比
- 06 定位
-
- 6.1 相对定位
- 6.2 绝对定位
- 6.3 固定定位fixed
- 6.4 z-index
- 07 动画
- 08 总结
01 CSS的简单介绍
1.css是什么？
2.css怎么用？
3.css选择器(重点+难点)
4.美化网页(文字，阴影，超链接，列表，渐变)
5.盒子模型
6.浮动
7.定位
8.网页东西(特效)
1.1 什么是css
Cascading Style Sheet层叠级联样式表
CSS：表现层(美化网页)
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…
1.2 发展史
css 1.0 基础
css 2.0 DIV (块)+ CSS，HTML跟CSS结构分离的思想，网页变得简单，SEO
css 2.1 浮动，定位
css 3.0 圆角边框，阴影，动画，浏览器兼容性
1.3 快速入门
练习格式
style
建议规范
css优势
1.内容和表现分离
2.页面结构表现统一，可以实现复用
3.样式十分丰富
4.建议使用独立于html的css文件
5.利用SEO，容易被搜索引擎收录
拓展
SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。
1.4 css的三种导入方式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
h1{
color: green;
}
style>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<h1>我是标题h1>
body>
html>
拓展：外部样式两种写法
·链接式
html
<link rel="stylesheet" href="css/style.css">
·导入式
css2.1特有的
<style>
@import url("style.css");
style>
02 选择器
作用：选择页面上的某一个或者某一类元素
2.1 基本选择器
1.标签选择器
选择一类标签
格式：
标签{}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*标签选择器，会选择到页面上所有的这个标签的元素*/
h1{
color: red;
background: #3cbda6;
border-radius: 24px;
}
p{
font-size: 80px;
}
style>
head>
<body>
<h1>学Javah1>
<p>听狂神说p>
body>
html>
2.类 选择器
选择所有class属性一致的标签，跨标签
格式：
.类名{}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*类选择器格式 .class的名称{}
好处：可以多个标签归类，是同一个class，可以复用
*/
.dy{
color: red;
}
.ff{
color: purple;
}
style>
head>
<body>
<h1 class="dy">标题1h1>
<h1 class="ff">标题2h1>
<h1 class="dy">标题3h1>
<p class="dy">段落p>
body>
html>
3.id 选择器
格式
#id名称{}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*id选择器的格式
#id名称{}
注意：
id必须保证全局唯一，不可复用
优先级不遵循就近原则：
id选择器 > class选择器 > 标签选择器
*/
#dy{
color: red;
}
.style1{
color: #80ff42;
}
h1{
color: purple;
}
style>
head>
<body>
<h1 id="dy" class="style1">标题1h1>
<h1 class="style1">标题2h1>
<h1 class="style1">标题3h1>
<h1>标题4h1>
<h1>标题5h1>
body>
html>
优先级不遵循就近原则：id选择器 > class选择器 > 标签选择器
2.2 层次选择器
1.后代选择器：祖爷爷 爷爷 爸爸 你
在某个元素后面
/*后代选择器*/
body p {
background: red;
}
2.子选择器：一代，不可隔代
/*子选择器*/
/*仅可作用于p1p2p3*/
body>p {
background: green;
}
3.相邻兄弟选择器：同代
/*相邻兄弟选择器
对下不对上，只作用一个
*/
.active + p{
background: #80ff42;
}
4.通用选择器
/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素，此处为p2p3*/
.active~p{
background: purple;
}
代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*p{*/
/* background: green;*/
/*}*/
/*后代选择器*/
/*body p {*/
/* background: red;*/
/*}*/
/*子选择器*/
/*仅可作用于p1p2p3*/
/*body>p {*/
/* background: green;*/
/*}*/
/*相邻兄弟选择器
对下不对上，只作用一个
*/
/*.active+p{*/
/* background: #80ff42;*/
/*}*/
/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素，此处为p2p3*/
.active~p{
background: purple;
}
style>
head>
<body>
<p>p0p>
<p class="active">p1p>
<p>p2p>
<p>p3p>
<ul>
<li>
<p>p4p>
li>
<li>
<p>p5p>
li>
<li>
<p>p6p>
li>
ul>
body>
html>
2.3 结构伪类选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*选中ul的第一个子元素*/
ul li:first-child{
background: #80ff42;
}
/*选中ul的最后一个子元素*/
ul li:last-child {
background: purple;
}
/*选中第一个p元素p1：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效。
nth-child(n):n表示当前元素的父级元素下的第i个元素，如果该元素跟冒号前的标签类别不一致，则不会改变，
即当在p1前面添加h1时p:nth-child(1) {}的操作无效
(按顺序选择)
*/
p:nth-child(1) {
background: green;
}
p:nth-child(2) {
background: green;
}
/*选择父级元素下的第二个类型为p的元素(按类型选择)*/
p:nth-of-type(2) {
background: blue;
}
/*动作：当鼠标移动到该类标签时会发生变化*/
a:hover{
background: red;
}
style>
head>
<body>
<a href="">aa>
<h1>h1h1>
<p>p1p>
<p>p2p>
<p>p3p>
<ul>
<li>li1li>
<li>li2li>
<li>li3li>
ul>
body>
html>
2.4 属性选择器
id跟class的结合
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.demo a{
float: left; /*往左浮动*/
display: block; /*以块状展示*/
height: 50px; /*高*/
width: 50px; /*宽*/
border-radius: 10px; /*边界*/
background: blue; /*背景色*/
text-align: center; /*文字对齐方式：居中*/
color: red; /*文字颜色*/
text-decoration: none; /*去掉文字下划线*/
margin-right: 10px; /*外边距*/
font: bold 20px/50px Arial; /*文字粗体 大小/行高 family*/
}
/*存在id属性的元素a[]{}
[]内：1.属性名
2.属性名=属性值(值可以用正则匹配)
注意：=表示绝对等于
*=表示包含
^=表示以某个元素开头
$=表示以某个元素结尾
*/
/*a[id] { !*a标签里带有id属性的*!*/
/* background: brown;*/
/*}*/
/*id=first的元素*/
/*a[id=first] {*/
/* background: yellow;*/
/*}*/
/*class中有links的元素*/
/*a[class*="links"]{*/
/* background: purple;*/
/*}*/
/*选中href中以http开头的元素*/
/*a[href^=http] {*/
/* background: yellow;*/
/*}*/
/*选中class中以item结尾的元素*/
a[class$=item]{
background: purple;
}
style>
head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1a>
<a href="" class="links item active" target="_blank" title="test">2a>
<a href="images/123.html" class="links item active">3a>
<a href="images/123.png" class="links item">4a>
<a href="images/123.jpg" class="links item">5a>
<a href="abc" class="links item">6a>
<a href="/a.pdf" class="links item">7a>
<a href="/abc.pdf" class="links item">8a>
<a href="abc.doc" class="links item">9a>
<a href="abcd.doc" class="links item last">10a>
p>
body>
html>
总结：
= 绝对等于
*= 包含
^= 以…开头
$= 以…结尾
03 美化网页元素
3.1 为什么要美化？
1.有效的传递页面信息
2.美化网页
3.凸显页面主题
4.提高用户的体验
span标签：重点要突出的字使用span标签套起来
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
#title1{
font-size: 50px;
}
style>
head>
<body>
欢迎学习 <span id="title1">javaspan>
body>
html>
3.2 字体样式
<style>
body{
font-family: "Arial Black", 宋体;
color: red;
}
h1{
/*font-size: 50px;*/
font-size: 5em;
}
.p1{
font-weight: bold;
}
style>
3.3 文本样式
1.颜色
color
rgb
rgba
2.对齐方式
text-align = center
3.缩进
text-indent: 2em;
4.行高
line-height
注意：单行文字上下居中
line-height = height
5.下划线
text-decoration: underline
.a1{
text-decoration: underline; /*下划线*/
}
.a2{
text-decoration: line-through; /*中划线*/
}
.a3 {
text-decoration: overline; /*上划线*/
}
6.文本图片相互参照对齐
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
img, span{
vertical-align: middle; /*img和span标签相互参照居中对齐*/
}
style>
head>
<body>
<p>
<img src="images/T-mac.jpg" alt="" width="200px" height="150px">
<span>特雷西·麦克格雷迪span>
p>
body>
html>
代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
h1{
/*color: #ff8486;*/
color: rgb(0, 255, 255);
/*color: rgba(0, 255, 255, 0.5);*/ /*透明度0.5*/
text-align: center; /*居中*/
/*text-align: right; !*右对齐*!*/
/*text-align: left; !*左对齐*!*/
}
.p1 {
text-indent: 2em; /*首行缩进2个em*/
}
.p3 {
background: #80ff42;
height: 200px;
line-height: 200px;
}
.a1{
text-decoration: underline; /*下划线*/
}
.a2{
text-decoration: line-through; /*中划线*/
}
.a3 {
text-decoration: overline; /*上划线*/
}
a{
text-decoration: none; /*超链接去下划线*/
}
img, span{
vertical-align: middle; /*img和span标签相互参照居中对齐*/
}
style>
head>
<body>
<p>
<img src="images/T-mac.jpg" alt="" width="200px" height="150px">
<span>特雷西·麦克格雷迪span>
p>
<a href="">123a>
<p class="a1">12138p>
<p class="a2">12138p>
<p class="a3">12138p>
<h1>故事介绍h1>
<p class="p1">
“很久很久以前流传着一个古老传说，这世上存在着七颗名为龙珠的圆球散落各处，只要集齐七颗龙珠并念出咒文，便可召唤出神龙，无论任何愿望都可替许愿人达成”。
p>
<p>
住在深山中的孙悟空本领高强，一次偶然的机会他随天才科学家·布尔玛一起走出大山，开始致力于寻找分散在世界各地的七颗龙珠。在这期间，还结识了好色的龟仙人与乌龙、一看到女人就面红耳赤的雅木茶以及自大的和尚小林等伙伴，不但经历了各种各样的冒险和奇遇，也惹出一连串爆笑的故事。当然，也有许多邪恶的家伙们为了满足私欲而寻找龙珠，为此与悟空等人展开了一连番的激斗。为了实现愿望、突破自我、变得更强，围绕着悟空及他的伙伴们，在大世界的浪漫冒险就这样开始了 ！
p>
<p class="p3">
Early in the day it was whispered that we should sail in a boat, only thou and I, and never a soul in the world would know of this our pilgrimage to no country and to no end.
p>
body>
html>
3.4 阴影
/*text-shadow：阴影颜色 水平偏移 垂直偏移 阴影半径*/
#price{
text-shadow: #48b6ff 10px 10px 2px;
}
3.5 超链接伪类
正常情况下，a，a:hover
<style>
/*默认颜色*/
a{
text-decoration: none;
color: black;
}
/*鼠标悬停状态,这个是重点*/
a:hover{
color: blue;
font-size: 50px;
}
/*鼠标点击未释放状态*/
a:active {
color: red;
}
/*鼠标点击后状态*/
/*a:visited{*/
/* color: darkred;*/
/*}*/
/*text-shadow：阴影颜色 水平偏移 垂直偏移 阴影半径*/
#price{
text-shadow: #48b6ff 10px 10px 2px;
}
style>
3.6 列表
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link href="css/style.css" rel="stylesheet" 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>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> <a href="#">票务a>
li>
div>
ul>
body>
html>
#nav{
width: 261px;
background: grey;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: red;
text-align: left;
}
/*ul li*/
/*
列标前的小图标：
list-style：
none 没有东西
circle 空心圆
decimal 数字
square 实心正方形
disc (默认)小黑点
*/
/*ul{*/
/* background: grey;*/
/*}*/
ul li{
height: 30px;
/*list-style: disc; !*去掉圆点*!*/
list-style: none; /*去掉圆点*/
text-indent: 1em;
/*background: grey;*/
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
3.7 背景
背景颜色
背景图片
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/dogHead.jpg"); /*默认是全部平铺的*/
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
style>
练习
3.8 渐变
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
background-color: #4158D0;
background-image: linear-gradient(243deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
style>
head>
<body>
body>
html>
04 盒子模型
4.1 什么是盒子模型
margin：外边距
padding：内边距
border：边框
4.2 边框
1.边框的粗细
2.边框的样式
3.边框的颜色
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*
h1, ul, li, a, body 总有一个默认的外边距，因此需要初始化设置
*/
/*h1, ul, li, a, body {*/
/* margin: 0;*/
/* padding: 0;*/
/* text-decoration: none;*/
/*}*/
body{
margin: 0;
}
#box{
width: 300px;
border: 1px solid red; /*border参数列表: 粗细 样式 颜色*/
margin: 0 auto;
}
/*
margin:0 一个参数表示上
margin:0 1px 两个参数表示上下和左右
margin:0 0 0 0 四个参数表示上左下右
*/
h2{
font-size: 16px;
background: #48b6ff;
line-height: 30px;
height: 30px;
margin: 0;
color: white;
}
form{
background: green;
}
/*input{*/
/* border: 1px solid black;*/
/*}*/
/*结构伪类选择器*/
div:nth-of-type(1) input{
border: 3px solid black;
}
div:nth-of-type(2) input{
border: 3px dashed #0910ff;
}
div:nth-of-type(3) input{
border: 2px dashed #3a8027;
}
/*
内边距padding参数等效于外边距margin
*/
div:nth-of-type(1){
padding: 10px 2px;
}
style>
head>
<body>
<div id="box">
<h2>会员登录h2>
<form action="#">
<div>
<span>用户名：span>
<input type="text">
div>
<div>
<span>密码：span>
<input type="text">
div>
<div>
<span>邮箱：span>
<input type="text">
div>
form>
div>
body>
html>
4.3 内外边距
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*
body总有一个默认的外边距
*/
body{
margin: 0;
}
/*
border: 粗细 样式 颜色
*/
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
h2{
font-size: 16px;
background: #48b6ff;
line-height: 30px;
margin: 0;
color: white;
}
form{
background: green;
}
div:nth-of-type(1) input{
border: 3px solid black;
}
div:nth-of-type(2) input{
border: 3px dashed #0910ff;
}
div:nth-of-type(2) input{
border: 2px dashed #3a8027;
}
style>
head>
<body>
<div id="box">
<h2>会员登录h2>
<form action="#">
<div>
<span>用户名span>
<input type="text">
div>
<div>
<span>密码span>
<input type="text">
div>
<div>
<span>邮箱span>
<input type="text">
div>
form>
div>
body>
html>
盒子的计算方式：margin+border+padding+内容宽度
4.4 圆角边框
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
/*border-radius: 50px 20px 10px 5px;*/
border-radius: 100px; /*这时候变成一个圆*/
}
style>
head>
<body>
<div>
div>
body>
html>
画半圆和改方形图片为圆形
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div{
width: 100px;
height: 50px;
margin: 30px;
border-radius: 50px 50px 0px 0px;
background: red;
}
img{
border-radius: 50px;
}
style>
head>
<body>
<div>div>
<img src="images/dogHead.jpg" alt="">
body>
html>
4.5 阴影
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*div{*/
/* width: 100px;*/
/* height: 100px;*/
/* border: 10px solid red;*/
/* box-shadow: 80px 80px 1px yellow;*/
/*}*/
/*margin: 0 auto 居中要求
块元素，并且有固定宽度
*/
img{
border-radius: 50px;
box-shadow: 15px 15px 100px yellow;
}
style>
head>
<body>
<div style="width: 500px; height: 1000px;display: block;text-align: center " >
<img src="../3.圆角边框/images/dogHead.jpg" alt="">
div>
body>
html>
05 浮动
5.1 标准文档流
块级元素：独占一行
h1~h6 p div 列表…
行内元素：不独占一行
span a img strong…
行内元素可以被包含在块级元素中，反之不可
案例：
qq会员导航页面
<html lang="en">
<head>
<meta charset="UTF-8">
<title>qq会员title>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<div class="wrap">
<header class="nav-header">
<div class="head-contain">
<a href="" class="top-logo"><img src="images/dogHead.jpg" height="90" width="145" alt="">a>
<nav class="top-nav">
<ul>
<li><a href="">功能特权a>li>
<li><a href="">游戏特权a>li>
<li><a href="">生活特权a>li>
<li><a href="">会员特权a>li>
<li><a href="">成长体系a>li>
<li><a href="">年费专区a>li>
<li><a href="">超级会员a>li>
ul>
nav>
<div class="top-right">
<a href="">登录a>
<a href="">开通超级会员a>
div>
div>
header>
div>
body>
html>
style.css
* {
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
.nav-header{
height: 90px;
width: 100%;
background: rgba(0,0,0,.6);
}
.head-contain{
width: 1180px;
height: 90px;
margin: 0 auto;
text-align: center;
}
.top-logo, .top-nav, .top-nav li, .top-right{
height: 90px;
display: inline-block;
vertical-align: top;
}
.top-nav{
margin: 0 48px;
}
.top-nav li {
line-height: 90px;
width: 90px;
}
.top-nav li a{
display: block;
text-align: center;
font-size: 16px;
color: #fff;
}
.top-nav li a:hover{
color: blue;
}
.top-right a{
display: inline-block;
font-size: 16px;
text-align: center;
margin-top: 25px;
border-radius: 35px;
}
.top-right a:first-of-type{
width: 93px;
height: 38px;
line-height: 38px;
color: #fad65c;
border: 1px #fad65c solid;
}
.top-right a:first-of-type:hover{
color: #986b0d;
background: #fad65c;
}
.top-right a:last-of-type{
width: 140px;
height: 40px;
font-weight: 700;
line-height: 40px;
background: #fad65c;
color: #986b0d;
}
.top-right a:last-of-type:hover{
background: #fddc6c;
}
页面效果图
5.2 display
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/*
block 块元素
inline 行内元素
inline-block 保持块元素特性，可以内联，写在一行
none 消失
*/
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline;
}
span {
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
style>
head>
<body>
<div>
div块元素
div>
<span>span行内元素span>
body>
html>
1.这个也是一种实现行内元素排列的方式，但是我们很多情况都使用float
5.3 float
1.左右浮动 float
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px #000 solid;
height: 800px;
}
.layer01{
border: 1px #F00 dashed;
display: inline-block;
float: right;
clear: both
}
.layer02{
border: 1px #00F dashed;
display: inline-block;
float: right;
clear: both
}
.layer03{
border: 1px #060 dashed;
display: inline-block;
float: right;
clear: both
}
/*
clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear: none;
*/
.layer04{
border: 1px #666 dashed;
font-size: 12px;
li-height: 23px;
display: inline-block;
float: right;
clear: right;
clear: both; /*清除浮动后，layer04的元素排在下面而不是浮动成一排在最左边，保持块元素特性*/
}
float：浮动的时候改变页面大小会出现布局改变的情况，叫做塌陷
5.4 父级边框塌陷
/*
clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear: none;
*/
.layer04{
border: 1px #666 dashed;
font-size: 12px;
li-height: 23px;
display: inline-block;
float: right;
clear: both;
}
问题：元素浮动后跑出父级边框
解决
1.增加父级边框高度
#father{
border: 1px #000 solid;
height: 800px;
}
2.增加一个空的div标签，对其清除浮动
<body>
<div id="father">
<div class="layer01"><img src="images/dogHead.jpg" alt="">div>
<div class="layer02"><img src="images/girl.jpg" alt="">div>
<div class="layer03"><img src="images/T-mac.jpg" alt="">div>
<div class="layer04">浮动的盒子可以向左浮动，也可以享有浮动，直到它的外边缘碰到框或另一个浮动盒子为止
div>
<div class="clear">div>
div>
body>
.clear{
clear: both;
margin: 0;
padding: 0;
}
3.overflow
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
#content{
width: 200px;
height: 150px;
overflow: scroll;/*滚动条解决溢出*/
}
style>
head>
<body>
<div id="content">
<img src="images/dogHead.jpg" alt="">
<p>
发江安河快乐十分举案说法快捷键撒花返回即可合法科技师范哈
p>
div>
body>
html>
可以通过给父级边框增加overflow使得图片不会超出文本框
#father{
border: 1px #000 solid;
/*height: 800px;*/
overflow: hidden;
}
4.父类添加一个伪类：after
/*等效于用编程的方式实现增加一个空的div*/
/*认可度最高的解决方案*/
#father:after{/*添加伪类*/
content: ''; /*加一个空文本*/
display: block; /*使得空文本变成块状元素*/
clear: both;
}
小结：
1.浮动元素后面增加空的div
优点：简单
缺点：代码中尽量避免空div
2.设置父元素高度
优点：简单
缺点：元素高度不可控制
3.overflow
优点：适合下拉的一些场景
缺点：不需要滚动条的话就很诡异
4.在父类添加伪类：after 推荐使用
在不改动原有html代码基础上优化，没有副作用
5.5 对比
display
方向不可控制，不会存在父级边框塌陷
float
浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题
06 定位
6.1 相对定位
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
}
#first{
border: 1px solid #662222;
background: #ffed7d;
position: relative; /*相对定位：上下左右*/
top: -20px; /*top相对原来往上偏移*/
left: 20px;
}
#second{
border: 1px solid #36662a;
background: #ff3cec;
}
#third{
border: 1px solid #312366;
background: #40ffe9;
position: relative;
bottom: 10px;
right: 20px;
}
style>
head>
<body>
<div id="father">
<div id="first">第一个盒子div>
<div id="second">第二个盒子div>
<div id="third">第三个盒子div>
div>
body>
html>title>
head>
<body>
body>
html>
相对定位：相对于原来的位置进行指定的偏移，相对定位仍然在标准文档流中，原来的位置会被保留。
6.2 绝对定位
定位：基于xxx定位
1.没有父级元素定位的前提下，相对于浏览器定位
2.父级元素存在定位时会相对于父级元素定位
3.在父级元素范围内移动
相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在在标准文档流中，原来的位置不会被保留
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #666;
padding: 0;
position: relative; /*给出父级元素的定位*/
}
#first{
border: 1px solid #662222;
background: #ffed7d;
}
#second{
border: 1px solid #36662a;
background: #ff3cec;
position: absolute;/*绝对定位*/
right: 30px;
}
#third{
border: 1px solid #312366;
background: #40ffe9;
}
style>
head>
<body>
<div id="father">
<div id="first">第一个盒子div>
<div id="second">第二个盒子div>
<div id="third">第三个盒子div>
div>
body>
html>
6.3 固定定位fixed
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){ /*绝对定位：此处为相对于浏览器*/
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2){ /*固定定位fixed：此处为相对于浏览器*/
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
style>
head>
<body>
<div>div1div>
<div>div2div>
body>
html>
6.4 z-index
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="css/style.css">
head>
<body>
<div id="content">
<ul>
<li><img src="images/dogHead.jpg" alt="">li>
<li class="tipText">学习微服务li>
<li class="tipBg">li>
<li>时间：2099-12-31li>
<li>地点：火星li>
ul>
div>
body>
html>
#content{
width: 103px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px #000000 solid;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText, .tipBg{
font-family: bold;
position: absolute;
height: 25px;
width: 103px;
top: -50px;
}
.tipText{
color: #40ffe9;
z-index: 999;
}
.tipBg{
background: black;
opacity: 0.5; /*背景透明度*/
filter: alpha(opacity=50);
}
z-index最低是0，最高无限
07 动画
源码之家
08 总结
