css1

一、px、em、rem的区别

1、像素px是相对于显示器屏幕分辨率而言的

2、em指的是一个字体的大小，它会继承父级元素的字体大小，因此并不是一个固定的值。

3、rem是css3新增的一个相对单位，相对的只是HTML根元素。 p {font-size:14px; font-size:.875rem;}解决兼容性

 

 

二、绝对定位和浮动的区别

共同点：对内联元素设置float或absolute属性，可以让元素脱离文档流（块级元素也可以），并且可以设置其宽高。

不同点： float仍会占据其位置，position会覆盖文档流中的其他元素

 

 

三、相对定位和绝对定位

1、relative 生成相对定位的元素，相对于其自身在普通流中的位置进行定位。

2、absolute 生成绝对定位的元素，相对于其向上查找第一个不为 static 定位的其他定位祖先元素进行定位。

 

 

四、box-sizing属性值的作用：

1、content-box：在宽度和高度之外绘制元素的内边距和边框。常规

2、border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制

3、Inherit：规定应从父元素继承 box-sizing 属性的值。

 

 

五、div+css的布局较table布局有什么优点？

1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。

2.布局精准，网站版面布局修改简单。

3.加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。

4.节约站点所占的空间和站点的流量。

5.用只包含结构化内容的HTML代替嵌套的标签，

6.提高搜索引擎对网页的搜索效率。

 

 

六、CSS框架中的栅格系统：

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。 最常见的12格，也有16格，24格和32格。

 

 

七、CSS实现垂直水平居中

1、垂直居中：

①单行文本，设置父级的高度，然后文本的line-hight等于父级高度

②多行文本，position：absolute；//子级用绝对定位  top：50%；//先定位到50%的位置  height： 300px；//已知的高度margin-top： -150px；//往上提本身高度的一半

③父级div里设置一个空div，高度50%，占位子，要居中的p设置高度，maigin-top=负一半高度

④垂直居中一张图片（行内元素），vertical-align： middle；，它是相对兄弟级行高（line-height）来定位，并且他仅对行内元素有效

⑤父子都未知高度的块级元素居中：父设置 display： table；子设置display：table-cell；vertical-align：middle；IE67不兼容

⑥绝对定位居中法 子元素：position：absolute；top：0；bottom： 0；left： 0；right：0；margin：auto； 该方法也可以水平居中

 

2、水平居中： table-cell 和绝对定位居中法都能同时实现水平和垂直居中

①text-align：center；，用于居中行内文字或元素  

②margin：0 auto 居中固定宽度的块级元素

③绝对定位position left：50%； margin-left：-50%；的自身宽

④translate偏移