前端面试经常问的问题

今天被问到了CSS选择器,顺便整理下这关于CSS方面的常见问题。

  1. 常见CSS选择器  
  • 通用选择器  *
  • 标签选择器  p  div
  • 类选择器  .class
  • ID选择器  #id

     2.组合选择器

  • 多元素选择器  E,F(逗号隔开,给每个选择器添加属性)
  • 后代选择器   E F (中间用空格隔开,表示E下F)
  • 子元素选择器 E>F  (选择E下的子元素F,与后代选择器不同,后代为所有后代)
  • 相邻选择器  E+F (E的相邻同级元素,注意是同级)

       3.  CSS  2 中常见的选择器

  • E[att]  匹配具有att 属性的E元素   E可以省略  p[tit  le] { color:#f00; }
  • E[att=val]   div[class=”error”] { color:#f00; }
  • E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
  • 伪类  :hover  :visted :foucs :link(所有未被点击) :active(鼠标点下未释放)
      E: first-child       E:before 在E元素之前插入生成的内容   E:after 在E元素之后插入生成的内容

     4. CSS3 选择器

  • E[att^=”val”]  属性att的值以”val”开头的元素
  • E[att$=”val”]  属性att的值以”val”结尾的元素
  • E[att*=”val”]  属性att的值包含”val”字符串的元素
  • E:enabled 匹配激活元素
  • E:disabled 匹配表单中禁用的元素
  • E:checked 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素

  • E::selection 匹配用户当前选中的元素  

    input[type="text"]:disabled { background:#ddd;}

  • 其他一些选择器  

    E:nth-child(n) ·······

然后呢,下面就是块元素和行内元素了

div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子;

DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL

像“span”这样的行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。

SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR

还有display  属性  :

block:块内元素

inline:行内元素

none:不显示

inline-block:行内块元素

谈到了display  属性  就不得不提position  属性了

static :静态定位  没什么好说的   默认的

relative:相对定位   他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。

absoluate:绝对定位   默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位

fixed:固定定位

原文地址:https://www.cnblogs.com/liuestc/p/4448322.html