面试笔记(1.HTML.CSS)

Mumusen
178 阅读5分钟

主要用于笔记整理，如有错误欢迎纠正，会持续更新

  • Doctype位于HTML文档第一行，告知浏览器的解析器用什么文档标准解析这个文档

  • 每个元素都有display属性，都有默认的display值，如： div display:block 块级元素 span display:inline 行内元素 1)行内元素: a b span img input select strong 2)块级元素: div ul ol li dl dt dd h1…..p 3)空元素: br hr img input link meta

  • link:属于XHTMLB标签，除了加载CSS，还能定义RSS，定义rel连接属性等作用； @impot:是CSS提供，只能用于加载css 不同：页面加载link会同事被加载，而@import引用的css会等到页面被加载完再加载

  • 浏览器常见内核 主要分为： 渲染引擎(layout engineer 或 rendering engine) 和JS引擎 Trident 内核:IE 系列 Gecko 内核:Firefox Webkit 内核:Safari Blink 内核:是基于 Webkit 内核的子项目,使用的浏览器有: Chrome_opera 等除 IE、Firefox、Safari 之外的几乎所有浏览器 几乎所有国产双内核浏览器(Trident_Blink)如 360、猎豹、qq、百度等

  • HTML语义化 便于对浏览器、搜索引擎解析，搜索引擎的爬虫也依赖于HTML编辑来确定上下文和各个关键字的权重，利于SEO；也便于阅读源码

  • label定义表单控制键的关系，浏览器会自动将焦点转到标签相关的表单控件

  • 网页验证码区分计算机还是人的公共全自动程序。防止恶意破解密码、刷票、灌水等；有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断登陆尝试

  • CSS盒子模型

  1. IE盒子模型、w3c盒子模型
  2. 盒子模型：内容(content) 、填充(padding)、边界(margin)、边框(border)
  3. 区别：IE的content 部分把border和padding计算进去

  • 那些属性可以继承 可继承: font-size font-family color ul li dl dd dt 不可继承: border padding margin width height

  • CSS优先级算法

  1. 优先级就近原则，同权重情况下样式定义最近者为准
  2. 引入样式以最后引入的定位为准
  3. 同权重: 内联样式表(变迁内部) > 嵌入样式表(当前文件中) > 外部样式表(外部文件中) !importat > id > class > tag (!important 权重最高)
  • 居中div
  1. 水平居中 margin
  2. 绝对定位 position:absolute
  3. 水平垂直居中 position:relative 、 absolute+transform
  4. flex 布局 需要考虑使用场景

  • display list-item 像块类型元素一样显示，并添加样式列表标记 table 此元素会作为块级表格来显示 inherit 规定应该从父元素继承 display 属性的值

  • BFC(块级格式化上下文: block formatting context)

  • 清除浮动是伪了清除使用浮动元素产生的影响，浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示 height、父级div浮动

  • zoom 属性是IED浏览器的专有属性，他可以设置活检索对象的缩放比例，解决IE下比较奇葩的bug：外边距重叠，浮动清除，出发ie的haslayout属性 当设置zoom的值之后，所设置的元素就会火大或者缩小高度宽度就会重新计算，一旦改变zoom值就会重新渲染，运用这个原理，也就解决了ie下的元素浮动时候父元素不随着自动扩大的问题。 zoom已经逐步彼岸准话，出现在css3.0规范草案中，也可以通过css3动画属性scale进行缩放

  • 如何让Chrome支持小于12px

  1. 图片
  2. -webkit-text-size-adjust:none 最大兼容考虑

  • display:inline-block 会显示间隙 移除空格、使用 margin 负值、使用 font-size:0、letter-spacing、word-spacing

  • 使DOM元素不显示再浏览器可视范围 display:none\visibility\hidden 宽高、透明度为0；z-index:-1000

  • HTML5 新特性、移除那些元素

  1. 拖拽释放 drag adn drop api
  2. 语义化更好的内容标签 header\nav\footer\aside\article\section
  3. 音频、视频 audio、video
  4. 画布 canvas
  5. 地理 geolocation
  6. 本地离线存储 localstorage 长期存储数据，浏览器关闭后数据不丢失
  7. sessionStorage 数据会再浏览器关闭后自动删除
  8. 表单控件 calendar、date、time、email、url、search
  9. 新技术 webworker\websocket\geolocation 移除元素 纯表现元素: basefont、big、center、font、s、strike、tt、u 对可用性产生负影响的元素:frame、frameset、noframes

  • iframe会阻塞主页面onload事件 搜索引擎的检索程序无法解读这种页面，不利于SEO iframe和主页面共享连接池，儿浏览器对相同域的链接有限制，所以会影响页面并行加载 如果需要使用iframe，最好通过JavaScript，动态给iframe添加src属性值，这样可以绕开以上存在的两个问题

  • 实现标签之间的通过信 webSocket、SharedWorker、localstorge、cookies 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常;

  • CSS3 有哪些新特性?新增各种 CSS 选择器 (: not(.input):所有 class 不是“input”的节点) 圆角 (border-radius:8px) 多列布局 (multi-column layout) 阴影和反射 (Shadow\Reflect) 文字特效 (text-shadow、) 文字渲染 (Text-decoration) 线性渐变 (gradient) 旋转 (transform) 缩放,定位,倾斜,动画,多背景 例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

avatar
文章
阅读
粉丝