1.题目

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

一：解答

1.有哪项方式可以对一个DOM设置它的CSS样式

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

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

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

2.CSS都有哪些选择器

　　基本选择器

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

　　属性选择器

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

  • 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选择器的优先级是怎么样定义的

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

      总结排序：!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的不同，他并不是清除浏览器的默认样式，而是尽量将所有的浏览器的默认样式统一。

003 css总结的更多相关文章

  1. 003 CSS汇总

    字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: obl ...

  2. HTML和CSS的精华

    今天又是周一喽,我们开始啦又一周的学习啦,想一想,在这里学习已经一个月啦,不知什么时间已经习惯啦这种生活,我应该是一个很难适应环境的人啊,但是现在在这里感觉还可以哦,可能是来到这里有自己的目标吧,所以 ...

  3. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  4. 003：CSS三大重点之一：盒子模型

    目录 1:盒子模型 2:边框: 2.1:合写 2.2:适用于:table系元素.边框合并 3:内边距 4:外边距: 4.1:盒子居中三大条件 4.2:外边距合并.外边距塌陷(父子嵌套)解决方法三种 前 ...

  5. 003.前端开发知识，前端基础CSS（2020-01-07）

    一.CSS初识 CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. ...

  6. 「HTML+CSS」--自定义按钮样式【003】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  7. 使用HTML 和CSS 开发商业站点

    第一章HTML 基础1.html 的基本结构?解析:2.HTML 全称Hyper Text Markup Language(超文本标记语言)扩展XML:Extendsible Markup Langu ...

  8. CSS标签选择器(二)

    一.CSS选择器概述 1.1.CSS功能 CSS语言具有两个基本功能:匹配和渲染 当浏览器在解析CSS样式时,首先应该确定哪些元素需要渲染,即匹配哪些HTML元素,这个操作由CSS样式中的选择器负责标 ...

  9. css 包含的图片和style="display:none"可以避免图片加载，可以节省网络流量

    从别人那儿学到一招:先记录下来: <head> <meta charset="UTF-8"> <title>Document</title ...

随机推荐

  1. [面试]死锁-最简单的死锁demo

    死锁 什么是死锁 (百度百科) 死锁是指两个或两个以上的进程在执行过程中,由于竞争资源或者由于彼此通信而造成的一种阻塞的现象,若无外力作用,它们都将无法推进下去.此时称系统处于死锁状态或系统产生了死锁 ...

  2. 作业二Wordcount

    1,github地址 https://github.com/dtneverdie/word-count 2,PSP表格 3,解题思路 先从理论上判断应该先将文件内的字符全部读入,然后根据分隔符来进行单 ...

  3. ssm多数据源配置

    1.在.properties配置文件中 添加第二个数据源信息(type2,driver2, url2,username2,pawwword2) 2.修改spring-context.xml(src/m ...

  4. 传输层--TCP和UDP的区别

    UDP(用户数据报协议):为调用它的应用程序提供了一种不可靠.无连接的服务. TCP(传输控制协议):为调用它的应用程序提供了一种可靠的.面向连接的服务. 当设计一个网络应用程序时,该应用程序的开发人 ...

  5. oracle ORA-02292: 违反完整约束条件

    我是处于工作中没用过oracle的状态,这不,记录下这个小小的问题.哈哈. 表是公司的平台组定义的.前几天为了测试程序,想删掉一些记录,然后使用delete语句,出现这个东东:oracle ORA-0 ...

  6. 2018-2019-2 网络对抗技术 20165231 Exp2 后门原理与实践

    实验内容 1.使用netcat获取主机操作Shell,cron启动 2.使用socat获取主机操作Shell, 任务计划启动 3.使用MSF meterpreter(或其他软件)生成可执行文件,利用n ...

  7. python中的多线程和多进程编程

    注意:多线程和多线程编程是不同的!!! 第一点:一个进程相当于一个要执行的程序,它会开启一个主线程,多线程的话就会再开启多个子线程:而多进程的话就是一个进程同时在多个核上进行: 第二点:多线程是一种并 ...

  8. Python 并发编程

    进程 开启进程 from multiprocessing import Process import time def task(name): print('%s is running' %name) ...

  9. Mark SDL2 Lazy Foo's Producations

    重点 初学SDL2,此处为笔记.有错误还请指出. 13)When our SDL 2 application runs, the operating system needs to be able t ...

  10. P2757 [国家集训队]等差子序列

    P2757 [国家集训队]等差子序列 题目传送门 推荐一篇好题解 此题要求我们在一个序列中找出一个等差子序列. 显然,我们只需要考虑子序列长度len=3的情况,因为在长度为4的子序列中必定有一个长度为 ...