前端知识点总结-css篇

作者:Jasmine - 2018年10月25日

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 许可协议。转载请注明出处!


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!