Web前端开发

WEB三阶段

第一阶段:

ARPA Net – 异构机器互联互通
TCP/IP – 异构网络传输协议
FTP – 文件传输协议

第二阶段:超文本文档 (HTML)，HTTP，URL，Web Server,UI Browser

第三阶段:各种浏览器产生

HTTP协议的特点:

基于请求-响应模式: 请求一定从客户端发出,服务器进行响应;
断开式链接: 服务器处理完客户的请求，即断开连接;
无状态保存: 无记忆能力, 不对每次的通信状态进行保存;

屏幕截图 2022-09-27 155349

Web 标准的构成

主要包括结构（Structure）html 、表现（Presentation）css和行为（Behavior）javascript 三个方面

一、HTML

1.HTML简介

HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。

HTML 不是一种编程语言，而是一种标记语言 (markup language)。标记语言是一套标记标签 (markup tag)。

它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。

它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

2.HTML语法规范

单标签,双标签,<>包括
包含关系,并列关系
charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符.

屏幕截图 2022-09-27 160253

lang 语言种类:来定义当前文档显示的语言。

en定义语言为英语
zh-CN定义语言为中文

简单来说,定义为en 就是英文网页, 定义为 zh-CN 就是中文网页

其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文

这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的

DOCTYPE html是HTML5文档的头声明
meta有关页面的元信息(meta-information)
base为页面上的所有链接规定默认地址或默认目标。
link定义HTML文档与外部资源的关系，最常见的用途是链接样式表。
script用于定义客户端脚本
style为HTML文档定义样式信息

3.HTML常用标签

标题标签
-
:独占一行,字号变大
p> 我是一个段落标签 </p:
换行
‘
和
是没有语义的，它们就是一个盒子，用来装内容的。’
1. ‘
  标签用来布局，但是现在一行只能放一个
  。大盒子’
2. 标签用来布局，一行上可以多个。小盒子
图像
1. 相对路径
2. 绝对路径
a标签链接

a href=”跳转目标” target=”目标窗口的弹出方式”> 文本或图像
特殊字符

表格

<table>
  标题  
    <caption>66</caption>
    <tr>
        属性,colspan合并列,rowspan合并行
        <th colspan="3">班级</th>
        <!-- <th>姓名</th>
        <th>学号</th> -->
    </tr>
    <tr>
        属性值
        <td>信1</td>
        <td>卢浩</td>
        <td>0519</tr>
    </tr>
</table>

屏幕截图 2022-09-28 143141

无序列表

有序列表
2. 自定义列表
  dd里可以放任何标签

表单标签

1
2
3

<form action=“url地址” method=“提交方式” name=“表单域名称">
 各种表单元素控件
</form>

屏幕截图 2022-09-28 143319

select下拉列表

屏幕截图 2022-09-28 143405

屏幕截图 2022-09-28 143431

name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
name 表单元素的名字, 要求单选按钮和复选框要有相同的name值.
checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用

==实例代码==

<!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>
    <h1>标题标签H1-H6</h1>
    <p>这是一个p标签(段落)</p>
    <br>换行br
    <strong>加粗strong</strong><br>
    <strong>加粗b</strong><br>
    <i>倾斜i</i><br>
    <em>倾斜em</em><br>
    <del>删除线del</del><br>
    <s>删除线s</s><br>
    <ins>下划线ins</ins><br>
    <u>下划线u</u><br>
    <div>大盒子span标签，一人一行</div>
    <div>大盒子span标签，一人一行</div>
    <span>小盒子span标签可并列 </span>
    <span>小盒子span标签可并列 </span>
    <img src="/images/img.jpg" height="250" width="350">../上一级/下一级目录<br>
    <a href="http://www.baidu.com" target="_blank">新标签百度target="_blank"信窗口_self当前窗口,href#空链接，href xxx.zip下载文件</a>
    <a href="#6666">锚点链接</a>
    <h1><!-- -->注释标签</h1>
    <img src="/images/屏幕截图 2022-09-22 182833.png" alt="6" width="900" height="400"><br>
    <table border="1" cellspacing="0" align="center">
        <caption>66</caption>
        <tr>
            <th colspan="3">班级</th>
            <!-- <th>姓名</th>
            <th>学号</th> -->
        </tr>
        <tr>
            <td>信1</td>
            <td>卢浩</td>
            <td>0519</tr>
        </tr>
        <tr>
            <td>信2</td>
            <td>梁贺</td>
            <td>不行</tr>
        </tr>
    </table><br>
    <form align="center">
        <caption>登录</caption><br>
        <label for="text"> 用户名:<input type="text" name="username" value="请设置用户名" id="text"><br></label>
        密码:<input type="password" name="pwd" maxlength="10"><br>
        <!-- 单选按钮可实现复选 ,name value给后台使用-->
        性别:<input type="radio" name="sex" checked="checked"> 男 <input type="radio" name="sex"> 女 <input type="radio" name="sex"> 未知<br>
        爱好:<input type="checkbox" name="hobby"> 羽毛球 <input type="checkbox" name="hobby"> 乒乓球 <input type="checkbox" name="hobby"> 足球<br>
        <input type="submit" name="zc" id="zc" value="注册">
        <input type="reset" value="重置"><br>
        出生月份:<select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option selected="selected">10</option>
            <option>11</option>
            <option>12</option>
        </select><br>
        文件:<input type="file" name="file" id="file" value="提交文件"><br>
        简介:<textarea maxlength="60"></textarea><br>
        获取短信验证码: <input type="button" value="获取">
    </form>
    <ul>
        <li>6</li>
        <li>7</li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
    </ol>
    <dl>
        <dt>解释</dt>
        <dd>1</dd>
        <dd>2</dd>
    </dl>
    <fieldset
</body>
</html>

4.HTML新增标签

4.1 新增的语义化标签

<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签

4.2 新增的多媒体标签

视频

<video src="文件地址" controls="controls"></video>
 <video controls="controls" width="300">
 <source src="move.ogg" type="video/ogg" >
 <source src="move.mp4" type="video/mp4" >
 您的浏览器暂不支持 <video> 标签播放视频
 </ video >

屏幕截图 2022-10-16 163751

音频

<audio src="文件地址" controls="controls"></audio>
 < audio controls="controls" >
 <source src="happy.mp3" type="audio/mpeg" >
 <source src="happy.ogg" type="audio/ogg" >
 您的浏览器暂不支持 <audio> 标签。
 </ audio>

屏幕截图 2022-10-16 163845

谷歌浏览器把音频和视频自动播放禁止了

4.3 新增的 input 类型

屏幕截图 2022-10-16 163931

重点记住： number tel search 这三个

4.4 HTML5 新增的表单属性

屏幕截图 2022-10-16 164147

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML5新增表单属性</title>
    <style>
        input::placeholder {
            color: pink;
        }
    </style>
</head>
<body>
    <form action="">
            <input type="search" name="sear" id="" required="required" placeholder="pink老师" autofocus="autofocus" autocomplete="off">
            <input type="file" name="" id="" multiple="multiple">
            <input type="submit" value="提交">
    </form>
  
</body>
</html>

可以通过以下设置方式修改placeholder里面的字体颜色：

input::placeholder {

color: pink;

}

二、CSS

1.CSS简介

CSS 美化 HTML ,布局网页.
CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即结构 ( HTML ) 与样式( CSS ) 相分离。

CSS学习资源:

2.基础选择器

选择器分为基础选择器和复合选择器两个大类

基础选择器是由单个选择器组成的

基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

2.1 标签选择器

标签选择器可以把某一类标签全部选择出来，比如所有的

标签和所有的标签。

能快速为页面中同类型的标签统一设置样式。

不能设计差异化样式，只能选择全部的当前标签。

标签名{
 属性1: 属性值1; 
 属性2: 属性值2; 
 属性3: 属性值3; 
 ...
}
a {
  fontsize: 10px;
}

2.2 类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器.

.类名 {
 属性1: 属性值1; 
 ...
}

1
2
3

.red {
 color: red;
}

1	<div class=‘red’> 变红色 </div>

多类名选择器

1	<div class="red font20">亚瑟</div>

(1) 在标签class 属性中写多个类名

(2) 多个类名中间必须用空格分开

(3) 这个标签就可以分别具有这些类名的样式

2.3 id选择器

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#” 来定义

#id名 {
 属性1: 属性值1; 
 ...
}

1
2
3

#nav {
 color:red; 
 }

id 选择器和类选择器的区别

① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

② id 选择器好比人的身份证号码，全中国是唯一的，不得重复。

③ id 选择器和类选择器最大的不同在于使用次数上。

④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

2.4 通配符选择器

在 CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。

* {
 属性1: 属性值1; 
 ...
}

* {
 margin: 0;
 padding: 0;
}

2.5 示例代码

屏幕截图 2022-09-29 130427

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <link rel="stylesheet" href="style.css">
    <!-- 内部样式表,外部样式表,行内样式表 -->
    <!-- style理论山可以放在任何一个地方,这里是内部样式表 -->
    <style>
        /* 选择器分为基础选择器和复合选择器 */
        /* 基础选择器包括:id选择器,类选择器,标签选择器,通配符选择器 */
        /* 标签选择器 */
        /* p{
            font-size: 12px;
            color: red;
        } */
        /* 类选择器 ,详情见web开发手册*/
        .blue{
            color: blue;
            background-color: green;
        }
        .red{
            color: red;
            background-color: purple;
        }
        /* 多类名 */
        .font66{
            font-size: 66px;
        }
        .box{
            width: 100px;
            height: 100px;
        }
        /* id选择器 */
        #liang{
            color: hotpink;
            /* RGB,16进制,颜色英文 */
        }
        /* *{
            width: 1px;
            通配符选择器
        } */
        /* 设置字体 */
        h2 {
            font-family: '微软雅黑';
            font-size: 30px;
            text-align: center;
            /* left right */
        }
        p {
        /* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
            font-family: 'Times New Roman', Times, serif;
            /* text-indent: 20px; */
            text-indent: 2em;
            /* 段落前几个空,2EM 两个文字 */
            line-height: 16px;
            /* 行间距 */
         }
         body{
            font-size: 20px;
         }
         .bold{
            font-weight: bold;
            /* 提倡数字 */
         }
         .en {
            font-style: italic;
            /* 也可以把em标签设为不倾斜 */
            text-decoration: underline;
            /* line-thorough删除线 ,none:无,可以用于去掉a标签下划线*/
         }
         .id{
            font: 20px '黑体';
         }
    </style>
</head>
<body>
    <p>梁贺不行</p>
    <div class="box blue">梁贺菜逼</div>
    <div class="box red">梁贺rubbish</div>
    <div class="box blue">梁贺菜逼</div>
    <div class="box red font66">small梁贺</div>
    <div id="liang">liang</div>

    <h2>pink的秘密</h2>
    <p>那一抹众人中最漂亮的颜色,</p>
    <p>优雅,淡然,又那么心中清澈.</p>
    <p>前端总是伴随着困难和犯错,</p>
    <p>静心,坦然,攻克一个又一个.</p>
    <p class="bold en">拼死也要克服它,</p>
    <p style="color: pink;">这是pink的秘密也是老师最终的嘱托.</p>
    <!-- 行内样式表 -->
    <div id="id">三生三世十里桃花,一心一意百行代码</div><br>
    <span id="66666">lh</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>
        /* shift+alt+f格式化文档 */
        .one{
            text-align: center;
            /* tac */
            /* width: ;wh
            height: ; */
            width: 100px;
            /* w100 */
        }
    </style>
</head>
<body>
    <div>emmet语法+tab</div>
    <div>div*10</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <ul>
        <li>ul>li</li>
    </ul>
    <div>div+p</div>
    <p>div+p</p>
    <div class="nav">.nav</div>
    <div id="nav">#nav</div>
    <p class="pan">p.pan</p>
    <ul><span id="id">ul>span#id</span></ul>
    <div class="demo1">.demo$*5</div>
    <div class="demo2">.demo$*5</div>
    <div class="demo3">.demo$*5</div>
    <div class="demo4">.demo$*5</div>
    <div class="demo5">.demo$*5</div>
    <div>pinkgay:div{pinkgay}</div>
    <div>pink不喜欢男人:div{pink不喜欢男人}*5</div>
    <div>pink不喜欢男人</div>
    <div>pink不喜欢男人</div>
    <div>pink不喜欢男人</div>
    <div>pink不喜欢男人</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5:div{$}*5</div>
</body>
</html>

3.CSS文本属性

3.1 字体设置

CSS 使用 font-family 属性定义文本的字体系列。

1 2	p { font-family:"微软雅黑";} 字体属性 div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

font-size ：字体大小

font-weight ：字体粗细

noraml
bold 加粗
100-900 400是noraml 700是加粗

font-style: italic(斜体)/noraml

1	body { font: font-style font-weight font-size/line-height font-family; }

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开

屏幕截图 2022-09-29 131153

3.2 文本属性

color 属性用于定义文本的颜色。

1
2
3

div { 
 color: red;
}

屏幕截图 2022-09-29 142619

text-align 属性用于设置元素内文本内容的水平对齐方式。

1
2
3

div { 
 text-align: center;
}

left,right,center

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

1 2	div { text-decoration：underline； }

屏幕截图 2022-09-29 142735

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

div { 
 text-indent: 10px;
}
p { 
 text-indent: 2em;
}

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离.

1
2
3

p { 
 line-height: 26px;
}

屏幕截图 2022-09-29 143219

屏幕截图 2022-09-29 143239

4.CSS引入方式

4.1 内部样式表

<style>
 div {
 color: red;
 font-size: 12px;
 }
</style>

4.2 行内样式表

1	<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

4.3 外部样式表

1	<link rel="stylesheet" href="css文件路径">

屏幕截图 2022-09-29 143239

5.Emmet 语法

HTML:

生成标签直接输入标签名按tab键即可比如 div 然后tab 键，就可以生成
如果想要生成多个相同标签加上 * 就可以了比如 div*3 就可以快速生成3个div
如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
如果有兄弟关系的标签，用 + 就可以了比如 div+p
如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab 键就可以了
如果生成的div 类名是有顺序的，可以用自增符号 $
如果想要在生成的标签内部写内容可以用 { } 表示

CSS:

比如 w200 按tab 可以生成 width: 200px;
比如 lh26px 按tab 可以生成 line-height: 26px;

6.复合选择器

6.1 后代选择器 (重要）

1 2	元素1 元素2 { 样式声明 } ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */

元素1 和元素2 中间用空格隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
元素1 和元素2 可以是任意基础选择器

6.2 子选择器 (重要）

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素

1 2	元素1 > 元素2 { 样式声明 } div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */

元素1 和元素2 中间用 大于号 隔开
元素1 是父级，元素2 是子级，最终选择的是元素2
元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器

6.3 并集选择器 (重要）

1 2	元素1,元素2 { 样式声明 } ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */

元素1 和元素2 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

6.4 链接伪类选择器

鼠标经过的时候，由原来的灰色变成了红色

为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。
因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

/* a 是标签选择器 所有的链接 */ 
a { 
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover { 
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}

6.5 :focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

1
2
3

input:focus { 
 background-color:yellow;
}

6.6 代码示例

屏幕截图 2022-09-29 150359

<!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>
        /* 后代选择器:所有子孙 */
        /* 子选择器:亲儿子 */
        ol li{
            color: pink;
        }
        ol li a{
            color: red;
        }
        .nav li a{
            color: green;
        }
        .navs>a{
            color: purple;
        }
        /* 并集选择器 */
        span,h1,.pig a{
            color: pink;
        }
    </style>
</head>
<body>
    <ol class="pig">
        <a>小猪梁贺</a>
        变态
        <li>ol的小孩</li>
        <li>ol的小孩</li>
        <li>ol的小孩<a href="6">孙子</a></li>
    </ol>
    <ul>
        <li>ul的小孩</li>
        <li>ul的小孩</li>
        <li>ul的小孩</li>
    </ul>
    <ol class="nav">
        变态
        <li>ol的小孩</li>
        <li>ol的小孩</li>
        <li>ol的小孩<a href="6">孙子</a></li>
    </ol>
    <div class="navs">
        <a href="#">儿子</a>
        <p><a href="#">孙子</p>
    </div>
    <span>6</span>
    <h1>666</h1>
</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:link{
            color: #333;
            text-decoration: none;
        }
        a:visited{
            color: orange;
            text-decoration: none;
        }
        /* 位于上方 */
        a:hover{
            color: red;
        }
        /* 按下但未弹起 */
        a:active{
            color: pink;
        }
        /* :focus伪类选择器 */
        input:focus{
            background-color: pink;
        }
        /* 转换为块元素 */
        a{
            display: block;
            width: 150px;
            height: 50px;
            background-color: red ;
        }
        div{
            background: green;
            display: inline;
        }
        span{
            width: 100px;
            height: 50px;
            display: inline-block;
            background-color: purple;
        }
    </style>
</head>
<body>
    <a href="#">小猪梁贺</a>
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <input type="text" name="" id="">
    <a href="#">梁贺阿姨</a>
    <div>小梁贺</div>
    <div>小梁贺</div>
    <span>666</span>
    <span>666</span>
</body>
</html>
<!-- 元素显示模式 -->
<!-- h1-h6,p,div,ol,li都是块元素，
    占一行 , 文字块不能放其他块元素-->
    <!-- 行内元素,一行放多个,
        a里不能放a,可以放其他块元素 -->
        <!--  行内块元素,img,input,span
            设置高度,空隙,相隔 -->

7. 元素显示模式

7.1 块元素

常见的块元素有

~

、

等，其中

标签是最典型的块元素。

块级元素的特点：

① 比较霸道，自己独占一行。

② 高度，宽度、外边距以及内边距都可以控制。

③ 宽度默认是容器（父级宽度）的100%。

④ 是一个容器及盒子，里面可以放行内或者块级元素。

文字类的元素内不能使用块级元素
P标签主要用于存放文字，因此里面不能放块级元素，特别是不能放
同理，
~
等都是文字类块级标签，里面也不能放其他块级元素

7.2 行内元素

常见的行内元素有、、、、、~~、~~、、、等，其中标签是最典型的行内元素。有的地方也将行内元素称为内联元素。~~~~

行内元素的特点：

① 相邻行内元素在一行上，一行可以显示多个。

② 高、宽直接设置是无效的。

③ 默认宽度就是它本身内容的宽度。

④ 行内元素只能容纳文本或其他行内元素。

注意：

链接里面不能再放链接

特殊情况链接里面可以放块级元素，但是给转换一下块级模式最安全

 7.3 行内块元素
在行内元素中有几个特殊的标签 —— 、、，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。

② 默认宽度就是它本身内容的宽度（行内元素特点）。

③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

7.4 元素显示模式转换

转换为块元素：display:block;

转换为行内元素：display:inline;

转换为行内块：display: inline-block;

案例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!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{
display: block;
width: 230px;
height: 40px;
background-color: #55585a;
font-size: 14px;
color: #fff;
text-decoration: none;
/* text-align: center; */
/* 垂直居中行高=文字高度 */
line-height: 40px;
text-indent: 2em ;
}
a:hover{
background-color: orange;
}
div{
width: 1000px;
height: 500px;
background-image: url(images/img.jpg);
background-repeat: no-repeat;
/* repeat,reepeat-x/y */
background-color: pink;
/* background-position: center top; */
/* background-position: right;
下是x20y50轴,只指定了一个值则是x,另一个垂直居中*/
background-position: 20px 50px;
/* 靠右侧M垂直居中 */
/* 顺序无关 */

}
h3{
width: 118px;
height: 40px;
background-color: pink;
font-size: 14px;
font-weight: 400;
line-height: 40px;

}
</style>
</head>
<body>
<a href="#">手机电话卡</a>
<a href="#">电视盒子</a>
<a href="#">笔记本电脑</a>
<a href="#">出行穿戴</a>
<a href="#">智能路由器</a>
<a href="#">健康儿童</a>
<br>
<div></div>
<h3>成长守护平台</h3>
</body>
</html>

垂直居中原理

7.5 背景属性
background-color:颜色值;

background-color:transparent;

background-image : none | url (url)

background-repeat: repeat | no-repeat | repeat-x | repeat-y

background-position: x y;

参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

参数是精确单位

如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标

如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

background-attachment : scroll | fixed

实例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!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-image: url(images/page0.jpg);
background-repeat: no-repeat;
background-position: center top; */
color: #fff;
font-size: 20px;
/* background-attachment: fixed; */
/* scroll背景图像随着对象内容滚动,
fixed，图像固定 */
background: fixed black url(images/page0.jpg) no-repeat ;
}
</style>
</head>
<body>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
<p>梁贺不行</p>
</body>
</html>

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

1
background: transparent url(image.jpg) repeat-y fixed top ;

8.CSS的三大特性
8.1 层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题

层叠性原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

样式不冲突，不会层叠

8.2 继承性
CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。

1
2
body {
font:12px/1.5 Microsoft YaHei； }

行高可以跟单位也可以不跟单位

如果子元素没有设置行高，则会继承父元素的行高为 1.5

此时子元素的行高是：当前子元素的文字大小 * 1.5

body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

8.3 优先级
当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性

选择器不同，则根据选择器权重执行

优先级注意点:

权重是有4组数字组成,但是不会有进位。

可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..

等级判断从左向右，如果某一位数值相同，则判断下一位数值。

可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为1000, !important 无穷大.

继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

div ul li ——> 0,0,0,3

.nav ul li ——> 0,0,1,2

a:hover —–—> 0,0,1,1

.nav a ——> 0,0,1,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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{
color: pink;
font: 12px/1.5 'Microsoft YaHei';
/* font: 12px/24px'XXX */
}
div{
/* 子元素继承父元素行高1.5倍 */

width: 300px;
height: 300px;
background: rgba(0,0,0,0.3);
/* 背景色半透明 */
}
</style>
</head>
<body>
<div>粉红色</div>
<p>粉红色6</p>
<ul>
<li>继承父亲body的文字大小</li>
</ul>
</body>
</html>




9.盒子模型
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容

9.1 border

border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式边框颜色

1
2
3
border : border-width || border-style || border-color
border: 1px solid red; 没有顺序
border-top: 1px solid red; /* 只设定上边框，其余同理 */

border-style :

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>今日小说排行榜</title>
<style>
table {
width: 500px;
height: 249px;
}
table,td{
border: 1px pink solid ;
border-collapse: collapse;
/* 合并相邻的边 */
/* 边框会影响盒子实际大小 */
}
</style>
</head>
<body>
<table align="center" width="500" height="249" border="1" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>

<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="up.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
</tbody>
</table>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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: 200px;
/* border-style: dashed;
border-style: solid; */
/* dashed虚线,solid实线 */
/* border-color: pink;
border-width: 1px; */
/* 复合写法 */
background-color: red;
border-top: 5px pink solid;
/* border-bottom: 1px solid #000; */
/* border: 5px pink solid; */
/* 下面覆盖上面 */
/* padding-left: 2em; */
/* top left right bottom */
/* padding */
padding: 1px 2px 3px 4px;
/* 1个上下值
2个上下左右
3个上左右
4个上右下左
*/
/* padding也会影响盒子大小 */
}
</style>
</head>
<body>
<div>666</div>
</body>
</html>

9.2 表格的细线边框
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

1
border-collapse:collapse;

测量盒子大小的时候,不量边框.

如果测量的时候包含了边框,则需要 width/height 减去边框宽度

边框会影响盒子实际大小

9.3 内边距(padding)
padding 属性用于设置内边距，即边框与内容之间的距离。

padding 属性（简写属性）可以有一到四个值。

内容和边框有了距离，添加了内边距。

padding影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子

如果盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>padding不会影响盒子大小的情况</title>
<style>
h1 {
/* width: 100%; */
height: 200px;
background-color: pink;
padding: 30px;
}
div {
width: 300px;
height: 100px;
background-color: purple;
}
div p {
padding: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<h1></h1>
<div>
<p></p>
</div>
</body>
</html>

案例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新浪</title>
<style>
.nav{
height: 41px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
background-color: #fcfcfc;
line-height: 41px;
}
.nav a{
display: inline-block;
height: 41px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
padding: 0 20px;
}
.nav :hover {
background-color: #eee;
color: #ff8500;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">目标页</a>
</div>
</body>
</html>

9.4 外边距(margin)
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。

margin 简写方式代表的意义跟 padding 完全一致。

外边距可以让块级盒子水平居中，但是必须满足两个条件：

① 盒子必须指定了宽度（width）

② 盒子左右的外边距都设置为 auto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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>
.header {
width: 900px;
height: 200px;
background-color: pink;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<span>里面的文字</span>
</div>
</body>
</html>

常见的写法，以下三种都可以：

margin-left: auto; margin-right: auto;

margin: auto;

margin: 0 auto;

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-alig

9.5 外边距合并
使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

主要有两种情况:

相邻块元素垂直外边距的合并

嵌套块元素垂直外边距的塌陷

① 可以为父元素定义上边框。

② 可以为父元素定义上内边距。

③ 可以为父元素添加 overflow:hidden。

9.6 清除内外边距
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网
页元素的内外边距。

1
2
3
4
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除内外边距</title>
<style>
/* 这句话也是我们css 的第一行代码 */
* {
margin: 0;
padding: 0;
}
span {
background-color: pink;
margin: 20px;
}
</style>
</head>
<body>
123
<ul>
<li>abcd</li>
</ul>
<span>行内元素尽量只设置左右的内外边距</span>
</body>
</html>

9.7 综合案例
详见黑马

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!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;
}
body {
background-color: #f5f5f5;
}
.box{
width: 298px;
height: 415px;
background-color: #fff;
margin: 100px auto;
}
.box img{
width: 100%;
}
.review {
height: 70px;
font-size: 14px;
padding: 0 28px;
/* 因为段落没有width属性,padding不会撑开盒子 */
margin-top: 30px;
}
.appraise{
font-size: 12px;
color: #b0b0b0;
margin-top: 20px;
padding: 0 28px;
}
.info {
font-size: 14px;
margin-top: 15px;
padding: 0 28px;
}
.info h4{
display: inline-block;
font-weight: normal;
}
.info span{
color: #ff6700;
}
.info em {
font-style: normal;
color :#b0b0b0;
margin-left: 0 6px 0 15px;
}
a{
text-decoration: none;
color: #333;
}
</style>
</head>
<body>
<div class="box">
<img src="images/smallmi.jpg" alt="">
<p class="review">小米11pro真不行</p>
<div class="appraise">来自于1013886337 的评价</div>
<div class="info">
<h4><a href="#">XiaoMi11Pro... </a></h4>
<em>|</em>
<span>5499元</span>
</div>
</div>
</body>
</html>

9.8 圆角边框
border-radius 属性用于设置元素的外边框圆角

1
border-radius:length;

参数值可以为数值或百分比的形式

如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%

该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!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 {
float: left;
}
.t1 {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: pink;
}
.t2 {
width: 100px;
height: 100px;
border-radius: 5px;
background-color: pink;
}
.t3 {
width: 100px;
height: 100px;
border-radius: 5px 12px 27px 38px;
background-color: pink;
/* border-top-left-radius: 5px; */
}
.t4 {
width: 200px;
height: 200px;
background-color: pink;
float: right;
/* box-shadow: 10px 10px 10px 10px black; */
}
/* 盒子阴影 */
.t4:hover {
box-shadow: 10px 10px 10px 10px rgba(0, 0 ,0, .3);
}
h1 {
text-shadow: 5px 5px 6px rgba(0,0,0,.3);
}
</style>
</head>
<body>
<div class="t1"></div>
<div class="t2"></div>
<p></p>
<div class="t3"></div>
<p></p>
<div class="t4"></div>
<h1>i'm 阴影</h1>
</body>
</html>

9.9 盒子阴影
CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。

1
box-shadow: h-shadow v-shadow blur spread color inse

案例同上

默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效

盒子阴影不占用空间，不会影响其他盒子排列。

10.文字阴影
在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。

1
text-shadow: h-shadow v-shadow blur color;

11. 浮动
网页布局的本质——用 CSS 来摆放盒子。把盒子摆放到相应位置.

CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：普通流（标准流），浮动，定位

11.1 标准流（普通流/文档流）
所谓的标准流: 就是标签按照规定好默认方式排列.

块级元素会独占一行，从上向下顺序排列。

常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

常用元素：span、a、i、em 等

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。

这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

选择器 { float: 属性值; }

11.2 浮动特性
加了浮动之后的元素,会具有很多特性,需要我们掌握的.

浮动元素会脱离标准流(脱标)

浮动的元素会一行内显示并且元素顶部对齐

浮动的元素会具有行内块元素的特性.

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

浮动的盒子中间是没有缝隙的，是紧挨着一起的

行内元素同理

设置了浮动（float）的元素最重要特性：

脱离标准普通流的控制（浮）移动到指定位置（动）, （俗称脱标）

浮动的盒子不再保留原先的位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!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>
.box1 {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
/* +上float: left;,右边的span上移 */
width: 300px;
height: 300px;
background-color: red;
}
.span1 {
/* 具有行内块元素特点 */
float: right;
width: 300px;
height: 300px;
background-color: pink;
}
p {
/* 试试不加浮动 */
float: right;
background-color: purple;
height: 200px;
}
</style>
</head>
<body>

</body>
<div class="box1"></div>
<div class="box2"></div>
<span class="span1"></span>
<p>pppppp</p>


</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!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: 1200px;
height: 460px;
background-color: pink;
margin: 0 auto;
}
.left {
float: left;
width: 230px;
height: 460px;
background-color: purple;
}
.right {
float: left;
width: 970px;
height: 460px;
background-color: blue;
}
</style>
</head>

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

</html>

11.3 浮动案例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!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: 1226px;
height: 615px;
margin: 0 auto ;
background-color: pink;
}
.left {
width: 234px;
height: 615px;
background-color: purple;
float: left;
}
.right {
float: left;
width: 992px;
height: 615px;
background-color: skyblue;
}
.right>div {
float: left;
width: 234px;
height: 300px;
background-color: #fff;
margin-left: 14px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左青龙</div>
<div class="right">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
</body>
</html>

11.4 要点
1. 浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2. 一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

11.5 清除浮动
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

①额外标签法
额外标签法会在浮动元素末尾添加一个空的标签。例如
，或者其他标签

（如<br等）。

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差

注意：要求这个新的空标签必须是块级元素。

②父级添加 overflow
可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

优点：代码简洁

缺点：无法显示溢出的部分

③:after 伪元素法
:after 方式是额外标签法的升级版。也是给父元素添加

1
2
3
4
5
6
7
8
9
10
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}

优点：没有增加标签，结构更简单

缺点：照顾低版本浏览器

代表网站：百度、淘宝网、网易等

④双伪元素清除浮动
也是给给父元素添加

1
2
3
4
5
6
7
.clearfix:before,.clearfix:after {
content:"";
display:table;
}.clearfix:after {
clear:both; }.clearfix {
*zoom:1;
}

实战:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!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>
/* 添加after伪元素清除浮动
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
/* IE6、7 专有 */
/* *zoom: 1;
} */

*/ .box {
width: 800px;
border: 1px solid blue;
margin: 0 auto;
/* overflow: hidden; */
/* 清除浮动 */
}

.damao {
float: left;
width: 300px;
height: 200px;
background-color: purple;
}

.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}

.footer {
height: 200px;
background-color: black;
}

/* 1.额外标签法 */
/* .clear {
clear:both;
} */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}

.clearfix:after {
clear: both;
}

.clearfix {
*zoom: 1;
}
</style>
</head>

<body>
<div class="box clearfix">

<div class="damao">大毛</div>
<div class="ermao">二毛</div>

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

</html>

12.定位
![屏幕截图 2022-10-13 221924](C:\Users\soul\Desktop\Markdown\前端\img\屏幕截图 2022-10-13 221924.png)

定位 = 定位模式 + 边偏移。

![屏幕截图 2022-10-13 222011](C:\Users\soul\Desktop\Markdown\前端\img\屏幕截图 2022-10-13 222011.png)

12.1 静态定位 static
静态定位是元素的默认定位方式，无定位的意思。

语法：

选择器 { position: static; }

静态定位按照标准流特性摆放位置，它没有边偏移

静态定位在布局时很少用到

12.2 相对定位 relative
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的

1
选择器 { position: relative; }

相对定位的特点：

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。

原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

相对定位并没有脱标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>相对定位</title>
<style>
.box1 {
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 200px;
height: 200px;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="box1">

</div>
<div class="box2">

</div>

</body>
</html>

12.3 绝对定位 absolute
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

1
选择器 { position: absolute; }

绝对定位的特点：（务必记住）

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。

如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

绝对定位不再占有原先的位置。（脱标）

所以绝对定位是脱离标准流的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绝对定位-无父亲或者父亲无定位</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: skyblue;
}
.son {
position: absolute;
/* top: 10px;
left: 10px; */
/* top: 100px;
right: 200px; */
left: 0;
bottom: 0;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绝对定位-无父亲或者父亲无定位</title>
<style>
.father {
/* position: absolute; */
width: 500px;
height: 500px;
background-color: skyblue;
}
.son {
position: absolute;
/* top: 10px;
left: 10px; */
/* top: 100px;
right: 200px; */
left: 0;
bottom: 0;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>

</body>
</html>

12.4 子绝父相
子级是绝对定位的话，父级要用相对定位。

子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子.

父盒子需要加定位限制子盒子在父盒子内显示。

父盒子布局时，需要占有位置，因此父亲只能是相对定位。这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结：因为父级需要占有位置，因此是相对定位,子盒子不需要占有位置，则是绝对定位

12.5 固定定位 fix
固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变

固定定位的特点：

以浏览器的可视窗口为参照点移动元素。

跟父元素没有任何关系

不随滚动条滚动。

固定定位不在占有原先的位置。

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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>
.dj {
position: fixed;
top: 0;
left: 0;
}
body {
width: auto;
height: 1900px;
}
</style>
</head>
<body>
<div class="dj">
<img src="images/img.jpg" alt="">
</div>
</body>
</html>

小算法：

让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置。

让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置

就可以让固定定位的盒子贴着版心右侧对齐了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>固定定位小技巧-固定到版心右侧</title>
<style>
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
position: fixed;
/* 1. 走浏览器宽度的一半 */
left: 50%;
/* 2. 利用margin 走版心盒子宽度的一半距离 */
margin-left: 405px;
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="fixed"></div>
<div class="w">版心盒子 800像素</div>

</body>
</html>

12.6 粘性定位 sticky
粘性定位可以被认为是相对定位和固定定位的混合

1
{ position: sticky; top: 10px; }

粘性定位的特点：

以浏览器的可视窗口为参照点移动元素（固定定位特点）

粘性定位占有原先的位置（相对定位特点）

必须添加 top 、left、right、bottom 其中一个才有效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>粘性定位</title>
<style>
body {
height: 3000px;
}
.nav {
/* 粘性定位 */
position: sticky;
top: 0;
width: 800px;
height: 50px;
background-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="nav">我是导航栏</div>
</body>
</html>

12.7 定位叠放次序 z-index

数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上

如果属性值相同，则按照书写顺序，后来居上

数字后面不能加单位

只有定位的盒子才有 z-index 属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>定位的堆叠顺序</title>
<style>
.box {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
}
.xiongda {
background-color: red;
z-index: 1;
}
.xionger {
background-color: green;
left: 50px;
top: 50px;
z-index: 2;
}
.qiangge {
background-color:blue;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div class="box xiongda">熊大</div>
<div class="box xionger">熊二</div>
<div class="box qiangge">光头强</div>
</body>
</html>

12.8 绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。

① left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。

② margin-left: -100px;：让盒子向左移动自身宽度的一半。

绝对定位和固定定位也和浮动类似。

行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

脱标的盒子不会触发外边距塌陷

绝对定位（固定定位）会完全压住盒子(浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素)

13.元素的显示与隐藏

display 显示隐藏

visibility 显示隐藏

overflow 溢出显示隐藏

13.1 display 属性
display 属性用于设置一个元素应如何显示。

display: none ；隐藏对象

display：block ；除了转换为块级元素之外，同时还有显示元素的意思

display 隐藏元素后，不再占有原来的位置。

后面应用及其广泛，搭配 JS 可以做很多的网页特效。

13.2 visibility 可见性
visibility 属性用于指定一个元素应可见还是隐藏。

visibility：visible ; 元素可视

visibility：hidden; 元素隐藏

visibility 隐藏元素后，继续占有原来的位置。

如果隐藏元素想要原来位置，就用 visibility：hidden

如果隐藏元素不想要原来位置，就用 display：none (用处更多重点）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>显示隐藏元素之display</title>
<style>
.peppa {
display: none;
/* display: block; */
width: 200px;
height: 200px;
background-color: pink;

}
.george {
width: 200px;
height: 200px;
background-color: skyblue;
}
.baba {
visibility: hidden;
width: 200px;
height: 200px;
background-color: pink;

}
.mama {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="peppa">佩奇</div>
<div class="george">乔治</div>
<div class="baba">猪爸爸</div>
<div class="mama">猪妈妈</div>
</body>
</html

13.3 overflow 溢出
overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时，会发生什么。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>显示隐藏元素之overflow</title>
<style>
.peppa {
/* overflow: visible; */
/* overflow: hidden; */
/* scroll 溢出的部分显示滚动条不溢出也显示滚动条 */
/* overflow: scroll; */
/* auto 溢出的时候才显示滚动条不溢出不显示滚动条 */
/* overflow: auto; */
width: 200px;
height: 200px;
border: 3px solid pink;
margin: 100px auto;
}
</style>
</head>

<body>
<div class="peppa">
《小猪佩奇》，又名《粉红猪小妹》（台湾名为粉红猪），英文名为《Peppa
Pig》，是由英国人阿斯特利（Astley）、贝克（Baker）、
</div>

</body>

</html>

14.精灵图
为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

使用精灵图核心：

精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。

这个大图片也称为 sprites 精灵图或者雪碧图

移动背景图片位置，此时可以使用 background-position 。

移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同

因为一般情况下都是往上往左移动，所以数值是负值。

使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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>
.box1 {
width: 60px;
height: 60px;
background: url(images/sprites.png) -182px 0 no-repeat;
margin: 100px auto;
/* background-position: -182px 0; */
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

15.字体图标
icomoon 字库 http://icomoon.io 推荐指数 ★★★★★
阿里 iconfont 字库 http://www.iconfont.cn/ 推荐指数 ★★★★★

把下载包里面的 fonts 文件夹放入页面根目录下

在 CSS 样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中。

1
2
3
4
5
6
7
8
9
10
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

html 标签内添加小图标[]

给标签定义字体。

span {

font-family: “icomoon”;

}

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
span {
font-family: 'icomoon';
}
</style>
</head>

<body>
<span></span>
</body>

</html>

16.CSS三角
1
2
3
4
5
6
7
8
div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-left-color: pink;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS 三角制作</title>
<style>
.box1 {
width: 0;
height: 0;
/* border: 10px solid pink; */
border-top: 10px solid pink;
border-right: 10px solid red;
border-bottom: 10px solid blue;
border-left: 10px solid green;
}
.box2 {
width: 0;
height: 0;
border: 50px solid transparent;
border-left-color: pink;
margin: 100px auto;
}
.jd {
position: relative;
width: 120px;
height: 249px;
background-color: pink;
}
.jd span {
position: absolute;
right: 15px;
top: -10px;
width: 0;
height: 0;
/* 为了照顾兼容性 */
line-height: 0;
font-size: 0;
border: 5px solid transparent;
border-bottom-color: pink;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="jd">
<span></span>
</div>
</body>
</html>

17.用户界面样式
17.1 鼠标样式 cursor
1
li {cursor: pointer;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用户界面样式-鼠标样式</title>
</head>
<body>
<ul>
<li style="cursor: default;">我是默认的小白鼠标样式</li>
<li style="cursor: pointer;">我是鼠标小手样式</li>
<li style="cursor: move;">我是鼠标移动样式</li>
<li style="cursor: text;">我是鼠标文本样式</li>
<li style="cursor: not-allowed;">我是鼠标禁止样式</li>
</ul>
</body>
</html>

17.2 轮廓线 outline
给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

1
input {outline: none; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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{
outline: none;
}
textarea {
resize: none;
}
img {
/* vertical-align: middle; */
/* 行内块元素均可 */
}
</style>
</head>
<body>
<input type="text" name="" id="">
<textarea name="" id="" cols="30" rows="10"></textarea>
<img src="images/tb.jpg" alt="">
lianghe不行
</body>
</html>

17.3 防止拖拽文本域 resize
1
textarea{ resize: none;}

18.vertical-align
CSS 的 vertical-align 属性使用场景：经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

1
vertical-align : baseline | top | middle | bottom

19.溢出的文字省略号
1.单行文本溢出显示省略号
1
2
3
4
5
6
/*1. 先强制一行内显示文本*/
white-space: nowrap; （默认 normal 自动换行）
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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: 150px;
height: 80px;
background-color: pink;
margin: 100px auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>啥也不说，此处省略一万字</div>
</body>
</html>

2.多行文本溢出显示省略号
1
2
3
4
5
6
7
8
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>单行文本溢出显示省略号</title>
<style>
div {
width: 150px;
height: 65px;
background-color: pink;
margin: 100px auto;
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>

<body>
<div>
啥也不说，此处省略一万字,啥也不说，此处省略一万字此处省略一万字
</div>
</body>

</html>

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单

20.常见布局技巧
20.1 margin负值运用
1.让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框

2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>margin负值的巧妙运用</title>
<style>
ul li {
position: relative;
float: left;
list-style: none;
width: 150px;
height: 200px;
border: 1px solid red;
margin-left: -1px;
}

/* ul li:hover {
1. 如果盒子没有定位，则鼠标经过添加相对定位即可
position: relative;
border: 1px solid blue;

} */
ul li:hover {
/* 2.如果li都有定位，则利用 z-index提高层级 */
z-index: 1;
border: 1px solid blue;
}
</style>
</head>

<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>

</html>

20.2 文字围绕浮动元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文字围绕浮动元素的妙用</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 70px;
background-color: pink;
margin: 0 auto;
padding: 5px;
}
.pic {
float: left;
width: 120px;
height: 60px;
margin-right: 5px;
}
.pic img {
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="images/img.png" alt="">
</div>
<p>【集锦】热身赛-巴西0-1秘鲁内马尔替补两人血染赛场</p>
</div>
</body>
</html>

20.3 行内块巧妙运用
页码在页面中间显示:

把这些链接盒子转换为行内块，之后给父级指定 text-align:center;

利用行内块元素中间有缝隙，并且给父级添加 text-align:center; 行内块元素会水平会居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>行内块的巧妙运用</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
text-align: center;
}
.box a {
display: inline-block;
width: 36px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
text-align: center;
line-height: 36px;
text-decoration: none;
color: #333;
font-size: 14px;
}
.box .prev,
.box .next {
width: 85px;
}
.box .current,
.box .elp {
background-color: #fff;
border: none;
}
.box input {
height: 36px;
width: 45px;
border: 1px solid #ccc;
outline: none;
}
.box button {
width: 60px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;

}
</style>
</head>
<body>
<div class="box">
<a href="#" class="prev"><<上一页</a>
<a href="#" class="current">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#" class="elp">...</a>
<a href="#" class="next">>>下一页</a>
到第
<input type="text">
页
<button>确定</button>
</div>
</body>
</html>

20.4 CSS 三角强化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS三角强化的巧妙运用</title>
<style>
.box1 {
width: 0;
height: 0;
/* 把上边框宽度调大 */
/* border-top: 100px solid transparent;
border-right: 50px solid skyblue; */
/* 左边和下边的边框宽度设置为0 */
/* border-bottom: 0 solid blue;
border-left: 0 solid green; */
/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2. 样式都是solid */
border-style: solid;
/* 3. 上边框宽度要大，右边框宽度稍小，其余的边框该为 0 */
border-width: 100px 50px 0 0 ;

}
.price {
width: 160px;
height: 24px;
line-height: 24px;
border: 1px solid red;
margin: 0 auto;
}
.miaosha {
position: relative;
float: left;
width: 90px;
height: 100%;
background-color:red;
text-align: center;
color: #fff;
font-weight: 700;
margin-right: 8px;

}
.miaosha i {
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 24px 10px 0 0;
}
.origin {
font-size: 12px;
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="price">
<span class="miaosha">
¥1650
<i></i>
</span>
<span class="origin">¥5650</span>
</div>
</body>
</html>

21.CSS新特性
21.1 属性选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3新增属性选择器</title>
<style>
/* 必须是input 但是同时具有 value这个属性选择这个元素 [] */
/* input[value] {
color:pink;
} */
/* 只选择 type =text 文本框的input 选取出来 */
input[type=text] {
color: pink;
}
/* 选择首先是div 然后具有class属性并且属性值必须是 icon开头的这些元素 */
div[class^=icon] {
color: red;
}
section[class$=data] {
color: blue;
}
div.icon1 {
color: skyblue;
}
/* 类选择器和属性选择器伪类选择器权重都是 10 */
</style>
</head>
<body>



<input type="text" name="" id="">
<input type="password" name="" id="">

<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>

<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">哪我是谁</section>

</body>
</html>

21.2 结构伪类选择器

==注意==：类选择器、属性选择器、伪类选择器，权重为 10。

nth-child（n） 选择某个父元素的一个或多个特定的子元素（重点）

n 可以是数字，关键字和公式

n 如果是数字，就是选择第 n 个子元素，里面数字从1开始…

n 可以是关键字：even 偶数，odd 奇数

n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )

==区别==：

nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配

nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E ，然后再根据E 找第n个孩子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3新增结构伪类选择器</title>
<style>
/* 1. 选择ul里面的第一个孩子小li */
ul li:first-child {
background-color: pink;
}
/* 2. 选择ul里面的最后一个孩子小li */
ul li:last-child {
background-color: pink;
}
/* 3. 选择ul里面的第2个孩子小li */
ul li:nth-child(2) {
background-color: skyblue;
}
ul li:nth-child(6) {
background-color: skyblue;
}
</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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3新增选择器nth-type-of</title>
<style>
ul li:first-of-type {
background-color: pink;
}
ul li:last-of-type {
background-color: pink;
}
ul li:nth-of-type(even) {
background-color: skyblue;
}
/* nth-child 会把所有的盒子都排列序号 */
/* 执行的时候首先看 :nth-child(1) 之后回去看前面 div */

section div:nth-child(1) {
background-color: red;
}
/* nth-of-type 会把指定元素的盒子排列序号 */
/* 执行的时候首先看 div指定的元素之后回去看 :nth-of-type(1) 第几个孩子 */
section div:nth-of-type(1) {
background-color: blue;
}
</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>

<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
</body>

</html>

21.3 伪元素选择器（重点）

注意：

before 和 after 创建一个元素，但是属于行内元素

新创建的这个元素在文档树中是找不到的，所以我们称为伪元素语法： element::before {}

before 和 after 必须有 content 属性

before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素

伪元素选择器和标签选择器一样，权重为 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>伪元素选择器before和after</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
/* div::before 权重是2 */
div::before {
/* 这个content是必须要写的 */
/* display: inline-block; */
content: '我';
/* width: 30px;
height: 40px;
background-color: purple; */
}
div::after {
content: '小猪佩奇';
}
</style>
</head>
<body>
<div>
是
</div>
</body>
</html>

① 伪元素字体图标
1
2
3
4
5
6
7
p::before {
position: absolute;
right: 20px;
top: 10px;
content: '\e91e';
font-size: 20px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>伪元素选择器使用场景-字体图标</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?1lv3na');
src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?1lv3na') format('truetype'),
url('fonts/icomoon.woff?1lv3na') format('woff'),
url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}

div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}

div::after {
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
/* content: ''; */
content: '\e91e';
color: red;
font-size: 18px;
}
</style>
</head>

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

</html>

② 仿土豆效果
1
2
3
4
/* 当我们鼠标经过了土豆这个盒子，就让里面before遮罩层显示出来 */ .tudou:hover::before {
/* 而是显示元素 */
display: block;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

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

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例</title>
<style>
.tudou {
position: relative;
width: 444px;
height: 320px;
background-color: pink;
margin: 30px auto;
}

.tudou img {
width: 100%;
height: 100%;
}

.tudou::before {
content: '';
/* 隐藏遮罩层 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
}

/* 当我们鼠标经过了土豆这个盒子，就让里面before遮罩层显示出来 */
.tudou:hover::before {
/* 而是显示元素 */
display: block;
}
</style>
</head>

<body>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
</body>

</html>

③ 伪元素清除浮动

1
2
3
4
5
6
7
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

1
2
3
4
5
.clearfix:before,.clearfix:after {
content:"";
display:table;
}.clearfix:after {
clear:both; }

21.4 盒子模型
可以通过 box-sizing 来指定盒模型，有2个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）

box-sizing: border-box 盒子大小为 width

如果盒子模型我们改为了box-sizing: border-box ,那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3盒子模型</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
box-sizing: content-box;
}
p {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
/* css3 盒子模型盒子最终的大小就是 width 200 的大小 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
小猪乔治
</div>
<p>
小猪佩奇
</p>
</body>
</html>

21.5 滤镜filter
1
filter: 函数(); 例如： filter: blur(5px); blur模糊处理数值越大越模糊

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片模糊处理filter</title>
<style>
img {
/* blur是一个函数小括号里面数值越大，图片越模糊注意数值要加px单位 */
filter: blur(15px);
}
img:hover {
filter: blur(0);
}
</style>
</head>
<body>
<img src="images/pink.jpg" alt="">
</body>
</html>

21.6 calc 函数
1
width: calc(100% - 80px);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3属性calc函数</title>
<style>
.father {
width: 300px;
height: 200px;
background-color: pink;
}
.son {
/* width: 150px; */
/* width: calc(150px + 30px); */
width: calc(100% - 30px);
height: 30px;
background-color: skyblue;
}
</style>
</head>
<body>

<div class="father">
<div class="son"></div>
</div>
</body>
</html>

21.7 过渡
transition: 要过渡的属性花费时间运动曲线何时开始;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3 过渡效果</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 变化的属性花费时间运动曲线何时开始; */
/* transition: width .5s ease 0s, height .5s ease 1s; */
/* 如果想要写多个属性，利用逗号进行分割 */
/* transition: width .5s, height .5s; */
/* 如果想要多个属性都变化，属性写all就可以了 */
/* transition: height .5s ease 1s; */
/* 谁做过渡，给谁加 */
transition: all 0.5s;
}
div:hover {
width: 400px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

三、javascript
1.javascript简介
1.ECMAScript

ECMAScript由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

2.DOM ——文档对象模型

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

3.BOM ——浏览器对象模型

BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等

1.行内式 JS

1
<input type="button" value="点我试试" onclick="alert('Hello World')" />

2.内嵌 JS

1
2
3
<script>
alert('Hello World~!');
</script>

3.外部JS文件

1
2
3
4
5
6
7
<script src="my.js"></script>
/*
获取用户年龄和姓名
并通过提示框显示出来
*/
多行注释
注释：// 我是一行文字，不想被 JS引擎执行，所以注释起来

方法说明归属

alert(msg) 浏览器弹出警示框浏览器

console.log(msg) 浏览器控制台打印输出信息浏览器

prompt(info) 浏览器弹出输入框，用户可以输入浏览器

2.变量、数据类型
1
2
3
4
5
6
var age; // 声明一个名称为age 的变量
age = 10; // 给 age 这个变量赋值为 10
var gge = 18; // 声明变量同时赋值为 18
var age = 10, name = 'zs', sex = 2;
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串

JS 把数据类型分为两类：

简单数据类型（Number,String,Boolean,Undefined,Null）

复杂数据类型（object)

Infinity ，代表无穷大，大于任何数值

-Infinity ，代表无穷小，小于任何数值

NaN ，Not a number，代表一个非数值

isNaN() :用来判断一个变量是否为非数字的类型，返回 true 或者 false

1
console.log(isNaN(userName)); // true ，"andy"是一个非数字

转义符 解释说明

\n 换行符，n 是 newline 的意思

\ \ 斜杠 \

' ‘ 单引号

" ”双引号

\t tab 缩进

\b 空格，b 是 blank 的意思

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。

布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。

1
2
console.log(true + 1); // 2
console.log(false + 1); // 1

一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）

转字符串

转数值型

转布尔

代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined

其余值都会被转换为 true

3.运算符、分支、数组
+,-,*,/,%,>=,<=,==,<,>,!=,&&,||,!,+=,-=,/=,%=

=(!)==要求数据类型和数值都相同

1
2
var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100); // 结果不是 7，而是：7.000000000000001

逻辑与：语法：表达式1 && 表达式2

如果第一个表达式的值为真，则返回表达式2

如果第一个表达式的值为假，则返回表达式1

1
2
3
console.log( 123 && 456 ); // 456
console.log( 0 && 456 ); // 0
console.log( 123 && 456&& 789 ); // 789

逻辑或：语法：表达式1 || 表达式2

如果第一个表达式的值为真，则返回表达式1

如果第一个表达式的值为假，则返回表达式2

1
2
3
console.log( 123 || 456 ); // 123
console.log( 0 || 456 ); // 456
console.log( 123 || 456 || 789 ); // 123

表达式1 ? 表达式2 : 表达式3;

分支同java

for,while,do while 同java

数组:数组名.length”可以访问数组元素的数量（数组长度）。

1
2
3
4
var arr = [1,2,3,4,5];
var arrStus = ['小白',12,true,28.9];
var arr = ['red', 'green', 'blue', 'pink'];
arr[4] = 'hotpink';

4.函数、对象、内置对象
1
2
3
4
5
6
7
8
9
10
11
12
13
// 声明函数
function 函数名() {
//函数体代码
}
函数名();
//调用
function sum(num1, num2) {
    console.log(num1 + num2);
}
sum(100, 200);             // 形参和实参个数相等，输出正确结果
sum(100, 400, 500, 700);   // 实参个数多于形参，只取到形参的个数
sum(200);   // 实参个数少于形参，多的形参定义为undefined，结果为NaN

当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

1
2
3
4
5
6
7
8
9
10
11
function maxValue() {
var max = arguments[0];
for (var i = 0; i < arguments.length; i++) {
if (max < arguments[i]) {
max = arguments[i];
}
}
return max;
}
console.log(maxValue(2, 4, 5, 9));
console.log(maxValue(12, 4, 9));

作用域分为全局作用域和局部作用域

如下是被允许的

1
2
3
4
5
if(true){
var num = 123;
num2=abc;
}
console.log(num2); //不报错

对象创建1

1
2
3
4
5
6
7
8
9
10
11
var star = {
name : 'pink',
age : 18,
sex : '男',
sayHi : function(){
alert('大家好啊~');
}
};
console.log(star.name) // 调用名字属性
console.log(star['name']) // 调用名字属性
star.sayHi();

对象创建2

1
2
3
4
5
6
7
var andy = new Obect();
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
alert('大家好啊~');
}

遍历对象属性

1
2
3
4
for (var k in obj) {
console.log(k); // 这里的 k 是属性名
console.log(obj[k]); // 这里的 obj[k] 是属性值
}

Math.PI // 圆周率

Math.floor() // 向下取整

Math.ceil() // 向上取整

Math.round() // 四舍五入版就近取整注意 -3.5 结果是 -3

Math.abs() // 绝对值

Math.max()/Math.min() // 求最大和最小值

1
2
3
4
5
6
7
8
9
10
11
12
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var now = new Date();
console.log(now);
//检查是否为数组
var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false

1
2
3
4
5
6
var arr = [1, 64, 9, 6];
arr.sort(function(a, b) {
return b - a; // 降a序
// return a - b; // 升序
});
console.log(arr);

![屏幕截图 2022-10-20 182405](C:\Users\soul\Desktop\Markdown\前端\img\屏幕截图 2022-10-20 182405.png)

![屏幕截图 2022-10-20 182417](C:\Users\soul\Desktop\Markdown\前端\img\屏幕截图 2022-10-20 182417.png)

![屏幕截图 2022-10-20 182426](C:\Users\soul\Desktop\Markdown\前端\img\屏幕截图 2022-10-20 182426.png)

![屏幕截图 2022-10-20 182444](C:\Users\soul\Desktop\Markdown\前端\img\屏幕截图 2022-10-20 182444.png)

5.DOM
文档对象模型（简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

5.1 获取元素

根据 ID 获取

根据标签名获取

通过 HTML5 新增的方法获取

特殊元素获取

1
2
3
4
5
6
7
8
9
10
document.getElementById('id');
document.getElementsByTagName('标签名');

document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器'); // 根据指定选择器返回

doucumnet.body // 返回body元素对象
document.documentElement // 返回html元素对象

querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(‘#nav’);

5.2 事件
1
2
3
4
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('你好吗');
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<div>123</div>
<script>
// 执行事件步骤
// 点击div 控制台输出我被选中了
// 1. 获取事件源
var div = document.querySelector('div');
// 2.绑定事件注册事件
// div.onclick
// 3.添加事件处理程序
div.onclick = function() {
console.log('我被选中了');

}
</script>
</body>

</html>

5.3 操作元素
1
2
element.innerText//从起始位置到终止位置的内容, 但它去除 html 标签，同时空格和换行也会去掉
element.innerHTML//起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div,
p {
width: 300px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: pink;
}
</style>
</head>

<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>1123</p>
<script>
// 当我们点击了按钮， div里面的文字会发生变化
// 1. 获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注册事件
btn.onclick = function() {
// div.innerText = '2019-6-6';
div.innerHTML = getDate();
}

function getDate() {
var date = new Date();
// 我们写一个 2019年 5月 1日星期三
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
// 我们元素可以不用添加事件
var p = document.querySelector('p');
p.innerHTML = getDate();
</script>
</body>

</html>

innerText和innerHtml的区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<div></div>
<p>
我是文字
<span>123</span>
</p>
<script>
// innerText 和 innerHTML的区别
// 1. innerText 不识别html标签非标准去除空格和换行
var div = document.querySelector('div');
// div.innerText = '<strong>今天是：</strong> 2019';
// 2. innerHTML 识别html标签 W3C标准保留空格和换行的
div.innerHTML = '<strong>今天是：</strong> 2019';
// 这两个属性是可读写的可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
</body>

</html>

案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
// 修改元素属性 src
// 1. 获取元素
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
// 2. 注册事件处理程序
zxy.onclick = function() {
img.src = 'images/zxy.jpg';
img.title = '张学友思密达';
}
ldh.onclick = function() {
img.src = 'images/ldh.jpg';
img.title = '刘德华';
}
</script>

6.事件
常用的事件：

onload 加载完成事件：页面加载完成之后，常用于做页面 js 代码初始化操作

onclick 单击事件：常用于按钮的点击响应操作。

onblur 失去焦点事件：常用用于输入框失去焦点后验证其输入内容是否合法。

onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作

onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。

静态注册

1
2
3
4
5
6
<script type="text/javascript">
function 函数名(){
}
</script>
<标签事件名=“ 函数名 ();”>
1

动态注册：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type="text/javascript">
window.onload = function () {
//1 获取标签对象
var 标签对象= document.getElementById("id名称");
//2 通过标签对象.事件名= function(){}
标签对象.事件名= function(){
}
}
</script>

<script type="text/javascript">
function 函数名(){
}
</script>

<标签事件名=“ 函数名 ();”>
动态注册：

<script type="text/javascript">
window.onload = function () {
//1 获取标签对象
var 标签对象= document.getElementById("id名称");

//2 通过标签对象.事件名= function(){}
标签对象.事件名= function(){
}
}
</script>

childNodes：属性，获取当前节点的所有子节点

firstChild：属性，获取当前节点的第一个子节点

lastChild：属性，获取当前节点的最后一个子节点

parentNode：属性，获取当前节点的父节点

nextSibling：属性，获取当前节点的下一个节点

previousSibling：属性，获取当前节点的上一个节点

className：用于获取或设置标签的 class 属性值

innerHTML：属性，表示获取/设置起始标签和结束标签中的内容

innerText：属性，表示获取/设置起始标签和结束标签中的文本

~~文章作者: Matriy~~

~~文章链接: http://matriy330.github.io/99b5c3b0/~~

~~开发相关~~

赞助

~~wechat~~
~~alipay~~

~~相关推荐~~

2025-02-27
JavaSe
JavaSe一、Java简介1.C/S,B/S...
2025-02-07
Cookie与Session
Cookie与Session一、Cookie Cookie 是服务器通知客户端保存键值对的一种技术。客户端有了 Cookie 后，每次请求都发送给服务器。每个 Cookie 的大小不能超过 4kb 1.1 Cookie的创建 123456789101112protected void createCookie(HttpServletRequest req, HttpServletResponse resp) throws ServletException,IOException { //1 创建 Cookie 对象 Cookie cookie = new Cookie("key4", "value4"); //2 通知客户端保存 Cookie resp.addCookie(cookie); //1 创建 Cookie 对象 Cookie cookie1 = new Cookie("key5", "value5"); //2 通知客户端保存...
2025-02-05
EL 表达式与 JSTL 标签库
EL 表达式与 JSTL 标签库一、EL表达式1.1 EL 表达式简介EL 表达式的全称是：Expression Language。是表达式语言。 EL 表达式的作用：EL 表达式主要是代替 jsp 页面中的表达式脚本在 jsp 页面中进行数据的输出。因为 EL 表达式在输出数据的时候，要比 jsp 的表达式脚本要简洁很多。 EL 表达式的格式是：${表达式} EL 表达式在输出 null 值的时候，输出的是空串。jsp 表达式脚本输出 null 值的时候，输出的是 null 字符串。对比如下: 12345678<body> <% request.setAttribute("key","值"); %>表达式脚本输出 key 的值是： <%=request.getAttribute("key1")==null?"":request.getAttribute("key1")%><br/> ...
2025-02-03
Filter 过滤器
Filter 过滤器 Filter 过滤器它是 JavaWeb 的三大组件之一。三大组件分别是：Servlet 程序、Listener 监听器、Filter 过滤器 Filter 过滤器它是 JavaEE 的规范。也就是接口 Filter 过滤器它的作用是：拦截请求，过滤响应。拦截请求常见的应用场景有： 1、权限检查 2、日记操作 3、事务管理……等等 1.Filter入门案例要求：在你的 web 工程下，有一个 admin 目录。这个 admin 目录下的所有资源（html 页面、jpg 图片、jsp 文件、等等）都必须是用户登录之后才允许访问。思考：根据之前我们学过内容。我们知道，用户登录之后都会把用户登录的信息保存到 Session 域中。所以要检查用户是否登录，可以判断 Session 中否包含有用户登录的信息即可！！！ 12345678<% Object user = session.getAttribute("user"); // 如果等于 null，说明还没有登录 if (user ==...
2025-02-01
HTTP
...
2025-01-28
JSON&&AJAX
JSON&&AJAX一、JSON1.1 json简介JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式，而且很多语言都提供了对 json 的支持（包括 C, C++, C#, Java, JavaScript, Perl, Python等）。这样就使得 JSON 成为理想的数据交换格式。 json 是一种轻量级的数据交换格式。轻量级指的是跟 xml 做比较。数据交换指的是客户端和服务器之间业务数据的传递格式。 1.2 JSON 在 JavaScript 中的使用json 是由键值对组成，并且由花括号（大括号）包围。每个键由引号引起来，键和值之间使用冒号进行分隔，多组键值对之间进行逗号进行分隔。 1234567891011121314151617var jsonObj = { "key1":12, "key2":"abc", ...

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

转义符	解释说明
\n	换行符，n 是 newline 的意思
\ \	斜杠 \
'	‘ 单引号
"	”双引号
\t	tab 缩进
\b	空格，b 是 blank 的意思

Web前端开发

一、HTML

1.HTML简介

2.HTML语法规范

3.HTML常用标签

-

:独占一行,字号变大

4.HTML新增标签

4.1 新增的语义化标签

4.2 新增的多媒体标签

4.3 新增的 input 类型

4.4 HTML5 新增的表单属性

二、CSS

1.CSS简介

2.基础选择器

2.1 标签选择器

2.2 类选择器

2.3 id选择器

2.4 通配符选择器

2.5 示例代码

3.CSS文本属性

3.1 字体设置

3.2 文本属性

4.CSS引入方式

4.1 内部样式表

4.2 行内样式表

4.3 外部样式表

5.Emmet 语法

6.复合选择器

6.1 后代选择器 (重要）

6.2 子选择器 (重要）

6.3 并集选择器 (重要）

6.4 链接伪类选择器

6.5 :focus 伪类选择器

6.6 代码示例

7. 元素显示模式

7.1 块元素

~

~

等都是文字类块级标签，里面也不能放其他块级元素

7.2 行内元素

7.3 行内块元素

7.4 元素显示模式转换

7.5 背景属性

8.CSS的三大特性

8.1 层叠性

8.2 继承性

8.3 优先级

9.盒子模型

9.1 border

9.2 表格的细线边框

9.3 内边距(padding)

9.4 外边距(margin)

9.5 外边距合并

9.6 清除内外边距

9.7 综合案例

9.8 圆角边框

9.9 盒子阴影

10.文字阴影

11. 浮动

11.1 标准流（普通流/文档流）

11.2 浮动特性

11.3 浮动案例

11.4 要点

11.5 清除浮动

①额外标签法

②父级添加 overflow

③:after 伪元素法

④双伪元素清除浮动

12.定位

12.1 静态定位 static

12.2 相对定位 relative

12.3 绝对定位 absolute

12.4 子绝父相

12.5 固定定位 fix

12.6 粘性定位 sticky

12.7 定位叠放次序 z-index

12.8 绝对定位的盒子居中

13.元素的显示与隐藏

13.1 display 属性