CSS

1.解释一下CSS的盒子模型?

回答一:

a、标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度

b、网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。

c、这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

回答二:

标准的盒模型:width = content

IE盒模型:width = content+padding-Left+padding-right+border-left + border-right

2.请你说说CSS选择器的类型有哪些,并举几个例子说明其用法?

类型:基础的选择器、组合选择器、属性选择器、伪类、伪元素

基础的选择器
组合选择器
属性选择器
伪类选择器
伪元素

3.请你说说CSS有什么特殊性?(优先级、计算特殊值)

优先级

(1)、同类型,同级别的样式后者先于前者

(2))、ID > 类样式 > 标签 > *

(3)、内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器(*)>继承的样式

(4)、具体 > 泛化的,特殊性即css优先级

(5)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)

内嵌样式:内嵌在元素中,span

内部样式表:在页面中的样式,写在中的样式

外联样式表:单独存在一个css文件中,通过link引入或import导入的样式

(6)、!important 权重最高,比 inline style 还要高

计算特殊性值

important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

权重、特殊性计算法:

CSS样式选择器分为4个等级,a、b、c、d

(1)、如果样式是行内样式(通过Style=“”定义),那么a=1,1,0,0,0

(2)、b为ID选择器的总数 0,1,0,0

(3)、c为属性选择器,伪类选择器和class类选择器的数量。0,0,1,0

(4)、d为标签、伪元素选择器的数量 0,0,0,1

(5)、!important 权重最高,比 inline style 还要高

比如结果为:1093比1100,按位比较,从左到右,只要一位高于则立即胜出,否则继续比较。

4.要动态改变层中内容可以使用的方法?

innerHTML,innerText

5.CSS中 link 和@import 的区别是?

(1)、link属于HTML标签,而@import是CSS提供的;

(2)、页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;

(3)、import只在IE5以上才能识别,而link是HTML标签,无兼容问题;

(4)、link方式的样式的权重 高于@import的权重.

6.请列举几种清除浮动的方法(至少两种)?

(1)、父级div定义 height

原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。

优点:简单、代码少、容易掌握

缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题

建议:不推荐使用,只建议高度固定的布局时使用

(2)、结尾处加空div标签 clear:both

原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度

优点:简单、代码少、浏览器支持好、不容易出现怪问题

缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好

建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法

(3)、父级div定义 伪类:after 和 zoom

原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题

优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)

缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。

建议:推荐使用,建议定义公共类,以减少CSS代码。

(4)、父级div定义 overflow:hidden

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度

优点:简单、代码少、浏览器支持好

缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。

建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

(5)、父级div定义 overflow:auto

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度

优点:简单、代码少、浏览器支持好

缺点:内部宽高超过父级div时,会出现滚动条。

建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

7.block,inline和inlinke-block细节对比?

• display:block

a、block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。

b、block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

c、block元素可以设置margin和padding属性。

• display:inline

a、inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

b、inline元素设置width,height属性无效。

c、inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

• display:inline-block

a、简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

补充说明

a、一般我们会用display:block,display:inline或者display:inline-block来调整元素的布局级别,其实display的参数远远不止这三种,仅仅是比较常用而已。

b、IE(低版本IE)本来是不支持inline-block的,所以在IE中对内联元素使用display:inline-block,理论上IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表象。

7.说说浮动元素会引起的问题和你的解决办法

问题:

(1)父元素的高度无法被撑开,影响与父元素同级的元素

(2)与浮动元素同级的非浮动元素会跟随其后

(3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构

解决方法:

使用CSS中的clear:both;属性来清除元素的浮动可解决问题(2)、(3),对于问题(1),添加如下样式,给父元素添加clearfix样式:

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

.clearfix{display: inline-block;} /* for IE/Mac */

清除浮动的几种方法:

(1)、额外标签法,<div style="clear:both;"></div>

(缺点:不过这个办法会增加额外的标签使HTML结构看起来不够简洁。)


(2)、使用after伪类

#parent:after{                                                                                                                           content:" ";                                                                                                                                 height:0;                                                                                                                         visibility:hidden;                                                                                                                   display:block;                                                                                                                               clear:both;                                                                                                                                     }

(3)、浮动外部元素

(4)、设置`overflow`为`hidden`或者auto

8.你有哪些性能优化的方法?

(1)、减少HTTP请求次数

(2)、使用CDN

(3)、避免空的src和href

(4)、为文件头指定Expires

(5)、使用gzip压缩内容

(6)、把CSS放到顶部

(7)、把JS放到底部

(8)、避 免使用CSS表达式

(9)、将CSS和JS放到外部文件中

(10)、避免跳转

(11)、可缓存的AJAX

(12)、使用GET来完成AJAX请求

9.为什么要初始化CSS样式?

因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。

*最简单的初始化方法就是: * {padding: 0; margin: 0;} (不建议)

10.解释下浮动和它的工作原理?清除浮动的技巧?

浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

(1)、使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签定义css clear:both. 弊端就是增加了无意义标签。

(2)、使用overflow。

给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

(3)、使用after伪对象清除浮动。

该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;

11.CSS样式表根据所在网页的位置,可分为哪几种样式表?

行内样式表,内嵌样式表,外部样式表

12.谈谈你对CSS中刻度的认识?

在CSS中刻度是用于设置元素尺寸的单位。

a、特殊值0可以省略单位。例如:margin:0px可以写成margin:0

b、一些属性可能允许有负长度值,或者有一定的范围限制。如果不支持负长度值,那应该变换到能够被支持的最近的一个长度值。

c、长度单位包括:相对单位和绝对单位。

相对长度单位有:em, ex, ch, rem, vw, vh, vmax, vmin

绝对长度单位有:cm, mm, q, in, pt, pc, px

绝对长度单位:1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

文本相对长度单位:em

相对长度单位是相对于当前对象内文本的字体尺寸,如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)

body { font-size: 14px; }

h1 { font-size: 16px; }

.size1 p { font-size: 1em; }

.size2 p { font-size: 2em; }

.size3 p { font-size: 3em; }

文本相对长度单位:rem

rem是CSS3新增的一个相对单位(root em,根em),相对于根元素(即html元素)font-size计算值的倍数

只相对于根元素的大小

浏览器的默认字体大小为16像素,浏览器默认样式也称为user agent stylesheet,就是所有浏览器内置的默认样式,多数是可以被修改的,但chrome不能直接修改,可以被用户样式覆盖。

13.请你说说em与rem的区别?

rem

rem是CSS3新增的一个相对单位(root em,根em),相对于根元素(即html元素)font-size计算值的倍数

只相对于根元素的大小

rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。

作用:利用rem可以实现简单的响应式布局,可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化,以前的天猫tmall就使用这种办法

em

文本相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)

em(font size of the element)是指相对于父元素的字体大小的单位。它与rem之间其实很相似,区别在。(相对是的HTML元素的字体大,默认16px)

em与rem的重要区别:它们计算的规则一个是依赖父元素另一个是依赖根元素计算

14.请你说说box-sizing属性的的用法?

设置或检索对象的盒模型组成模式

a、box-sizing:content-box:padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即 ( Element width = width + border + padding,但占有页面位置还要加上margin ) 此属性表现为标准模式下的盒模型。

b、box-sizing:border-box:padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。

15.说说你对边距折叠的理解?

外边距折叠:相邻的两个或多个外边距(margin) 在垂直方向会合并成一个外边距(margin)

相邻:没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系

垂直方向外边距合并计算:

a、参加折叠的margin都是正值:取其中 margin 较大的值为最终 margin 值。

b、参与折叠的 margin 都是负值:取的是其中绝对值较大的,然后,从 0 位置,负向位移。

c、参与折叠的 margin 中有正值,有负值:先取出负 margin 中绝对值中最大的,然后,和正 margin 值中最大的 margin 相加。

16.说说隐藏元素的方式有哪些?

a、使用CSS的display:none,不会占有原来的位置

b、使用CSS的visibility:hidden,会占有原来的位置

c、使用HTML5中的新增属性hidden="hidden",不会占有原来的位置

17.为什么重置浏览器默认样式,如何重置默浏览器认样式?

每种浏览器都有一套默认的样式表,即user agent stylesheet,网页在没有指定的样式时,按浏览器内置的样式表来渲染。这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。但这样会有很多兼容问题。

a、最简单的办法:(不推荐使用)*{margin: 0;padding: 0;}。

b、使用CSSReset可以将所有浏览器默认样式设置成一样。

c、normalize:也许有些cssreset过于简单粗暴,有点伤及无辜,normalize是另一个选择。bootstrap已经引用该css来重置浏览器默认样式,比普通的cssreset要精细一些,保留浏览器有用的默认样式,支持包括手机浏览器在内的超多浏览器,同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。

天猫使用的css reset重置浏览器默认样式:

@charset "gb2312";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 "microsoft yahei";line-height: 1.5;-ms-overflow-style: scrollbar}h1, h2, h3, h4, h5, h6 {font-size: 100%}ul, ol {list-style: none}a {text-decoration: none;cursor:pointer}a:hover {text-decoration: underline}img {border: 0}button, input, select, textarea {font-size: 100%}table {border-collapse: collapse;border-spacing: 0}.clear {clear:both}.fr {float:right}.fl {float:left}.block {display:block;text-indent:-999em}

18.说说你对页面中使用定位(position)的理解?

position:static | relative | absolute | fixed | center | page | sticky

默认值:static,center、page、sticky是CSS3中新增加的值。

(1)、static

可以认为静态的,默认元素都是静态的定位,对象遵循常规流。此时4个定位偏移属性不会被应用,也就是使用left,right,bottom,top将不会生效。

(2)、relative

相对定位,对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。

(3)、absolute

a、绝对定位,对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。

b、元素定位参考的是离自身最近的定位祖先元素,要满足两个条件,第一个是自己的祖先元素,可以是父元素也可以是父元素的父元素,一直找,如果没有则选择body为对照对象。第二个条件是要求祖先元素必须定位,通俗说就是position的属性值为非static都行。

(4)、fixed

固定定位,与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。

(5)、center

与absolute一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。(CSS3)

(6)、page

与absolute一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3)

(7)、sticky

对象在常态时遵循常规流。它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。(CSS3)

19.如何解决多个元素重叠问题?

使用z-index属性可以设置元素的层叠顺序

z-index属性

语法:z-index: auto |

默认值:auto

适用于:定位元素。即定义了position为非static的元素

取值:

auto: 元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文,除非它是根元素。

整数:用整数值来定义堆叠级别。可以为负值。说明:

检索或设置对象的层叠顺序。

z-index用于确定元素在当前层叠上下文中的层叠级别,并确定该元素是否创建新的局部层叠上下文。

当多个元素层叠在一起时,数字大者将显示在上面。

20.如何居中div, 如何居中一个浮动元素?

(1)、非浮动元素居中:可以设置 margin:0 auto 令其居中, 定位 ,父级元素text-align:center等等

(2)、浮动元素居中:

方法一:设置当前div的宽度,然后设置margin-left:50%; position:relative; left:-250px;其中的left是宽度的一半。

方法二:父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对左移动-50%。

方法三:position定位等等。

推荐阅读更多精彩内容