本文详细介绍了Web前端开发中的一些实用快捷键、特殊字符转义、浏览器内核及其兼容性，以及CSS3的边框圆角、盒子阴影、透明度设置、定位技术等特性。此外，还探讨了浮动、清除浮动的方法，以及绝对定位和固定定位的差异。文章进一步讲解了过渡动画、HTML5新增语义标签、音频和视频标签、表单控件等，并提到了CSS3盒模型、背景大小和线性渐变。最后，作者分享了如何实现单行文本省略号和垂直对齐等细节操作。
Ethan:
## sublime快捷键
* tab 补全代码
* ctrl+shift+d 复制一行
* ctrl+shift+k 删除一行
* ctrl+shift+↑（↓） 快速上移或下移一行
* ctrl+k+b 显示后者隐藏侧边栏
* ctrl+l 快速选中一行
* ctrl+f 查找
* ctrl+鼠标单击 选中编辑
Ethan:
### 特殊字符
```html
<!--
< <
> >
©
®
&&
×x
÷÷
±±
°ree;°
²²
³³
¥￥
-->
```
Ethan:
### 浏览器
* 常见的五大浏览器：谷歌、火狐、ie、opera、safari
* 浏览器内核：渲染引擎和js引擎
* 常见浏览器内核：Trident(ie)、Webkit(safari)、Presto(opera)、chromium/Blink(chrome）、Gecko(firefox)
* 对于移动端：Android-webkit、IOS/wp7-safari或者ie的Trident
* Web标准：html(结构)+css(样式)+javascript(行为)
Ethan:
### 边框圆角
* 语法
```css
border-left-top-radius:10px;//设置单独的圆角（正圆切）
border-left-top-radius:100px 200px //设置单独的椭圆切
border-radius:50px;//四条边框圆角相同的连写
border-radius:10px 20px;左上角及右下角圆角为10px 右上角及左下角圆角为20px
border-radius:10px 20px 30px;//左上角为10，左下角及右上角为20px 右下角为20
border-radius:10px 20px 30px 40px;//左上角 右上角 右下角 左下角
border-radius:50%;//设置为正圆，保证当前盒子的为一个正方形
border-radius:50px 100px 10px 20px /20px 40px 100px 150px;//设置椭圆切 水平半径/垂直半径
```
Ethan:
盒子阴影
* 语法：
* 第一个值是阴影的水平偏移量，正值向右，负值向左
* 第二个值是阴影垂直偏移量，正值向下，负值向上
* 第三个值阴影的模糊范围
* 第四个值是阴影大小
* 第五个只是阴影的颜色
* 阴影默认是外阴影
```css
box-shadow: (inset) -20px -10px 20px 2px #666;
/*多组阴影之间用逗号隔开*/
box-shaow:20px 20px 20px 2px #666,inset 10px 20px 2px 2px #f00,
```
### 透明设置
* rgba()设置**单颜色**的透明，a是alpha透明，取值范围0-1,0.5的0可以省略
* opacity:设置元素**整体**的透明度，取值范围0-1
Ethan:
浮动
* 特点：
* 1.浮动的元素会脱离标准流的控制，不占据原来的位置
* 2.浮动可以使（块）元素在一行显示
* 3.浮动只能浮动到父元素的左边和右边，受到父元素`内边距`控制
* 4.浮动元素顶对齐，代码换行没有缝隙(标准流中一行显示的元素是底对齐的，且中间有缝隙)
* 5.浮动元素不会影响标准流里的块元素，只会影响下边的元素
* 6.浮动元素有了`行内块`元素的显示特点：
* 块元素浮动之后，不会默认父元素的宽度，默认宽度高度变成0，内容会撑开盒子宽高
* 行内元素浮动之后，可以设置宽高了
Ethan:
清除浮动：
* 额外标签法：
* 在最后一个浮动元素后面加一个额外标签<div style='clear:both;'></div>不推荐使用
* 给浮动的父元素（亲爹），使用overflow:hidden清除浮动，触发BFC，块级格式化上下文，独立的布局区域，不受到外部因素的干扰
* 弊端:一旦子元素出了父元素的范围（边界），多了部分会被隐藏掉
* 给父元素添加after伪元素清除浮动
```css
.clearfix:after{
content:'';
display:block;
height:0;
clear:both;
visibility:hidden;
}
/*为了兼容ie6-7 hasLayout 渲染引擎内部的一个布局插件*/
.clearfix{
*zoom:1;
}
```
* 给浮动的元素的父元素（亲爹），调用clearfix双伪元素清除浮动
```css
.clearfix:before,.clearfix:after{
content:'';
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
Ethan:
绝对定位absolute
* 特点：
* 1.绝对定位的元素`脱标`，不占据原来的位置
* 2.绝对定位的元素，所有父元素没有定位，位置偏移基于`浏览器`
* 3.绝对定位的元素，如果父元素有定位，位置偏移基于离他最近的使用了定位的父元素偏移
* 4.绝对定位的元素有了`行内块`的显示特点
* 绝对定位的块元素，不会默认父元素的宽，默认宽度为0
* 绝对定位的行内元素，可以设置宽高
### 子绝父相
* 子绝父相：子元素`绝对定位`absolute，父元素`相对定位`relative，子元素的位置偏移基于父元素，父元素不脱标，还占据原来的位置，下边的盒子顶不上来，布局正常
### 固定定位
* 特点：
* 1.固定定位的元素`脱标`，不占据原来的位置
* 2.固定定位的元素的位置偏移基于`浏览器可视窗口`
* 3.固定定位的元素有了`行内块`元素的显示
* 固定定位的块元素不会默认父元素的宽度，默认宽高为0，内容会撑开宽高
* 固定定位的行内元素会转换成行内块元素，可以设置宽高
* 固定定位与绝对定位比较
* `绝对定位`位置偏移基于浏览器的时候，`会随着滚动条（内容）滚动`
* `固定定位`位置偏移基于浏览器可视窗口的时候，`不会随着滚动条（内容）滚动`
> 百分比为单位时候，绝大多数参考的父元素的宽度
>
> 前面学的background-size参考的是盒子宽度-背景图片的宽度=剩余宽度的百分比
### 定位的盒子居中显示
* 当元素的定位时候，margin:0 auto失效（脱标）
* 只能使`标准流`里的块元素水平居中
* 定位盒子居中显示
* 方法1：
```css
.son{
position:absolute;
left:50%;
top:50%;
margin-left:-(向左走自身宽度的一半)
margin-top:-(向上走自身高度的一)
}
```
* 方法2
````css
.son{
width:100px;
height:100px;
//设置这种方式的前提是必须盒子的宽度是设置了的，被内容撑开的宽高无效
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}
````
### 定位元素的堆叠顺序
* z-index:默认值为0，标签越靠后，z-index层叠顺序就越靠前
* 如果属性值相同时，按照书写顺序，后来居上
* 数字后面不加单位
* **注意：z-index只能应用于相对定位，绝对定位，固定定位上，对于标准流和浮动，静态定位无效**
## 元素的显示与隐藏
* display:none:`隐藏对象`，隐藏之后不占位置
* visibility:hidden:`对象隐藏`，隐藏之后还占据位置
## overflow元素的溢出处理
* overflow：visible;溢出可见 `默认值`
* overflow:scroll;不管内容是否溢出，都生成滚动条
* overflow:auto;溢出时候有滚动条，不溢出不生成滚动条
* overflow:hidden;溢出隐藏
* `溢出的内容不占位置`
## 鼠标样式
* cursor:default 默认值 小白
* pointer:小手
* move:移动
* text:文本
* not-allowed 禁止
* help:帮助
## 清除轮廓线
* outline:0/none:清除轮廓线
* resize:none:禁止`文本域`拖拽
## 单行文本生成省略号实现
* 语法：
```css
white-space:nowrap;/*让文本强制一行显示*/
text-overflow:ellipsis;/*将溢出的文字变为省略号*/
overflow:hidden;/*溢出的部分隐藏*/
```
## vertical-align垂直对象方式
* vertical-align:是`行内元素和行块元素`的专有属性
* 控制行内元素、行内块元素、文字垂直对齐，对块元素无效
* baseline默认
* top 顶对齐
* bottom 底对齐
* middle 垂直居中对齐
* vertical-align:bas
Ethan:
过渡动画
* 过渡动画从一种状态到另一种状态（属性值的变化），过渡需要触发条件，通常都`写在开始状态`
* 过渡属性：transition-property:(all 全部属性 多个属性用逗号隔开)
* 过渡时间：transition-duration:1s 必写
* 过渡时间曲线：transition-timing-function:linear/ease(默认)/ease-in/ease-out/ease-in-out
* 过渡的延时：transition-delay:1s
```css
transition:all 1s linear;
```
## html5
### 新增的语义标签
```css
<header>头部</header>
<nav>导航</nav>
<aside>侧边栏</aside>
<article>文章</article>
<section>区块</section>
<footer>底部</footer>
```
### 新增的音频标签
```html
<audio controls=''loop='' autoplay=''>
<source src='小乔.mp3'>
<source src='小乔.wav'>
<source src='小乔.ogg'>
</audio>
```
### 新增的表单控件
```html
<form action=''>
邮箱:<input type='email'><!--必须包含@-->
电话：<input type='tel'>
搜索：<input type='search'>
数字：<input type='number'>
网址：<input type='url'><!--必须包含https://-->
时间：<input type='time'>
日期：<input type='date'>
周:<input type='week'>
</form>
```
### 新增的视频标签
```html
<video controls=''loop='' autoplay='' width='' height=''>
<source src='小乔.mp4'>
<source src='小乔.web'>
<source src='小乔.ogg'>
</video>
```
### 新增的表单属性
* placeholder:占位符
* autofocus:自动获取光标焦点
* autocomplete:自动完成
* on默认值 输入框记住输入的内容
* off输入框不会记住输入的内容
* required 必填项
## css3盒模型
```css
box-sizing:border-box /*怪异模式下，内边距边框不会撑大盒子*/
box-sizing：content-box/*标准的盒模型，内边距，边框会撑大盒子*/
```
## css3背景大小
* background-size:
* cover:背景图片等比例缩放，铺满盒子，有可能显示不完整
* contain:背景图片等比例缩放，显示完整，有可能盒子铺不满
* 写2个数值：
* 第一个值代表背景图片的宽，第二个值代表高
* 通常写一个值，代表宽，高等比例缩放
* 百分比：参考盒子的大小
* 写2个值代表，第一只代表宽，第二个代表高
* 写1个值代表宽，高等比例缩放
## css3线性渐变
```css
background-image:linear-gradient(to top,red,green);
```
> 多组背景图逗号隔开，最后一组分号结束，背景颜色在最后一组
>
> ```html
> <style>
> .box{
> width: 600px;
> height: 400px;
> border: 1px solid #000;
> background: url(images/bg1.png) no-repeat left top ,
> url(images/bg2.png) no-repeat right top,
> url(images/bg3.png) no-repeat right bottom,
> url(images/bg4.png) no-repeat left bottom,
> red url(images/bg5.png) no-repeat center;
> }
> </style>
> ```
>
>
过渡动画
* 过渡动
428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
