CSS

前端基础 专栏收录该内容
3 篇文章 0 订阅

CSS3

如何学习

1.CSS:Cascading Style Sheets(层叠样式表)

是W3C标准的表现部分

2.怎么用

3.CSS选择器(重点+难点)

4.美化网页(文字,阴影,超链接,列表,渐变等)

5.盒子模型

6.浮动

7.定位

8.网页动画(特效)

1. CSS

1.1 什么是CSS

Cascading Style Sheets(层叠样式表)

相当于对HTML进行美颜

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…

1.2 发展史

CSS1.0

CSS2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO(搜索引擎优化)

CSS2.1 浮动,定位

CSS3.0 圆角,阴影,动画…浏览器兼容性

1.3 第一个CSS程序

文件基本结构:

第一个css程序(文件夹)

​ css(文件夹)

​ style.css

​ index.html

  • 直接嵌入写法(使用style标签)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个css程序</title>

    <!--规范,style标签可以编写css的代码。
    每一个声明,最好使用分号结尾。
    语法:
        选择器{
            声明1;
            声明2;
        }
    -->

    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>
    第一个程序
</h1>

</body>
</html>
  • 分离写法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个css程序</title>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>
    第一个程序
</h1>

</body>
</html>
h1{
    color: red;
}

使用CSS的优势:

1、内容和表现分离

2、网页结构表现统一,可以复用

3、样式丰富

4、利用SEO,容易被搜索引擎收录

5、推荐使用独立于HTML的css文件写法

1.4. CSS的导入方式

1.内部样式

2.外部样式

链接式:全部一起渲染(用的多),属于html

导入式:先展示骨架,再变得好看,属于css,是特有的

3.行内样式

index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式</title>

    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

    <!--内部样式-->
    <style>
        /*这里要写css代码,所以要用css的注释方式*/
        h1{
            color: green;
        }
    </style>

<!--    优先级:覆盖,优先原则-->

</head>
<body>

<!--行内样式:在标签元素中,编写一个style属性,编写样式-->
<h1 style="color: red">我是行内标题</h1>

</body>
</html>

index2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二种</title>

    <!--导入式-->
    <style>
        @import url("css/style.css");
    </style>

</head>
<body>
<h1>第二种测试</h1>
</body>
</html>

style.css

/*外部样式*/
h1{
    color: yellow;
}

2. 选择器

作用:选择页面上的某一个或者某一类元素

2.1 基本选择器(重要)

1、标签选择器

对此页面内所有此标签都设置同样的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器,会选择到此页面上所有的这个标签的元素*/
        h1{
            color: purple;
            border-radius: 23px;
            background: aqua;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
<h1>第一行</h1>
<h1>第二行</h1>
<p>内容</p>

</body>
</html>

2、类选择器 class

对此页面内所有同一class属性的都设置同样的样式,可跨标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*类选择器
        格式:.class的名称{}
        优点:可以多个标签归类,是同一个class,可以复用,也可以跨标签使用*/
        .head1{
            color: green;
        }
        .head2{
            color: #000;
        }

    </style>
</head>
<body>

<h1 class="head1">第一个标题</h1>
<h1 class="head2">第二个标题</h1>
<h1 class="head1">第三个标题</h1>
<p class="head1">正文</p>
</body>
</html>

3、id选择器

全局唯一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*id选择器:id必须保证全局唯一
        格式:#id的名称{}

        优先级:
        不遵循就近原则
        id选择器>类选择器>标签选择器
        */
        #wyc{
            color: red;
        }
        .wangyingchao{
            color: green;
        }
        h1{
            color: blue;
        }
    </style>
</head>
<body>

<h1 class="wangyingchao" id="wyc" >标题1</h1>
<h1 class="wangyingchao">标题2</h1>
<h1 class="wangyingchao">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>


</body>
</html>

优先级:id选择器>类选择器>标签选择器

2.2 高级选择器之层次选择器

1、后代选择器

在某个元素后面的都执行此样式

body p{
    background: green;
}

2、子选择器

之后的一代执行此样式

body>p{
    background: green;
}

3、相邻兄弟选择器

相邻(向下)的一个兄弟执行此样式

.active+p{
    background: green;
}

4、通用选择器

向下的所有兄弟元素

.active~p{
    background: green;
}

总代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器*/
        /*p{
            background: red;
        }*/

        /*后代选择器*/
        /*body后面的所有p标签都使用此样式*/
        /*body p{
            background: green;
        }*/

        /*子选择器,只有之后的一代*/
        /*body>p{
            background: green;
        }*/

        /*相邻兄弟选择器,在其后相邻(向下)的一个兄弟执行此样式*/
        /*.active+p{
            background: green;
        }*/

        /*通用选择器,在选中元素其后向下的所有兄弟元素*/
        .active~p{
            background: green;
        }

        /**/
    </style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p >p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<!--<p class="active">p7</p>
<p>p8</p>-->
</body>
</html>

2.3 高级选择器之结构伪类选择器

伪类:对标签进行一些条件选择,以冒号开头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--不使用class,id选择器-->

    <style>
        /*选中ul的第一个子元素*/
        ul li:first-child{
            background: aqua;
        }

        /*选中ul的最后一个子元素*/
        ul li:last-child{
            background: aqua;
        }

        /*选中p1:定位到父元素,选择当前的第一个元素
        选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素,按顺序*/
        p:nth-child(1){
            background: olivedrab
        }

        /*选中父元素下的p元素的第一个,按照类型进行选择*/
        p:nth-of-type(2){
            background: yellow;
        }

        /*鼠标悬停在上边,变成背景色为黑色,通过鼠标移动形成动画效果*/
        a:hover{
            background: black;
        }

    </style>
</head>
<body>
<!--<a href="">假装特效</a>
<br>-->
<!--<h>h1</h>-->
<p>p0</p>
<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>
        /*全部点亮,使用类选择器*/
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;/*居中方式*/
            color: gainsboro;/*文字颜色*/
            text-decoration: none;/*取消下划线*/
            margin-right: 5px;/*块之间的左右距离*/
            font: bold 20px/50px Arial;/*设置字体,粗体,字体大小20px,行高50px,字号Arial*/
        }

        /*测试 a[条件]{格式}*/
        /*= 绝对等于
        *= 包含等于
        ^= 以此开头
        &= 以此结尾*/
        /*选中存在id属性的元素   属性名*/
        /*a[id]{
            background: yellow;
        }*/

        /*选中id为特定值的元素   属性值,可以使用正则表达式*/
        /*a[id=first]{
            background: orange;
        }*/

        /*选中class里有links的元素*/
        /*a[class *= "first"]{
            background: yellow;
        }*/

        /*选中href中以http开头的元素*/
        /*a[href ^=http]{
            background: purple;
        }*/

        /*选中href中以pdf结尾的元素*/
        a[href $= pdf]{
            background: olivedrab;
        }
    </style>

</head>
<body>

<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http://www.hao123.com" class="links item active" target="_blank" title="test2">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">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>

总结:

=绝对等于

*= 包含等于

^= 以此开头

&= 以此结尾

3. 美化网页元素

3.1 为什么要美化网页

1、有效的传递页面信息

2、美化网页,吸引用户

3、凸显页面的主题

4、提高用户的体验

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:粗细
    color:颜色
    也可以直接用font一起设置
    -->
    <style>
        body{
            font-family: "Arial",楷体;
            color: red;
        }

        h1{
            font-size: 50px;
        }

        .p1{
            font-weight: bold;
        }
    </style>
</head>
<body>

<h1>什么是省级、国家级、核心期刊?</h1>

<p class="p1">
    国家没有任何一个政府部门给刊物划分级别,所谓的刊物级别只是期刊行业的一种认识和一些社会机构推出期刊目录,以下介绍仅供参考。
</p>

<p>
    虽然国家没有划分,可有些职称评审部门对期刊级别有要求。比如浙江一级、二级,四川A类、B类,现在一般是分为“核心期刊和普通期刊”两类,近几年有些地方在核心期刊里又分出:权威、重要、核心。
</p>
<p>
    hello, my dear friends, it is my great honor to be the host of today's conference.
</p>

</body>
</html>

3.3 文本样式

1、颜色 color rgb rgba

2、文本对齐的方式 text-align

3、首行缩进 text-indent

4、行高 line-height 块的高度等于行高

5、装饰 text-decoration

6、文本和图片水平对齐 vertical-align: middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    颜色:可以使用英文单词,可以使用RGB,也可以使用RGBA(A代表透明度,取值为0-1)
    排版:可以居中,可以左对齐,可以右对齐
    缩进:em代表一个字符
    行高:控制行的高度与块的高度一致就可以上下居中显示
    下划线:上划线、中划线、下划线都与line有关
    -->
    <style>
        h1{
            color: #0000FF;
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: #2700ff;
            height: 300px;
            line-height: 300px;
        }
        .l1{
            text-decoration: underline;/*下划线*/
        }
        .l2{
            text-decoration: line-through;/*中划线*/
        }
        .l3{
            text-decoration: overline;/*上划线*/
        }
        /*a标签默认有下划线。需要去下划线*/
        a{
            text-decoration: none;
        }

        /*图片和文字水平对齐,两者对齐*/
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<p class="l1">123456</p>
<p class="l2">123456</p>
<p class="l3">123456</p>

<a href="">123</a>
<h1>什么是省级、国家级、核心期刊?</h1>

<p class="p1">
    国家没有任何一个政府部门给刊物划分级别,所谓的刊物级别只是期刊行业的一种认识和一些社会机构推出期刊目录,以下介绍仅供参考。
</p>

<p class="p2">
    虽然国家没有划分,可有些职称评审部门对期刊级别有要求。比如浙江一级、二级,四川A类、B类,现在一般是分为“核心期刊和普通期刊”两类,近几年有些地方在核心期刊里又分出:权威、重要、核心。
</p>
<p class="p3">
    hello, my dear friends, it is my great honor to be the host of today's conference.
</p>


<p>
    <img src="images/a.jpg" alt="">
    <span>asdfghjkl</span>
</p>

</body>
</html>

3.4 阴影

添加阴影text-shadow

属性分别是:阴影颜色 水平偏移 垂直偏移 阴影半径

水平方向向右为正

垂直方向向下为正

3.5 超链接伪类

最常用的是鼠标悬停操作 a:hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--取消所有a标签的下划线-->
    <style>
        /*默认的状态*/
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠标放上去的状态(重点)*/
        a:hover{
            color: orange;
            font-size: 50px;
        }
        /*鼠标按上去未释放的状态*/
        a:active{
            color: green;
        }
        /*已访问*/
        a:visited{
            color: purple;
        }
        /*添加阴影
        属性分别是:阴影颜色 水平偏移 垂直偏移 阴影半径
        水平方向向右为正
        垂直方向向下为正*/
        #price{
            text-shadow: aqua 0px 10px 10px;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="images/a.jpg" alt="">
</a>
<p>
    <a href="#">java核心技术</a>
</p>
<p>
    <a href="">作者:伟大的人</a>
</p>
<p id="price">
    ¥149
</p>
</body>
</html>

3.6 列表

/*ul li 选中ul下面的所有子单元li标签*/
/*list-style
    默认实心圆
    none:去掉标志
    circle:空心圆
    decimal:数字
    square:方形
    */
ul li{
    height: 35px;
    list-style: none;
    text-indent: 1em;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>&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>

style.css

#nav{
    width: 300px;/*可以通过审查元素,找到div,然后滚动鼠标调整大小*/
    background: gray;/*和下面的块颜色一致,表面上消除了空隙*/
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
/*ul li 选中ul下面的所有子单元li标签*/
/*list-style
    默认实心圆
    none:去掉标志
    circle:空心圆
    decimal:数字
    square:方形
    */
ul li{
    height: 35px;
    list-style: none;
    text-indent: 1em;
}
ul{
    background: gray;
}

a{
    color: black;
    font-size: 15px;
    text-decoration: none;
}
a:hover{
    color: orange;
    text-decoration: underline;

}

3.7 背景

背景颜色

背景图片

ps:尽量放在div里

<style>
div{
    width: 1000px;
    height: 800px;
    border: 1px solid red;
    background-image: url("images/test.jpg");
    /*默认是全部平铺 repeat*/
}
.div1{
    background-repeat: repeat-x;/*水平平铺*/
}
.div2{
    background-repeat: repeat-y;/*竖直平铺*/
}
.div3{
    background-repeat: no-repeat;/*不平铺*/
}
</style>
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /*第一种设置方式,都在background里设置
    为颜色 图片 图片位置 平铺方式*/
    background: red url("../images/d.jpeg") 270px 10px no-repeat ;
ul li{
    height: 35px;
    list-style: none;
    text-indent: 1em;
    /*第二种设置方式,分别设置*/
    background-image: url("../images/r.jpg");
    background-repeat: no-repeat;
    background-position: 150px 2px;
}

3.8 渐变

在[www.grabient.com]里,调整完样式,可以复制css代码

background-color: #4158D0;
background-image: linear-gradient(201deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            background-color: #4158D0;
            background-image: linear-gradient(201deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

        }
    </style>
</head>
<body>
</body>
</html>

4. 盒子模型

4.1 什么是盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bgpP2Vel-1606464333953)(C:\Users\Wang Yingchao\AppData\Roaming\Typora\typora-user-images\image-20201123190003200.png)]

margin:外边距

border:边框

padding:内边距

4.2 边框border

1、边框的粗细

2、边框的样式

3、边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*body总有一个默认的外边距margin:0*/
        body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        /*border:粗细 样式 颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
        }
        form{
            background: green;
        }

        h2{
            font-size: 16px;
            background-color: peachpuff;
            line-height: 30px;
            color: white;
        }

        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        div:nth-of-type(2) input{
            border: 3px dashed purple;/*虚线边框*/
        }
        div:nth-of-type(3) input{
            border: 5px dashed orange;
        }
    </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 内外边距

外边距的妙用:居中元素

margin: 0 auto;

/*margin参数
margin:0 都没有边距
margin:0 1px :上下0,左右5px
margin: 0 1px 2px 5px :从上面开始,顺时针方向
*/

内边距

/*padding参数
padding:10px  上下左右都是10px
padding:10px 5px  上下为10 左右为5
padding: 10px 5px 8px 7px
*/

盒子的计算方式:元素到底有多大

margin+border+padding+实际内容

4.4 圆角边框

4个角

<!--
    border-radius的参数:
    一个参数:四个角都是一样的参数
    两个参数:左上和右上以及相对的位置
    四个参数:左上 右上 右下 左下  顺时针方向-->
<style>
    div{
        width: 200px;
        height: 200px;
        border: 10px solid red;
        border-radius: 100px;
    }
</style>

ps:让头像按照圆形显示

/*让头像圆角显示,只要让圆角=宽度的一半=高度的一半*/
img{
border-radius: 40px;
}

4.5 阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--margin:0 auto
    居中是有条件的:在块元素中并且块元素有固定的宽度-->
    <style>
        /*div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            box-shadow: 10px 10px 100px yellow;
        }*/
        img{
            border-radius: 40px;
            box-shadow: 10px 10px 50px yellow;
        }
    </style>
</head>
<body>

</body>


<img src="images/test.jpg" alt="">
</html>

前端可以仿写:

使用源码之家、模板之家、Layui、vue、Element、飞冰,然后修改

5. 浮动

5.1 标准文档流

一般的网页是被重新布局过的,不然就会顺序排列

块级元素:独占一行

h1-h6 p div 列表

行内元素(内联元素):不独占一行

span a img strong

行内元素可以被包含在块级元素中,反之不行。

5.2 display

用来进行行内元素排列,但是更多使用float

实现块元素与行内元素的转换

<!--
block:块元素
inline:行内元素
inline-block:是块元素但是可以在一行
none:消失,不显示-->
<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: none;
    }

    span{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
    }
</style>

5.3 float

1、左右浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            margin: 10px;
            padding: 5px;
        }
        .layer01{
            display: inline-block;
            float:right;
        }
        .layer02{
            display: inline-block;
            float:right;
        }
        .layer03{
            display: inline-block;
            float:right;
        }
        .layer04{
            display: inline-block;
            float:right;
            clear: both;/*单独在一个块元素*/
        }
    </style>
</head>
<body>
<div id="father">
    <div class="layer01"><img src="images/test.jpg" alt=""></div>
    <div class="layer02"><img src="images/1.jpg" alt=""></div>
    <div class="layer03"><img src="images/2.jpg" alt=""></div>
    <div class="layer04">
        这是一个浮动测试
    </div>

</div>

</body>
</html>

clear

/*
clear:right 右侧不允许有浮动元素
clear:left  左侧不允许有浮动元素
clear:both  两侧不允许有浮动元素,所以自成一行
clear:none  允许有浮动
*/

5.4 父级边框塌陷的问题

解决方法:

1、增加父级元素的高度

#father{
    border: 1px solid #000;
    height: 800px;
}

2、增加空的div标签,清除浮动

<div class="clear"></div>

样式里

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3、overflow

在父级元素里增加一个

overflow:hidden;
<!--overflow属性:
hidden:超出范围的则隐藏,不显示
scroll:超出范围的变成滚动形式-->
<style>
    #content{
        width: 200px;
        height: 150px;
        overflow: scroll;
    }
</style>

4、父类添加一个伪类(最好的一种)

#father:after{
    content: '';
    display: block;
    clear: both;
}

小结:

  • 增加父级元素的高度

简单,但是元素高度被限制,不够灵活

  • 浮动元素后加空div

简单,但是代码中应该尽量避免空的div

  • overflow

简单,下拉的一些场景应避免使用

  • 父类添加一个伪类(推荐)

写法稍复杂,但是没有副作用

5.5 对比

  • display

方向不可以控制,只能控制块级元素和行内元素

  • float

浮动起来会脱离标准文档流,要解决父级边框塌陷问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        div{
            margin: 10px;
            padding: 5px;
        }
        #father{
            border: 1px solid #000;
            /*overflow: hidden;*/

            /*height: 800px;*/
        }

        #father:after{
            content: '';
            display: block;
            clear: both;
        }
        .layer01{
            border: 1px solid #000;
            display: inline-block;
            /*float:right;*/
        }
        .layer02{
            border: 1px solid #000;
            display: inline-block;
            float:right;
        }
        .layer03{
            border: 1px solid #000;
            display: inline-block;
            float:right;
        }
        .layer04{
            border: 1px solid #000;
            display: inline-block;
            float:right;
            /*clear: both;!*单独在一个块元素*!*/
        }
        /*.clear{
            clear: both;
            margin: 0;
            padding: 0;
        }*/
        /*
        clear:right 右侧不允许有浮动元素
        clear:left  左侧不允许有浮动元素
        clear:both  两侧不允许有浮动元素,所以自成一行
        clear:none  允许有浮动
        */
    </style>
</head>
<body>
<div id="father">
    <div class="layer01"><img src="images/test.jpg" alt=""></div>
    <div class="layer02"><img src="images/1.jpg" alt=""></div>
    <div class="layer03"><img src="images/2.jpg" alt=""></div>
    <div class="layer04">
        这是一个浮动测试
    </div>

<!--    <div class="clear"></div>-->

</div>

</body>
</html>

6. 定位

6.1 相对定位

用法:position: relative;

相对于原来的位置,进行指定的偏移

即使进行了相对定位,仍然在标准文档流中

原来的位置会被保留

top: -20px;
bottom: -10px;
left: -10px;
right: 20px;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--相对定位
    相对于自己原来的位置进行偏移-->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        #father{
            border: 1px solid red;
            padding: 0;
        }
        #first{
            border: 1px dashed #123456;
            background-color: #123499;
            position: relative;/*相对定位,上下左右,指的是距离边界多少距离*/
            top: -20px;
            left: -10px;

        }
        #second{
            border: 1px dashed #345678;
            background-color: #345699;

        }
        #third{
            border: 1px dashed #987654;
            background-color: #987600;
            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>

练习:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uSypLbxr-1606464333957)(C:\Users\Wang Yingchao\AppData\Roaming\Typora\typora-user-images\image-20201127105358799.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        /*欠缺边框*/div{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 1px solid red;

        }
        a{
            margin: 0;
            padding: 0;
            width: 100px;
            height: 100px;
            /*border: 1px solid pink;*/
            background-color: pink;
            display: block;
            line-height: 100px;
            text-align: center;
            text-decoration: none;

            /*欠缺的*/
            color: white;
        }
        a:hover{
            /*border: 1px solid blue;*/
            background-color: blue;
        }
        #first{

        }
        #second{
            position: relative;
            top: -100px;
            left: 200px;

        }
        #third{

        }
        #fourth{
            position: relative;
            top: -100px;
            left: 200px;

        }
        #fifth{
            position: relative;
            top: -300px;
            left: 100px;

        }
    </style>
</head>
<body>

<div>
    <a id="first" href="">链接1</a>
    <a id="second" href="">链接2</a>
    <a id="third" href="">链接3</a>
    <a id="fourth" href="">链接4</a>
    <a id="fifth" href="">链接5</a>
</div>

</body>
</html>

6.2 绝对定位

用法:position: absolute;

定位:上下左右

1、如果没有父级元素定位的前提,相对于浏览器定位

2、父级元素存在定位,相对父级元素进行偏移

基于父级或浏览器的位置,进行指定的偏移,与文档流无关,不占用原来的空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        #father{
            border: 1px solid red;
            padding: 0;
            position:relative;
        }
        #first{
            border: 1px dashed #123456;
            background-color: #123499;

        }
        #second{
            border: 1px dashed #345678;
            background-color: #345699;
            position: absolute;
            right: 30px;
            top:-15px;

        }
        #third{
            border: 1px dashed #987654;
            background-color: #987600;

        }
    </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: 1000px;
        }
        /*绝对定位,相对于浏览器的位置*/
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        /*固定定位,永远固定,不随滚动变化*/
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>

</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

6.4 z-index

图层的概念:默认是0,无上限,越大图层越靠外

背景透明度用opacity

index.html

<!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/1.jpg" alt=""></li>
        <li class="tipText">学习前端知识</li>
        <li class="tipBg"></li>
        <li>时间:2020-11-27</li>
        <li>地点:CSDN</li>
    </ul>

</div>

</body>
</html>

style.css

#content{
    width: 210px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid black;
}
ul,li{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
/*父级元素相对定位,子级元素绝对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top:102px;
}
.tipText{
    color: white;
    z-index: 1;
}
.tipBg{
    background-color: #060305;
    opacity: 0.5;/*背景的透明度*/
}

7. 动画

使用canvas动画

源码之家搜索一些HTML网站

8.总结

  • 0
    点赞
  • 2
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值