1 .介绍标准css的盒子模型吗? 和低版本IE的盒子模型有什么不同?
a (标准箱类型)宽度=内容宽度边框填充边距
低版本IE框模型:宽度=“内容宽度”边距
2 .盒大小属性?
a )用于控制元素的盒模型分析模式。 默认值为content-box
在content-box:W3C的标准长方体模型中,配置元素的height/width属性指向content部分的高度/宽度
border-box:IE的传统盒子型号。 通过设置元素的height/width属性,可以看到border padding content部分的高度/宽度
3.css选择器有什么? 能继承的是什么?
a ) id选择器、类选择器、标签选择器、相邻选择器、子选择器、后代选择器、通配符选择器、属性选择器、伪类选择器
可继承属性: font-size、font-family和color
4.css3中新添加的伪类是什么?
p :第一个类型选择属于父元素的第一个元素
p :最后一个类型选择属于父元素的最后一个元素
p :仅限类型选择属于父元素的唯一元素
p:only-child选择属于父元素的唯一子元素
选择属于p:nth-child(2)父项的第二子项
:已启用:禁用表单控件处于禁用状态。
已选中:checked单复选框或复选框。
5 .显示有什么值? 说那些作用吗?
a (在线)默认值(在线) ) ) ) ) )。
none :隐藏
块:块显示
table :显示表格
列表-项目:项目列表
在线块
6 .位置值
a (静态) )默认)按常规文档流排列
relative ()相对对齐)参照文档的静态位置,使用top、bottom、left、right对齐文档
absolute ()绝对位置)参考最近的非静态父元素通过top、bottom、left、right定位
固定: (固定定位)固定的参照处为可视窗口
7.CSS3的新功能是什么?
RGBA和透明度背景-图像背景-原始(内容盒/填充盒/边框-盒)背景-大小背景-重复垂直阴影、模糊距离和阴影(font-face属性)定义自己的字体圆角(边界半径)。 border-radius属性用于创建圆角的边框照片。 边框图像: URL (border.png ) 30 30 round盒影) box-shadow3360
答:由于浏览器兼容性问题,某些选项卡的默认值因浏览器而异,如果不初始化CSS,浏览器之间的页面显示通常会有差异。
9.display:none和visibility:hidden有什么区别?
a ) display:none不会显示相应的元素,也不会为文档布局分配空间(回流重绘) )。
visibility :隐藏对应的元素,并在文档布局中保留原始空间(重绘)
10 .如何优化CSS、提高性能?
答案:
避免过多的约束避免后代选择器避免链选择器避免实用紧凑的语法不必要的空间命名避免不必要的重复最好使用表示意义的名字。 好的类名应该是说明什么,而不是回避什么。 important,您可以选择其他选择器来尽可能简化规则。 可以组合不同类的重复规则11。 元素的垂直百分比设置是相对于容器的高度吗?
答案:
如果将元素的宽度设置为百分比,则计算的是父容器的宽度,但有关表示垂直距离的属性,如填充-顶、填充-底、边距-顶、边距-底
12 .全屏滚动的原理是什么? 您使用了CSS的哪个属性?
答: 原理:有点类似于轮播,整体的元素一直排列下去,假设有5个需要展示的全屏页面,那么高度是500%,只是展示100%,剩下的可以通过transform进行y轴定位,也可以通过margin-top实现overflow:hidden;transition:all 1000ms ease;13.什么是响应式设计?响应式设计的基本原理是什么?
答:
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
14.视差滚动效果?
答:视差滚动(Parallax Scrolling)通过在网页向下滚动的时候,控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果
CSS3实现
优点:开发时间短、性能和开发效率比较好,缺点是不能兼容到低版本的浏览器
jQuery实现
通过控制不同层滚动速度,计算每一层的时间,控制滚动效果。
优点:能兼容到各个版本的,效果可控性好
缺点:开发起来对制作者要求高
插件实现方式
例如:parallax-scrolling,兼容性十分好
15.你对line-height是如何理解的?
答:
行高是指一行文字的高度,具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height,没有定义height属性,最终其表现作用一定是line-height。
单行文本垂直居中:把line-height值设置为height一样大小的值可以实现单行文字的垂直居中,其实也可以把height删除。
多行文本垂直居中:需要设置display属性为inline-block。
16.display:line-block什么时候会显示间隙?
答:有空格的时候会有间隙 解决:移除空格
margin正值的时候 解决:margin使用负值
使用font-size时候 解决:font-size:()、letter-spacing、word-spacing
17.png、jpg、gif这些图片格式解释一下,分别用在什么时候用?有没有了解webp?
答:png是便携式网络图片,是一种无损数据压缩位图文件格式。优点:压缩比好、色彩好。大多数地方可以用。
jpg是一种针对相片使用的一种失真压缩方法,是一种破坏性的压缩,在色调及颜色平滑变化做的不错。在www上,被用来储存和传输照片的格式。
gif是一种位图文件格式,以8位色彩重现真色彩的图像。可以实现动画效果
webp格式是谷歌在2010年推出的图片格式,压缩率只有jpg的2/3,大小比png小了45%。缺点是压缩的时间太长了,且兼容性不好,目前谷歌和opera支持。
18.style标签写在body后与body前有什么区别?
答:页面加载自上而下 当然先加载样式
写在body标签后由于浏览器以逐行方式对HTML文档进行解析,当解析到写在结尾的样式表会导致浏览器停止之前的渲染,等待加载且解析样式表完成之后重新渲染,在windows的IE下可能会出现FOUC现象(即样式失效导致的页面闪烁问题)