CSS3
2021/9/24 6:10:58
本文主要是介绍CSS3，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
CSS3
概述
快速入门
方式一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 可以编写css代码，但是不建议这么写
语法：
选择器{
声明1；
声明2；
声明3；
}
-->
<style>
h1{
color: blueviolet;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
方式二：
h1{
color: blueviolet;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
三种css导入方式
/*外部样式*/
h3{
color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- css样式优先级：就近原则-->
<style>
/*这是css注释,2.内部样式*/
h2{
color: aquamarine;
}
</style>
<!-- 3.外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--1.行内样式-->
<h1 style="color: blueviolet" >这是标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
</body>
</html>
拓展 外部样式，导入式，不建议使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外部样式：导入式，不建议使用-->
<style>
@import url("css/style.css");
</style>
</head>
<body>
<h3>这是标题</h3>
</body>
</html>
三种基本选择器
标签选择器：
/*标签选择器，会选择到页面上所有这个标签的元素*/
h1{
color: #e98f81;
background: #a8c0e9;
border-radius: 24px;
}
p{
font-size: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>这是标题一</h1>
<h1>这是标题二</h1>
<p>段落内容</p>
</body>
</html>
类选择器：
/*类选择器语法
.class的名称{}
好处，可以多个标签归类是同一个class
*/
.biaoti1{
color: #b8e967;
}
.biaoti2{
color: #de9ed1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<h1 class="biaoti1">标题1</h1>
<h1 class="biaoti2">标题2</h1>
<h1 class="biaoti2">标题3</h1>
<p class="biaoti1">段落内容</p>
</body>
</html>
id选择器
/*
优先级：id选择器>类选择器>标签选择器
id选择器：
#id名称{}
*/
#id1{
color: #de9ed1;
}
#id2{
color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style3.css">
</head>
<body>
<h1 id="id1">标题1</h1>
<h1 id="id2">标题2</h1>
</body>
</html>
层次选择器
/*
后代选择器,包含所有子代 祖爷爷 爷爷 父亲 你 儿子 孙子
*/
body p{
background: #de9ed1;
}
/*
子代选择器，只包含一代子代 祖爷爷 爷爷
*/
body>p{
background: #b8e967;
}
/*
相邻兄弟选择器，同辈，只选择一个，自己的下一个，不包括自己
.p2+p 改变的是p3
*/
.p2+p{
background: aqua;
}
/*
通用兄弟选择器，同辈自己以及自己以下的所有同辈
*/
.p2~p{
color: #e90b1b;
border-radius: 24px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>p1</p>
<p class="p2">p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>
结构伪类选择器
/*
选中ul的第一个子元素li
*/
ul li:first-child{
background: #b8e967;
}
/*
选中ul的最后一个子元素li
*/
ul li:last-child{
background: #de9ed1;
}
/*
选中第一个p
选中p元素的父元素，选择父元素的第二个子元素，按顺序
*/
p:nth-child(2){
background: #e90b1b;
}
/*
选中第二个p
选中p元素的父元素，选择父元素的与p同类型元素中的第二个子元素，按类型
*/
p:nth-of-type(2){
background: #a8c0e9;
}
/*
a标签,鼠标移到标签上就会显示背景色
*/
a:hover{
background: #74a6ff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<a href="">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>
</body>
</html>
属性选择器（常用）
/*
float: left; 向左浮动
display: block;方块
width: 50px;方块宽
height: 50px;方块高
border-radius: 10px;方块变圆角
background: aquamarine;方块颜色
text-align: center;文本居中
color: #de9ed1;字体颜色
text-decoration: none;去下划线
margin-right: 5px;方块向右移动5px
font: bold 20px/50px Arial;字体设置：粗体 字体大小/行高 字体
*/
.demo a{
float: left;
display: block;
width: 50px;
height: 50px;
border-radius: 10px;
background: aquamarine;
text-align: center;
color: #de3725;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*
选中存在id属性的元素 标签[]{}
[属性名]
*/
a[id]{
background: #fff788;
}
/*
选中存在id属性为first的元素 标签[]{}
[属性名=属性值]
*/
a[id=first]{
background: #e98f81;
}
/*
选中class属性带有links的元素 标签[]{}
[属性名*="属性值（正则）"]
*/
a[class*="links"]{
background: #67bfe9;
}
/*
选中href属性以image开头的元素 标签[]{}
[属性名^="属性值（正则）"]
*/
a[href^="image"]{
background: #e784e9;
}
/*
选中href属性以pdf结尾的元素 标签[]{}
[属性名$="属性值（正则）"]
*/
a[href$="pdf"]{
background: #e9e877;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="image/123.html" class="links item">3</a>
<a href="image/123.png" class="links item">4</a>
<a href="image/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item" id="aaa">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
css的作用及字体样式
span
#title1{
font-size: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
欢迎学习 <span id="title1">Java</span>
</body>
</html>
字体样式
/*
font-family:英文字体,中文字体
font-size:字体大小
font-weight:字体粗细
color:字体颜色
*/
body{
font-family: "Adobe Caslon Pro",华文行楷;
color: #b8e967;
}
h1{
font-size: 50px;
}
p{
font-size: 30px;
}
.p1{
font-weight: bolder;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>张伯端</h1>
<p class="p1">刀笔随身四十年，是非非是万千千。</p>
<p class="p2">一家温饱千家怨，半世功名百世愆。</p>
<p class="p3">紫绶金章今已矣，芒鞋竹杖轻悠然。</p>
<p class="p4">有人问我蓬莱路，云在青山月在天。</p>
<p class="p5">I have had my invitation to this world's festival, and thus my life has been blessed. </p>
</body>
</html>
/*
oblique:字体风格，斜体
*/
p{
font: oblique bolder 20px "楷体";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<p>刀笔随身四十年，是非非是万千千。</p>
</body>
</html>
文本样式
/*
color:文本颜色 单词，#rgb rgba(0,0,0,0.5)最后一个表示透明度
text-align:文本排版，居中等
text-indent: 2em;段落首行缩进2字符
height: 150px; 一段字体的总高度
line-height: 30px;一行字的高度
text-decoration: underline;下划线
text-decoration: line-through;中划线
text-decoration: overline;上划线
*/
h1{
color: rgba(233, 11, 27, 0.5);
text-align: center;
}
h5{
color: #74a6ff;
text-align: center;
}
p{
text-indent: 2em;
}
.p1{
background: #b8e967;
height: 150px;
line-height: 30px;
}
.p2{
text-decoration: underline;
}
.p3{
text-decoration: line-through;
}
.p4{
text-decoration: overline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>师说</h1>
<h5>【作者】韩愈 【朝代】唐 </h5>
<p class="p1">古之学者必有师。师者，所以传道受业解惑也。人非生而知之者，孰能无惑？惑而不从师，其为惑也，终不解矣。生乎吾前，其闻道也固先乎吾，吾从而师之；生乎吾后，其闻道也亦先乎吾，吾从而师之。吾师道也，夫庸知其年之先后生于吾乎？是故无贵无贱，无长无少，道之所存，师之所存也。</p>
<p class="p2">嗟乎！师道之不传也久矣！欲人之无惑也难矣！古之圣人，其出人也远矣，犹且从师而问焉；今之众人，其下圣人也亦远矣，而耻学于师。是故圣益圣，愚益愚。圣人之所以为圣，愚人之所以为愚，其皆出于此乎？爱其子，择师而教之；于其身也，则耻师焉，惑矣。彼童子之师，授之书而习其句读者，非吾所谓传其道解其惑者也。句读之不知，惑之不解，或师焉，或不焉，小学而大遗，吾未见其明也。巫医乐师百工之人，不耻相师。士大夫之族，曰师曰弟子云者，则群聚而笑之。问之，则曰：“彼与彼年相若也，道相似也。位卑则足羞，官盛则近谀。”呜呼！师道之不复可知矣。巫医乐师百工之人，君子不齿，今其智乃反不能及，其可怪也欤！</p>
<p class="p3">圣人无常师。孔子师郯子、苌弘、师襄、老聃。郯子之徒，其贤不及孔子。孔子曰：三人行，则必有我师。是故弟子不必不如师，师不必贤于弟子，闻道有先后，术业有专攻，如是而已。</p>
<p class="p4">李氏子蟠，年十七，好古文，六艺经传皆通习之，不拘于时，学于余。余嘉其能行古道，作《师说》以贻之。</p>
</body>
</html>
/*
vertical-align: middle; 字体与图片水平居中对齐
*/
img,span{
vertical-align: middle;
}
/*
超链接去下划线
*/
a{
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<p>
<img src="images/1.jpg" alt="" width="100" height="100"/>
<span>aaaaaaaaaa</span>
</p>
<a href="">abc</a>
</body>
</html>
文本阴影和超链接伪类
/*默认的颜色*/
a{
text-decoration: none;
color: rgb(6, 5, 6);
}
/*鼠标悬浮的颜色*/
a:hover{
color: #e784e9;
font-size: 50px;
}
/*鼠标按住未释放时的颜色*/
a:active{
color: #b8e967;
}
/*文字阴影
水平偏移
垂直偏移
阴影半径
阴影颜色
*/
#price{
text-shadow: 8px -8px 2px #74a6ff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<a href="#">
<img src="images/1.png" alt="" width="200" height="200"/>
</a>
<p>
<a href="">天龙八部</a>
</p>
<p>
<a href="">作者：金庸</a>
</p>
<p id="price">
￥100
</p>
</body>
</html>
列表样式练习
#nav{
width: 230px;
background: darkgrey;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: #de3725;
}
ul{
background: darkgrey;
}
/*
ul li
list-style: none; 去掉列表前面的点 circle 空心圆 decimal 数字 square 正方形
*/
ul li{
line-height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: #000000;
}
a:hover{
color: orange;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.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>
</ul>
</div>
</body>
</html>
背景图像应用及渐变
/*
border: 1px solid red;边框：粗细，线型：实线，颜色
background-image: url("../images/1.jpg"); 插入背景图片，默认全部平铺
background-repeat: repeat-x;只水平平铺一行
background-repeat: repeat-y;只竖直平铺一列
background-repeat: no-repeat;不平铺
*/
div{
width: 1000px;
height: 500px;
border: 1px solid red;
background-image: url("../images/1.jpg");
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
#nav{
width: 230px;
background: darkgrey;
}
/*
background: #de3725 url("../images/2.png") 180px 2.5px no-repeat; 添加图片
*/
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: #de3725;
background: #de3725 url("../images/2.png") 190px 2.5px no-repeat;
}
ul{
background: darkgrey;
}
/*
ul li
list-style: none; 去掉列表前面的点 circle 空心圆 decimal 数字 square 正方形
*/
ul li{
line-height: 30px;
list-style: none;
text-indent: 1em;
background: darkgrey url("../images/2.png") 160px 0px no-repeat;
}
a{
text-decoration: none;
font-size: 14px;
color: #000000;
}
a:hover{
color: orange;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.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>
</ul>
</div>
</body>
</html>
渐变
/*
径向渐变
圆形渐变
*/
body{
background: linear-gradient(19deg,#edaca5 0%, #ede098 100%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>
盒子模型及边框使用
边框
/*
常见规范如下
*/
body{
margin: 0;
padding: 0;
text-decoration: none;
}
#box{
width: 300px;
border: 1px solid red;
}
h2{
font-size: 16px;
background: #b8e967;
line-height: 30px;
margin: 0;
color: white;
}
form{
background: #b8e967;
}
div:nth-of-type(1)>input{
border: 3px solid black;
}
div:nth-of-type(2)>input{
border: 3px dashed #e054e9;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="password">
</div>
<div>
<span>邮箱：</span>
<input type="email">
</div>
</form>
</div>
</body>
</html>
内外边距及div居中
/*
margin: 0 auto; 外边框，上下为0 ，左右auto自动居中
*/
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
/*
margin: 0 5px 10px 15px; 上 0px 右5px 下10px 左15px 顺时针
*/
h2{
background: #b8e967;
margin: 0 5px 10px 15px;
}
form{
background: #74a6ff;
}
/*
padding: 0 50px 10px 100px;内边距 上0 右50 下10 左100
*/
div:nth-of-type(2){
background: #e784e9;
padding: 0px 50px 10px 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="password">
</div>
<div>
<span>邮箱：</span>
<input type="email">
</div>
</form>
</div>
</body>
</html>
圆角边框及阴影
边框圆角
/*
border-radius: 30px;上下左右都是30
border-radius: 50px 10px;左上，右下50 右上 左下10
border-radius: 50px 10px 30px 70px;左上50 右上10 右下30 左下70 顺时针
圆圈 圆角=宽度
*/
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/styel.css">
</head>
<body>
<div>
</div>
</body>
</html>
圆形
/*
半圆形：
width: 100px;
height: 50px;
border: 10px solid red;
border-radius: 100px 100px 0px 0px;
圆形：
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 100px;
扇形：
width: 100px;
height: 100px;
background: red;
border-radius: 100px 0px 0px 0px;
*/
div{
width: 100px;
height: 100px;
background: red;
border-radius: 100px 0px 0px 0px;
}
img{
border-radius: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<div></div>
<img src="images/1.jpg" alt=""/>
</body>
</html>
阴影
/*
用阴影实现发光效果
*/
.div1{
width: 100px;
height: 100px;
border: 10px solid red;
box-shadow: 10px 10px 100px yellow;
}
.div2{
width: 500px;
margin: 30px auto;
}
.div2 img{
border-radius: 150px;
box-shadow: 10px 10px 100px yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="div1"></div>
<div class="div2"><img src="images/1.jpg" alt=""></div>
</body>
</html>
display和浮动
display：
/*
display: block 块元素
display: inline 行内元素
display: inline-block 行内块元素
display: none 消失
*/
div{
width: 100px;
height: 100px;
border: 5px solid red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 5px solid #74beff;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
浮动（左右浮动）：
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px solid #000000;
}
.layer01{
border: 1px dashed #74a6ff;
display: inline-block;
float: left;
}
.layer02{
border: 1px dashed #e964e1;
display: inline-block;
float: left;
}
.layer03{
border: 1px dashed #b8e967;
display: inline-block;
float: left;
}
/*
display: inline-block;
float: left;
clear: both;
既有浮动效果，又是一个块元素，独占一行
*/
.layer04{
border: 1px dashed #ae6e47;
font-size: 12px;
line-height: 23px;
display:inline-block;
float: left;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father">
<div class="layer01"><img src="images/1.png" alt="" width="100" height="300"></div>
<div class="layer02"><img src="images/2.png" alt="" width="100" height="300"></div>
<div class="layer03"><img src="images/3.png" alt="" width="100" height="300"></div>
<div class="layer04">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>
</body>
</html>
overflow及父级边框塌陷问题
/*
方式一：
#father{
border: 1px solid #000000;
height: 500px;
}
限制父元素高度来解决父级边框塌陷，不建议使用
*/
/*
方式二：
<div class="clear"></div>
.clear{
clear: both;
margin: 0;
padding: 0;
}
增加空的div解决父级边框塌陷，可以使用
div增加在父级里面的最下面
*/
/*
方式三：
#father{
border: 1px solid #000000;
overflow: hidden;
}
通过overflow来解决父级边框塌陷
*/
/*
方式四：
通过在父类添加一个伪类实现
#father:after{
content: '';
display: block;
clear: both;
}
*/
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px solid #000000;
}
#father:after{
content: '';
display: block;
clear: both;
}
.layer01{
border: 1px dashed #74a6ff;
display: inline-block;
float: left;
}
.layer02{
border: 1px dashed #e964e1;
display: inline-block;
float: left;
}
.layer03{
border: 1px dashed #b8e967;
display: inline-block;
float: right;
}
/*
clear: right;右侧不允许有浮动元素
clear: left;左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
*/
.layer04{
border: 1px dashed #ae6e47;
font-size: 12px;
line-height: 23px;
display:inline-block;
float: right;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father">
<div class="layer01"><img src="images/1.png" alt="" width="100" height="300"></div>
<div class="layer02"><img src="images/2.png" alt="" width="100" height="300"></div>
<div class="layer03"><img src="images/3.png" alt="" width="100" height="300"></div>
<div class="layer04">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>
</body>
</html>
overflow:
#content{
width: 200px;
height: 150px;
overflow: scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<div id="content">
<img src="images/1.png" alt="" width="150" height="300">
<p>性命双修玄又玄，海底洪波驾法船。生擒活捉蛟龙首，始知匠手不虚传。</p>
</div>
</body>
</html>
定位的使用及练习
默认情况
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #74a6ff;
padding: 0;
}
#first{
background: #b8e967;
border: 1px dashed #a6f5ff;
}
#second{
background: #e784e9;
border: 1px dashed #ff99e8;
}
#third{
background: #67bfe9;
border: 1px dashed #e8ff94;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
相对定位
/*
相对于自己原来的位置进行偏移 上下左右 正反 负是
他仍然在标准文件流中，他原来的位置会被保留
position: relative;
top: -20px; 负上 正下
left: -20px 负左 正右
right
bottom
*/
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #74a6ff;
padding: 0;
}
#first{
background: #b8e967;
border: 1px dashed #a6f5ff;
position: relative;
top: -20px;
left: -20px;
}
#second{
background: #e784e9;
border: 1px dashed #ff99e8;
position: relative;
right: -30px;
}
#third{
background: #67bfe9;
border: 1px dashed #e8ff94;
position: relative;
bottom: -30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
练习
#father{
border: 3px solid red;
width: 300px;
height: 300px;
padding: 10px;
}
a{
width: 100px;
height: 100px;
display: block;
background: #e784e9;
text-align: center;
line-height: 100px;
color: white;
text-decoration: none;
}
a:hover{
background: #67bfe9;
}
#a2,#a4{
position: relative;
top: -100px;
right: -200px;
}
#a5{
position: relative;
top: -300px;
right: -100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father">
<a href="" id="a1">链接1</a>
<a href="" id="a2">链接2</a>
<a href="" id="a3">链接3</a>
<a href="" id="a4">链接4</a>
<a href="" id="a5">链接5</a>
</div>
</body>
</html>
绝对定位
/*
1.如果父级元素没有定位，绝对定位是相对于浏览器定位的,一般不会这样做
position: absolute;
top: 20px;
left: 20px;
right
bottom
*/
/*
2.如果父级元素有定位，绝对定位是相对于父级元素定位的,在父级元素范围内移动
position: absolute;
top: 20px;
left: 20px;
right
bottom
*/
/*
绝对定位后，他不在标准文档流中，原来的位置不会被保留
*/
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid #74a6ff;
padding: 0;
position: relative;
}
#first{
background: #b8e967;
border: 1px dashed #a6f5ff;
position: absolute;
top: 20px;
left: 20px;
}
#second{
background: #e784e9;
border: 1px dashed #ff99e8;
position: absolute;
top: 20px;
left: 100px;
}
#third{
background: #67bfe9;
border: 1px dashed #e8ff94;
position: absolute;
top: 20px;
right: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
固定定位
/*
绝对定位：相对浏览器，随滚动条变化
固定定位：不随滚动条变化，永远在页面的固定位置
*/
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){
width: 100px;
height: 100px;
background: #67bfe9;
position: fixed;
right: 0;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
z-index
#content{
margin: 0;
padding: 0;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid black;
width: 479px;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
#content ul{
position: relative;
}
.TipTest,.TigBg{
position: absolute;
width: 479px;
height: 25px;
top: 300px;
}
.TigBg{
background: #e9b95a;
opacity: 0.5;
}
.TipTest{
z-index: 999;
color: #e054e9;
}
/*
opacity: 0.5; 设置透明度
z-index: 999;图层，默认是0，可以设置，1,2,3,4...最大无限制
*/
<!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/bj.png" alt=""></li>
<li class="TipTest">背景图片</li>
<li class="TigBg"></li>
<li>时间：2078-9-9</li>
<li>地点：月球</li>
</ul>
</div>
</body>
</html>
总结
学习视频
学习视频
这篇关于CSS3的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-12-07uniapp动态设置不同的css有哪些方法？-icode9专业技术文章分享
- 2024-12-07UniApp 中，怎么通过 CSS 设置 view 组件的水平居中效果？-icode9专业技术文章分享
- 2024-12-06TailwindCSS开发入门教程
- 2024-12-06TailwindCSS项目实战：从入门到上手
- 2024-12-06TailwindCss项目实战：初学者指南
- 2024-12-05TailwindCSS入门指南：轻松上手实用教程
- 2024-12-05TailwindCss入门指南：轻松上手实用技巧
- 2024-12-04Tailwind.css入门：简洁高效的设计利器
- 2024-12-03Tailwind.css学习：从入门到实战的全面指南
- 2024-11-29Tailwind.css入门指南：快速上手实用教程
