CSS3基础

三途河畔人

于 2021-11-25 09:53:29 发布

阅读量413

点赞数

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

本文链接：https://blog.csdn.net/qq_42511420/article/details/121530688

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS3基础

1、什么是CSS
2、选择器
3、美化网页元素
4、盒子模型
5、display和浮动
6、定位
其他
- z-index
- 透明

1、什么是CSS

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

1.1、什么是CSS

层叠级联样式表，用于表现（美化）网页，包括字体、颜色、边距，高度，宽度，背景图片，网页定位，网页浮动等等

1.2、发展史

CSS1.0 基本的美化功能
CSS2.0 DIV(块)+CSS HTML与CSS结构分离的思想，网页变得简单
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画… 需要考虑浏览器的兼容性

1.3、快速入门

文件夹规范：

请添加图片描述

style标签

直接在head部分的style标签内写css代码

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

HTML与CSS分离(建议使用的规范方式)

<!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: deepskyblue;
}

请添加图片描述

1.4CSS的优势：

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

1.4、CSS的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
            color: blue;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则   -->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可，如果有多个用分号结尾-->
<h1 style="color: aquamarine">我是标题</h1>
</body>
</html>

外部样式的两种写法

连接式：

html

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

导入式：

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

link与@import

link属于XHTML标签；@import完全是css提供的一种方式。
加载顺序不同，link引用的css会同时被加载；@import引用会等到页面全部被下载完再被加载，所以有时候浏览@import加载css页面时开始没有样式。
@import是css2.1提出；浏览器IE5以上的版本才能识别。link没有兼容性问题。

2、选择器

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

2.1、基本选择器

标签选择器

标签选择器：选择一类标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
            color: #1c63a7;
            background: beige;
            /*border-radius用于控制圆角边框*/
            border-radius: 15px;
        }
        p{
            font-size: 20px;
        }
    </style>
</head>
<body>
<h1>学css</h1>
<h1>学js</h1>
<h1>学vue</h1>
<p>自己</p>
</body>
</html>

类选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式 .class的名称{}
        好处，可以多个标签归类，是同一个class,可以复用*/
        .noname1{
            color: blue;
        }
        .noname2{
            color:red;
        }
        .noname4{
            color: aquamarine;
        }
    </style>
</head>
<body>
<h1 class="noname1">学html</h1>
<h1 class="noname2">学css</h1>
<h1 class="noname1">学js</h1>
<h1 class="noname4">学vue</h1>
<p class="noname4">段落内容</p>
</body>
</html>

ID选择器

ID选择器: 全局唯一, #id{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器： id必须保证全局唯一，格式为：
        #id名称{}
        不遵循就近原则，固定的
        id选择器 > class选择器 > 标签选择器
        */
        #oluoluo{
            color: #998a32;
        }
        .style1{
            color: #1c63a7;
        }
        h1{
            color: #991ca7;
        }
    </style>
</head>
<body>
<h1 id="oluoluo" class="style1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

优先级：id > class > 标签

2.2、层次选择器

后代选择器

后代选择器: 在某个元素的后面

/*body 标签后的p标签 */
body p{
    background: red;
}

子选择器

子选择器：一代，儿子

/*body 标签后的下一代p标签 */
body>p{
    background: #998a32;
}

相邻兄弟选择器

相邻兄弟选择器：同辈（不包含本身）

/*相邻兄弟选择器, 只有一个，相邻向下*/
.active + p{
    background: #991ca7;
}

通用选择器

通用选择器:不包含本身

/*通用选择器，当前选中元素的向下所有兄弟元素*/
.active~p{
    background: #998a32;
}

归根结底，使用模式就是 [标签/类/id] [“ “/>/+/~] [可定制css样式标签类型]

2.3、结构伪类选择器

伪类：条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*伪类选择器, 鼠标移动到该位置就会自动显示css属性，如颜色*/
        a:hover{
            background: #1c63a7;
        }
        /*ul的第一个子元素*/
        ul li:first-child{
            background: #991ca7;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: red;
        }
        /*选中p1：定位到父元素，选择当前的第一个元素 p:nth-child(1)
        选择当前p元素的父级元素，选中父级元素的第一个子元素，并且是当前元素才生效
        也就是说，如果父级元素的第一个子元素不是p标签则无效
        */
        p:nth-child(1){
            background: aquamarine;
        }
        /*选中当前p元素的父元素的第二个类型为p的子元素*/
        p:nth-of-type(2){
            background: yellow;
        }
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>
 <a>123</a>
</body>
</html>

2.4 属性选择器

将id和class结合起来.

<!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: aquamarine;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            /*margin向右偏移*/
            margin-right: 5px;
            font: bold 20px/50px Arial
        }
        /*存在id属性的元素 a[]{}, 下面例子是选中a标签中带有id属性的元素，即为属性选择器*/
        /*a[id]{*/
        /*    background: yellow;*/
        /*}*/
        /*选中a标签中带有id属性并且值为first的元素*/
        /*两种方式 属性名，属性名=属性值（属性值可以使用正则表达式）
        = 绝对等于
        *= 包含
        ^= 以这个开头
        $= 以这个结尾
        */
        /*a[id=first]{*/
        /*    background: green;*/
        /*}*/
        /*class中包含links的元素*/
        /*a[class*="links"]{*/
        /*    background: blue;*/
        /*}*/
        /*选中href中以http开头的元素*/
        /*a[href^=http]{*/
        /*    background: #998a32;*/
        /*}*/
         /*选中href中以doc结尾的元素*/
        a[href$="doc"]{
            background: yellow;
        }
    </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">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、为什么要美化网页

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

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">Golang</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: 字体颜色
-->
    <style>
        body{
            /*分别设置英文字体和中文字体*/
            font-family: "Times New Roman", 微软雅黑;
            color: #a13d30;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bolder;
        }
    </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>
    在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
</body>
</html>

显示效果：

3.3、文本样式

颜色 color rgb rgba
文本对齐的方式 font-align=center（水平）
首行缩进 font-indent=2em
行高 line-height 当行文字上下居中 line-height=height
装饰 text-decoration
文本图片水平对齐：vertical-align:middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--颜色：
    单词
    RGB 00~FF
    RGBA: 最后一个值表示透明度（A：最后一个值的范围 0~1）
    text-align： 排版，居中、靠左
    text-indent: 2em; 段落首行缩进

    行高和块的高度一致时就可以上下居中
    height: 300px;
    line-height: 300px;

    下划线
    text-decoration: underline;
                中划线：line-through
                上划线：overline
-->
    <style>
        h1{
            color: rgb(0,255,255);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
            text-decoration: underline;
        }
        .p2{
            background: aquamarine;
            height: 200px;
            line-height: 50px;
        }
        /*a标签去下划线*/
        a{
            text-decoration: none;
        }
          /*水平对齐参照物 a,b*/
        img，span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">百度搜索一下</a>
<h1>故事介绍</h1>
<p class="p1">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p class="p2">
    在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
</body>
</html>

3.4阴影

 /*阴影样式
阴影颜色 水平偏移 垂直偏移 模糊半径*/
#num{
      text-shadow: aqua 10px 10px 3px;
}

3.5 超链接伪类

正常情况下：a, a:hover

/*默认的颜色*/
a{
    text-decoration: none;
    color: #000000;
}
/*鼠标悬浮的状态（只需要记住:hover)*/
a:hover{
    color: orange;
    font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:active{
     color: coral;
}
/*已访问过的状态*/
a:visited{
     color: coral;
}

3.6 列表样式

/*
list-style:
    none: 去掉原点
    circle: 空心圆
    decimal: 数字
    square: 正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

最终的显示效果为：

3.7、背景图片

背景图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;  /*边框粗细，solid实现，red颜色*/
            background-image: url("images/1.bmp");
            /*默认是全部平铺的 repeat*/
        }
        .div1{
            /*水平平铺*/
            background-repeat: repeat-x;
        }
        .div2{
            /*竖直平铺*/
            background-repeat: repeat-y;
        }
        .div3{
            /*不平铺*/
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

小练习

#nav{
    width: 300px;
    background: grey;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /*颜色，图片，图片位置，平铺方式*/
    background: red url("../images/cloudy-2-line.png") 270px 5px no-repeat;
}
/*
list-style:
    none: 去掉原点
    circle: 空心圆
    decimal: 数字
    square: 正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../images/cloudy-2-line.png");
    background-repeat: no-repeat;
    background-position: 230px 0px;
}
a{
    text-decoration: none;  /*取消掉超链接的下划线文本样式*/
    text-size: 14px;
    color: black;
}
/*伪类属性 表示鼠标悬停在超链接上的显示效果，即颜色变为orange并加上下划线*/
a:hover{
    color: orange;
    text-decoration: underline;
}

显示效果：

3.8渐变

推荐网站：https://www.grabient.com/

html{
    height: 100%;
}
body{
    background-color: #D9AFD9;
    background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);
}

4、盒子模型

4.1、什么是盒子模型

margin: 外边距; padding: 内边距; border: 边框

4.2、边框

边框的样式
边框的粗细
边框的颜色

border属性：粗细(width: xxpx) 样式(style: solid dashed…) 颜色(color)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a,li,body{
            /*body有一个默认的外边距 手动设置为0*/
            /*设置一下其他的属性*/
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        /*边框
        border: 边框粗细，样式，颜色
        */
        #box{
            width: 300px;
            border: 1px solid red;
        }
        h2{
            font-size: 16px;
            background: lightcoral;
            line-height: 24px;
            margin: 0;
            color: gainsboro;
        }
        form{
            background: #97D9E1;
        }
        div:nth-of-type(1) input{
            border: 3px solid skyblue;
        }
        div:nth-of-type(2) input{
            border: 3px dashed blueviolet;
        }
        div:nth-of-type(3) input{
            border: 2px dashed fuchsia;
        }

    </style>
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <from action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </from>
</div>
</body>
</html>

显示效果：

4.3、内外边距

自动让显示的区域居中的方法：margin: 0 auto; 表示上下外边距为0，左右外边距为自动，默认为相同的值；

或者用这种方式：margin: top right down left的方式或者使用margin-top等分别指定

内边距padding同理。

#box{
    /*外边距
    margin:上右下左 顺时针*/
    margin: 0 1px 2px 3px;
	}

4.4、圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 10px solid red;
            border-radius: 200px;
        }
        img{
            border-radius: 25px;    /*通过border-radius将图片的形状设置为原型，效果就是上传头像*/
        }
    </style>
</head>
<body>
<div></div>
<img src="images/1.jpg" alt="我的头像">
</body>
</html>

效果：

4.5、盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px auto;
            /*text-align: center;  文本对齐居中*/
            text-align: center;
            /* display 属性规定元素应该生成的框的类型。
            display: block;  定义改元素为块类型*/
            display: block;
        }
        img{
            border-radius: 25px;    /*通过border-radius将图片的形状设置为原型，效果就是上传头像*/
            /*在元素框架上添加阴影效果，依次是：x偏移量 y偏移量 阴影模糊半径 阴影颜色*/
            box-shadow: 5px 5px 10px yellow;
        }
    </style>
</head>
<body>
    <!--<div align="center">不建议使用align属性-->
    <div>
        <img src="images/1.jpg" alt="我的头像">
    </div>
</body>
</html>

效果：

5、display和浮动

display

块元素：div p h1-h6 form ul ol 等等每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素

block元素特点：

总是在新行上开始
高度、行高以及外边距和内边距都可以控制
宽度缺省是它的容器的100%，除非设定一个宽度
它可以容纳内联元素和其他块元素

行内元素：a span img 也叫内联单元、内嵌元素等，只能容纳文本或其他内联元素

行内元素特点

和其他元素都在同一行
高，行高及外边距和内边距不可改变；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

属性 display: block 设置成块级元素; display: inline 设置成行内元素 display: inline-block 同时具有块元素和行内元素的属性

display: none 不显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border:2px solid black;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border:2px solid black;
            display: inline-block;
        }
        /*display
            inline 行内元素
            block   块元素
            inline-block 行内块元素，但是可以内联，使元素在一行*/
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

float

浮动：

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

示例：使用float写一行元素排列的菜单栏

<!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=""></div>
    <div class="layer02"><img src="images/2.png" alt=""></div>
    <div class="layer03"><img src="images/3.png" alt=""></div>
    <div class="layer04">xinde</div>
</div>
</body>
</html>

css

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}
.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
}
.layer02{
    border: 1px #00F dashed;
    display: inline-block;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
    float:left;
 }
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    display: inline-block;
  }

效果：

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

5.1 父级边框塌陷问题

.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    display: inline-block;
    float:right;
    /*
    clear: right 右侧不允许有浮动元素
    clear: right 右侧不允许有浮动元素
    clear: left 左侧不允许有浮动元素
    clear: both 左右两侧都不允许有浮动元素
    clear: none
    */
    clear: right;
  }

保证浮动元素保持在父级元素内

增加父级元素高度，使父级元素能够容纳浮动元素

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

增加一个空的div清除浮动

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

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

使用overflow属性，当内容超过了父级元素的高度时，使用overflow:scroll属性可以添加滚动条，解决父级边框塌陷
可以在父级元素中添加一个overflow:hidden属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
            width: 200px;
            height: 150px;
            /*overflow: hidden; 完全隐藏
                        scroll  产生滚动条*/
            overflow: scroll;
        }
    </style>
</head>
<body>
<div id="content">
    <img src="image/3.png" alt="">
    <p>近日，中国共产党第十九届中央委员会第六次全体会议在北京召开，重点研究全面总结党的百年奋斗的重大成就和历史经验问题。</p>
</div>
</body>
</html>

添加一个伪类：

css

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}
#father:after{
    content: '';
    display: block;
    clear: both;
}
.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
    float:right;

}
.layer02{
    border: 1px #00F dashed;
    display: inline-block;
    float:left;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
    float:left;
 }
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    display: inline-block;
    float:right;
    /*
    clear: right 右侧不允许有浮动元素
    clear: right 右侧不允许有浮动元素
    clear: left 左侧不允许有浮动元素
    clear: both 左右两侧都不允许有浮动元素
    clear: none
    */
    clear: right;
  }

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="father">
    <div class="layer01"><img src="images/1.png" alt=""></div>
    <div class="layer02"><img src="images/2.png" alt=""></div>
    <div class="layer03"><img src="images/3.png" alt=""></div>
    <div class="layer04">xinde</div>
</div>
</body>
</html>

效果：

前

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

后

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

小结：

6、定位

相对定位

相对定位：position: relative

相对于原来的位置，进行指定的偏移，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

<!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 #666;
        padding: 50px;
      }
      #first{
        background-color: #c29d4b;
        border: 1px dashed #275ac2;
        /*
          position: relative;设置定位属性
          top  上
          left 左
          bottom 下
          right 右
        */
        position: relative;
        top: -10px;
      }
      #second{
        background-color: #4f4bc2;
        border: 1px dashed #c42591;
      }
      #third{
        background-color: #ec0f73;
        border: 1px dashed #419b5d;
      }
    </style>
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>

绝对定位

绝对定位：position: absolute

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，通常会相对于父级元素进行偏移（不会超出父级元素）
在父级元素范围内移动

原来的位置不会被保留

<!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 #666;
        padding: 50px;
      }
      #first{
        background-color: #c29d4b;
        border: 1px dashed #275ac
      }
      #second{
        background-color: #4f4bc2;
        border: 1px dashed #c42591;
        position: absolute;
        /*
          position: absolute;设置定位属性
          top  上
          left 左
          bottom 下
          right 右
        */
      }
      #third{
        background-color: #ec0f73;
        border: 1px dashed #419b5d;
      }
    </style>
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>

固定定位

position: fixed

比如网页上点击返回网页首部就是固定定位

<!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 #666;
        padding: 50px;
      }
      #first{
        background-color: #c29d4b;
        border: 1px dashed #275ac
      }
      #second{
        background-color: #4f4bc2;
        border: 1px dashed #c42591;
        position: fixed;
        /*
          position: fixed;设置定位属性
          top  上
          left 左
          bottom 下
          right 右
        */
      }
      #third{
        background-color: #ec0f73;
        border: 1px dashed #419b5d;
      }
    </style>
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>

其他

z-index

设置显示等级

z-index：默认是0

css

#content{
    width: 380px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
/* 父级元素相对定位*/
#content ul{
    position: relative;
}

.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 216px;
}
.tipText{
    color: white;
    z-index: 9;
}
.tipBg{
    background: black;
}

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">aaa</li>
      <li class="tipBg"></li>
      <li>shijain:222</li>
  </ul>
</div>
</body>
</html>

透明

opacity设置元素的不透明级别

.tipBg{
    background: black;
    opacity: 0.5;
}

三途河畔人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3基础

CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。
复制链接

扫一扫

专栏目录

CSS3基础

CSS3基础

1、什么是CSS

1.1、什么是CSS

1.2、发展史

1.3、快速入门

style标签

HTML与CSS分离(建议使用的规范方式)

1.4CSS的优势：

1.4、CSS的三种导入方式

外部样式的两种写法

link与@import

2、选择器

2.1、基本选择器

标签选择器

类选择器

ID选择器

2.2、层次选择器

后代选择器

子选择器

相邻兄弟选择器

通用选择器

2.3、结构伪类选择器

2.4 属性选择器

3、美化网页元素

3.1、为什么要美化网页

3.2、字体样式

3.3、文本样式

3.4阴影

3.5 超链接伪类

3.6 列表样式

3.7、背景图片

3.8渐变

4、盒子模型

4.1、什么是盒子模型

4.2、边框

4.3、内外边距

4.4、圆角边框

4.5、盒子阴影

5、display和浮动

display

float

5.1 父级边框塌陷问题

保证浮动元素保持在父级元素内

6、定位

相对定位

绝对定位

固定定位

其他

z-index

透明

“相关推荐”对你有帮助么？