前端知识点总结-css篇
1、css的display:none和visibility:hidden区别
display:none使用后,元素的宽度,高度都会丢失,视为不存在不加载;元素原来占据的空间位置不保留;产生回流和重绘;
visibility:hidden:视觉上的不可见,但是保留占据的空间,还具有宽度和高度;
2、box-sizing : content-box || border-box || inherit
content-box:border和padding不计算入width之内;
padding-box:padding计算入width内;
border-box:border和padding计算入width之内,其实就是怪异模式了;
当为border-box,则让元素维持在了IE传统模式下的怪异模式,即,设置的元素的width和height都是包括元素的宽度和padding和border。可以运用到布局(因为当其内元素和父元素宽度相等时没有问题但是只要加了一点padding和margin整个布局就崩溃了)和表单元素(表单中除了checkbox和radio外默认都是2px的border)上。
3.position的absolute与fixed共同点与不同点
A:共同点:
1).改变行内元素的呈现方式,display被置为block;
2).让元素脱离普通流,不占据空间;
3).默认会覆盖到非定位元素上;
B:不同点:
absolute的”根元素“是可以设置的,而fixed的”根元素“固定为浏览器窗口。当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的。
4、用纯CSS创建一个三角形的原理是什么?
把上、左、右三条边隐藏掉(颜色设为 transparent)
div#demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; }
注:IE6下将边框设置为transparent并不会透明,会产生阴影,可设置为border-style:dashed dashed solid dashed;
用CSS3 transfrom旋转45度实现
-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
5、常用的css hack的技巧 ?
条件HACK:
属性级HACK:
_:选择IE6及以下。连接线(中划线)(-)亦可使用,为了避免与某些带中划线的属性混淆,所以使用下划线更为合适。
*选择IE7及以下。诸如:(+)与(#)之类的均可使用,不过业界对(*)的认知度更高
\9:选择IE6+
\0:选择IE8+和Opera15以下的浏览器
e.g.
.bb{ background-color:#f1ee18;/*所有识别*/ .background-color:#00deff\9; /*IE6、7、8识别*/ *background-color:#a200ff;/*IE6、7识别*/(+和#也可) _background-color:#1e0bd1;/*IE6识别*/ }
选择符级HACK:
在选择符前面加*,+构成选择符级HACK。
6、li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
行框的排列会受到中间空白(回车\空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。
解决方法:
(1)浮动li中float:left;
(2)在ul中用font-size:0(谷歌不支持);可以使用letter-space:-3px;
7、CSS里的visibility属性有个collapse属性值是干嘛用的?在不同浏览器下以后什么区别?
当一个元素的visibility属性被设置成collapse值后,对于一般的元素,它的表现跟hidden是一样的。
(1)谷歌浏览器中,使用collapse值和使用hidden没有区别。
(2)火狐,opera和IE,使用collapse值和使用display:none没有什么区别。
8、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?
display属性规定元素应该生成的框的类型;
position属性规定元素的定位类型;
float属性是一种布局方式,定义元素在哪个方向浮动。
类似于优先级机制:position:absolute/fixed优先级最高,有他们在时,float浮动不起作用,display值需要调整。
注:浮动或者absolute定位的元素,只能是块元素或表格。
9、对BFC规范(块级格式化上下文:block formatting context)的理解?
BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的margin会发生折叠。
(W3C CSS 2.1 规范中的一个概念,它是一个独立容器,决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。)
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
不同类型的 Box,会参与不同的 Formatting Context(决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。
定位方案:
(1)普通流(normal flow)按照html中的先后位置至上而下布局,行内元素水平排列 ,当前行被占满后换行,块级元素会被渲染为完整的新行。
(2)浮动(floats)。
元素首先按照普通流位置出现,然后根据浮动的方向尽可能的向左向右偏移,与印刷的文本环绕相似。
(3)绝对定位(absolute position)。
绝对定位中,元素会整体脱离普通流BFC正是属于普通流,因此对兄弟元素也不会造成什么影响。具有 BFC 的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并 且 BFC 具有普通容器没有的一些特性。浮动元素,绝对定位元素,display,overflow会触发BFC。
特性:
(1)会阻止外边距折叠。
(2)会包含浮动元素。
(3)阻止元素被浮动元素覆盖。
10、css定义的权重
以下是权重的规则:标签的权重为1,class的权重为10,id的权重为100,以下例子是演示各种定义的权重值:
/*权重为10+1=11*/ .class1 div{ } /*权重为10+10+1=21*/ .class1 .class2 div{ }
如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现
11、设置元素浮动后,该元素的display值是多少?请解释一下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式
设置元素浮动后,display:block。
IE出现双边框的原因:浮动元素的浮动方向与margin的方向一致会出现双边框。
解决bug:(1)给浮动元素添加一个display:inline(2)给IE6写一个hack,其值为正常值的一半。
浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
为什么会出现浮动:
出现浮动之后,我们可以很好的进行页面布局。
浮动元素引起的问题:
(1)在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或 right)的元素,在这种情况下,容器的高度不能自动伸长撑开以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象。这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。
(2)与浮动元素同级的非浮动元素会跟随其后。
(3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。
清除浮动的方式:
1)使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签
(缺点:不过这个办法会增加无意义标签使HTML结构看起来不够简洁。)
2)使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。|| overflow:hidden。
3)使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素,高度会塌陷,而高度的塌陷使我们页面后面的布局不能正常显示。
4)、父级div定义height;
5)、父级div 也一起浮动;
6)、父级div 定义display:table;
7)、常规的使用一个class;
.clearfix:before, .clearfix:after { content: "."; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }
8)、SASS编译的时候,在浮动元素的父级div定义伪类:after
&:after,&:before{ content: "."; visibility: hidden; display: block; height: 0; clear: both; }
解析原理:
1)display:block 使生成的元素以块级元素显示,占满剩余空间。
2)height:0 避免生成内容破坏原有布局的高度。
3)visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互。
4)通过 content:"."生成内容作为最后一个元素,至于content里面是点还是其他都是可以的,例如oocss里面就有经典的 content:".",有些版本可能content 里面内容为空,是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙。
5)zoom:1 触发IE hasLayout。
通过分析发现,除了clear:both用来闭合浮动的,其他代码无非都是为了隐藏掉content生成的内容,这也就是其他版本的闭合浮动为什么会有font-size:0,line-height:0。
zoom:1的清楚浮动原理?
清除浮动,触发hasLayout。Zoom属性是IE浏览器的专有属性,它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。譬如外边距(margin)的重叠,浮动清除,触发ie的haslayout属性等。
来龙去脉大概如下:
当设置了zoom的值之后,所设置的元素就会就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发生重新渲染,运用这个原理,也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。
Zoom属是IE浏览器的专有属性,火狐和老版本的webkit核心的浏览器都不支持这个属性。然而,zoom现在已经被逐步标准化,出现在 CSS 3.0 规范草案中。
目前非ie由于不支持这个属性,它们又是通过什么属性来实现元素的缩放呢?
可以通过css3里面的动画属性scale进行缩放。
12、使用 CSS 预处理器吗?喜欢那个?
预处理器:less,sass等等(给css像其他程序语言一样,加入一些编程元素,让css能像其他程序语言一样做一些预定的处理,然后就有了css预处理器)喜欢Sass,less,stylus。Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言
$color:red .test{ color:$color; } /*执行结果:*/ .test{ color:red; }
(1)Sass 语法
$font-stack: Helvetica, sans-serif //定义变量 $primary-color: #333 //定义变量 body font: 100% $font-stack color: $primary-color
(2)CSS 语法
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }
/*编译出来的 CSS*/
body { font: 100% Helvetica, sans-serif; color: #333; }
13、margin和padding分别适合什么场景使用?
margin是用来隔开元素与元素的间距;padding是用来隔开元素与内容的间隔。
何时使用margin:
(1)需要在border外侧添加空白。
(2)空白处不需要背景色。
(3)上下相连的两个盒子之间的空白,需要相互抵消时。
何时使用padding:
(1)需要在border内侧添加空白。
(2)空白处需要背景颜色。
(3)上下相连的两个盒子的空白,希望为两者之和。
兼容性的问题:在IE5 IE6中,为float的盒子指定margin时,左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display:inline解决。
14、什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?
(1)响应式网站设计(Responsive Web design)的理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。
(2)基本原理: 媒体查询 @media。
(3)兼容IE可以使用JS辅助一下来解决。
15、::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。
单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。(伪元素由双冒号和伪元素名称组成)双冒号是在当前规范中引入的,用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法。比如:first-line、:first-letter、:before、:after等。
在css2之前用的是单冒号,之后css3使用时双冒号。目前除了IE外不兼容双冒号,其他的浏览器兼容双冒号,建议还是使用单冒号。
::before就是以一个子元素的存在,定义在元素主体内容之前的一个伪元素。并不存在与dom之中,只存在在页面之中。同理,after是在主体内容之后显示的。想让插入的内容出现在其它内容前,使用::before,之后使用::after;在代码顺序上,::after生成的内容也比::before生成的内容靠后。如果按堆栈视角,::after生成的内容会在::before生成的内容之上
16、如何修改chrome记住密码后自动填充表单的黄色背景 ?
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(250, 255, 189); /* #FAFFBD; */ background-image: none; color: rgb(0, 0, 0); }
这黄色背景是chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性。
input:-webkit-autofill{ background-color : #FAFFBD ; background-image : none ; color : #000 }
第一种情况:input文本框是纯色背景的
可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景。
input:-webkit-autofill{ -webkit-box-shadow:0 0 0px 1000px white inset; border:1px solid #ccc !important; }
除了chrome默认定义的background-color,background-image,color不能用!important提升其优先级 ,所以只能用覆盖了。其他的属性均可使用!important提升其优先级。
第二种情况:input文本框使用背景图片
1)、图片不复杂可以使用第一种情况解决,纯色内阴影覆盖。
2)、使用js实现;存在一个问题是使用js方法会导致提交表单的时候无法将value值传过去。
3)、使用form标签上的关闭自动填充功能:autocomplete="off"。
28、让页面里的字体变清晰,变细用CSS怎么做?(-webkit-font-smoothing: antialiased;)
-webkit-font-smoothing在window系统下没有起作用,但是在IOS设备上起作用
-webkit-font-smoothing:antialiased是最佳的,灰度平滑。
17、怎么让Chrome支持小于12px 的文字?
用图片:如果是内容固定不变情况下,使用将小于12px文字内容切出做图片,这样不影响兼容也不影响美观。
方法一:首先取消浏览器自动调整功能。
.classstyle{ -webkit-text-size-adjust:none; font-size:9px; }
方法二:现在可以使用css3里的一个属性:transform:scale()
p{ font-size:10px; -webkit-transform:scale(0.8); }//0.8是缩放比例
18、position:fixed;在android下无效怎么处理?
fixed的元素是相对整个页面固定位置的,你在屏幕上滑动只是在移动这个所谓的viewport,原来的网页还好好的在那,fixed的内容也没有变过位置,所以说并不是iOS不支持fixed,只是fixed的元素不是相对手机屏幕固定的。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
19、overflow: scroll时不能平滑滚动的问题怎么处理?
(1)高度尺寸不确定的时候,使用:overflow-y:scroll;
(2)高度尺寸确定的,要么没有滚动条,要么直接出现,不会出现跳动。
(3)css3计算calc和vw单位巧妙实现滚动条出现页面不跳动。
.wrap-outer { margin-left: calc(100vw - 100%); }
或
.wrap-outer { padding-left: calc(100vw - 100%); }
首先,.wrap-outer指的是居中定宽主体的父级,如果没有,创建一个,然后,calc是css3的计算。
100vw是浏览器的内部宽度,而100%是可用宽度,不含滚动条。
calc(100vw-100%)是浏览器的滚动条的宽度。
20、有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度。
.box {width:200px; height: 100%;background:red;position:relative;} .el1 {height:100px;background:green;} .el2 {background:blue;width:100%;position:absolute;top:100px;bottom:0;}
外层position: relative;
百分百自适应元素直接position: absolute; top: 100px; width:100%;bottom: 0; left: 0
21、为什么要初始化 CSS 样式
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。
当然,初始化样式会对 SEO 有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。
最简单的初始化方法是:*{padding:0;margin: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; } ub{ 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; }
22、px和em的区别
px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
23、css属性overflow属性定义溢出元素内容区的内容会如何处理
参数是scroll时候,必会出现滚动条。
参数是auto时候,子元素内容大于父元素时出现滚动条。
参数是visible时候,溢出的内容出现在父元素之外。
参数是hidden时候,溢出隐藏。
24、JavaScript中 call和apply的描述
call()方法和apply()方法的作用相同,他们的区别在于接收参数的方式不同。在使用call()方 法时,传递给函数的参数必须逐个列举出来。使用apply()时,传递给函数的是参数数组。
function add(c, d){ return this.a + this.b + c + d; } var o = {a:1, b:3}; add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
23、阐述一下CSS sprities?
它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大 的优点,也是其被广泛传播和应用的主要原因;
CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/604
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!