web前端篇:css练习题

1.div和span标签在网页中的作用?

div将网站分割成独立的逻辑区域division分割 span:小区域标签,在不影响文本正常显示的情况下,单独设置对应的样式。 <style> span.active{ font-weight:bold; } </style> <p> <span>内容</span> </p> 

2.CSS基础选择器和高级选择器有哪些?

- 基础选择器 - 类选择器 - 标签选择器 - id选择器 - 高级选择器 - 后代选择器 - 子代选择器 - 组合选择器 - 交集选择器 - 伪装选择器 (link visited hover active) - 伪元素选择器 

3.盒子模型的属性有哪些?并说明属性的含义,画出盒子模型图?

- width:内容宽度 - height:内容的高度 - border:边框 - padding:内边距 - margin:外边距 

4.如何让文本垂直和水平居中?

<style> div{ width:200px; height:60px; text-align:center; line-height:60px; } </style> <div> wusir </div> 让行高等于盒模型的高度实现垂直居中 使用text-align:center;实现文本水平居中 

5.如何清除a标签的下划线?

text-decoration:none; none:无线,underline:下划线,overline:上划线,line-through:删除线. 

6.如何重置网页样式?

html,body,p,ul,ol{ margin: 0; padding: 0; } /*通配符选择器 */ *{ margin: 0; padding: 0; } a{ text-decoration: none; } input,textarea{ border: none; outline: none; } 

7.如何清除input和textarea标签的默认边框和外线?

border:0; outline:0; 

8.在css中哪些属性是可以继承下来的?

1.字体系列属性: font-family:字体系列 font-weight:字体的粗细 font-size:字体的大小 fnot-style:字体的风格 2.文本系列属性 text-indent:文本缩进 text-align:文本水平对齐 line-height:行高 word-spacing:单词之间的间距 letter-spacing:中文或者字母之间的间距 text-transform:控制文本大小 color:文本颜色 3.元素可见性 visibility:控制元素显示隐藏 4.列表布局属性 list-style列表风格,包括list-style-type,list-style-image 5.光标属性: cursor:光标显示为何种形态 color,text-xxx,font-xxx,line-height,letter-spacing,word-spacing 

9.如何正确比较css中的权重?

如果选中了标签 数选择器的数量 id class 标签 谁大优先级越高 如果一样大,后面优先级越大 如果没有选中标签,当前属性是被继承下来,他们的权重为0,与选中的标签没有可比性 都是继承来的,谁描述的近,就显示谁的属性(就近(选中的标签越近)原则),如果描述的一样近,继续数选择器的数量。 !important 它设置当前属性的权重为无限大,大不过行内样式的优先级 

10.块级标签和行内标签?

块级标签: 1.可以设置高度,如果不设置宽度,默认是父标签的100%的宽度 2.独占一行 p div ul ol li h1~h6 table tr form 行内标签: 1.不可以设置宽高 2.在一行内显示 a span b strong em i 行内块标签 1.可以设置宽高 2.在一行内显示 input img 


最后,给大家推荐一个前端学习进阶内推交流群685910553(前端资料分享),不管你在地球哪个方位,
不管你参加工作几年都欢迎你的入驻!(群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档!)

如果您对这个文章有任何异议,那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思,那么请分享并转发,或者也可以关注一下表示您对我们文章的认可与鼓励。