遇到的css问题

一、css如何使用em，rem单位中来控制不同屏幕的字体比例尽量一致。

二、介绍一下css的盒子模型

css盒子模型又称框模型，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

三、box-sizing属性介绍

box-sizing:content-box|border-box|inherit

1.content-box默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。

总宽度=margin+border+padding+width

2.border-box设置的width值除了margin之外的border+padding+element的总宽度。盒子的width包含border+padding+内容

即总宽度=margin+width

3.inherit,规定应从父元素继承box-sizing属性的值

关于border-box的使用

a.一个box的宽度为100%，又想要两边有内间距，这时候用就比较好

b. 全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。

四、position的取值？

1、position的属性取值： static(默认) relative、absolute、fixed、inherit。

2、position：relative和absolute都可以用于定位，区别在于relative的div属于正常的文档流，absolute是脱离了正常文档流，不占据空间位置，不会将父类撑开

3、position：static始终处于文档流给予的位置

4、position:fixed  定位原点相对于浏览器窗口

五、display
    1、display属性取值：none、inline、inline-block、block、flex、inherit。
    2、display属性规定元素应该生成的框的类型。文档内任何元素都是框，块框或行内框。
    3、display：none和visiability：hidden都可以隐藏div，区别有点像absolute和relative，前者不占据文档的空间，后者还是占据文档的位置。
    4、display：inline和block，又叫行内元素和块级元素。表现出来的区别就是block独占一行，在浏览器中通常垂直布局，可以用margin来控制块级元素之间的间距；而inline以水平方式布局，垂直方向的margin和padding都是无效的，大小跟内容一样，且无法设置宽高。inline就像塑料袋，内容怎么样，就长得怎么样；block就像盒子，有固定的宽和高。
    5、inline-block就介于两者之间。
    6、display: flex 意为"弹性盒布局模型"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用flex布局的元素，称为flex容器。

六、css reset的作用

每个浏览器都有一些自带的或者共有的默认样式，会造成一些布局上的困扰，css reset的作用就是重置这些默认样式，使样式表现一致，比如 *{margin:0;padding:0}就是一个最简单的css reset

七、px、em、rem的区别

1、px是相对长度单位，它是相对于显示器屏幕分辨率而言的。

优缺点：比较稳定和精确，但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。

2、em是相对长度单位，EM是相对于父元素来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸

优缺点：em的值并不是固定的，它会继承父级元素的字体大小。

3、rem是CSS3新增的一个相对单位，REM是相对单位，是相对HTML根元素。

这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

八、选择器的种类及其优先级

1、ID　　#id

2、class　　.class

3、标签　　p

4、通用　　*

5、属性　　[type="text"]

6、伪类　　：hover

7、伪元素　　::first-line

8、子选择器、相邻选择器

三、权重计算规则

1. 第一等：代表内联样式，如: style=””，权值为1000。

2. 第二等：代表ID选择器，如：#content，权值为0100。

3. 第三等：代表类，伪类和属性选择器，如.content，权值为0010。

4. 第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

6. 继承的样式没有权值。

九、解释解释CSS精灵,如何使用,有什么用

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。

1、下载css Sprites

2、用ps把需要拼合的图片切下来

通过position:abosolute,

• 打开自己要的多张小图片
• 排列好图片的顺序
• 在排列的时候，我们就会看到下面已经自动出现了图片定位代码。

• 在排列好之后直接保存即可。

十、CSS中clear的作用

clear:both;在左右两侧均不允许浮动元素

clear:left;在左侧不允许有浮动元素

clear:right;在右侧不允许有浮动

clear:none;默认值，允许浮动元素出现在两侧。

clear:inherit;应该从父级那里继承clear的属性的值

十一、html网页自适应移动端设备需要添加什么标签?如何强制让文档与设备宽度保持1:1

<meta name="viewport" content="width=device-width, initial-scale=1,minimun-scale=1,maxinum-scale=1,user-scalable=no">

十二、只把图片的左上边框和右下边框设为圆角,css代码怎么写?

border-radius:15px 15px 0 0 ;

十三、自适应与响应式的区别

响应式设计是指一个网站能够兼容多个终端而不是为每个终端做一个版本。

自适应设计是指能使网页自适应显示在不同大小终端设备上的新网页设计方法及技术。

不同点：自适应需要开发多套界面，响应式开发一套界面

自适应设计 通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。

自适应 对页面做的屏幕适配是在一定范围：比如pc端（>1024）一套适配,平板（768-1024）一套适配，手机端（<768）一套适配;响应式一套页面全部适配。（可以想象：响应式设计要考虑的内容要比自适应设计复杂的多）

共同点：两者都是优化适应互联网中越来越分化的视口浏览体验，而出现的为视口提供更好的体验的技术。用技术来使页面适应不同分辨率的视口的设计。

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的方式插入样式。

5.权重区别(该项有争议，下文将详解)

link引入的样式权重大于@import引入的样式。