003 css总结

时间 2019-11-11

标签 css 总结栏目 CSS 繁體版

原文原文链接

1.题目css

有哪项方式能够对一个DOM设置它的CSS样式？
CSS都有哪些选择器？
CSS选择器的优先级是怎么样定义的？
CSS中能够经过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？
超连接访问事后hover样式就不出现的问题是什么？如何解决？
行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？
css中可让文字在垂直和水平方向上重叠的两个属性是什么？
px和em的区别。
描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不一样之处？

一：解答css3

1.有哪项方式能够对一个DOM设置它的CSS样式浏览器

　　外部样式表，引入一个外部css文件字体

　　内部样式表，将css代码放在 <head> 标签内部网站

　　内联样式，将css样式直接定义在 HTML 元素内部ui

2.CSS都有哪些选择器url

　　基本选择器spa

通配符选择器（＊）
id选择器（\#ID）
类选择器（.className）
元素选择器(E)
后代选择器（ＥＦ）
子元素选择器(E>F)
相邻兄弟元素选择器(E + F)
群组选择器（selector1,selector2,...,selectorN）

　　属性选择器.net

　　　　使用CSS3属性选择器，你能够只指定元素的某个属性，或者你还能够同时指定元素的某个属性和其对应的属性值。code

E[attr]：只使用属性名，但没有肯定任何属性值
E[attr="value"]：指定属性名，并指定了该属性的属性值
E[attr~="value"]：指定属性名，而且具备属性值，此属性值是一个词列表，而且以空格隔开，其中词列表中包含了一个value词，并且等号前面的“〜”不能不写
E[attr^="value"]：指定了属性名，而且有属性值，属性值是以value开头的；
E[attr$="value"]：指定了属性名，而且有属性值，并且属性值是以value结束的；
E[attr*="value"]：指定了属性名，而且有属性值，并且属值中包含了value；
E[attr|="value"]：指定了属性名，而且属性值是value或者以“value-”开头的值（好比说zh-cn）;

　　伪类选择器

　　　　伪类选择器的形式就是:xxx，好比:hover, :link, :nth。

3.伪类选择器

　　动态伪类

　　这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是咱们在连接中常看到的锚点伪类，如":link",":visited";另一种被称做用户行为伪类，如“:hover”,":active"和":focus"。先来看最多见的锚点伪类。

hover: 用于当用户把鼠标移动到元素上面时的效果
active: 用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动做也就完成了）
focus: 用于元素成为焦点，这个常常用在表单元素上

　　UI元素状态伪类

　　主要是针对于HTML中的Form元素操做, IE8不支持":checked",":enabled",":disabled"这三种选择器。

　　CSS3的:nth选择器

　　主要注意的是CSS3添加的nth选择器在IE8下不支持。

fist-child: 选择某个元素的第一个子元素；
last-child: 选择某个元素的最后一个子元素；
nth-child(): 选择某个元素的一个或多个特定的子元素；
其余：经常使用的就是上面三种了，其余自行了解。

4.CSS选择器的优先级是怎么样定义的

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
做为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

5.css三大特性

　　继承：即子类元素继承父类的样式;

　　优先级：是指不一样类别样式的权重比较;

　　层叠：是说当数量相同时，经过层叠(后者覆盖前者)的样式。

6.CSS中能够经过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内

　　最基本的：

　　　　设置display属性为none，或者设置visibility属性为hidden

　　技巧性：

　　　　设置宽高为0，设置透明度为0，设置z-index位置在-1000

7.超连接访问事后hover样式就不出现的问题是什么？如何解决？

　　被点击访问过的超连接样式不在具备hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

8.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

　　块级元素(block)特性：

　　　　老是独占一行，表现为另起一行开始，并且其后的元素也必须另起一行显示;

　　　　宽度(width)、高度(height)、内边距(padding)和外边距(margin)均可控制;

　　内联元素(inline)特性：

　　　　和相邻的内联元素在同一行;

　　　　宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是能够设置的），就是里面文字或图片的大小。

　　那么问题来了，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？

　　　　答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

9.css中可让文字在垂直和水平方向上重叠的两个属性是什么？

　　垂直方向：line-height
　　水平方向：letter-spacing

　　url：https://blog.csdn.net/zengyonglan/article/details/52797445

10.px与em

　　px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，而且em会继承父级元素的字体大小。

　　浏览器的默认字体高都是16px。因此未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

11.描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？你了解他们的不一样之处？

　　Reset样式的目的就是清除某些浏览器的默认样式,方便css的书写：例如：*{margin:0;padding:0;list-style:none;}

　　normalize的理念与reset的不一样，他并非清除浏览器的默认样式，而是尽可能将全部的浏览器的默认样式统一。

1. 习题总结003
2. css 属性 003
3. AngularJS1.0的使用总结笔记------003
4. 003-CSS核心属性
5. css hack总结
6. CSS总结
7. css-总结
8. CSS小总结
9. css总结
10. HTML CSS总结
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• 算法总结-双指针
• 算法总结-回溯法