HTML&CSS相关面试题

一、什么是盒模型

1.在我们HTML页面中

每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。

2.盒子模型有标准盒子模型和怪异盒子模型

标准模式下: 一个盒子的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)
怪异模式下: 一个盒子的总宽度= width + margin(左右)（即width已经包含了padding和border值）（IE浏览器）

标准和怪异模型的转换
box-sizing:content-box; 将采用标准模式的盒子模型标准

box-sizing:border-box; 将采用怪异模式的盒子模型标准

box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

二、清除浮动

1.为什么要清除浮动？

清除浮动主要是为了解决高度塌陷 ，父元素的高度默认是被子元素撑开的，父元素因为子级元素浮动引起的内部高度为0的问题
1.比如,我给父盒子设置一个boder,内部放两个盒子一个big、一个small，未给big和small设置浮动，则他们会默认撑开父盒子
2.如果给这两个盒子都加上了float属性的时候，底部的盒子就会顶上来，因为父盒子没设置高度，变成一条线，big和small已经浮动了

小结：当父元素不给高度的时候，内部元素不浮动的时候会撑开，而浮动时父元素会变成一条线，所以这个时候就需要解决浮动
2.清除浮动的四种方式

1.额外标签法（给最后一个浮动的标签后，新加一个标签，给其设置clear:both;,）（但这种方式是不推荐使用的，因为添加无意义的标签，语义化差）

2.父元素添加overfiow属性（触发BFC的方式，实现清除浮动）

3.使用after伪元素清除浮动

&:after {
    content: "";
    display: table;
    clear: both;
  }

优点：符合闭合浮动思想，结构语义化正确,不容易出现其他为题
缺点：IE6-7不支持伪元素：after，使用zoom:1触发

使用before和after双伪元素清除浮动 cler

除了这四种还有一种更为简单的方式，给父元素定义好height高度，就解决了父级元素无法获取到高度的问题。

三、BFC

BFC就是“块级格式化环境”的意思，简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。

BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。

1.BFC触发的几种方式：

1.浮动元素，float 除 none 以外的值；
2.绝对定位元素，position（absolute，fixed）；
3.display 为以下其中之一的值 inline-block，table-cell，table-caption；
4.overflow 除了 visible 以外的值（hidden，auto）

2.BFC的应用

1.可以用来自适应布局
利用BFC的这个原理可以实现两栏布局，左边定宽，右边自适应。给左边盒子加浮动，右边盒子加overflow:hidden;变成BFC，就可以消除外部左边盒子因浮动对他的影响
2.可以清除浮动
一个父元素中的子元素，设置浮动时，父元素没有设置高度，这时子元素脱离文档流，父元素感知不到子元素的高度，造成父元素的塌陷。
这时候给父元素添加overflow:hidden / auto,变成BFC就可以解决这种问题。

3.解决垂直边距重叠有两种边距重叠的情况：
1.父子关系的边距重叠
父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距。
解决办法是给父元素添加一个 overflow:hidden，这样父元素就变为BFC，不会随子元素产生外边距
2.同级兄弟关系的重叠
同级元素在垂直方向上外边距会出现重叠现象，最后外边距的大小取两者绝对值大的那个
可通过添加一个空元素或伪类元素，设置overflow:hidden;解决

四、元素居中的方式

方法一：给父元素设置display：flex，子元素justify-content：center，align-items：center
方法二：父相子绝后，子部分向上移动本身宽度和高度的一半，也可以用transfrom:translate(-50%,-50%)（最常用方法）
方法三：父相子绝，子元素所有定位为0，margin设置auto自适应

五、两/三栏布局（圣杯双飞翼）
两栏布局,左边定宽，右边自适应
左边左浮动，右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响

三栏布局，圣杯布局、双飞翼布局
圣杯布局是利用父容器的左、右内边距加两个从列相对定位；
双飞翼布局把主列嵌套在一个新的父级块中利用左、右外边距进行布局调整
原来我做的主要是后台管理和一些移动端的项目，这两种布局呢是我原来查阅资料时看到的，所以就做了个简单的理解。
圣杯布局和双飞翼布局是我们需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）

首先要给两侧设置padding预留出相应的空间

随后分别为三列设置宽度与浮动，同时对footer设置清除浮动

根据浮动的特性，由于center的宽度为100%，即占据了第一行的所有空间，所以left和right被“挤”到了第二行。

接下来的工作是将left放置到之前预留出的位置上，这里使用负外边距

这里使用position: relative和right: 200px将left的位置在原有位置基础上左移200px，以完成left的放置

接下来放置right，只需添加一条声明即可

至此，布局效果完成。不过还需要考虑最后一步，那就是页面的最小宽度：要想保证该布局效果正常显示，由于两侧都具有固定的宽度，所以需要给定页面一个最小的宽度，但这并不只是简单的200+150=350px。回想之前left使用了position: relative，所以就意味着在center开始的区域，还存在着一个left的宽度。所以页面的最小宽度应该设置为200+150+200=550px

六、flex布局

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

我在项目中常用到的有九宫格布局，列表布局等，都会经常用到。
Flex的属性：

flex-direction row column
flex-wrap nowrap wrap
flex-flow 换行和主轴和写
justify-content flex-start center space-between左右靠边 均分 space-around
align-items stereth 默认将元素长度设为相同的值 center baseline
align-content 分配辅轴上的空间

七、常见的块级、行级、空元素

在CSS中规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
我们在平常的项目中经常使用到的有
• 行内元素有：span a b i img input select strong
• 块级元素有：div p h1-h6 ul table form ul ol li dl dt dd…
• 空元素(没有内容)：<br><img> <input> <link> <meta>

生更多的兼容性问题。因此，并不推荐使用CSS hack来解决兼容性问题。

九、src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，主要用于超链接。
经常用到的主要是css外部样式的链接，a标签超链接的使用

src是指向外部资源的位置，指向的内容将会下载并应用到文档内；
经常在script引入时，还有img图片的请求时用到

iframe:是一个现在废弃的标签，可以使一个网站显示在当前的页面上

十、link与@import区别

页面中使用CSS的方式主要有3种：行内添加style属性，页面头部内嵌和外部链接，其中外部引用有两种：Link引入和@import导入

link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

link支持使用Javascript控制DOM去改变样式；而@import不支持。

十一、html和XML

html被称为超文本标记语言， 是一种描述性语言，用html 可以创建能在互联网上传输的信息页，是构成网页文档的主要语言,它是由很多的标签组成
xml 即可扩展标记语言，是Internet环境中跨平台的、依赖于内容的技术，是当前处理结构化文档信息的有力工具，满足了Web内容发布与交换的需要，适合作为各种存储与共享的通用平台。
都可以通过DOM 变成方式来访问。
都可以通过CSS来改变外观。
html和xml 都是标记语言，都是基于文本编辑和修改的。

xml不是要来取代html的，是对html的补充，用来与html协同工作的语言，基于上面这些优势，xml将来成为所有的数据处理和数据传输的常用工具非常可观。

十一 css3/H5新特新

一、 css3新特性

css3中新增的一些特性大概可以分为：选择器，背景和边框属性，文本效果，2D/3D转换

选择器

:last-child /* 选择元素最后一个孩子 /
:first-child / 选择元素第一个孩子 /
:nth-child(1) / 按照第几个孩子给它设置样式 /
:nth-child(even) / 按照偶数 /
:nth-child(odd) / 按照奇数 /
:disabled / 选择每个禁用的dom元素 /
:checked / 选择每个被选中的dom元素 /
:not(selector) / 选择非 selector 元素的每个元素 /
::selection / 选择被用户选取的元素部分 */

2.背景和边框

背景:
规定背景图片的尺寸:background-size
规定背景图片的定位区域:background-origin（content-box、padding-box、margin-box）
边框:
border-radius: 圆角
border-shadow/text-shadow: 阴影
border-image: 边框图片

3.文本效果

text-shadow 向文本添加阴影
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色
text-outline 规定文本的轮廓
text-overflow 规定当文本溢出包含元素时发生的事情
text-wrap 规定文本的换行规则
word-break 规定非中日韩文本的换行规则
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行
text-decoration 文本修饰符：overline、line-through、underline (上划线、中划线、下划线)

4.2D/3D转换

变形transform：
有rotate旋转、scale缩放、translate位移、skew倾斜
过渡transition：
transition是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值
动画animation
动画的使用，首先通过@（-webkit-)keyframes 定义动画名称及动画的行为，再通过animation属性设置动画特征相关值进行调用

这些新属性大多在新版浏览器得到了支持，有些需要添加浏览器前缀（-webkit-、-moz-、-ms-、-o-）

多行元素省略号：overflow : hidden; text-overflow: ellipsis;

二、 html5新特性

语义化标签：文档头部:header、文档尾部:footer、文档中的节点:section、导航:nav、侧边栏:aside、独立内容区域:article
增强型表单：HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证
新增表单属性：（placehoder、required、min 和 max）、音频视频：（audio、video、canvas ）画布、地理定位、拖拽、 本地存储：localStorage 没有时间限制的数据存储；
sessionStorage，当用户关闭浏览器窗口后，数据会被删除
新事件:
onresize 当调整窗口大小时触发
ondrag 当拖动元素时触发
onscroll 当滚动元素滚动元素的滚动条时触发
onmousewheel 当转动鼠标滚轮时触发
onerror 当错误发生时触发
onplay 当媒介数据将要开始播放时触发
onpause 当媒介数据暂停时触发
支持web Worker和websocket

5.实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果

<div style="height:1px;overflow:hidden;background:red"></div>