11 position的值relative和absolute定位原点?
absolute== 生成绝对定位的元素,相对于值不为static的第一个元素的padding box进行定位,也可以理解为离自己这一级元素最近的一级position设置为absolute或者relative的父元素的padding box的左上角为原点的。
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位
relative
生成相对定位的元素 相对于其元素本身所在正常位置进行定位
static
默认值 没有定位,元素出现在正常的流中
inherit
从父元素继承position属性的值
12 CSS3有哪些新特性?
新增各种CSS选择器 :note(.input)
所有class不是input的节点
圆角 border-radius
多列布局 multi-column layout
阴影和反射 shadow/reflect
文字特效 text-shadow
文字渲染 text-decoration
线性渐变 gradient
旋转 transform
缩放,定位,倾斜,动画,多背景
transform:scale(0.5,0.9),translate(0px,-30px),skew(-9deg,0deg),animation
13 CSS3的flex box(弹性盒布局模型)及适用场景?
flex是flexibleBox的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为flex布局。行内元素也可以适用flex布局。设为flex布局以后,子元素的float,clear和vertical-align属性将失效。
采用flex布局的元素,称为flex容器,简称容器。它的所有子元素自动成为容器成员,成为flex项目,简称项目。
容器默认存在两根轴,水平的主轴和垂直的交叉轴,项目默认沿主轴排列。
以下六个属性设置在容器
上:
flex-direction
属性决定主轴的方向
flex-wrap
属性决定如何换行
flex-flow
属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
justify-content
属性定义来项目在主轴上的对齐方式
align-items
属性定义项目在交叉轴上如何对齐
align-content
属性定义了多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用
以下两个属性设置在项目
上:
order
属性定义项目的排序顺序,数值越小,排列越靠前,默认为0
flex-grow
属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
flex-shrink
属性定义了项目的缩小笔记,默认为1,即如果空间不足,该项目缩小
flex-basis
属性定义了在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间,它的值为auto,即项目的本来大小。
flex
属性是flex-grow,flex-shrink和flex-basis的简写,默认值0 1 auto。
align-self
属性允许单个项目有与其它项目不一样的对齐方式。可覆盖align-items属性,默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
14 纯CSS创建一个三角形的原理?
/*
采用相邻边框连接处的均分原理。将元素的宽度设为0,只设置border
把任意三条边隐藏掉 颜色均为 transparent
剩下的就是三角形
*/
.demo{
width:0;
height:0;
border-width:20px;
border-style:solid;
border-color:transparent transparent red transparent;
}
15 一个满屏 品 字布局如何设计?
简单的方式:
上面的 div 宽 100%
下面的两个 div 分别宽 50%
然后用 float 或者 inline 使其不换行即可
16 CSS多列等高如何实现?
- 利用padding-bottom | margin-bottom正负值相抵,不会影响页面布局的特点。设置父容器超出隐藏,这样父容器的高度还是它里面的列没有设定padding-bottom时的高度,当它里面的任一高度增加了,则父容器的高度被撑到里面最高那列的高度,其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。
- 利用table-cell所有单元格高度都相等的特性,来实现多列等高
- 利用flex布局中项目align-items属性默认为stretch,如果项目未设置高度或设为auto,将占满整个容器的高度的特性,来实现多列等高。
17 常见的浏览器兼容性?原因?解决方法?常用hack技巧
- png24位的图片在IE6浏览器上出现背景
解决方案: 做成png,也可以引用一段脚本处理。 - 浏览器默认的margin和padding不同
解决方案: 加一个全局 *{margin:0;padding:0;}来统一 - IE6双边距bug,在IE6下,如果对元素设置来浮动,同时又设置来margin-left或margin-right,margin值会加倍
.demo{float:left;width:10px;margin:0 0 0 10px;}
这种情况下ie会产生20px的距离
解决方案: 在float的标签样式控制中加入_display:inline;将其转化为行内属性,这个_符号只有ie6会识别.
4. 渐进式识别的方式,从总体中逐渐排除局部
首先,巧妙的使用"\9"这一标记,将ie浏览器从所有情况中分离出来
接着,再次使用"+"将ie8和ie7,ie6分离开来,这样ie8已经独立识别
.demo{
background-color:#fff; /* 所有识别*/
.background-color:#fff; /* ie6,7,8 识别*/
+background-color:#fff; /* ie6,7 识别*/
_background-color:#fff; /* ie6 识别*/
}
- ie下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute获取自定义属性,firefox下,只能使用getAttribute获取自定义属性。
解决方法: 统一通过getAttribute获取自定义属性 - ie下,event对象有x,y属性,但是没有pageX,pageY属性,firebox下,event对象有pageX,pageY属性,但是没有x,y属性。
解决方法: 条件注释,缺点是在ie浏览器下可能会增加额外的http请求数。 - chrome中文界面下默认会将小于12px的文本强制按照12px显示。
解决方法: 可通过加入css属性-webkit-text-size-adjust:none解决。但是chrome更新到27版本之后就不可以用了。
还可以使用-webkit-transfor:scale(0.5),注意-webkit-transform:scale(0.75)收缩的是整个span大小,这时候必须要将span转换成块元素,可以使用display:block/inline-block。 - 超链接访问过后hover样式就不出现了,被点击访问过的超链接样式不再具有hover和active
解决方法: 改变css属性的排列顺序LVHA - 怪异模式问题,漏写DTD声明,firefox仍然会按照标准模式来解析网页,但在ie中会触发怪异模式,为避免怪异模式带来不必要的麻烦,最好养成书写DTD声明的好习惯。
18 li与li之间有看不见的空白隔是什么原因造成的?怎么解决?
浏览器会把inline元素间的空白字符(空格,换行,tab等)渲染成一个空格,而为了美观。通过li放在一行,这导致li换行后产生换行字符,它变成一个空格,占用来一个字符的宽度。
解决方案:
- 给li设置float:left。不足:有些容器是不能设置浮动,如左右切换焦点图等。
- 将所有li写在同一行。不足:代码不美观。
- 将ul内的字符尺寸直接设为0,即font-size:0。不足:ul中的其他字符尺寸也被设为0,需要额外重新设定其他尺寸,且在safari浏览器依然会出现空白间隔。
- 消除ul的字符间隔letter-spacing-8px。不足:这也设置来li内的字符间隔,因此需要将li内的字符间隔设为默认letter-spacing:normal。
19 为什么要初始化CSS样式
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对css初始化往往会出现浏览器之间的页面显示差异。
当然初始化会对seo有一定影响,但鱼与熊掌不可兼得,但力求影响最小但情况下初始化。
最简单的初始化
*{margin:0;paddingh:0;} /* 不建议 */
淘宝的样式初始化代码:
// 淘宝样式初始化代码:
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
20 什么是包含块,对于包含块的理解
包含块 containing block
就是元素用来计算和定位的一个框
- 根元素 很多场景下可以看成是
<html>
被称为初始包含块其尺寸等同于浏览器可视窗口大小。 - 对于其他元素,如果该元素的position是relative或者static,则包含块由其最近的块容器祖先盒的content box边界形成。
- 如果元素position:fixed 则包含块是初始包含块。
- 如果元素position:absolute 则包含块由最近的position不为static的祖先元素建立,具体如下:
如果祖先元素是纯inline元素,则规则略复杂:
- 假设给内联元素的前后各生成一个宽度为0的内联盒子 inline box,则这两个内联盒子的padding box外面的包围盒就是内联元素的包含块;
- 如果该内联元素被跨行分割来,那么包含块是未定义的,也就是css2规范并没有声明定义,浏览器自行发挥。否则,包含块由该祖先的padding box边界形成。
如果没有符合条件的祖先元素,则包含块是初始包含块。