css 面试题

时间:2020-03-26
本文章向大家介绍css 面试题,主要包括css 面试题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1、标准的css 盒子模型 与低版本IE的盒子模型有什么不同?

标准盒子模型: 宽度 = 内容的宽度(content) + border + padding +margin ;
低版本 IE 盒子模型: 宽度 = 内容宽度 (content + border + padding) + margin ;

2、box-sizing 属性有哪些?

用来控制元素的盒子模型的解析模式,默认为content-box。
context-box : w3c 的标准盒子模型,设置元素的height/width 属性指的是content部分的高/宽.
border-box : IE 传统盒子模型。设置元素的 height/width 属性指的是border + padding +content 部分的宽/高.

3、css 选择器有哪些,哪些属性可以继承?

css 选择器: id选择器(#id),类选择器(.classname),标签选择器(div,h1,p),相邻选择器(h1+p),子选择器(h1>p),后代选择器(h1 p),通配符选择器(*),属性选择器(a[rel="external"]),伪类选择器(a:hover,li:nth-child)
可继承属性: font-size,font-family,color
不可继承的样式:border , padding ,margin ,width ,height
优先级(就近原则): !import > [id>class>tag]
!import 比内联优先级高

4、css 优先级算法如何计算?

元素选择符:1
class 选择符:10
id选择符:100
元素标签:1000
注意: !import 声明的样式优先级最高,如果冲突再进行计算。
如果优先级相同,则选择最后出现的样式。
继承得到的样式的优先级最低。

5、css3 新增伪类有哪些?

p:first-of-type  选择属于父元素的第一个元素
p:last-of-type 选择父元素的最后一个元素
p:only-of-type 选择父元素的唯一的元素
p:only-clild 选择父元素的唯一子元素
p:nth-child(3) 选择父元素的第三个子元素
:enabled ,:disabled 表单控件的禁用状态
:checked 单选框或复选框被选中

6、如何居中一个浮动元素,如何让绝对定位的div居中?

居中div:
{
margin:0 auto;
height:100px;
width:100px;
border:1px solid red; //加个颜色方便看
}
浮动元素的上下左右居中:
{
float:left;
width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
margin:-50px 0 0 -50px;
border:1px solid red;
}
绝对定位的左右居中:
{
width:100px;
height:100px;
margin:0 auto;
position:absolute;
left:0;
right:0;
border:1px solid red;
}
flex 居中:
<div class="box">
<div class="box-child"></div>
</div>
.box{
display:flex;
justify-content:center;//水平居中
align-items:center;//垂直居中
width:100px;
height:100px;
border:1px solid red;
}

7、display 有哪些值?

inline(defalut)---内联
none ---隐藏
block ---块级显示
table ---表格显示
list-item ---项目列表
inline-block ---行内块级元素

8、position 的值?

static (default): 按照正常文档流进行排列
relative (相对定位):不脱离文档流,参考自身静态位置通过 top,left,right,bottom 定位。
absolute (绝对定位):参考距离最近的一个父级元素通过 top,left,right,bottom定位。
fixed (固定定位): 所固定的参照对象是可视窗口。

9、css3 新特性?

颜色值:rgba  和 透明度 opacity
背景图片:background-image,background-origin(content-box/padding-box/border-box),background-size,background-repeat
word-wrap(对长的不可分割单词换行):break-word
文字阴影:text-shadow:1px 1px 1px #000(水平阴影,垂直阴影,模糊距离,阴影颜色)
定义自己的字体:font-face
圆角: border-radius:边框半径
边框图片: border-image:url('图片路径') 10 10 round;
盒阴影: box-shadow:1px 1px 1px #000;
媒体查询:定义两套css,根据浏览器的尺寸变化采用不同的属性 @media only screen and (max-device-width:480px){//css样式}
线性渐变: linear-gradients(下,上,左,右,对角方向)
2D转换: transform:scale(0.5,0.9) | translate(0px,30px) | skew(-9deg,0deg) | rotate()
3D转换: perspective();
过渡: transition
动画

10、css3 弹性盒布局模型

布局模型的目的是:提供一种更加高效的方式来对容器中国的条目进行布局,对齐和分配空间。在传统的布局方式中,block布局是把块垂直方向从上到下依次排列。
而inline布局则是在水平方向来排列。而弹性盒布局并没有这样内在的方向限制。

11、css创建一个三角形原理

//首先,需要把元素的宽度,高度设为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;
}

12、清除浮动

//浮动带来的问题
父元素的高度无法被撑开,影响与父元素同级的元素。
与浮动元素同级的非浮动元素会跟随其后。
若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构。
//清除浮动的方式:
父级 div 定义 height。
最后一个浮动元素后加空div标签,并添加样式clear:both。
包含浮动元素的父标签添加样式 overflow 为 hidden 或 auto 。
父级 div 定义 zoom 。
.clearfix:after{ //注意哦,clearfix 是父容器的名称
content:"\00020"; //这个是在父容器的结尾处放一个空白字符
display:block;
height:0; //让这个空白字符不显示出来
clear:both;
}
.clearfix{
zoom:1;
}

13、png,jpg,gif 图片格式?

png  是便携式网络图片(portable network graphics) 是一种无损数据压缩位图文件格式优点是: 压缩比高,色彩好。
jpg 是一种针对相片使用的一种失真压缩方法,是一种破坏性的压缩,在色调及颜色平滑变化做的不错。在www上,被用来存储和传输照片的格式。
gif 是一种位图文件格式,以8位色重现真色彩的图像。可以实现动画效果。
webp 格式是谷歌推出的图片格式,压缩率只有 jpg 的2/3; 大小比 png 小了45%。缺点是压缩的时间更久了,兼容性不好。

14、flex 用法

任何一个容器都可以指定为flex布局。
行内元素也可以使用flex布局
.box {
display:inline-flex;
}
注意,设为 flex布局后,子元素的float,clear 和vertical 属性将失效。
这6个属性设置在容器上:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction 属性: 决定主轴的方向(项目的排列方向),有4个值。
row(默认值): 主轴水平方向,起点在左端。
row-reverse : 主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。

flex-wrap 属性:默认情况下,项目都排在一条线上,换行否。
nowrap(默认值):不换行。
wrap: 换行,第一行在上方。
wrap-reverse:换行,第一行在下方。

flex-flow 属性:是flex-direction 和flex-wrap 的简写形式,默认值 row nowrap 。

justify-content 属性:定义了项目在主轴上的对齐方式。
flex-start(默认值): 左对齐。
flex-end:右对齐。
center:居中。
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。

align-items 属性:定义项目在交叉轴上如何对齐。
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline:项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将沾满整个容器的高度。

align-content 属性:定义了多跟轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

15、怎么让Chrome支持小于12px的文字?

p{
font-size:10px;
-webkit-transform:scale(0.8);//0.8是缩放比例
}

16、css伪类和伪元素的区别?

伪类:  :focus,:hover,:active
伪元素: :before,:after
伪类本质上是为了弥补常规css选择器的不足,以便获取到更多的信息;
伪元素本质上是创建了一个有内容的虚拟容器;

17、强制换行的css是什么?

word-break:break-all;

18、解决img图片自带边距的问题

//某些时候,图片底部的空隙可能是2px或更多。
解决办法:
定义为 vertical-align:top/bottom;
1、转化成行级块元素
display:block;
2、浮动,浮动后的元素默认可以转化为块元素
float:left;
3、给img定义 vertical-align(消除底部边距)
img{
border:0;
vertical-align:bottom;
}
4、将其父容器的font-size:0;
5、给父标签设置与图片相同的高度;

参考网址:

      https://www.itcodemonkey.com/article/2853.html

      https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 

原文地址:https://www.cnblogs.com/sunnyeve/p/12575219.html