CSS有哪些经典面试题?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
创新互联建站公司2013年成立,是专业互联网技术服务公司,拥有项目成都做网站、成都网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元海口做网站,已为上家服务,为海口各地企业和个人服务,联系电话:028-86922220
盒子模型就是 元素在网页中的实际占位,有两种:标准盒子模型和IE盒子模型
标准(W3C)盒子模型:内容content+填充padding+边框border+边界margin
宽高指的是 content 的宽高
低版本IE盒子模型:内容(content+padding+border)+ 边界margin,
宽高指的是 content+padding+border 部分的宽高
问题的拓展:
CSS 如何设置这两种模型?
box-sizing : content-box box-sizing : border-box复制代码
JS 如何设置获取盒模型对应的宽和高?
dom.style.width/height;//设置获取的是内联样式 dom.currentStyle.width/height;//只有IE支持 window.getComputedStyle(dom).width/height;//兼容性好 dom.getBoundingClientRect().width/height;//适用场所:计算一个元素的绝对位置复制代码
实例题(根据盒模型解释边距重叠)?
该例子是父子边距重叠,还有兄弟元素的边距重叠
复制代码
BFC(边距重叠解决方案)?
用来控制元素的盒子模型的解析模式,默认为content-box
context-box:W3C的标准盒子模型,设置元素的 height/width 属性指的是 content 部分的高/宽
border-box:IE 传统盒子模型。设置元素的 height/width 属性指的是 content + border + padding 部分的高/宽
(W3C CSS 2.1 规范中的一个概念,它是一个独立容器,决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。)
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
不同类型的 Box,会参与不同的 Formatting Context(决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。
BFC 规定了内部的 Block Box 如何布局。
定位方案:
满足下列条件之一就可触发 BFC
更多关于 BFC 的介绍,请看我的文章 BFC 是什么?有什么用?
CSS选择符:
1. id选择器( # myid)
2. 类选择器(.myclassname)
3. 标签(元素)选择器(p, h2, p)
4. 相邻选择器(h2 + p)
5. 子选择器(ul > li)
6. 后代选择器(li a)
7. 通配符选择器( * )
8. 属性选择器(a[rel = "external"])
9. 伪类选择器(a:hover, li:nth-child)
伪元素选择器、分组选择器。
继承性:
可继承的样式:font-size, font-family, color,ul,li,dl,dt,dd;
不可继承的样式:border, padding, margin, width, height
优先级(就近原则):!important > [ id > class > tag ]
!important 比内联优先级高
优先级算法计算
优先级就近原则,同权重情况下样式定义最近者为准
!important>id >class>tag
important比内联优先级高
元素选择符的权值:元素标签(派生选择器):1,class选择符:10,id选择符:100,内联样式权值最大,为1000
p:first-of-type 选择属于其父元素的首个
元素的每个
元素。
p:last-of-type 选择属于其父元素的最后
元素的每个
元素。
p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。
p:only-child 选择属于其父元素的唯一子元素的每个
元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。
:enabled
:disabled 控制表单控件的禁用状态。
:checked,单选框或复选框被选中。
:before在元素之前添加内容,也可以用来做清除浮动
:after在元素之后添加内容
水平居中p:
border: 1px solid red; margin: 0 auto; height: 50px; width: 80px;复制代码
水平垂直居中一个浮动元素(position定位)
第一种:未知元素宽高
我想居中显示
复制代码
第二种:已知元素宽高的
我想居中显示
复制代码
如何垂直居中一个img(display : table-cell 或者 position定位)
复制代码
![]()
绝对定位的p水平垂直居中:
border: 1px solid black; position: absolute; width: 200px; height: 100px; margin: auto; left: 0; right: 0; top:0; bottom:0;复制代码
还有更加优雅的居中方式就是用 flex布局,点击查看我的文章 掌握flex布局,这篇文章就够了
更多的居中问题,点击查看我的文章 p居中的几种方法
值 | 描述 |
---|---|
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
none | 此元素不会被显示(隐藏)。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
list-item | 此元素会作为列表显示。 |
table | 此元素会作为块级表格来显示(类似table),表格前后带有换行符 |
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成固定定位的元素,相对于浏览器窗口进行定位。(老IE不支持) 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位,不脱离文档流。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的文档流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
css 定位还有一个新增属性,粘性定位 sticky,它主要用在对 scroll 事件的监听上;
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。例如:
#one { position: sticky; top: 10px; }复制代码
在 viewport 视口滚动到元素 top 距离小于 10px 之前,元素为相对定位。之后,元素将固定在与顶部距离 10px 的位置,直到 viewport 视口回滚到阈值以下。
更多关于 sticky 的介绍,请点击查看 粘性定位介绍
:not(p)
选择每个非p的元素; p:empty
选择每个没有任何子级的p元素(包括文本节点)p{ border:2px solid; border-radius:25px; //用于设置圆角 box-shadow: 10px 10px 5px #888888; //水平阴影 垂直阴影 模糊距离 阴影颜色 border-image:url(border.png) 30 30 round;// 设置所有边框图像的速记属性。 }复制代码
p{ background:url(img_flwr.gif); background-repeat:no-repeat; background-size:100% 100%; //规定背景图的尺寸 background-origin:content-box;//规定背景图的定位区域 } 多背景 body{ background-image:url(img_flwr.gif),url(img_tree.gif); }复制代码
background: linear-gradient(direction, color-stop1, color-stop2, ...);复制代码
更多 CSS3 和 HTML5的新特性,请点击 CSS3 和 HTML5 新特性一览
该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中,block 布局是把块在垂直方向从上到下依次排列的;而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制,可以由开发人员自由操作。
试用场景:弹性布局适合于移动前端开发,在Android和ios上也完美支持。
更多关于flex 布局,请点击查看我的文章 你真的了解 flex 布局吗?
首先,需要把元素的宽度、高度设为0。然后设置边框样式。
width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff0000;复制代码
第一种真正的品字:
第二种全屏的品字布局:
上面的p设置成100%,下面的p分别宽50%,然后使用float或者inline使其不换行。
*{margin:0;padding:0;}
来统一;
display:inline;
将其转化为行内属性。渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“9”这一标记,将IE浏览器从所有情况中分离出来。接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。 渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“9”这一标记,将IE浏览器从所有情况中分离出来。接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。{ background-color:#f1ee18;/*所有识别*/.background-color:#00deff\9; /*IE6、7、8识别*/+background-color:#a200ff;/*IE6、7识别*/_background-color:#1e0bd1;/*IE6识别*/}复制代码
a:link {} a:visited {} a:hover {} a:active {}复制代码
IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。
1. 双边距BUG float引起的 使用display
2. 3像素问题 使用float引起的 使用dislpay:inline -3px
3. 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4. Ie z-index问题 给父级添加position:relative
5. Png 透明 使用js代码 改
6. Min-height 最小高度 !Important 解决’
7. select 在ie6下遮盖 使用iframe嵌套
8. 为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)
9. ie 6 不支持!important
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。
无论属于哪种,都要先找到其祖先元素中最近的 position 值不为 static 的元素,然后再判断:
如果都找不到,则为 initial containing block。
补充:
1. static(默认的)/relative:简单说就是它的父元素的内容框(即去掉padding的部分)
2. absolute: 向上找最近的定位为absolute/relative的元素
3. fixed: 它的containing block一律为根元素(html/body),根元素也是initial containing block
当一个元素的 visibility
属性被设置成 collapse
值后,对于一般的元素,它的表现跟 hidden
是一样的。但例外的是,如果这个元素是table相关的元素,例如table行,table group,table列,table column group,它的表现却跟 display: none
一样,也就是说,它们占用的空间也会释放。
在谷歌浏览器里,使用 collapse
值和使用 hidden
值没有什么区别。
在火狐浏览器、Opera和IE11里,使用 collapse
值的效果就如它的字面意思:table的行会消失,它的下面一行会补充它的位置。
display : none隐藏对应的元素,在文档布局中不再分配空间(回流+重绘)
visibility:hideen隐藏对应的元素,在文档布局中仍保留原来的空间(重绘)
使用 CSS display:none 属性后,HTML 元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden 属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。
display 属性规定元素应该生成的框的类型;position属性规定元素的定位类型;float属性是一种布局方式,定义元素在哪个方向浮动。
类似于优先级机制:position:absolute/fixed优先级最高,有他们在时,float不起作用,display值需要调整。float 或者absolute定位的元素,只能是块元素或表格。
出现浮动的原因:
浮动元素碰到包含它的边框或者浮动元素的边框停留。在CSS规范中,浮动定位不属于正常的页面流,而是独立定位的,所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。
关于css的定位机制:普通流,浮动,绝对定位(position:fixed是position:absolute的一个子类)。浮动的框可以左右移动,直到它的外边缘遇到包含框或者另一个浮动框的边缘,所以才说浮动定位不属于正常的页面流。文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,就会出现包含框不会自动伸缩高度类笔盒浮动元素。所以,只含有浮动元素的父容器在显示时不需要考虑子元素的位置,就造成显示父容器像空容器一样。
浮动带来的问题:
清除浮动的方式:
1、父级p定义height
原理:父级p手动定义height,就解决了父级p无法自动获取到高度的问题
优点:简单,代码少,容易掌握
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级p不一样时,会产生问题
建议:不推荐使用,只建议高度固定的布局时使用
2、结尾处加空 p 标签 clear:both
原理:添加一个空p,利用css提高的clear:both清除浮动,让父级p能自动获取到高度
优点:简单,代码少,浏览器支持好,不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空p,让人感觉很不爽
建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法
3、父级 p 定义 overflow:hidden
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点:简单,代码少,浏览器支持好
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏
建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
4、父级p定义伪类 :after 和 zoom
原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持
建议:推荐使用,建议定义公共类,以减少CSS代码
(1) 在子元素后添加一个空p p{clear:both;}
(2) 在父元素中{overflow:hidden|auto;zoom:1}
(3) :after伪选择符,在父容器的尾部自动创建一个子元素
.clearfix:after { content: "\0020";display: block;height: 0;clear: both; } .clearfix { zoom: 1; }复制代码
"clearfix"
是父容器的class名称,"content:"020";"
是在父容器的结尾处放一个空白符,
"height:
0;"
是让这个这个空白字符不显示出来,"display:
block; clear: both;"
是确保这个空白字符是非浮动的独立区块。:after
选择符IE 6不支持,添加一条IE 6的独有命令"zoom:1;"
就行了.
在重合元素外包裹一层容器,并触发该容器生成一个BFC。例子:
.aside { margin-bottom: 100px; width: 100px; height: 150px; background: #f66; } .main { margin-top: 100px; height: 200px; background: #fcc; } .text{ /*盒子main的外面包一个p,通过改变此p的属性使两个盒子分属于两个不同的BFC,以此来阻止margin重叠*/ overflow: hidden; //此时已经触发了BFC属性。 }复制代码
自动变成display:block
通过媒体查询可以为不同大小和尺寸的媒体定义不同的css,适应相应的设备的显示。
复制代码
@media only screen and (max-device-width:480px) { /css样式/}复制代码
预处理器例如:LESS、Sass、Stylus,用来预编译Sass或less,增强了css代码的复用性,还有层级、mixin、变量、循环、函数等,具有很方便的UI组件模块化开发能力,极大的提高工作效率。
后处理器例如:PostCSS,通常被视为在完成的样式表中根据CSS规范处理CSS,让其更有效;目前最常做的是给CSS属性添加浏览器私有前缀,实现跨浏览器兼容性的问题。
CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、简单的逻辑程序、函数(如右侧代码编辑器中就使用了变量$color)等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
其它 CSS 预处理器语言:
为什么要使用它们?
结构清晰,便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说,封装对浏览器语法差异的重复处理,减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码,可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展,所以老的 CSS 代码也可以与 LESS 代码一同编译。
正确使用display的属性:由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。
display:inline后不应该再使用width、height、margin、padding以及float。
display:inline-block后不应该再使用float。
display:block后不应该再使用vertical-align。
display:table-*后不应该再使用margin或者float。
不滥用web字体
对于中文网站来说Web Fonts可能很陌生,国外却很流行。web fonts通常体积庞大,而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
-moz-border-radius: 5px; border-radius: 5px; }复制代码
CSS选择器的解析是从右向左解析的,为了避免对所有元素进行遍历。若从左向右的匹配,发现不符合规则,需要进行回溯,会损失很多性能。若从右向左匹配,先找到所有的最右节点,对于每一个节点,向上寻找其父节点直到找到根元素或满足条件的匹配规则,则结束这个分支的遍历。两种匹配规则的性能差别很大,是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点),而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后,需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree,最终用来进行绘图。在建立 Render Tree 时(WebKit 中的「Attachment」过程),浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果(Style Rules)来确定生成怎样的 Render Tree。
使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px时用的是小一号的点。(即每个字占的空间大了 1 px,但点阵没变),于是略显稀疏。
◆何时应当使用margin
需要在border外侧添加空白时。
空白处不需要背景(色)时。
上下相连的两个盒子之间的空白,需要相互抵消时。如15px+20px的margin,将得到20px的空白。
◆何时应当时用padding
需要在border内测添加空白时。
空白处需要背景(色)时。
上下相连的两个盒子之间的空白,希望等于两者之和时。如15px+20px的padding,将得到35px的空白。
◆浏览器兼容性问题
在IE5.x、IE6中,为float的盒子指定margin时,左侧margin可能会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决。
当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如 padding-top , padding-bottom , margin-top , margin-bottom 等,当按百分比设定它们时,依据的也是父容器的宽度,而不是高度。
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。
复制代码
视差滚动(Parallax Scrolling)通过在网页向下滚动的时候,控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。
:before 和 :after 这两个伪元素,是在CSS2.1里新出现的。起初,伪元素的前缀使用的是单冒号语法,但随着Web的进化,在CSS3的规范里,伪元素的语法被修改成使用双冒号,成为::before ::after
注意:对于IE6/7/8仅支持单冒号表示法,而现代浏览器同时支持这两种表示法。另外,在CSS3中单冒号和双冒号的区域主要是用来区分伪类和伪元素的。
行高是指一行文字的高度,具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height,没有定义height属性,最终其表现作用一定是line-height。
单行文本垂直居中:把line-height值设置为height一样大小的值可以实现单行文字的垂直居中,其实也可以把height删除。
多行文本垂直居中:需要设置display属性为inline-block。
p{ font-size:10px; -webkit-transform:scale(0.8);//0.8是缩放比例 } 复制代码
-webkit-font-smoothing 在 window 系统下没有起作用,但是在 IOS 设备上起作用 -webkit-font-smoothing:antialiased 是最佳的,灰度平滑。
复制代码
多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms。
行框的排列会受到中间空白(回车空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。
解决方法:
外层p使用position:relative;高度要求自适应的p使用position: absolute; top: 100px; bottom: 0; left: 0
页面加载自上而下 当然是先加载样式。
写在 body 标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在尾部的样式表(外联或写在 style 标签)会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE下可能会出现 FOUC 现象(即样式失效导致的页面闪烁问题)
参数是 scroll 时候,必会出现滚动条。
参数是 auto 时候,子元素内容大于父元素时出现滚动条。
参数是 visible 时候,溢出的内容出现在父元素之外。
参数是 hidden 时候,溢出隐藏。
CSS Sprites小图片背景共享技术。它把一堆小的图片整合到一张大的图片上。然后利用CSS的 background-image,background- repeat,background-position 的组合进行背景定位。利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能;CSS Sprites能减少图片的字节。
优势:
1.很好的减少网页的请求,大大提高页面的性能;
2.减少图片的字节;
3.解决了网页设计师在图片命名上的困扰;
4.更换风格方便,维护方便。
劣势:
1.图片合并时需预留好足够空间,宽屏、高分辨率的屏幕下易出现背景断裂;
2.开发较麻烦,测量繁琐;(可使用样式生成器)
3.维护麻烦,背景少许改动有可能影响整张图片,使得字节增加还要改动css。
第一种回答:
伪类: :focus、:hover、:active
伪元素::before、:after
伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息;
伪元素本质上是创建了一个有内容的虚拟容器;
CSS3中伪类和伪元素的语法不同;
可以同时使用多个伪类,而只能同时使用一个伪元素;
第二种回答:
伪类:伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。
:first-child :link: :visitive :hover :active :focus :lang
伪元素:与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
:first-line :first-letter :before :after复制代码
外部样式表,引入一个外部css文件
内部样式表,将css代码放在 标签内部
内联样式,将css样式直接定义在 HTML 元素内部
最基本的:设置 display 属性为 none,或者设置 visibility 属性为 hidden
技巧性:设置宽高为 0,设置透明度为 0,设置 z-index 位置在 -1000
答案:解决各浏览器对 CSS 解释不同所采取的,区别不同浏览器制作不同CSS样式的设置就叫作 CSS Hack。
块级元素( block )特性:
总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性:
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变(也就是padding和margin的left和right是可以设置的)。
那么问题来了,浏览器还有默认的天生inline-block元素(拥有内在尺寸,可设置高宽,但不会自动换行),有哪些?
答案: 、 、