整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
我们经常使用CSS，但是却不怎么了解CSS，本文主要对vertical-align、BFC、position中开发过程不怎么注意的特性进行简要总结，从本文中，你将了解到以下内容：
只能应用在display为inline、inline-block、inline-table、table-cell上。
有个高频面试题，“如何使一个不定宽高div垂直水平居中？”，有的萌新竟然回答用vertical-align: middle。这个回答是减分的，至少在某种程度上给人一种感觉CSS基础比较薄弱。
开发中会遇到用字幕x代替关闭icon，用...显示溢出或者加载中。但是会发现字母x、省略号并没有与文本垂直方向居中对齐，这是因为文本默认是基线对齐，x、省略号默认底部在基线处。如下图所示：
如下，为文本对齐demo:
<div class="container">
<span>你好，世界</span>
<span class="more">...</span>
</div>
实际显示效果如下：
如果要实现垂直居中，利用vertical-align，搭配line-height即可，vertical-align不仅可以设置middle/top/bottom/baseline...关键字，也可以设置常用的度量单位，正负值均可，使用比较灵活。为什么要给.more设置line-height属性呢？其实是因为line-height属性可以继承，如果不缩小.more的行高，就会撑大父元素的尺寸。
<style>
.container{
font-size: 64px;
line-height: 64px;
}
.more{
line-height: 16px;
vertical-align: 16px;
}
</style>
BFC全称block formatting context，即“块状格式化上下文”，与外界元素相对独立的一片区域，具有以下特性：
利用BFC的特性，我们可以实现以下功能：
以下CSS属性会触发元素生成BFC结界:
<style>
.container{
/* overflow: hidden; */
/* position: absolute; */
/* float: left; */
}
.left{
float: left;
width: 200px;
height: 200px;
}
</style>
<div class="container">
<div class="left"></div>
</div>
以上代码，container容器高度为0，因为子元素left浮动。我们只需要把container容器转成BFC容器，即可清楚浮动，注释的几种方法都可以。
<style>
.blue, .red-inner {
height: 50px;
margin: 10px 0;
}
.blue {
background: blue;
}
.red-outer {
overflow: hidden;
background: red;
}
</style>
<div class="blue"></div>
<div class="red-outer">
<div class="red-inner">red inner</div>
</div>
左侧固定，右侧自适应。
<style>
.left{
height: 200px;
width: 200px;
float: left;
background-color: burlywood;
}
.right{
height: 200px;
margin-left: 200px;
background-color: cadetblue;
}
</style>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
绝对定位使用场景非常多。绝对定位元素脱离文档流，相对于最近的非 static 祖先元素定位，可以利用left/right/top/bottom定位元素位置。我们通常都是设置垂直方向与水平方向的的位置，如果四个方向都不设置或者四个方向都设置会出现什么彩蛋呢？下文会给出揭晓。
此时元素的宽高是根据元素位置决定的，张鑫旭大佬在《CSS世界》中定义为格式化宽高，如下代码，最终box-item的宽高计算为：width=200 - 50 -50=100px;width=200 - 50 -50=100px;
<style>
.box{
position: relative;
width: 200px;
height: 200px;
margin: 50px;
background-color: bisque;
}
.box-item{
position: absolute;
left: 50px;
right: 50px;
top: 50px;
bottom: 50px;
background-color: coral;
}
</style>
<div class="box">
<div class="box-item"></div>
</div>
这种行为特性对于我们做自适应布局非常有用，而且兼容性非常好，比如我们要做左侧固定宽度，右侧自适应，除了以上BFC的写法，我们还可以采用以下方法：
<style>
.container{
position: absolute;
top: 100px;
bottom: 100px;
left: 0;
right: 0;
}
.left{
position: absolute;
top: 0;
bottom: 0;
width: 200px;
background-color: burlywood;
}
.right{
position: absolute;
left: 200px;
right: 0;
top: 0;
bottom: 0;
background-color: cadetblue;
}
</style>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
这个时候你会发现，元素的宽高时以width/height为准，上述说的格式化宽度、高度并没有生效。这是因为在高度计算过程中，元素的内部尺寸优先级大于外部尺寸，width/height影响的是元素内部尺寸，绝对定位影响的是外部尺寸，当元素绝对定位四个方向都设置值，此时外部尺寸会被内部尺寸覆盖，导致实际元素宽度是width/height的值。
我们经常用margin: 0 auto;实现元素水平居中，但是不定宽高元素垂直水平居中就有些麻烦。但是有个神奇的现象，绝对定位配合margin: auto;，可以实现元素垂直水平居中，如下所示：
<style>
.box{
position: relative;
width: 200px;
height: 200px;
margin: 50px;
background-color: bisque;
}
.box-item{
position: absolute;
margin: auto;
width: 50px;
height: 50px;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: coral;
}
</style>
<div class="box">
<div class="box-item"></div>
</div>
出现这种现象是因为margin:auto本质上是平分元素剩余可用空间，块级元素一般是水平方向自动充满，垂直方向顺序排列。平常我们用margin: 0 auto;之所以能够使块级元素水平居中，是因为水平方向元素存在剩余可用空间，而auto平分剩余可用空间，因此就产生居中效果。而垂直方向不存在剩余可用空间，因此无法垂直居中。
上述demo，box-item之所以能够垂直居中，得益于top/bottom设置了值，使元素产生高度100%的外部尺寸，而width/height固定元素的内部尺寸，使得 外部尺寸高度-内部尺寸高度=元素剩余可用空间高度，而auto等分剩余可用空间，可以使元素达到垂直居中效果。可以尝试调整四个方向的值，看看box-item位置是怎么移动的。
当绝对定位没有设置四周定位尺寸时，会发生神奇的一幕，当前元素没有相对于最近的非 static 祖先元素定位，而是在当前位置不变，并且当前元素脱离文档流，不占据页面空间。这个特性某些情况下非常有用，比如给box-card加一个图标，借助无依赖定位 + padding/margin即可。写法比较简洁，建议尝试一下。
比起其他的开发语言，想要深入了解CSS，并不是一件容易事，大多数人都是停留在用的基础上，知道这个属性/方法，至于为什么会这样了解较少。张鑫旭大佬CSS高度让人叹为观止，继续加油吧！！！
篇介绍了表单的使用，表单有很多控件，比如输入框，密码框、文本域，按钮等。按类型可分如下：
此类控件有很多种类型，使用<input type="类型">语法，常见类型如下：
type 值 | 含义 |
text | 文字字段 |
password | 密码域，用户看不到明文，以*代替 |
radio | 单选按钮 |
checkbox | 多选按钮 |
button | 普通按钮 |
submit | 提交按钮 |
reset | 重置按钮 |
image | 图像域，用图像作为背景的提交按钮 |
hidden | 隐藏域，不可见的输入框 |
file | 文本域，用于上传文件等非文本数据 |
文本输入框和密码框
除了显示形式不一样，其它属性一样，有以下属性：
如下是文本输入框和密码框制作一个登录表单
html代码：
<!DOCTYPE html>
<html>
<body>
<h1>用户登录</h1>
<form action="/demo/html/action_page.php">
<label for="fname">用户名:</label><br>
<input type="text" id="username" name="username" value=""><br>
<label for="lname">密码:</label><br>
<input type="password" id="pwsd" name="pwsd" value=""><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>显示效果：
HTML5 输入类型
除了以上几种类型，HTML5 还增加了多个新的输入类型：
如下代码：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
数字类型（1 到 5 之间）：
<input type="number" name="quantity" min="1" max="5">
IE9 及早期版本不支持 type="number"。<br>
color 选择颜色：
<input type="color" name="color"><br>
生日:
<input type="date" name="bday"><br>
年月：
<input type="month" name="bdaymonth"><br>
年周：
<input type="week" name="week_year"><br>
时间：
<input type="time" name="usr_time"><br>
一定范围
<input type="range" name="points" min="0" max="10"><br>
E-mail:
<input type="email" name="email">
能够在被提交时自动对电子邮件地址进行验证<br>
搜索：
<input type="search" name="googlesearch"><br>
电话：
<input type="tel" name="usrtel">
目前只有 Safari 8 支持 tel 类型。<br>
url：
<input type="url" name="url">
提交时能够自动验证 url 字段<br>
<input type="submit">
</form>
</body>
</html>效果如下：
单选和多选按钮
使用 type=“radio” 和 type=“checkbox” 定义是单选还是多选，除了name和value属性外，单选和多选都有一个 checked属性定义默认选择的项，checked=“true”指选中那个选项，表单会将 checked=“true” 的选型值传递给后台。
如下实例：
<!DOCTYPE html>
<html>
<body>
<h4>单选和多选</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 苹果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陕西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 广东
<br><br>
<input type="submit">
</form>
</body>
</html>显示效果：
单选和多选传递给后台的数据是不一样的，如下会看到地址栏中的数据，多选会发送多个值，后台将会获取一个数组形式的数据。
/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi普通按钮、提交按钮、重置按钮
普通按钮：type=“button”，一般配合脚本使用，语法如下：
<input type="button" name="名称" value="按钮值" onclick="脚本程序" />value 值就是按钮在页面显示的文字，onclick属性定义了脚本事件，这里指单击按钮时所进行的处理。
如下示例：
<!DOCTYPE html>
<html>
<body>
<form>
<input type="button" value="普通按钮">
<input type="button" value="打开窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
</form>
</body>
</html>
单击您好按钮
提交按钮：type=“submit”，用于提交表单内容，是一种特殊按钮。
如刚才的登录表单，提交后会返回结果：
重置按钮：type="reset"，用于清除表单数据，也是一种特殊按钮。
输入数据
点击重置按钮后，表单数据清空
重置清空数据
HTML5 按钮
除了使用input定义按钮，还可以使用 html5 新增的<button> 标签定义按钮，button 使用语法如下：
<form action="/demo/html/action_page.php">
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
</form> 其它输入类控件
隐藏域 —— hidden
文件域 —— file
如下示例：
<form action="/demo/html/action_page.php">
<label for="fname">隐藏域:</label>
<input type="hidden" id="hidden" name="hidden" value=""><br>
<label for="lname">文件域:</label>
<input type="file" id="file" name="file" value=""><br>
<input type="submit" value="提交">
</form> 显示效果
可以看到，隐藏域在页面中不显示，单击文件域选择文件按钮可以选择文件，比如word文件，电子表格文件等，会以非文本方式传送到后台的，常用来实现文件上传功能。
除了input 类型的控件，还有文本域 textarea ，一种特殊的文本框，它与input 文本输入框的区别就是可以输入多行文字，input 文本输入框是单行的无法输入多行文字。
如下示例：
<p>textarea 元素定义多行输入字段。</p>
<form action="/demo/html/action_page.php">
<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
<br><br>
<input type="submit">
</form>效果如下：
rows 属性定义文本域的高度是几行，cols 定义文本域宽度占几列，比如上面定义了高10行宽30列的文本域。
下拉菜单作用和单选按钮类似，只不过它更加节省空间，当要选择的选型很多时，就不适合使用radio空间，所以当选项很多的时候，使用下拉菜单，语法如下：
<select name="名称">
<option value="选项值1" selected>选项1</option>
<option value="选项值2">选项3</option>
更多option......
</select>多选列表和多选按钮类似，一样为了节省空间，当数据选项比较多时，使用多选列表，语法如下：
<select name="名称" size="可看见的列表项数" multiple>
<option value="选项值1" selected>选项1</option>
<option value="选项值2">选项3</option>
更多option......
</select>多选比下拉菜单不同之处是多了一个multiple属性，定义多选的，且表现形式也不一样，不是下拉而是一个列表。
如下代码：
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜单：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多选列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>显示效果：
这里需要注意的是，多选列表多选时需要按住ctrl键同时鼠标单击选择才能多选，效果如下：
到这里，已介绍了大部分的表单控件，现在你可以使用他们制作自己的表单，表单通常在动态网站中使用，这为以后制作动态网站打下基础。
还有许多属性没有讲到，比如html5新增的一些属性和功能，可自行参考 w3cshool 等网站学习，感谢关注，学习愉快！
上篇 ： 前端入门——html 表单
下篇： 前端入门 —— 网页中使用窗口框架
TML5方兴未艾，但也有不少遗憾。下面提了10点希望在HTML6中看到的特性，欢迎评论。
我们可能永远不会解决与压缩编解码器的争斗，但我们可以与之配合。不同的压缩算法可能需要更多的工作来实现，但是它们提供竞争。能对展现在页面上的视频帧提供更多控制的方式会是更好的方案。当前的标准是使用视频中的一系列帧填充一个矩形。然后提供了一个带有注释，字幕和其他内容的文本轨道的控制。一些聪明的人已经开始将注释与其他DOM对象同步。但是如果有回调钩子和同步机制是不是更好？例如，DOM与视频混合的能力如何？
照片在屏幕上看起来要漂亮，需要多少像素？这个答案根据根据设备的不同而不同。即使窗口的大小也会改变最小分辨率。但HTML标准
<img>
标签只能获得一个SRC，它指向一个可能有太多或太少像素的图像文件。如果它太多，浏览器必须降级图像才能显示，这就浪费网络带宽和时间。如果像素太少，效果又太差。更好的HTML协议应该为图像提出所需的宽度或高度，以便服务器可以提供最佳分辨率。
标准的HTML浏览器使用且只是用JavaScript。但由于某些原因，我们需要用script标签的type属性设定为text/javascript来指定语言类型。从html4开始，type一直就没有默认值。
HTML4的建议稿觉得有人可能会使用像text/tcl或text/vbscript这样的类型，但是实际上有没有人使用这些？微软已经弃用了IE11的text/vbscript，而且近年来Sun在使用tcl。
Google正在慢慢推Dart，但包括Dart的Chromium（Chrome的开发版）确有一个不祥的警告 ：“不要使用Dartium作为主浏览器，不要将Dartium分发给用户！”说明Google对Dart也不是很有信心。
但在未来，我们可以拥有更强大的可插拔语言。它将为开发人员增加更多的灵活性和设计选择。会不会把互联网弄坏？如果有一个稳固的开源实现，它就可以被所有浏览器采用。可能很难让网站使用可插入语言来为广泛的受众提供内容 - JavaScript会可以继续拥有广泛的网络基础 - 但是对于使用专门语言的更专业的扩展来说，这可能是一个很好的选择。
想超越JavaScript的开发人员可以有另外一个解决方案，就是将其他语言转换为JavaScript。许多开发人员已经使用一些翻译语言（如CoffeeScript）的预处理器。
杰里米·阿什肯纳斯（Jeremy Ashkenas） 列出来了可以编译成JavaScript的语言列表，范围很广。Lisp，Python，Ruby，Erlang，Scala - 列表还在继续扩大。
这样的提案将会付出代价。当一种语言被交叉编译成JavaScript时，通常会在同一时间进行细化，生成一个更小的更容易通过互联网传输的版本。在部署过程中执行此操作比在每个人的浏览器上执行的效率要高得多。
但是，缩小的版本有其缺点。开放一直是网络的巨大优势之一。我们能够通过阅读通常仍然以人类可读的形式写的JavaScript代码来学习和调试。交叉编译和缩小的代码对于其他人是无价值的。它正在慢慢打破Web的开放性。
在浏览器中执行此转换还有其他优点。每台机器都有不同，转换过程需要利用到RAM大小、视频卡库等知识。当前版本的HTML假定采用JavaScript的一般版本，这使得为本地机器优化代码变得更难。
JavaScript编程的世界已经被jQuery以及其他标准库改造了。然而，几乎每个网站仍然要加载自己加载某个版本的副本。在加载jQuery时浪费的能量可能足以照亮一个小国家，治愈癌症或两者兼而有之。
一些网站使用像Google或Yahoo这样的公司托管的标准缓存版本，这样可以节省带宽，但下一个HTML标准应该比这更好。如果大量设计人员同意，则可以使用浏览器进行分发。这将节省更多时间再次刷新jQuery的缓存版本。
浏览器已经可以共享位置信息。期待更多国家加入。人们通常希望在自己设备的联系信息库里面放入电子邮件地址或电话号码。现在他们必须剪切和粘贴。为什么不让JavaScript挖掘并保存所有的剪切和粘贴？这对移动设备来说是非常棒的。在交互上可以提供细粒度的控制，允许人们来自某些域的代码可以自动访问到联系信息，而其他域不行。
在网络摄像头和手机的多摄像头提供的设备基础上，用户与浏览器交互的场景少不了镜头和麦克风。W3C已经在探索一种向表单添加照片或视频捕获的方法 。一些浏览器已经支持自己的版本，如
webkitGetUserMedia
。很容易想到更多。表单元素还可以访问存储在设备中的存储空间，并且该设备可以更好地控制摄像机和捕获速率。这将让网站与专门的应用程序竞争。
鉴于构建可信硬件是多么困难的事情，因此我们可能会提供很多硬性和快速认证的方式。而浏览器可以为此提供更多的功能。浏览器可以使用嵌入式Key进行签名，而不是Cookie。这些可以以硬化的芯片存储在设备之外，以防止人们提取密钥。向浏览器添加API将允许网站要求更好的数字签名。如果把太多的信任放在其中，这可能是危险的，但这将是cookie和会话身份验证的一个步骤。
文章底部的注释部分只是我们如何注释文章的开始，但是一个标准的结构可以添加与段落、句子、甚至单词相关的注释。复杂的版本甚至可以允许对视频内的图像或某个时间点进行注释。有些网站正在开始提供这些功能，但在标准化API方面会使所有网站和浏览器都以相同的方式处理基本注释。W3C有一个研究该领域并提供基本标准的小组。
HTML标签区分标题，段落和页脚，但还不够多。为什么不创建一个标准的方法来指定其他常见的细节，例如地址或电话号码的部分？当然，用于描绘电子邮件地址的标准标签可以使垃圾邮件发送者的生活变得更轻松，但标准的一组标签可以加速网页抓取工具和搜索引擎，这将有利于我们所有人。W3C一直在探索微格式来标记数据，并曾经认为它们是HTML5的一部分，尽管它们不是。我们可以为地点，时间，日期，出售物品，参考书目以及所有标准数据使用更全面的标记。
*请认真填写需求信息，我们会在24小时内与您取得联系。
