CSS的使用

加菲猫��

于 2023-04-07 08:07:14 发布

阅读量508

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_52701502/article/details/130003336

版权

学习目标

1.掌握css常用选择器
2.掌握css常用属性
3.掌握css的显示模式
4.掌握css的盒子模型
5.掌握css的浮动
6.掌握css的定位
7.能够独立完成静态页面

第一章 CSS引入方式

什么是CSS？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表示HTML样式的前端技术

在html中引入css样式，有三种方式

内部样式
外部样式
行内式

1.1节内部样式

内部样式也称内嵌式：是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ItHnH2jQ-1680825548129)(./assets/1.png)]

1.2 节外部样式

外部样式:是将html样式写入一个独立的css文件中，这个文件必须以.css为后缀名。最后在html文件中通过link标签将外部样式表文件引入到HTML文档中，其基本语法格式如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-35ILYI8e-1680825548130)(./assets/2.png)]

xxx.css文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8AIsMELG-1680825548131)(./assets/3.png)]

1.3 节行内式

行内式引入css样式式通过style属性直接作用的html标签中的语法。只对改行标签的样式进行控制，具体语法如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JiHOWjDV-1680825548132)(./assets/4.png)]

1.4 节综合案例

通过三种方式引入样式案例如下：

目录结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CrrdDLhw-1680825548133)(./assets/5.png)]

页面内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css的三种引入方式</title>
    <style>
        /*h1 是标签选择器 控制所有h1标签的样式
            color: red; 是属性 描述的是字体颜色是红色
        */
        
        h1 {
            color: red;
        }
    </style>
    <!-- 引入外部样式 -->
    <link href="../css/1.外部样式.css" rel="stylesheet" />
</head>

<body>
    <h1>css内部样式</h1>
    <h2>css外部样式</h2>
    <h3 style="color:green;">css行内式</h3>
</body>

</html>

1.外部样式.css 文件内容

h2 {
    color: blue;
}

第二章 CSS选择器

css 通过选择器找到html中的目标元素进行控制样式。选择器分为基本选择器和复合选择器,但最终的作用都是帮助我们快速找到需要控制的html 内的标签元素

2.1 节 CSS 基本选择器

选择器的优先级

类型选择器<类选择器<ID选择器

2.1.1 通配选择器

* 代表通配符，代表选中html文档中的所有标签进行样式控制,语法格式如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ohGKP4V-1680825548134)(./assets/6.png)]

* 通配符在控制样式中很少用到，一般用于清空html文档内的标签默认边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q9oNAMBh-1680825548135)(./assets/7.png)]

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css基本选择器</title>
    <style>
        /*css通配选择器*/
        
        * {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <h1>一级标题</h1>
</body>

</html>

2.1.2 标签选择器

标签选择器又叫元素选择器，是通过标签名选中html 文档内的元素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2MEq8xWi-1680825548136)(./assets/8.png)]

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css基本选择器</title>
    <style>
        /*css通配选择器*/
        
        * {
            padding: 0;
            margin: 0;
        }
        /* 标签选择器*/
        
        h2 {
            color: red;
        }
    </style>
</head>

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
</body>

</html>

2.1.3 类选择器

类选择器是控制html文档中具有相同类名的样式进行控制。所以使用类选择器之前一定要在html文档的标签内定义好类名。

注意:类选择器前面有一个.。这是固定的语法格式，具体语法格式如下：

在标签中定义类名

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GVjUyVNx-1680825548137)(./assets/9.png)]

使用类名选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d4UzBzOB-1680825548138)(./assets/10.png)]

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css基本选择器</title>
    <style>
        /*css通配选择器*/
        
        * {
            padding: 0;
            margin: 0;
        }
        /* 标签选择器*/
        
        h2 {
            color: red;
        }
        /* 类选择器 */
        
        .title {
            color: yellow;
        }
    </style>
</head>

<body>
    <h1 class="title">一级标题</h1>
    <h2 class="title">二级标题</h2>
    <h2 class="title">二级标题</h2>
    <h2 class="title">二级标题</h2>
    <h3 class="title">三级标题</h3>
</body>

</html>

2.1.4 多类名选择器

html 的标签元素可以指定多个类名，类名与类名之间用空格隔开。

示例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WKkzqzRL-1680825548139)(./assets/11.png)]

2.1.5 id选择器

id选择器是通过标签的id名控制唯一的标签样式，所以id名必须唯一。

id选择器语法如下

定义id名

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sX7xMUvo-1680825548140)(./assets/12.png)]

使用id选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dgj3vfOO-1680825548141)(./assets/13.png)]

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css基本选择器</title>
    <style>
        /*css通配选择器*/
        
        * {
            padding: 0;
            margin: 0;
        }
        /* 标签选择器*/
        
        h2 {
            color: red;
        }
        /* 类选择器 */
        
        .title {
            color: yellow;
        }
        
        #tit {
            color: blue;
        }
    </style>
</head>

<body>
    <h1 class="title">一级标题</h1>
    <h2 class="title">二级标题</h2>
    <h2 class="title">二级标题</h2>
    <h2 class="title" id="tit">二级标题</h2>
    <h3 class="title">三级标题</h3>

</body>

</html>

2.2 节复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

2.2.1 并集选择器

并集是指把所有选择器的范围并在一起，具体语法如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dt0Fu5Bs-1680825548142)(./assets/14.png)]

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器</title>
    <style>
        /*并集选择器*/
        
        h1,
        p {
            color: red;
        }
    </style>
</head>

<body>
    <h1>标题</h1>
    <p>内容</p>
</body>

</html>

2.2.2 包含选择器

包含选择器主要用于页面html文档的标签包含关系的样式控制。具体语法如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IqPcsxxP-1680825548143)(./assets/15.png)]

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器</title>
    <style>
        /*并集选择器*/
        
        h1,
        p {
            color: red;
        }
        /*包含选择器*/
        
        #container .main {
            color: blue;
        }
    </style>
</head>

<body>
    <h1>标题</h1>
    <p>内容</p>
    <div id="container">
        aaa
        <div class="main">bbb</div>
    </div>
</body>

</html>

2.2.4 属性选择器

通过属性名字或者通过属性值来选择控制样式范围；语法如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UVNzwoUf-1680825548144)(./assets/16.png)]

或者

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f3IQOiVe-1680825548145)(./assets/17.png)]

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style>
        input[type] {
            background: red;
        }
        
        input[type='text'] {
            background: blue;
        }
    </style>
</head>

<body>
    姓名 <input type="text" /> 密码 <input type="password" />

</body>

</html>

2.2.5 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /*选中第一个元素样式 */
        
        ul li:first-child {
            color: red;
        }
        /*选中最后一个元素样式 */
        
        ul li:last-child {
            color: blue;
        }
        /*选中第三个元素样式 */
        
        ul li:nth-child(3) {
            color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
    </ul>
</body>

</html>

示例2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器2</title>
    <style>
        /* 未访问的链接 */
        
        a:link {
            color: pink;
        }
        /* 已访问的链接 */
        
        a:visited {
            color: blue;
        }
        /* 鼠标移动到链接上 */
        
        a:hover {
            color: red;
        }
        /* 选定的链接 */
        
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="http://www.baidu.com">百度</a>
</body>

</html>

2.3 节小结

选择器包含基本选择器和复合选择器

基本选择器包括：

通配选择器
标签选择器
类选择器
id选择器

复合选择器包含：

并集选择器
包含选择器
属性选择器
伪类选择器

第三章标签的显示模式

标签的显示模式又称为标签的类型，标签类型分为三种

块元素
行内元素
行内块元素

3.1 节块、行内、行内块元素

块元素最大的特点就是，独占一行，宽高可控

不设置宽高宽度默认铺满整个容器高度默认

常见的块元素有:

<h1>~<h6>
<p>
<div> 无语义的块元素
<ul>
<ol>
<li>

其中<div>标签是最典型的块元素。

行内元素（内联元素）不独占一行，宽度和高度是内容本身的宽度和高度无法控制

行内元素转化成块元素 display：block；

常见行内元素有:

无语义

其中标签最典型的行内元素。

行内块元素和行内元素差不多。最大区别就是行内块元素可以指定宽度高度以及边距

不独占一行

行内块元素主要有：

综合示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块、行内、行内块元素</title>
    <style>
        /* 块元素独占一行，可以指定块的宽、高 */
        
        div {
            width: 100px;
            height: 100px;
            background: red;
        }
        /*行内元素，元素不独占一行，连续显示，不能指定宽度和高度，宽度和高度是内容本身*/
        
        span {
            width: 100px;
            height: 100px;
            background: blue;
        }
        /*行内块元素 元素不独占一行，连续显示，能够指定块宽度和高度。*/
        
        input {
            width: 200px;
            height: 40px;
            background: pink;
        }
    </style>
</head>

<body>
    <div>块元素</div>
    <span>行内元素</span><span>行内元素</span> 姓名 <input type="text" />
</body>

</html>

3.2 节块、行内、行内块元素转换

css中，可以通过display属性来改变标签的显示模式，具体用法如下

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块、行内、行内块元素转换</title>
    <style>
        span {
            width: 100px;
            height: 100px;
            background: red;
            /*将目标元素转为块元素 */
            display: block;
            /*将目标元素转为行内元素 */
            display: inline;
            /*将目标元素转为行内块元素 */
            display: inline-block;
        }
    </style>
</head>

<body>
    <span>元素显示模式转换</span> 测试
</body>

</html>

第四章属性

4.1节字体属性

字体常见属性如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4WBU36E6-1680825548146)(./assets/18.png)]

font属性用于对字体样式进行综合设置，其基本语法格式如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wEQFzzKs-1680825548147)(./assets/19.png)]

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性</title>
    <style>
        p {
            font-size: 14px;
            font-family: "微软雅黑";
            数值必须在100-900之间 必须是100的整倍数 400相当于normal 800相当于bold 900相当于bolder
            font-weight: 800; 
            font-style: italic;
            font: normal 400 14px/21px "微软雅黑";
        }
    </style>
</head>

<body>
    <p>胖叔讲java，一路相伴</p>
</body>

</html>

4.2 节文本属性

描述文本的外观属性如下

em当前字体大小的二倍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MI1K0FDR-1680825548148)(./assets/20.png)]

综合示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外观属性</title>
    <style>
        p {
            font: normal 400 14px/21px "微软雅黑";
            text-align: center;
            color: green;
            text-indent: 2em;
            text-decoration: none;
            word-spacing: 20px;
            letter-spacing: 20px;

        }
    </style>
</head>

<body>
    <p>hello world 胖叔讲java！！！,一路相伴胖叔讲java！！！,一路相伴胖叔讲java！！！,一路相伴胖叔讲java！！！,一路相伴胖叔讲java！！！,一路相伴 胖叔讲java！！！,一路相伴胖叔讲java！！！,一路相伴胖叔讲java！！！,一路相伴胖叔讲java！！！,一路相伴胖叔讲java！！！,一路相伴胖叔讲java！！！,一路相伴 胖叔讲java！！！,一路相伴胖叔讲java！！！,一路相伴胖叔讲java！！！,一路相伴胖叔讲java！！！,一路相伴胖叔讲java！！！,一路相伴
    </p>
</body>

</html>

4.3 节背景属性

背景属性内容如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cc94wHAV-1680825548149)(./assets/21.png)]

backgroud 背景颜色图片地址背景平铺附着背景滚动背景位置

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景属性</title>
    <style>
        .bj {
            width: 800px;
            height: 4000px;
            background-color: pink;
            background-image: url(../imgs/1.jpg);
            background-repeat: no-repeat;
            background-position: left 50px top 100px;
            background-attachment: fixed;
            /* 综合写法 */
            background: green url(../imgs/1.jpg) no-repeat fixed left 30px top 200px;
        }
    </style>
</head>

<body>
    <div class="bj"></div>
</body>

</html>

4.4 节表格属性

之前学习的很多属性都可以用来设置表格的样式，比如color可以用来设置文本的颜色。padding可以设置内容和表格边框的距离；表格的常用属性如下:

text-align：设置文本的水平对齐。
vertical-align：设置文本的垂直对齐。
border-spacing：边框间距
border-collapse：合并边框
- collapse：合并边框
- separate：不合并边框

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格属性</title>
    <style>
        table{
            width:800px;
            border:1px solid #000;
            margin-left: 100px;
            border-collapse: collapse;
            text-align: center;
            line-height: 35px;
            border-left: none;
            border-right:none;
        }
        tr,td,th{
            border:1px solid #000;
            border-left:none;
            border-right:none;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td>21</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>男</td>
            <td>22</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>男</td>
            <td>23</td>
        </tr>
    </table>
    
</body>

</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1KLVwuvT-1680825548150)(./assets/30.png)]

4.5 节其他常用属性

其他较为常用的属性有列表属性、变换属性等。

list-style:none 去除列表项
transform: 属性值
*
- scale缩放（一般）
- translate 位移（重点）
- rotate 旋转（重点）
  - rotateX()以x轴为中心进行旋转
  - rotateY()以y轴为中心进行旋转
  - rotateZ()以z轴为中心进行旋转
- skew 倾斜（了解）

示例：

3D旋转的方法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GRTWC25s-1680825548151)(G:\2_css\教案\assets\Snipaste_2023-04-06_11-54-57.png)]$

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>其他属性</title>
    <style>
        *{margin:0;padding:0;}
        h1{
            width:100px;
            height:100px;
            transform: translate(200px,50px);
            /* deg是单位角度 */
            transform: rotate(50deg);
        }
        ul {
            list-style: none;
        }

    </style>
</head>

<body>
    <h1>标题</h1>
    <ul>
        <li>手机</li>
        <li>电视</li>
        <li>手表</li>
    </ul>
    
</body>

</html>

第五章 css布局

其实学好CSS布局的关键是CSS三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。

5.1 节盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nnlVYmtj-1680825548152)(./assets/22.png)]

margin border padding:值  上下左右都为值
margin border padding：值1 值2 上下为值1 左右为值2
margin border padding: 值1 值2 值3 上为值1 左右为值2 下为值3、
box-sizing:border-box 可以忽略内边距带来的影响包含边框

div坍塌问题的解决

解决div坍塌问题要卸载父容器中可以解决大多数问题

overflow: hidden；

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /* 边框 */
            border: 1px solid red;
            /* 外边距 */
            margin-left: 5px;
            margin-top: 10px;
            margin: 5px;
            /* 内边距*/
            padding-left: 5px;
            padding-top: 10px;
            padding-right: 21px;
            padding-bottom: 5px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div>盒子模型的内容</div>
</body>

</html>

5.2 节浮动

元素的浮动是指设置了浮动属性的元素会脱离标准标准流的控制，移动到其父元素中指定位置的过程。

例如：我们可以通过浮动让块元素横向摆放(默认纵向)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G7zWUZCY-1680825548153)(./assets/23.png)]

语法：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UhpBM1Am-1680825548154)(./assets/24.png)]

浮动问题的解决 
左浮动时，与父容器的外边距只能设置做外边距，右浮动时，只能设置与父容器的右外边距

清楚浮动

浮动的清除两种解决问题

1、父容器style中添加： overflow: hidden;

2、直接在父容器中使用style=“clear:both;”

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        .main {
            /* 块元素不指定宽度，默认铺满 */
            height: 100px;
            background-color: blue;
        }
        
        .main .left,
        .main .right {
            float: left;
            width: 50px;
            height: 50px;
            background: red;
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

当浮动元素的容器没有指定高度时，会对后面的元素布局有影响，需求清除浮动clear:both；

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动</title>
    <style>
        .main {
            background-color: blue;
        }
        
        .main .left,
        .main .right {
            float: left;
            width: 50px;
            height: 50px;
            background: red;
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 清除上边浮动给容器带来的影响-->
        <div style="clear:both;"></div>
    </div>
    <div style="height: 200px; background:pink;"></div>
</body>

</html>

5.3 节定位

为什么需要定位？

首先我们来看一下定位的使用场景

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MHYwZfut-1680825548155)(./assets/25.png)]

常见的定位方式有：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rP702ZuI-1680825548156)(./assets/26.png)]

定位的偏移量属性如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ugDoxQSU-1680825548157)(./assets/27.png)]

示例1 ：相对定位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            margin: 50px;
            background: red;
            /*相对定位，相对于标签原来位置进行偏移*/
            position: relative;
            top: 50px;
            left: 50px;
        }
    </style>
</head>

<body>
    <div id="div1"></div>
</body>

</html>

示例2：子绝父相定位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子绝父相定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .out {
            width: 100px;
            height: 100px;
            background: blue;
            /*父容器采用相对定位*/
            position: relative;
            margin: 100px;
        }
        
        .out .inner {
            width: 20px;
            height: 20px;
            background: red;
            /*子标签采用绝对定位*/
            position: absolute;
            /*相对父容器的偏移量设置*/
            left: 90px;
            top: -10px;
        }
    </style>
</head>

<body>
    <div class="out">
        <div class="inner"></div>
    </div>
</body>

</html>

示例3：固定定位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位</title>
    <style>
        .adv {
            width: 100px;
            height: 100px;
            background: red;
            /*固定定位*/
            position: fixed;
            bottom: 50px;
            right: 50px;
        }
    </style>
</head>

<body>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div class="adv">广告</div>
</body>

</html>

5.4 节布局案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3c1u21CR-1680825548158)(./assets/29.png)]

5.5 节小结

盒子模型
浮动、清除浮动
定位

第六章综合案例

完成如下页面制作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x99pOba9-1680825548158)(./assets/28.png)]

加菲猫��

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS的使用

学习目标1.掌握css常用选择器2.掌握css常用属性3.掌握css的显示模式4.掌握css的盒子模型5.掌握css的浮动6.掌握css的定位7.能够独立完成静态页面第一章 CSS引入方式什么是CSS？层叠样式表(英文全称：Cascading Style Sheets)是一种用来表示HTML样式的前端技术在html中引入css样式，有三种方式内部样式外部样式行内式1.1节内部样式内部样式也称内嵌式：是将CSS代码集中写在HTML文档的head头部标签中，并
复制链接

扫一扫