web前端HTML5和CSS3常见面试题及相关基础知识(1)

1,HTML5新增了哪些元素?

布局元素:header,section,footer,article,aside

表单元素:datalist,

input:type='week|date|time|datetime|number|search|url|tel|color|email|range'

多媒体标签:audio,video

其他标签:progress(进度条),meter

2,行内元素和块级元素的区别是什么?

块级元素独占一行页面控件,不会和其他元素共享一行页面空间,标签如div,p,h1到h6,section,header,footer

行内元素可以和行内,行内块共享一行页面空间,标签如span,em,i,strong,b,a

3,行内元素的padding和margin可以设置吗?

行内元素水平方向的padding和margin有效,但是垂直方向无效。

4,readyonly和disabled的区别?

readyonly设置表单元素状态为只读状态,disabled设置表单元素状态为禁用状态。

5,哪些标签都有伪元素?JS能操作伪元素吗?

大部分双标签都有伪元素,iframe没有伪元素;大部分单标签都没有伪元素,但是img有伪元素。JS不能操作伪元素。

6,px em rem的区别是什么?

px是绝对单位,em和rem是相对单位,em参考的是当前元素的字体大小,rem参考的是当前根元素html的字体大小。

7,css新增伪类有哪些?

p:first-of-type 选择其父元素的首个<p>标签

p:last-of-type 选择其父元素的最后一个<p>标签

p:nth-child(2) 选择其父元素的第二个p标签

p:nth-type-of(2) 选择其父元素的第二个子元素p

:enabled :disabled 控制表单控件的禁用状态

:checked 单选框和复选框的选中状态

8,谈谈css选择器优先级和判定标准?

优先级从高到低:id选择器,类选择器(属性选择器),标签选择器,通配符选择器。

行内样式使用!important优先级最高;如果两个选择器(属性完全一样)同时命中一个元素,并且权重一样,则书写顺序会影响优先级,后一个选择器的属性会覆盖前一个选择器的属性。

9,position几个属性的作用?

position的常见四个属性:relative,absolute,fixed,static,一般配合left,right,top,bottom。

static:默认属性,一般不常用。

relative:偏移都以自身的位置为基准位移。

absolute:偏移都有包含它的元素为指定坐标。

fixed:位置设定为fixed的元素,可定位于相对浏览器窗口的指定坐标,无论窗口滚动与否,它都会留在那个位置。

10,position中设置absolute和fixed有什么区别?

absolute绝对定位,绝对定位的参考有明确的父元素,如果直接父元素没有明确定位会一直往上找,如果父元素都没有则会参考body标签。简称“子绝父相”。

fixed是固定定位,参考的是浏览器。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 12,048评论 2 19
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 7,378评论 0 7
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 6,572评论 0 8
  • 前端面试集锦(转载) 转载地址:前端开发面试题 以下皆为转载 前端开发知识点: 作为一名前端工程师,无论工作年头长...
    cuikangjie阅读 3,218评论 0 2
  • 所有题目答案整理自网络,如有错误,接受指正,拒绝批评! 关于html5 HTML5的十大新特性 语义化标签使得页面...
    黄金原野阅读 5,319评论 0 0