Html css常见面试题

0. link和@import的区别是：

1、从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2、加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3、兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4、DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

以上就是link和@import的区别有哪些的详细内容。

一、CSS

    1.说一下CSS的盒模型。

        在HTML页面中的所有元素都可以看成是一个盒子

        盒子的组成：内容content、内边距padding、边框border、外边距margin

        盒模型的类型：

            标准盒模型

                margin + border + padding + content

            IE盒模型

                margin + content(border + padding)

       控制盒模型的模式：box-sizing:content-box（默认值，标准盒模型）、border-box（IE盒模型）;

    2.CSS选择器的优先级？

        CSS的特性：继承性、层叠性、优先级

        优先级：写CSS样式的时候，会给同一个元素添加多个样式，此时谁的权重高就显示谁的样式

        标签、类/伪类/属性、全局选择器、行内样式、id、!important

        !important > 行内样式 > id > 类/伪类/属性 > 标签 > 全局选择器

                内联式 （style=""）> 嵌入式(<style></style>) > 外部式(import)

       属性选择器：input[type=password]

       伪类选择器:a:hover { color:blue }

      选择器详细：https://www.cnblogs.com/ssjd/p/12894389.html

2.1 CSS的三大特性，有哪些属性？可以继承？不可以继承？

 CSS的三大特性：继承、层叠、优先级

  子元素可以继承父类元素的样式

        1.字体的一些属性：font

        2.文本的一些属性：line-height

        3.元素的可见性：visibility:hidden