CSS教程

CSS3

本文主要是介绍CSS3,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

CSS3

概述

image

image

image

快速入门

image

方式一:

<!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>

image

方式二:

image

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>

image

三种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>

三种基本选择器

image

标签选择器:

/*标签选择器,会选择到页面上所有这个标签的元素*/
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>

image

类选择器:

/*类选择器语法
.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>

image

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>

image

image

层次选择器

image

image

/*
后代选择器,包含所有子代 祖爷爷 爷爷 父亲 你 儿子 孙子
 */
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>

image

结构伪类选择器

/*
选中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>

image

属性选择器(常用)

/*
     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>

image

css的作用及字体样式

image

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>

image

/*
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>

image

文本样式

image

/*
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>

image

/*
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>

image

文本阴影和超链接伪类

/*默认的颜色*/
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>

image

列表样式练习

#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>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>

</body>
</html>

image

背景图像应用及渐变

image

/*
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>

image

#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>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>

</body>
</html>

image

渐变

/*
径向渐变
圆形渐变
 */
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>

image

盒子模型及边框使用

image

image

边框

/*
常见规范如下
 */
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>

image

内外边距及div居中

image

/*
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>

image

圆角边框及阴影

边框圆角

/*
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>

image

圆形

/*
半圆形:
    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>

image

阴影

/*
用阴影实现发光效果
 */
.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>

image

display和浮动

image
image

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>

image

浮动(左右浮动):

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>

image

overflow及父级边框塌陷问题

image

/*
方式一:
#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>

image
image

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>

image

定位的使用及练习

默认情况

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>

image

相对定位

/*
相对于自己原来的位置进行偏移 上下左右 正反 负是
他仍然在标准文件流中,他原来的位置会被保留
    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>

image

练习

image

#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>

image

绝对定位

/*
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>

image

固定定位

/*
绝对定位:相对浏览器,随滚动条变化
固定定位:不随滚动条变化,永远在页面的固定位置
 */
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>

image

z-index

image

#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>

image

总结

image

image

image

image

image

image

学习视频

学习视频

这篇关于CSS3的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!