HTML+CSS

前端知识点

前端知识点

网页最主要由3部分组成：结构、表现和行为。网页现在的标准时W3C，目前的模式是HTML、CSS和Javascript。

三部分都是做什么的

1.HTML是什么？

HTML，超文本标记语言，简单来说，网页就是用HTML语言制作的。HTML是一种描述性语言，是一门非常简单的语言。

2.CSS

CSS，全称“层叠样式表”。

3.JavaScript

JavaScript是一种脚本语言。

4.这三者究竟是干什么的？

HTML定义网页的结构
CSS定义网页的表现
Javascript定义页面的行为

HTML

HTML简介

HTML，全称“超文本标记语言”，它是一种用于创建网页的标记语言。标记语言是一种将文本以及文本相关的信息结合起来，展现出关于文档结构和数据处理的计算机文字编码。文本相关的信息与文本结合在一起，但是使用markup标记。

举一个通俗的例子，就是一段文本，不但有该文本真正需要传递给读者的信息，更有描述该段文本中各部分文字的情况的信息，如下：

<问题>
    <问题标题>我是不是最帅的？
    <问题描述>这只是我自己说的

<回答>
    <回答者>二狗子
    <回答者简介>我就是二狗子
    <回答内容>你说什么就是什么啦!
<回答>
    <回答者>阿拉斯加
    <回答者简介>我是阿拉斯加，我最爱斯家
    <回答内容>最帅的肯定是我阿拉斯加了

这个是我们自己定义好的标记语言，这段标记语言中，包括了文档本身的信息，也包括了文档的结构和各部分的作用。但是HTML是世界通用的，用于描述一个网页的信息和标记语言，我们使用的浏览器具有将HTML文档渲染并展示给用户的功能。将上面那段标记语言翻译成HTML，大概就是这样：

<header>
    <h1>我是不是最帅的？</h1>
    <p>这只是我自己说的</p>
</header>
<div>
    <div>
        二狗子<span>,我就是二狗子</span>
    </div>
    <p>你说什么就是什么啦!</a></p>
    
    <div>
        阿拉斯加<span>,我是阿拉斯加，我最爱斯家</span>
    </div>
    <p>最帅的肯定是我阿拉斯加了</a></p>
</div>

我们写好的HTML文件最终都会运行在浏览器上，由浏览器解析。

HTML标签介绍

什么是标签呢？

1.在HTML中规定标签使用英文的尖括号`<` 和 `>`包起来，例如：`<html>`,`<p>`等等
2.HTML中的标签对通常是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，例如：`<p>`表示标签的开始，可以在里面写内容，而`</p>`则代表着标签的结尾
3.标签之间是可以嵌套的，例如：div标签里嵌套p标签<div><p></p></div>
4.HTML标签是不区分大小写的，比如`<h1>`和`<H1>`是不一样的，但是建议都用小写

HTML文档结构

一个HTML文件是有自己固定的结构的

<!DOCTYPE HTML>
<html>
    <header></header>
    <body></body>
</html>

QQ截图20180816100721

让我们来解释下上面的代码：

首先，<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。

<html>和</html>称为根标签，所有的网页标签都在<html></html>中
<head>和</head>标签用于定义文档的头部，它是所有头部元素的容器。常见的头部标签有：<title>,<script>,<style>,<link>和<meta>等标签
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>,<p>,<a>,<img>等网页内容标签，在<body>标签中的内容最终会在浏览器中显示出来

HTML注释

无论是什么编程语言，都要养成良好的注释习惯，HTML中注释的格式

<！--这是是注释的内容-->  # ctrl + /

并且我们习惯了用注释的标签去包裹HTML代码，如

<！--xx部分的开始-->
    这里存放xxx部分的代码
<！--xx部分的结束-->

HTML注释的注意事项：

1. HTML注释不支持嵌套
2.HTML注释不能卸载HTML标签中

head标签相关的内容

我们首先来介绍一下head标签的主要内容和作用，文档的头部描述了文档的各种属性和信息，包括文档的标题、编码方式以及URL等信息，这些信息大部分是用于提供索引、辨认和其他方面的应用等。以下的标签是用在head标签中：

<head lang='en'>
    <title>标题信息</title>
    <meta charset='utf-8'>
    <link>
    <style type='text/css'></style>
    <script type='text/javascript'></script>
</head>

title标签

title标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中。可以把它堪称是一个网页的标题。主要是用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。
接下来我们就做一个小练习，来看看什么是title标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>泰然城</title>
</head>
<body>

</body>
</html>

将上面的文件保存，然后用浏览器打开，就能看到下面的内容
QQ截图20180816124111
由于是pycharm编写的，所以图标自然就是pycharm了

meta标签

元素可提供有关页面的原信息，针对搜索引擎和更新频率的描述和关键字。

标签位于文档的头部，不包含任何内容。

提供的信息用户是不可见的。

meta标签的两个属性：http-equiv,name

http-equiv属性

它的作用是向浏览器传达一些有用的信息，帮助浏览器正确的显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值：

<!--重定向 2 秒后跳转到对应的网址，注意分号-->
<meta http-equiv='refersh' content='2;URL=http://www/baidu.com'>

<!--指定文档的内容类型伪html，编码类型为utf-8-->
<meta http-equiv='Content-Type' content='text/html;charset='utf-8' />

<!--告诉IE浏览器以最高级别模式渲染当前网页-->
<meta http-equiv='x-ua-compatible' content='IE=edge'>

name属性

主要用于页面的关键字和描述，是写给搜索引擎看的，关键字之间可以有多个，需要用,;隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的：

<meta name='keywords' content='meta总结,html meta,meta属性,meta跳转'>
<meta name='description' content='泰然城'>

其他标签

<!--标题-->
<title>泰然城</title>

<!--网站的图标，就比如刚刚我们说pycharm的图标，也是可以更换的-->
<link rel='icon' herf=fav.ico>

<!--定义内部样式表-->
<style></style>

<!--引入外部样式表-->
<link rel='stylesheet' href='index.css'>

<!--定义javascript代码或引入javascript文件-->
<script src='myscript.js'></script>

body标签

想要在网页上展示出来的内容一定要放在body标签中。让我们来举例看一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>body标签</title>
</head>
<body>
    <h1>海燕</h1>
    <p>在苍茫的大海上，</p>
    <p>狂风卷集着乌云。</p>
    <p>在乌云和大海之间，</p>
    <p>海燕像黑色的闪电，</p>
    <p>在高傲地飞翔。</p>
</body>
</html>

打开浏览器查看效果：
QQ截图20180816130106

常用标签一

h1-h6

h1-h6标签可定义标题。h1定义最大的标题。h6定义最小的标题。
h1-h6的默认样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>h1-h6的默认样式</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

打开浏览器查看一下效果：
QQ截图20180816130802

段落标签P

定义段落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p标签</title>
</head>
<body>
    <p>小泰良品 珍珠白系列化妆刷套装8支装 </p>
    <p>化妆刷套装8支装，内含粉底刷/高光刷/眼影刷/散粉刷/腮红刷/眉粉刷/唇刷/睫毛卷</p>
    <p>参考价 ¥ 129.00</p>
</body>
</html>

打开浏览器查看效果
QQ截图20180816131120

如果此时我们希望在这段文字中特别强调某几个字，这个时候就需要用到<em>或<strong>标签，让我们来看看

<p>小泰良品 <strong>珍珠白系列化妆刷套装</strong>8支装 </p>
<p>化妆刷套装8支装，内含粉底刷/高光刷/眼影刷/散粉刷/腮红刷/眉粉刷/唇刷/睫毛卷</p>
<p>参考价 ¥ 129.00</p>

打开浏览器查看效果
QQ截图20180816131413

是不是特别的有意思呢？还有很多文本样式标签呢

1.<b></b>：加粗
2.<i></i>：斜体
3.<u></u>：下划线
4.<sup></sup>：上标
5.<sub></sub>：下表
6.<em>：表示强调，会用斜体表示
7.<strong>：表示更强烈的强调，会用粗体来表示

浏览器展示特点：

1.跟普通文本一样，但我们可以通过css来设置当前段落的样式

2.块级元素，独占一行

超链接标签a

超级链接<a>代表一个链接点。它的作用是把当前位置的文本或图片链接到其他的界面、文本或图像，要说的不多直接写吧：

<!--在很多时候我们都是通过点击一个东西跳转到另一个界面中，现在你就可以做到了-->
<!--
    在这段代码中，其中href代表即将跳转的地址
        target:_blank：在新的网站在打开链接地址
               _self：在当前网站打开链接地址
        title：代表鼠标悬停时显示的标题
-->
<body>
    <a href="http://www.baidu.com" target="_blank" title="这是百度首页">点击跳转到百度</a>
</body>

<!--利用a标签下载东西-->
<a href="./file.zip">下载文件</a>

<!--利用a标签打开邮箱-->
<a href="xiaoyafei@aliyun.com"></a>

<!--我们经常可以看到跳转到顶部的字样，现在你也可以了-->
<a href='#'>跳转顶部</a>

<!--返回某个ID，意思就是一个网页太多内容，可以通过点击一个链接标签，返回到链接的身上去，这个演示的效果不太明显-->
<p style="height: 2000px;" id="s1">这里是段落</p>
<a href="#s1">跳转到ID</a>

<!--
    javascript:alert(点击了a标签)表示在触发<a>默认动作时，执行一段javascript代码
    javascript:;表示什么都不执行
-->
![QQ截图20180816135026](299CDDFEB67940B0A5C8BF4320F37537)

列表标签 ul ol

网站页面上展示一些列表相关的内容，比如说物品列表、人名列表都可以使用标签来展示。通常后面和<li>标签一起用，每条li表示列表的内容

<ul>：无序列表

<ol>：有序列表

<ul>
    <li>姓名</li>
    <li>年龄</li>
    <li>职业</li>
    <li>出生年月</li>
</ul>

<ol>
    <li>姓名</li>
    <li>年龄</li>
    <li>职业</li>
    <li>出生年月</li>
</ol>

打开浏览器，查看效果
QQ截图20180816135841

ol标签的属性

type：列表标识的类型

1：数字
a：小写字母
A：大写字母
i：小写罗马字符
I：大写罗马字符

ul标签的属性

type:列表表示的类型

disc：实心圆
circle：空心圆
square：实心矩形
none：不显示标识

随便举个例子来看一下

<ul type="none">
    <li>姓名</li>
    <li>年龄</li>
    <li>职业</li>
    <li>出生年月</li>
</ul>

打开浏览器查看一下
QQ截图20180816140456

盒子标签div

<div>可以定义文档的分区，<div>标签可以把文档分割成独立的、不同的部分，让我们看一下淘宝商城首页，我划分一下大致就明白了
QQ截图20180816140940
所有被我用方框框起来的都是一个比较大的div，那么现在你就能明白 div标签为什么能把文档分割开来了吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div标签</title>
</head>
<body>
    <div id="warp">
        <div class="para">
            <p style="height: 1000px" id="p1">小泰良品</p>
        </div>
        <div class="anchor">
            我是普通的文本
            <h1>
                <a href="http://www.baidu.com" target="_blank" title="点击跳转">跳转到百度</a>
                <a href="xiaoyafei@aliyun.com">联系我们</a>
                <a href="#">跳转到顶部</a>
                <a href="#p1">跳转到小泰良品</a>
            </h1>
        </div>
        <div class="list">
            <ul type="circle" >
                <li>我的账户</li>
                <li>我的订单</li>
                <li>我的优惠券</li>
                <li>退出</li>
            </ul>
            <ol type="a" >
                <li>我的账户</li>
                <li>我的订单</li>
                <li>我的优惠券</li>
                <li>退出</li>
            </ol>
        </div>
    </div>
</body>
</html>

上面的代码可以看做成下面的层次结构

<div id='warp'>
    <div class='para'></div>
    <div class='anchor'></div>
    <div class='list'></div>
</div?

我们将文档放在一个父级的div中，它里面包含三块div区域，浏览器查看效果，你会发现每一个小块区域都是独占一行的，所以div是块级元素，另外，每块区域表示独立的一块，id属性和class属性其实很简单，你可以把它看成给这个区域起的名字，id是唯一的，一个页面中不能有相同的id，class可以设置同样的属性值，并且可以设置多个

图片标签img

一个网页中除了有文字，还会有图片，我们使用<img>标签在网页中插入图片

语法：<img src='图片地址' alt='图片加载不出来时显示的内容' title='提示信息'

注意：

src设置的图片的地址可以是本地的也可以是网络上的
图片的格式可以是png、jpg、gif
alt属性的值会在加载图片失败时显示在网页上
还可以为图片设置宽度和高度，不设置的话就是默认宽度和高度
与行内元素在一行内显示
可以设置宽度和高度
span标签可以单独摘出某个内容，结合CSS设置相应的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签</title>
</head>
<body>
    <div>
        <span>与行内元素展示的标签</span>
        <span>与行内元素展示的标签</span>
        <img src="" alt="小泰良品" style="height: 80px; 120px;">
        <img src="" alt="优驷卡" style="height: 80px; 120px;">
    </div>
</body>
</html>

打开浏览器查看一下效果，这里就是没有这张图片

其他标签

换行标签br

<br>标签用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时回车一样

分割线hr

<hr>标签用来在HTML页面中创建水平分割线，通常用来分割内容

特殊符号

浏览器在显示的时候会把多个空格或者换行移除掉，只显示一个换行或空格，如果想用到多个空格的话，我们需要使用特殊符号

常用的特殊字符

内容	代码
空格	` `
>	`>`
<	`<`
&	`&`
￥	`¥`
版权	`©`
注册	`®`

常用标签二

表格标签table

如图，有一个表格，我们要用table标签来实现

表格由<table>标签来定义。每个表格都有很多行很多列，每个表格均有若干行用<tr>标签定义，每行被分割的单元格用<td>标签表示（每个单元格的数据）,数据单元格可以包含文本、图片、列表等等

那么，现在就让我们写一下这个课程表吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程表</title>
</head>
<body>
    <table border="1" cellspacing="0">
        <tr>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>化学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>化学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>化学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>化学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>化学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
    </table>
</body>
</html>

打开浏览器查看一下效果

接下来还有一个表格

那么这个表格该如何实现呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程表</title>
</head>
<body>
    <table border="1" cellspacing="0">
        <thead>
            <td></td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
        </thead>
        <tr>
            <td rowspan="3">上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>化学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>化学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>化学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr>
            <td rowspan="2">下午</td>
            <td>语文</td>
            <td>数学</td>
            <td>化学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>化学</td>
            <td>英语</td>
            <td>生物</td>
        </tr>
        <tfoot>
            <td colspan="6">三年二班课程表</td>
        </tfoot>
    </table>
</body>
</html>

实验效果为：

表单标签form

表单是一个包含表单元素的区域

表单元素是允许用户在表单中输入内容，比如：文本域、输入框、单选框

表单的作用

表单用于显示、手机信息，并将信息提交给服务器

1.语法：

<form>允许出现表单控件</from>

2.属性：

3.表单控件分类：

让我们自己写例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单</title>
</head>
<body>
    <div>
        <form action="http://www/baidu.com" method="get">
            <p>
                <label for="user">用户名：</label>
                <input type="text" name="username" id="user">
            </p>

            <p>
                <label for="pwd">密码：</label>
                <input type="password" name="password" id="pwd">
            </p>

            <p>
                <input type="submit" name="btn" value="提交">
                <input type="reset" name="btn2" value="重写">
            </p>
        </form>
    </div>
</body>
</html>

要讲一下get和POST请求：get请求是默认值，是一种明文提交的方式，所提交的数据可以显示在地址上，安全性比较低，而POST请求是一种隐式请求，它所提交的内容，不会显示在地址栏上

GET请求图：

让我们换一下POST请求，这样就没有了：

表单控件练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单控件</title>
</head>
<body>
    <!--让用户输入用户名，密码，选中所在的城市，以及用户爱好，输入想说的话-->
    <div class="form">
        <form action="http://www.baidu.com">
            <p>
                <label for="username">用户名：</label>
                <input type="text" name="username" id="username">
            </p>
            <p>
                <label for="pwd">密码：</label>
                <input type="password" name="password" id="pwd">
            </p>
            <p>
                性别：
                <input type="radio" name="sex" value="男" checked="">男
                <input type="radio" name="sex" value="女">女
            </p>
            <p>
                <label for="happy">用户爱好：</label>
                <input type="checkbox" name="checkfav" value="吃">吃
                <input type="checkbox" name="checkfav" value="玩">玩
                <input type="checkbox" name="checkfav" value="喝">喝
                <input type="checkbox" name="checkfav" value="乐">乐
            </p>
            <p>
                <label for="">自我介绍：</label>
                <textarea name="" id="" cols="30" rows="10"></textarea>
            </p>
            <p>
                <label for="">来自：</label>
                <select name="sel" id="">
                    <option value="深圳" >深圳</option>
                    <option value="北京" selected>北京</option>
                    <option value="上海" >上海</option>
                    <option value="广州" >广州</option>
                </select>
            </p>
            <p>
                <input type="submit" name="btn" value="提交">
                <input type="reset" name="btn1" value="重写">
            </p>
        </form>
    </div>
</body>
</html>

那么写完了之后，浏览器显示是这样的：

虽然很low，但是满满的成就感！

HTML标签属性

HTML标签可以设置属性，属性一般以键值对的方式写在开始标签中

<div id='i1'>这是一个div标签</div>
<p class='p1 p2 p3'>这是一个段落标签</p>
<a href='http://www.baidu.com'>这是一个链接</a>
<input type='button' onclick='addclick()'></input>

为什么能够设置属性呢？

其实，最终我们这些标签都会经过CSS去梅花，通过javascript来操作，那么这些标签就可以堪称是一个对象，那么对象就有自己的方法和属性。按照上面的input标签，type就是它的属性，onclick就是它的方法

关于标签属性的注意事项：

1. HTML标签除一些特定属性外可以设置自己的属性，一个标签可以设置多个属性，但是要用空格分隔开，多个属性不区分先后顺序
2. 属性值要用引号包裹起来，通常使用双引号
3. 属性和属性值不区分大小写，但是推荐小写

HTML标签分类

在之前我们也学过了很多的标签，但是你知道吗?HTML标签可以分为三种不同的类型：块状元素，行内元素，行内块状元素

常用的块状元素：

div p h1 h6 ol ul table form li

常用的行内元素：

a span br hr i em strong label

常用的行内块状元素：

img input

块级元素特点：display:block;

每个块级元素都从新的一行开始，而且后面跟着的元素也另起一行
元素的告诉、宽度、行高以及顶和底边距都可设置
元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度

啥也不说了，让我们来实验说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级元素</title>
</head>
<body>
    <div>
        <p>这是第一个段落</p><p>只是第二个段落</p><a href="http://www.baidu.com">点击跳转到百度</a>
        <p style="height: 50px">这就是第三个段落了</p>
        <p>
            <a href="http://jd.com">京东商城</a>
            <span>111111111111</span>
            <strong>北京真大啊</strong>
        </p>
    </div>
</body>
</html>

打开浏览器查看效果h

行内元素特点：display:inline;

和其他元素都在一行上
元素的高度、宽度及顶部和底部边距不可设置
元素的高度就是它包含的文字或图片的宽度，不可改变

实践是检验真理的唯一标准：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内元素</title>
</head>
<body>
    <div>
        <a href="http://www.baidu.com" style="height: 100px">跳转到百度</a>
        <span>这里...还有那里...</span>
        <strong>啊啊啊，我很开心啊</strong>
    </div>
</body>
</html>

打开浏览器查看效果

行内块状元素特点：display:block-inline;

和其他元素都在一行
元素的高度、宽度、行高以及顶部和底部边距都可以设置

少说废话多写实验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内块状元素</title>
</head>
<body>
    <div>
        <from>
            <label for="user">用户名：</label>
            <input type="text" name="username" id="user" style='background-color: gold; 400px;'>
        </from>
    </div>
</body>
</html>

打开浏览器查看效果：

和行内元素在同一行，同时修改了输入框的宽度

标签嵌套规则

块内元素内可嵌套行内元素或者某些块级元素，但是行内元素却不能包含块级元素，行内元素只能包含其他的行内元素

块级元素不能放p标签里面

CSS

为什么需要CSS?

一个字丑！

CSS的出现解决了下面两个问题:

将HTML页面的内容与样式分离
提高web开发的工作效率

什么是CSS

CSS是指层叠样式表，样式定义如何显示HTML元素，样式通常又会存在于样式表中。也就是说把HTML元素的样式都同意收集起来写在一个地方或一个CSS文件中

所谓的层叠，你可以理解成堆盘子，最下面的碟子什么颜色你不知道，但是你肯定知道最后一个碟子的颜色，那么对于CSS来说，就相当于，我是上面的碟子，下面同样还有我的碟子，等我把上面的碟子拿走你就知道下面的碟子是什么样子了。

CSS的优势

内容与表现分开了
网页的表现同意，容易修改
丰富的样式使页面布局更加灵活
减少网页的代码量，增加网页浏览器的速度，节省贷款
运用独立页面的CSS，有利于网页被搜索引擎搜录

CSS基础语法

CSS语法可以分为两部分:

1.选择器

2.声明

声明是由属性和值组成的，多个声明之间用分号，例如：

选择器{
    声明1；
    声明2；
    声明3；
}

<!--更换成实际的代码-->
h1{
    font-size:20px;
    color:green;
}

CSS的三种导入方式

内联样式
行内样式
外部样式
其中外部样式还分为链接式与导入式

<link rel="stylesheet" href="" type="text/css">
<!--其中：
        href里的东西成为文本路径
        stylesheet代表使用外部样式表
        type代表文件类型，可写可不写
-->

内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的3种导入方式</title>
    <style type="text/css">
        h1{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <h1>这是我的段落</h1>
    </div>
</body>
</html>

行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的3种导入方式</title>
</head>
<body>
    <div>
        <h1 style="color: green;">这是我的段落</h1>
    </div>
</body>
</html>

链接式

<!--首先需要在当前目录下创建 01 index.css文件，需要使用link标签
    在01 index.css中写的样式表将会被链接进来，对于h1同样会有效果
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的3种导入方式</title>
    <link rel="stylesheet" href="./01%20index.css">
</head>
<body>
    <div>
        <h1>这是我的段落</h1>
    </div>
</body>
</html>

导入式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的3种导入方式</title>
    <style type="text/css">
        @import url('01 index.css');
    </style>
</head>
<body>
    <div>
        <h1>这是我的段落</h1>
    </div>
</body>
</html>

使用链接式与导入式的区别：

1.link标签属于XHTML，而@import式属性css2.1
2.使用link链接的css文件先加载到网页当中，再进行便宜显示
3.使用@import 导入的css文件，客户端先显示HTML结构，再把CSS文件加载到网页当中
4.@import是属于css2.1特有的，对于不兼容的浏览器来说是无效的

基本选择器

基本选择器包括：

标签选择器
类选择器
ID选择器
通用显示器

标签选择器

顾名思义，标签选择器就是根据标签来选中，例如div标签、p标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style type="text/css">
        p{
            font-family: 微软雅黑;
            color: green;
        }
    </style>
</head>
<body>

    <div>
        <p>这是一个段落</p>
        <p>这个真的不是段落</p>
    </div>
</body>
</html>

打开浏览器查看效果

那么标签选择器的特点是：

标签选择器可以选中所有的标签元素
不管标签藏的有多深，都能够所中的，都能选中所有的而不是某一个，所以说标签选择器选中是共性，而不是特有的属性

缺点：

优点就是缺点，想对个别的标签进行定制的时候，就不能如愿以偿

ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style type="text/css">
        #myDiv{
            background-color: #666666;
        }
        #myP{
            font-family: 微软雅黑;
            font-size: 35px;
            color: red;
        }
        #myH{
            color: green;
        }
    </style>
</head>
<body>

    <div id="myDiv">
        <p id="myP">我是一个段落</p>
        <h1 id="myH">我是H1标签</h1>
    </div>
</body>
</html>

打开浏览器查看效果

ID选择器，就是根据ID去更改属性，而ID是整个页面中唯一的，所以可以定制化样式
特点：

同一个页面中ID不能重复,因为这是规则
如果不给父级元素设置高度，子元素就会将父元素撑开
任何的标签都可以设置ID，但是ID的命名需要规范

类选择器

python中定义类是用class，那么类选择器选中的就是这个class的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style type="text/css">
        .p1{
            font-family: 微软雅黑;
            font-size: 20px;
        }
        .p2{
            color: red;
            font-family: 宋体;
        }
        .s1{
            font-size: 30px;
            font-family: 黑体;
        }
    </style>
</head>
<body>
    <div>
        <p class="p1">我是第1个段落</p>
        <p class="p2">我是第2个段落</p>
    </div>
    <div>
        <strong class="s1">小泰良品</strong>
    </div>
</body>
</html>

打开浏览器查看效果

类选择器的特点：

类是可以重复使用的
同一个标签中可以携带多个类，用空格隔开

类的使用完全可以决定一个工程师CSS的水平，不信你看看这道题，给你10秒钟思考一下怎么写？

由于上面刚刚讲了类选择器，可能大家就会一个类一个类的去写，但是我的方法是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类的小练习</title>
    <style type="text/css">
        .gr{
            color: green;
        }
        .big{
            font-size: 30px;
        }
        .un{
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div>
        <p class="gr big">段落1</p>
        <p class="gr un">段落2</p>
        <p class="big un">段落1</p>
    </div>
</body>
</html>

打开浏览器查看效果

这样，会不会节省了代码量了

通用选择器

所谓的通用选择器，其实就是通配符，用*去选择所有的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用选择器</title>
    <style type="text/css">
        *{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>
            这是第一个段落
        </p>
        <p>
            这是第二个段落
        </p>
    </div>
</body>
</html>

打开浏览器查看效果

通用选择器用的很少，因为它的本身性能很差

高级选择器

所谓的高级选择器，分为五大类

并集选择器(组合选择器)：多个选择器通过逗号连接而成，同时声明多个风格相同样式
交集选择器：由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能由空格，第一个选择器必须是标签选择器，第二个必须是类选择器或者ID选择器
后代选择器：儿子、孙子；外层的选择器写在前面，内层的选择器写在后面，之间用空格分割，标签嵌套时，内层的标签成为外层标签的后代
子元素选择器：儿子，女儿，通过>链接在一起

后代选择器

因为HTML元素可以嵌套，所以我们可以从某个元素的后代查找特定元素，并设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
        div p,ol{  # 也可以用类选择器，也可以div div ol{}
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>我是一个段落</p>
        <div>
            <ol>
                <li>我的电脑</li>
                <li>网络</li>
                <li>回收站</li>
            </ol>
        </div>
    </div>
</body>
</html>

打开浏览器查看效果

后代选择器就可以理解成我的儿子、孙子、孙女这样的，在代码上体现就是在div的后代中找p，ul标签，设置字体的颜色，到底是怎么选的，是由浏览器去决定的

子元素选择器

在xxx元素的直接下代找到xxx元素，并且设定属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style type="text/css">
        div>p{
            color: red;
        }
        div>ul{
            color: green;
        }
    </style>
</head>
<body>
    <div>
        <p>我是一个元素</p>
        <div>
            <ul>
                <li>我的电脑</li>
            </ul>
        </div>
    </div>
</body>
</html>

每一个div都可以想当成一个父级，然后去子类找到p或者ul标签，然后进行修改属性

效果

交集选择器

选中两个标签的交集的部分进行属性的修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <style type="text/css">
        h3{
             300px;
        }
        .active{
            color: red;
        }
        h3.active{
            background-color: #44ff9e;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <h3 class="active">我是H3标题</h3>
        </p>
    </div>
</body>
</html>

图解：

并集选择器

同时声明多个风格相同样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style type="text/css">
        a,h4{
            font-size: 30px;
            color: red;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">点我</a>
        <p>
            <h4>我是H4标题</h4>
        </p>
        <h4>我是第二个H4标题</h4>
        <p>
            <a href="#">百度</a>
        </p>
    </div>
</body>
</html>

效果图

属性选择器

根据带有制定属性的元素，或选中带有指定属性和值的元素，属性选择器通常用在表单中比较频繁，下面来举例演示一下

<div>
    <form action="">
        <label for="user">用户名：</label>
        <input type="text" name="username" id="user">
        <label for="pwd">密码：</label>
        <input type="password" name="password" id="pwd">
        <label for="vip1">vip1</label>
        <label for="vip2">vip2</label>
        <label for="user1">user1</label>
        <label for="user2">user2</label>
    </form>
</div>

上面的代码就是一个表单，因为属性选择器涉及较多，分开来讲

<!--根据属性查找-->
label[for]{
    color: red;
}

效果图(发现所有带有for属性的都修改了颜色)

<!--根据属性和值查找-->
label[for=pwd]{
    color: red;
}

效果图（发现只有for属性为pwd的修改了颜色）

<!--以xxx开头-->
label[for^=user]{
    color: yellow;
}

效果图（发现所有以user开头的都变成了黄色）

<!--以xxx结尾-->
label[for$='2']{
    color: yellow;
}

效果图（for元素的值以2结尾的）

伪类选择器

伪类选择器大多数使用在链接标签身上的

<div class="box">
    <ul>
        <li class="item1">
            <a href="#">张三</a>
        </li>
        <li class="item2">
            <a href="#">李四</a>
        </li>
        <li class="item3">
            <a href="#">王二</a>
        </li>
        <li class="item4">
            <a href="#">麻子</a>
        </li>
    </ul>
</div>

1.没有访问过的超链接样式

.box ul .item1 a:link{
    color: red;
}

效果图，没有被访问过就变成了红色

2.被访问过的超链接样式

.box ul .item2 a:visited{
    color: yellow;
}

效果图，被访问过就编程了黄色

3.浏览器悬停时的超链接样式

.box ul .item3 a:hover{
    color: red;
}

效果图：鼠标悬停时字体变成红色

4.鼠标按住时的超链接样式

.box ul .item4 a:active{
    color: green;
}

效果图：按住鼠标字体变成绿色

5.input输入框获取焦点时样式

<li class="item5">
    <form action="">
        <input type="text">
    </form>
</li>

.box ul .item5 input:focus{
    outline: none;
    background-color: gold;
}

效果图：当鼠标点击时，输入框变颜色

盒模型介绍

HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用的空间，这个模型称为盒子模型。盒子模型通过四个边界来描述：

margin:外边距
border：边框
padding:填充
content:内容

接下来让我们简单的查看一个盒子模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*清除默认样式*/
			*{
				padding: 0;
				margin: 0;
			}
			
			div{
				 300px;
				height: 300px;
				
				padding: 30px;
				border: 3px solid red;
				margin: 20px;
			}
		</style>
	</head>
	<body>
		<div>
			这是content
		</div>
	</body>
</html>

刷新浏览器查看一下效果：

认识padding

所谓的padding，就是内边距，指的是content到border的距离，而且padding的区域是有背景颜色的，并且颜色和content区域的颜色一样，也就是说：background-color可以填充所有的border以内的区域。

举个例子说明一个你们就看懂了:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*清除默认样式*/
			*{
				padding: 0;
				margin: 0;
			}
			
			div{
			    <!--设置宽度、高度、背景颜色、填充以及边框-->
				 500px;
				height: 500px;
				background-color: red;
				padding: 30px;
				border: 3px solid green;
			}
		</style>
	</head>
	<body>
		<div>
			这是content
		</div>
	</body>
</html>

从这张图我们可以看出来这棕色部分就是padding填充，background-color可以填充所有的border以内的区域，但是不会包含border

清除标签默认的padding和margin

是什么意思呢？让我们看一个小例子就明白了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				 300px;
				height: 50px;
				background-color: red;
				padding: 10px;
				border: 3px solid green;
				margin: 1px;
			}
		</style>
	</head>
	<body>
		<div>
			这是content
		</div>
	</body>
</html>

那在浏览器中那个查看是如何的呢？

棕色区域为padding填充，我们给了10个像素，但是margin外边距，我们就给了一个像素，那么你有没有发现 margin的1px和padding的10px都是差不多的呢？

所以，我们一般在做网站的时候，需要清除默认的padding 和 margin，怎么做呢？上面已经说道了

/*清除默认样式*/
*{
	padding: 0;
	margin: 0;
}

我们现在把这句话加上去，然后看看如何？

是不是此时1px和10px的差距就出来了，而且也是贴着浏览器的边去渲染的。

padding有四个方向，所以我们可以分别来描述这四个方向的padding，有两种方法：

写小属性
写综合属性用空格隔开

写小属性

/*小属性的写法*/
padding-top: 20px;
padding-bottom: 10px;
padding-left: 30px;
padding-right: 40px;

这样，就单独对每个方向设置了属性：

写综合属性

<!--其中包括 写4个值  写3个值  写2个值  写1个值-->

/*写综合属性*/

/*如果写四个值 则是分别对 上-右-下-左  四个方向分别设置*/
/*padding: 20px 30px 40px 50px;*/

/*如果写三个值  则分别是对 上 -左右 - 下 分别设置*/
/*padding: 20px 50px 15px;*/

/*如果写两个值 则分别是对  上下- 左右分别设置*/
padding: 20px 50px;

/*如果写一个值  则分别是所有方向都设置*/

认识border

border:边框，同时边框有3个要素：粗细，线型，颜色

border的写法同样有两种，一种是按照三要素去写，一种是按照方向去写

按照三要素写

/*
 * 设置边框的粗细
 * style：设置线型 有solid dotted double dashed
 * color:颜色
 */
border- 4px;
border-style: dotted;
border-color: red;

按照方向去分

/*按照方向去分*/
border-top- 3px;
border-top-style: solid;
border-top-color: red;

border-bottom- 4px;
border-bottom-style: dotted;
border-bottom-color: green;

border-left- 5px;
border-left-style: double;
border-left-color: yellow;	
 			
border-right- 6px;
border-right-style: dashed;
border-right-color: purple;

如果想要让左边的border属性消失，那么需要：

border-left:none;

那么想让全部的border属性都消失，就需要使用：

border:none;

认识mrgin

首先要明确一点的是：margin所表示的是距离，而不是宽度。

margin也可以通过方向的形式来写属性，和padding一样，我就不重复了

标准文档流

说到标准文档流，就需要讲到我们的web和ps，我们在设计原型图的时候，基本上用到了PS，那么对于PS来说，我们的设计师想在哪添加东西就可以在哪添加东西，但是对于我们Web界面来说，能做到想在哪加就可以在哪加吗？当然是不可能的，我们的web网页制作是一个流的概念，你可以当做成流水，也就是自上而下制作的，而设计软件的，想怎么画就怎么画。

标准文档流的微观现象

在标准文档流下，有以下微观现象：

空白折叠现象
高矮不齐，底边对齐
自动换行

空白折叠现象
所谓的空白折叠现象，就是不管你在网页中有多少的空格或者空行，都只看成一个

<p>文本                                   文本  </p>

我们两个文本间有很多空格，但是在网页中只会显示一个：

所以，我们想显示多个空格的话，就需要添加多个 

高矮不齐，底边对齐
在一行中，不管你的文字、图片有多大，那么底边始终都是对齐的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			span{
				font-size: 40px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<p>文本文本文本文本文本文本文本文本<span>姚明</span>文本文本文本文本</p>
		</div>
	</body>
</html>

底边始终都是对齐的

自动换行
所谓的自动换行，意思就是当你一行东西不够时，就给你自动换入下一行，也就是换到第二行去

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			span{
				font-size: 40px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<p>
				文本文本文本文本文本文本文本文本
				<span>姚明</span>文本文本文本文本
				<img src="../day30 前端/1.png" alt="" />
				<img src="../day30 前端/1.png" alt="" />
				<img src="../day30 前端/1.png" alt="" />
				<img src="../day30 前端/1.png" alt="" />
			</p>
		</div>
	</body>
</html>

当一行内容已经不够显示，那么会自动到下一行中

行内元素与块级元素的转换

行内元素和块级元素详看HTML中标签嵌套规则

块级元素div是可以设置宽度和高度的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				 100px;
				height: 30px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			内容
		</div> 

	</body>
</html>

如果想修改成行内元素，应该怎么做？看代码结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				display: inline;
				 100px;
				height: 30px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			内容
		</div> 
		<span>张三</span>
		<span>李四</span>
	</body>
</html>

那么此时这个div就变成了这个样子

div标签和span都在一行中显示了

那么我们同样也可以让行内元素转换成为块元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				display: inline;
				 100px;
				height: 30px;
				border: 1px solid red;
			}
			span{
				 50px;
				height: 30px;
				display: block;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			内容
		</div> 
		<span>张三</span>
		<span>李四</span>
	</body>
</html>

效果图如下：

附加的两个属性：

如果我们想给这个属性隐藏了，那么我们可以使用

visibility: hidden;   # 但是这样的话虽然会隐藏了，但是还会占据当前的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				display: inline;
				 100px;
				height: 30px;
				border: 1px solid red;
			}
			.span1{
				 50px;
				height: 30px;
				display: block;
				background-color: yellow;
				visibility: hidden;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			内容
		</div> 
		<span class="span1">张三</span>
		<span class="span2">李四</span>
	</body>
</html>

中间的span1虽然被隐藏了，但是还是会占据这个位置，所以我们可以使用

display: none;  # 隐藏，不会占据位置

李四是因为没有给这个修改成块级元素造成的同行

布局属性_浮动

浮动是CSS布局里使用最多的一个属性，它所能造成的效果就是：两个元素并排了，并且能够设置宽度和高度，首先来看一下小米商城：

红色的是div盒子，那么黄色的是子盒子，那有的盒子在左边有的在右边，那么就是浮动做到的。

设置方法：float:left;(向左浮动)

那么我们在玩好浮动之前，我们需要知道浮动的四个特性：

浮动的元素脱标
浮动的元素相互贴靠
浮动的元素有"字围效果"
浮动的元素紧凑

浮动的元素脱标
所谓的脱标，就是脱离标准流，那么此时这个元素就不会web界面中占据位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			.box1{
				 200px;
				height: 200px;
				background-color: red;
				float: left;
			}
			.box2{
				 300px;
				height: 300px;
				background-color: green;
				float: left;
			}
			.box3{
				 700px;
				height: 350px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			小红
		</div>
		<div class="box2">
			小绿
		</div>
		<div class="box3">
			
		</div>
	</body>
</html>

此时我们并没有对box3设置浮动，你看下结果是什么样子？

意思就是小红和效率已经脱离了标准文档流，不受web网页的限制，那么小黄就会把它自己当做成第一个元素去向body元素身边靠。

其次，脱标的元素都是可以设置宽度和高度的，看一看span

浮动的元素相互贴靠

所谓相互贴靠，我们可以假设body界面宽度有1200px，此时三个div都设置了左浮动，宽度分别为:200px 400px 400px，那么刚好，这三个盒子会刚好的靠在一起

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			.box1{
				 200px;
				height: 200px;
				background-color: red;
				float: left;
			}
			.box2{
				 300px;
				height: 300px;
				background-color: green;
				float: left;
			}
			.box3{
				float: left;
				 700px;
				height: 350px;
				background-color: yellow;
			}
			span{
				float: left;
				 50px;
				height: 30px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			小红
		</div>
		<div class="box2">
			小绿
		</div>
		<div class="box3">
			
		</div>
		
		<span>111</span>
		<span>222</span>
	</body>
</html>

但是当body的宽度不够这三个div的宽度的时候，那么小黄就会靠向小红

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			.box1{
				 200px;
				height: 500px;
				background-color: red;
				float: left;
			}
			.box2{
				 300px;
				height: 300px;
				background-color: green;
				float: left;
			}
			.box3{
				float: left;
				 1400px;
				height: 350px;
				background-color: yellow;
			}
			span{
				float: left;
				 50px;
				height: 30px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			小红
		</div>
		<div class="box2">
			小绿
		</div>
		<div class="box3">
			
		</div>
		
		<span>111</span>
		<span>222</span>
	</body>
</html>

如果小红的宽度都不足以支持小黄的宽度的时候，那么此时小黄就会往body靠

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			.box1{
				 200px;
				height: 500px;
				background-color: red;
				float: left;
			}
			.box2{
				 300px;
				height: 300px;
				background-color: green;
				float: left;
			}
			.box3{
				float: left;
				 1700px;
				height: 350px;
				background-color: yellow;
			}
			span{
				float: left;
				 50px;
				height: 30px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			小红
		</div>
		<div class="box2">
			小绿
		</div>
		<div class="box3">
			
		</div>
		
		<span>111</span>
		<span>222</span>
	</body>
</html>

这就是浮动的元素相互贴靠

浮动的元素有字围效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			img{
				float: left;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="../day30 前端/1.png" />
			<p>
				泰然金融-泰和网(www.trc.com) - 行业领先的网络借贷信息中介机构,为理财用户提供便捷、安全、透明、高效、低门槛的互联网金融综合服务,由银行提供资金存管,安全
				泰然金融-泰和网(www.trc.com) - 行业领先的网络借贷信息中介机构,为理财用户提供便捷、安全、透明、高效、低门槛的互联网金融综合服务,由银行提供资金存管,安全泰然金融-泰和网(www.trc.com) - 行业领先的网络借贷信息中介机构,为理财用户提供便捷、安全、透明、高效、低门槛的互联网金融综合服务,由银行提供资金存管,安全
				泰然金融-泰和网(www.trc.com) - 行业领先的网络借贷信息中介机构,为理财用户提供便捷、安全、透明、高效、低门槛的互联网金融综合服务,由银行提供资金存管,安全
				泰然金融-泰和网(www.trc.com) - 行业领先的网络借贷信息中介机构,为理财用户提供便捷、安全、透明、高效、低门槛的互联网金融综合服务,由银行提供资金存管,安全
				泰然金融-泰和网(www.trc.com) - 行业领先的网络借贷信息中介机构,为理财用户提供便捷、安全、透明、高效、低门槛的互联网金融综合服务,由银行提供资金存管,安全
				泰然金融-泰和网(www.trc.com) - 行业领先的网络借贷信息中介机构,为理财用户提供便捷、安全、透明、高效、低门槛的互联网金融综合服务,由银行提供资金存管,安全
				泰然金融-泰和网(www.trc.com) - 行业领先的网络借贷信息中介机构,为理财用户提供便捷、安全、透明、高效、低门槛的互联网金融综合服务,由银行提供资金存管,安全
				泰然金融-泰和网(www.trc.com) - 行业领先的网络借贷信息中介机构,为理财用户提供便捷、安全、透明、高效、低门槛的互联网金融综合服务,由银行提供资金存管,安全
				泰然金融-泰和网(www.trc.com) - 行业领先的网络借贷信息中介机构,为理财用户提供便捷、安全、透明、高效、低门槛的互联网金融综合服务,由银行提供资金存管,安全
				泰然金融-泰和网(www.trc.com) - 行业领先的网络借贷信息中介机构,为理财用户提供便捷、安全、透明、高效、低门槛的互联网金融综合服务,由银行提供资金存管,安全
				泰然金融-泰和网(www.trc.com) - 行业领先的网络借贷信息中介机构,为理财用户提供便捷、安全、透明、高效、低门槛的互联网金融综合服务,由银行提供资金存管,安全
			</p>
		</div>
		
		
	</body>
</html>

浮动的元素紧凑

紧凑的意思就是说如果一个浮动的元素，没有设置width，那么就会自动收缩成这个元素的宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			div{
				background-color: red;
				float: left;
			}
		</style>
	</head>
	<body>
		<div>
			泰然金融
		</div>	
	</body>
</html>

使用浮动带来的问题

让我们看一下案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.father{
				 1000px;
			}
			.box1{
				float: left;
				 200px;
				height: 200px;
				background-color: red;
			}
			.box2{
				float: left;
				 300px;
				height: 300px;
				background-color: green;
			}
			.box3{
				float: left;
				 400px;
				height: 400px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="box1">
				
			</div>			
			<div class="box2">
				
			</div>			
			<div class="box3">
				
			</div>
		</div>	
	</body>
</html>

效果图如下：

父元素不设置高度，子元素设置浮动之后，不会撑开父元素的高度,那么此时父盒子没有高度了。如果在次父盒子下面还有一个标准流的盒子，那么就会影响页面的布局。

所以我们为了解决这种浮动带来的问题，我们需要清除浮动。清除浮动的方法：

给父元素添加高度
clean both
伪元素清除法
overflow方法

给父元素添加高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			ul{
				list-style: none;
			}
			div ul li{
				float: left;
				background-color: red;
				 100px;
				height: 40px;
			}
			.box{
				 300px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li>运维部</li>
				<li>技术中心</li>
				<li>人事行政部</li>
				<li>数据中心</li>
			</ul>
		</div>
		<div class="box">
			
		</div>
	</body>
</html>

打开浏览器，效果图为

此时父盒子的高度为0，所以造成了塌陷效果，那么解决的办法就是：

div{
	 400px;
	height: 40px;
}

那么还是有问题的，因为当有一天要调整这个高度的时候，所有的东西都要改变，所以这个不经常用。

clean both
除了给父盒子添加高度之外，还可以使用clear:both，当然这个是在我上学的时候用的最多的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			div{
				 400px;
			}
			ul{
				list-style: none;
			}
			div ul li{
				float: left;
				background-color: red;
				 100px;
				height: 40px;
			}
			.box{
				 300px;
				height: 100px;
				background-color: green;
			}
			.clear{
				clear: both;
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li>运维部</li>
				<li>技术中心</li>
				<li>人事行政部</li>
				<li>数据中心</li>
				<div class="clear">
					
				</div>
			</ul>
		</div>
		<div class="box">
			
		</div>
	</body>
</html>

也就是在一行的结尾，添加一个盒子，用这个盒子来清除浮动，不影响下面的布局

伪元素清除法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			div{
				 400px;
			}
			ul{
				list-style: none;
			}
			div ul li{
				float: left;
				background-color: red;
				 100px;
				height: 40px;
			}
			.box{
				 300px;
				height: 100px;
				background-color: green;
			}
			.clearfix:after{
				content: '.';
				clear: both;
				display: block;
				visibility: hidden;
				height: 0;
			}
		</style>
	</head>
	<body>
		<div class="clearfix">
			<ul>
				<li>运维部</li>
				<li>技术中心</li>
				<li>人事行政部</li>
				<li>数据中心</li>
			</ul>
		</div>
		<div class="box">
			
		</div>
	</body>
</html>

在这个div上添加一个类，然后对这个类选择器做修饰，这种做法在很多时候都是常用的

.clearfix:after{
	content: '.';
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
}

overflow方法
overflow也就是将超出部分隐藏掉

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			div{
				 400px;
			}
			ul{
				list-style: none;
				height: 40px;
				overflow: hidden;
			}
			div ul li{
				float: left;
				background-color: red;
				 100px;
				height: 40px;
			}
			.box{
				 300px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div>
			<ul>
				<li>运维部</li>
				<li>技术中心</li>
				<li>人事行政部</li>
				<li>数据中心</li>
			</ul>
		</div>
		<div class="box">
			
		</div>
	</body>
</html>

overflow属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>over</title>
    <style type="text/css">
        body{
            overflow: auto;
        }
        div{
             300px;
            height: 300px;
            border: 1px solid red;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div>
    <!--
    overflow: visible;  默认的
    overflow: hidden;  内容修建
    overflow: scroll;  能出现滚动条
    overfloe: auto;  能出现滚动条
    overflow: inherit;  继承父级overflow的属性
    -->


    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
    内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>

margin

margin垂直方向塌陷

当两个兄弟盒子设置了垂直方向上的margin，那么就会以较大的为准，这种现象叫做塌陷。浮动的盒子不受影响。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			 
			.box1{
				 200px;
				height: 40px;
				background-color: red;
				margin-bottom: 20px;
			}
			.box2{
				 200px;
				height: 40px;
				background-color: green;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="box1">
				
			</div>
			<div class="box2">
				
			</div>
		</div>
	</body>
</html>

画箭头的这段距离就是50px，这就是塌陷效果。

margin水平居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			div{
				 780px;
				height: 40px;
				background-color: red;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="">
			
		</div>
	</body>
</html>

效果图为：

所谓的auto，就是自动，意思就是当我们设置margin-left:auto;时，那么就是告诉这个盒子，要尽最大的可能往右边靠，反之 margin-right:auto;就是尽可能的往左边靠；当我们这两个属性一起设置的时候，就是既要往左边靠，还要往右边靠，那么就是进可能的中间，就变成了margin:0 auto;

总结：

只有标准流的盒子才能使用margin:0 auto;这个属性，而且必须要设置width，要有明确的width
当一个盒子浮动了或者相对/绝对定位了的话，那么margin:0 auto;就不起作用了
margin:0 auto;是居中盒子而不是居中文本，居中文本需要使用text-align: center;

善于使用父类的padding

我们想实现这个效果

然后我们开始写CSS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.father{
				 400px;
				height: 400px;
				background-color: red;
			}
			.xiongda{
				 100px;
				height: 100px;
				background-color: green;
				margin-left: 20px;
				margin-top: 30px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="xiongda">
				
			</div>
		</div>
	</body>
</html>

然后查看效果图的时候发现：

这个箭头表示的距离就是30px，what，发生什么问题了？因为父盒子是没有border的，那么当子盒子使用margin-top的时候，看上去作用在父盒子身上，实际上子盒子踹的是标准流，也就是将这一行踹上去了（踢了墙一脚，墙不动我动），所以我们需要在父盒子添加一个border

border: 1px solid red;

那么现在，margin踹的就是父盒子了，得到了我们想要的东西。那么既然这样的话，为什么还要说善于使用父类的padding呢？其实给父类添加border属性是一种方法，第二种就是用padding，怎么做的看看代码

.father{
	 380px;
	height: 370px;
	background-color: red;
	padding-top: 30px;
	padding-left: 20px;
}

是不是就突然高大上起来！

文字属性和字体属性

字体属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			div{
				 400px;
				height: 150px;
				border: 1px solid red;
				
				/*设置字体的大小*/
				font-size: 20px;	
				
				/*设置字体的颜色*/
				/*color: red;	*/		
				
				/*设置字体   Arial  这个是备选字体  都没有就是宋体*/
      		    font-family: "Microsoft YaHei UI","宋体","Arial",sans-serif;
				
				/*居中显示*/
				/*text-align: center;*/
				
				text-indent: 2em;
				
				/*模仿a标签  cursor: pointer;表示放到这上面去变成小手*/
				color: blue;
				cursor: pointer;
				text-decoration: underline;
				
			}
		</style>
	</head>
	<body>
		<div class="">
			泰然金融-泰和网(www.trc.com) - 行业领先的网络借贷信息中介机构,为理财用户提供便捷、安全、透明、高效、低门槛的互联网金融综合服务,由银行提供资金存管。
		</div>
	</body>
</html>

文本属性

单行文本垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			div{
				 200px;
				height: 50px;
				border: 1px solid red;
				line-height: 50px;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div>
			内容
		</div>
	</body>
</html>

让单行文本垂直居中，那么就需要设置line-height的高度和div盒子的高度相同，这样就可以让当行文本垂直居中了

多行文本垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			div{
				 400px;
				height: 160px;
				border: 1px solid red;
				padding-top: 40px;
				line-height: 30px;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div>
						泰然金融-泰和网(www.trc.com) - 行业领先的网络借贷信息中介机构,为理财用户提供便捷、安全、透明、高效、低门槛的互联网金融综合服务,由银行提供资金存管。
		</div>
	</body>
</html>

这样的效果就是

超链接美化导航案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			ul{
				list-style: none;
			}
			.nav{
				 960px;
				margin: 100px auto 0;
				background-color: purple;
				overflow: hidden;
				
				border-radius: 5px;
			}
			.nav ul li{
				float: left;
				 160px;
				height: 40px;
				text-align: center;
				line-height: 40px;			
			}
			.nav ul li a{
				text-decoration: none;
				color: white;
				font-size: 20px;
				 160px;
				height: 40px;
				display: block;
			}
			.nav ul li a:hover{
				background-color: red;
				font-size: 22px;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<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>
				<li><a href="">会员中心</a></li>
			</ul>
		</div>
	</body>
</html>

那么效果图是这样的

背景图片

定位

相对定位

相对定位的三大特性：

不脱标
形影分离
老家留坑

不脱标
不脱标，意思就是不脱离标准流

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			div{
				 200px;
				height: 200px;
			}
			.box1{
				background-color: red;
			}
			.box2{
				background-color: green;
			}
			.box3{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</body>
</html>

这个是我们已经做好的模板，先看一下长什么样子？

当我们在.box类选择器上给它相对定位position: relative;的属性，是没有任何变化的，定位一般是和top left 等结合使用的

.box2{
	background-color: green;
	position: relative;
	top: 20px;
	left: 30px;
}

现在再看一下第二个div跑到哪里去了

第二个div移动位置了，也就是top/left起了作用。

讲讲形影分离和老家留坑，意思就是当这个元素被设置了相对定位之后，原来这个元素的位置继续保留看成是移动后的这个元素的影子，所以形影分离，老家留坑。

但是我们却很少会用到相对定位，相对定位就是相对于之前的位置去移动的，那么真的就没好处了吗？肯定是有的，下
面是相对定位的好处：

微调元素
做绝对定位的参考

微调元素
看这么一个案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.inp{
				font-size: 40px;
			}
			.btn{
				position: relative;
				top: 0;
				left: 0;
			}
		</style>
	</head>
		<input type="username" value="" class="inp" />
		<input type="button" name="" class="btn" value="点我" />
</html>

文档流的标准是高矮不齐，底边对齐，那么我们看一看这个效果

所以我们需要借助调试工具去调试,那么这样的话就完成了微调元素了。

相关阅读:
第一个TS文件
 盒子模型
 不稳定的排序算法
 状态码Status Code
从输入URL到页面加载完成发生了什么？
JavaScript中var、let、const的区别
 explain 详解（转）
HttpServletRequest对象方法的用法 (转)
数据一致性理解
 logback 使用详解（转）
原文地址：https://www.cnblogs.com/xiaoyafei/p/9555087.html