CSS面试题（参考）
发布时间：2024-02-20 点击：121
1.介绍一下标准的css的盒子模型？低版本ie的盒子模型有什么不同
标准模型由四部分组成：
内容区域: 可以放置元素的区域如文本,图像等，一般设置宽高指的是这个内容的宽高内边距的区域：内容与边框之间的距离边框区域: 边框外边框区域：由外边框限制，用空白区域扩展边框区域，开分开相邻的元素
模型区分：
标准表型指的是设置box-sizing为content-box的盒子模型，一般width,height指的是content的宽高。ie盒模型指的是box-sizing为border-box的盒子。宽高的计算是content padding border;
专题推荐：2020年css面试题汇总（最新）
2. css选择符有哪些？那些属于可以继承？id选择器(#myid)类选择器(.myclassname)标签选择器(p,h1,p)子代选择器(ul>li)后代选择器(li a)通配符选择器(*)属性选择器(a[rel="external"])伪类选择器(a:hover,li:nth-child)
可继承的样式： font-size font-family color
不可继承的样式： border padding margin height width
3. css优先级如何计算?优先级就近原则，同权重情况下样式定义最近这位准载入样式以最后载入的定位为准
优先级为：
同权重： 内联样式(标签内部)> 嵌入样式表(当前文件中)>外部样式(外部文件中)!important >id >class >tag!important 比内联优先级高4. display有哪些值？说明他们的作用block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示none 元素不显示，并从文档流中移除inline 行内元素，默认宽度为内容宽度，不可设置宽高，同行显示inline-block 默认宽度为内容宽度，可以设置宽高，同行显示list-item 像块类型元素一样，可以设置宽高，同行显示table 此元素会作为会计表格来显示inherit 规定应该从父元素继承display属性的值5. position的值releave和absolute定位远点是？absolute 生成绝对定位元素，相对与值部位static的第一个父元素进行定位fixed 生成绝对的元素，相对于浏览器窗口进行定位relative 生成相对定位的元素，相对于其正常位置进行定位static 默认值。没有定位，元素出现在正常出现的流中inherit 规定从父元素继承position属性的值6. css有哪些特性?过渡
transition-property:width transition-duration:1s transition-timing-function:linear transition-delay:2s动画
animation:动画名称，一个周期花费时间,云顶曲线(默认ease),动画延迟(默认0),动画播放次数(默认1),是否反向播放动画(默认normal),是否暂停动画(默认running)
形状转换
transform: 使用于2d或3d转换的元素transform-origin: 装换元素的位置(围绕哪个点进行装换).默认(x,y,z);选择器
阴影
box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始的方向(默认是从里向外，设置inset就是从外往里)
边框图片
border-image: 设置图片路径 设置边框背景图的分割方式 设置或检索对象的边框厚度 设置或检索对象的边框背景图向外扩展 设置边框图片的平铺方式
边框圆角
border-radius: n1 n2 n3 n4;/* n1-n4 四个值得顺序是左上角，右上角，右下角，左下角 */反射(倒影)
box-reflect: 方向[above-上|below-下|right-右|left-左],偏移量,遮罩图片
文字换行 word-break:normal(默认使用浏览器默认的换行规则)|break-all(允许在单词内换行)|keep-all(只能在半角空格或连字符处换行)超出省略号
overflow: hidden;white-space: nowrap;text-overflow:ellipsis;多行省略号
overflow:hiden;text-overflow:ellipsis;用省略号"..."隐藏超出范围的文本display:-webkit-box; //将对象作为弹性伸缩盒子模型显示-webkit-line-clamp:2; //用来限制在一个块元素显示的文本的行数-webkit-box-orient:vertical;设置弹性盒对象的子元素的排列方式文字阴影
text-shadow: 水平阴影 垂直阴影 模糊阴影 阴影颜色
颜色
rgba(rgb颜色值，a为透明度)
渐变
线性渐变和径向渐变
filter(滤镜)
filter: 滤镜效果(透明度)
弹性布局
弹性布局就是flex布局
-栅格布局
栅格化布局。就是grid
盒模型border-box 边框和内边距包含在元素的宽高之内content-box 边框和内边距不包含在元素的宽高之内7. 请解释一下css3的flex(弹性盒布局模型)以及使用场景
一个用于页面布局的全新css3功能，flexbox可以把列表放在同一个方向(从上到下排列，从左到右)，并且列表能延伸到占用可用的空间，较为复杂的布局还可以嵌套一个伸缩容器(flex container)来实现。采用flex布局的元素，成为flex容器。常规布局是基于块和内联流方向，而flex布局是基于flex布局flex-flow流可以很方便的用来做居中，能对不同屏幕大小自适应，在布局上有了比以前更加灵活的空间
8. 经常遇到的浏览器的兼容性问题有哪些，原因，解决方法是什么png24位的图片在ie6浏览器上出现背景。解决方案是做成png8浏览器默认的margin和padding不同。解决方案是假一个全局的*{margin:0;padding:0}来统一ie6双边距bug；矿属性变迁float后，又有横向的margin情况下，在ie6显示margin比设置的大。解决方案是在float的标签控制中加入display:inline；将其妆花为行内渐进识别的方式，从总体中逐步排除局部。设置较小高度标签(一般小于10px)，在ie6，ie7中高度超出自己设置高度。解决方法:给超出高度的标签设置overflow:hidden;或者设置行高line-hieght小于你设置的高度chrome中文界面默认或将小于12px的文本强制按照12px的文本强制按照12px显示，可通过加入css属性 -webkit-text-size-adjust:none 解决
移动端
1px边框问题。解决方案采用微元素模拟的方式
.scale{ position: relative; border:none; }.scale:after{ content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaley(0.5); transform: scaley(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0;}点透问题，在安卓某些版本触发两次点击问题。解决方案：引入fastclick处理点透问题安卓部分版本input里的placeholder位置偏上。解决方案：把input的line-height设为normalios的body位置overflow：hidden后仍然可以滚动。解决方案：一般在所有元素最外层再包一大盒子.wrapper
.wrapper{ position:relative; overflow:hidden; }ios滚动卡顿。解决方案：在滚动的容器上加上webkit-over-flow-scrolling:touch;9. 请解释一下为什么需要清浮动？清浮动的方式
清浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使页面后面的布局不能正常显示
父级p定义height在浮动元素后面添加class为clear的空p元素，给这个p设置样式.clear{clear:both}给父容器添加overflow:hidden或者auto样式给父容器添加clearfix的class，用伪类clearfix:after；来这个样式。清除浮动
.clearfix{ zoom:1;}.clear:after{ content:'.'; height:0; clear:both; display:block; visibility:hidden;}10. margin和padding分别适合
如何判定外贸网站平台搭建是否优秀
使用小程序的外卖组件一直提示无法与其他组件存在同一页面
进行cn域名信息查询的方法介绍
xbox商店一直转圈怎么回事_xbox商店一直转圈的处理方法
大型网站运营具体方法
厦门高端网站定制好吗？定制网站和模板网站有哪些区别
查看域名解析和空间绑定都没有问题
与大象共舞，云之家的3大绝招
标准模型由四部分组成：
内容区域: 可以放置元素的区域如文本,图像等，一般设置宽高指的是这个内容的宽高内边距的区域：内容与边框之间的距离边框区域: 边框外边框区域：由外边框限制，用空白区域扩展边框区域，开分开相邻的元素
模型区分：
标准表型指的是设置box-sizing为content-box的盒子模型，一般width,height指的是content的宽高。ie盒模型指的是box-sizing为border-box的盒子。宽高的计算是content padding border;
专题推荐：2020年css面试题汇总（最新）
2. css选择符有哪些？那些属于可以继承？id选择器(#myid)类选择器(.myclassname)标签选择器(p,h1,p)子代选择器(ul>li)后代选择器(li a)通配符选择器(*)属性选择器(a[rel="external"])伪类选择器(a:hover,li:nth-child)
可继承的样式： font-size font-family color
不可继承的样式： border padding margin height width
3. css优先级如何计算?优先级就近原则，同权重情况下样式定义最近这位准载入样式以最后载入的定位为准
优先级为：
同权重： 内联样式(标签内部)> 嵌入样式表(当前文件中)>外部样式(外部文件中)!important >id >class >tag!important 比内联优先级高4. display有哪些值？说明他们的作用block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示none 元素不显示，并从文档流中移除inline 行内元素，默认宽度为内容宽度，不可设置宽高，同行显示inline-block 默认宽度为内容宽度，可以设置宽高，同行显示list-item 像块类型元素一样，可以设置宽高，同行显示table 此元素会作为会计表格来显示inherit 规定应该从父元素继承display属性的值5. position的值releave和absolute定位远点是？absolute 生成绝对定位元素，相对与值部位static的第一个父元素进行定位fixed 生成绝对的元素，相对于浏览器窗口进行定位relative 生成相对定位的元素，相对于其正常位置进行定位static 默认值。没有定位，元素出现在正常出现的流中inherit 规定从父元素继承position属性的值6. css有哪些特性?过渡
transition-property:width transition-duration:1s transition-timing-function:linear transition-delay:2s动画
animation:动画名称，一个周期花费时间,云顶曲线(默认ease),动画延迟(默认0),动画播放次数(默认1),是否反向播放动画(默认normal),是否暂停动画(默认running)
形状转换
transform: 使用于2d或3d转换的元素transform-origin: 装换元素的位置(围绕哪个点进行装换).默认(x,y,z);选择器
阴影
box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始的方向(默认是从里向外，设置inset就是从外往里)
边框图片
border-image: 设置图片路径 设置边框背景图的分割方式 设置或检索对象的边框厚度 设置或检索对象的边框背景图向外扩展 设置边框图片的平铺方式
边框圆角
border-radius: n1 n2 n3 n4;/* n1-n4 四个值得顺序是左上角，右上角，右下角，左下角 */反射(倒影)
box-reflect: 方向[above-上|below-下|right-右|left-左],偏移量,遮罩图片
文字换行 word-break:normal(默认使用浏览器默认的换行规则)|break-all(允许在单词内换行)|keep-all(只能在半角空格或连字符处换行)超出省略号
overflow: hidden;white-space: nowrap;text-overflow:ellipsis;多行省略号
overflow:hiden;text-overflow:ellipsis;用省略号"..."隐藏超出范围的文本display:-webkit-box; //将对象作为弹性伸缩盒子模型显示-webkit-line-clamp:2; //用来限制在一个块元素显示的文本的行数-webkit-box-orient:vertical;设置弹性盒对象的子元素的排列方式文字阴影
text-shadow: 水平阴影 垂直阴影 模糊阴影 阴影颜色
颜色
rgba(rgb颜色值，a为透明度)
渐变
线性渐变和径向渐变
filter(滤镜)
filter: 滤镜效果(透明度)
弹性布局
弹性布局就是flex布局
-栅格布局
栅格化布局。就是grid
盒模型border-box 边框和内边距包含在元素的宽高之内content-box 边框和内边距不包含在元素的宽高之内7. 请解释一下css3的flex(弹性盒布局模型)以及使用场景
一个用于页面布局的全新css3功能，flexbox可以把列表放在同一个方向(从上到下排列，从左到右)，并且列表能延伸到占用可用的空间，较为复杂的布局还可以嵌套一个伸缩容器(flex container)来实现。采用flex布局的元素，成为flex容器。常规布局是基于块和内联流方向，而flex布局是基于flex布局flex-flow流可以很方便的用来做居中，能对不同屏幕大小自适应，在布局上有了比以前更加灵活的空间
8. 经常遇到的浏览器的兼容性问题有哪些，原因，解决方法是什么png24位的图片在ie6浏览器上出现背景。解决方案是做成png8浏览器默认的margin和padding不同。解决方案是假一个全局的*{margin:0;padding:0}来统一ie6双边距bug；矿属性变迁float后，又有横向的margin情况下，在ie6显示margin比设置的大。解决方案是在float的标签控制中加入display:inline；将其妆花为行内渐进识别的方式，从总体中逐步排除局部。设置较小高度标签(一般小于10px)，在ie6，ie7中高度超出自己设置高度。解决方法:给超出高度的标签设置overflow:hidden;或者设置行高line-hieght小于你设置的高度chrome中文界面默认或将小于12px的文本强制按照12px的文本强制按照12px显示，可通过加入css属性 -webkit-text-size-adjust:none 解决
移动端
1px边框问题。解决方案采用微元素模拟的方式
.scale{ position: relative; border:none; }.scale:after{ content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaley(0.5); transform: scaley(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0;}点透问题，在安卓某些版本触发两次点击问题。解决方案：引入fastclick处理点透问题安卓部分版本input里的placeholder位置偏上。解决方案：把input的line-height设为normalios的body位置overflow：hidden后仍然可以滚动。解决方案：一般在所有元素最外层再包一大盒子.wrapper
.wrapper{ position:relative; overflow:hidden; }ios滚动卡顿。解决方案：在滚动的容器上加上webkit-over-flow-scrolling:touch;9. 请解释一下为什么需要清浮动？清浮动的方式
清浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使页面后面的布局不能正常显示
父级p定义height在浮动元素后面添加class为clear的空p元素，给这个p设置样式.clear{clear:both}给父容器添加overflow:hidden或者auto样式给父容器添加clearfix的class，用伪类clearfix:after；来这个样式。清除浮动
.clearfix{ zoom:1;}.clear:after{ content:'.'; height:0; clear:both; display:block; visibility:hidden;}10. margin和padding分别适合
如何判定外贸网站平台搭建是否优秀
使用小程序的外卖组件一直提示无法与其他组件存在同一页面
进行cn域名信息查询的方法介绍
xbox商店一直转圈怎么回事_xbox商店一直转圈的处理方法
大型网站运营具体方法
厦门高端网站定制好吗？定制网站和模板网站有哪些区别
查看域名解析和空间绑定都没有问题
与大象共舞，云之家的3大绝招