1.Opacity和grba的区别
是 opacity 会继承父元素的 opacity 属性,而 rgba 设置元素的后代元素不会继承不透明属性
2.Display:none和visibilty区别
display: none会产生回流和重绘,visibility:hidden;和opacity:0;只会引起页面重绘
回流一定会触发重绘,而重绘不一定会回流
visibility具有继承性,给父元素设置visibility:hidden;,子元素也会继承这个属性。但是如果重新给子元素设置visibility:visible,则子元素又会显示出来。这个和display: none有着质的区别
opacity也有继承性,但是父元素隐藏后,给子元素设opacity:1;,子元素也不会显示
opacity:0;隐藏后的元素可以点击
3.有几种定位,或者定位有几种值
正常定位,相对定位,绝对定位,fixed固定定位,sticky粘性定位,
4.不同的定位参照的父级是谁
正常定位,相对定位,绝对定位,fixed固定定位,sticky粘性定位,
自己,自己,祖父元素,浏览器窗口,相对,固定结合。
5. 说一下有你知道的c3的样式
选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面
css3新特性 - jsxpang - 博客园 (cnblogs.com)
6.为什么要用字体图标
设计不用再切图了,更不需要针对不同场景切出大小、颜色、格式等不同的图片,只需维护一个图标项目库即可。
开发者也不用引用大量图片,也不需要在js中根据不同场景切换不同图片,仅class名就可搞定,修改灵活。尤其在node开发中,节省大量代码,提高可维护性。
字体图标缩放不失真,不会变模糊。
减少网络请求次数,一个css文件可包含所有图标。
节约流量,图标是图片格式,每个几K到几十K,而css文件一般一共只有几K。
7.什么是精灵图,如何使用,有什么好处
服务器:1.利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSSSprites最大的优点,也是其被广泛传播和应用的主要原因;
浏览器:2.CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
设计师:3.解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
程序员:4.更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。
8.两列布局如何实现,或者三列布局如何实现
两列布局
1.左边定宽浮动,右边自适应
2.flex布局设置
三列布局
1.两边左右浮动,中间结合margin:0 auto;
2.两边定宽,中间自适应---子元素都左浮动float:left;
3.行内块级显示--给每一块元素设置为行内块级元素
4.父元素:display:flex,子元素全部flex:1;为flex:1,1,0%。自适应
5.父元素flex布局+左右定宽+中间元素flex:1;
6.绝对定位实现
9.品字形布局如何实现
上口用块级元素的margin
下两口用text-aligin:center;
10.display有哪些值?说明他们的作用
inline(默认值):表示指定对象为内联元素
none: 表示隐藏对象,与visibility属性的hidden值不同,display:none不为被隐藏的对象保留物理空间 ,然visibility:hidden就保留
block: 指定对象为块元素。
list-item:指定对象为列表项目。
inline-block:指定对象为内联块元素。(这是CSS2中的属性)
table: 指定对象作为块元素级的表格。类同于html标签table(CSS2)
inline-table:指定对象作为内联元素级的表格。类同于html标签table(CSS2)
table-caption:指定对象作为表格标题。类同于html标签caption(CSS2)
table-cell:指定对象作为表格单元格。类同于html标签td(CSS2)
table-row:指定对象作为表格行。类同于html标签tr(CSS2)
table-row-group:指定对象作为表格行组。类同于html标签tbody(CSS2)
table-column:指定对象作为表格列。类同于html标签col(CSS2)
table-column-group:指定对象作为表格列组显示。类同于html标签colgroup(CSS2)
table-header-group:指定对象作为表格标题组。类同于html标签thead(CSS2)
table-footer-group:指定对象作为表格脚注组。类同于html标签tfoot(CSS2)
run-in: 根据上下文决定对象是内联对象还是块级对象。(CSS3)
box: 将对象作为弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)
inline-box:将对象作为内联块级弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)
flexbox: 将对象作为弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)
inline-flexbox:将对象作为内联块级弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)
flex: 将对象作为弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)
inline-flex:将对象作为内联块级弹性伸缩盒显示。(伸缩盒的最老版本中属性)(CSS3)
11.li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
浏览器的默认行为是把inline元素间的空白字符(空格换行tab)渲染成一个空格,也就是我们上面的代码
1既然是因为
2将
- 内的字符尺寸直接设为0
3将间隔消除了,li内的字符间隔也被设置,所以再设置一下。
.wrapul{letter-spacing: -5px;} .
wrap ulli{letter-spacing: normal;}
12.CSS选择符有哪些?哪些属性可以继承?
13.CSS优先级算法如何计算?
答案链接:
CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? - 麋鹿鲁哟 - 博客园(cnblogs.com)
14.CSS3新增伪类有那些?
答案链接:
(34条消息) [CSS]CSS3有哪些新增的伪类_DaftJayee的博客-CSDN博客_css3 新特性和伪类有哪些?
15.页面导入样式时,使用link和@import有什么区别?
答案链接:
页面导入样式时,使用link和@import有什么区别? - 腾讯云开发者社区-腾讯云(tencent.com)
16.title与h1的区别、b与strong的区别、i与em的区别?
答案链接:
(34条消息) title与h1的区别、b与strong的区别、i与em的区别?_前端_小明的博客-CSDN博客
17.Label的作用是什么?是怎么用的?
鼠标用户改进了可用性
如用户:123123213;点击用户可以输入,不用点输入框
<label for='Name'>Number:</label>
<input type=“ text “ name='Name' id='Name'/>
label 的 for 属性值要与后面对应的 input 标签 id 属性值相同
18. Img中alt和title的区别
alt只能是元素的属性,而title即可以是元素的属性也可以是标签
alt替换图片,tittle解释图片,alt还能搜索引擎优化,因为alt可以提供文字信息。
19. Px,Em ,2REM,%都有什么区别,相对的都是什么
css中字体常用单位px、em、rem和%的区别及用法总结 -vickylinj - 博客园 (cnblogs.com)
版权归原作者 no more better 所有, 如有侵权,请联系我们删除。