QQQqq031110的博客

* 在25%的时候进行的一个动画 *//* 在50%的时候进行的一个动画 */from,to表示开始、结束状态，也可以使用0%,100%定义。@keyframes 动画名称（英文） {/* 动画的开始 *//* 动画结束 *//* 动画开始 *//* 动画结束 */@keyframes 动画名称（英文） {

它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。内部的Box会在垂直方向，一个接一个地放置Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。float属性不为none。

设置opacity元素的所有后代元素会随着一起具有透明性，【一般用于调整图片或者模块的整体不透明度】hidden 隐藏该元素但是该元素所占的内存空间还存在，即“隐身效果”。兼容性：IE6、7、8【不支持】，IE9及以上版本和标准浏览器都支持。【取值：0-1】0表示全透明，1表示全不透明，0-1之间表示半透明。none：隐藏该元素并且该元素所占的空间也不存在了。visible 显示元素。

CSS精灵英文叫法 CSS sprites，通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”，其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置。适用于一般小图片（如小图标，小背景），不适合大背景大布局背景。2.1 精灵图的原理。2.1.1 实现步骤。2.1.3 应用场景。

描述：给父元素加 overflow 属性，overflow 为 visible 以外的其它值时可以帮助实现。描述：在浮动元素的最后加一个空块元素，此元素本身不浮动，且添加样式clear:both。优点：内容适应性强，不会在结构上产生冗余代码，可多次重复使用。缺点：可能会隐藏内容或触发不需要的滚动条。描述：给浮动元素的父元素固定高度。缺点：代码冗余，影响代码可读性。描述：给浮动标签的父标签添加。父元素overflow方法。解决问题即清除动的方法。提示通常使用both!

css表单元素

a 指的是一个旋转角度值，如果为正值，元素围绕 Z 轴顺时针旋转；a 指的是一个旋转角度值，如果为正值，元素围绕X轴顺时针旋转；a 指的是一个旋转角度值，如果为正值，元素围绕Y轴顺时针旋转；angle：一个角度值，指定在 3D 空间旋转角度，正值顺时针旋转，反之元素逆时。x：是一个 0 到１之间的数值，主要用来描述元素围绕 X 轴旋转的矢量值。y：是一个 0 到１之间的数值，主要用来描述元素围绕 Y 轴旋转的矢量值。z：是一个 0 到１之间的数值，主要用来描述元素围绕 Z 轴旋转的矢量值。

metaname= " keywords"content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!小U课堂是优就业打造的在线实用技能学习平台，我们要完成 首页、同步课程、在线练习，精品课程、视频详情、登录、注册页面、个人中心等静态页面的制作。”、“×××网作为…

padding可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。概述：CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充、和实际内容。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。边框是围绕内容和内边距之间的一条或多条线，通过边框属性指定一个元素的边框的宽度、样式和颜色。设置标签所有边框的样式，或者单独地为各边设置边框样式。

概念：当样式声明发生冲突时，用户代理需要确定样式声明的最终值，既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序 ，这个过程就叫做层叠。优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。- 当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上，内部和外部样式遵循就近原则。概述：每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px。原理：确定基准值以常见的750像素宽度的设计稿为例，根据vw单位的原理100vw = 750px,即 1vw = 7.5px，根据设计稿中的px值，转换成对应的vw值进行布局，也可以直接写px。

justify-content水平位置 总网格区域相对于容器左右对齐方式(网格内容大小小于容器宽时) align-content 位置 总网格区域相对于容器上下对齐方式(网格内容大小小于容器高时)grid-column属性是grid-column-start和grid-column-end的合并简写形式。place-items属性是align-items属性和justify-items属性的合并简写形式。grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

也叫响应式布局，响应式开发实现不同屏幕分辨率的终端上浏览网页的不同展示方式。响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局，从而在每种设备屏幕宽度下呈现的界面是不同的。

a 指的是一个旋转角度值，如果为正值，元素围绕 Z 轴顺时针旋转；a 指的是一个旋转角度值，如果为正值，元素围绕X轴顺时针旋转；a 指的是一个旋转角度值，如果为正值，元素围绕Y轴顺时针旋转；angle：一个角度值，指定在 3D 空间旋转角度，正值顺时针旋转，反之元素逆时。x：是一个 0 到１之间的数值，主要用来描述元素围绕 X 轴旋转的矢量值。y：是一个 0 到１之间的数值，主要用来描述元素围绕 Y 轴旋转的矢量值。z：是一个 0 到１之间的数值，主要用来描述元素围绕 Z 轴旋转的矢量值。

* skew(30deg,45deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 45 度 */单位：deg ​ 当角度值为正数时，元素沿着顺时针方向旋转 ​ 当角度值为负数时，元素沿着逆时针方向旋转。transform: translate(x,y) 沿着x轴和y轴移动。沿着中心点旋转，默认值。transform: translateX(x) 沿着x轴移动。transform: scale(x,y) 沿着x轴和y轴缩放。transform: skew(x,y) 沿着x轴和y轴倾斜。

语法transition: transition-proterty transition-duration transition-timing-function transition-delay;transition: css样式 动画的执行时间 速度类型 动画的延迟时间; 多个css属性用逗号隔开 transition: transform 2s, background-color 2s;​注意：谁发生了属性的改变 就加在谁身上 属性1、transition-protertyc

语法transition: transition-proterty transition-duration transition-timing-function transition-delay;transition: css样式 动画的执行时间 速度类型 动画的延迟时间; 多个css属性用逗号隔开 transition: transform 2s, background-color 2s;​注意：谁发生了属性的改变 就加在谁身上 属性1、transition-protertyc

它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。内部的Box会在垂直方向，一个接一个地放置 Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。/* 控制要显示的行数 */

1.使用步骤1.登录阿里矢量图标网站2.搜索想要的图标且加到购物车3.点击右上角的购物车4.选择下载代码，下载完成后解压文件5.把下载的文件放到你的项目中6.引入iconfont.css文件或者iconfont.js文件使用三种方式：下载代码1、Unicode 方式引用Unicode 是字体在网页端最原始的应用方式，特点是：兼容性最好，支持 IE6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。

网页中有很多布局效果，标准流没有办法完成，使用可以利用浮动改变元素默认的排列方式，举例说明（如网页中横向排列的模块或者一左一右排列的模块）。1.1、浮动的概念浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】。1.2、浮动属性floatleft 左浮动right 右浮动float:none 不浮动(默认值)1.3、浮动的基本特性可以使块元素在一行排列脱离文档流提升层级。

如果元素的四个边的位置是使用“top”、“right”、“bottom”和“left”来描述的，那么元素的“height”和“width”将隐式地由偏移量决定。浮动元素： 使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本、图片、表单标签依然会为这个元素让出位置，环绕在周围。相对于元素在正常的文档流中的位置移动它，把一个正常布局流中的元素从它的默认位置按坐标进行相对移动。表示“将元素放在文档布局流的默认位置，HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充、和实际内容。（即装东西的容器）所有 HTML 标签可以看作盒子，在 CSS 中，"box model" 这一术语是用来设计和布局时使用的。（即网页布局就是利用 CSS 摆盒子）

可继承的属性 font-size font-family font-style font-weight font line-height text-align text-indent color。白色： rgb(255,255,255) 、黑色 : rgb(0,0,0) 红色： rgb(255,0,0) 、绿色： rgb(0,255,0) 、蓝色： rgb(0,0,255)/*font-family:"宋体","微软雅黑";/*font-family:"微软雅黑","宋体";

为HTML标记语言提供了一种样式描述，即【设置HTML页面中的元素的位置、排版、样式外观等】 如文本内容（字体、大小、对齐方式等）、图片的外形（宽、高、边框等）。每个表格均有若干行（由tr标签定义），每行被分割为若干单元格（由td标签定义）。当读到一个样式表时，浏览器会根据它来格式化 HTML 文档，插入样式表的方法有三种：行间样式表、内部样式表、外部样式。作用：定义表格数据（table data） 单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。语法:

为了强调重要的词，在口语方面我们往往用重音强调，在文字方面则是用粗体字来达到强调的效果。区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等。常常我们在需要手动换行地方，加入换行标签 ，即可实现内容强制换行。定义粗体文本,用于吸引读者的注意到该元素的内容上。作为行内容器包含短语内容，通常用来区分文本样式。被从文档中删除的文字内容。强调，用于标记强调内容。标记重要强调的内容。待办事项中已完成的项。

重点掌握内部链接，外部链接，锚点链接。

h1-h6标题标签；标题标签中文字大小依次减小，重要程度依次减弱。（h1标题一个页面中只有一个，h2~h6是可以有多个的。五大浏览器：chrome、safari、Firefox、Opera、IE。可以用来划分页面的区块，里面嵌套任何的标签。段落标记（p标签不能嵌套块级标签）内核：presto blink。内核：webkit、blink。2.Firefox 火狐浏览器。3.Safari 苹果浏览器。hr标签：水平分割线 块级标记。4.opera 欧朋浏览器。内核：trident。