weixin_43786290的博客

1、可以将CSS代码直接写到开始标签当中（行内样式）2、内嵌样式：可在一对head标签当中写上一对style标签，然后再style标签中编写CSS代码。3、外链样式：可单独新建一个.CSS文件，把CSS代码写到这个文件中，然后通过link标签把这个文件和.html文件关联起来。<link rel="stylesheet" href="文件">4、导入样式：可单独新建一个.CSS文件，把CSS代码写到这个文件中，然后通过import把这个文件和.html文件关联起来。（CSS2.1推出的

一、背景尺寸属性1、背景尺寸属性：CSS中新增的一个属性，专门用于设置背景图片大小格式：background-size: 200px 100px; 50% 50%;第一个为宽度，第二个为高度（1）等比拉伸，则设为auto（2）cover：告诉系统图片需等比拉伸知道宽度和高度都填满元素（3）contain：告诉系统图片需等比拉伸知道宽度或高度都填满元素二、背景图片定位区域属性1、告诉系统背景图片从什么区域开始显示，默认情况下从padding区域开始显示。background-o

一、动画模块基本属性1、过渡与动画的异同（1）不同：过渡需人为触发才会执行；动画不需人为触发就可执行（2）相同：都是用来给元素添加动画的；都是系统新增的一些属性；都需满足三要素才会有动画效果2、三要素：（1）告诉系统需执行哪个动画animation-name: Inj;（2）告诉系统我们需自己创建一个名称叫做Inj的动画@keyname Inj{ from{ margin-left: 0; } to{ margin-left: 500px; }}3、其他属性（1）告诉系

一、盒子阴影和文字阴影1、如何给盒子添加阴影box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;2、注意（1）盒子阴影分为内外阴影，默认情况下为外阴影（2）快速添加阴影只需添加三个参数即可box-shadow: 水平偏移 垂直偏移 模糊度;默认情况下，阴影的颜色和盒子内容的颜色一致3、给文字添加阴影text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色;...

文章目录一、过渡模块的基本使用二、过度模块——连写/弹性效果/手风琴效果三、2D转换模块的基本属性四、2D转换模快——形变中心点/旋转轴向/透视属性/相片墙一、过渡模块的基本使用1、过渡模块三要素：（1）属性发生变化：div: hover{ width: 300px;}（2）告诉系统哪个属性需要执行过渡效果transition-property: width;（3）告诉系统过渡效果持续时间transition-duration: 5s;2、当多个属性需同时执行过渡效果时用逗号隔开

一、相对定位positive: relative;1、相对定位：相对于自己以前在标准流中的位置移动（1）相对定位十不脱离标准流的，会继续在标准流中占用一份空间positive: relative;需配合top: ;或left: ;来使用（2）在相对定位中同一方向上的定位属性只能使用一个（3）由于相对定位是不脱离标准流的，所以它是区分块级/行内/行内块级元素的（4）由于相对定位是不脱离标准流的，并且相对定位的位置会占用标准流的位置，所以当给相对定位的元素设置margin/padding等属性时会影响

一、网页布局方式1、网页布局方式：指浏览器如何对网页的元素进行排版。2、排版方式（1）标准流（文档流/普通流）A、浏览器默认的排版方式B、在CSS中，将元素分为三类：块级/行内/行内块级C、两种排版方式：垂直排版：块级元素；水平排版：行内/行内块级元素（2）浮动流：float: left/right;（与父元素的最左/右对齐）A、浮动流是一个“半脱离标准流”的排版方式B、浮动流只有一种排版方式，即水平排版，只能设置某个元素左/右对齐C、浮动流没有居中对齐，在浮动流中是不可用margin

一、边框属性二、内边框属性三、外边框属性四、盒子模型五、盒子box-sizing属性六、盒子模型练习七、盒子居中和内容居中八、清空默认边框九、行高和字号十、还原字体和字号十一、网页布局方式...

一、背景颜色二、背景图片三、背景平铺四、背景定位五、背景关联和缩写六、背景图片和插入图片的区别七、背景图片练习八、CSS精灵图九、精灵图练习

一、div和span标签（hmtl标签）1、div：一般用于配合CSS完成网页的基本布局，单独占一行。2、span：一般用于配合CSS修改网页的局部信息，不会单独占一行。3、div和span的区别：div为容器级的标签，可嵌套其他所有标签，如：div、h、ul、ol、dt…；span为文本级的标签，只能嵌套文字/超链接/图片，如：p、span…二、CSS元素显示模式1、HTML将标签分为两类：容器级和文本级；CSS将标签分为两类：块级元素和行内元素。2、块级元素：会独占一行，p+容器级元素；行内

一、继承性（三大特性之一）二、层叠性（三大特性之一）三、优先级（三大特性之一）四、！important（优先级）五、权重问题（优先级）六、CSS三大特性练习

一、标签选择器二、id选择器三、类选择器四、后代选择器五、子元素选择器六、交集选择器七、并集选择器八、兄弟选择器九、通用选择器十、序选择器十一、属性选择器十二、通配符选择器...

一、体验CSS1、通过标签修改样式的缺点（1）需要记忆哪些标签有哪些属性，如果该标签没有这个属性，那设置了也没有效果。（2）当需求更改时，需修改大量代码才能满足现有需求（3）HTML只有一个作用：添加语义2、通过CSS修改样式的好处（1）不用记忆哪些属性属于哪个标签（2）当需求更改时，不用修改大量代码（3）在前端开发中，CSS只有一个作用，修改样式。二、CSS的固定格式1、格式<style type="text/css"> 标签名称{ 属性名称: 属性对应的值;（:后

一、video标签1、video：播放视频<video src="需播放的视频地址"></video>（1）video不会自动播放视频，如需自动播放，需添加属性autoplay="autoplay"（2）controls：告诉video是否显示控制条，需则为：controls=“controls”（3）poster：视频播放之前的占位图片（4）loop：一般用于播放广告视频，用于告诉video标签视频播放完毕后继续循环播放。（5）preload：预加载视频，但需注意

一、表单标签——input1、表单：专门用来收集用户信息。2、表单元素：即HTML中的一些特殊标签，这些标签有特殊的外观和默认功能。3、表单格式：<form> <表单元素></form>4、常见表单元素（input——有type属性）（1）明文输入框：<input type="text"><br>（2）暗文输入框：<input type="password"><br>（3）给输入框设置默认值：<i

一、表格标签的基本使用1、表格标签：给一堆表格添加表格语义。当数据量非常大时，表格被认为是最为清晰的一种展现形式。2、格式：<table> <tr> <td></td> </tr></table>（1）table代表整个表格，tr代表表格中的一行，td代表表格中一行的一个单元格。（2）表格标签的边框属性，决定边框宽度，默认情况下为0.（3）表格中的高和宽默认是按照内容的尺寸来调整，也可通过width/height

一、无序列表1、列表标签：给一堆数据添加列表语义，即告诉搜索引擎/浏览器这一堆数据是一个整体。2、分类：无序列表，有序列表，定义列表。3、无序列表（使用最多）unordered list（1）作用：给一堆数据添加列表语义，且一堆数据中所有数据都没有先后之分。（2）格式：<ul> <li>需显示的条目内容</li></ul>（3）li标签为列表条目，ul标签和li标签为一个整体，一般一起出现。ul标签中不推荐出现除了li以外的其他标签；但li

一、H标签和p标签以及hr标签1、H标签：用于给文本添加标题语义。（1）一共有6个，H1~H6，超过H6则无效，H1最大。（2）被H系列标签的内容单独占一行。（3）一个网页只能有一个<h1>标签。（4）要生成<h1></h1>，只需输入h1，再按tab键。2、P标签：告诉浏览器哪些文字是一个段落。注：在浏览器中独占一行。3、hr标签：在浏览器上显示一条线，hr为单标签。格式为：<hr>或<hr/>二、img标签1、img标签：

一、服务器和浏览器1、浏览器：安装在电脑的一个软件，能让网页内容呈现给用户查看，并让用户与网页交互的软件。（1）浏览器内核：浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页内容，以及页面格式信息。3、服务器：服务器是电脑，但它比普通电脑配置要高，且24小时不停电，不关机。服务器专门用于存储数据，访问者可以访问浏览器获得服务器上存储的资源。若服务器关机，访问者就无法访问。二、 浏览器访问网页原理1、当我们利用浏览器访问网页时，其实是有真实的物理文件传输，浏览器会先将网页上的内容缓存到本地文件