• 003 css总结


    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)
    • 相邻兄弟元素选择器(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的不同,他并不是清除浏览器的默认样式,而是尽量将所有的浏览器的默认样式统一。

  • 相关阅读:
    MyBatis学习(三)
    MyBatis学习(二)
    Linux(Ubuntu)下MySQL的安装与配置
    IO 流读取文件时候出现乱码 文件编码格式问题 怎么转换解决方法
    spring boot下MultipartHttpServletRequest如何提高上传文件大小的默认值
    Mybatis 批量插入时得到插入的id(mysql)
    对PDF的操作
    利用nginx进行集群部署
    Spring boot学习笔记之@SpringBootApplication注解
    git的使用命令
  • 原文地址:https://www.cnblogs.com/juncaoit/p/10443776.html
Copyright © 2020-2023  润新知