HTML+CSS面试题

1.样式引入的方式有哪几种？

一：内部样式 

二：外部样式

方法一： 

方法二： @import url(css/qianfeng.css); 

三：内联样式

我是盒子

---

2.w3c标准盒模型包含哪些内容？

在 CSS 中任何元素都可以看成是一个盒子，而一个盒子是由 4 部分组成的：内容（content）、内边距（padding）、边框（border）和外边距（margin）。

标准盒模型认为：盒子的实际尺寸 = 内容（设置的宽/高） + 内边距 + 边框

---

3.怎么用css边框画箭头超右的三角形？

给盒子设置宽高为0，添加左边框为

border-leftr:100px，soild，red ;

上边框和下边框设置为

border-top:100px，solid，transparent;

border-bottom:100px，solid，transparent;

---

4.什么是css样式层叠？(css权重问题)

css的权重，指的是css的优先级，css的权重高，样式越生效

        1.class选择器    10

        2.标签选择器      1

        3.id选择器       100

        4.包含选择器   所有的权重之和

        5.内联样式       1000

小结：内联样式 > id选择器 > class选择器 > 标签选择器

---

5.单行文本超出显示省略号效果怎么实现？

一：给元素添加宽度    width:200px

二：设置文本一行显示 white-space:nowarp

三：设置文本溢出隐藏  overflow:hidden

四：添加省略号  text-overflow:ellipsis

---

6.什么是css的继承？请写出可以被继承的属性，至少10个。

css继承   父(祖先)元素身上添加了某个属性，子元素自动就有该属性的样式

1.文本类型css   可以继承  字体颜色遇到a必须给a

        color    ont-size    line-height    text-align    text-decoration    font-weight

        font-style    font-family    text-indent    text-transform    letter-spacing

2.列表类型css   可以继承  list-style

3.背景类型css   不能继承

4.其他类型css  width height overflow float等   不能继承

---

7.元素类型分为哪几种？分别有什么特点？

一、块元素 大标签   block

        特点：

        1.独占一行或者一块区域，是竖着排列的；

        2.默认情况下，可以添加宽高、margin和padding4个方向都生效；

        3.一般可以作为其他元素的父元素

---

二、行内元素  小标签  inline

        特点：

        1.默认情况下，是挨着（横着）排列,且有之间有默认间距；

        2.默认情况下，给行内元素添加宽高无效，margin和padding只有左右有效，上下不生效；

---

 三、行内块元素   特殊标签    inline-block

        特点：

        1.块元素和行内元素的综合特点；

        2.有一个自己的私有属性，vertical-align:top/middle/bottom;

        作用：

            2.1可以用来解决bug(图片向下撑大3像素的bug);

            2.2可以配合其他属性一起实现行内块元素做垂直居中效果。

---

8.图片向下撑大3像素的bug怎么解决？

1.给行内块元素本身添加vertical-align: top/middle/bottom;

2.给行内块元素本身添加display: block;

3.给行内块元素或者父元素添加float: left;(要注意浮动的副作用)

4.给行内块元素的父元素或者body添加font-size:0;

---

9.未知大小的行内块元素怎么实现水平垂直居中效果？

1.给外层的大盒子添加text-align:center;让行内块元素实现水平居中；

2.给外层的大盒子添加line-height:盒子高度;且给行内块元素本身添加vertical-align: middle;实现垂直居中效果。

---

10.元素消失和出现的方法有哪些？

display:none            display:block

opacity:0           opacity:1

---

11.定位的属性值有哪些？分别有什么特点？

1.绝对定位   

position:absolute;

      特点: 1.文档流  脱离文档流，不占位置了

                2.参照物

                    2.1默认情况下，参照浏览器的第一屏做位置移动；

                    2.2参考有定位设置(最好是相对定位)的父元素做位置移动。

                3.层级关系  z-index  值越大，元素就在最上层

2.相对定位   

position:relative;

       特点:1.文档流  没有脱离文档流，占位置在

                2.参照物  参照自己原来的位置做移动

                3.层级关系  z-index  值越大，元素就在最上层

3.固定定位  

 position:fixed;

       特点:1.文档流  脱离文档流，不占位置了

                2.参照物  参照整个浏览器的窗口

                3.层级关系  z-index  值越大，元素就在最上层

4.粘性定位

position:sticky; 主要做吸顶效果

            特点:1.文档流  没有脱离文档流，占位置在                

                    2.参照物  参照整个浏览器的窗口                

                    3.层级关系  z-index  值越大，元素就在最上层

(一)绝对定位   position:absolute;

方位：上top  下bottom  左left  右right

特点：

1.给元素添加绝对定位之后，元素就飘了(脱离文档流)，不要自己的位置了；

2.绝对定位是有参照物的：

    2.1默认情况下，是围绕着浏览器的第一屏做位置移动；

    2.2围绕着父元素做移动，父元素身上必须有定位设置(最好是相对定位)才可以围绕着做移动

(二)相对定位   position:relative;

特点：

1.给元素添加相对定位之后，元素没有飘，占位置在；

2.相对定位也有参照物，参照物就是自己原来的位置做移动的；

作用：一般是给绝对定位元素的父元素添加的。

---

12.一个宽高200*200的小盒子在一个宽高为500*500的大盒子里面做水平垂直居中，请问你有几种实现方案？(7种)

方法一、纯margin + overflow: hidden;

方法二、纯padding

方法三、display:inline-block + text-align:center; + line-height + vertical-align:middle;

方法四、纯定位

方法五、定位 + margin 取负值  重点

方法六、定位 + margin:auto;

方法七、利用定位+transform: translate(-50%, -50%);

方法八、display:flex;+ justify-content:center; + align-items:center;

---

13.高度塌陷问题怎么解决？(6个)

父元素高度塌陷(父元素的高度为0)

问题的产生：当给所有的子元素都添加了float,父元素以及所有外层元素都没有高度的情况下，就出现高度为0

问题的解决：

1.给浮动元素的父元素添加height;  遇到父元素需要高度自适应的时候就不好用了

2.给浮动元素的父元素添加overflow:hidden/auto/scroll; (bfc)遇到定位就不好用了

 3.给浮动元素的下方添加一个空的块元素，并且给这个空的块元素添加clear:both;(清除浮动);会造成代码的冗余

4.万能清除法，取一个公共的类名，将这个公共类名给道浮动元素的父元素添加即可。

clear:after{

    content:"";

    display:block;

    clear:both;

    height:0;

    overflow:hidden;

    visibility:hidden;

  }

.clear{

     zoom:1;

 }

5.给父元素添加float;不推荐，只了解，会产生新的浮动问题；

6.给父元素添加display:table;不推荐，只了解，会产生新的未知问题；

---

14.margin-top的bug怎么解决？

        1.给父元素添加overflow:hidden;   如果遇到定位尽量不用

        2.给父元素添加border-top: 1px solid transparent;  尽量父元素高度减1；

        3.给父元素或者子元素本身添加float;  注意浮动的副作用；

        4.改margin为padding

---

15.五大浏览器对应内核是什么？

•Trident （MSHTML） （IE游览器）

•Gecko （火狐游览器）

•Presto （ 欧朋浏览器）

•Webkit （Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的Safari浏览器使

用的内核）

•Blink (由Google和Opera Software开发的浏览器排版引擎)。

扩展

1、IE浏览器内核：Trident内核，也是俗称的IE内核； 

2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

 3、Firefox浏览器内核：Gecko内核，俗称Firefox内核； 

4、Safari浏览器内核：Webkit内核； 

5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核； 

6、360浏览器、猎豹浏览器内核：IE+Chrome双内核； 

7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）； 

8、百度浏览器、世界之窗内核：IE内核； 

9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

---

16.opacity是什么？它的兼容写法是什么样子的？

透明属性

兼容写法： opacity:0.4;

filter: alpha(opacity=40); 

17.什么是BFC？BFC触发条件有哪些？

块格式化上下文，它是一个独立的渲染区域，只有块级盒子参与，它规定了内部的块级盒子如何布局，并且与这个区域外部毫不相干。

1、根元素：html

2、非溢出的可见元素：overflow 不为 visible

3、设置浮动：float 属性不为 none

4、设置定位：position 为 absolute 或 fixed

5、定义成块级的非块级元素：display: inline-block/table-cell/table-caption/flex/inline-flex/grid/inline-grid

18.BFC有哪些特性？这些特性给页面带来了什么好处？

块格式化上下文，它是一个独立的渲染区域，只有块级盒子参与，它规定了内部的块级盒子如何布局，并且与这个区域外部毫不相干。

三个好处：解决了margin的上下重叠问题；可以实现两栏布局；解决高度塌陷问题

---

19.请问什么是两栏布局？实现方案有哪些？

两栏布局   左边固定宽度，右边宽度自适应

        实现方案：

        方法一：float + overflow（BFC 原理）

        方法二：float + margin

        方法三：flex

        方法四：grid

        方法五：利用calc()函数,左边盒子给固定宽和float，右边盒子给宽(calc(100% - 左边width))和float;

---

20.怪异盒模型是怎么产生的？怪异模式有什么特点？

        怪异盒模型是由于DOCTYPE的缺失，在IE6及其以下版本会触发怪异模式，怪异模式的特点是，给元素添加padding和border值不会把元素给撑大，不需要做减法

        css3属性新加属性  

        box-sizing:border-box; 由W3C标准盒模型变成怪异盒模型 

        盒子的实际尺寸 = 设置的宽/高 = 内容 + 内边距 + 边框

        box-sizing:content-box; 默认值，W3C标准盒模型 

        盒子的实际尺寸 = 内容（设置的宽/高） + 内边距 + 边框

---

21.H5有什么特点？请写出H5新增加的标签。（8个）

1）更简洁、但是在实际开发中要注意书写规范，利于后期维护 

2）标签的语义化语义化的重要性∶

    ①当页面加载失败的时候，还能够呈现出清晰的结构

    ②有利于SEO优化，利于被搜索引擎收录（即便于网络爬虫的识别）

    ③在项目开发及维护时，语义化的也很大程度上降低开发难度，节省成本

    3）语法更宽松 

4）多设备跨平台

5）自适应网页设计

1）section表示内容区块，一般入章节、页眉、页脚或者页面中的其他部分。可以与h1-h6等元素结合起来使用，标示文档的结构

2）article表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或者报纸中的一篇文章

3）aside Aside表示acticle元素的内容之外的，与article元素的内容相关的辅助信息。

4）heater 头部

5）footer尾部

6） nav表示页面中导航链接的部分、①传统的导航条 ② 腾讯新闻 ③侧边栏导航 ④内业导航

7)igure表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。规定独立的流内容（图像、图表、照片、代码等等）。使用figcaption元素为figure元素添加标题。

    ◆figure是一种元素的组合，带有可选 标题。用来表示网页上一块独立的内容。figure 元素的内容应该与主内容相关，但如果被删除 ，则不应对文档流产生影响

    ◆figcaption表示figure 的标题。从属于figure，并且，figure 中只能放置一个 figcaption

8) embedembed标签用于定义嵌套的内容，包括各种媒体，格式可以是midi、wav、AIFF、AU、MP3、Flash等

9)mark 高亮显示文字，一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词

10)vieo定义视频，比如电影片段或其他视频流

    

    

     

  

注意∶poster 属性规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。如果未设置该属性，则使用视频的第一帧来代替。

11）audio 定义音频

12）Dataist

datalist提供一个事先定义好的列表，通过id与input关联，当在input内输入时就会有 自动完成（autocomplete）的功能，用户将会看见一个下拉列表供其选择。

13）canvas 

canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。

写法：Canvas画布

---

22.什么是图片整合技术？有什么优势？

css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。

优势有二：

1）通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度。

2）通过整合图片来减小图片的体积。

---

23.请问你会哪些css选择器？

基本类型(class、id、群组选择器等)

属性选择器

伪类选择器(动态伪类、UI元素状态伪类、结构伪类child类型和type类型等)

层次选择器(包含选择器、子代选择器等)。

---

24.css3属性有什么特点和优势？请说8个css3属性。

    1）让页面效果看起来非常炫酷，用户体验更高。

    2）有利于开发和维护，还能提高网站的性能增加网站的可访问性，可用性。

    3）使网站能适配更多的设备，利于seo网站优化，提高网站的搜索排名。

    text-shadow文字阴影

    box-shadow盒子阴影

    work-break自动换行

    work-wrap英文断句

    @font-size服务器字体

    background-clip背景裁切

    backgro-origin背景原点

    backg-size背景大小尺寸

    border-raidus设置圆角

    border-image图片创建边框

    hsl（） hsla（） rgb（） rgba（）颜色及透明度

    linera-gradient线性渐变

    radial-gradient径向渐变

    transition过渡    

    transfrom转换   

    Animation动画

---

25.transition和animation有什么共同点和区别？

相同点:都是随着时间改变元素的属性值。

不同点:

1.transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性;

2.而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素 css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。

---

26. 请问 transform:translateX(100px) rotateZ(90deg) 和 transform:rotateZ(90deg) translateX(100px)实现的效果是一样的吗？为什么？

效果不一样，因为先在X上平移100像素，图形的轴系Z未发生变化

但是先围绕Z旋转90°后，轴系X方位发生改变

---

27.三栏布局有哪些实现方法？

        三栏布局：左边固定宽，右边固定宽，中间宽度自适应

        实现方案：

        1.利用BFC特性，左边盒子给宽和浮动，右边盒子也给宽和浮动，中间盒子不给宽，给overflow:hidden;（需要将中间的盒子和右边的盒子换位置）;

        2.利用float的特点，左边盒子给宽和浮动，右边盒子也给宽和浮动，中间盒子不给宽，给margin-left和margin-right;（需要将中间的盒子和右边的盒子换位置）;

        3.利用定位，左边盒子给宽和定位，右边盒子也给宽和定位，中间盒子不给宽，给margin-left和margin-right;（不需要换位置）

        4.利用弹性盒，给三个盒子添加父元素，给父元素添加display:flex;给中间宽度自适应的盒子添加flex:1;

        5.利用calc()函数特性，左边盒子给宽和浮动，右边盒子也给宽和浮动，中间盒子给宽(calc(100% - 左宽 - 右宽))和浮动。

---

28.请问那些属性可以取负值？请说出5个。

        margin    background-position    text-shadow    box-shadow    z-index    order等

---

29.移动端布局方式有哪些？移动端的适配方案有哪些？

        浮动布局、弹性盒布局、定位布局、流式布局(百分比布局)、混合布局(%,px等)、等比缩放布局(vw + rem布局)等；适配方案有2种：1种是淘宝适配，使用js适配；2种是网易适配(vw + rem布局)。

---

30.什么是响应式布局？有什么特点？

        Responsive 网页设计不但要考虑其元素布局的秩序，还要做到“有求必应”，因此需要满足四个条件。

        1、网站必须建立灵活的网格基础；

        2、引用到网站的图片必须是可伸缩的；

        3、不同的显示风格，需要在Media Query上设置不同的样式

        4、meta标签

        注意：缺少任何一个功能，就不能称为是合格的Responsive 网页设计