记录CSS的学习

最新推荐文章于 2021-10-20 12:58:47 发布

曹博Blog

最新推荐文章于 2021-10-20 12:58:47 发布

阅读量150

点赞数

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/qq_46062641/article/details/111560787

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS的学习

标注：通过学习b站上博主狂神说java的视频做的笔记。

如何学习CSS

CSS是什么
CSS怎么用（快速入门）
CSS选择器（重点+难点）
美化网页（文字，阴影，超链接，列表，渐变……）
盒子模型
浮动
定位
网页动画

CSS是什么

什么是CSS

Cascading Style Sheet 层叠样式表

CSS：表现（美化网页）

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

发展史

CSS1.0

CSS2.0 DIV(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动，定位

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

1、快速入门

注释方法：/**/

style一体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--规范，<style>可以编写css代码
每一个声明最好使用分号结尾。
语法：
    选择器{
        声明1;
        声明2;
        声明3;
    }
-->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>我是一级标题</h1>
</body>
</html>

分离

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--规范，<style>可以编写css代码
每一个声明最好使用分号结尾。
语法：
    选择器{
        声明1;
        声明2;
        声明3;
    }
<!--    使用link标签引入CSS文件-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是一级标题</h1>
</body>
</html>

CSS文件

h1{
    color: red;
}

建议使用分离写法

CSS的优势：

内容和表现分离
网页结构表现统一，可以实现复用。
样式十分丰富。
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录。

CSS的三种导入方式

内部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--style标签-->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>一级标题</h1>
</body>
</html>

外部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<!--使用link标签引入css文件-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>一级标题</h1>
</body>
</html>

/*这是注释*/
h1{
    color: red;
}

行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写央样式即可。-->
<h1 style="color: red">一级标题</h1>
</body>
</html>

优先级：

行内样式>内部样式 | 外部样式 ❌
就近原则 ✔

拓展：外部样式的两种写法

链接式

html标签

<!--使用link标签引入CSS文件-->
<link rel="stylesheet" href="css/style.css">

导入式

@import是CSS2.1特有的

<!--此方法已不常见-->
<style>
    @import url(css/style.css);
</style>

2、选择器

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

基本选择器

标签选择器：选中一类标签标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器会选择到页面上所有的这个标签的元素*/
        h1{
            color: #b4e55e;
            background: aqua;
            border-radius: 5px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
    <h1>HTML</h1>
    <h1>CSS</h1>
    <p>JavaScript</p>
</body>
</html>

类选择器class：选中所有class属性一致的标签，跨标签 .类名{}

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

    <style>
        /*类选择器的格式 .class的名称{}
        好处,可以选择多个标签,是同一个class可以复用(归类)
        */
        .biaoti1{
            color: aqua;
        }
        .biaoti2{
            color: blanchedalmond;
        }
    </style>
</head>
<body>
<h1 class="biaoti1">标题1</h1>
<h1 class="biaoti2">标题2</h1>
<h1 class="biaoti1">标题3</h1>
<p class="biaoti2">p标签</p>
</body>
</html>

ID选择器：全局唯一 #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        id选择器:id必须保证全局唯一
        #id名称{
        }
        */
        #biaoti1{
            color: #99ff00;
        }
        .style1{
            color: firebrick;
        }
        h1{
            color: #ff1fd0;
        }
    </style>
</head>
<body>
<h1 id="biaoti1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

优先级：不遵循就近原则

ID选择器>类选择器>标签选择器

层次选择器

后代选择器：在某个元素的后面祖爷爷爷爷爸爸你

/*后代选择器*/
body p{
    background: green;
}

子选择器：一代，儿子

/*子选择器*/
body>p{
    background: #ff1fd0;
}

相邻兄弟选择器：具有相同父元素，同辈,后面的实现效果，即p，只选中一个

/*相邻兄弟选择器*/
.active + p{
    background: red;
}

通用兄弟选择器：当前选中元素的向下的所有元素

/*通用选择器*/
.active~p{
    background: #ff1fd0;
}

使用的网页结构图以及源码

设计网页基本机构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p{*/
        /*    background: green;*/
        /*}*/

        /*后代选择器*/
        /*body p{*/
        /*    background: green;*/
        /*}*/
        /*子选择器*/
        /*body>p{*/
        /*    background: #ff1fd0;*/
        /*}*/
        /*相邻兄弟选择器*/
        /*.active + p{*/
        /*    background: red;*/
        /*}*/
        /*通用选择器*/
        /*.active~p{*/
        /*    background: #ff1fd0;*/
        /*}*/
    </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>
</body>
</html>

结构伪类选择器

伪类：在原来的基础上加上了条件。（带冒号）

index文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--避免使用class，id选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: #06ff00;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: red;
        }
    </style>
</head>
<body>
    <a href="#">这是超链接</a>
<h1>标题</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

ul的第一个子元素

ul li:first-child{
    background: #06ff00;
}

ul的最后一个子元素

ul li:last-child{
    background: red;
}

选中p2:定位到父元素，选择当前的第二个元素，选择当前p元素的父级元素，选中父级元素的第二个，并且是当前元素才生效！，此方法把标题作为第一个元素

/*选中父元素下的第二个p元素，按顺序，不分类型*/
p:nth-child(2){
    background: aqua;
}

选中p2:定位到父元素，选择当前的第二个元素，选择当前p元素的父级元素，选中父级元素的第二个p元素，此方法把标题作为第p1个元素

/*选中父元素下的p元素的第二个，按类型*/
p:nth-child(2){
    background: aqua;
}

鼠标移动上去变背景颜色

a:hover{
    background: #ff1fd0;
}

属性选择器（常用）

把id和class进行了结合

index文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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: 10px;
            font: bold 20px/50px Arial;
        }
    /*属性名，属性名=属性值（可用正则）
    =:绝对等于
    *=：包含等于
    ^=：以这个开头
    $=：以这个结尾
    */
    /*存在id属性的元素a[id]{}*/
        a[id]{
            background: yellow;
        }
    /*选中id属性为first的元素*/
        a[id="first"]{
            background: green;
        }
    /*选中class中含有links的元素*/
        a[class*="links"]{
            background: red;
        }
    /*选中href中以http开头的元素*/
        a[href^=http]{
            background: #ff1fd0;
        }
    /*选中以png结尾的文件*/
        a[href$=png]{
            background: firebrick;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="https://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="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 last">6</a>
    <a href="/a.png" class="links item last">7</a>
    <a href="/abc.png" class="links item last">8</a>
    <a href="abc.doc" class="links item last">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>

属性选择器格式：

属性名，属性名=属性值（可用正则）
= ：绝对等于
*= ：包含等于
^= ：以这个开头
$= ：以这个结尾

例子：

存在id属性的a元素

a[id]{
    background: yellow;
}

选中id属性为first的a元素

a[id="first"]{
    background: green;
}

选中class中含有links的a元素

a[class*="links"]{
    background: red;
}

选中href中以http开头的a元素

a[href^=http]{
    background: #ff1fd0;
}

选中href中以png结尾的a元素

a[href$=png]{
    background: firebrick;
}

3、美化网页元素

为什么要美化

有效的传递页面信息
美化页面，页面漂亮才能吸引用户
凸显页面主题
提高用户的体验

span标签：重点要突出的字使用span标签套起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎学习 <span id="title1">CSS3</span>
</html>

字体样式

index文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        color：字体颜色
        font-family:字体
        font-size:字体大小
        font—weigth:调整字体的粗细
                bold：粗的
                bolder：更粗的
                lighter：更细的
                normal：正常的
                也可用数值，数值最高1000
        */
        body{
            font-family: "Arial Black" , 楷体;
            color: #ff1fd0;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。 [1]
</p>
<p>Let me not to the marriage of true mindsAdmit impediments. Love is not loveWhich alters when it alteration finds,Or bends with the remover to remove:
</p>
</body>
</html>

本节重点

color：字体颜色
font-family:字体
font-size:字体大小
font—weigth:调整字体的粗细
bold：粗的
bolder：更粗的
lighter：更细的
normal：正常的
也可用数值，数值最高1000

补充：也可以把字体样式卸在一行

/*字体风格*/
p{
    font: oblique bold 12px/80px "楷体" ;
}

其中oblique是斜体（字体风格），bold是粗体（字体粗细），12px是字体大小，80px是行高，楷体为字体。

文本样式

index.php文件

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

    <style>
        /*
        颜色：
            单词
            RGB 0~f
            RGBA A:(0~1)
        text-align: center;     排版，居中
        text-indent: 2em;       段落首行缩进
        line-height: 300px;     行高，和块的高度一致就可以实现垂直居中
        */
        h1{
            color: rgba(0,255,255,0.5);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: blue;
            height: 300px;
            line-height: 300px;
        }
        .l1{
            /*下划线*/
            text-decoration: underline;
        }
        .l2{
            /*删除线*/
            text-decoration: line-through;
        }
        .l3{
            /*上划线*/
            text-decoration: overline;
        }
        a{
        /*超链接去下划线*/
            text-decoration: none;
        }
        /*文本与图片水平对齐
        vertical-align对齐是有一个参照的概念
        */
        img,span{
            /*center是水平的概念，middle才是上中下的概念*/
            vertical-align: middle;
        }
    </style>
</head>
<body>
<a href="#">超链接去下划线</a>
<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>
<h1>故事介绍</h1>
<p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。 [1]
</p>
<p class="p3">Let me not to the marriage of true mindsAdmit impediments. Love is not loveWhich alters when it alteration finds,Or bends with the remover to remove:
</p>
<p>
    <img src="images/test.png" alt="test">
    <span>12312314335456675</span>
</p>
</body>
</html>

颜色----------------color、rgb、rgba

/*
颜色：
单词
RGB 0~f
RGBA A:(0~1)
*/
h1{
    color: rgba(0,255,255,0.5);
}

文本对齐方式---------text-align:center

/*text-align: center;     排版，居中*/
h1{
    text-align: center;
}

首行缩进-------------text-indent:2em

/*text-indent: 2em;       段落首行缩进*/
.p1{
    text-indent: 2em;
}

行高-----------------line-height:

/*line-height: 300px;     行高，和块的高度一致就可以实现垂直居中*/
    line-height: 300px;
}

单行文字上下居中------line-height:height

/*
text-indent: 2em;       段落首行缩进
line-height: 300px;     行高，和块的高度一致就可以实现垂直居中
*/
.p3{
    background: blue;
    height: 300px;
    line-height: 300px;
}

装饰-----------------text-decoration:

.l1{
    /*下划线*/
    text-decoration: underline;
}
.l2{
    /*删除线*/
    text-decoration: line-through;
}
.l3{
    /*上划线*/
    text-decoration: overline;
}
a{
/*超链接去下划线*/
    text-decoration: none;
}

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

/*文本与图片水平对齐
vertical-align对齐是有一个参照的概念
*/
img,span{
    /*center是水平的概念，middle才是上中下的概念*/
    vertical-align: middle;
}

阴影

/*阴影颜色，阴影位置，模糊半径*/
#price{
    text-shadow: #00fffd 10px 10px 2px;
}

超链接伪类

正常情况下只用a，a:hover

/*默认的颜色*/
a{
    text-decoration: none;
    color: #000000;
}
/*鼠标悬浮的颜色（只需记住hover）*/
a:hover{
    color: orange;
}
/*鼠标按住未释放的状态*/
a:active{
    color: green;
    font-size: 50px;
}
/*访问后（不管用）*/
/*a:visited{*/
/*    color: blue;*/
/*}*/

列表样式

index文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="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>

css文件

#nav{
    width: 300px;
    background: #a0a0a0;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 2em;
    line-height: 35px;
    background: red;
}
/*ul li
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
ul{
    background:#a0a0a0;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

背景

背景颜色

div{
    background: red;
}

背景图片

/*设置背景图片，默认为平铺*/
div{
    background-image: url("iamges/tx.jpg");
}
/*沿X、y轴方向平铺、水平*/
div{
    background-repeat: repeat-x;
}
/*沿y轴方向平铺、垂直*/
div{
    background-repeat: repeat-y;
}
/*不平铺*/
div{
    background-repeat: no-repeat;
}

综合

/*颜色， 图片，图片位置，平铺方式*/
div{
    background: red url("../images/a.gif") 200px 10px no-repeat;
}
ul li{
    background-image: url("../images/r.gif");
    background-position: 200px 2px;
}

安利一个好看的渐变网站：https://www.grabient.com

练习

渐变

/*径向渐变、圆形渐变*/
body{
    background-image: linear-gradient(19deg, #21ddfd 0%,#b721ff 100%);
}
/*一样*/
body{
    background: linear-gradient(19deg, #21ddfd 0%,#b721ff 100%);
}

4、盒子模型

index文件

<div class="box">
    <h2>登陆页面</h2>
    <form>
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
    </form>
</div>

css文件

/*一般网页有默认的外边距和内边距，我们为了不受到它的影响需要将她们清除*/
h1,ul,li,a,body{
    margin: 0;
    padding: 0;
    text-decoration: none;
}
/*border:粗细，样式，颜色*/
#box{
    width: 300px;
    border: 1px solid red;
}
h2{
    font-size: 16px;
    background-color: #3cbda6;
    line-height: 30px;
    color: white;
}
form{
    background: #3cbda6;
}
div:nth-of-type(1) input{
    border: 3px solid black;
}
div:nth-of-type(2) input{
    border: 3px dashed yellow;
}
div:nth-of-type(3) input{
    border: 3px solid black;
}

块元素结构图

margin：外边距
border：边框
padding：内边距

边框：

div:nth-of-type(1) input{
    border: 3px solid black;
}

外边距

/*居中*/
#box{
    margin: 0 auto;
}

内边距

/*顺序依次是上右下左，即顺时针旋转*/
#box{
    padding: 1 2 3 4;
}

盒子大小计算方式：

margin+boder+padding+内容

圆角边框

/*正圆，border-radius=height/2+1=width/2+1*/
div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-radius: 100px;
}
/*扇形（四分之一圆）*/
div {
    height: 100px;
    width: 100px;
    border: 1px solid red;
    border-radius: 100px 0 0 0;
}
/*半圆*/
div {
    height: 50px;
    width: 100px;
    border: 1px solid red;
    border-radius: 50px 50px 0 0;
}
/*border-radius四个参数分别是左上角半径、右上角半径、有下角半径、左下角半径*/

盒子阴影

div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    box-shadow: 10px 10px 100px yellow;
    text-align: center;
}
/*box-shadow: 水平移动、垂直移动、模糊半径、阴影颜色*/
img{
    border-radius: 50px;
    box-shadow: 10px 10px 100px yellow;
}

不要重复造轮子

5、浮动

概念：标准文档流

display概念：

块级元素：独占一行

例：h1~h6 div 列表 p

行内元素：不独占一行，好多元素可以放在同一行

例：span a img strong···

行内元素可以被包含在块元素中，反之不行

/*
display常用的三个值
block 块元素
inline-block 行内块元素，保持块元素的特性，也可以写在一行
inline 行内元素
none 消失
*/
div{
    height:100px;
    width:100px;
    border:1px solid red;
    display:inline-block;
}

浮动

div{
    float:left;
}
/*出现问题：
缩放网页时浮动元素会进行重新排版，解决办法clear属性
这时候div既有浮动的效果，也有块元素的特性，不会乱飘了
*/
div{
    float:left;
    clear:both；
}

解决父级边框塌陷问题

clear属性

left：左侧不允许有浮动

right：右侧不允许有浮动

both：两侧都不允许有浮动

方法一、给父级元素设置固定高度

方法二、添加一个空的div标签,并给他设置clear：both,清除浮动

.clear{
	clear:both;
	margin:0;
	padding:0;
}
<div class="clear"></div>

方法三、在父级元素中增加一个overflow:hidden;属性

overflow属性：

scroll:超出部分使用滚动条进行显示

hidden: 超出部分内容进行隐藏、修剪

#father{
    border: 1px #000 solid;
    overflow: hidden;
}

方法四、给父类添加一个伪类（推荐使用）

优点：避免了增加html代码

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

6、定位

分为相对定位和绝对定位

相对定位

相对于本身原来的位置进行位移

posttion: relative;相对于原来的位置，进行指定的偏移，他仍然在标准文档流中，原来的位置会被抱保留

#first{
	background-color: #a13d30;
    border: 1px solid #ff0000;
    /*相对于原来的位置，向上移动20px，向左移动20px*/
    posttion: relative;
    top: -20;
    left: -20;
    /*距离下面10px,右边 20px*/
    bottom： 10px;
    right: 20px;
}

练习：

<style>
    ul{
        padding:5px;
        border: 1px solid yellow;
        width: 300px;
        height: 300px;
    }
    ul li{
        background-color:red;
        list-style: none;
        margin:0;
        padding:0;
        position: relative;
        height:100px;
        width:100px;
        text-align: center;
        line-height: 100px;
    }
    ul li:hover{
        background-color:blue;
    }
    li:nth-of-type(2){
        top:-100px;
        left:200px;
    }
    li:nth-of-type(4){
        top:-100px;
        left:200px;
    }
    li:nth-of-type(5){
        top:-300px;
        left:100px;
    }
    a{
        color: black;
        text-decoration: none;
    }
</style>
<div>
    <ul>
        <li><a href="#">链接1</a></li>
        <li><a href="#">链接2</a></li>
        <li><a href="#">链接3</a></li>
        <li><a href="#">链接4</a></li>
        <li><a href="#">链接5</a></li>
    </ul>
</div>

绝对定位

position:absolute;

相对于父级或浏览器进行指定的偏移，因为他不在标准文档流中，所以原来的位置不会被保留；

没有给父元素设置定位的情况下，相对于浏览器定位；
若给父级元素设置了相对定位即给父元素添加属性position：relative;则会相对于父级元素进行定位
使用绝对定位不能超出父级元素，即一般不能将top、left等设置为负数

例：相对于浏览器

/*将父元素下的第一个div固定在body的右下角*/
div:nth-of-type(1){
    width:100px;
    htight:100px;
    background: red;
    position: absolute;
    right:0;
    bottom:0;
}

固定定位

/*将父元素下的第一个div固定在浏览器的的右下角*/
div:nth-of-type(1){
    width:100px;
    htight:100px;
    background: red;
    position: absolute;
    right:0;
    bottom:0;
}

z-index

将它与PS中的图层一块理解,从0~999值越大图层就越往上

div:nth-of-type(1){
    width:100px;
    htight:100px;
    background: red;
	z-index:999;
}

透明

属性

opacity:0.2;

或（IE8及以前的版本支持）

        background-color:blue;
    }
    li:nth-of-type(2){
        top:-100px;
        left:200px;
    }
    li:nth-of-type(4){
        top:-100px;
        left:200px;
    }
    li:nth-of-type(5){
        top:-300px;
        left:100px;
    }
    a{
        color: black;
        text-decoration: none;
    }
</style>
<div>
    <ul>
        <li><a href="#">链接1</a></li>
        <li><a href="#">链接2</a></li>
        <li><a href="#">链接3</a></li>
        <li><a href="#">链接4</a></li>
        <li><a href="#">链接5</a></li>
    </ul>
</div>

绝对定位

position:absolute;

相对于父级或浏览器进行指定的偏移，因为他不在标准文档流中，所以原来的位置不会被保留；

没有给父元素设置定位的情况下，相对于浏览器定位；
若给父级元素设置了相对定位即给父元素添加属性position：relative;则会相对于父级元素进行定位
使用绝对定位不能超出父级元素，即一般不能将top、left等设置为负数

例：相对于浏览器

/*将父元素下的第一个div固定在body的右下角*/
div:nth-of-type(1){
    width:100px;
    htight:100px;
    background: red;
    position: absolute;
    right:0;
    bottom:0;
}

固定定位

/*将父元素下的第一个div固定在浏览器的的右下角*/
div:nth-of-type(1){
    width:100px;
    htight:100px;
    background: red;
    position: absolute;
    right:0;
    bottom:0;
}

z-index

将它与PS中的图层一块理解,从0~999值越大图层就越往上

[外链图片转存中…(img-W09vAcFG-1608625437684)]

div:nth-of-type(1){
    width:100px;
    htight:100px;
    background: red;
	z-index:999;
}

透明

属性

opacity:0.2;

或（IE8及以前的版本支持）

filter:alpha(opacity=50)；

曹博Blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
记录CSS的学习

CSS的学习如何学习CSSCSS是什么CSS怎么用（快速入门）CSS选择器（重点+难点）美化网页（文字，阴影，超链接，列表，渐变……）盒子模型浮动定位网页动画CSS是什么什么是CSSCascading Style Sheet 层叠样式表CSS：表现（美化网页）字体，颜色，边距，宽度，高度，背景图片，网页定位，网页浮动……发展史CSS1.0CSS2.0 DIV(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1 浮动，定位CSS3.0 圆
复制链接

扫一扫