许小墨のBlog

CSS3 新增什么是 CSS3CSS3是CSS（层叠样式表）技术的升级版本， 于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案， 主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块 CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块 浏览器厂商按CSS节奏快速创新，因此通过采用模块方法， CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性 但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂 渐进增强和优雅降级（面试题）渐进增强（Progressive Enhancement）： 一开始就针对低版本浏览器进行构建页面，完成基本的功能， 然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验 渐进增强相当于向上兼容 优雅降级（Graceful Degradation）： 一开始就构建站点的完整功能，然后针对浏览器测试和修复 比如一开始使用 CSS3 的特性构建了一个应用 然后逐步针对各大浏览器进行 hack 使其可以在低版本 ...

HTML5 新增什么是 HTML5?HTML5 是下一代 HTML 标准 HTML , HTML 4.01 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持 <!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单 对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码 HTML5 的语法内容类型（ContentType） HTML5 的文件扩展符与内容类型保持不变，仍然为".html"或".htm" DOCTYPE 声明 不区分大小写 指定字符集编码 meta charset="UTF-8" 可省略标记的元素 不允许写结束标记的元素：br、col、embed、hr、img、input、、link、meta 可以省略结束标记的元素：li、dt、dd、p、option、c ...

表格 和 表单进阶表格进阶html 结构 表格标题 <caption>标题内容</caption> 数据行分组 <thead></thead> 表头 <tbody></tbody> 表体必需存在的标签 <tfoot></tfoot> 表尾 说明：一个 Table 中，只能包含一个 thead,一个 tfoot, 但可包含多个 tbody,tbody 标签是写表格时必备的标签 数据列分组 <colgroup></colgroup> css 样式 — table border-collapse 样式，规定是否合并表格边框 separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性 collapse 如果可能，边框 ...

CSS 中的 BFC什么是 BFC? BFC（Block Formatting Context）格式化上下文， 是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器 可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部 BFC 的布局规则？1、内部的Box会在垂直方向，一个接一个地放置 2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置） 3、每个元素的margin box的左边， 与包含块border box的左边相接触，即使存在浮动也是如此 4、BFC的区域不会与float box重叠 5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 6、计算BFC的高度时，浮动元素也参与计算 如何触发 BFC?1、body 根元素 2、float的值 不是none 3、position的值 不是static或者relative 4、overflow的值 不是visible 5、displa ...

CSS 中的宽高自适应什么是自适应不同大小设备呈现同样的页面效果，只是文字、图片等的大小不一样，但是相对位置一样 CSS 中的宽高宽高的默认值宽度的默认值100%，就是和父级元素等宽 高度的默认值auto，将由它的子元素的高来决定，也就是说会子元素会撑开父级元素 宽高的最值宽度的最大值 max-width 宽度的最小值 min-width 高度的最大值 max-height 高度的最小值 min-height 注意：IE6及以下版本不识别该组属性 微信聊天案例宽高的自适应1、非浮动元素的父元素高度自适应 不设置高度，高度默认由子元素内容撑开 height: auto; 通过最小高度实现高度自适应 min-height:___px; height: auto; min-height:___px; 2、浮动元素的父元素高度自适应（触发BFC） 设置全屏页面html,body { height: 100%; }

CSS 中的定位HTML 页面的文档流 1、标准文档流 标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式 当前面内容发生了变化，后面的内容位置也会随着发生变化 2、留存弊端 无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素” 显然标准流已经无法满足需求，这就要用到浮动 以及某些元素会出现的特定区域，这就要用到定位 什么是定位？ 浮动可以让多个盒子一行没有缝隙排列显示,经常用于横向排列盒子 定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置,并且可以压住其他盒子 定位的属性 定位 = 定位模式 + 边偏移量 定位模式：一个元素在文档中的定位方式 边偏移量：决定该元素的最终位置 1.是否占据原有空间(是否脱标) 2.以谁为参考系移动位置 定位模式 + 边偏移量 position: static: 静态定位 fixed: 固定定位 sticky: 粘性定位 relative: 相 ...

CSS 中的盒模型什么是盒模型（Box Model）？盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系 可以把所有的HTML元素都看作是一个盒子，它包括：边距、边框、填充以及实际内容 Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像 最终元素的总宽度计算公式是这样的： 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 元素的总高度最终计算公式是这样的： 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距  外边距（Margin）margin：100px 四边相同 margin：100px 200px 上下 左右 margin：100px 200px 300px 上 左右 ...

CSS 中的浮动HTML 页面的文档流1、标准文档流 --- 面试题 标准文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式 当前面内容发生了变化，后面的内容位置也会随着发生变化 2、留存弊端 无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素” 显然标准流已经无法满足需求，这就要用到浮动 以及某些元素会出现的特定区域，这就要用到定位 什么是浮动？浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次 浮动层：给元素的 float 属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框 而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去 块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素 浮动的属性float: none: 默认值。元素不浮动，并会显示在其在文本中出现的位置 left: 元素向左浮动 right: 元素向右浮动 浮动后的div宽度会变成 0，但是其内边框可 ...

CSS 基础什么是 CSSCSS 指 层叠 样式 表 (Cascading Style Sheets) WEB标准中的表现标准语言 简单说就是如何修饰网页信息的显示样式 目前推荐遵循的是W3C发布的CSS3.0 1998年5月21日由w3C正式推出的css2.1 CSS 的语法 由两个主要的部分构成：选择器，以及一条或多条声明 选择器通常是需要改变样式的 HTML 元素 每条声明由一个属性和一个值组成 属性（property）是希望设置的样式属性（style attribute） 属性必须放在花括号中，属性与属性值用冒号连接 当一个属性有多个属性值的时候，属性值与属性值用空格隔开 每条声明用分号结束，最后一条声明可以不加分号，建议还是加上 在书写样式过程中，空格、换行等操作不影响属性显示 eg: 选择器 { 属性1: 属性值; 属性2 : 属性值 } CSS 注释以 /* 开始, 以 */ 结束，快捷键 Ctrl + / 特点： ...

HTML 中的表格和表单HTML 中的表格创建一个表格<table border="" cellspacing="" cellpadding="" width="" height=""> <caption>表格标题</caption> <tr> <th>Header</th> </tr> <tr> <td>Data</td> </tr> </table> 表格由 <table> 标签来定义。 每个表格均有若干行（由 <tr> 标签定义） 每行被分割为若干单元格（由 <td> 标签定义） 字母 th 指表格列标题 字母 td 指表格数据（table data），即数据单元格的内容 表格的表头使用 <th> 标签进行定义 放在 ...