html5+css3巩固

HTML5基础

一、标签

1、常用标签

标题标签：<h1>~<h6>
- 标题标签的文字都有加粗特效。
- 文字从 h6 到 h1 越来越大。
- 独占一行。
  
  h1 标签对于网页尤其重要，开发中有特定使用场景，如：新闻的标题、网页的logo部分。
段落标签：<p></p>
- 段落与段落之间存在空隙。
- 独占一行。
换行标签：<br>
- 单标签。
- 让文字强制换行。
水平线标签：<hr>
- 单标签。
- 在页面中显示一行水平线。

文本格式化标签：

标签	说明	标签	说明
`<b></b>`	加粗	`<strong></strong>`	加粗，强调语气
`<u></u>`	下划线	`<ins></ins>`	下划线，强调语气
`<i></i>`	倾斜	`<em></em>`	倾斜，强调语气
`<s></s>`	删除线	`<del></del>`	删除线，强调语气

媒体标签
- 图片标签：<img src="" alt="">
  - 单标签。
  - 需要与对应的属性搭配使用。
  - alt：图片加载失败时，才显示的提示文本。
  - title：鼠标悬停时，显示的提示文本。
  - width：宽
  - height：高
- 路径
  - 绝对路径
    - 从盘符开始：D:\day\images\1.png。
    - 完整的网络地址：https://www.baidu.com。
  - 相对路径
    - 相对于当前文件所在的位置。
    - 同级目录：./
    - 下级目录：../
    - 上级目录：文件夹名/目标文件名
- 音频标签：<audion src="" controls></audio>
  - src：音频对应的路径。
  - controls：显示播放的控件。
  - autoplay：自动播放。
  - loop：循环播放。
- 视频标签：<video src="" controls></video>
  - src：路径
  - controls：显示视频的控件。
  - autoplay：自动播放。
  - loop：循环播放。
链接标签：<a href=""></a>
- 双标签，内部可以包裹内容。
- 如果需要a标签点击之后去指定页面，需要设置a标签的href属性。
- 默认文字有下划线。
- 未点击，文字显示为蓝色。
- 点击之后，文字显示为紫色。
- target：_self或_blank 打开方式。
无序列表：<ul><li></li></ul>
- 每一项默认显示圆点标识
- ul标签只能包含li标签
- li标签可以包含任意标签
有序列表：<ol><li></li></ol>

自定义列表：<dl><dt></dt><dd></dd></dl>

<ol>
    <li>无序</li>
    <li><无序/li>
</ol>
     
<ul>
    <li>有序</li>
    <li>有序</li>
</ul>
        
<dl>
    <dt>自定义</dt>
    <dt>自定义</dt>
</dl>

表格标签

table>tr>td
caption：大标题
th：表头单元格

td：普通单元格

<table>
    <caption>标题</caption>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
    	<td colspan="2">单元格1</td>
        <td rowspan="2">单元格3</td>
    </tr>
    <tr>
    	<td>单元格</td>
    	<td>单元格</td>
    </tr>
</table>

表单标签
- input系列
  - type="text"：文本框。
  - type="password"：密码框。
  - type="radio"：单选按钮，使用name属性进行分组。
  - type="checkbox"：多选框
  - type="file"：文件上传，multipe实现多文件选择。
  - type="submit"：提交按钮。
  - type="reset"重置按钮。
  - type="button"普通按钮。
    - placeholder：占位符，提示文本。
    - value：值，用户项后台传输数据。
    - name：名称。
    - checked：默认选中。
    - multiple：多文件选择。
- button
  - <button>按钮</button>
- select下拉框
  - <select><option>选项1</option><option>选项2</option></select>
- textarea文本域
  - <textarea rols="" rows=""></textarea>
- label标签
  - 搭配单选框：<label>男<input type="radio"></label>
语义化标签
- <div></div>
  - 独占一行。
- <span></span>
  - 一行可以显示多个。
- <header></header>：头部
- <nav></nav>：导航栏
- <footer><footer>：底部
- <aside></aside>：侧边栏
- <section><section>：区块
- <article></article>：文章
字符实体
-  空格

二、HTML5 的新特性

1、语义化标签

<header>：头部标签
nav：导航标签
article：内容标签
section：区块标签
aside ：侧边栏标签
footer：尾部标签

2、多媒体标签

<audio>：音频

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

属性
- autoplay：自动播放（autoplay）
- controls：控制台（controls）
- width：宽度（像素值）
- height：高度（像素值）
- loop：是否循环播放（loop）
- src：地址
<video>：视频
```
<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>
```
- 属性
  - autoplay：自动播放（autoplay）
  - controls：控制台（controls）
  - width：宽度（像素值）
  - height：高度（像素值）
  - loop：是否循环播放（loop）
  - preload：是否预加载（auto:预加载，none:不预加载）
  - src：地址
  - poster：加载等待的画面图片（图片地址）
  - muted：静音播放

3、input类型

type
- email：邮箱
- url：地址
- date：日期
- time：时间
- month：月份
- week：周
- number：数字
- tel：手机号码
- search：搜索框
- color：颜色
属性
- required：必填（required）
- placeholder：提示文本（）
  - 通过如下方式修改提示文本
```
input::placeholder {
    color:skyblue;
}
```
- autofocus：自动获焦（autofocus）
- autocomplete：是否显示上次输入的值（on:开启，off:关闭）
- multiple：多选文件（multiple）

CSS3基础

一、基本属性

1、css引入方式

内嵌式：写在header标签中style标签中。
外联式：在heaser标签的link标签中引入（<link style="styesheet" src="">）
行内式：<p style="color:violet; font-size:24px;">这是一个p标签<p/>

2、常见属性

color：文字颜色
font-size：字体大小
background-color：背景颜色
- 关键字：red,green,blue,yellow....
- rgb表示：rgb(red数值,green数值,blue数值)。（0~255）
- rgba表示：rgba(red数值,green数值,blue数值,透明度数值)。（0_255,01）
- 十六进制表示：#000000,#000。
width：宽度
height：高度

3、字体样式

font-size：字体大小。（单位：px）
font-weight：字体粗细。（400或700，不能带单位）
font-style：字体样式。（normal,italic,sans-serif,serif等）
font-family：字体类型。(Microsoft YaHei,黑体，宋体，楷体)
font：连写。

4、文本样式

color：文本颜色。
text-align：文本水平对齐方式（center,left,right）
text-decoration：文本修饰
line-height：行高（line-height和height值相等时，文本垂直居中）
- 上间距+文本高度+下间距。
- 单行文本垂直居中可以设置line-height:文字父元素高度。
text-indent：文本缩进。（em,px）

5、text-align:center能使哪些元素水平居中

文本。
span标签,a标签。
input系列，img标签。

注意：text-align:center;需要在父元素中设置。

6、背景

background-color：背景颜色。(颜色值)
background-image：背景图片。（url("地址")）
background-repeat：背景平铺。（repeat,no-repeat,repeat-x,repeat-y）
background-position：背景位置。（x,y,left,right,top,bottom,center）
background：连写。（color,image,repeat,position）

二、基本选择器

1、标签选择器

标签名 {css属性名:属性值;}

2、类选择器

.类名 {css属性名:属性值;}
- 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）。
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头。
- 一个标签可以同时有多个类名，类名之间以空格隔开。
- 类名可以重复，一个类选择器可以同时选中多个标签。

3、id选择器

#id名 {css属性名:属性值;}
- 所有标签上都有id属性。
- id选择器具有唯一性，不能重复。
- 一个标签上只能有一个id属性值

4、通配符选择器

* {css属性名:属性值;}

5、后代选择器

选择器1 选择器2 {css属性名:属性值;}
- 后代包括：儿子、孙子、重孙子……
- 后代选择器中，选择器与选择器之前通过空格隔开。

6、子代选择器

选择器1>选择器2 {css属性名:属性值;}
- 子代只包括：儿子
- 子代选择器中，选择器与选择器之前通过 > 隔开。

7、并集选择器

选择器1,选择器2 {css属性名:属性值;}
- 并集选择器中的每组选择器之间通过 , 分隔。
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器。
- 并集选择器中的每组选择器通常一行写一个，提高代码的可读性。

8、交集选择器

选择器1选择器2 {css属性名:属性值;}
- 找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式。
- 交集选择器中的选择器之间是紧挨着的，没有东西分隔。
- 交集选择器中如果有标签选择器，标签选择器必须写在最前面。

9、hover伪类选择器

选择器:hover {css属性名:属性值;}
- 伪类选择器选中的元素的某种状态。

三、emmet语法

emmet即通过简写语法，快速生成代码。

记忆示例

标签名 div

类选择器 .red

id选择器 #one

交集选择器 p.red#one

子代选择器 ul>li

内部文本 ul>li

创建多个 ul>li*3

记忆	示例
标签名	div
类选择器	.red
id选择器	#one
交集选择器	p.red#one
子代选择器	ul>li
内部文本	ul>li
创建多个	ul>li*3

四、元素显示模式

1、块级元素

特点
- 独占一行。（一行只能显示一个）
- 宽度默认是父元素的宽度，高度默认由内容撑开。
- 可以设置宽高。
代表标签：div,p,h系列,ul,li,dl,dt,dd,form,header,nav,footer...

2、行内元素

特点
- 一行可以显示多个。
- 宽度和高度默认由内容撑开。
- 不可以设置宽高。
代表标签：a,span,b,u,i,s,strong,ins,em,del...

3、行内块元素

特点
- 一行可以显示多个。
- 可以设置宽高。
代表标签：input.textarea,button,select,img....

4、元素显示模式转换

属性	效果
display:block	转为块级元素
display:inline-block	转为行内块元素
display:inline	转为行内元素

5、元素嵌套规范注意点

块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等，但是，p标签中不要嵌套div、p、h等块级元素。
a标签内部可以嵌套任意元素，但是，a标签不能嵌套a标签。

五、样式的特性

1、基础性

子元素有默认继承父元素样式的特点（子承父业）
可继承的常见属性（文字控制属性都可以继承）：
- color
- font-style,font-weight,font-size,font-family
- text-indent,text-align
- line-height
- list-style
运用场景
- 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式。
- 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小。
- 如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式。
  - a标签的color会继承失效。
  - h系列标签的font-size会继承失效。

2、层叠性

特性
- 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上。
- 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效。
- 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果。

3、优先级

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式。
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
权重叠加计算
- 复合选择器，需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效。
- 四级权重计算：0，0，0，0；（行内样式个数，id个数，类个数，标签个数）
  - 对应位置变1。

六、盒子模型

1、盒子大小组成

内容区域的宽度和高度:content
边框:border
- border-width:粗细
- border-style:类型
- border-color:颜色
- border:连写
内边距:padding
- padding-top
- padding-bottom
- padding-left
- padding-right
- padding:连写(两个数值：第一个表示上下，第二个表示左右；三个数值：第一个表示上，第二个表示下，第三个表示左右)
外边距:margin
- margin-top
- margin-left
- margin-bottom
- margin-right
- margin：连写(两个数值：第一个表示上下，第二个表示左右；三个数值：第一个表示上，第二个表示下，第三个表示左右)

2、css3盒子模型（自动内减）

box-sizing:border-box

3、外边距折叠现象 – ① 合并现象

垂直布局的块级元素，上下的margin会合并，最终两者距离为margin的最大值。
解决方法
- 只给其中一个盒子设置margin即可。

4、外边距折叠现象 – ② 塌陷现象

互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上，导致父元素一起往下移动。
解决方法
- 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）。
- 给父元素设置overflow：hidden。
- 转换成行内块元素。
- 设置浮动。

5、行内元素的margin和padding无效情况

给行内元素设置margin和padding时，水平方向的margin和padding布局中有效，垂直方向的margin和padding布局中无效！。

七、css布局

1、标准流

常见标准流排版规则：
- 块级元素：从上往下，垂直布局，独占一行。
- 行内元素或行内块元素：从左往右，水平布局，空间不够自动折行。

2、浮动

float:left。（left,right）
特点
- 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置。
- 浮动元素比标准流高半个级别，可以覆盖标准流中的元素。
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动。
- 浮动元素有特殊的显示效果。一行可以显示多个，可以设置宽高
注意点：浮动的元素不能通过text-align:center或者margin:0 auto。

3、清除浮动

清除浮动的方法 — ① 直接设置父元素高度

清除浮动的方法 — ② 额外标签法

在父元素内容的最后添加一个块级元素。
给添加的块级元素设置 clear:both。

 //父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 .
<div class="top">
    <div class="left">
        
    </div>
    <div class="right">
        
    </div>
    <div class="clearfix">
        
    </div>
</div>
<div class="bottom">
    
</div>
<style>
    .left {
        float:left;
        width:200px;
        height:200px;
        background-color:skybule;
    }
    .right {
        float:right;
        width:200px;
        height:200px;
        background-color:violet;
    }
    .clearfix {
        clear:both
    }
</style>

清除浮动的方法 — ③ 单伪元素清除法

基本写法

.clearfix::after {
    content: "";
    display:block;
    clear:both;
}

补充写法

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

清除浮动的方法 — ④ 双伪元素清除法

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

清除浮动的方法 — ⑤ 给父元素设置overflow : hidden
- 直接给父元素设置 overflow : hidden

4、定位

静态定位：position:static；
相对定位：position:relative
- 需要配合方位属性实现移动。
- 相对于自己原来位置进行移动。
- 在页面中占位置 → 没有脱标。
绝对定位：position:absolute;
- 需要配合方位属性实现移动。
- 默认相对于浏览器可视区域进行移动。
- 在页面中不占位置 → 已经脱标。
固定定位：position:fixed;
- 需要配合方位属性实现移动。
- 相对于浏览器可视区域进行移动。
- 在页面中不占位置 → 已经脱标。
子绝父相水平居中案例-解决方法
- 子绝父相。
- 先让子盒子往右移动父盒子的一半。left：50%
- 再让子盒子往左移动自己的一半。
  - 普通做法：margin-left：负的子盒子宽度的一半。
  - 优化做法：transform：translateX(-50%) 。
子绝父相水平垂直都居中案例-解决方法
- 子绝父相。
- 让子盒子往右走大盒子一半。left：50%
- 让子盒子往下走大盒子一半。top：50%
- 让子盒子往左+往上走自己的一半。transform：translate(-50%，-50%)；
元素的层级关系
- 标准流 < 浮动 < 定位
改变定位元素的层级：z-index:数值；

5、装饰

垂直对齐方式：vertical-align:middle;(baseline,top,middle,bottom)

项目中 vertical-align 可以解决的问题

文本框和表单按钮无法对齐问题。

<input type="text">
<button>提交</button>
<style>
        input {
            width: 200px;
            height: 30px;
            vertical-align: middle;
        }
        button {
            width: 80px;
            height: 30px;
            vertical-align: middle;
        }
</style>

input和button高度不一致。（button在高度计算上始终使用了Quirks模式。在Quirks模式下，边框的计算是在元素的宽度内的，而不像标准模式一样计算在外部。button的高度包含边框的高度，而文本框text则不包含边框高度。这就导致input高度会比button高两像素。）
```
//在input上面加如下代码
box-sizing: border-box
//或在button上加如下代码
box-sizing:content-box
```
input和button有空隙原因。（水平缝隙问题其实是因为标签之间的换行，产生了空白符，这些空白符某种意义上也算是字符，所以理所当然的占据了一定的空隙。）
- 解决办法：两个标签不换行即可。
input和img无法对齐问题。
```
img{vertical-align:middle;}
```

div中的文本框，文本框无法贴顶问题。

<style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
        input {
            vertical-align: top;
        }
</style>
<div>
        <input type="text">
</div>

div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题。

<div><img src="./images/product.png" alt=""></div>
<style>
        div {
            border: 1px solid #ccc;
        }
        img {
            vertical-align: middle;
        }
</style>

使用line-height让img标签垂直居中问题。

光标类型：cursor:属性值;
- default:默认值。
- pointer:小手。
- text:工字型。
- move:十字架
边框圆角：border-radius:数值；
overflow溢出部分显示效果
- visible:溢出部分可见。
- hidden:隐藏溢出部分。
- scroll:添加滚动条。
- auto:按需添加滚动条。
元素本身隐身
- visibility:hidden;(隐藏元素本身，并且在网页中占位置)
- display:none;( 隐藏元素本身，并且在网页中不占位置)
元素整体透明度：opacity:数值（0-1）
边框合并：border-collapse:collapse;

6、精灵图

使用步骤
- 创建一个盒子。
- 通过PxCook量取小图片大小，将小图片的宽高设置给盒子。
- 将精灵图设置为盒子的背景图片。
- 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y。

7、背景图片大小

background-size:宽度高度;
- 数字+px
- 百分比
- contain:等比缩放，覆盖整个盒子。
- cover：等比缩放，覆盖整个盒子，无空白。

8、文字阴影

text-shadow
- h-shadow:水平偏移量
- v-shadow：垂直偏移量
- blur：模糊度
- color：阴影颜色

9、盒子阴影

box-shadow
- h-shadow：水平偏移量
- v-shadow：垂直偏移量
- blur：模糊度
- spread：阴影扩大
- color：阴影颜色
- inset：内部阴影

八、移动Web

1、字体图标

使用
- 下载字体包：Iconfont：https://www.iconfont.cn/
  - 登录iconfont→选择图标库→选择图标，加入购物车→点击购物车→添加到项目→下载到本地
- 使用字体包方式
  - Unicode编码
    - 引入样式表：iconfont.css→复制粘贴图标对应的Unicode编码→设置文字字体
```
<link rel="stylesheet" href="./iconfont.css">
<span>&#xe6f8;</span>
span {
    font-family: "iconfont";
}
```
  - 类名
    - 引入字体图标样式表：<link rel="stylesheet" href="./iconfont.css">→调用图标对应的类名，必须调用两个类名（iconfont类和icon-xxx）
```
<link rel="stylesheet" href="./iconfont.css">
<span class="iconfont icon-xxx">span</span>
```

2、平面转换

transform
- 移动：translate(水平位移，垂直位移);
  - 取值
    - 像素单位数值
    - 百分比（参照物为盒子本身的大小）
    - x轴正方向未右，y轴正方向为下
  - translate()只给一个值，则表示x轴方向移动。
  - 分级
    - translateX(x)
    - translateY(y)
  - 使用translate()实现绝对定位的元素居中
```
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
```
- 旋转：rotate(角度)
  - 取值
    - 取正，则顺时针旋转。
    - 取负，则逆时针旋转。
    - 单位：deg
  - 旋转中心点：transform-origin:x y;
    - 取值
      - 方位名词（left,top,right,bottom,center）
      - 像素单位数值。
      - 百分比（以自身大小为参照）。
- 多重转换:transform: translate(x,y) rotate(deg);
- 缩放：scale(x,y)
  - 取值
    - 设置一个值，表示x轴和y轴等比缩放。
    - 大于1为放大，小于1为缩小
- 渐变：background-image:linear-gradient(颜色1,颜色2);
```
background-image:linear-gradient(transparent,rgba(0,0,0,.6));
```

3、空间转换

空间平移：transform:translate3d(x,y,z);
- transform:translateX(x)
- transform:translateY(y)
- transform:translateZ(z)
- 取值
  - 像素单位数值
  - 百分比
透视：perspective:数值；（像素单位数值，800~1200；必须添加给父元素）
- 空间转换时，为元素添加近大远小、近实远虚的视觉效果。
空间旋转：transform:rolateZ(z)或rolateY(y)或rolateX(x)
- 左手原则：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向。
- transform:rolate3d(x,y,z,deg):用来设置自定义旋转轴的位置即角度（x,y,z取值为0~1之间的数字。）
立体成像：transform-style:preserve-3d;
- 立体呈现步骤：
  - 盒子父元素添加：transform-styl:preserve-3d;
  - 按需求设置子盒子的位置（位移或旋转）。

4、动画

animation动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）。

使用animation添加动画效果实现步骤：

定义动画→使用动画

/*定义动画*/
@keyframes 动画名称 {
    from {}
    to {}
}
/*或*/
@keyframes 动画名称 {
    0% {}
    10% {}
    15% {}
    ...
    100% {}
}


/*使用动画*/
animation: 动画名称 动画花费时长;

动画相关属性
- animation: 动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态;
  - animation-name:动画名称
  - animation-duration:动画时长
  - animation-delay:延迟时间
  - animation-fill-mode:动画执行完毕状态（forwards:最后一帧状态，backwards:第一帧状态）
  - animation-timing-function:速度曲线（steps(数字)：逐帧动画）
  - animation-iteration-count:重复次数（infinite：无限循环）
  - animation-direction:动画执行方向（alternate:反向）
  - animation-play-state:暂停动画（paused:暂停，通常搭配：hover使用）
多个动画用逗号分隔。

5、移动端特点

分辨率
- 屏幕尺寸：屏幕对角线的长度。
- 物理分辨率
- 逻辑分辨率
- pc分辨率
  - 1920*1080
  - 1366*768
  - 。。。
- 移动分辨率
  - 375*667
  - 414*736
视口
- 使用meta标签设置视口宽度，制作适配不同设备宽度的网页。
```
<meta name="viewport" content="width=device-width,initial-scale=1.0">
```
二倍图
- 为了高分辨率下，图片不会模糊。
- 设计稿的尺寸为设备的两倍。
- 测量尺寸时，记得将视图改为二倍图。

6、百分比布局

百分比布局，又叫流式布局
宽度自适应，高度固定。（宽度使用%为尺寸单位。）

7、Flex布局

特点
- 是一种浏览器提倡的布局模型，布局网页更简单、灵活，非常适合结构化布局。
- 避免浮动脱标的问题。
设置方式
- 在父元素中添加：display: flex;，子元素可以自动的挤压或拉伸。
组成部分
- 弹性容器
- 弹性盒子
- 主轴
- 侧轴/交叉轴
使用justify-content调节元素在主轴的对齐方式。(在父元素中添加该属性)
- justify-content: center;：沿主轴居中对齐。
- justify-content: space-around;：空白间距均匀分布在弹性盒子两侧。
- justify-content: space-between;：空白间距均匀分布在弹性盒子之间。
- justify-content: space-evenly;：弹性盒子与容器之间间距相等。
使用align-item调节元素在侧轴的对齐方式。（在父元素中添加该属性）
- align-item: center;：沿侧轴居中对齐。
- align-item: stretch;：弹性盒子盐主轴线被拉伸至铺满容器。
使用flex修改弹性盒子伸缩比。（在弹性盒子（子元素）中添加该属性）
- flex: 1;
- 只占容器（父盒子）剩余尺寸。
使用flex-direction改变主轴方向(添加到父元素中)
- flex-direction: row;：行，水平。
- flex-direction: column;：列，垂直。
- flex-direction: row-reverse;：行，从右到左。
- flex-direction:column-reverse;：列，从下到上。
弹性盒子换行显示：flex-wrap: wrap;(添加到父元素中)
调整行对齐方式：align-content;(添加到父元素中)
align-self会对齐当前 grid 或 flex 行中的元素，并覆盖已有的 align-items 的值。(添加到子元素中)
- align-self:self-start;
- align-self:self-end;
- align-self:center;

8、移动适配

rem单位
- 特点
  - 相对单位。
  - rem单位是相对于HTML标签的字号计算结果。
  - 1rem = 1HTML字号大小
vm/vh单位
- 特点
  - 相对单位。
  - 相对视口的尺寸计算结果。
  - 1vw = 1/100视口宽度。
  - 1vh = 1/100视口高度。
    
    实际开发中vm和vh不会混用。
媒体查询
- 原理：媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式，当某个条件成立, 执行对应的CSS样式。
- 写法
```
@media (媒体特性) {
    选择器 {
        css属性
    }
}

/*例子*/
@media (width: 320px) {
    html {
        font-size: 32px;
    }
}
```
- 使用rem单位设置网页元素的尺寸：目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10。
  - 步骤
    - 根据视口宽度，设置不同的HTML标签字号。
```
/*视口宽度320px,根字号为32px*/
@media (width:320px) {
    html {
        font-size: 32px;
    }
}
/*视口宽度375px,根字号为37.5px*/
@media (width:320px) {
    html {
        font-size: 37.5px;
    }
}
/*视口宽度414px,根字号为41.4px*/
@media (width:320px) {
    html {
        font-size: 41.4px;
    }
}
```
    - 书写代码，尺寸是rem单位。
      - 确定设计稿对应的设备的HTML标签字号。
        
        查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
      - rem单位的尺寸
        
        N * 37.5 = 68 → N = 68 / 37.5
        
        rem单位的尺寸 = px单位数值 / 基准根字号
使用flexible js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果
- flexible.js是手淘开发出的一个用来适配移动端的js框架。
- 核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。
```
<body>
    <div class="box">
        
    </div>
    <script src="./js/flexible.js"></script>
</body>
```
Less语法
- 描述
  - Less是一个CSS预处理器, Less文件后缀是.less
  - 扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
    
    注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。
- 使用Less语法快速编译生成CSS代码
  - vscode插件Easy Less,ess文件保存自动生成css文件。
- 基本语法
  - 单行注释：// 注释内容（快捷键：ctrl+/）
  - 块注释：/*注释内容*/（快捷键：shift+alt+A）
  - 运算：
    - 加、减、乘直接书写计算表达式。
    - 除法需要添加小括号或 .。
      
      表达式存在多个单位以第一个单位为准
  - 后代选择器
```
.父级选择器 {
    //父级样式
    .子级选择器 {
        //子级样式
    }
}

//less写法
.father {
    color: red;
    .son {
        width: 100px;
    }
}
//生成的css
.father {
    color: red;
}
.father .son {
    width: 100px
}
```
  - 注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用
```
//less
.father {
    color: red;
    &:hover {
        color: green;
    }
}

//生成的css
.father {
    color: red;
}
.father:hover {
    color: green;
}
```
  - 使用Less变量设置属性值
    - 定义变量：@变量名:值;
    - 使用变量：CSS属性: @变量名;
```
//定义
@fontColor: pink;
//使用
.box {
    color: @fontColor;
}
a {
    color:@fontColor;
}
```
  - 导入其他Less文件
```
@import 'base.less';
```
  - 使用Less语法导出CSS文件
    - 方法一：配置EasyLess插件，实现所有Less有相同的导出路径。
      - 配置插件：设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）
        
        { "out":"../css/" }
    - 方法二：控制当前Less文件导出路径
      - Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
        
        // out: ./css/ // out: ./css/common.css
  - 禁止导出
```
// out:false
```

9、响应式布局

媒体查询

语法

@media (媒体属性){
    选择器 {
        css样式;
    }
}

/*完整写法*/
@media 关键词 媒体类型 and (媒体特性){
    css代码;
}

媒体特性
- width/height：视口宽高
- max-width/max-height：视口最大宽或高
- min-width/min-height：视口最小宽或高

外链引用

<link rel="stylesheel" media="逻辑符 媒体类型 and (媒体特性)" href="xx.css">

BootStrap框架
- 使用步骤
  - 下载：https://www.bootcss.com/ 首页 → BootStrap3中文文档 → 下载BootStrap。
  - 使用
    - 引入： BootStrap提供的CSS代码：
      
      <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
    - 调用类：使用BootStrap提供的样式。
- 常用类
  - container：响应式布局版心类。.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
  - .container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
  - 分别使用.row类名和 .col类名定义栅格布局的行和列。
    1. container类自带间距15px;
    2. row类自带间距-15px
- BootStrap栅格系统
  - 它默认将网页分成12等份

九、不同类型的单位

1、px：像素

以像素的多少衡量大小

2、rem:相对于根元素字体大小

3、vm:相对于视窗的宽度：视窗宽度是100vw

4、vh:相对于视窗的高度：视窗高度是100vh

5、vm:相对于视窗的宽度或高度，取决于哪个小。

十、CSS3 新增选择器

1、属性选择器

E[att]：选择具有att属性的E元素。
E[att="val"]：选择具有att属性，并且属性值为val的E元素。
E[att^="val"]：选择具有att属性，并且属性值以val开头的E元素。
E[att$="val"]：选择具有att属性，并且属性值以val结尾的E元素。
E[att*="val"]：选择具有att属性，并且属性值中包含val的E元素。

2、结构伪类选择器

E:first-child：匹配父元素中的第一个E元素。
E:last-child：匹配父元素中的最后一个E元素。
E:nth-child(n)：匹配父元素中的第n个E元素。（-n+5:前五个，n+5:第五个开始，2n或even：偶数个，2n-1或2n+1或odd:奇数）
E:first-of-type：指定类型E的第一个。
E:last-of-type：指定类型E的最后一个。
E:nth-of-type(n)：指定类型E的第n个。

3、伪元素选择器

::before：在元素内部的前面插入内容。
::after：在元素内部的后面插入内容。

4、盒子模型

box-sizing:border-box;
计算盒子宽度：width:calc()
```
width:calc(100%-80px);
```

5、滤镜

filter: 函数();该属性将模糊或颜色偏离等
```
/*模糊5个像素*/
filter: blur(5px);
```

6、过渡

transition: 要过渡的属性花费时间运动曲线何时开始;
- 属性：一半写 all 即可。
- 时间：单位为秒（必须带单位）
- 运动曲线：默认是ease(可省略)：linear：匀速，ease：逐渐变慢，ease-in：加速，ease-out：减速，ease-in-out:先加速再减速。
- 何时开始：单位为秒，可省略，但写了必须带单位。

7、2D转换

transform：可实现位移、旋转、缩放

translate：移动

transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);

rotate：旋转

transform: rolate(45deg);
设置旋转中心：
transform-origin: x,y;

scale：缩放

transform:scale(x,y);
transform:scale(n);

8、3D转换

3D位移：translate3d(x,y,z)
- translateZ：近大远小
- translateZ：往外是正值
- translateZ：往里是负值
3D旋转：rotate3d(x,y,z,deg)
透视：perspective:透视写在被观察元素的父盒子上面的
3D呈现：transform-style
- transform-style: flat 子元素不开启3d立体空间默认的
- transform-style: preserve-3d; 子元素开启立体空间

9、动画

使用步骤

先定义动画

再使用动画

定义动画：
@keyframe 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px;
    }
}
可以使用from和to分别代替0%和100%

使用动画：
div {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    margin: 100px 100px;
    /*调用动画*/
    animation-name: 动画名称;
    /*持续时间*/
    animation-duration: 持续时间;
}

属性
- @keyframes ：规定动画。
- animation ：所有动画属性的简写属性，除了animation-play-state属性。
- animation-name：规定@keyframes动画的名称。（必须的）
- animation-duration：规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的）
- animation-timing-function：规定动画的速度曲线，默认是“ease”。
  - linear：动画从头到尾的速度是相同的。匀速
  - ease ：默认。动画以低速开始，然后加快，在结束前变慢。
  - ease-in：动画以低速开始。
  - ease-out ：动画以低速结束。
  - ease-in-out：动画以低速开始和结束。
  - steps() ：指定了时间函数中的间隔数量（步长）
- animation-delay ：规定动画何时开始，默认是0。
- animation-iteration-count：规定动画被播放的次数，默认是1，还有infinite
- animation-direction ：规定动画是否在下一周期逆向播放，默认是“normal“,alternate逆播放
- animation-play-state ：规定动画是否正在运行或暂停。默认是"running",还有"paused"。
- animation-fill-mode ：规定动画结束后状态，保持forwards回到起始backwards
```
简写：
animation:myfirst 5s linear 2s infinite alternate;
```

10、浏览器的私有签字

私有前缀
- -moz-：代表 firefox 浏览器私有属性
- -ms-：代表 ie 浏览器私有属性
- -webkit-：代表 safari、chrome 私有属性
- -o-：代表 Opera 私有属性
```
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
-o-border-radius: 10px; 
border-radius: 10px;
```

十一、细节

1、块级元素

独占一行。
宽度默认是父元素的宽度，高度默认由内容撑开。
可以设置宽高。
div，p，h系列，ul，li，dl，dt，dd，form，header，nav，footer...

2、行内元素

一行可以显示多个。
宽度和高度默认由内容撑开。
不可以设置宽高。
a，span，b，u，i，s，strong，ins，em，del...

3、行内块元素

一行可以显示多个。
可以设置宽高。
input，textarea，button，select...
img有行内块元素的特点，但是chrome调试工具中显示是inline。

4、元素转换

块级元素：display:block
行内元素：display:inline
行内块元素：display:inline-block

5、HTML元素嵌套规范注意点

p标签中不要嵌套div，p，h等块级元素。
a标签中不要嵌套a标签。

6、居中方法总结

水平居中
- text-align:center
  - 文本
  - 行内元素，如：span，a
  - 行内块元素，如：input，img
  - 如果以上元素需要水平居中，则直接给以上元素的父元素设置即可。
- margin:0 auto
  - 块级元素。
  - 直接给当前元素设置即可。
垂直居中
- line-hight:行高;
  - 单行文本垂直居中。

子绝父相水平居中：使用子绝父相，让子盒子在父盒子中水平居中。

position: absolute;
/*先让子盒子往右移动父盒子的一半*/
left: 50%;
/*再让子盒子往左移动自己的一半*/
普通做法：margin-left: 负的子盒子宽度的一半;
优化做法：transform: translateX(-50%);

子绝父相垂直居中：使用子绝父相，让子盒子在父盒子中垂直居中。

position: absolute;
/*让子盒子往右移动父盒子的一半*/
left: 50%;
/*让子盒子往左+往上走自己的一半*/
transform: translate(-50%,-50%)

7、默认清除外内边距

```
* {
    margin: 0;
    padding: 0;
}
```

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {
    margin: 0;
    padding: 0;
}

8、设置盒子模型：`box-sizing:border-box`

9、外边距折叠现象

合并现象：垂直布局的块级元素，上下的margin会合并，最终两者距离为margin的最大值。

解决方法：

只给其中一个盒子设置 margin 即可。
塌陷现象：互相嵌套的块级元素，子元素的margin-top会作用在父元素上，导致父元素一起往下移动。

解决方法：

1.给父元素设置 border-top 或者 padding-top (分隔父子元素的 margin-top)。

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

3.转换成行内块元素。

4.设置浮动。

10、行内元素的 margin 和 padding无效情况

水平方向的 margin 和 padding 布局中有效。
垂直方向的 margin 和 padding 布局中无效。

11、结构伪类选择器

E:first-child {}：匹配父元素中第一个子元素，并且是 E 元素。
E:last-child {}：匹配父元素中最后一个子元素，并且是 E 元素。
E:nth-child(n) {}：匹配父元素中第 n 个子元素，并且是 E 元素。（）
E:nth-last-child(n) {}：匹配父元素中倒数第 n 个子元素，并且是 E 元素。

偶数：2n,even

奇数：2n+1,2n-1,odd,

找到前5个：-n+5

找到从第5个开始：n+5
E:nth-of-type(n) {}：只在父元素的同类型（E）子元素范围中，匹配第 n 个

链接伪类选择器

a:link {}选中 a 链接未访问过的状态。
a:visited {}选中 a 链接访问之后的状态。
a:hover {}选中鼠标悬停的状态。
a:active {}选中鼠标按下的状态。

焦点伪类选择器

用于选中元素获取焦点时状态

input:focus {
    background-color: skyblue;
}

属性选择器

E[attr]选择具有attr属性的E元素。
E[attr="val"]选择具有attr属性并且属性值等于val的E元素。

12、伪元素

E:hover {}：鼠标悬停时的效果。
E::before {}：在父元素内容的最前添加一个伪元素。
E::after {}：在父元素内容的最后添加一个伪元素。

注意点：

1.后两个必须设置 content 属性才能生效。

2.伪元素默认是行内元素。

13、浮动

设置：float: left;或float: right;
作用：
- 早期：图文环绕。
- 现在：布局。
特点：
- 浮动元素会脱离标准流，不再占用原来的位置。
- 浮动元素比标准流高半个级别，可以覆盖标准流中的元素。
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动。*****
- 浮动元素一行可以显示多个。
- 浮动元素可以设置宽高。
  
  注意点：
  
  浮动的元素不能通过 text-align: center 或 margin: 0 auto；设置水平对齐。
清除浮动：
- 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素。
- 目的：需要父元素有高度，从而不影响其他网页元素的布局。
- 方法：
  - 直接设置父元素高度：height: 10px。
  - 额外标签法：
    - 在父元素内容的后面添加一个块级元素。
    - 给添加的块元素设置clear: both;。
  - 单伪元素清除法：
    - 基本写法：
```
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}
```
    - 补充写法：
```
.clearfix::after {
    content: '';
    display: block;
    clear: both;
    /*在网页中看不到伪元素*/
    height: 0;
    visibility: hidden;
}
```
  - 双伪元素清除法：
```
.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
}
.clearfix::after {
    clear: both;
}
```
  - 给父元素设置overflow: hidden
去除行内块元素换行写产生的小空隙：相邻行内块元素添加浮动即可。

14、块格式化上下文：BFC

是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
创建方法：
- html标签是BFC盒子。
- 浮动元素是BFC盒子。
- 行内块元素是BFC盒子。
- overflow属性取值不为visible。如：auto、hidden…
特点：
- BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动。
- BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用：解决margin的塌陷。

15、网页布局基本步骤

从外到内，从上到下
CSS美化
- 宽度，高度，背景色→ 调整位置
- 放内容→ 调整内容位置→ 调整细节（文字样式等等）

16、定位

特点：
- 定位之后的元素层叠级最高，可以层叠在其他盒子上面。
- 可以让盒子始终固定在屏幕中的某个位置。
基本类型
- 静态定位：position: static;
- 相对定位：position: relative;
  - 特点：
    - 需要配合方位属性实现移动。
    - 相对于自己原来位置进行移动。
    - 在页面中占位置→ 没有脱标。
- 绝对定位：position:absolute;
  - 特点：
    - 需要配合方向属性实现移动。
    - 默认相对浏览器可视区域进行移动。
    - 在页面中不占位置→ 脱标。
- 固定定位：position:fixed;
  - 特点
    - 需要配合方位属性实现移动。
    - 相对浏览器可视区域进行移动。
    - 在页面中不占位置→ 脱标。
    - 让盒子固定在屏幕中的某个位置。
- 子绝父相：子元素绝对定位，父元素相对定位。

17、改变层级

z-index: 数字;数字越大，层级越高。

18、垂直对齐方式

属性：vertical-align
- vertical-align: baseline;默认，基线对齐。
- vertical-align: top;顶部对齐。
- vertical-align: middle;中部对齐。
- vertical-align: bottom;底部对齐。
vertical-align 可以解决的问题
- 文本框和表单按钮无法对齐问题。
- input 和 img 无法对齐问题。
- div 中的文本框，文本框无法贴顶问题。
- div 不设高度由 img 标签撑开，此时 img 标签下面会存在而外空隙问题。
- 使用 line-height 让 img标签垂直居中问题。
- 文字和图片对齐（头像和用户名）
```
img {
    vertical-align: middle;
}
```
  注意点：
  
  不推荐使用行内块元素让div一行中显示。

19、光标类型

cursor: default;默认值。
cursor: pointer;小手型。
cursor: text;工字型。
cursor: move;十字架型。

20、边框圆角

border-radius: 数字+px或%;

21、overflow 溢出部分显示效果

overflow: visible;溢出部分可见。
overflow: hidden;溢出部分隐藏。
overflow: scroll;无论是否溢出，都显示滚动条。
overflow: auto;按需显示滚动条。

22、元素本身隐藏

visibilit: hidden;隐藏元素本身，但占用位置。
display: none;隐藏元素本身，但不占用位置。

23、元素整体透明度

opacity: 0~1之间的数字;

24、边框合并：让相邻表格边框进行合并。

border-collapse: collapse;

25、CSS画三角型

步骤
- 设置一个盒子。
- 设置四周不同颜色的边框。
- 将盒子宽高设为0，仅保留边框。
- 得到四个三角形，选择其中一个后，其他三角型（边框）设置颜色为透明。

26、精灵图的使用

创建一个盒子。
设置盒子大小为小图片的大小。
设置精灵图为盒子的背景颜色。
将小图片左上角坐标取负值，设置给盒子的background-position: x y;。

27、文字阴影

text-shadow: x y 模糊度 color;

28、盒子阴影

box-shadow: x y 模糊度阴影扩大阴影颜色 inset;

29、项目前置

骨架结构标签
- <!DOCTYPE html>文档说明
- <html lang="en/zh-CN">使用的语言
- <meta charset="UTF-8">字符编码

SEO三大标签

title：网页标题标签
description：网页描述标签

keywords：网页关键词标签

<title>非斌影视-VIP视频、电影、动漫、电视剧</title>
<meta name="description" content="非斌影视-VIP视频、电影、动漫、电视剧" />
<meta name="keywords" content="电视,电影,视频,动漫"/>

ico图标设置

<link rel="shortcut icon" href="" type="image/x-icon">
CSS书写顺序
- 布局属性：display,position,float,clear,visibility,overflow
- 盒子模型+背景：width,height,margin,padding,border,background
- 文本内容属性：color,font,text-decoration,text-align,line-height
- 点缀属性：cursor,border-radius,text-shadow,box-shadow
项目搭建
- 文件和目录准备
  - 创建：xtx-pc-client文件夹。
  - 复制favicon.ico到xtx-px-client目录。
  - 复制iamges（固定使用的图片：logo,样式修饰图片）和uploads（非固定图片：商品图,宣传图片）目录到xtx-pc-client目录中。
  - 新键index.html在根目录下。
- 基础公共样式
  - base.css:基础公共样式
  - common.css：该网站中多个页面相同模块的重复样式，如头部，底部
  - index.css：首页样式
- index页面骨架

30、字体图标的使用

步骤
- 下载：icommon,iconfont
- 引入：
- 追加

31、结合flex布局实现单行文字省略号效果

步骤

子元素设置如下代码

.son {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

父盒子设置如下代码
```
.father {
    flex: 1;
    width: 0;
}
```

32、防止textarea文本框拉伸

代码如下
```
textarea {
    resize: none;
}
```

33、去除文本框或输入框获取焦点时，产生的边框

代码如下

textarea:focus {
    outline: none;
}

input:focus {
    outline: none;
}

十二、HTML5+CSS3实战

1、3D旋转卡片

十三、项目

posted @ 2023-02-09 15:50 秋风里的蜜阅读(77) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· HTML5+CSS3

· JavaScript基础

· html&css基础知识（2022.6.5更新）

· HTML+CSS

· 最新 H5 HTML CSS记录新手入门

公告

昵称：秋风里的蜜
园龄： 5年9个月
粉丝： 2
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

feibinstudy

html5+css3巩固

HTML5基础

一、标签

1、常用标签

二、HTML5 的新特性

1、语义化标签

2、多媒体标签

3、input类型

CSS3基础

一、基本属性

1、css引入方式

2、常见属性

3、字体样式

4、文本样式

5、text-align:center能使哪些元素水平居中

6、背景

二、基本选择器

1、标签选择器

2、类选择器

3、id选择器

4、通配符选择器

5、后代选择器

6、子代选择器

7、并集选择器

8、交集选择器

9、hover伪类选择器

三、emmet语法

四、元素显示模式

1、块级元素

2、行内元素

3、行内块元素

4、元素显示模式转换

5、元素嵌套规范注意点

五、样式的特性

1、基础性

2、层叠性

3、优先级

六、盒子模型

1、盒子大小组成

2、css3盒子模型（自动内减）

3、外边距折叠现象 – ① 合并现象

七、css布局

1、标准流

2、浮动

3、清除浮动

4、定位

5、装饰

6、精灵图

7、背景图片大小

8、 文字阴影

9、盒子阴影

八、移动Web

1、字体图标

2、平面转换

3、空间转换

4、动画

5、移动端特点

6、百分比布局

7、Flex布局

8、移动适配

9、响应式布局

九、不同类型的单位

1、px：像素

2、rem:相对于根元素字体大小

3、vm:相对于视窗的宽度：视窗宽度是100vw

4、vh:相对于视窗的高度：视窗高度是100vh

5、vm:相对于视窗的宽度或高度，取决于哪个小。

十、CSS3 新增选择器

1、属性选择器

2、结构伪类选择器

3、伪元素选择器

4、盒子模型

5、滤镜

6、过渡

7、2D转换

8、3D转换

9、动画

10、浏览器的私有签字

十一、细节

8、文字阴影

8、设置盒子模型：`box-sizing:border-box`