HTML+CSS初识
IE ---- trident
chrome --- webkit--blink
firefox----gecko
safari --- webkit
opera --- presto -- blink
2.web标准下网页的三层结构是什么？什么是w3c？
结构层：主要规定网页的结构，通过html来进行描述。
表现层：主要规定网页的样式，通过css来描述。
行为层：主要规定网页的交互效果，通过js来描述。
W3C:万维网联盟，主要规定html和css的语法规范。
3.什么是HTML，名称中有哪两种含义？
html:超文本标记语言（hyper text markup langue）
含义：
超文本：不但可包含文字，还能包含图片，视频等多媒体内容。
标记语言：html标记可以让浏览器对于不同的标签进行不同渲染方式。
4.html标签可以分为那两类，并分别说明其各自的特点？
单标签：只有开始标记，没有结束标记。
比如：<br>,<hr>
双标签：由开始标记和结束标记成对组成的标签。
<a></a>,<html></html>
5.请说出常见的块级标签和行内标签分别有哪些，并简要说明每个标签的使用场景。
块级标签：
（1）h1-h6:标题标签
使用场景：用来规定页面的标题内容，h1用于logo，h2--h6可以用来规定其他模块的标题。
h1只能出现一次。其他标题标签不能跳级使用。
（2）p:段落标签
使用场景：主要用来设置页面的文字段落内容。
p标签可以包含图片文字等其他标签，但是不能包含自身。
（3）列表：ul和ol
使用场景：页面中相等规格和样式的模块可以使用列表标签来进行设置。
列表项：li标签。一般只能作为ul或者ol的列表项，同时不能包含自身。
（4）自定义列表：dl
列表标题项：dt
列表描述项：dd
使用场景：当页面某个结构分为标题项和描述项，可以使用dl自定义列表来设置。
dl中可以包含多个dd，一般只能由一个dt。
（5）div:无语义的布局容器。
行级标签：
（1）图片：img标签
（2）超链接：a标签
6.请说出图片标签的语法结构和他的属性的含义？
<img src="图片的路径" alt="图片加载失败的提示信息" title="鼠标悬浮的提示信息" width="图片的宽度" height="图片的高度">
7.超链接的语法格式及其属性分别是什么？并说出其使用场景？
<a href="跳转的网址或者html页面" target="跳转的方式"></a>
target=“_self”:当前页面打开
target="_blank":新页面打开
使用场景：
（1）跳转到其他html页面：
<a href="../1.html"></a>
(2) 空链接（不用跳转的链接）
<a href="#"></a>---跳转到页面头部
<a href="javascript:void(0);"></a>---不做任何跳转
（3）跳转其他网址：
<a href="https://www.baidu.com"></a>
(4)锚点链接：
a.跳转当前页面的某个位置：
<a href="#id属性值"></a>
<p id="跳装到目标id属性值"></p>
b.跳转到其他页面的某个位置：
<a href="./1.html#id属性值"></a>
<p id="跳装到目标id属性值"></p>-->1.html页面的一个标签。
8.什么是HTML语义化，并说出语义化的好处？
html语义化：合理的使用html的标签和其属性来规定页面的结构。比如：h标签设置标题，p标签设置文字等等。
html语义化的好处：
（1）在没有css的情况下页面也能呈现很好的结构。
（2）利于代码维护，便于团队协作开发。
（3）良好的用户体验。
（4）有利于SEO优化。
1.脑补出完整的表格结构，并用基础表格标签进行布局。
2.按照不规则的结构进行合并行(rowspan)或者合并列(colspan)
3.同时注释掉被合并的单元格。
2.表格的结构标签有哪些，其作用是什么？
caption:表格的标题
thead:表格的头部
tbody:表格的主体内容
tfood：表格的底部
3.简述css的三种引入方式，并说出他们的优先级？
1.行内引入：再标签的style属性中设置样式。
2.内嵌引入：再head标签内部添加一个style标签，在该标签中添加样式。
3.外部引入：在head标签中添加一个link标签，同时在该标签的href属性中设置css外部文件的地址。
优先级：就近原则。
4.css的基本选择器有哪些？并说出其优先级？
1.id选择器
#box{
}
2.class选择器：
.box{
}
3.标签选择器：
div{
}
4.通用选择器：
*{
}
优先级：
id选择器：100
class选择器：10
标签选择器：1
通用选择器：0
5.css字体样式有哪些，请分别说出他们的样式名称和样式的值及其值的含义？
font-family:"微软雅黑";
font-style:设置字体的风格
样式值：
normal:正常
italic:斜体
font-weight:设置字体的粗细
样式值：
bold：加粗
normal:正常
数值：100-900，700代表bold
font-size:设置字体大小
样式值：
像素值：px
rem:相对于html的字体大小。
em:相对于父元素字体的大小
百分比：相对于父元素字体的大小的百分比。
line-height:设置行高
样式值：
像素值：px
整数数字：1，2，3，-->字体大小的倍数。
6.写出css字体样式的简写形式？
font:font-style font-weight font-size/line-height font-family
上述简写必须有：font-size和font-family
7.请说出表格宽高属性的设置规则？
1.给table设置宽高属性，设置的是整个表格的大小。
2.tr只能设置高，影响的一行的高的。
3.给td一般设置宽度，影响的该列的宽度。
8.表格的css样式有哪些？
border-collapse:
collapse:合并单元格的边框--真正的细线表格设置方法。
separate：边框不合并。--默认
boder-spacing:设置单元格间距
像素值：px
normal:正常--默认--2px
vertical-align:设置文字的垂直对齐方式
top
middel
bottom
text-align:
left
center
right
9.id属性和class属性的命名规则有哪些要求？
1.只能由数字，字母，下划线，中划线组成，且不能以数字开头。
2.见名知意。
3.建议使用中划线命名法或者下划线，
1.后代选择器：E F {css样式}，选择E下面的所有F。
2.子代选择器：E>F{css样式}，选择E的所有F子元素。
3.相邻选择器：E+F{css样式}，选择E的下一个兄弟F。
E~F{css样式}：选择E的后面的所有兄弟F。
4.交集选择：EF{css样式}：选择既满足E又满足F的元素。
5.并集选择器：E,F,C,..{css样式}，选择满足E或者F或者时C的所有元素。
6.伪类选择器：
a:link:正常未访问的链接
a：visited:访问过后的链接
a:active:激活的链接（点击不释放）
E:hover:鼠标悬停的状态。
2.什么是css的盒模型？并说出盒模型每个部分的含义及书写方式。
css盒模型：（box model）,主要用来设计和布局使用。
css盒模型的组成：主要包含：内容区，内边距，边框，外边距组成。
1.边框（border）
border-width：边框的粗细
取值：
px
默认是3px
border-style;边框线型
取值：
solid:实现
dashed:虚线
dotted:点线
double:双线
border-color：边框的颜色
书写方式：
（1）四个方向均不同：
border-style/width/color:上 右 下 左
（2）四个方向一致简写：
border: border-width border-style border-color
(3)四个方向分别设置
border-方向-width/style/color
(4)四个方向分别设置简写：
border-方向 ： border-width border-style border-color
2.内容区
含义：由width和height决定的区域，一个元素的内容和子元素都是在内容区开始排列的。
书写格式：
width:设置内容区的宽度
取值：
auto:--默认：有标签默认的渲染方式决定。
百分比:相对于父元素宽度的百分比。
像素px
height:设置内容区的高度
取值：
默认是0
百分比:相对于父元素宽度的百分比。
像素px
3.padding:内边距
取值：
默认是0
像素px
百分比：相对于父元素内边距的百分比。
不能是负值。
含义：内容区到边框之间的距离由盒模型的内边距来决定。
书写方式：
（1）四个方向统一设置：
padding:上 右 下 左
padding:上 左右 下
padding:上下 左右
padding:上下左右
（2）四个方向分别设置：
padding-方向：px像素值
方向：top/right/bottom/left
4.margin:外边距
取值：
默认是auto
像素px
可以是负值。
含义：外边距就是盒子边框以外的距离，主要用来确定两个盒子之间的间距。
书写方式：
（1）四个方向统一设置：
margin:上 右 下 左
margin:上 左右 下
margin:上下 左右
margin:上下左右
（2）四个方向分别设置：
margin-方向：px像素值
方向：top/right/bottom/left
3.请分别描述一下外边距在使用的时候会出现的问题，并给出解决方案。
1.margin传递：
问题描述：父元素没有border和padding时，子元素设置的margin-top会传递给父元素，在父元素上生效。
解决方法：
方法1：给父元素添加border或者padding
方法2：给父元素添加：overflow:hidden;
2.margin塌陷：
问题描述：相邻的两个子元素垂直方向的margin会出现合并，只有一个生效，合并后值取最大的那个。
解决方法：
方法1：尽量避免相邻两个子元素之间margin出现相遇。统一给其中一个设置即可。
方法2：给其中一个子元素添加一个父元素div，给div设置overflow:hidden；
4.请说出常见的文本样式都有哪些，并说出他们的作用和取值？
text-align:文本的水平对齐方式
取值：
center:居中
left
right
justify:两端对齐。
text-decoration:文本装饰
取值：
underline：下划线
overline:上划线
line-through:删除线
none:去除文本装饰
text-indent:首行缩进
取值：
px
2em；2个字符的宽度。
color:文本颜色
取值：
rgb()
#fff
letter-spacing:设置字符间距。
取值：
px
5.如何用边框实现一个倒三角，请手写出html和css部分的代码？
<div></div>
div{
width:0;
height:0;
border-top:50px solid red;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid transparent;
}
1.css背景样式包含：背景颜色，背景图片，背景平铺方式和背景图片的位置。
2.
background-color:设置背景颜色
取值：
单词
rgb()
十六进制
rgba(0,0,0,alpha)
alpha:表示颜色透明度，0-1之间的值，越接近0越透明。
background-img:设置背景图片
取值：
none
url(背景图片的路径)
background-repeat:
取值：
repeat:默认，x和y方向平铺
no-repeat:不平铺
repeat-x
repeat-y
background-postion:设置背景的位置：
取值：x方向位置 y方向的位置
像素值：
百分比
单词：top/left/bottom/center/right
2.背景图片和html中img有什么区别？
1.img是html语法，背景图片是css语法。
2.img是网站中的重要信息，背景图片主要用来装饰。
3.img中一般不放内容，背景图片一般上面都有内容。
3.请说出常见的块级元素，行内元素，行内块都有哪些，请分别说出他们的特点？
块级元素：本身属性为display：block;的标签
特点：
（1）独占一行，
(2)宽度默认是父级的宽度，高度内容撑开。
（3）可以设置盒模型属性（外边距，padding，border）
(4)支持text-align和line-height
行内元素：本身属性为display：inline;的标签
特点：
（1）默认在一行内从左到右排列。
（2）宽高由内容撑开，设置宽高无效。
（3）支持左右padding和margin，上下的padding和margin无效。
（4）不支持text-align和line-height。
（5）浏览器将行内元素按照文本来解析。
行内块元素：本身属性为display：inline-block;的标签
特点：
（1）默认在一行内从左到右排列。
（2）宽高由内容撑开，设置宽高有效。
（3）支持所有的盒模型属性（maargin,padding.border）
(4)支持text-align和line-height
4.标签之间如何进行转换。
display:block;--将元素转换为块级元素。
display:inline-block;--将元素转换为行内块级元素。
display:inline;--将元素转换为行内元素。
5.在css中设置元素隐藏的方法都有哪些，请说出他们的区别？
1.display:none:隐藏元素和元素所占的空间。
显示：display:block
2.visibility:hidden;隐藏元素，元素所占空间保留。
显示：visibility：visible;
6.vertical-align作用及其使用场景？
1.vertical-align作用：设置行内块元素的垂直对齐方式。
取值：
top:顶线对齐。
middle：中线
bottom：底线对齐
baseline:基线对齐。-默认
2.使用场景：
（1）给表格的内容设置垂直对齐。
（2）设置图片和文字对齐。
（3）设置图片和图片的对齐。
（4）解决图像的三像素问题。
7.什么时图像三像素问题，解决的办法
1.问题描述：一个块级元素内的图像默认和元素底部有三个像素的间隙。
2.问题原因:元素内部的空格和换行这些文本和图片的默认对齐方式是基线对齐导致的。
3.解决方法：
（1）设置图片的vertical-align不为默认。
（2）将图片转为块级元素。
（3）将元素的字体大小设置为0
8.如何让图片水平居中？
元素居中：
（1）块级元素：
水平居中：margin 0 auto;(给块级元素定宽)
（2）行内元素：
水平居中：text-align-center; ------设置给行内元素的父级元素。
垂直居中：line-height:父级高度。----设置给行内元素的父级元素。
（3）行内块元素：
水平居中：text-align-center;
垂直居中：line-height:父级高度。--设置给图片的父级元素。
overflow:设置文本溢出格式
取值：
visible:文本溢出默认在盒子正下方显示--默认
scroll：始终出现文本的滚动条。
auto:文本不溢出就不出现滚动条，溢出出现滚动条。
hidden:文本溢出隐藏。
2.css的三大特性是什么，请说出他们之间的关系？
1.继承性：父元素向子元素传递样式的机制。
2.层叠性：当一个元素上相同的选择器设置的样式也相同时，后面的样式会将前面的样式层叠掉，后面的样式生效。
3.优先级：浏览器会按照优先级判断元素的最终生效的样式。
关系：浏览器会根据三大特性来判断一个元素上真正生效的样式是哪个。
（1）样式不冲突就不层叠。
（2）样式冲突：
a.继承来的属性优先级最低。
b.当选择器相同时，或者其优先级相同时，后面的层叠前面的。
c.当选择器不同是，优先级最高的样式生效。
3.可以继承的css样式都有哪些？
font系列：
font-family
font-size
font-weight
font-style
line-height
text系列：
text-align
text-decoration
text-indent
color
letter-spacing
注意：
（1）a不能继承color
（2）h标签不能继承font-size和font-weight
4.css的优先级都会考虑哪些情况？
（1）继承来的样式优先级最低。
（2）更具选择器来判断优先级。
a.基本选择器：
行内：1000
id:100
class:10
tagName:1
*:0
b.复合选择器：
规则：复合选择器的优先级就是每个基本选择器的优先级之和。
特例：并集选择器每个单独计算。
（3）被!important修饰的样式其优先级最高。
5.什么是浮动？
浮动会使得元素脱离文档流，不脱离文本流，使元素按照指定的方向浮动，直到遇到父元素的边界或者其他浮动元素的边界位置。
6.在实际开发中，关于浮动的使用有哪些注意事项？
1.浮动的元素一般都要设置一个统一的父元素。
2.一个父元素中的子元素要么都浮动，要么都不浮动。
3.浮动的元素类似行内块，可以设置宽高和盒模型属性。
4.浮动会提高元素的层级。
7.什么是清除浮动？其解决的方法有哪些？
清除浮动：当父元素没有设置高度，子元素浮动会使得父元素高度塌陷，子元素无法撑开父元素的高度。
解决方法：
（1）给父元素设置高度
（2）给父元素overflow:hidden
(3)给父元素底部创建一个空的div，给div设置clear:both;
(4)伪元素法：
.clearfix::after{
content:"";
display:block;
clear:both;
}
8.什么是精灵图，精灵图的优缺点？
精灵图：使用图片拼合技术，将页面上的小图标统一拼合到一张图片上，这张图片就叫做精灵图。
优点：
（1）减少请求次数，提升网站性能。
（2）减少命名困扰。
（3）更改风格方便。
缺点：
（1）生成精灵图需要计算容器大小，比较麻烦。
（2）使用精灵图需要背景定位，调试麻烦。
1.相对定位：postion:relative;
特点：
（1）不脱离文档流
（2）定位父级：自身
（3）层级：可以提高层级，比文档流和浮动的元素层级高。
（4）不设置定位属性：没有任何影响。
（5）使用场景：
微调自身的位置。
用于绝对定位的定位父级。
2.固定定位：postion:fixed;
特点：
（1）脱离文档流
（2）定位父级：文档窗口
（3）层级：可以提高层级，比文档流和浮动的元素层级高。
（4）不设置定位属性：left和top都是当前自身相对于浏览器窗口的距离。
（5）使用场景：
模态框，回到顶部等固定在浏览器窗口的元素都可以使用固定定位实现。
3.绝对定位：postion:absolute;
特点：
（1）脱离文档流
（2）定位父级：最近的有postion属性且属性值不为static的父级元素。
（3）层级：可以提高层级，比文档流和浮动的元素层级高。
（4）不设置定位属性：left和top都是当前自身相对于定位父级的距离。
（5）使用场景：
当一个元素参照于某个元素比较好设置位置，这时可以使用绝对定位。
定位父级会不会发生变化。
2.什么是HTML语义化？
html语义化：合理的使用html的标签和其属性来规定页面结构，比如h标签设置标题，p标签设置文本等..
html语义化的优点：
（1）没有css的情况下页面也能有很好的结构。
（2）有利于代码维护，便于团队协作开发。
（3）有利于用户体验。
（4）有利于SEO优化。
3.如何似的元素水平和垂直居中？
1.块级元素水平和垂直居中：
（1）水平：margin:0 auto;
(2)使用定位水品垂直居中：
方法1：
postion:absolute/fixed;
left:50%;
top:50%;
margin-left:-自身宽度的一半;
margin-top:-自身高度的一半;
方法2：
postion:absolute/fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:auto auto;
2.行内元素和行内块元素在块级元素中居中
水平：text-align:center;
垂直：line-height:盒子的高度;
1.rgba(r,g,b,alpha):设置透明的颜色
alpha：表示透明度，0-1之间的值，越接近0越透明。
2.opacity:数值
数值：0-1之间间的值，，越接近0越透明。
作用：给元素整体设置透明度，元素及其所有点的子元素都会带上透明度。
3.filter:alhpa(opacity=数值)
数值：0-100的值 ，越接近0越透明。
2.什么是BFC以及生成BFC的条件都有哪些？
BFC概念：BFC全称块级格式化上下文（block formatting context）是css盒模型的渲染模式。该渲染区域内只有块级盒子才能参与，BFC规定了块级盒子如何布局，并且这个区域内外毫无关系。
生成条件：
（1）根标签html默认是BFC
（2）overflow值不为默认（visible）
(3)display:inline-block;
(4)float属性不为none
(5)postion属性absolute或fixed.
3.BFC的特性都有哪些，以及可以解决哪些问题。
特性：
（1）内部的块级标签在垂直方向一个接一个排列。
（2）当两个块级元素的距离由垂直方向的margin决定是，同属一个BFC下相邻的两个块级元素会发生margin合并。
（3）每个标签默认的左外边距和直接父元素的左边界（内容区的左边界）直接接触。浮动元素也是如此。
（4）计算BFC高度时，浮动的元素也会参与计算。
（5）BFC的区域不会和浮动的元素重叠。
（6）BFC就是页面上一个独立的容器，容器里面的子元素无法影响外面的元素，反之亦然。
解决的问题：
（1）margin合并：第（2）条
（2）清除浮动：第（4）条
（3）两栏三栏自适应：第（5）条
（4）避免图文环绕：第（5）条
4.请说出表单控件input都有哪些类型，以及这些类型都表示什么控件。
input:表单主要的控件标签。主要通过tyoe指定表单控件的类型
type:
text:文本框
password:密码框
radio:单选按钮
checkbox:复选框
image:图片按钮 src指定图片的路径
submit:提交按钮
reset:重置按钮
button:普通按钮
file:文件上传
属性：multiple：指定提交多个文件
5.请说出表单控件的常见属性都有哪些及其属性的含义。
1.name属性：
可以给所有的表单元素添加。
name属性是必须的，只有添加了这个属性，表单提交后才能将该控件对应的数据提交到后台。
2.value属性：
给input添加：
用来指定文本框或密码框的默认内容
radio和checkbox通过value来指定提交的内容。
给按钮添加指定按钮的显示文字。
给select的option添加：指定该选项提交的内容。
3.readonly：设置文本框只读（不能修改内容）
4.disabled:设置禁用表单功能。
5.selected:设置select的默认选中的option
6.maxlength:设置文本框的最大输入长度
7.size:设置select的显示选项的数目
6.请写出两种等高布局的实现思路？
方法1：
（1）left，center，right：在父元素中左浮动。
高度设置最小高度。min-height:100px.
(2)给left,center,right设置：
padding-bottom:1000px
margin-bottom:-1000px
(3)给父元素设置：
overflow:hidden;
方法2：
（1）left，center，right：在父元素中左浮动，需要给这三列添加填个背景div。
（2）给最内层背景设置清除浮动
（3）给三个背景以此设置margin-left,向右移动出三列的宽度。
（4）给三列依次设置margin-left移动到对应的背景上。
main:主体
tag：标签
message (msg)：信息
tips：小提示
vote ：投票
friendlink：友情链接
title：标题
2.定位都有哪几种方式，请分别说出他们的参考点及其特点。
1.相对定位：postion:relative;
特点：
（1）不脱离文档流.
（2）定位父级：自身
（3）层级：可以提高层级，比文档流和浮动的元素层级高。
（4）不设置定位属性：没有任何影响。
（5）使用场景：
微调自身的位置。
用于绝对定位的定位父级。
2.固定定位：postion:fixed;
特点：
（1）脱离文档流
（2）定位父级：文档窗口
（3）层级：可以提高层级，比文档流和浮动的元素层级高。
（4）不设置定位属性：left和top都是当前自身相对于浏览器窗口的距离。
（5）使用场景：
模态框，回到顶部等固定在浏览器窗口的元素都可以使用固定定位实现。
3.绝对定位：postion:absolute;
特点：
（1）脱离文档流
（2）定位父级：最近的有postion属性且属性值不为static的父级元素。
（3）层级：可以提高层级，比文档流和浮动的元素层级高。
（4）不设置定位属性：left和top都是当前自身相对于定位父级的距离。
（5）使用场景：
当一个元素参照于某个元素比较好设置位置，这时可以使用绝对定位。
定位父级会不会发生变化。
3.css的三大特性是什么，请说出他们之间的关系？
1.继承性：父元素向子元素传递样式的机制。
2.层叠性：当一个元素上相同的选择器设置的样式也相同时，后面的样式会将前面的样式层叠掉，后面的样式生效。
3.优先级：浏览器会按照优先级判断元素的最终生效的样式。
关系：浏览器会根据三大特性来判断一个元素上真正生效的样式是哪个。
（1）样式不冲突就不层叠。
（2）样式冲突：
a.继承来的属性优先级最低。
b.当选择器相同时，或者其优先级相同时，后面的层叠前面的。
c.当选择器不同是，优先级最高的样式生效。
4.在实际开发中，关于浮动的使用有哪些注意事项？
1.浮动的元素一般都要设置一个统一的父元素。
2.一个父元素中的子元素要么都浮动，要么都不浮动。
3.浮动的元素类似行内块，可以设置宽高和盒模型属性，宽高默认由内容撑开。
4.浮动会提高元素的层级。
5.请说出常见的块级元素，行内元素，行内块都有哪些，请分别说出他们的特点？
块级元素：本身属性为display：block;的标签
特点：
（1）独占一行，
(2)宽度默认是父级的宽度，高度内容撑开。
（3）可以设置盒模型属性（外边距，padding，border）
(4)支持text-align和line-height
行内元素：本身属性为display：inline;的标签
特点：
（1）默认在一行内从左到右排列。
（2）宽高由内容撑开，设置宽高无效。
（3）支持左右padding和margin，上下的padding和margin无效。
（4）不支持text-align和line-height。
（5）浏览器将行内元素按照文本来解析。
行内块元素：本身属性为display：inline-block;的标签
特点：
（1）默认在一行内从左到右排列。
（2）宽高由内容撑开，设置宽高有效。
（3）支持所有的盒模型属性（maargin,padding.border）
(4)支持text-align和line-height
（5）多个行内块元素垂直方向对齐可以通过vertical-align来控制。
1.简化了文档声明：
<! DOCTYPE html>
2.简化了字符集
<meta charset="UTF-8">
3.新增了语义化标签(11)
（1）块级标签：
header
main
footer
nav
article
section
aside
hgroup
figure
(2)行内标签：
mark
time
4.新增表单类型和属性：
input的新增类型：
search
` tel
email
url
range
min:定义最小值
max:定义最大值
step：合法数值的间隔。
number
color
date
time
datetime-local
month
week
datetime
新增的表单属性：
placeholder:input的提示信息。
autofocus:自动获取光标。-给输入框设置
autocomplete:自动填充。
min:定义最小值
max:定义最大值
step：合法数值的间隔。
form：用于表示该控件隶属于哪个表单，属性值为form标签的id值。
partten:设置输入框的文本的正则表达式。
list:设置input的数据列表：
5.新增全局属性。
6.新增API(应用程序接口)
canvas绘图
多媒体：
video:
属性：
src:设置视屏的路径
poster:设置封面
-----------
controls:调出视屏播放控件。
muted:静音
autoplay:自动播放。
loop
本地存储，离线存储
地理信息
2.如何兼容html5？
1.方法1：
（1）通过js创建标签：
document.createElement("header")
（2）将标签转化为块级：
header{
display:block;
}
2.使用html5shiv.js插件。
box-sizing作用是用来指定width和height属性的作用区域.
属性值:
content-box:默认值,width和height属性作用在内容区(content)
border-box:width和height属性作用盒子的占位大小(with/height = content+padding+border)
2.请说出你所知道弹性盒的相关术语都有哪些？
容器(container):设置display:flex/inline-flex的元素.
项目(items):容器内部的所有子元素.
主轴(main-axis):默认水平方向为主轴方向.
侧轴(交叉轴)(cross-axis):默认垂直方向为侧轴方向.
主/侧轴起点:flex-start
主/侧轴终点:flex-end
3.弹性盒的基本特性有哪些?
1.弹性盒只规定了项目在容器内部的布局方式,容器在整个文档流中还是正常的布局方式排列.
2.设置了弹性盒之后,容器的column-*(多列属性)会失效,项目的float,clear(清除浮动),vertical-align也会失效.
4.css3弹性盒的容器属性都有哪些？
1.display:flex/inline-flex;设置弹性盒
2.设置主轴的方向
flex-direction:
取值:
row:默认--水平向右
column:竖直向下.
row-reverse:水平向左
column-reverse:竖直向上
3.设置主轴对齐方式:
justify-content:
取值:
flex-start:默认--左对齐
flex-end:右对齐
centeter:水平居中
space-between:两端对齐(剩余控件分配在项目之间)
space-around:剩余控件分配在项目四周
space-evenly:均等分配(剩余空间均等的分配在项目和容器,项目和项目之间)
4.设置侧轴的对齐方式
align-items:
取值:
flex-start:侧轴起点--默认
stretch:在侧轴方向拉伸占满整个容器.(只有项目没有设置高度时生效.)
flex-end:底部对齐
center:居中
baseline:基线对齐
5.设置折行:
flex-wrap:
取值:
no-wrap;默认--不换行(所有项目默认都在主轴上一行排列)
wrap:换行
wrap-reverse
6.设置多行轴向的对齐方式:
align-content:
取值:
stretch:
(1)项目不设置高:项目在侧轴方向的高度平均分配给每个行的高.
(2)项目设置高:各行默认底部对齐,项目在侧轴的剩余高度分配在各行的底部.
flex-start:默认顶部对齐,各行之间无间隙
flex-end:各行底部对齐,各行之间无间隙
center:居中,各行之间无间隙.
space-between:剩余空间均等的分配在各行之间.
space-around:剩余空间均等的分配在每行的四周
space-evenly:均等分配(剩余空间均等的分配在每行和容器,行和行之间)
5.什么是css3过渡,其属性都有哪些?
css3过渡用来控制一个元素的样式从一个状态变为另一个状态的过程
控制这个过渡过程的属性:
(1)过渡属性:transition-property
取值:
none:默认
all:所有属性
属性列表 :width,height,....
(2)过渡时间:transition-duration
取值:
2s:2秒
2ms:2毫秒
(3)过渡方式:transition-timing-function
取值:
linear:默认-
ease:慢-块-慢
ease-in
ease-out
ease-in-out
(4)过渡延迟时间:transition-delay
取值:
2s:2秒
2ms:2毫秒
calc函数:计算函数,其作用是css的样式值可以通过这个函数进行计算.主要用在像素为单位样式的计算.
2.什么是css3渐变,css3渐变的语法有哪些?
1.css3的渐变是指背景从一个颜色过渡另一个颜色或者多个颜色之间的一个平稳的过渡效果.
2.css3的渐变是作用background-image上的属性.
3.渐变的分类:
a.线性渐变:linear-gradient(direction,color1 stop1,color2 stop2....)
direction:
(1) 方向关键字
to right
to left
to left top-->左上角
(2)角度
45deg--->右上角--to right top
b.径向渐变:radial-gradient(shape at 圆形的水平位置 圆形的垂直位置,color1 stop1,color2 stop2,.....)
(1)shape:渐变的形状
circle--默认
ellipse--椭圆
(2)at 圆形的水平位置 圆形的垂直位置
(1) 方向关键字
at center :中心
(2)像素值:
at 10px 10px
3.css3中2D/3D转换的都有哪些,请分别写出其语法结构和含义?
1.2d转换
a.位移:
transform:translate(x轴距离,y轴距离);
transform:translateX(距离);
transform:translateY(距离);
b.缩放:
transform:scale(x缩放系数,y的缩放系数);
transform:scaleX(x缩放系数);
transform:scaleY(y的缩放系数);
c.倾斜:
transform:skew(x倾斜的角度,y切斜的角度);
transform:skewX(x倾斜的角度);
transform:skewY(y切斜的角度);
d:旋转:2D旋转是绕着一个点旋转.
transform:rotate(角度);
设置旋转中心:
transform-origin: 中心x位置 中心y位置
2.3D转换
a.位移:
transform:translate3D(x轴距离,y轴距离,z轴距离);
transform:translateX(距离);
transform:translateY(距离);
transform:translateZ(距离);
b.缩放:
transform:scale3D(x缩放系数,y的缩放系数,z的缩放系数);
transform:scaleX(x缩放系数);
transform:scaleY(y的缩放系数);
transform:scaleZ(z的缩放系数);
c:旋转:3D旋转是绕着x/y/z三个坐标轴旋转的.
transform:rotateX(角度);
transform:rotateY(角度);
transform:rotateZ(角度);
transform:rotate3D(tx,ty,tz,deg);
4.css3中如何实现动画?
1.定义动画
@keyframes 动画名{
from{
}
to{
}
}
@keyframes 动画名{
0%{
}
25%{
}
....
100%{
}
}
2.调用动画
animation-name:动画名称
animation-duration:动画持续时间
animation-timing-function:运动方式
animation-delay:延时时间
animation-iteration-count:循环次数
默认为0
数值
infinite:无限循环
animation-play-state:运动状态
running--默认 paused--暂停
animation-direction:运动的方向
normal:正常
reverse:倒放
alternate:正反交替
animation-fill-mode:运动意外的状态
forwards:结束时停留在结束位置.
backwards:开始之前停留在初始位置.
both
本文来自博客园，作者：爱吃水果的姐姐，转载请注明原文链接：https://www.cnblogs.com/yeziblogs/p/16203268.html
对温床的眷恋，对过去的沉溺，容易让人产生一种好像什么都晚了的错觉。有没有勇气去追寻自己想要的生活，与你是几岁都没有关系。任何时间都是及时的，年轻的，能有所为的