css
1、盒模型
标准W3C盒模型(content-box)width：content
IE盒模型width(border-box)：content+border+padding
通过CSS3属性box-sizing来设定，参数有border-box/content-box/inherit
2、flex
通过display: flex启动，重要属性
justify-content: center;
align-items: center
3、css单位
绝对单位
| 单位 | 简介 |
|---|---|
| px | 像素 (计算机屏幕上的一个点)，1px = 1/96in |
| pt | 磅 (Points) ，1 pt = 1/72 in |
| pc | 12 点活字（Picas），1pc = 12pt = 1/6in |
| in | 英寸（Inches），1in = 96px = 2.54cm |
| cm | 厘米（Centimeters），1cm = 96/2.54px |
| mm | 毫米（Millimeters），1mm = 1/10cm |
| q | Quarter-millimeters，1q = 1/4mm |
相对单位
| 单位 | 简介 |
|---|---|
| % | 百分比，相对于父元素的宽度或者字体大小 |
| em | 相对于当前对象内文本字体的大小，1em = 当前字体的大小，2em = 2*当前字体的大小 |
| rem | （root em）,相对于html标签的字体大小 |
| ex | 当前字体环境中x字母的高度，一个 ex 是一个字体的 x-height (x-height 通常是字体尺寸的一半。) |
| ch | 当前字体环境中0数字的高度 |
| vw | 1%视口（浏览器可视区域）的宽度 |
| vh | 1% 视口（浏览器可视区域）的高度 |
| vmin | 1% 视口（浏览器可视区域）宽度和高度中较小的尺寸 |
| vmax | 1% 视口（浏览器可视区域）宽度和高度中较大的尺寸 |
4、css选择器
| 选择器 | 符号 |
|---|---|
| id | #idName |
| class | .classname |
| 相邻选择器 | ul+div |
| 子选择器 | ul>div |
| 后代选择器 | ul div |
| 通配符 | * |
| 属性选择器 | a[href='xxx'] |
| 伪类选择器 | a:after a:hover |
5、bfc 清除浮动
BFC（块格式化上下文）
以下情况会创建BFC
- 根元素或包含根元素的元素
- 浮动元素 float ＝ left | right 或 inherit（≠ none）
- 绝对定位元素 position ＝ absolute 或 fixed
- display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption
- overflow ＝ hidden | auto 或 scroll (≠ visible)
BFC特性
- BFC 是一个独立的容器，容器内子元素不会影响容器外的元素。反之亦如此。
- 盒子从顶端开始垂直地一个接一个地排列，盒子之间垂直的间距是由 margin 决定的。
- 在同一个 BFC 中，两个相邻的块级盒子的垂直外边距会发生重叠。
- BFC 区域不会和 float box 发生重叠。
- BFC 能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算了。
BFC清除浮动
- 父元素设置 overflow: hidden
- 浮动元素加clearfix类
.clearfix:after{
content: ''
display: block
clear: both
}
6、层叠上下文
z-index
7、常见页面布局
8、响应式布局
9、css预处理，后处理
预处理：sass、LESS、stylus
10、css3新特性, animation和transiton的相关属性, animate和translate
transiton的参数
| 属性 | 值 | 描述 |
|---|---|---|
| transition-property | none,all,property | 指定CSS属性的name，transition效果 |
| transition-duration | time(默认为0) | transition效果需要指定多少秒或毫秒才能完成 |
| transition-timing-function | 见下表 | 指定transition效果的转速曲线 |
| transition-delay | time | 定义transition效果开始的时间 |
transition-timing-function的值
| 值 | 描述 |
|---|---|
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
transition优点在于简单易用，有几个缺陷
-
transition需要事件触发，所以没法在网页加载时自动发生。
-
transition是一次性的，不能重复发生，除非一再触发。
-
transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
-
一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
所以针对以上缺陷，提出了Animation
animation参数
| 值 | 描述 |
|---|---|
| animation-name | 指定要绑定到选择器的关键帧的名称 |
| animation-duration | 动画指定需要多少秒或毫秒完成 |
| animation-timing-function | 设置动画将如何完成一个周期 |
| animation-delay | 设置动画在启动前的延迟间隔。 |
| animation-iteration-count | 定义动画的播放次数。 |
| animation-direction | 指定是否应该轮流反向播放动画。 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-play-state | 指定动画是否正在运行或已暂停。 |
| initial | 设置属性为其默认值。 |
| inherit | 从父元素继承属性。 |
animation-direction的值
| 值 | 描述 |
|---|---|
| normal | 默认值。动画按正常播放。 |
| reverse | 动画反向播放。 |
| alternate | 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 |
| alternate-reverse | 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |
animation-fill-mode的值
| 值 | 描述 |
|---|---|
| none | 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 |
| forwards | 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。 |
| backwards | 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。 |
| both | 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |
11、display哪些取值
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| inline-block | 行内块元素。（CSS2.1 新增的值） |
| list-item | 此元素会作为列表显示。 |
| run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
| table | 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 |
| inline-table | 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。 |
| table-row-group | 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 |
| table-header-group | 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 |
| table-footer-group | 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 |
| table-row | 此元素会作为一个表格行显示（类似 <tr>）。 |
| table-column-group | 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 |
| table-column | 此元素会作为一个单元格列显示（类似 <col>） |
| table-cell | 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） |
| table-caption | 此元素会作为一个表格标题显示（类似 <caption>） |
| inherit | 规定应该从父元素继承 display 属性的值。 |
12、相邻的两个inline-block节点为什么会出现间隔，该如何解决
英文有空格作为词分界，而中文则没有。由空格换行符导致的
解决方法
-
改变代码书写方式。
取消标签与标签之间的空格换行符，
考虑到代码的可读性，废弃 -
改变字符大小。
使用 font-size：0.space { font-size: 0; } .space a{ font-size: 12px }可以去除大部分浏览器的间距，IE7有时会有1px间距，Chrome默认存在字体大小限制。所以需要进一步处理
.space { font-size:0; -webkit-text-size-adjust:none; }据说已经取消了最小字体限制，该行代码应该已经不适用
-
使用letter-spacing。
给父级元素设置一个较大的负值，在元素上将letter-spacing归0.space { letter-spacing: -3px; } .space a { letter-space: 0; }基本适用全浏览器，除Opera最小间距1px
13、meta viewport 移动端适配
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
14、CSS实现宽度自适应100%，宽高16:9的比例的矩形
先计算高度
假设宽为100%，那么高为 h= 9/16 = 56.25%
设置padding-bottom实现
html
<body>
<div class="wrap">
<div class="box">
<p>这是一个16：9的矩形</p>
</div>
</div>
</body>
CSS
* {
margin: 0px;
padding: 0px;
}
.wrap {
width:50%
}
.box {
width: 100%;
height: 0px;
padding-bottom: 56.25%;
background: pink;
position: relative;
}
.box p {
width: 100%;
height: 100%;
position: absolute;
}
15、画三角形
因为padding和margin无法设置颜色
所以三角形的填充颜色 利用border来进行
.triangle {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 100px solid green;
}
16、1像素边框问题
移动端的css里面写了1px，实际确比1px粗， iPhone的devicePixelRatio ==2 而border-width：1px是设备独立像素，所以被释放为物理像素2px，所以比较粗
解决方法
- 媒体查询利用设备像素比缩放，设置小数像素
- border-image方案
- background-image渐变实现
- box-shadow方案
- transform: scale(0.5)
html
1、语义化
HTML的语义化有助于SEO，爬虫抓取更多有效信息，在没有CSS的情况下也能结构分明，方遍开发维护
2、新标签新特性
- 增加的标签
| 标签 | 描述 |
|---|---|
| header | 定义文档头部 |
| footer | 定义文档尾部 |
| nav | 定义文档导航 |
| section | 定义区块 |
| article | 定义页面独立的内容区域 |
| aside | 定义边栏 |
| details | 定义文档描述细节 |
| summary | 标签包含details元素标题 |
| dialog | 定义对话框，比如提示框 |
| canvas | 用于绘画的标签 |
| audio | 音频播放 |
| video | 视频播放 |
- 增强型表单type
| 输入类型 | 描述 |
|---|---|
| color | 选取颜色 |
| date | 从一个日期选择器选取一个日期 |
| datetime | 选择一个日期（UTC时间） |
| datetime-local | 选择一个日期和时间（无时区） |
| 包含一个邮件地址输入域 | |
| month | 选择一个月份 |
| number | 数值的输入域 |
| range | 一定范围内的数字值输入域 |
| search | 用于搜索域 |
| tel | 定义输入电话字段 |
| time | 选择一个时间 |
| url | URL地址的输入域 |
| week | 选择周和年 |
- 新增表单属性
| 属性 | 描述 |
|---|---|
| placeholder | 输入框提示灰色字 |
| required | boolean属性，要求输入域不为空 |
| pattern | 描述了一个正则用于验证input值 |
| min和max属性 | 设置了元素的最小值最大值 |
| step | 为输入域规定合法数字间隔 |
| height和width | 用于image类型input图像高度宽度 |
| autofocus | boolean属性，页面加载自动获得焦点 |
| multiple | boolean属性，规定input元素可选择多个值 |
3、input和textarea的区别
input标签
- 需要指定type属性，如text，password
- 通过size属性指定显示字符长度
- value属性指定初始值
- Maxlength属性指定文本框可以输入的最长长度
- 焦点垂直居中文本框中，单行
textarea标签
- 需要</textarea>来封闭
- 内容写在标签中
- 使用row，col指定textarea大小
- 焦点在左上角，多行
4、用一个div模拟textarea的实现
<!DOCTYPE html>
<html>
<head>
<title>模拟textarea</title>
<style>
#textarea {
width: 300px;
min-height: 120px;
max-height: 300px;
border: 1px solid #333;
overflow-y: auto
}
</style>
</head>
<body>
<div id="textarea" contenteditable="true"></div>
</body>
</html>
5、移动设备忽略将页面中的数字识别为电话号码的方法
<meta name = "format-detection" content = "telephone=no">
网友评论