title: HTML笔记
date: 2023-01-09 00:53:32
tags: HTML
category: 编程

HTML笔记

html基础

六级标题标签
<h1>文字<h1>
<h2>文字<h2>
<h3>文字<h3>
<h4>文字<h4>
<h5>文字<h5>
<h6>文字<h6>

段落标签
<p>文字</p>

换行标签
<br>

水平分割标签
<hr>

文本标签

标签说明
b加粗
u下划线
i倾斜
s删除线
标签说明
strong加粗
ins下划线
em倾斜
del删除线

基础标签

图片
<body>
    <img src="1.jpg" alt="替换文本" title="这是个鼠标悬停提示" width="500" >
</body>

音频
<body>
    <audio src="./audio/1.mp3" controls autoplay loop></audio>
</body>

视频
<body>
    <video src="./video/白挺 - 你从未离去.mp4 " controls width="1000"></video>
</body>

 <!-- controls 显示播放的控件 -->
 <!-- autoplay 自动播放 -->
 <!-- loop循环播放 -->

超链接
<body>
    <a href="https://wwww.baidu.com/" target="_self">跳转到百度 </a>
    <!-- _self跳转网页 覆盖 -->
    <br>
    <a href="./01 标题标签.html" target="_blank">跳转</a>
    <!-- _blink跳转新的网页 -->
</body>

列表标签

无序
<body>
    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
    </ul>
</body>

有序
<body>
    <ol>
        <li>第一名</li>
        <li>第二名</li>
        <li>第三名</li>
    </ol>
</body>

自定义
<body>
    <dl>
        <dt>帮助中心</dt> 
        <!-- dt是自定义列表标题 -->
        <dd>账户管理</dd>
        <dd>购物指南</dd>
    </dl>
</body>

表格

基础表格
<body>
     <!-- 长宽一般在css中设置 -->
    <table border="1" width="500" height="100">
        <!-- 表格标题 -->
        <caption>学生成绩单</caption>

        <!-- thead表格头部 -->
        <thead>
            <tr>
                <!-- 表格标头 -->
                <th>姓名</th>
                <th>成绩</th>
            </tr>
        </thead>
        
        <!-- tbody表格主体 -->
        <tbody>
            <tr>
                <td>张三</td>
                <td>100</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>90</td>
            </tr>
        </tbody>
        
        <!-- tfoot表格底部 -->
        <tfoot>
            <tr>
                <td>总结</td>
                <td>都不错</td>
            </tr>
        </tfoot>
    </table>
</body>

单元格合并
<body>
     <!-- 长宽一般在css中设置 -->
    <table border="1" width="500" height="100">
        <!-- 表格标题 -->
        <caption>学生成绩单</caption>

        <!-- thead表格头部 -->
        <thead>
            <tr>
                <!-- 表格标头 -->
                <th>姓名</th>
                <th>成绩</th>
            </tr>
        </thead>
        
        <!-- tbody表格主体 -->
        <tbody>
            <tr>
                <td>张三</td>
                <!-- rowspan跨行合并，垂直合并 -->
                <td rowspan="2">100</td>
                <td>考的好</td>
            </tr>
            <tr>
                <td>李四</td>
                <!-- <td>90</td> -->
                <td>考的好</td>
            </tr>
        </tbody>
        
        <!-- tfoot表格底部 -->
        <tfoot>
            <tr>
                <td>总结</td>
                <!-- colspan跨列合并，水平合并 -->
                <td colspan="2">都不错</td>
                
            </tr>
        </tfoot>
    </table>
</body>

表单

input

根据type属性不同，有不同作用

标签名type属性作用
inputtext文本框，输入单行文本
inputpassword密码框
inputradio单元框，多选一
inputcheckbox多选框，多选多
inputfile文本选择，上传文件
inputsubmit提交按钮
inputreset重置按钮
inputbutton普通按钮，默认无功能，需配合js
<body>
    <form action="">

    <!-- 显示输入内容 -->
    文本框:<input type="text" placeholder="输入用户名">

    <br>
    <br>

    <!-- 内容会加密 -->
    密码框:<input type="password" placeholder="密码">

    <br>
    <br>

    <!-- 单选框：<input type="radio"> -->
    <!-- name设定分组，一组只能选中一个 -->
    <!-- checked默认选中 -->
    性别:<input type="radio" name="sex" checked>男 
        <input type="radio" name="sex">女

    <br>
    <br>

    多选框：<input type="checkbox" checked>

    <br>
    <br>

    <!-- multiple选择多个文件 -->
    上传文件<input type="file" multiple>

    <br>
    <br>

    按钮:<input type="submit">
    重置:<input type="reset">
    <!-- 需要在form才能实现重置 -->
    按钮:<input type="button" value="普通按钮">

    </form>
</body>

button

标签名type属性作用
buttonsubmit提交按钮，提交后端服务器
buttonreset重置按钮
buttonbutton普通按钮，需配合js
<body>
    <button>按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
    <button type="button">普通按钮</button>
</body>

select

下拉菜单

<body>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option selected>广州</option>
        <!--  selected默认选中 -->
        <option>深圳</option>
    </select>
</body>

textarea

文本域标签

<body>
    <!-- cols长度 rows宽度 一般由css设置 -->
    <textarea cols="200" rows="30"></textarea>
</body>

label

用于区域选中

<body>
    性别:
    <input type="radio" name="sex" id="1"> <label for="1">男</label> 

    <!-- <input type="radio" name="sex"> 女 -->
    <label> <input type="radio" name="sex"> 女</label>
</body><body>
    性别:
    <!-- 方法一 -->
    <input type="radio" name="sex" id="1"> <label for="1">男</label> 

    <!-- 方法二 -->
    <!-- <input type="radio" name="sex"> 女 -->
    <label> <input type="radio" name="sex"> 女</label>
</body>

语义标签

无语义
<body>
    <div>div标签</div>
    <div>div标签</div>

    <span>span标签</span>
    <span>span标签</span>

</body>

有语义，手机端标签

标签名语义
header网页头部
nav网页导航
footer网页底部
aside网页侧边栏
section网页区块
article网页文章
<body>
    <header>网页头部</header>
    <nav>网页导航</nav>
    <footer>网页底部</footer>
    <aside>侧边栏</aside>
    <section>网页区块</section>
    <article>文章</article>
</body>

字符实体

<body>
    <!-- &nbsp;空格 -->
    这是一段话，用于&nbsp;&nbsp;&nbsp;字符实体的使用
</body>

CSS入门

引入方式书写位置作用范围使用场景
内嵌式css写在style标签当前页面小案例
外联式css写在单独的css文件中，通过link标签引入多个页面项目中
行内式css写在标签style属性中当前标签配合js

内嵌式

<!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>Document</title>

    <style>
        /* css的注释 */
        /* css入门 */
        /* 选择器 {css属性} */
        /* 选择器:查找标签 */

        p{
            /* 文字颜色变红 */
            color: red;

            /* 字体放大 px为像素单位*/
            font-size: 30px;

            /* 背景颜色 */
            background-color: aqua;
            /* 高度width 宽度 height */
            /* 背景的宽高 */
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</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>Document</title>

    <!-- 外联式css连接 -->
    <link rel="stylesheet" href="27 CSS的引入.css">
</head>
<body>
    <p>这是一个p标签</p>

    <!-- 行内式 -->
    <div style="color: green; font-size: 30px;">这是一个div标签</div>
    <div>第二个div标签</div>
</body>
</html>

.css

/* 选择{} */
p{
    color: red;
}

选择器

标签选择器

<!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>Document</title>

    <style>
        /* 选择器{} */
        /* 标签选择器：以标签命名的选择器 */
        p{
            color:red
        }
        /* 标签选择器会选中所有相同标签并且生效 */
    </style>
</head>
<body>
    <p>这是第一个标签</p>
    <p>这是第二个标签</p>
    <p>这是第三个标签</p>
</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>Document</title>

    <style>
    .red{
        color: red;
    }
    .green{
        color: green;
    }
    .size{
        font-size: 66px;
    }
    </style>
</head>
<body>
    <!-- 类选择器“定义和使用 -->
    <p class="red">这是第一个标签</p>
    <p class="green">这是第二个标签</p>
    <p>这是第三个标签</p>
    <div class="red size" >这是第四个</div>
</body>
</html>

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>Document</title>

    <style>
        /* 定义ID选择器 */
        #blue
        {
            color: blue;
        }
    </style>
</head>
<body>
    <div id="blue">第一个标签</div>
    <!-- 一个id选择器只能有一个id属性值 -->
    <!-- 一个id选择器只能选中一个标签 -->
</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>Document</title>
    <style>
        /* *通配符 全局生效 */
    *{
        color: red;
    }
    </style>
</head>
<body>
    <div>div</div>
    <p>ppp</p>
    <h1>h1</h1>
    <span>span</span>
</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>Document</title>
    <style>
        p{
            /* 字体大小 */
            font-size: 30px;

            /* 字体粗细 */
            /* 正常：normal 加速：bold */
            /* 正常：400 加粗：700 其他100-900之前的整百数 */
            font-weight: bold;

            /* 文字倾斜 */
            /* 正常:normal 倾斜italic */
            font-style: italic;

            /* 字体 */
            /* 字体分三大类 无衬线字体sans-serif、衬线字体serif、等宽字体monospace */
            /* 如果无微软雅黑则黑体，无黑体就任意非衬线字体 */
            font-family: 黑体,sans-serif;
        }
        div{
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }
    </style>
</head>
<body>
    <!-- 默认字体大小是16 -->
    <p>这是段落文字</p>
    <div>第二行文字</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>Document</title>
    <style>
        p{
            /* 样式简写 */
            /* 倾斜 加粗 大小 字体 */
            /* 倾斜和加粗可以省略 */
            font: italic 700 66px 宋体;

            /* 覆盖倾斜 */
            font-style: normal;

            /* 一个属性冒号写多个值的写法：复合属性 */
        }
    </style>
</head>
<body>
    <p>标签</p>
    <div>标签2</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>Document</title>
    <style>
        p{
            /* text-indent: 50px; */
            /* 首行默认缩进2个字大小 */
            /* 默认字符：16px 32 */
            /* text-indent: 32px; */

            /* em:一个字的大小 */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>《三体》是刘慈欣创作的长篇科幻小说系列，由《三体》《三体2：黑暗森林》《三体3：死神永生》组成，第一部于2006年5月起在《科幻世界》杂志上连载，第二部于2008年5月首次出版，第三部则于2010年11月出版。
        作品讲述了地球人类文明和三体文明的信息交流、生死搏杀及两个文明在宇宙中的兴衰历程。其第一部经过刘宇昆翻译后获得了第73届雨果奖最佳长篇小说奖。2019年，列入“新中国70年70部长篇小说典藏”。 [62] 2020年4月，列入《教育部基础教育课程教材发展中心 中小学生阅读指导目录（2020年版）》高中段文学阅读。 
        2022年9月，《三体》入选2021十大年度国家IP。
    </p>
</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>Document</title>
    <style>
        h1{
            /* 文本对齐 lift center right 左中右 */
            text-align: center;
            /* 适用于文本 span标签 a标签 input标签 img标签 */
        }
        body{
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>标题</h1>

    <img src="./1.jpg" width="400" alt="">
</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>Document</title>
    <style>
        div{
            /* 下划线 */
            text-decoration: underline;
        }
        /* 删除线 */
        p{
            text-decoration: line-through;
        }
        /* 上划线 */
        h2{
            text-decoration: overline;
        }
        /* 无修饰线 */
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>ppppp</p>
    <h2>h2</h2>
    <a href="#">超链接</a>
</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>Document</title>
    <style>
        p{
            /* 写法一 */
            /* line-height: 50px; */

            /* 写法二 */
            /* line-height: 3; */

            /* 连写 字体和行高要用/分割 */
            font: italic 400 66px/5 宋体;
        }
    </style>
</head>
<body>
    <p>文化大革命如火如荼地进行，天文学家叶文洁在其间历经劫难，被带到军方绝秘计划“红岸工程”。叶文洁以太阳为天线，向宇宙发出地球文明的第一声啼鸣，取得了探寻外星文明的突破性进展。三颗无规则运行的太阳主导下，四光年外的“三体文明”百余次毁灭与重生，正被逼迫不得不逃离母星，而恰在此时，他们接收到了地球发来的信息。对人性绝望的叶文洁向三体人暴露了地球的坐标，彻底改变了人类的命运。地球的基础科学出现了异常的扰动，纳米科学家汪淼进入神秘的网络游戏《三体》，开始逐步逼近这个世界的真相。汪淼参加一次玩家聚会时，接触到了地球上应对三体人到来而形成的一个秘密组织ETO。地球防卫组织中国区作战中心通过“古筝计划”，一定程度上挫败了拯救派和降临派扰乱人类科学界和其他领域思想的图谋，获悉处于困境之中的三体人为了得到一个能够稳定生存的世界决定入侵地球。

    </p>
</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>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;

            /* 水平标签居中 */
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

综合案例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>Document</title>
    <style>
        div{
            width:800px;
            height:600px;
            /* background-color:pink; */
            margin: 0 auto;
        }

        /* h1{
            text-align:center;
            
        } */

        /* 涉及到多行  */
        /* p{
            text-align: center;
        } */
        
        /* 使用类选择器 */
        .center{
            text-align:center;
        }
        .color1
        {
            color:#808080;

        }
        .color2
        {
            color:#87ceeb;
            font-weight: 700;
        }
        a{
            text-decoration: none;
        }

        /* 首行缩进 */
        .suojin
        {
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div> 
        <h1 class="center">《自然》评选改变科学的10个计算机代码项目</h1>
        <p class="center">
            <span class="color1"> 2077年01月28日14:58</span>
            <span class="color2">新浪科技</span>  
            <a href="#">收藏本文</a>
        </p>

        <hr>
        <p class="suojin">2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。</p>
        <p class="suojin">这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”</p>
        <p class="suojin">如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。</p>
        <p class="suojin">最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。</p>
    </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>Document</title>
    <style>
        body{
            background-color: #f5f5f5;
        }
        .pro{
            width: 234px;
            height: 300px;
            background-color: #fff;
            /* div居中 */
            margin: 0 auto;
            /* 内容居中 */
            text-align: center;
        }
        img{
            width:160px

        }
        .title{
            font-size: 14px;
            line-height: 25px;
        }
        .info{
            color: #ccc;
            font-size: 12px;
            line-height: 30px;
        }
        .money
        {
            font-size: 14px;
            color: #ffa500;
        }
    </style>
</head>
<body>
    <!-- div用来网页布局 -->
    <div class="pro">
        <img src="./img/九号平衡车.png" alt="">
        <div class="title">九号平衡车</div>
        <div class="info">成年人的玩具</div>
        <div class="money">1999元</div>
    </div>
</body>
</html>

CSS进阶

选择器进阶

后代:空格

<!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>Document</title>
    <style>
        /* div的儿子p设置颜色为红色 */
        /* 父选择器 后代选择器{} */
        div p{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 后代：儿子 孙子重孙子 -->
    <p>这是一个P标签</p>
    <div> 
        <p>这是div的的儿子p</p>
    </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>Document</title>
    <style>
       /* 后代选择器 */
       /* div a{
            color: red;
        } */

        /* div的儿子a颜色为红 */
        div>a{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p中的a</a>
        </p>
    </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>Document</title>
    <style>
        /* p div span h1为红色 */
        /* 选择器1，选择器2 */
        p,
        div,
        span,
        h1
        {
            color: red;
        }
    </style>
</head>
<body>
    <p>p</p>
    <div>div</div>
    <span>span</span>
    <h1>h1</h1>

    <h2>h2</h2>
</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>Document</title>
    <style>
        /* p标签 并且添加了box类 */
        p.box{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 找到第一个p 设置为红色 -->
    <p class="box">这是p标签:box</p>
    <p>pppppp</p>
    <div class="box">这是div标签:box</div>
</body>
</html>

伪类hover:鼠标悬停的状态

<!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>Document</title>
    <style>
        /* 悬停为红色 */
        a:hover
        {
            color: red;
            background-color: skyblue;
        }

        div:hover
        {
            color: aqua;
        }
    </style>
</head>
<body>
    <a href="#">这是超链接</a>
    <!-- 任何标签都可以添加伪类 任何一个标签都可以鼠标悬停  -->
    <div>div</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>Document</title>
    <style>
        div{
            /* background-color: pink; */
            /* background-color: #ccc; */
            /* 红绿蓝三原色，a是透明度0-1 */
            background-color: rgba(0, 0, 0, .5);
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

图片

背景平铺

background-repeat(缩写：bgr)

取值效果
repeat默认值，水平和垂直平铺
no-repear不平铺
repeat-x沿水平方向x轴平铺
repeat-y沿垂直方向y轴平铺

背景位置

backg-position(bgp)

<!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>Document</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./img/九号平衡车.png);
            
            /* 背景平铺 */
            /* background-repeat: repeat; */ 
            background-repeat: no-repeat;

            /* 背景位置 */
            /* background-position: right 0; */
            background-position: 50px 0;
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

连写

 <style>
        div{
            width: 400px;
            height: 400px;
            background: pink url(./img/九号平衡车.png) no-repeat center center;
        }
    </style>

元素显示模式

块级元素

<!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>Document</title>
    <style>
        /* 块 独占一行 默认宽是100% */
        /* div p h ul li dl dt dd from header nav footer */
        div{
            width: 300px;
            height: 300px;
            background-color: pink;

             /* 转 行内块 */
            /* display: inline-block; */

            /* 转 行内 */
            /* display: inline; */
        }
    </style>
</head>
<body>
    <div>1111</div>
    <div>2222</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>Document</title>
    <style>
        /* 行内 不换行 设置宽高不生效 尺寸和内容大小相同*/
        /* a span b u i s strong ins em del…… */
        span{
            width: 300px;
            height: 300px;
            background-color: pink;

            /* 转 行内块*/
            /* display: inline-block; */

            /* 转 块 */
            /* display: block; */
        }
    </style>
</head>
<body>
    <span>span</span>
    <span>span</span>
</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>Document</title>
    <style>
        /* 行内块 一行显示多个 加宽高生效 */
        /* <!-- input textarea button select --> */      
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <img src="./img/九号平衡车.png" alt="">
    <img src="./img/九号平衡车.png" alt="">
</body>
</html>

元素显示模式转换

属性效果使用频率
display:block转 块级较多
display:inline-blcok转 行内快较多
display:inline转 行内极少

扩展

标签嵌套

<!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>Document</title>
</head>
<body>
    <!-- p和h不能互相嵌套 -->
    <!-- <p>
        <h1>一级标题</h1>
    </p> -->

    <!-- p里面不能含div -->
    <!-- <p>
        <div>div</div>
    </p> -->

    <!-- a可以嵌套任意元素，除a本身 -->
</body>
</html>

CSS特性

继承性

<!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>Document</title>
    <style>
        /* 控制文字的属性都能继承,不是控制文字的都不继承 */
        div{
            color: red;
            font-size: 30px;
            /* 不继承 */
            height: 300px;
        }
    </style>
</head>
<body>
    <div>
        这是div标签里面的文字
        <span>这是div里面的span</span>
    </div>
</body>
</html>
Tips
<!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>Document</title>
    <style>
        div
        {
            /* 超链接不继承颜色 */
            color:red;
            /* 标题不继承文字大小 */
            font-size: 12px;
            
        }
        a{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#" >超链接</a>
        <h1>一级标题</h1>
    </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>Document</title>
    <style>
        div
        {
            color: green;
            color: red;
        }
        .box
        {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="box">文字</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>Document</title>
    <style>
        .box
        {
            color: blue;
        }

        body{
            color: red;
        }
        
        div{
            color: green !important;
        }
        /* importnt不要给继承的添加 自己有样式无法继承父级样式 */
    </style>
</head>
<body>
    <!-- 当一个标签使用了多个选择器 样式冲突 谁会生效 -->
    <div class="box" id="box " style="color: 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>Document</title>
    <style>
        /* ！important如果不是继承 则权重最高 */

        /* 行内，id 类 标签 */
        /* 0 1 0 1 */
        div #one
        {
            color: orange;
        }
        /* 0 0 2 0 */
        .father .son
        {
            color: skyblue;
        }
        /* 0 0 1 1 */
        .father p{
            color: purple;
        }
        /* 0 0 0 2 */
        div p
        {
            color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <p class="son" id="one">标签</p>
    </div>
</body>
</html>

综合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>Document</title>
    <style>
        /* a显示模式是行内 加宽高默认不生效 转显示模式：行内块 */
        a{
            text-decoration: none;
            width: 100px;
            height: 50px;
            background-color: red;
            /* 转行内块 */
            display: inline-block;
            color: white;
            text-align: center;
            line-height: 50px;
        }
        a:hover{
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- a{导航$}*5 -->
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
    <a href="#">导航4</a>
    <a href="#">导航5</a>
</body>
</html>

CSS盒子模型

体验

<!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>Document</title>
    <style>
        /* 纸箱子 填充泡沫 */
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 边框线=纸箱子 */
            border: 1px solid black;
            /* 内边距=填充泡沫 出现在内容和盒子边缘之间 */
            padding: 20px;
            /* 外边距 出现在两个盒子之间 */
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>内容电脑</div>
    <div>内容电脑</div>
</body>
</html>

内容：width和height

<style>
        div
        {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>文字</div>

边框：border使用

<style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* solid实线 dashed虚线 dotted点线*/
            /* border 粗细 线条样式 颜色 （不分先后顺序） */
            /* border: 1px solid #000; */
            border-left: 5px dotted #000;
        }
    </style>
</head>
<body>
    <div>内容</div>

实例 新浪导航

<!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>Document</title>
    <style>
        .box{
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;

        }

        /* 后代 box里面的a */
        .box a{
            /* width: 80px; */
            /* 让内边距自适应字数 */
            padding: 0 16px;
            
            height: 40px;
            /* 加入背景看清楚文字的的位置 */
            /* background-color: #edeef0; */
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }
        .box a:hover
        {
            background-color: #edeef0;
            color: #ff8400;
        }
        
    </style>
    <!--从外到内 先宽高背景色 放内容 调节内容的位置 控制文字细节 -->
</head>
<body>
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
    <p>
        <a href="#"></a>
    </p>
</body>
</html>

内边距：padding

写法

<!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>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 添加了4个方向的内边距 */
            /* padding属性可以当做复合属性使用 表示单独设置某个方向的内边距 */
            /* 最多可以写四个值 */
            padding: 50px;
            padding: 10px 20px 40px 80px;

            /* 四值 上 右 下 左  */
            /* padding 10px 20px 40px 80px */

            /* 三值 上 左右 下*/
            padding: 10px 40px 80px;

            /* 两值 上下 左右*/
            padding: 10px 80px;
            
            /* 多值写法 永远都是从上开始顺时针转一圈 如果无数，则看对应面数值 */
        }
    </style>
</head>
<body>
    <div>文字</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>Document</title>
    <style>
        div{
            /* 300x300的盒子 */
            /* 撑大盒子的参数 border+padding */
            width: 240x;
            height: 240px;
            background: pink;
            border: 10px solid #000;
            padding: 20px;
            
             /* 内减模式 */
            div{
            width: 100px;
            height: 100px;
            background: pink;
            border: 10 solid #000;
            padding: 20px;
            /* 变成CSS3 的盒子模型 加了border和padding不需要手动减法 */
            box-sizing: border-box;
        }
        }
    </style>
</head>
<body>
    <div>文字</div>
</body>
</html>

外边距 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>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 50px;
            /* margin-left: 100px; */
        }
    </style>
</head>
<body>
    <div>文字</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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <p>ppp</p>
    <p>ppp</p>
    <h1>h1</h1>
    <ul>
        <li>lili</li>
    </ul>
</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>Document</title>
    <style>
        div{
            width: 10000px;
            height: 100px;
            background-color: pink;
            margin: 0 auto;
            
        }
    </style>
</head>
<body>
    <!-- 版心：网页的有效内容 -->
    <div>版心</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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            /* 所有的标签都可能添加内边距获border 都内减模式 */
            box-sizing: border-box;
        }
        .news{
            width: 500px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 50px auto;
            padding: 42px 30px 0;
        }

        .news h2{
            border-bottom: 1px solid #ccc;
            font-size: 30px;
            /* 行高是一倍 是字号的大小 */
            line-height: 1;
            padding-bottom: 9px;
        }

        /* 去掉列表的符号 */
        ul{
            /* 去掉列表前的点 */
            list-style: none;
        }
        .news li{
            height: 50px;
            border-bottom: 1px dashed #ccc;
            padding-left: 28px;
            line-height: 50px;
        }
        .news a{
            text-decoration: none;
            color: #666;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <!-- 从外到内 -->
    <div class="news">
        <h2>最新文章/New Articles</h2>
        <ul>
            <li><a href="#">第一条</a></li>
            <li><a href="#">第二条</a></li>
            <li><a href="#">第三条</a></li>
            <li><a href="#">第四条</a></li>
            <li><a href="#">第五条</a></li>
        </ul>
    </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>Document</title>
    <style>
        div
        {
            width: 100px;
            height: 100px;
            background-color: pink
            ;
        }
        /* 外边距折叠 上下margin会合并 取最大值 */
        .one
        {
            margin-bottom: 60px;
        }
        .two
        {
            margin-top: 5opx;
        }
    </style>
</head>
<body>
    <div class="one">11</div>
    <div class="two">22</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>Document</title>
    <style>
        .father
        {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 解决方法 */
            /* 1.给父级设置border-top或者padding-top */
            /* padding-top: 50px; */
            /* border-top: 1px solid #000; */

            /* 2.给父级元素设置overflow */ 
            /* overflow: hidden; */

            /* 3.转换成行内块元素 */
            /* 4.设置浮动 */
        }
        .son
        {
            width: 100px;
            height: 100px;
            background-color: skyblue;

            /* 塌陷 子级会带着父级一起移动 */
            /* margin-top: 50px; */
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </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>Document</title>
    <style>
        span{
            /* margin: 100px; */
            padding: 100px;
        }
    </style>
</head>
<body>
    <!-- 行内元素 内外边距 margin padding -->

    <!-- 如果想要通过margin或padding改变行内标签的垂直位置  无法生效 -->
    <!-- 行内标签的margin-top和bottom不生效 -->
    <!-- 行内标签的padding-top和bottom不生效 -->
    <span>span</span>
    <span>span</span>
</body>
</html>

CSS浮动

结构伪类

基本用法

<!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>Document</title>
    <style>
        /* 选中第一个 */
        /* li:first-child{
            background-color: green;
        } */

        /* 最后一个 */
        /* li:last-child{
            background-color: green;
        } */

        /* 任意一个 */
        /* li:nth-child(5)
        {
            background-color: green;
        } */

        /* 倒数第X个 */
        /* li:nth-last-child(1)
        {
            background-color: green;
        } */
    </style>s
</head>
<body>
    <!-- ul>li{这是第$个li}*8 -->
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</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>Document</title>
    <style>
        /* 偶数 2n*/
        /* 奇数 2n+1 */
        /* 前三个 -n+3 */
        /* 4的倍数 4n */
        li:nth-child(2n)
        {
            background-color: pink;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个</li>
        <li>这是第2个</li>
        <li>这是第3个</li>
        <li>这是第4个</li>
        <li>这是第5个</li>
        <li>这是第6个</li>
        <li>这是第7个</li>
        <li>这是第8个</li>
    </ul>
</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>Document</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .father::before{
            /* 内容 */
            /* connect必须添加 否则伪元素不生效 */
            content: "第一项";
            color: aquamarine;
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 默认是行内元素，宽高不生效 */
            display: block;
        }
        .father::after
        {
            content: "第三项";
        }
    </style>
</head>
<body>
    <!-- 伪元素：通过css创建标签 装饰性的不重要小图 -->
    <!-- 找父级 在这个父级里创建子级标签 -->
    <div class="father">第二项</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>Document</title>
    <style>
        div{
            /* 浏览器解析行内块或行内标签的时候 如果标签换行会产生一个空格 */
            display: inline-block;
            width: 100px;
            height: 100px;
        }
        .one{
            background-color: pink;
        }
        .two
        {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="one">1</div>
    <div class="two">2</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>Document</title>
    <style>
        /* img
        {
            float:left ;
        } */
        div{
            width: 100px;
            height: 100px;
        }
        .one{
            background-color: pink;
            float: left;
        }
        .two{
            background-color: skyblue;
            /* float: right; */
            float: left;
        }
    </style>
</head>
<body>
    <!-- 1.图文环绕 -->
    <!-- <img src="./img/miku.png" alt=""> -->
    <!-- 就爱上咖啡花露水开服包的酸辣粉巴萨节快乐峰会上打击发哈萨克冯老师发售的付首付款你打算尽快发货首付款护发素奥斯卡的看法VB几刀首发就爱上咖啡花露水开服包的酸辣粉巴萨节快乐峰会上打击发哈萨克冯老师发售的付首付款你打算尽快发货首付款护发素奥斯卡的看法VB几刀首发就爱上咖啡花露水开服包的酸辣粉巴萨节快乐峰会上打击发哈萨克冯老师发售的付首付款你打算尽快发货首付款护发素奥斯卡的看法VB几刀首发就爱上咖啡花露水开服包的酸辣粉巴萨节快乐峰会上打击发哈萨克冯老师发售的付首付款你打算尽快发货首付款护发素奥斯卡的看法VB几刀首发就爱上咖啡花露水开服包的酸辣粉巴萨节快乐峰会上打击发哈萨克冯老师发售的付首付款你打算尽快发货首付款护发素奥斯卡的看法VB几刀首发就爱上咖啡花露水开服包的酸辣粉巴萨节快乐峰会上打击发哈萨克冯老师发售的付首付款你打算尽快发货首付款护发素奥斯卡的看法VB几刀首发就爱上咖啡花露水开服包的酸辣粉巴萨节快乐峰会上打击发哈萨克冯老师发售的付首付款你打算尽快发货首付款护发素奥斯卡的看法VB几刀首发就爱上咖啡花露水开服包的酸辣粉巴萨节快乐峰会上打击发哈萨克冯老师发售的付首付款你打算尽快发货首付款护发素奥斯卡的看法VB几刀首发 -->

    <!-- 2.网页布局 块在一行排列 -->
    <div class="one">1</div>
    <div class="two">2</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>Document</title>
    <style>
        /* 浮动标签 顶对齐 */
        /* 浮动 在一行排列 宽高生效 浮动后的标签具备行内块特点 */
        .one{
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
            margin-top: 50px;
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            float: left;

            /* 因为有浮动，不能生效， 盒子无法水平居中 */
            margin: 0 auto;
        }
        .three{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</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>Document</title>
    <style>
        .top
        {
            margin: 0 auto;
            width: 1000px;
            /* 父级设置高度 */
            /* height: 300px; */
            background-color: pink;
        }
        .bottom{
            height: 100px;
            background-color: green;
        }
        .left
        {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right
        {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 父子级标签，父级没有高度 后面的标准流盒子会受影响 会显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></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>Document</title>
    <style>
        .top
        {
            margin: 0 auto;
            width: 1000px;
            
            /* height: 300px; */
            background-color: pink;
        }
        .bottom{
            height: 100px;
            background-color: green;
        }
        .left
        {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right
        {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
        .clearfix
        {
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父子级标签，父级没有高度 后面的标准流盒子会受影响 会显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>

        <!-- 给父级内容的最后添加一个块级元素 -->
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></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>Document</title>
    <style>
        .top
        {
            margin: 0 auto;
            width: 1000px;
            /* 父级设置高度 */
            /* height: 300px; */
            background-color: pink;
        }
        .bottom{
            height: 100px;
            background-color: green;
        }
        .left
        {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right
        {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        /* 单伪元素清除浮动 和额外标签法原理相同*/
        .clearfix::after
        {
            content: '';

            /* 伪元素 添加的标签是行内 要求块 */
            display: block;
            clear: both;

            /* 为了兼容性 */
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <!-- 父子级标签，父级没有高度 后面的标准流盒子会受影响 会显示到上面的位置 -->
    <div class="top clearfix" >
        <div class="left"></div>
        <div class="right"></div>

        <!-- 通过css添加标签 -->
    </div>
    <div class="bottom"></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>Document</title>
    <style>
        .top
        {
            margin: 0 auto;
            width: 1000px;
            /* 父级设置高度 */
            /* height: 300px; */
            background-color: pink;
        }
        .bottom{
            height: 100px;
            background-color: green;
        }
        .left
        {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }
        .right
        {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        /* .clearfix::before作用 解决外边距塌陷问题 */
        /* 外边距塌陷 父子标签，都是块级 子级加margin会影响父级的位置 */
        /* 清除浮动 */
        .clearfix::before,
        .clearfix::after{
            content: '';
            display: table;
        }

        /* 真正清除浮动的标签 */
        .clearfix::after{
            /* content: '';
            display: table; */
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父子级标签，父级没有高度 后面的标准流盒子会受影响 会显示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

overflow

.top
        {
            margin: 0 auto;
            width: 1000px;
            /* 父级设置高度 */
            /* height: 300px; */
            background-color: pink;

            /* overflow添加 */
            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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top
        {
            /* 宽度高度背景色 */
            height: 40px;
            background-color: #333;
        }
        .header{
            width: 1226px;
            height: 100px;
            background-color: #ffc0cb;
            margin: 0 auto;
        }
        .content{
            width: 1226px;
            height: 460px;
            background-color: green;
            margin: 0 auto;
        }
        .left
        {
            width: 234px;
            height: 460px;
            background-color: #ffa500;
            float: left;
        }
        .right{
            width: 992px;
            height: 460px;
            background-color: #87ceeb;
            float: right;
        }
        /* CSS书写顺序 
             1.浮动 或 display
             2.盒子模型 margin border padding 宽高度背景色
             3.文字样式
        */
    </style>
</head>
<body>
    <!-- 通栏的盒子 宽度和浏览器一致 -->
    <div class="top"></div>
    <div class="header">头部</div>
    <div class="content">
        <div class="left">left</div>
        <div class="right">right</div>
    </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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 0 auto;
            width: 1226px;
            height: 614px;
            /* background-color: pink; */
        }
        .left{
            float: left;
            width: 234px;
            height: 614px;
            background-color: #800080;
        }
        .right
        {
            float: right;
            width: 978px;
            height: 614px;
            /* background-color: green; */
        }

        ul{
            list-style: none;
        }
        .right li{
            float: left;
            
            margin-right: 14px;
            margin-bottom: 14px;

            width: 234px;
            height: 300px;
            background-color:skyblue;
        }
        /* 如果父级宽度不够，子级会自动换行 */
        /* 第四个和第八个li清除右侧间距 */
        .right li:nth-child(4n)
        {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
</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>学成在线</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 网站的首页,所有网站的首页都叫index.html  -->
    <!-- 布局 从外到内 从上到下 从左到右 -->
    <!-- CSS 浮动/display 盒子模型 文字样式 -->

    <!-- 头部 header 负责头部区域的样式 wrapper只负责版心效果 -->
    <div class="header wrapper">
        <h1>
            <a href="#"><img src="./images/logo.png" alt=""></a>
        </h1>
        
        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>

        <!-- 搜索 -->
        <div class="search">
            <input type="text" placeholder="请输入关键词">
            <button></button>
        </div>

        <!-- 用户 -->
        <div class="user">
            <img src="./images/user.png" alt="">
            <span>Alax</span>
        </div>
    </div>

    <div>
         <!-- 轮播图 -->
         <div class="banner">
            <div class="wrapper">
                <div class="left">
                    <ul>
                        <li><a href="#">前端开发<span>></span></a></li>
                        <li><a href="#">前端开发<span>></span></a></li>
                        <li><a href="#">前端开发<span>></span></a></li>
                        <li><a href="#">前端开发<span>></span></a></li>
                        <li><a href="#">前端开发<span>></span></a></li>
                        <li><a href="#">前端开发<span>></span></a></li>
                        <li><a href="#">前端开发<span>></span></a></li>
                        <li><a href="#">前端开发<span>></span></a></li>
                        <li><a href="#">前端开发<span>></span></a></li>
                    </ul>
                </div>
                <div class="right">
                    <h2>我的课程表</h2>
                    <div class="content">
                        <dl>
                            <dt>继续学习 程序语言设计</dt>
                            <dd>正在学习-适用对象</dd>
                        </dl>
                        <dl>
                            <dt>继续学习 程序语言设计</dt>
                            <dd>正在学习-适用对象</dd>
                        </dl>
                        <dl>
                            <dt>继续学习 程序语言设计</dt>
                            <dd>正在学习-适用对象</dd>
                        </dl>
                    </div>
                    <a href="#" class="more">全部课程</a>
                </div>
            </div>
         </div>

         <!-- 精品推荐 -->
         <div class="goods wrapper">
            <h2>精品推荐</h2>
            <ul>
                <li><a href="#">JQuery</a></li>
                <li><a href="#">JQuery</a></li>
                <li><a href="#">JQuery</a></li>
                <li><a href="#">JQuery</a></li>
                <li><a href="#">JQuery</a></li>
                <li><a href="#">JQuery</a></li>
            </ul>
            <a href="#" class="xing">修改兴趣</a>
         </div>

         <!-- 景品推荐课程 -->
         <div class="box wrapper">
            <div class="title">
                <h2>精品推荐</h2>
                <a href="#">查看全部</a>
            </div>

            <div class="content clearfix">
                <ul>
                    <li>
                        <a href="#">
                            <img src="./images/course07.png" alt="">
                            <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                            <p><span>高级</span>  •  1125人在学习</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/course07.png" alt="">
                            <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                            <p><span>高级</span>  •  1125人在学习</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/course07.png" alt="">
                            <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                            <p><span>高级</span>  •  1125人在学习</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/course07.png" alt="">
                            <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                            <p><span>高级</span>  •  1125人在学习</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/course07.png" alt="">
                            <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                            <p><span>高级</span>  •  1125人在学习</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/course07.png" alt="">
                            <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                            <p><span>高级</span>  •  1125人在学习</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/course07.png" alt="">
                            <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                            <p><span>高级</span>  •  1125人在学习</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/course07.png" alt="">
                            <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                            <p><span>高级</span>  •  1125人在学习</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/course07.png" alt="">
                            <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                            <p><span>高级</span>  •  1125人在学习</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./images/course07.png" alt="">
                            <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                            <p><span>高级</span>  •  1125人在学习</p>
                        </a>
                    </li>
                </ul>
            </div>
         </div>

         <!-- 版权 要清楚浮动的影响 课程的li的父级 -->
         <!-- li都浮动了 脱标 撑不开父级的高度 -->
         <div class="footer">
            <div class="wrapper">
                <div class="left">
                    <img src="./images/logo.png" alt="">
                    <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
                        © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                        <a href="#">下载APP</a>
                </div>
                <div class="right">
                    <dl>
                        <dt>合作伙伴</dt>
                        <dd><a href="#">合作机构</a></dd>
                        <dd><a href="#">合作导师</a></dd>

                    </dl>
                    <dl>
                        <dt>合作伙伴</dt>
                        <dd><a href="#">合作机构</a></dd>
                        <dd><a href="#">合作导师</a></dd>

                    </dl>
                    <dl>
                        <dt>合作伙伴</dt>
                        <dd><a href="#">合作机构</a></dd>
                        <dd><a href="#">合作导师</a></dd>

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

CSS

/* index.css是用来美化首页的 */
* {
    margin: 0;
    padding: 0;
    /* 內减模式 */
    box-sizing: border-box;
}

li {
    list-style: none;
}
a {
    text-decoration: none;
}

.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }


body{
    background-color: #f3f5f7;
}

/* 版心 */
.wrapper{
    width: 1200px;
    margin: 0 auto;
}

/* 头部 */
.header{
    height: 42px;
    /* background-color: pink; */
    /* margin-top: 30px;
    margin-bottom: 30px; */
    margin: 30px auto;
}

h1{
    float: left;
}

/* 导航 */
.nav{
    float: left;
    margin-left: 70px;
    height: 42px;
    /* background-color: green; */
}

.nav li{
    float: left;
    margin-right: 26px;
}

.nav li a{
    display: block;
    padding: 0 9px;
    height: 42px;
    line-height: 42px;
    /* border-bottom: 2px solid #00a4ff; */
    
    font-size: 18px;
    color:#050505;

}

.nav li a:hover{
    border-bottom: 2px solid #00a4ff;

}

/* 搜索 */
.search{
    float: left;
    margin-left: 59px;
    width: 412px;
    height: 40px;
    border: 1px solid #00a4ff;
}

.search input{
    float: left;
    padding-left: 20px;
    /* 左右加一起的尺寸要小于410 */
    width: 360px;
    height: 38px;
    border: 0;
}

/* 控制placeholder的样式 */
.search input::placeholder{
    font-size: 14px;
    color: #bfbfbf;
}

.search button{
    float: left;
    width: 50px;
    height: 40px;
    background-image: url(../images/btn.png);
    border: 0;
}

.user{
    float: right;
    margin-right: 35px;
    height: 42px;
    line-height: 42px;
}

.user img{
    /* 调节图片垂直对齐方式 middle居中 */
    vertical-align: middle;
}

/* 轮播图 */
.banner{
    height: 420px;
    background-color: #1c036c;
}

.banner .wrapper{
    height: 420px;
    background-image: url(../images/banner2.png);
}

.banner .left{
    float: left;
    padding: 0 20px;
    width: 190px;
    height: 420px;
    background-color: rgba(0, 0, 0, 0.3);

    /* 行高是控制文字的属性 能继承 */
    line-height: 44px;
}

.banner .left span
{
    float: right;
}

.banner .left a{
    font-size: 14px;
    color: #fff;
}

.banner .left a:hover
{
    color: #00b4ff;
}

.banner .right{
    float: right;
    margin-top: 50px;
    width: 228px;
    height: 300px;
    background-color: #fff;
}

.banner .right h2{
    height: 48px;
    background-color: #9bceea;
    text-align: center;
    line-height: 48px;
    font-size: 18px;
    color: #fff;
}

.banner .right .content{
    padding: 0 18px;
}

.banner .right .content dl{
    padding: 12px;
    border-bottom: 2px solid #e5e5e5;
}

.banner .right .content dt{
    font-size: 16px;
    color: #4e4e4e;
}

.banner .right .content dd{
    font-size: 14px;
    color: #4e4e4e;
}

.banner .right .more{
    display: block;
    /* margin: 4px 14px 0; */
    margin: 4px auto 0;
    width: 200px;
    height: 40px;
    border: 1px solid #00a4ff;
    font-size: 16px;
    color: #00a4ff;
    font-weight: 700;

    text-align: center;
    line-height: 40px;
}

/* 精品推荐 */
.goods{
    margin-top: 8px;
    padding-left: 34px;
    padding-right: 26px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0px 2px 3px 0px rgba(118, 118, 118, 0.2);

    line-height: 60px;
}

.goods h2{
    float: left;
    font-size: 16px;
    color: #00a4ff;
    font-weight: 400;
}

.goods ul{
    float: left;
    margin-left: 30px;
}

.goods ul li
{
    float: left;
}

.goods li a{
    border-left: 1px solid #bfbfbf;
    padding: 0 30px;
    font-size: 16px;
    color:#050505 ;
}

.goods .xing{
    float: right;
    font-size: 14px;
    color: #00a4ff;
}

/* 精品课程 */
.box{
    margin-top: 35px;
}

.box .title{
    height: 40px;
    /* background-color: pink; */
}

.box .title h2{
    float: left;
    font-size: 20px;
    color: #494949;
    font-weight: 400;
}

.box .title a{
    float: right;
    margin-right: 30px;
    font-size: 12px;
    color: #a5a5a5;
}

.box .content li{
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
    width: 228px;
    height: 270px;
    background-color: #fff;
}

.box .content li:nth-child(5n)
{
    margin-right: 0;
}

.box .content li h3{
    padding: 20px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}

.box .content li p{
    padding: 0 20px;
    font-size: 12px;
    color: #999;
}

.box .content li span{
    color: #ff7c2d;
}

/* 版权 */
.footer{
    margin-top: 40px;
    padding-top: 30px;
    height: 417px;
    background-color: #fff;
}

.footer .left{
    float: left;
}

.footer .left p{
    margin: 20px 0 10px;
    font-size: 12px;
    color: #666;
}

.footer .left a{
    display: inline-block;
    width: 120px;
    height: 36px;
    border: 1px solid #00a4ff;
    text-align: center;
    line-height: 36px;
    font-size: 16px;
    color: #00a4ff;

}

.footer .right{
    float: right;
}

.footer .right dl{
    float: left;
    margin-right: 120px;
}

CSS定位

属性名 position

定位方式属性值
静态定位static
相对定位relative
绝对定位absolute
固定定位fixed

设置偏移值

方向属性名属性值含义
水平left数字+px距离左边的距离
水平right数字+px距离右边的距离
垂直top数字+px距离上边的距离
垂直bottom数字+px距离下边的距离

相对定位

<!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>Document</title>
    <style>
        /* css书写 1.定位/浮动、display 2.盒子模型 3.文字属性 */
        .box{
            position: relative;
            /* 如果left和right都有 以left为准 top和bottom以top为准 */
            right: 200px;
            bottom: 400px;
            left: 100px;
            top: 200px;

            /*
            1.占有原来的位置
            2.仍然具备标签原有的显示模式特点
            3.改变位置参照自己原来的位置 
             */

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <div class="box">box</div>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
    <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

</body>
</html>

绝对定位

有父级，无定位

<style>
        /* css书写 1.定位/浮动、display 2.盒子模型 3.文字属性 */
        .box{
            /* 绝对定位 
            先找已经定位的父级 如果有这样的父级就以这个父级为参照物进行定位
            有父级。但父级没有定位，以浏览器窗口为参照物进行定位
             */
             
            position: absolute;
            /* left: 50px; */
            left: 0;
            top: 0;
            
            /* 
            1.脱标 不占位置
            2.改变标签的显示模式特点 具备行内块的特点（在一行共存，宽高生效）  
            */

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

子绝父相

<!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>Document</title>
    <style>
        .father{
            position: relative;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .son{
            /* 相对 绝对 */
            /* 父级相对定位 子级绝对定位  子绝父相 */
            /* position: relative; */
            /* position: absolute; */

            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .sun{
            position: absolute;
            /* left: 20px;
            top: 30px; */
            right: 20px;
            bottom: 50px;

            width: 200px;
            height: 200px;
            background-color: green;
        }
        /* 绝对定位查找父级的方式 就近找定位的父级 
        如果逐层查找不到这样的父级 就以浏览器窗口为参照进行定位 */
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            <div class="sun"></div>
        </div>
    </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>Document</title>
    <style>
        .box{
            /* 1.绝对定位的盒子不能使用左右margin，auto居中 */
            position: absolute;
            /* margin: 0 auto; */
            /* left 50%整个盒子移动到浏览器中间偏右的位置 */
            left: 50%;
            /* 把盒子向左侧移动 宽度的一半 */
            /* margin-left: -150px; */

            /* 位移 自己宽度高度的一半 */
            transform: translate(-50%, -50%);

            top: 50%;
            /* margin-top: -150px; */

            width: 301px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

固定定位

<style>
        /* css书写 1.定位/浮动、display 2.盒子模型 3.文字属性 */
        .box{
            position: fixed;
            left: 0;
            top: 0;

            /* 
            1.脱标 不占位置
            2.改变位置参考浏览器窗口
            3.具备行内块特点
            */

            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

元素的层级关系

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .one{
            position: absolute;
            left: 20px;
            top: 50px;
            background-color: pink;

            z-index: 1;
        }
        .two{
            position: absolute;
            left: 50px;
            top: 100px;
            background-color: skyblue;
        }

        /*
        默认情况下 默认的盒子 后者在上
        z-index 整数数字 取值越大 显示顺序越靠上
        z-index 的默认值是0
        必须配合定位才会生效
         */
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
</body>
</html>

CSS装饰

垂直对齐方式

vertical-aligin

属性值效果
baseline默认 基线对齐
top顶部对齐
middle中部对齐
bottom底部对齐

五个问题的场景解决

01
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 浏览器遇到行内和行内块标签当做文字处理, 默认文字是按基线对象 */
    input {
      height: 50px;
      box-sizing: border-box;

      vertical-align: middle;
    }

  </style>
</head>
<body>
  <input type="text"><input type="button" value="搜索">
</body>
</html>
02
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   img {
     vertical-align: middle;
   }
  </style>
</head>
<body>
  <img src="../images/1.jpg" alt=""><input type="text">
</body>
</html>
03
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      height: 400px;
      background-color: pink;
    }

    input {
      /* vertical-align: middle; */
      vertical-align: top;
    }

  </style>
</head>
<body>
  <div class="father">
    <input type="text">
  </div>
</body>
</html>
04
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      background-color: pink;
    }

    img {
      /* 浏览器把行内和行内块标签当做文字处理,默认基线对齐 */
      /* vertical-align: middle; */
      display: block;
    }

  </style>
</head>
<body>
  <div class="father">
    <img src="../images/1.jpg" alt="">
  </div>
</body>
</html>
05
<!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>Document</title>
  <style>
    .father {
      width: 600px;
      height: 600px;
      background-color: pink;
      line-height: 600px;
      text-align: center;
    }

    img {
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div class="father">
    <img src="../images/1.jpg" alt="">
  </div>
</body>
</html>

光标类型

cursor

属性值效果
default默认值 通常是箭头
pointer小手，提示可以点击
text工字型 提示可以选择文字
move十字光标，提示可以移动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;

            cursor: pointer;
        }
    </style>
</head>
<body>
    <div>
        div
    </div>
</body>
</html>

边框圆角

border-radius

基础

 <style>
        .box{
            margin: 50px auto;
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 一个值表示4个角是相同的 */
            /* border-radius: 10px; */

            /* 左上 右上 右下 左上 顺时针 */
            /* border-radius: 10px 20px 40px 80px; */

            /* 对角相同 */
            border-radius: 10px 80px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

应用 画圆和胶囊

<!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>Document</title>
    <style>
        .one{
             /* 画正圆 */
            width: 200px;
            height: 200px;
            background-color: pink;
            
           
            /* 取盒子尺寸的一半 */
            /* border-radius: 100px; */
            border-radius: 50%;
        }

        .two{
            /* 胶囊 长方形，br是高得一半 */
            width: 300px;
            height: 200px;
            background-color: skyblue;
            border-radius: 100px;
        }
    </style>
</head>
<body>
    <div class="one"></div>

    <div class="two"></div>
</body>
</html>

overflow溢出部分显示效果

visible默认值 溢出可见
hidden溢出隐藏
scroll无论是否溢出，都显示滚动条
auto根据是否溢出，自动显示或隐藏滚动条
<!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>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: pink;

            /* 溢出隐藏 */
            /* overflow: hidden; */

            /* 滚动 */
            /* overflow: scroll; */

            /* 根据内容是否超出 判断是否显示滚动条 */
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="box">我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，我是div，测试溢出效果，</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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .one{
            /* 占位隐藏 */
            /* visibility: hidden; */
            
            /* 不占位隐藏 */
            display: none;
            background-color: pink;
        }
        .two{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="one">1</div>
    <div class="two">2</div>
</body>
</html>

鼠标悬停 显示二维码

 .code{
      position: absolute;
      left: 50%;
      top: 40px;

      display: none;

      transform: translate(-50%);
    }
    /* 鼠标悬停a 显示二维码图片 */
    .nav li a:hover img{
      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>Document</title>
    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: pink;

            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div>
        <img src="../img/九号平衡车.png" alt="">
    </div>
</body>
</html>

HTML笔记.zip

  1. 1
  2. ...
  3. 6
  4. 7
  5. 8
  6. 9