1.css盒模型原理
所有的页面的元素都可以看成是一个盒子,占据一定的页面空间。占据的空间要比实际使用的空间要大得多。我们可以调整盒子的边框和距离,来调整盒子(页面和页面中的元素)的位置。盒子模型是由内容、边框、间隙(padding)、间隔(margin)组成
2.css的导入方式:import与link方式的区别,优缺点
1. 来源:link属于XHTML标签,import是CSS提供的方式。link方式除了CSS,还可以定义RSS,定义rel连接属性等,而import只能加载CSS。
2. 顺序:link是页面加载时同时执行的,而import是在页面加载完之后,才会执行的(所以容易导致样式闪烁,即开始页面没有样式,突然会闪烁一下,然后就有了样式,就我个人比较喜欢link引用的方式)
3. js控制的差别:当页面需要使用javascript控制dom改变样式的时候,只能使用link标签,因为import不是js操作dom可以控制的。也不支持js操作dom来控制。
3.css的优先级,内联和important哪个优先级别高
优先级为!important > [ id > class > tag ] !Important 比 内联优先级高
4.盒子垂直居中方法
<style>
html, body {width: 100%; height: 100%; margin: 0; padding: 0;}
.box{width:200px; height:200px; background:#aa7700; margin:-100px auto 0 auto;
position: relative; top:50%;}/*transform: translateY(-50%);*/ 高度一半
</style>
<div class="box"></div>
5.浮动元素清除浮动方法
1.使用overflow属性来清除浮动,但是overflow:hidden会将超出的部分隐藏起来
2.clear:both;清除掉两边的浮动。但是有一个问题,margin失效了,上下之间没有了间距。
3.隔墙法。就是在两个部分之间加一个<div>,设置一个高度。还有就是“内墙发”:就是在块里边在放一个<div>,设置高度,不仅不让后边的去追前边的,并且能给外边的<div>撑出一个高度。
6.常见兼容性问题
1.不同浏览器的标签默认的margin和padding不同
解决方案:body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; }
2.块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大
解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
3.设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度
解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
4.行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug
解决方案:在display:block;后面加入display:inline;display:table;
5.几个img标签放在一起的时候,有些浏览器会有默认的间距,通配符清除间距也不起作用。
解决方案:使用float属性为img布局
6.标签最低高度设置min-height不兼容
解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
7.各种特殊样式的兼容,比如透明度、圆角、阴影等。特殊样式每个浏览器的代码区别很大,所以,只能现查资料通过给不同浏览器写不同的代码来解决。
7.CSS的定位属性,各自区别,应用场景
1. relative(相对定位):相对定位的偏移参考元素是元素本身,不会使元素脱离文档流。元素的初始位置占据的空间会被保留。相对定位元素常常作为绝对定位元素的父元素。并且定位元素经常与z-index属性进行层次分级
2. absolute(绝对定位)绝对定位元素以父辈元素中最近的定位元素为参考坐标,如果绝对定位元素的父辈元素中没有采用定位的,那么此绝对定位元素的参考对象是html,元素会脱离文档流。就好像文档流中被删除了一样。并且定位元素经常与z-index属性进行层次分级
3. fixed (固定定位)位移的参考坐标是可视窗口,使用fixed的元素脱离文档流。并且定位元素经常与z-index属性进行层次分级
4.static (静态定位)默认值,元素框正常生成的,top left bottom right这几个偏移属性不会影响其静态定位的正常显示
8.谈CSS3 Media Queries
Media Queries可以去做响应式网站,根据屏幕大小分为手机端,Ipad,电脑端,可以根据屏幕大小,基于rem去做移动端的适配
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />
9.Display:none与visibility:hidden的区别
1.display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素;visibility:hidden是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素;
2.使用visibility:hidden比display:none性能上要好,display:none切换显示时visibility,页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建,此时就是回流。所有页面第一次加载时需要产生一次回流),而visibility切换是否显示时则不会引起回流。
10.谈css hack
/* CSS hack*/
使用hacker我可以把浏览器分为3类:IE6 ;IE7和遨游;其他(IE8 chrome ff safari opera等)
◆IE6认识的hacker 是下划线_ 和星号 *
◆IE7 遨游认识的hacker是星号 *
比如这样一个CSS设置:
div { height: 300px; *height: 200px; _height:100px; }
11.css中em和px的关系和区别
px、em都是计量单位,都能表示尺寸。
Px表示“绝对尺寸”(并非真正的绝对),实际上就是css中定义的像素,利用px设置字体大小及元素宽高等比较稳定和精确。 Px的缺点是其不能适应浏览器缩放时产生的变化,因此一般不用于响应式网站。
em表示相对尺寸,其相对于当前对象内文本的font-size(如果当前对象内文本的font-size计量单位也是em,使用em可以较好的相应设备屏幕尺寸的变化。