通过在牛客网答题总结的前端考题(一)HTML+CSS

时间:2022-10-10 20:29:05

HTML&CSS

1. 选择器的优先级:

  • 在属性后使用!important
  • 作为style属性下载元素的内联样式:权重1000
  • id选择器:权重100
  • 类选择器、伪类、属性选择器:10
  • 通配符选择器:无权重
2. disabled指当input元素加载时禁用此元素,input内容不变。readonly规定输入字段为只读,input内容会随表单提交。
3. bootatrap屏幕大小界定:
超小屏 小屏 中屏 大屏
<768px >=768px >=992px >=1200px
.col-xs- .col-sm- .col-md- .col-lg-
4. 块级元素:
特点:
  • 每个块级元素都从新的一行开始,并且其后的元素另起一行
  • 元素的高度、宽度、行高以及顶和底边距都可设置
  • 元素的宽度在不设置的情况下,是它本身父容器的100%
  • <div>, <p>, <hx>, <ol>, <ul>, <dl>, <table>, <address>, <blockquote>, <form>
内联元素特点:float会将其转化为块级元素
  • 和其他元素在一行上
  • 元素的高度、宽度及顶部和边距不可设置
  • 元素的宽度就是它包含的文字或图片的高度,不可改变
  • 常见内联元素:<a>, <b>, <span>, <i>, <em>, <strong>, <var>, <cite> <code>
内联块状元素:
  • 和其他元素在一行
  • 元素的高、宽、行高、底边距可设置
  • <img>, <input>, <label>, <button>
5. 超链接CSS排列顺序
a:link{}    a:visited{}   a:hover{}    a:active{}
6. 浏览器内核引擎
  • Trident:IE
  • Gecko: Firefox
  • Webkit:Safari, Google, Chrome,遨游3,猎豹,Opera
  • Presto: Opera mini
7. 主流浏览器私有属性前缀:
  • mozilla:-moz
  • webkit:-webkit
  • opera:-o
  • trident:-ms
8. 样式属性的继承:
  • 不可继承:display, margin, border, padding, background, height, min-height, max-height, width, min-width, max-width, overflow, position, left, right, top, bottom, z-index, float, clear, table-layout, vertical-align, page-break-after, page-bread-before, unicode-bidi
  • 所有元素可继承:visibility, cursor
  • 内联元素可继承:letter-spacing, word-spacing, white-space, line-height, color, font, font-family, font-size, font-style, font-variant, font-weight, text-decoration, text-transform, direction
  • 块状可继承:text-indent, text-align
  • 列表可继承:list-style, list-style-type, list-style-position, list-style-image
  • 表格元素可继承:border-collapse
9. 浏览器端存储技术:
  • cookie:随着每次HTTP请求头信息一起发送,增加网络流量,能存储数据容量有限。
  • userData:IE浏览器下存储数据
  • sessionStorage:FF浏览器,仅限窗口级别,IE不支持
  • localStorage:web storage互联网存储规范中的一部分。
10. 盒子模型组成部分:margin、padding、border、content
  • IE:content包含border、padding, (宽度包括border、padding)
  • W3C:content不包括其他部分
11. iframe的使用场景:
  • 典型系统结构,左边功能树,右侧常见的table或表单等,为单独功能,单独分离出来
  • ajax上传文件
  • 加载别的网站内容、流量分析
  • 在上传图片时,不用flash实现无刷新
  • 跨域访问可以用到iframe,使用iframe请求不同域名下的资源
12. 清除浮动的几种方法及优缺点:
  • 使用空标签清除浮动,clear: both;能清楚任意标签,增加无意义标签
  • 使用overflow:auto;空标签元素清除浮动而不得不增加无意义代码的弊端,使用zoom:1,用于兼容
  • 使用伪元素清除浮动(非IE)