python全栈-前端

兆。2025-03-25 14:41

python全栈-前端

文章目录

前端三剑客：HTML，JS，CSS

应用场景：APP，网页，小程序

HTML

超文本标记语言

HTML5是用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以 .html 结尾。HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如： <html>

  • 标签有两种表现形式：

    1 双标签，例如： <html></html>

    2 单标签，例如： <img>

  • HTML5的DOCTYPE声明

    DOCTYPE是 document type (文档类型) 的缩写。 <!DOCTYPE html > 是H5的声明位于文档的最前面，处于标签之前。他是网页必备的组成部分，避免浏览器的怪异模式。就是<!DOCTYPE html>

html标签

定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开

始点和结束点。

head标签

head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

body标签

body 元素定义文档的主体，body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）它会直接在页面中显示出来，也就是用户可以直观看到的内容

title标签

1 可定义文档的标题。

2 它显示在浏览器窗口的标题栏或状态栏上。

3 <title> 标签是 <head> 标签中唯一必须要求包含的东西，就是说写head一定要写title

4 <title> 的增加有利于SEO优化

SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求

meta标签

meta标签用来描述一个HTML网页文档的属性，关键词等，例如：charset="utf-8" 是说当前使用的是 utf-8 编码格式，在开发中我们经常会看到 utf-8 ，或是 gbk ，这些都是编码格式，通常使用 utf-8 。

  • 注释
html 复制代码 
<!-- 这是一段注释 -->
<!-- 可以换行
这里的内容不会被浏览器显示 

-->

在开始标签中有一个叹号，但是结束标签中没有

标签

标题介绍与应用

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。

<h1> 定义最大的标题 <h6> 定义最小的标题

  • 正确使用标题

    请确保将 HTML 标题标签只用于标题。

    不要仅仅是为了生成粗体或大号的文本而使用标题。

    正确使用标题有益于SEO

    应该将 < h1> 用作主标题（最重要的），其后是 <h2> （次重要的），再其次是 <h3> ，以此类推

  • 标题标签位置摆放

    在标签中添加属性： align="left | center | right" 默认居左

段落p、换行br、水平线hr

段落是通过 <p> 标签定义的

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br>

<br /> 元素是一个空的 HTML 元素。

水平线 <hr/> 标签在 HTML 页面中创建水平线，使用率很低

水平线的属性：

1 color：设置水平线的颜色

2 width：设置水平线的长度px

3 size：设置水平线的高度

4 align：设置水平线的对齐方式（默认居中），可取值left|right

图片img

网站中最多的元素

网站中最多的元素毋庸置疑，一定是图片<img> 标签定义 HTML 页面中的图像<img> 是单标签，不需要进行闭合操作

属性：

1 src：路径（图片地址与名字）网络图片最好了。本地图片最好在项目文件里面

2 alt：规定图像的替代文本，当图片不能显示的时候，就会显示一个碎裂的图片，后面显示alt的文本内容

3 width：规定图像的宽度

4 height：规定图像的高度

5 title：鼠标悬停在图片上给予提示

如果高度或者宽度只设置了一个，那么这个图片就会等比例缩放

如果宽高都设置了，与原图片的比例不一致，这个图片就会被拉伸

路径src

绝对路径，绝对路径是电脑的盘符存储与访问的具体地址

相对路径，两者相对关系，两者在同⼀路径下可以直接访问

1 ⼦级关系: /

2 ⽗级关系: .../

3 同级关系: ./

网络路径，具体的⽹络地址

超文本链接a

HTML使用标签 <a> 来设置超文本链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

超链接属性

在标签 <a> 中使用了 href 属性来描述链接的地址

默认情况下，链接将以，以下形式出现在浏览器中：

1 一个未访问过的链接显示为蓝色字体并带有下划线。

2 访问过的链接显示为紫色并带有下划线。

3 点击链接时，链接显示为红色并带有下划线。按住不松手是红色

后期我们会通过CSS样式修改掉这些效果

超链接表现

当鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手

超链接之锚点href#id

超链接可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。跳转到当前文档的某个部分的形式就是"锚点

类似哔哩哔哩首页的页面，两侧有视频推荐。点击某一类视频的时候，就会把当前的页面跳转过去，就是上下滑动。

锚点实现方式

html 复制代码 
<a href="#hello">跳转到当前页</a>
<p id="hello">文本信息</p>

a标签是超链接，在href后面写#号，后面跟想要跳转元素的id值。回到页面之后，点击超链接，就可以跳转过去了

可以成对出现，实现来回跳转的功能

文本

  • em 着重文字，有斜体效果
  • b 粗体文字
  • i 斜体字
  • strong 加重语气，有加粗效果
  • sub 下标字，比正常的行靠下一点点
  • sup 上标字，靠上一点
  • del 删除字，就是有一个横线，类似原价和折扣价
  • span 没有什么含义，后期通过CSS设计

常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇

有序列表ol

有序列表

有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于<ol> 标签。每个列表项始于 <li> 标签。

就是整个列表，需要使用ol包住，每一个列表元素需要使用li包住

html 复制代码 
<ol>
    <li>第一项元素</li>
    <li>第二个</li>
</ol>

在页面显示的时候会自动生成序号

  • type属性<ol> 的属性type 拥有的选项

    • 就是ol列表标签，自带的type属性。默认是type='1'
    • 1 表示列表项目用数字标号（1,2,3...）
    • a 表示列表项目用小写字母标号（a,b,c...）
    • A 表示列表项目用大写字母标号（A,B,C...）
    • i 表示列表项目用小写罗马数字标号（i,ii,iii...）
    • I 表示列表项目用大写罗马数字标号（I,II,III...）

  • 有序列表嵌套

    列表是可以进行嵌套的

html 复制代码 
<ol>
    <li>111</li>
    <li>
        <ol>
            <li>1.1</li>
            <li>1.2</li>
        </ol>
    </li>
    <li>222</li>
</ol>

无序列表ul

无序指的是没有序号

在有序列表的序号位置是一个小黑点

使用方式和有序列表一样，但是ol变成ul了

  • ul也有自己的type
    • disc 默认实心圆
    • circle 空心圆
    • square 小方块
    • none 不显示

无序列表也可以像有序列表嵌套，方式也一样

  • 应用场景
    • 导航
    • 虽然导航是左右排列，那也是后续使用CSS设计的

自定义列表

有三种标签：dl,dt,dd

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

作为了解即可，其他列表也可以实现这个效果

表格table

表格在数据展示方面非常简单，并且表现优秀

有border属性的时候，可以清晰的看到页面设计。如果没有border属性，可以利用表格的对齐方式，设计页面布局

  • 表格组成与特点
    行、列、单元格
    单元格特点：同行等高、同列等宽

整个表格需要用table标签包裹，每一行元素需要用tr包住，每一行里面的每一列要用td包住

  • 表格其他标签
    • 表格名字： <caption>
    • 表格头部： <thead> 就是首行效果，字体自动加粗
    • 特殊单元格： <th> 搭配头部使用
    • 表格的身： <tbody> 就是表格元素都放在表格身体包住
    • 表格的尾部： <tfoot> 尾行效果

实际上效果不大，都可以使用普通表格加CSS设计出来

  • 复杂且并不常用的表格标签
html 复制代码 
<table>
    <caption>表格名字</caption>   
    <thead>   表格头部，首行
        <th>姓名</th>   特殊单元格，其实没什么
        <th>年龄</th>
    </thead>
    <tbody>   表格身
        <tr>
            <td>张三</td>
            <td>30</td>
        </tr>
    </tbody>
    <tfoot>  表格尾部
        <tr>
            <td>李四</td>
            <td>20</td>
        </tr>
    </tfoot>
</table>

表格属性

  • 表格整体属性table，单位基本上是px
    • border：设置表格的边框厚度
    • width：设置表格的宽度
    • height：设置表格的高度
    • align：设置表格相对于页面的水平对齐方式，左left,中center,右right
    • cellpadding：设置内容距离边框的距离，内边距
    • cellspacing：设置单元格之间的距离，就是外边距，也是每个单元格和整个表格边框的距离
    • bgcolor：设置表格背景颜色
    • bordercolor：设置边框颜色
    • background：设置背景图片
    • 当cellspacing=0的时候，每个单元格彼此相连，还和大的边框相连，就会形成一个正常的表格
  • 行属性tr
    • height：设置一行的高度
    • bgcolor：设置一行的背景颜色
    • background：设置一行的背景图片
    • align：设置行里内容水平对齐方式，取值：left、center、right
    • valign：设置行里内容垂直对齐方式，取值：top、middle、bottom
  • 列属性td
    • width：设置单元格的宽度，同列等宽
    • height：设置单元格的高度，同行等高
    • align：设置单元格内容水平对齐方式
    • valign：设置单元格内容垂直对齐方式
    • bgcolor：设置单元格背景颜色
    • background：设置单元格背景图片

单元格特点：同行等高、同列等宽

单元格的长宽都需要跟他所在的行列对齐，所以设置宽度，就是设置这一列的宽度。设置单元格高度，就是设置这一行的高度。

属性很多，根本记不住，有个概念即可，到时候回来看看就够了

单元格合并

水平合并：colspan

垂直合并：rowspan

合并几个单元格，就写数字几。虽说是合并单元格，不如说是把当前的单元格做拉伸。

如果不修改单元格的数量，因为一些单元格做了调整，剩下的单元格都会被迫让步，并不会消失覆盖，就有很多单元格相对于原表格来说突出来了。

为了表格美观，还需要对一些单元格进行删除。

一个单元格如果被别的单元格拉伸所影响，这个单元格只会不断的向右移动。比如，一个单元格，受到了上一行单元格的拉伸，这个单元格就会向右移动。

水平合并和垂直合并可以同时使用

html 复制代码 
<table align="center" border="1" width="500px" height="200px" cellspacing="0">
    <tr>
        <td colspan="3">单元格1单元格2单元格3</td>  把单元格1.1横向拉伸3格，原本的1.2和1.3单元格需要删除
        <td>单元格4</td>
        <td>单元格5</td>
    </tr>
    <tr>
        <td rowspan="2">单元格6-11</td>
        <td>单元格7</td>
        <td rowspan="3">单元格8</td>
        <td colspan="2" rowspan="2">单元格9</td>
    </tr>
    <tr>
        <td>单元格10</td>
    </tr>
    <tr>
        <td>单元格11</td>
        <td>单元格12</td>
        <td>单元格13</td>
        <td>单元格14</td>
    </tr>
</table>

表单Form

主要是实现用户输入，保证网站的交互性

表单在 Web 网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。

所有的用户输入内容的地方都用表单来写，如登录注册、搜索框

表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件

  • 格式：<form action="url" method="get|post" name="myform"></form>

  • 属性说明

    • action服务器地址，就是url
    • name表单名称
    • method中Get和Post的区别，就是请求方式
      • 数据提交方式，get把提交的数据url可以看到，post看不到。因为post看不到所以post是安全方式，对应的get是不安全的会暴露信息。一般登录操作需要使用post实现
      • get一般用于提交少量数据，post用来提交大量数据

对于现阶段来说，不与服务器交互，这些网络属性没啥用

form表单是一个容器，不放控件，这个表单看不到

  • 表单元素

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮

就是输入框和按钮

input标签

  • 文本框/文本域 input type=text

就是输入框，需要使用input标签，同时typr属性需要是text

有name属性，与服务器交互的时候使用

  • 密码框 input type=password

密码字段字符不会明文显示，而是以星号或圆点替代

  • 单选按钮 input type=radio

需要有一个value属性，也就是告诉服务器用户选择了哪个选项

使用name属性，把独立的单选按钮按照name的值，组合成一个选项组，没有name属性，单选按钮就变成了普通按钮

  • 复选框 input type=checkbox

必要的属性：name区分这个选项是哪个组的，value

  • 文件 input type=file

定义文件选择字段和 "浏览..." 按钮，供文件上传

  • 提交按钮 input type=submit

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

属性有value，value的值/内容，会显示在按钮上面

  • 重置按钮 input type=reset

定义重置按钮（重置所有表单值为默认值）。就是清空输入框

也可以使用value把重置按钮的文字内容修改

请谨慎使用重置按钮！对于用户来说，不慎点击了重置按钮是件很恼火的事情

  • 按钮 button

不再是input标签了，是button标签

是独立的标签，可以在表单外面。任意一个地方都可以。就是一个按钮。

把文本内容写在标签里面，就可以直接显示在页面的按钮上了，不需要使用value属性

  • 图片按钮 input type=image src=图片路径

定义图像作为提交按钮。就是把一个图片作为一个按钮

  • 下拉列表 select包住 option选项

下拉列表，就是提供多个选项的，显示一个那种。需要使用select包住，option是创建选项的。optgroup可以创建选项组，比如几个选项是一组，这个组可以显示在下拉式列表里面，但是这个组不能被选择，只能选择选项。

有选项组的时候，是select包住optgroup，optgroup再包住选项option

选项组optgroup，需要使用属性label，显示选项组的名称

选项想要显示文本，直接写在option中间就可以

  • 多行文本框textarea

可以容纳无限文本内容，使用属性cols和rows控制这个多行文本框的大小。最好的方式还是使用CSS的width和height

  • 标签label

没有任何特殊效果，但是有一个for属性，使用label的for属性可以绑定其他的控件

在其他元素中设置id属性，然后把id的值交给label的for属性。我们在点击label文本的时候，就会自动跳转到for绑定的元素。

如果for绑定的是按钮，点击label的时候就是勾选按钮。如果绑定的是输入框，点击label的时候，就是点击了输入框，可以直接输入信息

HTML5新增type属性

  • 邮箱字段验证 input type=email

在提交表单的时候，自动验证这个email类型的输入框文本是不是邮箱类型，比如必须包含@符号

  • 网址验证input type=url

检查这个标签里面填写的文本是不是一个网址。

  • 含有删除符号的输入框input type=search

就是一个正常的输入框，但是在输入框的末尾有一个×，点击这个符号的时候，就会清空输入框，只对那一个输入框有效

类似在哔哩哔哩查找视频的时候，输错了内容，需要把内容全删，重新输入，这时候有了叉，就可以直接清空了

  • 识别手机号tel

这个标签，没有任何提示，输入非数字内容也可以提交。没有效果。

  • 拾色器 input type=color

这个标签就是一个拾色器，点击这个标签，就会打开一个拾色器窗口。显示颜色的RGB

  • type=number

定义输入数字的区间。这个标签会自动生成选项，类似下拉式列表，列表里面是纯数字。通过属性min和max控制数字的区间大小。用户可以点击输入框右侧的上下箭头选择数字。

如果用户直接输入数字，就可以跳过这个限制。

  • 拖动条range

定义用于精确值不重要的输入数字的控件（比如 slider 控件）。

是一个拖动条，用户可以随意拖动，背后是代表数值。类似播放音乐的音量，可以随意拖动。

使用下面的属性来规定限制：

max : 规定允许的最大值。

min : 规定允许的最小值。

step : 规定合法数字间隔。

value : 规定默认值。就是拖动条的按钮一开始所在的位置

  • 日期type=date

点开这个标签的时候，弹出一个类似日历的窗口，然后让用户选择日期

  • 月份input type=month

刚刚的日期点开后，可以选择的是月份。就是没有几号了，只能选择这一年中的几月。

  • 周 week

选择日期的周，使用率很低

HTML5新增常用属性

  • autofocus 自动获取焦点属性

就是打开这个页面的时候，自动点击的控件。比如百度网页，打开百度的时候，自动点击搜索框。

只需要在控件中，加入autofocus属性就行

  • placeholder 输入框的提示文本

就是输入框的提示内容，比如，登录界面告诉你这个输入框可以填写什么内容，手机号，邮箱，或者qq号。这种提示内容。

鼠标选中这个输入框的时候，提示信息还有，但是一写文本，提示自动消失。

  • required 判空条件

输入框不能为空，为空的时候，不让提交，类似之前设计登录界面的时候对各种输入框进行判空操作。

在想要添加判空条件的输入框加上这个属性就可以。

实体字符

就是关键字，比如大于小于号，在html网页中是特殊符号。

想要输出他们到网页上，不能直接写。需要使用别的符号代替

  • 空格 &nbsp； &#160；
  • 大于 &lt；&#60；
  • 小于 &gt；&#62；
  • and &amp；&#38；
  • 双引号 &quot；&#34；
  • 单引号 &apos；&#39；
  • 版权© &copy；&#169；
  • 商标® &reg；&#174；
  • 人民币￥&yen；&#165；

大小写不能忽略

前面是实体符号，后面是实体编号，效果一样

块元素与行内元素/内联元素

  • 块元素

在页面中独占一行，垂直排列

可以设置长宽

块元素可以包含块元素和内联元素

常见块元素：div,form,h1~h6,hr,p,table,ul等

  • 内联元素

在页面中只占自身的大小，长宽设置无效

内联元素只能包含内联元素

常见内联元素：a,b,em,i,span,strong等

  • 既是内联元素也是块元素：input，button，img等

一般使用CSS设计样式，宽高什么的

容器元素div

主要是作为页面划分的容器，一种布局工具

通过CSS设计布局大小和样式,在css里面设计宽高的时候,可以使用%,占全屏的多少

HTML5新增布局标签

HTML5 是 HTML 最新的修订版本，2014年10月由万维网联盟 （W3C） 完成标准制定

在 HTML5 出现之前，我们一般采用 DIV+CSS 布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫SEO对我们页面的爬取。为了解决上述缺点， HTML5 新增了很多新的语义化标签

因为是新增标签，在老版本的浏览器上不能使用这些标签。也就是兼容性不好，对于用户量很大的网站，比如购物网站，只能采用老的办法去设计布局

常见新增标签：

  • header头部
  • nav导航
  • section章节，页眉，页脚
  • aside侧边栏
  • footer脚部
  • article内容块，比如评论，帖子，博客

视频音频

HTML5未出来之前，在线的音频和视频都是借助Flash或者第三方工具实现的，现在HTML5也支持了这方面的功能。在一个支持HTML5的浏览器中，不需要安装任何插件就能播放音频和视频。

视频

Video标签定义视频，比如电影片段或其他视频流

因为老旧浏览器不支持这个标签，可以在video标签里面提醒用户一下。

html 复制代码 
<video >您的浏览器不支持视频播放</video>

当用户不能正常使用这个标签的时候，就会显示这段话。

属性：

  • src 要播放的视频的 URL
  • autoplay 自动播放
  • controls 显示控件,比如播放按钮，没有这个属性，就不能播放视频
  • loop 循环播放
  • muted 输出被静音
  • preload 页面加载的时候,自动预加载资源，先加载视频，不用全部的框架被加载出来
  • height 设置播放器高度
  • width 设置播放器宽度
  • poster 视频封面，如果有自动播放，封面就会一闪而过

在谷歌浏览器想要使用自动播放功能，必须搭配muted静音播放

设置宽高的时候，如果只设置一个长或宽，视频会等比例缩放。

如果宽高都设置了，这个视频会按照最长边缩放，其余部分用空白补全

音频

Audio 标签定义声音，比如音乐或其他音频流

属性：

  • src 要播放的音频的 URL
  • autoplay 自动播放
  • controls 显示控件,比如播放按钮
  • loop 循环播放
  • muted 输出被静音
  • preload 页面加载的时候,自动预加载资源

source

因为浏览器对视频或者音频的解码方式不同，所以有了这个标签

这个标签要在视频或音频标签里面

html 复制代码 
<audio controls>
   <source src="horse.ogg" >  视频解码格式
   <source src="horse.mp3" >
</audio>

HTML5新增标签

使用率比较低，了解即可

  • figure 给图片加注释

就是给一个正常的图片下面写描述

html 复制代码 
<figure>
 <img src="img.gif" alt="figure标签"title="figure标签" />    图片资源
 <figcaption>figure的标题</figcaption>    图片的描述
</figure>
  • details 一个按钮，用于展示内容

用于描述文档或文档的某个部分的细节，类似于下拉列表

就是一个详情按钮，点开的时候，可以展示一些东西，文本等等

具有一个open属性，有这个属性的时候，我们想要展示的内容自动打开。也可以手动关闭。

  • mark 高亮效果

用于包裹一些内容，高亮背景

  • meter 进度条

类似拖动条

<meter min="0" max="100" value="81" low="20" high="80"></meter>

  • 参数：

    • low:最低临界点
    • high：最高临界点
    • Min：最小值
    • Max：最大值
    • Value：当前值

  • progress 进度条

  • datalist 配合input构成下拉列表的效果

  • canvas 定义图标，盛放图形等内容

CSS

文件的后缀名是.css

如果是在html文件里面设计css样式，就不用创建css文件了

css就是一个皮肤修改器，对网页中已有的标签进行样式的设计

  • 语法 选择器{声明}

我们通过各种属性设计的样式就是声明

CSS的引入方式

一般是这几种样式混合使用,允许混合使用

内联/行内样式

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性

  • 缺乏整体性和规划性，不利于维护，维护成本高,只能给一个标签设计

比如:<p style="background: orange; font-size:24px;">CSS<p>

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表

  • 单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱
html 复制代码 
<head>
    <style>
       h1 {
           background: red;
       }
    </style>
</head>

外部样式（推荐）

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 link 标签链接到样式表。 link 标签在（文档的）head头部

<link rel="stylesheet" type="text/css" href="xxx.css">

type代表是css文件,文件格式

href是css文件路径

rel代表外部样式表

导入式

此种方式使用率比较低,因为会影响加载速度

html 复制代码 
<style type="text/css">
   @import url("css文件路径");
</style>

  • @import和link的区别

    • @import 是 CSS 提供加载样式的一种方式，只能用于加载 CSS 。 link 标签除了可以加载 CSS外，还可以做很多其它的事情，比如定义 rel 连接属性等

    • 加载顺序的差别。当一个页面被加载的时候， link 引用的 CSS 会同时被加载， @import 引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式（就是闪烁），网速慢的时候会比较明显

      兼容性的差别。

    • @import 在 IE5 以上才能识别，而 link 标签无此问题

    • 使用 dom 控制样式时的差别。当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为 dom 操作元素的样式时，用 @import 方式的样式也许还未加载完成

    • 使用 @import 方式会增 HTTP 请求，会影响加载速度，所以谨慎使用该方法

就是别用导入式就完了,用外部样式就可以

CSS特征

  • 继承性 层叠性 优先级

继承性

指被包含在内部的标签可以拥有外部标签的样式，比如：text-、font-、line-height，但有些属性不能继承，比如：border、padding、margin

我们在设计样式的时候,一般对容器设置,容器里面的标签也可以使用容器的样式,容器的样式也不是全都可以直接拿来用,所以有了继承性的概念,有的样式可以被拿来直接使用,有的不可以

层叠性

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。

例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果

优先级

样式定义冲突时，按照不同样式规则的优先级来应用样式

行内样式>内部样式（外部样式）

内部样式和外部样式优先级一样，写在后面的生效

CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它

CSS注释以 /* 开始, 以 */ 结束,

/* 这是注释 */

CSS选择器

  • 主要作用: 选择哪些标签,设计什么属性

  • 全局选择器*

    • 可以与任意选择器匹配,优先级最低,不推荐使用.也叫通配符,所有元素都生效

    • 一般用于初始化操作,比如网页预留的内边距和外边距

    html 复制代码 
    *{
	margin=0;
	padding=0;   清空浏览器默认的边距
}
    • 对于所有的标签元素来说,都有一个默认的边距,可以使用这个初始化操作,把所有的标签边距归零

  • 元素选择器

    • HTML文档中的元素， p、b、div、a、img、body 等.按照标签类型来选择
    • 标签选择器，选择的是页面上所有这种类型的标签，所以经常描述"共性"，无法描述某一个元素的"个性"...意思就是选择所有类型的标签,不能单独给一个同类型的标签开小差
    • 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等
    • 无论这个标签藏的多深，一定能够被选择上
    • 选择的所有，而不是一个

  • class类选择器 (最常用的)

    • 规定用圆点 . 来定义，针对你想要的所有标签使用

    html 复制代码 
    <h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
 	width:800px;
}

    • 只要给这个标签设置一个class属性,然后在css里面使用点+class值的方式,就可以对某个标签进行设计

    • 而且这个类选择器是通用的,按照class属性设计的样式,可以给任何含有这个class属性相同的任何标签进行使用.

    • 我们一开始只给一个p标签设计了class属性,拿着他的值进行设置,后面又创建了一个h标签,感觉p的设计很好,直接给h标签添加这个class属性就可以了.这个p标签和h标签共用一个类选择器.

  • class属性的特点

    • 类选择器可以被多种标签使用
    • 类名不能以数字开头
    • 同一个标签可以使用多个类选择器。用空格隔开 class="test1 tt2" 一个标签使用两个类选择器
    • 一个标签里面只能有一个class属性,不能是多个class

  • ID选择器

    • 针对某一个特定的标签来使用，只能使用一次。 id后面的属性值,只能出现一次.

    • css 中的 ID选择器 以 #来定义

    html 复制代码 
    <h2 id="mytitle">你好</h2>
#mytitle{
   border:3px dashed green;
}

    • ID是唯一的

    • ID不能以数字开头

  • 合并选择器

    • 就是在设计样式的时候,有很多相同的设计,因为在不同的选择器里面,导致不通用.合并选择器就是解决这个问题的
    • 作用：提取共同的样式，减少重复代码
    • 和别的选择器写法一样,就是使用逗号隔开,比如类名等等

  • 选择器的优先级

    • CSS中,权重用数字衡量
    • 元素选择器的权重为: 1
    • class选择器的权重为: 10
    • id选择器的权重为: 100
    • 内联样式的权重为: 1000
    • 优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器

div+css布局 布局的重要性

  • 优点

    • 符合W3C标准
    • 使页面载入得更快
    • 保持视觉的一致性
    • 修改设计时更有效率
    • 搜索引擎友好

  • 布局时常用的属性

    • width 宽度
    • height 高度
    • background-color 背景颜色
    • float 浮动（div不在独占一行，左右摆放） 是当前标签相对于父级容器的摆放方式

布局

float的默认是垂直摆放,float=left是水平靠左摆放，float=right是水平靠右摆放

CSS常用属性

字体属性

CSS字体属性定义字体，加粗，大小，文字样式

  • color 文本的颜色，常用十六进制
html 复制代码 
div{ color:red;}        直接写英文单词
div{ color:#ff0000;}        用十六进制，常用的
div{ color:rgb(255,0,0);}    用rgb值，颜色取值范围是0-255
div{ color:rgba(255,0,0,.5);}  rgba的a代表透明度，a的取值范围是0-1，0是完全透明，1是完全不透明

一般美工，或者设计师会给你十六进制的颜色取值。按照美工的设计去编写前端页面

  • font-size 文本的大小
html 复制代码 
h1 {font-size:40px;}
p {font-size:14px;}

chrome浏览器接受最小字体是12px，再小就小不了了

如果确实有再小的字体要求，还有特殊方法实现

  • font-weight 文本的粗细，常用数值取值，比较灵活
    • bold 粗体字符
    • bolder 更粗的字符，在视觉上和bold没有区别
    • lighter 更细的字符
    • 100~900 定义由细到粗 400等同默认，而700等同于bold
html 复制代码 
div{font-weight:bold;}
p{font-weight:900;}   常用数值取值

  • font-style 文本的字体样式

    • normal 默认值
    • italic 斜体字

  • font-family 指定一个元素的字体

每个值用逗号分开，如果字体名称包含空格，它必须加上引号

font-family:"Microsoft YaHei","Simsun","SimHei";

可以一次性设置多个字体，浏览器按照从左到右去使用，第一个不支持就第二个字体，以此类推

背景属性

CSS背景属性主要有以下几个

  • background-color 设置背景颜色

  • background-image 设置背景图片

    • 下面是基于背景图片的设置
    • background-attachment 设置背景图片是随内容滚动还是固定
    • background-position 设置背景图片显示位置
    • background-repeat 设置背景图片如何填充
    • background 复合属性

  • background-color 背景颜色

html 复制代码 
<div class="box"></div>
.box{
    width: 300px;
    height: 300px;
    background-color: red;
}

和字体颜色的取值方式一样

  • background-image 背景图像

在网页中显示图片的方式有两种：1. 使用img标签 2. 使用背景图片

元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分

html 复制代码 
<div class="box"></div>
.box{
    width: 600px;
    height: 600px;
    background-image: url("img1.jpg");
}

因为是背景图片，我们还可以写文字内容，文字内容会浮现在图片上面。

如果使用的是img图片，就不可以直接写文字在图片上面。

  • background-repeat 如何平铺背景图像，图片的填充方式
    • repeat 默认值
    • repeat-x 只向水平方向平铺，垂直方向不够的话就是空，不进行填充
    • repeat-y 只向垂直方向平铺
    • no-repeat 不平铺

这个是不改变图形大小，只是把有空余的地方使用图片填充。不缩放图片

html 复制代码 
.box{
    width: 600px;
    height: 600px;
    background-image: url("img1.jpg");
    background-repeat: no-repeat;
}
  • background-size 背景图像的大小，常用cover
    • length 设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto(自动)
    • percentage 计算相对容器的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
    • cover 图片充满容器，自动等比例放大
    • contain 等比缩放至完整的显示图片，不会占满容器。缩放到正好和容器一致。
html 复制代码 
.box{
    width: 600px;
    height: 600px;
    background-image: url("img1.jpg");
    background-size: 100% 100%;
}

如果使用了length设置了长宽，图片的格式不一致，就会按照设置的长宽进行拉伸。如果只设置了一个长度，就会按照哪个长度对图片进行等比放大。多余的地方不显示。

  • background-position 背景图像的起始位置，其默认值是：0% 0%
    • 第一个是x轴，第二个是y轴
    • left top 左上角，默认
    • left center 左 中
    • left bottom 左 下
    • right top 右上角
    • right center 右 中
    • right bottom 右 下
    • center top 中 上
    • center center 中 中
    • center bottom 中 下
    • x% y% 第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100% 。如果只指定了一个值，其他值默认是50% 默认是0% 0%
    • xpos ypos 单位是像素
html 复制代码 
.box{
    width: 600px;
    height: 600px;
    background-image: url("img1.jpg");
    background-position: center;
}

  • background-attachment 固定或者随页面滚动，正常是scroll

    • scroll 背景图片随页面滚动而滚动。就是图片相对于容器是固定的。滑动页面的时候，图片平行上移
    • fixed 背景图片固定，就是背景图片相对于页面是固定的。我们上移页面的时候，容器也会上移，而图片不动，有一个图片从下面逐渐消失的过程。

  • background 在一个声明中设置所有的背景属性。不利于初学者掌握

background-image、background-repeat、background-position其中background-size单独书写

就是第一个值代表图片，第二个值是重复方式，第三个是起始位置

html 复制代码 
.box{
    width: 600px;
    height: 600px;
    background: url("img1.jpg") center scroll;   融合了
	background-size: 100% 100%;
}

文本属性

控制文本显示效果

  • text-decoration:none;去除超链接的下划线

  • text-align 水平对齐方式

    • left 文本居左排列，默认值
    • right 把文本排列到右边
    • center 把文本排列到中间

  • text-decoration 下划线、上划线、删除线

    • underline 下划线
    • overline 上划线
    • line-through 删除线
html 复制代码 
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}

  • text-transform 大小写

    • captialize 每个单词开头大写

    • uppercase 全大写

    • lowercase 全小写

html 复制代码 
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}
  • text-indent 首行文本缩进

p{ text-indent:50px;}

负值是允许的。如果值是负数，将第一行左缩进.就是最左侧的内容被遮盖了

列表属性

  • line-height 列表字体高度

  • list-style-type

    • none 无标记
    • disc 标记是实心圆
    • circle 标记是空心圆
    • square 标记实心方块
    • decimal 标记是数字

就跟之前使用列表标签的效果一样，但是这是CSS设计的

ul.a {list-style-type: circle;} ul.b {list-style-type: square;}

  • list-style-image 把列表前面的序号改成图片

使用图像来替换列表项的标记

ul {list-style-image: url('sqpurple.gif');}

  • list-style-position 指示如何相对于对象的内容绘制列表项标记

    • inside 列表项目标记放置在文本内

    • outside 列表项目标记放置在文本外

ul { list-style-position: inside;}

就是列表前面的符号或图片，是否包含在列表项里面

给列表项设置边框，就可以看到列表项前面的符号在不在列表项里面了

  • list-style 简写设置列表属性

可以设置的属性（按顺序）： list-style-type, list-style-position,list-style-image

就跟设置背景属性那个一样，除非特别熟练，否则别用

ul { list-style: none;} 这是唯一的作用，删除列表前面的标记

表格属性

  • 表格边框 border

table, td {border: 1px solid black;} 第三个参数是颜色，第二个参数是边框为实线的意思

  • 折叠边框 border-collapse

设置表格的边框是否被折叠成一个单一的边框或隔开

table { border-collapse:collapse; }

就是每个单元格之间有没有空隙，或者说，单元格和表格之间有没有空隙

  • 表格宽度和高度 width和height

table { width:300px; height=500px}

  • 表格内部单元格文字对齐 text-align

属性设置水平对齐方式，向左left，右right，中心center

td { text-align:right; }

垂直对齐属性设置垂直对齐，上top，中center，下bottom

td { vertical-align:bottom; }

  • 表格填充 内边距

如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性

td { padding:15px; }

设置这个内边距的时候，不要设置表格整体的大小了，会限制单元格大小的

  • 表格颜色 指定边框的颜色，和th元素的文本和背景颜色

table, td, th { border:1px solid green; }

这里面的第三个参数就是表格的颜色

td { background-color:green; color:white; }

指定背景颜色background-color

其他常用属性

  • letter-spacing 字符间距

length 定义字符间的固定空间

h1 {letter-spacing:10px}

字间距可以为负数，就叠在一起了，没有意义

  • line-height 行高

h1 {line-height:30px}

一般是在一个容器里面，对一行文本进行垂直居中操作。比如给一个div设置高度为80px，把这个p标签的行高设置成80px。就是垂直居中了。

  • overflow 常用auto

    • visible 默认值，有多少文本就显示多少，会超出容器
    • hidden 超出容器内容被修剪，超出的部分被隐藏
    • scroll 内容会被修剪，但是可以滚动查看剩余内容。多了一个滚动条，可以上下拉，左右拉
    • auto 如果内容被修剪，可以滚动滚动查看剩余内容。只能上下滚动，不能左右滚动，左右方向也没有滚动条

  • white-space 元素内的空白怎样处理

    • pre 空白会被浏览器保存
    • nowrap 文本不会换行

就是在只有一行文本的情况下，超出的部分，会以。。。的形式隐藏

p { white-space: nowrap; 不会换行，以省略号的方式代替 overflow: hidden; 超出部分隐藏 text-overflow: ellipsis; 隐藏的部分用省略号代替 }

这三个属性必须同时使用，互相配合。。。

  • verticle-align 元素的垂直对齐方式
    • text-top 把元素的顶端与父元素字体的顶端对齐
    • middle 把此元素放置在父元素的中部。
    • text-bottom 把元素的底端与父元素字体的底端对齐。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

img{vertical-align:middle;}

就是当图片和文本混合在一起的时候，文本相对于图片的对齐方式。比如一句话和一个图片，假设图片固定，这句话可以在图片的顶部对齐，也可以在底部对齐，也可以垂直居中对齐。

垂直方向对齐

  • opacity 透明度

取值0-1,0表示完全透明，1表示不透明

和字体属性里面的color的rgba的a一样

CSS选择器

关系选择器

回顾一下：

  • 基础选择器

    • 全局选择器*{}
    • 类选择器 .class{}
    • 元素选择器 div{}
    • id选择器 #ID{}

  • 关系选择器分类

    • 后代选择器 常用
    • 子代选择器 常用
    • 相邻兄弟选择器
    • 通用兄弟选择器

  • 后代选择器 选择所有被A元素包含的B元素，中间用空格隔开

比如div p{} 意思是对在div容器里面所有p标签进行设计

也可以使用类选择器搭配后代选择器

<div class="test"><p>111111111</p></div>

可以使用.test p{} 前面的点，是类选择器，后面是后代选择器

因为是后代选择器，那上边的例子来说，是div容器里面的所有p标签都会生效。无论p标签被嵌套多少层。

  • 子代选择器 选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示

比如div>p{}

只对与div紧贴着的p标签生效。如果p标签被嵌套在内层，就没有效果

  • 相邻兄弟选择器 E+F{}

选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素

在同一容器里面有很多标签，比如a标签和p标签

使用相邻兄弟选择器，就是设计a标签后面的第一个p标签有效。其余的无效

  • 通用兄弟选择器 E~F{}

选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开

a标签后面的所有p标签都有效。a前面的p标签无效

伪类 选择器

同一个标签，根据其不同的状态，有不同的样式。这就叫做"伪类"。伪类用冒号来表示

对于网页中的超链接，如果是没有点击过是蓝色，鼠标按住不松手是红色。点击之后是紫色

  • 超链接
    • :link "链接"：点击之前（只适用于a）
    • :visited "访问过的"：点击之后（只适用于a）
    • :hover "悬停"：鼠标放到标签上的时候（适用于所有标签）
    • :active "激活"： 鼠标点击不松手时。（适用于所有标签）
html 复制代码 
/*让超链接点击之前是红色*/
a:link{
    color:red;
}
/*让超链接点击之后是橘色*/
a:visited{
    color:orange;
}
/*鼠标悬停，放到标签上的时候是绿色*/
a:hover{
    color:green;
}
/*鼠标点击链接，但是不松手的时候是黑色*/
a:active{
    color:black;
}

记住，在css中，这四种状态必须按照固定的顺序写。如果不按照顺序，那么将失效。"爱恨准则" love hate 。必须先爱，后恨。

悬停和激活适用于所有标签

激活操作一般用在按钮上面

  • :first-child 选择器

匹配其父元素中的第一个子元素

li:first-child{background:yellow;}

类似相邻兄弟选择器

  • :last-child 选择器

匹配父元素中最后一个子元素

p:last-child{background:#ff0000;}

  • :nth-child(n) 选择器 列表的奇偶选择，倍数选择

匹配父元素中的第 n 个子元素，元素类型没有限制. n 可以是一个数字，一个关键字

奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数odd或偶数even（该索引的第一个子节点是1）。 在这里，我们为奇数和偶数p元素指定两个不同的背景颜色

一般是奇偶选择，倍数选择

p:nth-child(odd){ 把odd换成2，就是第二个 background:#ff0000; } p:nth-child(even){ background:#0000ff; }

  • :only-child 选择器

属于父元素中唯一子元素的元素.

就是在多个容器里面有不同数量的标签。唯一子元素，指的是在一个容器里面只能有一个设置的子元素。这个子元素才会生效。

比如，下面的这个。在div容器里面只有一个p标签的p标签才会生效

div p:only-child{ background:#ff0000; }

  • :empty 选择器

没有任何子级的元素（包括文本节点）

空的p元素的背景色p:empty{background:#ff0000;}

假设有很多个p标签，有的p标签里面有内容，有的p标签是空的。这个选择器就可以对空的p标签进行设计。

任何内容都不行，空格也不行。

  • :not() 选择器 就是取反选择器，只要不是括号里面的标签，都可以生效

为每个并非 p 元素的元素设置背景颜色

:not(p){ background:#ff0000;}

  • :focus 选择器 具有焦点的元素

就是输入框，因为想要在输入框打字，就需要点击一下输入框，俗称把页面的焦点转移到输入框。

因为输入框可以有很多个，我们可以对用户正在输入的输入框进行选择。比如对选中的输入框修改背景颜色等等

  • :checked 匹配选中的输入元素（仅适用于单选按钮或复选框）

就是选中哪个按钮，哪个按钮就可以应用样式。

伪对象/伪元素选择器

  • before和after

before，after 选择器在被选元素的"内容"前面或后面插入内容，用来和content 属性一起使用。

虽然 E:before/after 可转化为 E::before/after ，但是你写伪元素是要规范，用两个冒号

ul::before{ content:"这是ul的伪元素"; color: blue; } ul::after{ content:"这是之后的伪元素"; }

就是在不修改已经设计好的样式的情况下，在原来的基础上增加内容。

就像之前学习的类方法，或类属性。在类创建完之后，还有别的方法再次添加方法或属性。

属性选择器（了解即可）

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id属性

  • attribute\] 选择器 带有指定属性的元素

a[target]{ background-color:yellow;}

a标签是：<a href="#" target="_blank">

  • attribute=value\] 带有指定属性和值的元素

a[target=_blank]{background-color:yellow;}

  • attribute\~=value\] 属性值中包含指定词汇的元素

[title~=flower]{ background-color:yellow;}

因为在给标签添加属性的时候，可以添加多个属性值，比如class="test lll"等等

这个是含有某个属性值就可以

  • attribute\|=value\] 带有以指定值开头的属性值的元素

选择 lang 属性值以 "en" 开头的元素，并设置其样式

[lang|=en]{ background-color:yellow;}

en是一个独立的单词，完整的单词

  • attribute\^=value\] 属性值以指定值开头的每个元素

  • attribute$=value\] 属性值以指定值结尾的每个元素

  • attribute\*=value\] 包含指定值的每个元素

CSS盒子模型

在网页的设计和布局使用

它包括：外边距（margin），边框（border），内边距（padding）

  • Margin(外边距) - 清除边框外的区域，外边距是透明的
  • Border(边框) - 围绕在内边距和内容外的边框
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的
  • Content(内容) - 盒子的内容，显示文本和图像

之前使用的border：10px solid red； 这三个参数，分别是：厚度，线的形状，边框的颜色

  • 盒子模型分类
    • 标准盒子模型
    • 怪异盒子模型
    • 弹性盒子模型

内容区域（Content）

Content内容区域包含宽度（width）和高度（height）两个属性

块级元素默认宽度为100%，行内元素默认宽度是由内容撑开，不管块级元素还是行内元素，默认高度都是由内容撑开

块级元素可以设置宽高属性，行内元素设置宽高属性不生效

  • 块级元素可以设置宽度百分比%，但是不能设置高度百分比%，高度只能写px。

宽度（width）和高度（height）可以取值为像素（px）和百分比（%）

就是不设计盒子模型。可以直接往里面放置内容，盒子的大小由内容决定。产生了一个问题，必须把内容对齐，或者说内容一致才可以。不然从整体来看，由于内容不一致，盒子就会大大小小的，不美观。就需要手动设置宽高。

一般是在移动端使用百分比。pc端使用px像素。

设计盒子大小的时候必须写单位。

内边距（Padding）

边框与内容之间的空间，即上下左右的内边距

内边距在设置大小的时候，一般使用像素来设置，就可以通用全部的屏幕了

  • 单边内边距属性

在CSS中，它可以指定不同的侧面不同的填充

  • 上内边距 padding-top:25px;
  • 下内边距 padding-bottom:25px;
  • 右内边距 padding-right:50px;
  • 左内边距 padding-left:50px;

简写属性

为了缩短代码，它可以在一个属性中指定的所有填充属性。这就是所谓的简写属性。所有的填充属性的简写属性是 padding

Padding属性，可以有一到四个值

顺时针，上右下左

padding:25px 50px 75px 100px; 顺序：上 右 下 左

padding:25px 50px 75px; 顺序：上 (左右) 下，不常用

padding:25px 50px; 顺序：上下 左右

padding:25px; 顺序：所有方向

Padding需要注意的问题：会撑大容器

边框（Border）

CSS边框属性允许你指定一个元素边框的样式和颜色

有三个属性：边框样式border-style，边框宽度border-wdith，边框颜色border-color

C3新特性：边框圆角效果border-radius 取值是0%-50%.也可以是px

  • 边框样式border-style

边框样式属性指定要显示什么样的边界

border-style属性用来定义边框的样式

border-style ：dotted点边框 dashed虚线边框 solid实线边框 double双层实线边框

  • 边框宽度border-wdith

通过 border-width 属性为边框指定宽度，单位是px

  • 边框颜色border-color

border-color属性用于设置边框的颜色

border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式

  • 边框单独设置各边

在CSS中，可以指定不同的侧面不同的边框

上边 border-top: 1px solid red;

下边 border-bottom: 1px solid red;

右边 border-right: 1px solid red;

左边 border-left: 1px solid red;

  • 边框简写属性

border 属性中设置

border : border-width border-style(必写项) border-color;

  • border-style属性可以有1-4个值 实际开发没人使用

border-style:dotted solid double dashed; 顺序：上 右 下 左

border-style:dotted solid double; 顺序：上(左右) 下

border-style:dotted solid; 顺序：上下 左右

border-style:dotted; 顺序：所有方向

外边距 （margin）

CSS margin(外边距)属性定义元素周围的空间。不会增加自身大小，只是把元素之间分开。

  • 取值

    • Auto 居中
    • 定义一个固定的像素px
    • 定义一个使用百分比的边距

  • 单边外边距属性

在CSS中，它可以指定不同的侧面不同的边距

margin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

  • 简写属性

为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。所有边距属性的简写属性是 margin

margin属性可以有一到四个值

margin:25px 50px 75px 100px; 顺序：上 右 下左

margin:25px 50px 75px; 顺序：上 (左右) 下

margin:25px 50px; 顺序：上下 左右

margin:25px; 顺序：所有方向

  • margin需要注意的问题

外边距合并问题

垂直方向上外边距相撞时，取较大值

就是两个盒子都存在外边距的时候，两个外边距不会累加，而是取两个容器外边距最大的值。

是两个盒子之间的外边距。不是四周

怪异盒模型(IE盒子模型)box-sizing: border-box;

是IE老版本的盒子模型

在该模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；即在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)

盒子总宽度/高度=width/height +margin

  • Box-sizing CSS3指定盒子模型种类

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素

  • box-sizing: content-box; 宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框

  • box-sizing: border-box; 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度

即 box-sizing 属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为怪异盒模型

一般怪异盒模型用在页面已经设计好了，不想让新增的容器破坏页面布局，就可以使用这个模型。

怪异盒模型的特点就是不会撑大容器

主要应用在移动端。

弹性盒子模型（flex box）

弹性盒子是 CSS3 的一种新的布局模式，新版本才有。

CSS2是旧版本。CSS3是新版本。C3新增：圆角效果，弹性盒子模型。

CSS3可能存在兼容性问题。

CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

主要应用在移动端。。。。。。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

  • CSS3弹性盒内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成

弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器

弹性容器内包含了一个或多个弹性子元素

弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

默认弹性盒里内容横向摆放

.flex-container { display: flex; width: 400px; height: 250px; }

父元素上的属性

  • display 属性

    • display:flex; 开启弹性盒
    • display:flex; 属性设置后子元素默认水平排列

  • flex-direction 弹性子元素在父容器中的位置

    • row：横向从左到右排列（左对齐），默认的排列方式
    • row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面
    • column：纵向排列
    • column-reverse：反转纵向排列，从后往前排，最后一项排在最上面

  • justify-content 属性 水平对齐方式

    • flex-start 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放

      • 就是靠左

    • flex-end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放

      • 靠右

    • center 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）

      • 居中

    • space-between 弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。

      • 左右对齐，元素之间填充空隙

    • space-around 弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）

      • 平分空隙，也是左右对齐，但是把空隙平分。

    • 一般不用最后两种，使用第三种和margin属性就够了

  • align-items 垂直方向对齐

    • flex-start 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
      • 上，默认
    • flex-end 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
      • 下
    • center 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
      • 居中

子元素上的属性

经常用在移动端

  • flex-grow 权重
    • 扩展因子作为比率来分配剩余空间
    • 默认为0，即如果存在剩余空间，也不放大
    • 如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%，1即100%，超出按100%

设置的子元素宽度就失效了

宽度失效。

.flex-item2 { height: 150px; background-color: green; flex-grow: 2; 权重 } .flex-item3 { height: 150px; background-color: blue; flex-grow: 1; 权重 }

浏览器内核

浏览器最重要或者说核心的部分是"Rendering Engine"，可大概译为"渲染引擎"，不过我们一般习惯将之称为"浏览器内核"。负责对网页语法的解释并渲染（显示）网页。

渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同

一些较新的css3特性，需要添加以上前缀兼容每个浏览器

  • IE浏览器 Trident（IE内核） -ms-
  • 火狐浏览器 Gecko（Firefox内核） -moz
  • Chrome和Safari浏览器 Webkit（Safari内核，Chrome内核） -webkit
  • Chrome浏览器 Blink内核 -webkit-
  • 360浏览器、猎豹浏览器 IE+Chrome双内核 -ms-/-webkit-

.box{ flex: 1; -ms-flex: 1; -moz-flex:1; -webkit-flex:1; } .root{ display: flex; display: -ms-flex; display: -moz-flex; display: -webkit-flex; 全都写上，可以让浏览器自动选择 }

浮动和定位

Dispaly属性

display 可以修改元素的类型，让块级元素和内联元素相互转换

可以隐藏元素

  • none 此元素不会被显示
  • block 此元素将显示为块级元素
  • inline 此元素会被显示为内联元素
  • inline-block 行内块元素
  • flex 弹性盒模型

块级元素可以设置宽高，行内元素不可以设置宽高。但是给行内元素设置display属性为block，就可以设置宽高了。并且变成了上下摆放。

只有块级元素才是上下摆放。就是独占一行的定义。

也可以给块级元素变成行内元素，设置display是inline

行内块元素，是可以设置大小，且横向摆放

  • 元素隐藏属性对比
    • display:none; 隐藏自己，隐藏后原位置不保留
    • visibility:hidden; 隐藏自己，隐藏后原位置保留
    • opacity:0; 隐藏自己，隐藏后原位置保留。其实是透明度调整，透明度=0，就消失了，但是还在。还可以随意设置透明度
    • overflow:hidden; 溢出部分隐藏

文档流（排列方式）

就是标签的排列方式

例如：块元素自上而下摆放。内联元素，从左到右摆放

标准流里面的限制非常多，导致很多页面效果无法实现

  • 问题：
    • 高矮不齐，底边对齐。
    • 空白折叠现象
      • 无论多少个空格、换行、tab，都会折叠为一个空格
      • img标签之间有空隙，不是紧密连接

当文本内容和图片在一个容器中时。会出现高低不齐的情况，图片总是比文本大一些。默认效果是文本和图片的底部对齐。很丑。

  • 如果我们现在就要并排顶部对齐，那该怎么办呢？办法是：移民！脱离标准流！

  • 脱离文档流

  • 使⼀个元素脱离标准文档流有三种方式

    • 浮动
    • 绝对定位
    • 固定定位

浮动

float 属性定义元素在哪个方向浮动，任何元素都可以浮动。

left 元素向左浮动

right 元素向右浮动

  • 浮动的原理
    • 浮动以后使元素脱离了文档流
    • 浮动只有左右浮动，没有上下浮动

脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象

当所有元素同时浮动的时候，会变成水平摆放，向左或者向右

当容器不足以横向摆放内容时候，会在下一行摆放

可以把两张图片之间的空隙删除，紧密贴合

浮动默认横向摆放，放不了就往下放

清除浮动

当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动

  • 浮动元素会造成父元素高度塌陷。

    • 就是把父级容器的高度清楚了，因为子元素浮动了，就脱离了父容器，父容器为空，就不能正常显示了

  • 后续元素会受到影响

    • 如果我们后面再创建新的元素，没有使用浮动，就会被浮动元素掩盖

  • 解决方案有很多种

    • 父元素设置高度
    • 受影响的元素增加clear属性
      • clear: both; 同时清除左右浮动。就是给新增的元素添加这个属性
    • overflow清除浮动
      • 这种情况下，父布局不能设置高度。父级标签的样式里面加: overflow:hidden;
    • 伪对象方式
      • 为父标签添加伪类 after ,设置空的内容，并且使用 clear:both ;display:block;
      • 这种情况下，父布局不能设置高度

一般是同时写两个方案：overflow:hidden;clear: both;

定位

position 属性指定了元素的定位类型

  • relative 相对定位
  • absolute 绝对定位
  • fixed 固定定位

脱离文档流的有绝对定位和固定定位

设置定位之后：可以使用四个方向值进行调整位置： left、top、right、bottom

  • 相对定位position: relative;

.box{ width: 200px; height: 200px; background-color: red; position: relative; 一个启动相对定位的开关 left: 100px; top:100px; }

启动相对定位之后，可以之间使用上下左右了，但是实际效果是相反的，使用左+像素单位，是往右移。其他的也一样，写上+距离，是往下移动。

  • 绝对定位absolute 脱离文档流

是设定的元素距离父级容器边框的绝对位置，如果是左100px，就是距离父级容器最左边100px，在左上角。如果是right100px，就是距离最右边100px，在右上角。如果是下100px，就是距离底部100px，在底下排列

会随着页面的滚动而发生变化

和相对定位一样，也有上下左右四个方向

  • 固定定位fixed 脱离文档流

和绝对定位的设置方式一样，但是固定定位跟盗版网站的广告一样，会一直在页面的某个位置，不会随着页面的滚动而消失。就像小说网站的目录一样，一直在页面的左侧保持不动

设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档

想要定位跟着父级容器移动，父级容器也要设置定位模式。如果所有的父级容器都没定位，就会根据页面去移动。

固定定位只根据页面定位，无论父级有没有定位模式。

  • Z-index 就是图层顺序

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

只有脱离文档流的元素才有堆叠顺序，也就是绝对位置和固定位置可以使用

.box1{ width: 200px; height: 200px; background-color: red; position:absolute; z-index: 2; } .box2{ width: 300px; height: 300px; background-color: green; position:absolute; z-index: 1; 图层是第一层 }

定位实操-下拉列表效果

当鼠标移动到导航位置的时候，出现一个列表，可以再次选择。

就像在电影网站里一样，鼠标移到某个分类，然后这个分类还能再次选择种类

思路：

  1. 一个div容器存放导航列表

  2. 列表项由一个超链接和一个div容器构成

  3. div容器设置宽度100%，脱离文档流，使用绝对定位。调整左边框位置left=0；设置隐藏效果

  4. 使用li:hover>div 使用子代选择器，当鼠标移动到列表项的时候，就使用设计。解除隐藏效果

    .nev ul li:hover>.nev-list{ 当列表项上有鼠标悬浮，就触发设计
    display: block; 取消隐藏
    }
    .nev-list{
    width: 100%;
    height: 200px;
    position: absolute;
    left: 0;
    display: none; 默认隐藏效果
    }

定位实操-图片上面定位文字

在图片上面显示文字，就像你收到消息的时候，手机应用图标上那个小红点

  • .container ul li:nth-child(4n) 把列表项的第4列元素的右边距归零
  • 下面整个都是对浮动的文字设计
html 复制代码 
.product-sign {
    position: absolute;  脱离文档流
    top: 30px;      定位
    left: 30px;     定位
    display: block;    块级元素
    width: 60px;    
    height: 60px;
    line-height: 60px;   垂直居中
    color: #fff;   
    font-size: 16px;
    text-align: center;      水平居中
    border-radius: 50%;      圆角效果
    background-color: #ff64a6;
}

定位实操-照片墙

用到了C3的新特性，动画里面的旋转：transform：rotate(deg) deg是角度，顺时针十度就是10deg，逆时针十度就是-10deg

先定位才可以旋转

CSS3新特性

圆角 border-radius

使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"

  • border-radius 属性，可以使用以下规则：
    • 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
    • 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
    • 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
    • 一个值： 四个圆角值相同

可以设置百分比，0-50%，0是直角效果，50%是圆。

也可以使用像素，0-50px，0是直角，50px是圆。

阴影

  • 盒阴影 box-shadow 向框添加一个或多个阴影。

  • 语法：box-shadow: h-shadow v-shadow blur spread color inset;

    • h-shadow 必选，水平阴影的位置
    • v-shadow 必选，垂直阴影的位置
    • blur 可选，模糊距离。单位px，值越大，阴影越模糊。
    • spread 可选，阴影的尺寸
    • color 可选，阴影的颜色
    • inset 可选，外部引用修改为内部阴影

  • 三个方向的阴影效果

    • 因为前两个必选项，分别对应的是x轴y轴，也是偏移量，想要实现三个方向都有阴影，只需要把x或y设成0即可。

  • 四个方向阴影效果

    • xy都设成0，然后使用模糊效果

  • 如果阴影效果不明显，使用第四个参数spread，设置阴影的尺寸。单位px

盒阴影是阴影效果向盒子外模糊。

  • 内阴影效果 阴影向盒子中心模糊。

    • 和外阴影的设置方法一样，只需要把第六个参数写入
    • 语法：box-shadow: 0 0 5px 5px red inset;

  • 字阴影 text-shadow 属性向文本设置阴影

  • 语法：text-shadow: h-shadow v-shadow blur color;

    • h-shadow 必选，水平阴影的位置
    • v-shadow 必选，垂直阴影的位置
    • blur 可选，模糊距离
    • color 可选，阴影的颜色

背景渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

为了创建一个渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）

  • 语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);

  • 使用background属性，使用linear-gradient处理。第一个参数是方向，后面是颜色节点

  • 不给方向的情况下，默认是从上到下

    • direction的参数：
      • to right 往右渐变
      • to left 往左
      • to bottom 往下
      • to top 往上

  • 还可以是对角渐变，因为是上下左右四个方向。使用任意相邻的两个方向，就可以实现对角效果。右下角to right bottom。

  • 使用角度

    • 如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、tobottom right，等等）
    • 角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变
    • 0度是to top，然后顺时针使用角度。90deg是to right。
    • 一共是180度。角度往左边渐变就是负数了。-90deg是to left
    • 度的单位是deg，45度就是45deg

  • 之前学的图片上的标签，图片上面定位文字，实现渐变。background: linear-gradient(120deg,#ff3149,#ff64a6);

转换（变形)transform

转换的效果是让某个元素改变形状，大小和位置

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

2D

  • translate(x,y) 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动

.box { width: 100px; height: 80px; transform: translate(50px, 100px); }

就是把当前元素重新找个地方放。两个参数是偏移量。

  • rotate(angle) 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

.box { width: 100px; height: 80px; transform: rotate(30deg); }

就是之前实现照片墙的操作。把一个元素进行旋转。

  • scale(x,y) 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

就是对xy轴进行乘法运算。

之前学浏览器字体设置的时候，知道默认最小字体是12px，说还可以小，需要使用特殊方法，说的就是现在。

缩放实现将Chrome默认12px缩小为6px。

p{font-size: 12px; transform: scale(0.5);}

  • skew方法 两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜

.box { width: 100px; height: 80px; transform: skew(30deg,20deg); }

3D

CSS3 允许您使用 3D 转换来对元素进行格式化

  • rotateX 围绕其在一个给定度数X轴旋转的元素
  • transform: rotateX(120deg);

向屏幕里面旋转，从上面往后倒的那种感觉，就是元素倒向屏幕后面。

  • rotateY() 是从左往里面旋转

  • translate3d(x,y,z)

    • 3D旋转，根据设定的xyz轴。进行旋转。
    • 把y值设为负数，整体元素有一个上移的效果，类似选中，或者鼠标移到按钮上面。
    • 如果是正数就是下移了。

过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果

通过过渡 transition ，可以让web前端开发人员不需要 javascript 就可以实现简单的动画交互效果

  • 属性
    • transition 简写属性，用于在一个属性中设置四个过渡属性
    • transition-property 过渡属性：all|transition-property 选中需要使用过渡的元素
    • transition-duration 定义过渡效果花费的时间，默认是0。
    • transition-timing-function 过渡效果的时间曲线：ease|ease-in|ease-out|ease-in-out
      • 对应上面的时间曲线：匀速，先慢后快，先快后慢，先慢再快再慢
    • transition-delay 规定过渡效果何时开始，默认是0。延时执行过渡的时间
html 复制代码 
.box {
    width: 100px;
    height: 80px;
    background-color: rgba(255, 0, 0, .8);
    transition: width 2s ease 1s;        过渡设置 ，这里是改变宽度。如果想改变多个属性，比如高宽，就需要使用all
}
.box:hover{  当鼠标悬浮时，下面的设置生效
    width: 500px;   改变宽度的范围
}

上面这个代码实现的效果是，当鼠标悬浮到元素上时，等待1秒，元素宽度开始增大，增到500px，耗时两秒。一共耗时3秒。

当我们把鼠标移开的时候，也会耗时2秒，宽度从500变成100；

想要实现多个效果，同时改变宽高，需要使用transition: all 2s ease 1s; 使用all，可以实现多个属性发生改变。

就是我们之前写伪类属性的时候，比如鼠标悬浮操作等等。都是瞬间的事，有了这个过渡效果，是放慢了变换的速度。

transition的参数，至少有第一个参数，作用的元素。还有过渡时间，就是第二个参数。

动画

跟过渡的效果一样，但是更加灵活。可以调整的地方更多

过渡就是一种简单的动画。

动画是使元素从一种样式逐渐变化为另一种样式的效果

可以改变任意多的样式任意多的次数

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

过渡只能由一种状态变成另一状态。只能变化一次。而动画可以多次变化。

创建完动画之后，记得加上执行动画操作。

  • @keyframes创建动画
html 复制代码 
.box{
	animation: anima 5s linear 5s infinite; 
}

@keyframes name {
    from|0%{
   	css样式
   }
    percent{
   	css样式
   }
    to|100%{
   	css样式
   }
}

name：动画名称，开发人员自己命名；

percent：为百分比值，可以添加多个百分比值；

  • animation执行动画

  • 语法：animation: name duration timing-function delay iteration-count direction;

    • name 设置动画的名称
    • duration 设置动画的持续时间
    • timing-function 设置动画效果的速率（如下）
    • delay 设置动画的开始时间（延时执行）
    • iteration-count 设置动画循环的次数，infinite为无限次数的循环
    • direction 设置动画播放的方向（如下）
    • animation-play-state 控制动画的播放状态：running代表播放，而paused代表停止播放

  • timing-function的参数

    • ease 逐渐变慢（默认）
    • linear 匀速
    • ease-in 加速
    • ease-out 减速
    • ease-in-out 先加速后减速

  • direction参数

    • normal 默认值为normal表示向前播放
    • alternate 动画播放在第偶数次向前播放，第奇数次向反方向播放

绘制特殊图形

  • 绘制三角形

制作三角型使用的是border属性，内容区宽高值为0。

就是设置一个盒子，宽高都是0.只设置边框的颜色和边框厚度。还有边框设计是实线。

如果设计了四个边框，就会发现是四个直角三角形合成一个正方形。因此想要绘制三角形，只需要保留一条边即可。又因为一个多边形不能只存在一条边，所以把其他三个方向的边框颜色设为透明，既保留了边框，也不会妨碍绘制图形。

透明颜色是 border-right: 50px solid transparent;

  • 绘制梯形

绘制三角型时宽和高都是0像素，给它加100的宽度看看效果

  • 个人理解：边框是从元素表面向盒子外延申的像素。当一个盒子没有高宽的时候，盒子本身是一个点，设置边框厚度之后，从这个点向外延申像素。由于四个边框的地位是相等的，不会出现遮盖现象，所以对于一个正方形来说，四个边框平分正方形，也就是四个直角三角形。想要实现梯形效果，只需要给盒子设置宽或高，任意一个即可。刚刚盒子本身是一个点，现在盒子是一条线，对于线来说，平行于线的边框是最大的。垂直于线的边框是最小的。垂直于线的边框依旧是一个直角三角形，平行于线的边框就是梯形了。因为边框向外延申，所以边框的边框边长要比线长很多，也就是梯形的底边和顶边。

媒体查询（适配屏幕）

  • 本质：预先设计不同设备的样式。通过meta获取用户使用屏幕的大小，然后根据不同的大小展示不同的样式。想要适配多少屏幕，就要设计多少样式。一般是手机，电脑，平板三种样式。

媒体查询能使页面在不同在终端设备下达到不同的效果

媒体查询会根据设备的大小自动识别加载不同的样式

就是根据用户的屏幕去分配样式。

  • 设置meta标签

使用设备的宽度作为视图宽度并禁止初始的缩放。在 head 标签里加入这个meta标签。

在新建一个html文件的时候，会加载一些初始框架，在head框架里面，有一下参数

  • meta charset="UTF-8" 页面的编码方式
  • meta http-equiv="X-UA-Compatible" contect="IE=edge" 使用浏览器最新版本
  • <meta name="viewport" content="width=devicewidth, initial-scale=1,maximum-scale=1, userscalable=no">
    • 参数解释
    • name="viewport" 开始操作窗口
    • width = device-width 宽度等于当前设备的宽度
    • initial-scale 初始的缩放比例（默认设置为1.0）。就是不缩放，网页是多大元素，手机也是多大
    • maximum-scale 允许用户缩放到的最大比例（默认设置为1.0）
    • user-scalable 用户是否可以手动缩放（默认设置为no）
  • 这些参数没必要了解，在需要的时候，直接把这句话放进去就行。

媒体查询语法

html 复制代码 
@media screen and (max-width: 768px) {
 /* 设备小于768px加载样式 */
    body{
        background-color: red;
   }
}
@media screen and (max-width: 992px) and (min-width: 768px) {
     /* 设备小于768px但小于992px加载样式 */
     body{
		background-color: pink;
     }
}
@media screen and (min-width: 992px) {
 /* 设备大于992px加载样式 */
    body{
   		background-color: green;
   }
}

这是三个屏幕规格，设计了三个不同的样式body。

响应式布局-媒体查询的思维

本意是，让一套代码在多个设备同时显示

而且在不同的设备上显示不同的样式

  • 响应式布局的优缺点
    • 优点
      • 面对不同分辨率设备灵活性强
      • 能够快捷解决多设备显示适应问题
    • 缺点
      • 兼容各种设备工作量大，效率低下
      • 代码累赘，会出现隐藏无用的元素，加载时间加长

就是在设计好网页布局之后，在style下面再写一个style，使用meta标签识别屏幕大小，然后隐藏一些元素，就是使用display隐藏。网页就是display显示

目前标准是：手机屏幕768px，平板768-992，笔记本992-1240，大屏1240以上

栅格系统

把元素做成单元格的形式，设置盒子属性，根据不同设备，一行显示几个单元格。手机屏小一行就显示一个元素，平板是一行3个，笔记本电脑是一行6个，大屏幕是一行12个

需要引入CSS样式

多列

可以将文本内容设计成像报纸一样的多列布局

  • 创建多列 column-count 需要分割的列数
    • column-count: 3;
  • 列与列之间的间隙 column-gap
    • column-gap: 40px;
  • 列边框 column-rule-style
    • column-rule-style: solid; 列与列间的边框样式
    • column-rule-width 边框厚度
    • column-rule-color 边框颜色
    • column-rule 属性是 column-rule-* 所有属性的简写
      • column-rule: 1px solid lightblue;

雪碧图

CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去

  • 优点
    • 减少图片的字节
    • 减少网页的http请求，从而大大的提高页面的性能
  • 原理
    • 通过background-image引入背景图片
    • 通过background-position把背景图片移动到自己需要的位置

字体图标

我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题

去网上随便找一个图标库就行。阿里图标库就有很多免费的图标。

  • 优点

    • 轻量性：加载速度快，减少http请求
    • 灵活性：可以利用CSS设置大小颜色等
    • 兼容性：网页字体支持所有现代浏览器，包括IE低版本

  • 使用字体图标

    • 注册账号并登录
    • 选取图标或搜索图标
    • 添加购物车
    • 下载代码
    • 解压缩包，有一个html文件，是使用说明
    • 选择 font-class 引用

图标太小，使用css设计的时候，如果不生效，看看选择器的优先级顺序

滑动门

当鼠标悬浮到列表的时候，出现一个新的列表展示内容的效果

相关推荐
ywf12151 小时前
前端的dist包放到后端springboot项目下一起打包
前端·spring boot·后端
恋猫de小郭2 小时前
2026，Android Compose 终于支持 Hot Reload 了，但是收费
android·前端·flutter
hpoenixf8 小时前
2026 年前端面试问什么
前端·面试
还是大剑师兰特8 小时前
Vue3 中的 defineExpose 完全指南
前端·javascript·vue.js
泯泷8 小时前
阶段一：从 0 看懂 JSVMP 架构，先在脑子里搭出一台最小 JSVM
前端·javascript·架构
mengchanmian9 小时前
前端node常用配置
前端
华洛9 小时前
利好打工人，openclaw不是企业提效工具，而是个人助理
前端·javascript·产品经理
xkxnq9 小时前
第六阶段：Vue生态高级整合与优化(第93天)Element Plus进阶：自定义主题（变量覆盖）+ 全局配置与组件按需加载优化
前端·javascript·vue.js
A黄俊辉A10 小时前
vue css中 :global的使用
前端·javascript·vue.js
小码哥_常10 小时前
被EdgeToEdge适配折磨疯了，谁懂！
前端
热门推荐
01GitHub 镜像站点02围棋-html版本03Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南04小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）05班级宠物园部署指南06OpenClaw 使用和管理 MCP 完全指南07OpenClaw Control UI安全上下文访问配置08UV安装并设置国内源09“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）102026年03月18日热门Model/github项目