1.html 中行内元素可以设置宽高吗？

行内元素（如a标签），在文档流中的时候因为是行内元素所以无法设置宽高；而当设置了绝对定位或者浮动，会生成块级框（即变成块级元素），所以就可以设置宽高了。

2.img 标签是行内元素为什么可以设置宽高？

准确来说，img是替换内联元素 replaced inline element，属于inline element类目。其特殊之处在于可以设置height/width/padding/margin，效果等于块级元素。

有一点需要注意的是，它在计算height/margin/width等值或在绝对定位的时候，有一些额外的规则。比如设定了width但未设置height, img的height会根据图片的大小按比列缩放。

3.html 中行内块元素与行内元素和块级元素的区别？

在W3Cschool中查看CSS display属性的时候，发现display有一个取值为inline-block，其作用是将元素设置为行内块元素。如下图：

那么这个行内块元素与行内元素和块级元素有什么区别呢？首先说一下行内元素与块级元素的区别。行内元素又称为“内联”元素。

在CSS 框模型（又名盒子模型）中，一切元素皆为框（box，也称为"盒子"）。行内元素对应行内框，块级元素对应块级框，又叫块框。二者的区别在于：

（1）块级元素独占一行，行内元素不独占一行；
测试代码如下，IE10运行。

<html>
<body>
<div>
<span style="border:1px solid red;">some text</span>
<span style="border:1px solid red;">some text2</span>
<p style="border:1px solid red;">Some more text.</p>
</div>
</body>
</html>

运行结果如下：

（2）块级元素可以通过CSS width、height、边框，垂直内边距和外边距设置框的尺寸，但行内元素不可以，行内元素的高和宽只能由其包含的内容的高和宽决定。此外，行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。

IE10测试，测试代码：

<html>
<body>
<div>
<span style="border:1px solid red; width:150px;height:150px; margin-bottom:100px;">some text</span>
<span style="border:1px solid red;width:150px;height:50px;display:block;">some text2</span>
<p style="border:1px solid red;width:200px;height:50px;">Some more text.</p>
</div>
</body>
</html>

测试结果截图：

**注意：**对于行内替换元素，也可以设置宽高和垂直方向的内外边距。

（3）块级元素可以包含行内元素或块级元素，行内元素最好不要包含块级元素。因为不同浏览器有不同的容错处理，所以浏览器解析时可能会出错。

**行内块元素：**顾名思义就是行内的块级元素，拥有块级元素的特性但是却不独占一行，是行内元素与块级元素的折衷产品，这也是它与行内元素和块级元素的区别。其对应的框叫做行内块框。

4.CSS 框模型中行框，块框，行内框，行内块框的理解。

由W3Cschool给出的框的定义可知：

**行框：**由一行形成的水平框称为行框（Line Box）；行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值。当有多行内容时，每行都会有自己的行框。

**块框：**块级元素形成的框称为块框，又叫块级框。如div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”；

**行内框：**行内元素形成的框称为行内框，如a、span元素形成的框。注意，这里不要与行框相混淆。

**行内块框：**由CSS display属性设置为inline-block的行内块元素形成的框称为行内块框，又叫作行内块级框。

5.html 中什么是替换元素，什么是非替换元素？

元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如<div>和<span>就不同，而<strong>和<p>也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一。

从元素本身的特点来讲，可以分为替换和非替换元素。

替换元素:
替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素，例如：

<img src=”cat.jpg” />
<input type="submit" name="Submit" value="提交" />

浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。注意，几乎所有的可替换元素都是行内元素。

非替换元素:
(X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。例如：

<span>非替换元素</span>

段落<p>是一个不可替换元素，文字“段落的内容”全被显示。

6.应用 float 浮动属性之后对 html 元素的影响？

主要有两个影响，
（1）浮动的框脱离文档的普通流，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。可参见：CSS 浮动。

（2）在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。这样的话就可以对浮动后的行内元素应用高和宽的属性了。可参见：CSS float 属性。

浮动元素生成的块级框，其宽度不会默认扩展至其父容器，而是默认为其包含元素的宽度。这一点跟inline-block元素相同。

7.web前端开发相关代码如何注释？

（1）JavaScript代码如何注释？
可使用如下两种注释方式：

第一种，使用双斜杠：

//JavaScrit代码

第二种，使用/**/:

/*JavaScrit代码*/

（2）CSS代码注释方式
使用/**/，如下：

<style type="text/css">
/*css代码*/
</style>

（3）html代码注释方式
使用HTML 标签进行注释，例如：

<!-- html代码  -->

8.margin:0 auto;无法使div水平居中

再使元素进行居中的时候，我们要清楚需要居中的元素的类型，对症下药。这里要注意对于浮动的元素，text-align和vertical-align和margin:0 auto;都是无效的。

**行内元素（inline element）：**水平居中显示，我们需要为其父级元素设置text-align:center,一般这个属性是用于将文字水平居中的，我们的行内元素就相当于一行之内的文字了，所以可以使用这个方法。

**行内块级元素（inline-block）：**对其父级元素添加text-align:center；

**块级元素（block）：**块级元素就对其本身添加margin:0 auto;如果是对div进行水平居中的话，需要显示设置该div的宽度width。

9.如何让浮动的div水平居中?

元素垂直居中：
对于页面上的块级元素，我发现设置CSS样式margin:auto 0;或者vertical-align:middle;都没有效果。显然，对于浮动的元素，上面两种方法来进行垂直居中是无效的。那么我们如何来处理这个问题呢，今天我们来探讨下。

（1）使用margin-top:n%; 来实现，需要一点点的算法。先计算自己内容的高度，再计算容器的高度，算出自己内容的高度占整个容器高度的百分比。100%减去自己内容高度的百分比除以2得出的百分比就是 margin-top:百分比的数值。

（2）或者将当前浮动的div的定位方式设置为relative，absolute，然后使用top:n%的方式。百分比的计算方式如上。

浮动的元素水平居中：
不能对其父元素应用text-align:center;也不能对其使用margin:0 auto;这些都是无效的。

可以效仿上面浮动的元素垂直居中的方法。这里提出一个冗余的方法。就是增加一个wrapper，包裹浮动的元素，并将wrapper设置为display:inline-block;然后对wrapper的父元素应用text-align:center;这里的wrapper一般使用div。当然，浮动的元素垂直居中也可以使用此方法，缺点就是多增加了一个wrapper。

10.CSS 绝对定位之后为什么以浏览器窗口作为父元素呢?

因为绝对定位定位之后，其参考的父元素是第一个定位非static定位的祖先元素。

一图胜千言，其中根元素为<html>元素，注意，<html>元素不是浏览器窗口。包含块判定总流程图如下：

参考文献

[1] W3Cschool 一切皆为框
[2] 替换元素，非替换元素
[3] CSS 行框
[4] inline-block和block元素水平居中显示
[5] 知乎.如何让一个div里面的div垂直居中？
[6] 知乎.CSS 中，为什么绝对定位（absolute）的父级元素必须是相对定位（relative）？

Web 前端开发初学者十问集锦（2）相关推荐

Web前端开发初学者十问集锦（4）
1.JS 控制 HTML 元素的显示和隐藏利用JS来控制页面控件的显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法 ...
web前端开发初学者十问集锦（5）
1.JS的立即执行函数的用法 (1)立即执行函数的定义立即执行函数(Immediately Invoked Function)是在页面加载时立即被执行的函数. 也就是函数的定义与函数调用结合在了一起 ...
web前端开发初学者十问集锦（3）
1.div的height:100%没有效果,如何让元素的高度自动扩充为父元素的高度? 我们经常使用元素的width:100%和height:100%将元素的宽度和高度扩充至父元素的宽度和高度.但是前提 ...
web前端开发初学者十问集锦（1）
1.script标签可以放置在什么位置答:script标签可以放置在html文件的任何地方(any where),比如既可以放置在html标签外,也可以放置在head内,也可以放置在body内,也可 ...
应聘web前端开发面试时问到的基础问题
由于我是第一次面试web前端开发,面试之前也没做很多准备非常紧张,面试时间是早上11点,我提前半个小时来到了这里,HR叫我去填了一下表,填完表就倒杯水让我在这里休息一下,并没有问我什么问题,过了一会有 ...
web前端开发初学者必看的学习路线图课程内容分享
随着web前端需求量的日益增加,企业对前端人员的技能要求也越来越高,我们如何能学到满足企业的web前端技能,向着高薪前进,那你就的了解企业需要的人才需求,还的提升自身的技术能力,那么想从事web前端行 ...
十款让 Web 前端开发人员更轻松的实用工具
这篇文章介绍十款让 Web 前端开发人员生活更轻松的实用工具.每个 Web 开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具, ...
Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十七】
<Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注前端开发技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
十款免费的Web前端开发工具
每一年,新的工具都会出现,同时也意味着许多旧的工具倒在了开发新技术的路上.前端开发占据了Web的很大一部分,它也成为一条职业道路.若您将前端开发视为另一项新技术或可发展的事业,你需要为这个工作准备合适 ...

Web 前端开发初学者十问集锦（2）