css基础

龙龙打代码

已于 2023-04-06 18:27:54 修改

阅读量124

点赞数 2

分类专栏：前端文章标签： css html 前端

于 2023-04-06 18:18:59 首次发布

本文链接：https://blog.csdn.net/qq_46670673/article/details/129995757

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的基础知识，包括通过内部样式、外部样式和行内样式引入CSS，各种基本选择器如通配选择器、标签选择器、类选择器和ID选择器的使用，以及复合选择器的应用。接着讨论了标签的显示模式，如块元素、行内元素和行内块元素的特点与转换。此外，还涵盖了字体、文本、背景、表格等属性的设置，以及CSS布局中的盒子模型、浮动和定位的概念与应用。

摘要由CSDN通过智能技术生成

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头部标签中，并且用style标签定义，其基本语法格式如下：

在这里插入图片描述

1.2 节外部样式

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

在这里插入图片描述

xxx.css文件

在这里插入图片描述

1.3 节行内式

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

在这里插入图片描述

1.4节层叠顺序

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

行内样式（在 HTML 元素中）
外部和内部样式表（在 head 部分）
浏览器默认样式

因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

1.5 节综合案例

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

目录结构

在这里插入图片描述

页面内容

<!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 基本选择器

2.1.1 通配选择器

* 代表通配符，代表选中html文档中的所有标签进行样式控制,语法格式如下
在这里插入图片描述

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

示例：

<!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 文档内的元素。

在这里插入图片描述

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

示例：

<!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文档的标签内定义好类名。

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

在标签中定义类名

在这里插入图片描述

使用类名选择器

在这里插入图片描述

示例：

<!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 的标签元素可以指定多个类名，类名与类名之间用空格隔开。

示例

在这里插入图片描述

2.1.5 id选择器

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

id选择器语法如下

定义id名

在这里插入图片描述

使用id选择器

在这里插入图片描述

示例：

<!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 并集选择器

并集是指把所有选择器的范围并在一起，具体语法如下
在这里插入图片描述

示例

<!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文档的标签包含关系的样式控制。具体语法如下

在这里插入图片描述

示例：

<!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 属性选择器

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

在这里插入图片描述

或者

在这里插入图片描述

示例：

<!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>
<dd>
<dl>
<dt>
<hr>
<form>
<header>
``
`
<table>
<section>

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

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

常见行内元素有:

<a>
<strong>
<b>
<em>
<i>
<del>
<s>
<ins>
<u>
<span>

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

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

行内块元素主要有：

<img />
<input />
<td>

详见

综合示例：

<!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>
        /*块元素
            1.宽高可设置
            2.宽度默认铺满所在容器
            3.高度默认是内容高度
            4.独占一行
        */
        p,h1,ul,li,div{
            /* width:100px; */
            /* height: 100px; */
            background-color: red;
            margin: 20px;
        }
        /*
         行内（内联）元素
            1.宽高不可控，宽高就是内容宽度和高度
            2.不独占一行。
        */
        a,span{
            width:100px;
            height: 100px;
            background-color: blue;
            /*让当前元素变成块元素*/
            display: block;
            /*让当前元素变成行内块元素*/
            display: inline-block;
            /*让当前元素变成行内元素*/
            display:inline;
        }
        /*行内块元素
            1.宽高可控
            2.不独占一行。
        */
        input {
            width:100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>段落</p>
    <h1>标题</h1>
    <ul>
        <li>列表</li>
    </ul>
    <div>块</div>
    <a href="#">百度</a><span>字体</span>

    <input type="text" name="" />


</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节字体属性

字体常见属性如下：

在这里插入图片描述

注：italic和oblique都是向右倾斜的文字, 但区别在于italic是指斜体字，而oblique是倾斜的文字，对于没有斜体的字体应该使用oblique属性值来实现倾斜的文字效果.

font属性用于对字体样式进行综合设置，其基本语法格式如下：
在这里插入图片描述

示例：

<!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: "微软雅黑";
            font-weight: 800;
            font-style: italic;
            font: normal 400 14px/21px "微软雅黑";
        }
    </style>
</head>

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

</html>

4.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>
        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 狗都不学计算机狗都不学计算机狗都不学计算机狗都不学计算机狗都不学计算机狗都不学计算机狗都不学计算机狗都不学计算机狗都不学计算机狗都不学计算机狗都不学计算机狗都不学计算机狗都不学计算机狗都不学计算机狗都不学计算机狗都不学计算机狗都不学计算机狗都不学计算机狗都不学计算机狗都不学计算机狗都不学计算机狗都不学计算机
    </p>
</body>

</html>

4.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>
        .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 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>

效果：

在这里插入图片描述

4.5 节其他常用属性

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

list-style:none 去除列表项
transform: 属性值
- scale缩放（一般）
- translate 位移（重点）
- rotate 旋转（重点）
- skew 倾斜（了解）

示例：

<!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）组成。

在这里插入图片描述

示例：

<!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;}
        .adv1{
            width:100px;
            height: 100px;
            background-color: red;
            /* 设置内边距 */
            padding-left: 40px;
            padding-bottom: 40px;
            padding-right: 40px;
            padding-top: 40px;
            /* 可以忽略内边距带来的影响包含边框 */
            box-sizing: border-box;
            /*上下左右都是20px*/
            padding: 20px;
            /* 上下20px 左右40px */
            padding: 20px 40px;
            /* 上10px 下20px 左右 40px */
            padding: 10px 40px 20px;
            /*上 右 下 左*/
            padding:10px 20px 30px 40px;
            /* 边框 */
            border-top: 1px solid green;
            border-left:2px dashed blue;
            border-bottom: 1px solid green;
            border-right: 2px dashed blue;
            border: 2px solid blue;
            /* 边框圆角 */
            border-radius: 50px;

            /*外边距*/
            margin-top: 10px;
            margin-left: 20px;
            margin-bottom: 30px;
            margin-right: 40px;
            margin: 40px;
            margin:20px 40px;
            margin: 10px 40px 20px;
            margin:10px 20px 30px 40px;

        }
    </style>
</head>
<body>
    <div class="adv1">AAA</div>
</body>
</html>

盒子模型居中及坍塌问题

<!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;}
        #app{
            width:800px;
            height: 400px;
            background-color: blue;
            /* 解决div坍塌问题，调试外边距或内边距或定位不起作用，都可以用这个解决。但这个属性一定写在父容器中 */
            overflow: hidden; 
        }
        .adv{
            width:100px;
            height: 100px;
            /* 水平居中 */
            margin:50px auto;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="adv"></div>
    </div>
</body>
</html>

5.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>
        #app{
            width:800px;
            height: 300px;
            background-color: pink;
        }
        .adv{
            width:100px;
            height: 100px;
            background-color: blue;
            margin: 10px;
            float:left; 
            /* float:right; */
            /* 左浮动时，与父容器的外边距只能设置做外边距，右浮动时，只能设置与父容器的右外边距 */
            margin-left:40px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="adv">AAA</div>
        <div class="adv">BBB</div>
        <div class="adv">CCC</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>

或者

<!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;
        }
        #app{
            background-color: red;
            /* 清除浮动的功能 */
            overflow: hidden;
        }
        .adv{
            width:100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div id="app">
        AAA
        <div class="adv"></div>
        <div class="adv"></div>
        <div class="adv"></div>
        <!-- 清除浮动带来的影响 -->
        <!-- <div style="clear:both;"></div> -->
    </div>
</body>
</html>

5.3 节定位

为什么需要定位？

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

在这里插入图片描述

常见的定位方式有：

在这里插入图片描述

定位的偏移量属性如下：

在这里插入图片描述

示例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>
        *{margin:0;padding: 0;}
        #app{
            width:100px;
            height: 100px;
            background-color: red;
            margin: 100px;
            /*
             相对定位：默认距离原来位置进行定位
            */
            position: relative;
            /* 写了定位属性才可以写偏移量 */
            top:50px;
            left:50px;
        }
    </style>
</head>
<body>
    <div id="app"></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;}
        #app{
            width:800px;
            height: 300px;
            background-color: red;
            /* 相对定位 */
            position: relative;
            margin-left: 100px;
        }
        #app .adv {
            /* 相对于父容器有定位属性的容器进行定位 */
            position: absolute;
            top:20px;
            left:100px;
            width:100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="adv"></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>div居中</title>
    <style>
        *{margin: 0;padding: 0;}
        #app{
            width:800px;
            height: 400px;
            background-color: blue;
            position: relative;
        }
        .adv{
            width:100px;
            height: 100px;
            /* 水平居中 */
            margin:0 auto;
            background-color: red;
            position: absolute;
            top:50%;
            left:50%;
            /* transform: translate(-50px,-50px); */
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="adv"></div>
    </div>
</body>
</html>

示例4：固定定位

<!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-color: red;
            /* 固定定位，相对浏览器窗口定位 */
            position: fixed;
            bottom:20px;
            right:20px;
        }

    </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 节布局案例

在这里插入图片描述

<!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;
        }
        .fl{
            float:left
        }
        .fr{
            float: right;
        }
        /* 顶栏样式 */
        #site-topbar{
            height:80px;
            background-color: pink;
        }
        /* 头部效果 */
        #site-header{
            height: 400px;
            background-color: #FFF;

        }
        #site-header .container {
            width:1226px;
            margin: 20px auto;
            background-color: pink;
            height: 100%;
            /* 清除浮动 */
            overflow: hidden;
        }
        #site-header .left {
            width:200px;
            height: 100%;
            background-color: blue;
        }
        #site-header .right {
            width: 800px;
            height: 100%;
            background-color: blue;
        }
        #site-footer {
            height:40px;
            background-color: pink;
            margin-top: 80px;
        }
    </style>
</head>
<body>
    <div id="site-topbar"></div>
    <div id="site-header">
        <div class="container">
            <div class="left fl"></div>
            <div class="right fr"></div>
        </div>
    </div>
    <div id="site-footer">

    </div>
</body>
</html>

5.5 节小结

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

龙龙打代码

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
css基础

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头
复制链接

扫一扫