前端面试题 - css


css

选择器

标签、类、ID选择器

请将html模块中字体内容是"红色"的字体颜色设置为"rgb(255, 0, 0)","绿色"设置为"rgb(0, 128, 0)","黑色"设置为"rgb(0, 0, 0)",且字体大小都为20px。


    
        
        
    
    
        
红色
绿色
黑色

伪类选择器

请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成"rgb(255, 0, 0)"。


    
        
        
    
    
        
  • 1
  • 2
  • 3
  • 4

伪元素

请给html模块的div元素加一个后伪元素,且后伪元素的宽度和高度都是20px,背景颜色为"rgb(255, 0, 0)"。


    
        
        
    
    
        

样式设置

按要求写一个圆

请将html模块的div元素设置为一个半径是50px的圆,且边框为1px的黑色实线。
要求:

  1. 圆角属性仅设置一个值
  2. 圆角属性单位请使用px
    注意:由于圆角属性设置广泛且都可以实现题目效果,所以请按照要求规范书写。

    
        
        
    
    
        

设置盒子宽高

请将html模块类为"box"的div元素宽度和高度都设置为100px,且内间距为20px、外间距为10px。


    
        
        
    
    
        

布局

浮动和清除浮动

请将类为"left"的div元素和类为"right"的div元素在同一行上向左浮动,且清除类为"wrap"的父级div元素内部的浮动。


    
        
        
    
    
        

绝对定位

请将html模块类为"btn"的div元素中心定位在类为"wrap"的父级div元素右上顶点处。


    
        
        
    
    
        
X

行内元素垂直水平居中

请将html模块中p元素的内容设置为垂直水平居中。


    
        
        
    
    
        

牛客网,是一个集笔面试系统、题库、课程教育、社群交流、招聘内推于一体的招聘类网站。

单位

请将html模块中类为"box"的div元素的宽度和高度设置为自身字体大小的4倍。


    
        
        
    
    
        

请将html模块div元素的宽度和高度设置为html根元素字体大小的4倍。
注意:只需在css模块补全样式内容,请勿修改html模块。