【简答题】

1、文档声明的意义是什么，如果不加会怎么样

是html5版本的声明，它是html5标准网页声明,全称为Document Type HyperText Mark-up Language，意思为文档种类为超文本标记性语言或超文本链接标示语言，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。放在xHTML文档的顶部

2、常见的块级标签、行内标签、行内块标签都有哪些

块级：div，table tr td，dl dt dd，ul li，p，fieldset，legen，h1-h6，input，form❓
行级：a，span，em，strong，sub，sup
行内块级：img，input，textarea，select，option❓
说明：fieldset：对表单进行分组，一个表单可以有多个fieldset。
legend：说明每组的内容描述。

3、a标签都有哪些用法

a标签是一个跳转标签，控制页面之间的跳转。href属性里设置跳转页面的路径，target属性里设置是在当前页面跳转还是新建页面跳转。target默认属性为_self（在当前页面跳转），设置为_blank则表示要新建页面跳转。title属性为鼠标悬停时展示的信息。
a标签不仅可以让文字点击，也可以让图片被点击
一个a标签必须有一个href属性，否则a标签不知道要跳转到什么地方
如果通过a标签href属性指定一个URL地址，那么必须在地址前面加上http://或者https:// 除了URL地址，还可以指定一个本地地址

4、img中的src title alt属性都是什么意思

src"的值为一个文件路径，用于告诉浏览器图片放在那个文件的。（相对路径和绝对路径）
alt属性
1、alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户，以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候，图片的替换文字。
2、alt属性值得长度必须少于100个英文字符
3、alt属性是img标签的必须属性，如果没有特别意义的图片，可以写alt=“”
4、alt属性是搜索引擎判断图片与文字是否相关的重要依据，alt属性添加到img主要的目的才是为了SEO
title属性
1、title属性并不是必须的。
2、title属性规定元素的额外信息，有视觉效果，当鼠标放到文字或是图片上时有文字显示。
3、title属性并不作为搜索引擎抓取图片的参考，更多倾向于用户体验的考虑。

5、html5新增的标签都有哪些

新增标签讲解
canvas，audio、video、source、embed、track、datalist、keygen、output、article、aside、bdi、nav、mark、rt、rp、ruby、time、wbr等
其他说明：在html5中，针对用户的输入框增加了许多语义，如用户在界面搜索时，搜索的输入框的类型应该为"search"

6、什么是语义化，为什么要语义化呢

语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解.
语义化的HTML文档有助于提升你的网站对访客的易用性，比如使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说，则有助于它们建立索引，并可能给予一个较高的权值。
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

7、哪些样式可以继承呢

css继承样式
css继承样式有：visibility、cursor、letter-spacing、color、font、text-indent、text-align、list-style、list-style-type等

8、选择器的优先级是什么

作用范围越小，优先级越高
由选择器的优先级（权重）来决定，优先级高的优先显示。

9、什么是盒子模型，都有哪几部分组成

盒模型是CSS中使用的一种思维模型，可分为两类，一类是标准盒模型是W3c盒模型标准，另一类是怪异盒模型（也称IE模型）是IE低版本盒模型标准
盒模型的组成：content(内容区)+padding(填充区)+border(边框区)+margin(外界区)
作用：控制元素和元素之间，或者元素和内容之间的位置关系。
不同部分的说明：
content(内容)：盒子的内容，显示文本和图像。
border(边框)：围绕在内边距和内容外的边框。
padding(内边距)：清除内容周围的区域，内边距是透明的。
margin(外边距)：清除边框外的区域，外边距是透明的。

10、什么是浮动、浮动有什么特点、如何清除浮动

概念：元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制移动到指定位置。
浮动float，CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中浮动让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。
让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
作用：可以实现盒子的左右对齐等等.
浮动最早是用来控制图片，实现文字环绕图片的效果。
语法： 选择器 {
float: 属性值;
}
属性值：
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

清除浮动的本质就是清除浮动元素造成的影响。特别地，如果父盒子本身有高度，则不需要清除浮动。
语法： 选择器 { clear: left/right/both; }
清除浮动的方法：
1.额外标签法（隔墙法）：
在浮动元素末尾添加一个空的块级元素标签（是W3C推荐的做法），例如：

优点：通俗易懂，书写方便 缺点：增加额外的标签使HTML结构不够简洁 2.父级添加overflow： 给父级添加 overflow 属性，将其属性值设置为 hidden、auto 或 scroll。 优点：代码简洁 缺点：无法显示溢出的部分

11、有几种定位，他们都是相对什么参照物定位的

1、相对定位(relative相当于灵魂出窍的场面)
特点：
参照物为自身的默认位置
占据空间
不会破坏布局流
相对定位元素不可层叠，依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。
2、固定定位(fixed)
特点：
参照物为浏览器窗口
固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。
3、粘性定位(sticky 存在兼容问题)
特点：
是relative 和fixed的结合
当页面没有触发滚动条的时候，执行的效果是position：relative，反之执行的是position：fixed
应用是：页面吸顶
4、静态定位（static 默认）
当你没有为一个元素(例如div)指定定位方式时，默认为static，也就是按照文档的流式(flow)定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适应，取得相对较好的布局效果。
一般来说，我们不需要指明当前元素的定位方式是static——因为这是默认的定位方式。除非你想覆盖从父元素继承来的定位系统。
left,top属性对static没有效果，static是靠margin这些定位的
5、层级定位
z-index：position元素重叠时使用

12、列出几种css3的选择器

1.通配符选择器（所有浏览器支持）
通用选择器用*来表示，用来选择所有元素，，也可以选择某个元素下的所有元素；
2.类选择器 （所有浏览器都支持类选择器，但多类选择器（.className1.className2）不被ie6支持。）
类选择器根据类名来选择，前面以”.”来标志，是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，换句话说需要保证类名在html标记中存在。
3.标签选择器（所有浏览器支持）
元素选择器（标签名选择器），是css3选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素，如html,body,p,p等等下下面例子中选择了span元素，并设置了字体颜色为红色。
4.ID选择器（所有浏览器都支持）
ID选择器和上面说的类选择器是很相似的，在使用ID选择器之前也需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个“.”号（.className）而id选择器是在名称前使用"#“如(#demo)。
ID选择器有几个地方需要特别注意：
第一：一个文档中一个id选择器只充许使用一次，因为id在页面中是唯一的；
第二，id选择器不能像类选择器一样多个合并使用，一个元素只能命名一个id名；
第三，可以在不同的文档中使用相同的id名，比如说在“test.html”中给h1定了“＃important”,也可给“test1.html”中定义p的id为”#important"，但前提是不管在test.html还是test1.html中只充许有一个id叫"#important"的存在。
5、组合选择器：
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开，这个逗号告诉浏览器，规则中包含多个不同的选择器，如果不有这个逗号，那么所表达的意就完全不同了，省去逗号就成了我们前面所说的后代选择器
6、后代选择器：空格
7、子代选择器：大于符号隔开
13、变形有哪几种，为什么推荐使用变形（多个属性空格隔开）
Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix
我们同时对一个元素进行transform的多种属性操作，例如rotate、scales、translate三种，但这里需要提醒大家的，以往我们叠加效果都是用逗号（“，”）隔开，但transform中使用多个属性时却需要有空格隔开。

【代码题】

1、一个宽100，高100的div如何在页面中上下左右居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            /* display: flex; */
            background: #000;
            /* justify-content: center; */
            /* align-items: center; */
            position: fixed;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
        }
        /* body,html{
            width: 100%;
            height: 100%;
        } */
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2、一个宽度100%，高50px的p标签中，hello world文字怎么上下左右居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 100%;
            height: 50px;
            background: rgb(191, 158, 158);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <p>hello world</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3、实现两列布局（左边定宽100，右边宽度自适应）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            display: flex;
            height: 100%;
        }
        body,html{
            height: 100%;
        }
        .left,.right{
            height: 100%;
        }
        .left{
            width: 100px;
            background: #000;
        }
        .right{
            flex: 1;
            background: rgb(133, 105, 105);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
    <div class="right"></div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

4、一个p标签内有一个img标签和一个span标签，怎么保证文字图片居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
    <p>
        <img src="../day10-0808/midea-fl/img/推荐1.png" alt="">
        <span>我要对齐</span>
    </p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21